FEATURE: Visual workflow editing

assets/javascripts/discourse/admin/components/workflow-back-button.gjs → admin/assets/javascripts/discourse/components/workflow-back-button.gjs

@@ -1,6 +1,6 @@
 import { LinkTo } from "@ember/routing";
-import { or } from "truth-helpers";
-import dIcon from "discourse-common/helpers/d-icon";
+import dIcon from "discourse/helpers/d-icon";
+import { or } from "discourse/truth-helpers";
 import { i18n } from "discourse-i18n";
 
 export default <template>

assets/javascripts/discourse/admin/components/workflow-deep-link-button.gjs → admin/assets/javascripts/discourse/components/workflow-deep-link-button.gjs

@@ -1,6 +1,6 @@
 import { LinkTo } from "@ember/routing";
-import { or } from "truth-helpers";
-import dIcon from "discourse-common/helpers/d-icon";
+import dIcon from "discourse/helpers/d-icon";
+import { or } from "discourse/truth-helpers";
 import { i18n } from "discourse-i18n";
 
 export default <template>

assets/javascripts/discourse/admin/components/workflow-editor.gjs → admin/assets/javascripts/discourse/components/workflow-editor.gjs

@@ -15,6 +15,7 @@ import DToggleSwitch from "discourse/components/d-toggle-switch";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import I18n, { i18n } from "discourse-i18n";
 import WorkflowStepListEditor from "./workflow-step-list-editor";
+import WorkflowVisualEditor from "./workflow-visual-editor";
 
 export default class WorkflowEditor extends Component {
   @service adminPluginNavManager;
@@ -26,6 +27,25 @@ export default class WorkflowEditor extends Component {
   @tracked isSaving = false;
   @tracked editingModel = null;
   @tracked showDelete = false;
+  @tracked stepsView = "list";
+
+  get showingStepsList() {
+    return this.stepsView === "list";
+  }
+
+  get showingStepsVisual() {
+    return this.stepsView === "visual";
+  }
+
+  @action
+  showStepsList() {
+    this.stepsView = "list";
+  }
+
+  @action
+  showStepsVisual() {
+    this.stepsView = "visual";
+  }
 
   @action
   updateModel() {
@@ -266,13 +286,45 @@ export default class WorkflowEditor extends Component {
         </div>
       {{/if}}
       {{#if this.showSteps}}
-        <div class="control-group">
-          <WorkflowStepListEditor
-            class="workflow-editor__steps"
-            @workflow={{@workflow}}
-            @disabled={{this.editingModel.system}}
-            @onChange={{this.stepsChanged}}
-          />
+        <div class="control-group workflow-editor__steps-panel">
+          <div class="workflow-editor__steps-tabs">
+            <button
+              type="button"
+              class={{if
+                this.showingStepsList
+                "btn btn-primary workflow-editor__steps-tab"
+                "btn btn-default workflow-editor__steps-tab"
+              }}
+              {{on "click" this.showStepsList}}
+            >
+              {{i18n "admin.discourse_workflow.workflows.steps.tabs.list"}}
+            </button>
+            <button
+              type="button"
+              class={{if
+                this.showingStepsVisual
+                "btn btn-primary workflow-editor__steps-tab"
+                "btn btn-default workflow-editor__steps-tab"
+              }}
+              {{on "click" this.showStepsVisual}}
+            >
+              {{i18n "admin.discourse_workflow.workflows.steps.tabs.visual"}}
+            </button>
+          </div>
+
+          {{#if this.showingStepsList}}
+            <WorkflowStepListEditor
+              class="workflow-editor__steps"
+              @workflow={{@workflow}}
+              @disabled={{this.editingModel.system}}
+              @onChange={{this.stepsChanged}}
+            />
+          {{else}}
+            <WorkflowVisualEditor
+              @workflow={{@workflow}}
+              @disabled={{this.editingModel.system}}
+            />
+          {{/if}}
         </div>
       {{/if}}
       <div class="control-group workflow-editor__action_panel">

assets/javascripts/discourse/admin/components/workflow-link-button.gjs → admin/assets/javascripts/discourse/components/workflow-link-button.gjs

@@ -1,6 +1,6 @@
 import { LinkTo } from "@ember/routing";
-import { or } from "truth-helpers";
-import dIcon from "discourse-common/helpers/d-icon";
+import dIcon from "discourse/helpers/d-icon";
+import { or } from "discourse/truth-helpers";
 import { i18n } from "discourse-i18n";
 
 export default <template>

assets/javascripts/discourse/admin/components/workflow-step-list-editor.gjs → admin/assets/javascripts/discourse/components/workflow-step-list-editor.gjs

@@ -13,18 +13,22 @@ import DToggleSwitch from "discourse/components/d-toggle-switch";
 import categoryLink from "discourse/helpers/category-link";
 import concatClass from "discourse/helpers/concat-class";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { bind } from "discourse-common/utils/decorators";
+import { bind } from "discourse/lib/decorators";
 import { i18n } from "discourse-i18n";
 import WorkflowLinkButton from "./workflow-link-button";
 import WorkflowStepEditor from "./workflow-step-editor";
 
 export default class WorkflowStepsListEditor extends Component {
   @service adminPluginNavManager;
   @service store;
-  @tracked currentWorkflowStep = this.args.currentWorkflowStep;
+
   @tracked workflowSteps = [];
   @tracked workflowStepsPresent = false;
 
+  get currentWorkflowStep() {
+    return this.args.currentWorkflowStep;
+  }
+
   get newStep() {
     return this.store.createRecord("workflow-step", {
       workflow_id: this.args.workflow.id,

assets/javascripts/discourse/admin/components/workflow-step-option-editor.gjs → admin/assets/javascripts/discourse/components/workflow-step-option-editor.gjs

@@ -8,17 +8,14 @@ import { later } from "@ember/runloop";
 import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import DropdownSelectBox from "discourse/select-kit/components/dropdown-select-box";
 import I18n, { i18n } from "discourse-i18n";
-import DropdownSelectBox from "select-kit/components/dropdown-select-box";
 import WorkflowBackButton from "./workflow-back-button";
 
 export default class WorkflowStepOptionEditor extends Component {
-  @service adminPluginNavManager;
   @service router;
-  @service store;
   @service dialog;
   @service toasts;
-  @service siteSettings;
 
   @tracked isSaving = false;
   @tracked editingModel = null;

assets/javascripts/discourse/admin/components/workflow-step-option-list-editor.gjs → admin/assets/javascripts/discourse/components/workflow-step-option-list-editor.gjs

@@ -10,17 +10,21 @@ import DButton from "discourse/components/d-button";
 import DPageSubheader from "discourse/components/d-page-subheader";
 import concatClass from "discourse/helpers/concat-class";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { bind } from "discourse-common/utils/decorators";
+import { bind } from "discourse/lib/decorators";
 import { i18n } from "discourse-i18n";
 import WorkflowLinkButton from "./workflow-link-button";
 import WorkflowStepOptionEditor from "./workflow-step-option-editor";
 
 export default class WorkflowStepOptionsListEditor extends Component {
   @service store;
-  @tracked currentWorkflowStepOption = this.args.currentWorkflowStepOption;
+
   @tracked workflowStepOptions = [];
   @tracked workflowStepOptionsPresent = false;
 
+  get currentWorkflowStepOption() {
+    return this.args.currentWorkflowStepOption;
+  }
+
   get newStepOption() {
     return this.store.createRecord("workflow-step-option", {
       workflow_step_id: this.args.workflowStep.id,