Merge branch 'automation-guided-tour' into 'develop'

Introduce automation builder guided tour

See merge request baserow/baserow!3789

Author: picklepete

backend/src/baserow/config/settings/utils.py

@@ -50,7 +50,12 @@ def setup_dev_e2e_users_and_instance_id(User, args, kwargs):
                 user = User.objects.get(email=email)
             user.is_staff = True
             user.save()
-            user.profile.completed_guided_tours = ["sidebar", "database", "builder"]
+            user.profile.completed_guided_tours = [
+                "sidebar",
+                "database",
+                "builder",
+                "automation",
+            ]
             user.profile.save()
             logger.info(
                 f"\033[93mCreated staff user: {user.email} with password: {password}\033[0m"

backend/src/baserow/core/populate.py

@@ -28,7 +28,7 @@ def load_test_data():
         user_handler.update_user(
             admin,
             completed_onboarding=True,
-            completed_guided_tours=["sidebar", "database", "builder"],
+            completed_guided_tours=["sidebar", "database", "builder", "automation"],
         )
 
         try:

e2e-tests/fixtures/user.ts

@@ -62,7 +62,7 @@ export async function createUser(
     await getClient(user).patch("user/account/", {
       completed_onboarding: skipOnboarding,
       completed_guided_tours: skipGuidedTours
-        ? ["sidebar", "database", "builder"]
+        ? ["sidebar", "database", "builder", "automation"]
         : [],
     });
   }

web-frontend/modules/automation/components/AutomationHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <header class="layout__col-2-1 header header--space-between">
-    <ul v-if="isDev" class="header__filter">
-      <li class="header__filter-item">
+    <ul class="header__filter">
+      <li v-if="isDev" class="header__filter-item">
         <a data-item-type="settings" class="header__filter-link"
           ><i class="header__filter-icon iconoir-settings"></i>
           <span class="header__filter-name">{{
@@ -12,6 +12,7 @@
       <li class="header__filter-item">
         <a
           data-item-type="history"
+          data-highlight="automation-history"
           class="header__filter-link"
           :class="{ 'active--primary': activeSidePanel === 'history' }"
           @click="historyClick()"
@@ -22,6 +23,18 @@
         </a>
       </li>
       <li class="header__filter-item">
+        <a
+          data-highlight="automation-docs"
+          class="header__filter-link"
+          target="_blank"
+          href="https://baserow.io/user-docs/workflow-automation"
+          ><i class="header__filter-icon iconoir-help-circle"></i>
+          <span class="header__filter-name">{{
+            $t('automationHeader.docsBtn')
+          }}</span>
+        </a>
+      </li>
+      <li v-if="isDev" class="header__filter-item">
         <a
           data-item-type="debug"
           class="header__filter-link"
@@ -57,6 +70,7 @@
         </template>
         <SwitchInput
           small
+          data-highlight="automation-workflow-state"
           :value="statusSwitch"
           :disabled="isDisabled || !publishedOn"
           @input="toggleStatusSwitch"
@@ -72,6 +86,7 @@
         <Button
           :icon="testRunEnabled ? 'iconoir-cancel' : 'iconoir-play'"
           type="secondary"
+          data-highlight="automation-test-run"
           @click="toggleTestRun"
           >{{
             testRunEnabled
@@ -80,6 +95,7 @@
           }}</Button
         >
         <Button
+          data-highlight="automation-publish"
           :loading="isPublishing"
           :disabled="isPublishing || !canPublishWorkflow"
           @click="publishWorkflow()"

web-frontend/modules/automation/components/workflow/WorkflowEdge.vue

@@ -18,6 +18,7 @@
         @drop="handleDrop"
       ></div>
       <WorkflowAddBtnNode
+        data-highlight="automation-add-node-btn"
         class="workflow-edge__add-button"
         :class="{
           'workflow-edge__add-button--hover': isDragOver,

web-frontend/modules/automation/components/workflow/WorkflowNode.vue

@@ -3,6 +3,11 @@
     <WorkflowNodeContent
       ref="nodeComponent"
       :node="node"
+      :data-highlight="
+        node.previous_node_id === null
+          ? 'automation-trigger'
+          : 'automation-action'
+      "
       :selected="node.id === selectedNodeId"
       :debug="debug"
       :read-only="readOnly"

web-frontend/modules/automation/editorSidePanelTypes.js

@@ -7,6 +7,10 @@ export class editorSidePanelType extends Registerable {
     return null
   }
 
+  get guidedTourAttr() {
+    return ''
+  }
+
   isDeactivated() {
     return false
   }
@@ -21,6 +25,10 @@ export class NodeEditorSidePanelType extends editorSidePanelType {
     return 'node'
   }
 
+  get guidedTourAttr() {
+    return 'automation-node-sidepanel'
+  }
+
   get component() {
     return NodeSidePanel
   }
@@ -35,6 +43,10 @@ export class HistoryEditorSidePanelType extends editorSidePanelType {
     return 'history'
   }
 
+  get guidedTourAttr() {
+    return 'automation-history-sidepanel'
+  }
+
   get component() {
     return HistorySidePanel
   }

web-frontend/modules/automation/guidedTourTypes.js

@@ -0,0 +1,197 @@
+import {
+  GuidedTourStep,
+  GuidedTourType,
+} from '@baserow/modules/core/guidedTourTypes'
+
+class WelcomeGuidedTourStep extends GuidedTourStep {
+  get title() {
+    return this.app.i18n.t('welcomeGuidedTourStep.title')
+  }
+
+  get content() {
+    return this.app.i18n.t('welcomeGuidedTourStep.content')
+  }
+
+  get selectors() {
+    return []
+  }
+
+  get position() {
+    return 'center'
+  }
+}
+
+class TriggerGuidedTourStep extends GuidedTourStep {
+  get title() {
+    return this.app.i18n.t('triggerGuidedTourStep.title')
+  }
+
+  get content() {
+    return this.app.i18n.t('triggerGuidedTourStep.content')
+  }
+
+  get selectors() {
+    return ['[data-highlight="automation-trigger"]']
+  }
+
+  get position() {
+    return 'bottom-center'
+  }
+}
+
+class ActionGuidedTourStep extends GuidedTourStep {
+  get title() {
+    return this.app.i18n.t('actionGuidedTourStep.title')
+  }
+
+  get content() {
+    return this.app.i18n.t('actionGuidedTourStep.content')
+  }
+
+  get selectors() {
+    return ['[data-highlight="automation-add-node-btn"]']
+  }
+
+  get position() {
+    return 'bottom-center'
+  }
+}
+
+class NodeSidepanelGuidedTourStep extends GuidedTourStep {
+  get title() {
+    return this.app.i18n.t('nodeSidepanelGuidedTourStep.title')
+  }
+
+  get content() {
+    return this.app.i18n.t('nodeSidepanelGuidedTourStep.content')
+  }
+
+  get selectors() {
+    return ['[data-highlight="automation-node-sidepanel"]']
+  }
+
+  get position() {
+    return 'left-top'
+  }
+}
+
+class HistoryGuidedTourStep extends GuidedTourStep {
+  get title() {
+    return this.app.i18n.t('historyGuidedTourStep.title')
+  }
+
+  get content() {
+    return this.app.i18n.t('historyGuidedTourStep.content')
+  }
+
+  get selectors() {
+    return ['[data-highlight="automation-history"]']
+  }
+
+  get position() {
+    return 'bottom-left'
+  }
+}
+
+class TestRunGuidedTourStep extends GuidedTourStep {
+  get title() {
+    return this.app.i18n.t('testRunGuidedTourStep.title')
+  }
+
+  get content() {
+    return this.app.i18n.t('testRunGuidedTourStep.content')
+  }
+
+  get selectors() {
+    return ['[data-highlight="automation-test-run"]']
+  }
+
+  get position() {
+    return 'bottom-right'
+  }
+}
+
+class PublishGuidedTourStep extends GuidedTourStep {
+  get title() {
+    return this.app.i18n.t('publishGuidedTourStep.title')
+  }
+
+  get content() {
+    return this.app.i18n.t('publishGuidedTourStep.content')
+  }
+
+  get selectors() {
+    return ['[data-highlight="automation-publish"]']
+  }
+
+  get position() {
+    return 'bottom-right'
+  }
+}
+
+class StateGuidedTourStep extends GuidedTourStep {
+  get title() {
+    return this.app.i18n.t('workflowStateGuidedTourStep.title')
+  }
+
+  get content() {
+    return this.app.i18n.t('workflowStateGuidedTourStep.content')
+  }
+
+  get selectors() {
+    return ['[data-highlight="automation-workflow-state"]']
+  }
+
+  get position() {
+    return 'bottom-center'
+  }
+}
+
+class DocsGuidedTourStep extends GuidedTourStep {
+  get title() {
+    return this.app.i18n.t('docsGuidedTourStep.title')
+  }
+
+  get content() {
+    return this.app.i18n.t('docsGuidedTourStep.content')
+  }
+
+  get selectors() {
+    return ['[data-highlight="automation-docs"]']
+  }
+
+  get position() {
+    return 'bottom-left'
+  }
+}
+
+export class AutomationGuidedTourType extends GuidedTourType {
+  static getType() {
+    return 'automation'
+  }
+
+  get steps() {
+    return [
+      new WelcomeGuidedTourStep(this.app),
+      new TriggerGuidedTourStep(this.app),
+      new ActionGuidedTourStep(this.app),
+      new NodeSidepanelGuidedTourStep(this.app),
+      new HistoryGuidedTourStep(this.app),
+      new TestRunGuidedTourStep(this.app),
+      new PublishGuidedTourStep(this.app),
+      new StateGuidedTourStep(this.app),
+      new DocsGuidedTourStep(this.app),
+    ]
+  }
+
+  get order() {
+    return 300
+  }
+
+  isActive() {
+    return (
+      this.app.store.getters['routeMounted/routeMounted']?.name ===
+      'automation-workflow'
+    )
+  }
+}

web-frontend/modules/automation/locales/en.json

@@ -1,4 +1,41 @@
+
 {
+  "welcomeGuidedTourStep": {
+    "title": "Welcome to Baserow Automations!",
+    "content": "Let's take a quick tour. You'll see how to set up triggers, add actions, test your workflow, and publish it — no coding required."
+  },
+  "triggerGuidedTourStep": {
+    "title": "Workflows start with a trigger",
+    "content": "Every workflow begins with a trigger. By default, this is an interval trigger, but you can replace it with other types to suit your needs. Triggers can be replaced, but not deleted."
+  },
+  "actionGuidedTourStep": {
+    "title": "Workflows then execute actions",
+    "content": "Add one or more actions after your trigger to define what the workflow should do. Click the highlighted button to get started."
+  },
+  "nodeSidepanelGuidedTourStep": {
+    "title": "Configure your steps",
+    "content": "Select a trigger or action to configure it in the side panel. Each step's settings can be adjusted here."
+  },
+  "testRunGuidedTourStep": {
+    "title": "Test your workflow",
+    "content": "When you're ready, start a test run to see your workflow in action. The trigger will run once to simulate a full execution."
+  },
+  "historyGuidedTourStep": {
+    "title": "View workflow history",
+    "content": "Use the history panel to review past test runs and published executions. It's a great way to debug or confirm results."
+  },
+  "publishGuidedTourStep": {
+    "title": "Publish your workflow",
+    "content": "Once you've tested and refined your setup, publish your workflow to make it live. Its trigger will now run automatically on schedule."
+  },
+  "workflowStateGuidedTourStep": {
+    "title": "Control workflow state",
+    "content": "From here, you can pause or resume your workflow at any time. You're always in control of whether it's active or disabled."
+  },
+  "docsGuidedTourStep": {
+    "title": "Explore the documentation",
+    "content": "If you ever get stuck or want to learn more, click the highlighted button for detailed guides and FAQs about building automations in Baserow."
+  },
   "sidebarComponentAutomation": {
     "createAutomationWorkflow": "New workflow"
   },
@@ -43,6 +80,7 @@
     "publishBtn": "Publish",
     "settingsBtn": "Settings",
     "historyBtn": "History",
+    "docsBtn": "Docs",
     "switchLabelDraft": "Draft",
     "switchLabelDisabled": "Disabled",
     "switchLabelPaused": "Paused",