Merge pull request #19252 from ElectronicBlueberry/workflow-inputs-ac…

…tivity

[24.2] Workflow Inputs Activity

client/package.json

@@ -66,6 +66,7 @@
     "elkjs": "^0.8.2",
     "file-saver": "^2.0.5",
     "flush-promises": "^1.0.2",
+    "font-awesome-6": "npm:@fortawesome/free-solid-svg-icons@6",
     "glob": "^10.3.10",
     "handsontable": "^4.0.0",
     "hsluv": "^1.0.1",

client/src/components/Panels/ActivityPanel.vue

@@ -79,17 +79,6 @@ const hasGoToAll = computed(() => props.goToAllTitle && props.href);
         flex-grow: 1;
         overflow-y: auto;
         position: relative;
-        button:first-child {
-            background: none;
-            border: none;
-            text-align: left;
-            transition: none;
-            width: 100%;
-            border-color: transparent;
-        }
-        button:first-child:hover {
-            background: $gray-200;
-        }
     }
 
     .activity-panel-footer {

client/src/components/Panels/InputPanel.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+import type { WorkflowInput } from "../Workflow/Editor/modules/inputs";
+
+import ActivityPanel from "./ActivityPanel.vue";
+
+const props = defineProps<{
+    inputs: WorkflowInput[];
+}>();
+
+const emit = defineEmits<{
+    (e: "insertModule", id: string, name: string, state: WorkflowInput["stateOverwrites"]): void;
+}>();
+</script>
+
+<template>
+    <ActivityPanel title="Inputs">
+        <div class="input-list">
+            <button
+                v-for="(input, index) in props.inputs"
+                :key="index"
+                :data-id="input.id ?? input.moduleId"
+                class="workflow-input-button"
+                @click="emit('insertModule', input.moduleId, input.title, input.stateOverwrites)">
+                <FontAwesomeIcon class="input-icon" fixed-width :icon="input.icon" />
+                <span class="input-title"> {{ input.title }} </span>
+                <span class="input-description"> {{ input.description }} </span>
+            </button>
+        </div>
+    </ActivityPanel>
+</template>
+
+<style lang="scss" scoped>
+@import "theme/blue.scss";
+
+.input-list {
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.workflow-input-button {
+    border-radius: 0.5rem;
+    border: 1px solid $gray-300;
+    background: transparent;
+
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+        "i t"
+        "d d";
+
+    text-align: left;
+    gap: 0.25rem;
+    align-items: center;
+
+    &:hover,
+    &:focus {
+        background-color: $gray-100;
+        border-color: $brand-primary;
+    }
+
+    &:active {
+        background-color: $gray-200;
+        border-color: $brand-primary;
+    }
+
+    .input-icon {
+        grid-area: i;
+    }
+
+    .input-title {
+        grid-area: t;
+        font-weight: bold;
+    }
+
+    .input-description {
+        grid-area: d;
+    }
+}
+</style>

client/src/components/Panels/ToolBox.vue

@@ -33,7 +33,6 @@ const props = defineProps({
     panelView: { type: String, required: true },
     showAdvanced: { type: Boolean, default: false, required: true },
     panelQuery: { type: String, required: true },
-    editorWorkflows: { type: Array, default: null },
     dataManagers: { type: Array, default: null },
     moduleSections: { type: Array as PropType<Record<string, any>>, default: null },
 });

client/src/components/Panels/ToolPanel.vue

@@ -17,7 +17,6 @@ import Heading from "@/components/Common/Heading.vue";
 
 const props = defineProps({
     workflow: { type: Boolean, default: false },
-    editorWorkflows: { type: Array, default: null },
     dataManagers: { type: Array, default: null },
     moduleSections: { type: Array, default: null },
 });
@@ -198,7 +197,6 @@ watch(
             :panel-query.sync="query"
             :panel-view="currentPanelView"
             :show-advanced.sync="showAdvanced"
-            :editor-workflows="editorWorkflows"
             :data-managers="dataManagers"
             :module-sections="moduleSections"
             @updatePanelView="updatePanelView"

client/src/components/Workflow/Editor/Forms/FormDefault.test.js

@@ -24,6 +24,7 @@ describe("FormDefault", () => {
                     contentId: "id",
                     annotation: "annotation",
                     label: "label",
+                    name: "name",
                     type: "subworkflow",
                     configForm: {
                         inputs: [],
@@ -42,7 +43,7 @@ describe("FormDefault", () => {
 
     it("check initial value and value change", async () => {
         const title = wrapper.find(".portlet-title-text").text();
-        expect(title).toBe("label");
+        expect(title).toBe("name");
         const inputCount = wrapper.findAll("input").length;
         expect(inputCount).toBe(4);
         const outputLabelCount = wrapper.findAll("#__label__output-name").length;

client/src/components/Workflow/Editor/Forms/FormDefault.vue

@@ -97,9 +97,6 @@ const { stepId, contentId, annotation, label, name, type, configForm } = useStep
 const { stepStore } = useWorkflowStores();
 const uniqueErrorLabel = useUniqueLabelError(stepStore, label.value);
 const stepTitle = computed(() => {
-    if (label.value) {
-        return label.value;
-    }
     if (isSubworkflow.value) {
         return name.value;
     } else {

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

@@ -47,11 +47,14 @@
                     workflow
                     :module-sections="moduleSections"
                     :data-managers="dataManagers"
-                    :editor-workflows="workflows"
                     @onInsertTool="onInsertTool"
                     @onInsertModule="onInsertModule"
                     @onInsertWorkflow="onInsertWorkflow"
                     @onInsertWorkflowSteps="onInsertWorkflowSteps" />
+                <InputPanel
+                    v-if="isActiveSideBar('workflow-editor-inputs')"
+                    :inputs="inputs"
+                    @insertModule="onInsertModule" />
                 <WorkflowLint
                     v-else-if="isActiveSideBar('workflow-best-practices')"
                     :untyped-parameters="parameters"
@@ -211,6 +214,7 @@ import { InsertStepAction, useStepActions } from "./Actions/stepActions";
 import { CopyIntoWorkflowAction, SetValueActionHandler } from "./Actions/workflowActions";
 import { defaultPosition } from "./composables/useDefaultStepPosition";
 import { useActivityLogic, useSpecialWorkflowActivities, workflowEditorActivities } from "./modules/activities";
+import { getWorkflowInputs } from "./modules/inputs";
 import { fromSimple } from "./modules/model";
 import { getModule, getVersions, loadWorkflow, saveWorkflow } from "./modules/services";
 import { getStateUpgradeMessages } from "./modules/utilities";
@@ -226,6 +230,7 @@ import WorkflowAttributes from "./WorkflowAttributes.vue";
 import WorkflowGraph from "./WorkflowGraph.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import MarkdownEditor from "@/components/Markdown/MarkdownEditor.vue";
+import InputPanel from "@/components/Panels/InputPanel.vue";
 import ToolPanel from "@/components/Panels/ToolPanel.vue";
 import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
 import UndoRedoStack from "@/components/UndoRedo/UndoRedoStack.vue";
@@ -248,6 +253,7 @@ export default {
         UndoRedoStack,
         WorkflowPanel,
         NodeInspector,
+        InputPanel,
     },
     props: {
         workflowId: {
@@ -270,10 +276,6 @@ export default {
             type: Array,
             required: true,
         },
-        workflows: {
-            type: Array,
-            required: true,
-        },
     },
     setup(props, { emit }) {
         const { datatypes, datatypesMapper, datatypesMapperLoading } = useDatatypesMapper();
@@ -473,6 +475,7 @@ export default {
         );
 
         const { confirm } = useConfirmDialog();
+        const inputs = getWorkflowInputs();
 
         return {
             id,
@@ -517,6 +520,7 @@ export default {
             isNewTempWorkflow,
             saveWorkflowTitle,
             confirm,
+            inputs,
         };
     },
     data() {
@@ -671,8 +675,8 @@ export default {
         onInsertTool(tool_id, tool_name) {
             this._insertStep(tool_id, tool_name, "tool");
         },
-        onInsertModule(module_id, module_name) {
-            this._insertStep(module_name, module_name, module_id);
+        async onInsertModule(module_id, module_name, state) {
+            this._insertStep(module_name, module_name, module_id, state);
         },
         onInsertWorkflow(workflow_id, workflow_name) {
             this._insertStep(workflow_id, workflow_name, "subworkflow");
@@ -921,7 +925,7 @@ export default {
                 this._loadCurrent(this.id, version);
             }
         },
-        _insertStep(contentId, name, type) {
+        async _insertStep(contentId, name, type, state) {
             const action = new InsertStepAction(this.stepStore, this.stateStore, {
                 contentId,
                 name,
@@ -932,22 +936,24 @@ export default {
             this.undoRedoStore.applyAction(action);
             const stepData = action.getNewStepData();
 
-            getModule({ name, type, content_id: contentId }, stepData.id, this.stateStore.setLoadingState).then(
-                (response) => {
-                    const updatedStep = {
-                        ...stepData,
-                        tool_state: response.tool_state,
-                        inputs: response.inputs,
-                        outputs: response.outputs,
-                        config_form: response.config_form,
-                    };
+            const response = await getModule(
+                { name, type, content_id: contentId, tool_state: state },
+                stepData.id,
+                this.stateStore.setLoadingState
+            );
 
-                    this.stepStore.updateStep(updatedStep);
-                    action.updateStepData = updatedStep;
+            const updatedStep = {
+                ...stepData,
+                tool_state: response.tool_state,
+                inputs: response.inputs,
+                outputs: response.outputs,
+                config_form: response.config_form,
+            };
 
-                    this.stateStore.activeNodeId = stepData.id;
-                }
-            );
+            this.stepStore.updateStep(updatedStep);
+            action.updateStepData = updatedStep;
+
+            this.stateStore.activeNodeId = stepData.id;
         },
         async _loadEditorData(data) {
             if (data.name !== undefined) {

client/src/components/Workflow/Editor/modules/activities.ts

@@ -13,6 +13,7 @@ import {
     faWrench,
 } from "@fortawesome/free-solid-svg-icons";
 import { watchImmediate } from "@vueuse/core";
+import { faDiagramNext } from "font-awesome-6";
 import { computed, type Ref } from "vue";
 
 import { type Activity, useActivityStore } from "@/stores/activityStore";
@@ -27,6 +28,15 @@ export const workflowEditorActivities = [
         icon: faPencilAlt,
         visible: true,
     },
+    {
+        title: "Inputs",
+        id: "workflow-editor-inputs",
+        tooltip: "Add input steps to your workflow",
+        description: "Add input steps to your workflow.",
+        icon: faDiagramNext,
+        panel: true,
+        visible: true,
+    },
     {
         title: "Tools",
         id: "workflow-editor-tools",