Merge pull request #16393 from nsoranzo/merge_release_23.1

Merge release_23.1 into dev

.github/workflows/lint.yaml

@@ -54,4 +54,6 @@ jobs:
       - name: Run mypy checks
         run: tox -e mypy
       - uses: psf/black@stable
+        with:
+          version: "23.3.0"
       - uses: isort/isort-action@master

client/src/components/Panels/Common/ToolPanelLabel.vue

@@ -1,12 +1,7 @@
 <template>
-    <div
-        v-b-tooltip.topright.hover
-        class="tool-panel-label"
-        :title="description"
-        @mouseover="hover = true"
-        @mouseleave="hover = false">
+    <div v-b-tooltip.topright.hover class="tool-panel-label" tabindex="0" :title="description">
         {{ definition.text }}
-        <ToolPanelLinks :show="hover" :links="definition.links" />
+        <ToolPanelLinks :links="definition.links" />
     </div>
 </template>
 
@@ -21,15 +16,26 @@ export default {
             required: true,
         },
     },
-    data() {
-        return {
-            hover: false,
-        };
-    },
     computed: {
         description() {
             return this.definition.description;
         },
     },
 };
 </script>
+
+<style scoped lang="scss">
+.tool-panel-label {
+    &:deep(.tool-panel-links) {
+        display: none;
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-within {
+        &:deep(.tool-panel-links) {
+            display: inline;
+        }
+    }
+}
+</style>

client/src/components/Panels/Common/ToolPanelLinks.vue

@@ -1,7 +1,8 @@
 <template>
-    <span v-if="link">
+    <span v-if="link" class="tool-panel-links">
         <a :href="link" target="_blank" style="display: inline">
-            <font-awesome-icon v-show="show" v-b-tooltip.hover title="Link" icon="external-link-alt" />
+            <font-awesome-icon v-b-tooltip.hover title="Link" icon="external-link-alt" />
+            <span class="sr-only">Link</span>
         </a>
     </span>
 </template>
@@ -18,9 +19,7 @@ export default {
     props: {
         links: {
             type: Object,
-        },
-        show: {
-            type: Boolean,
+            default: () => ({}),
         },
     },
     computed: {

client/src/components/Panels/Common/ToolSection.vue

@@ -3,22 +3,21 @@
         <div
             v-b-tooltip.topright.hover
             :class="['toolSectionTitle', `tool-menu-section-${sectionName}`]"
-            :title="title"
-            @mouseover="hover = true"
-            @mouseleave="hover = false"
-            @focus="hover = true"
-            @blur="hover = false">
+            :title="title">
             <a class="title-link" href="javascript:void(0)" @click="toggleMenu()">
                 <span class="name">
                     {{ name }}
                 </span>
-                <ToolPanelLinks :links="links" :show="hover" />
+                <ToolPanelLinks :links="links" />
             </a>
         </div>
         <transition name="slide">
             <div v-if="opened">
                 <template v-for="[key, el] in sortedElements">
-                    <ToolPanelLabel v-if="category.text" :key="key" :definition="el" />
+                    <ToolPanelLabel
+                        v-if="category.text || el.model_class === 'ToolSectionLabel'"
+                        :key="key"
+                        :definition="el" />
                     <tool
                         v-else
                         :key="key"
@@ -253,4 +252,18 @@ export default {
     overflow: hidden;
     max-height: 0;
 }
+
+.title-link {
+    &:deep(.tool-panel-links) {
+        display: none;
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-within {
+        &:deep(.tool-panel-links) {
+            display: inline;
+        }
+    }
+}
 </style>

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

@@ -639,27 +639,25 @@ export default {
                 this.isCanvas = true;
                 return;
             }
-            const stepData = {
-                name: name,
-                content_id: contentId,
-                input_connections: {},
-                type: type,
-                outputs: [],
-                position: defaultPosition(this.graphOffset, this.transform),
-                post_job_actions: {},
-            };
-            const { id } = this.stepStore.addStep(stepData);
-            getModule(stepData, id, this.stateStore.setLoadingState).then((response) => {
-                this.stepStore.updateStep({
-                    ...stepData,
-                    id: id,
-                    tool_state: response.tool_state,
-                    inputs: response.inputs,
-                    outputs: response.outputs,
-                    config_form: response.config_form,
-                });
-                this.stateStore.setActiveNode(id);
-            });
+            const stepData = this.stepStore.insertNewStep(
+                contentId,
+                name,
+                type,
+                defaultPosition(this.graphOffset, this.transform)
+            );
+
+            getModule({ name, type, content_id: contentId }, stepData.id, this.stateStore.setLoadingState).then(
+                (response) => {
+                    this.stepStore.updateStep({
+                        ...stepData,
+                        tool_state: response.tool_state,
+                        inputs: response.inputs,
+                        outputs: response.outputs,
+                        config_form: response.config_form,
+                    });
+                    this.stateStore.setActiveNode(stepData.id);
+                }
+            );
         },
         async _loadEditorData(data) {
             if (data.name !== undefined) {

client/src/components/Workflow/Editor/composables/useStepProps.ts

@@ -11,12 +11,12 @@ export function useStepProps(step: Ref<Step>) {
         type,
         inputs: stepInputs,
         outputs: stepOutputs,
-        config_form: configForm,
         post_job_actions: postJobActions,
     } = toRefs(step);
 
     const label = computed(() => step.value.label ?? undefined);
     const annotation = computed(() => step.value.annotation ?? null);
+    const configForm = computed(() => step.value.config_form);
 
     return {
         stepId,

client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue

@@ -1,10 +1,9 @@
-<script setup>
-import GenericHistoryItem from "components/History/Content/GenericItem";
-
+<script setup lang="ts">
 import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
 
-import ParameterStep from "./ParameterStep";
-import WorkflowInvocationStep from "./WorkflowInvocationStep";
+import ParameterStep from "./ParameterStep.vue";
+import WorkflowInvocationStep from "./WorkflowInvocationStep.vue";
+import GenericHistoryItem from "components/History/Content/GenericItem.vue";
 
 const props = defineProps({
     invocation: {
@@ -13,9 +12,13 @@ const props = defineProps({
     },
 });
 
+interface HasSrc {
+    src: string;
+}
+
 const { workflow } = useWorkflowInstance(props.invocation.workflow_id);
 
-function dataInputStepLabel(key, input) {
+function dataInputStepLabel(key: number, input: HasSrc) {
     const invocationStep = props.invocation.steps[key];
     let label = invocationStep && invocationStep.workflow_step_label;
     if (!label) {

client/src/composables/useWorkflowInstance.ts

@@ -1,10 +1,10 @@
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 import { useWorkflowStore } from "@/stores/workflowStore";
 
 export function useWorkflowInstance(workflowId: string) {
     const workflowStore = useWorkflowStore();
-    const workflow = ref(workflowStore.getStoredWorkflowByInstanceId(workflowId));
+    const workflow = computed(() => workflowStore.getStoredWorkflowByInstanceId(workflowId));
     const loading = ref(false);
 
     async function getWorkflowInstance() {
@@ -13,8 +13,9 @@ export function useWorkflowInstance(workflowId: string) {
             try {
                 await workflowStore.fetchWorkflowForInstanceId(workflowId);
             } catch (e) {
-                loading.value = false;
                 console.error("unable to fetch workflow \n", e);
+            } finally {
+                loading.value = false;
             }
         }
     }

client/src/onload/console.js

@@ -0,0 +1,56 @@
+/**
+ * This module disables the console in production,
+ * and adds the ability to toggle console logging
+ * using the global functions
+ * enableDebugging() and disableDebugging()
+ */
+import { useLocalStorage } from "@vueuse/core";
+import { watch } from "vue";
+
+export function overrideProductionConsole() {
+    let defaultEnabled = true;
+
+    if (process.env.NODE_ENV == "production") {
+        defaultEnabled = false;
+    }
+
+    const isEnabled = useLocalStorage("console-debugging-enabled", defaultEnabled);
+
+    let storedConsole = null;
+
+    const disableConsole = () => {
+        storedConsole = console;
+        // eslint-disable-next-line no-global-assign
+        console = {};
+        Object.keys(storedConsole).forEach((key) => {
+            console[key] = () => {};
+        });
+    };
+
+    const enableConsole = () => {
+        if (storedConsole) {
+            // eslint-disable-next-line no-global-assign
+            console = storedConsole;
+        }
+    };
+
+    watch(
+        () => isEnabled.value,
+        (enabled) => {
+            if (enabled) {
+                enableConsole();
+            } else {
+                disableConsole();
+            }
+        },
+        { immediate: true }
+    );
+
+    window.enableDebugging = () => {
+        isEnabled.value = true;
+    };
+
+    window.disableDebugging = () => {
+        isEnabled.value = false;
+    };
+}

client/src/onload/index.js

@@ -16,6 +16,10 @@ import config from "config";
 // Custom Icons
 import customIconPack from "@/assets/icons.json";
 
+import { overrideProductionConsole } from "./console";
+
+overrideProductionConsole();
+
 // Module exports appear as objects on window.config in the browser
 export { getRootFromIndexLink } from "./getRootFromIndexLink";
 export { addInitialization, clearInitQueue, initializations$, prependInitialization } from "./initQueue";

client/src/stores/workflowStepStore.ts

@@ -192,6 +192,25 @@ export const useWorkflowStepStore = defineStore("workflowStepStore", {
             this.stepExtraInputs[step.id] = getStepExtraInputs(step);
             return step;
         },
+        insertNewStep(
+            contentId: NewStep["content_id"],
+            name: NewStep["name"],
+            type: NewStep["type"],
+            position: NewStep["position"]
+        ) {
+            const stepData: NewStep = {
+                name: name,
+                content_id: contentId,
+                input_connections: {},
+                type: type,
+                inputs: [],
+                outputs: [],
+                position: position,
+                post_job_actions: {},
+                tool_state: {},
+            };
+            return this.addStep(stepData);
+        },
         updateStep(this: State, step: Step) {
             const workflow_outputs = step.workflow_outputs?.filter((workflowOutput) =>
                 step.outputs.find((output) => workflowOutput.output_name == output.name)

client/webpack.config.js

@@ -37,16 +37,7 @@ module.exports = (env = {}, argv = {}) => {
     if (targetEnv == "production") {
         minimizations = {
             minimize: true,
-            minimizer: [
-                new TerserPlugin({
-                    terserOptions: {
-                        compress: {
-                            drop_console: true,
-                        },
-                    },
-                }),
-                new CssMinimizerPlugin(),
-            ],
+            minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
         };
     } else {
         minimizations = {