UI & API for Supporting Best Practice Workflows

client/src/components/Workflow/Editor/Attributes.test.js

@@ -1,5 +1,6 @@
 import { mount, createLocalVue } from "@vue/test-utils";
 import Attributes from "./Attributes";
+import { LegacyParameters } from "./modules/utilities";
 
 jest.mock("app");
 
@@ -9,12 +10,15 @@ const TEST_NAME = "workflow_name";
 describe("Attributes", () => {
     it("test attributes", async () => {
         const localVue = createLocalVue();
+        const legacyParameters = new LegacyParameters();
+        legacyParameters.getParameter("workflow_parameter_0");
+        legacyParameters.getParameter("workflow_parameter_1");
         const wrapper = mount(Attributes, {
             propsData: {
                 id: "workflow_id",
                 name: TEST_NAME,
                 tags: ["workflow_tag_0", "workflow_tag_1"],
-                parameters: ["workflow_parameter_0", "workflow_parameter_1"],
+                parameters: legacyParameters,
                 versions: ["workflow_version_0"],
                 annotation: TEST_ANNOTATION,
             },

client/src/components/Workflow/Editor/Attributes.vue

@@ -19,8 +19,8 @@
         <div v-if="hasParameters" id="workflow-parameters-area" class="mt-2">
             <b>Parameters</b>
             <b-list-group>
-                <b-list-group-item v-for="[key, p] in parameters.entries()" :key="key"
-                    >{{ key + 1 }}: {{ p }}
+                <b-list-group-item v-for="[key, p] in parameters.parameters.entries()" :key="key"
+                    >{{ key + 1 }}: {{ p.name }}
                 </b-list-group-item>
             </b-list-group>
         </div>
@@ -59,6 +59,7 @@ import Vue from "vue";
 import BootstrapVue from "bootstrap-vue";
 import moment from "moment";
 import { Services } from "components/Workflow/services";
+import { LegacyParameters } from "components/Workflow/Editor/modules/utilities";
 import Tags from "components/Common/Tags";
 import LicenseSelector from "components/License/LicenseSelector";
 import CreatorEditor from "components/SchemaOrg/CreatorEditor";
@@ -104,7 +105,7 @@ export default {
             default: null,
         },
         parameters: {
-            type: Array,
+            type: LegacyParameters,
             default: null,
         },
     },
@@ -132,7 +133,7 @@ export default {
             return creator;
         },
         hasParameters() {
-            return this.parameters.length > 0;
+            return this.parameters && this.parameters.parameters.length > 0;
         },
         versionOptions() {
             const versions = [];

client/src/components/Workflow/Editor/Index.vue

@@ -93,6 +93,7 @@
                                     @onLayout="onLayout"
                                     @onEdit="onEdit"
                                     @onAttributes="onAttributes"
+                                    @onLint="onLint"
                                 />
                             </div>
                         </div>
@@ -115,6 +116,19 @@
                                     @onLicense="onLicense"
                                     @onCreator="onCreator"
                                 />
+                                <WorkflowLint
+                                    id="lint-panel"
+                                    class="right-content"
+                                    ref="lint"
+                                    style="display: none;"
+                                    :legacy-parameters="parameters"
+                                    :annotation="annotation"
+                                    :creator="creator"
+                                    :license="license"
+                                    :nodes="nodes"
+                                    @onAttributes="onAttributes"
+                                    @refactor="_prepareForRefactor"
+                                />
                                 <div id="right-content" class="right-content" />
                             </div>
                         </div>
@@ -127,14 +141,15 @@
 
 <script>
 import { getDatatypesMapper } from "components/Datatypes";
-import { getModule, getVersions, saveWorkflow, loadWorkflow } from "./modules/services";
+import { getModule, getVersions, saveWorkflow, loadWorkflow, refactor } from "./modules/services";
 import {
     showWarnings,
     showUpgradeMessage,
     copyIntoWorkflow,
-    getWorkflowParameters,
+    getLegacyWorkflowParameters,
     showAttributes,
     showForm,
+    showLint,
     saveAs,
 } from "./modules/utilities";
 import WorkflowCanvas from "./modules/canvas";
@@ -144,6 +159,7 @@ import ToolBoxWorkflow from "components/Panels/ToolBoxWorkflow";
 import SidePanel from "components/Panels/SidePanel";
 import { getAppRoot } from "onload/loadConfig";
 import reportDefault from "./reportDefault";
+import WorkflowLint from "./Lint";
 import { hide_modal, show_message, show_modal } from "layout/modal";
 import WorkflowAttributes from "./Attributes";
 import ZoomControl from "./ZoomControl";
@@ -159,6 +175,7 @@ export default {
         WorkflowAttributes,
         ZoomControl,
         WorkflowNode,
+        WorkflowLint,
     },
     props: {
         id: {
@@ -196,7 +213,7 @@ export default {
             markdownConfig: null,
             markdownText: null,
             versions: [],
-            parameters: [],
+            parameters: null,
             zoomLevel: 7,
             steps: {},
             hasChanges: false,
@@ -255,6 +272,45 @@ export default {
             showForm(this, node, this.datatypes);
             this.canvasManager.drawOverview();
         },
+        _prepareForRefactor(actions) {
+            if (this.hasChanges) {
+                const r = window.confirm(
+                    "You've made changes to your workflow that need to be saved before attempting the requested action. Save those changes and continue?"
+                );
+                if (r == false) {
+                    return;
+                }
+                show_message("Saving workflow...", "progress");
+                return saveWorkflow(this)
+                    .then((data) => {
+                        this._refactor(actions);
+                    })
+                    .catch((response) => {
+                        show_modal("Saving workflow failed, cannot apply requested changes...", response, {
+                            Ok: hide_modal,
+                        });
+                    });
+            } else {
+                this._refactor(actions);
+            }
+        },
+        _refactor(actions) {
+            show_message("Pre-checking requested workflow changes (dry run)...", "progress");
+            refactor(this, this.id, actions, true) // dry run
+                .then((data) => {
+                    show_message("Applying requested workflow changes...", "progress");
+                    refactor(this, this.id, actions)
+                        .then((data) => {
+                            this._loadEditorData(data);
+                        })
+                        .catch((response) => {
+                            show_modal("Reworking workflow failed...", response, { Ok: hide_modal });
+                        });
+                })
+                .catch((response) => {
+                    show_modal("Reworking workflow failed...", response, { Ok: hide_modal });
+                });
+        },
         onAdd(node) {
             this.nodes[node.id] = node;
         },
@@ -319,7 +375,13 @@ export default {
         },
         onAttributes() {
             showAttributes();
-            this.parameters = getWorkflowParameters(this.nodes);
+            this._ensureParametersSet();
+        },
+        onLint() {
+            this._ensureParametersSet();
+            // See notes in Lint.vue about why refresh is needed.
+            this.$refs.lint.refresh();
+            showLint();
         },
         onEdit() {
             this.isCanvas = true;
@@ -376,36 +438,42 @@ export default {
                 this._loadCurrent(this.id, version);
             }
         },
-        _insertStep(conentId, name, type) {
+        _ensureParametersSet() {
+            this.parameters = getLegacyWorkflowParameters(this.nodes);
+        },
+        _insertStep(contentId, name, type) {
             if (!this.isCanvas) {
                 this.isCanvas = true;
                 return;
             }
             Vue.set(this.steps, this.nodeIndex++, {
                 name: name,
-                content_id: conentId,
+                content_id: contentId,
                 type: type,
             });
         },
+        _loadEditorData(data) {
+            const report = data.report || {};
+            const markdown = report.markdown || reportDefault;
+            this.markdownText = markdown;
+            this.markdownConfig = report;
+            const has_changes = showUpgradeMessage(data);
+            this.license = data.license;
+            this.creator = data.creator;
+            getVersions(this.id).then((versions) => {
+                this.versions = versions;
+            });
+            Vue.nextTick(() => {
+                this.canvasManager.drawOverview();
+                this.canvasManager.scrollToNodes();
+                this.hasChanges = has_changes;
+            });
+        },
         _loadCurrent(id, version) {
             show_message("Loading workflow...", "progress");
             loadWorkflow(this, id, version)
                 .then((data) => {
-                    const report = data.report || {};
-                    const markdown = report.markdown || reportDefault;
-                    this.markdownText = markdown;
-                    this.markdownConfig = report;
-                    const has_changes = showUpgradeMessage(data);
-                    this.license = data.license;
-                    this.creator = data.creator;
-                    getVersions(this.id).then((versions) => {
-                        this.versions = versions;
-                    });
-                    Vue.nextTick(() => {
-                        this.canvasManager.drawOverview();
-                        this.canvasManager.scrollToNodes();
-                        this.hasChanges = has_changes;
-                    });
+                    this._loadEditorData(data);
                 })
                 .catch((response) => {
                     show_modal("Loading workflow failed...", response, { Ok: hide_modal });