Merge pull request galaxyproject#22500 from ahmedhamidawan/workflow_editor_activity_enh

Workflow editor activity bar enhancements

Author: ahmedhamidawan

client/src/components/ActivityBar/ActivityBar.vue

@@ -18,6 +18,8 @@ import localize from "@/utils/localization";
 
 import ChatHistoryPanel from "../ChatGXY/ChatHistoryPanel.vue";
 import InvocationsPanel from "../Panels/InvocationsPanel.vue";
+import ActivityBarHeader from "./ActivityBarHeader.vue";
+import ActivityBarSeparator from "./ActivityBarSeparator.vue";
 import ActivityItem from "./ActivityItem.vue";
 import InteractiveItem from "./Items/InteractiveItem.vue";
 import NotificationItem from "./Items/NotificationItem.vue";
@@ -39,6 +41,7 @@ const props = withDefaults(
         activityBarId?: string;
         specialActivities?: Activity[];
         exitActivity?: Activity;
+        runActivity?: Activity;
         showAdmin?: boolean;
         optionsTitle?: string;
         optionsTooltip?: string;
@@ -47,12 +50,15 @@ const props = withDefaults(
         optionsSearchPlaceholder?: string;
         initialActivity?: string;
         hidePanel?: boolean;
+        headerIcon?: IconDefinition;
+        headerTitle?: string;
     }>(),
     {
         defaultActivities: undefined,
         activityBarId: "default",
         specialActivities: () => [],
         exitActivity: undefined,
+        runActivity: undefined,
         showAdmin: true,
         optionsTitle: "More",
         optionsHeading: "Additional Activities",
@@ -61,6 +67,8 @@ const props = withDefaults(
         optionsTooltip: "View additional activities",
         initialActivity: undefined,
         hidePanel: false,
+        headerIcon: undefined,
+        headerTitle: undefined,
     },
 );
 
@@ -252,6 +260,11 @@ defineExpose({
             @dragover.prevent="onDragOver"
             @dragenter.prevent="onDragEnter"
             @dragleave.prevent="onDragLeave">
+            <ActivityBarHeader
+                :icon="props.headerIcon"
+                :title="props.headerTitle"
+                :is-side-bar-open="isSideBarOpen"
+                @close-sidebar="activityStore.closeSideBar" />
             <b-nav vertical class="flex-nowrap p-1 h-100 vertical-overflow">
                 <draggable
                     v-model="activities"
@@ -320,7 +333,8 @@ defineExpose({
                     </div>
                 </draggable>
             </b-nav>
-            <b-nav v-if="!isAnonymous" vertical class="activity-footer flex-nowrap p-1">
+            <ActivityBarSeparator />
+            <b-nav v-if="!isAnonymous" vertical class="flex-nowrap p-1">
                 <template v-for="activity in props.specialActivities">
                     <ActivityItem
                         v-if="activity.panel"
@@ -377,6 +391,17 @@ defineExpose({
                     tooltip="Administer this Galaxy"
                     variant="danger"
                     @click="toggleSidebar('admin')" />
+                <ActivityItem
+                    v-if="props.runActivity"
+                    :id="`${props.runActivity.id}`"
+                    :activity-bar-id="props.activityBarId"
+                    :icon="props.runActivity.icon"
+                    :indicator="props.runActivity.indicator"
+                    :indicator-variant="props.runActivity.indicatorVariant"
+                    :title="props.runActivity.title"
+                    :tooltip="props.runActivity.tooltip"
+                    :variant="props.runActivity.variant"
+                    @click="onActivityClicked(props.runActivity)" />
                 <ActivityItem
                     v-if="props.exitActivity"
                     :id="`${props.exitActivity.id}`"
@@ -443,11 +468,6 @@ defineExpose({
     display: none;
 }
 
-.activity-footer {
-    border-top: $border-default;
-    border-top-style: dotted;
-}
-
 .activity-popper-disabled {
     .popper-element {
         display: none;

client/src/components/ActivityBar/ActivityBarHeader.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { faChevronLeft, faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+import ActivityBarSeparator from "./ActivityBarSeparator.vue";
+
+interface Props {
+    /** Whether an activity's side panel is currently open. */
+    isSideBarOpen: boolean;
+    /** The icon to display in the header. */
+    icon?: IconDefinition;
+    /** The title to display in the header. */
+    title?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+    icon: () => faHome,
+    title: "Activities",
+});
+
+const emit = defineEmits<{
+    (e: "close-sidebar"): void;
+}>();
+
+function closeSidebar(event: KeyboardEvent | MouseEvent) {
+    if (props.isSideBarOpen && (event instanceof MouseEvent || event.key === "Enter" || event.key === " ")) {
+        emit("close-sidebar");
+    }
+}
+</script>
+
+<template>
+    <div>
+        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
+        <div
+            class="rounded activity-bar-header-badge"
+            :class="{ 'sidebar-opened': props.isSideBarOpen }"
+            :role="props.isSideBarOpen ? 'button' : undefined"
+            :tabindex="props.isSideBarOpen ? 0 : undefined"
+            :title="props.isSideBarOpen ? 'Close panel' : 'Activity Bar'"
+            @click="closeSidebar"
+            @keydown="closeSidebar">
+            <FontAwesomeIcon :icon="props.isSideBarOpen ? faChevronLeft : props.icon" size="sm" fixed-width />
+            <span class="activity-bar-header-text">{{ props.title }}</span>
+        </div>
+        <ActivityBarSeparator />
+    </div>
+</template>
+
+<style scoped lang="scss">
+.activity-bar-header-badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing);
+    margin: var(--spacing-1);
+    padding: var(--spacing-1) 0;
+    color: var(--color-blue-600);
+
+    &.sidebar-opened {
+        background: var(--color-grey-200);
+        &:hover {
+            color: var(--color-blue-700);
+        }
+    }
+
+    .activity-bar-header-text {
+        font-size: var(--font-size-small);
+    }
+}
+</style>

client/src/components/ActivityBar/ActivityBarSeparator.vue

@@ -0,0 +1,10 @@
+<template>
+    <div class="activity-bar-separator" />
+</template>
+
+<style scoped lang="scss">
+.activity-bar-separator {
+    border-top: 1px solid var(--color-grey-600);
+    border-top-style: dotted;
+}
+</style>

client/src/components/Markdown/MarkdownHelp.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import ExternalLink from "../ExternalLink.vue";
 import DirectiveHelpSection from "./DirectiveHelpSection.vue";
 
 interface MarkdownHelpProps {
@@ -24,7 +25,7 @@ const page = computed(() => props.mode == "page");
 
         <p>
             For an overview of standard Markdown visit the
-            <a href="https://commonmark.org/help/tutorial/">commonmark.org tutorial</a>.
+            <ExternalLink href="https://commonmark.org/help/tutorial/">commonmark.org tutorial</ExternalLink>.
         </p>
 
         <p>

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

@@ -15,7 +15,11 @@
             @onRefactor="onRefactor"
             @onShow="hideModal" />
         <MessagesModal :title="messageTitle" :message="messageBody" :error="messageIsError" @onHidden="resetMessage" />
-        <SaveChangesModal :nav-url.sync="navUrl" :show-modal.sync="showSaveChangesModal" @on-proceed="onNavigate" />
+        <SaveChangesModal
+            :append-version="saveChangesAppendVersion"
+            :nav-url="navUrl"
+            :show-modal.sync="showSaveChangesModal"
+            @on-proceed="onNavigate" />
         <GModal
             :show.sync="showSaveAsModal"
             confirm
@@ -39,6 +43,7 @@
             :default-activities="workflowActivities"
             :special-activities="specialWorkflowActivities"
             :exit-activity="exitWorkflowActivity"
+            :run-activity="runWorkflowActivity"
             activity-bar-id="workflow-editor"
             :show-admin="false"
             options-title="Options"
@@ -48,6 +53,8 @@
             initial-activity="workflow-editor-attributes"
             :options-icon="faCog"
             :hide-panel="reportActive"
+            :header-icon="faSitemap"
+            header-title="Editor"
             @activityClicked="onActivityClicked">
             <template v-slot:side-panel="{ isActiveSideBar }">
                 <ToolPanel v-if="isActiveSideBar('workflow-editor-tools')" workflow @onInsertTool="onInsertTool" />
@@ -116,7 +123,7 @@
                 ref="markdownEditor"
                 :markdown-text="report.markdown"
                 mode="report"
-                :title="'Workflow Report: ' + name"
+                :title="'Workflow Report Template: ' + name"
                 :labels="getLabels"
                 :steps="steps"
                 @insert="insertMarkdown"
@@ -181,14 +188,14 @@
                             variant="secondary"
                             :disabled="!undoRedoStore.hasUndo"
                             @click="undoRedoStore.undo()">
-                            <FontAwesomeIcon :icon="faArrowLeft" />
+                            <FontAwesomeIcon :icon="faUndo" />
                         </b-button>
                         <b-button
                             :title="undoRedoStore.redoText + ' (Ctrl + Shift + Z)'"
                             variant="secondary"
                             :disabled="!undoRedoStore.hasRedo"
                             @click="undoRedoStore.redo()">
-                            <FontAwesomeIcon :icon="faArrowRight" />
+                            <FontAwesomeIcon :icon="faRedo" />
                         </b-button>
                         <b-button
                             id="workflow-save-button"
@@ -247,7 +254,7 @@
 </template>
 
 <script>
-import { faArrowLeft, faArrowRight, faCog, faKey, faSave, faTimes, faWrench } from "@fortawesome/free-solid-svg-icons";
+import { faCog, faKey, faRedo, faSave, faSitemap, faTimes, faUndo, faWrench } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { until, whenever } from "@vueuse/core";
 import { logicAnd, logicNot, logicOr } from "@vueuse/math";
@@ -610,9 +617,8 @@ export default {
         const isNewTempWorkflow = computed(() => !props.workflowId);
         const lintData = useLintData(id, steps, datatypesMapper, annotation, readme, license, creator);
 
-        const { specialWorkflowActivities, exitWorkflowActivity } = useSpecialWorkflowActivities(
+        const { specialWorkflowActivities, exitWorkflowActivity, runWorkflowActivity } = useSpecialWorkflowActivities(
             computed(() => ({
-                hasInvalidConnections: hasInvalidConnections.value,
                 lintData: lintData,
             })),
         );
@@ -716,13 +722,15 @@ export default {
             insertMarkdown,
             specialWorkflowActivities,
             exitWorkflowActivity,
+            runWorkflowActivity,
             isNewTempWorkflow,
             saveWorkflowTitle,
             confirm,
             inputs,
             workflowActivities,
             faKey,
             faWrench,
+            faSitemap,
             showDropdown: false,
             lintData,
             onHighlightRegion,
@@ -754,12 +762,13 @@ export default {
             graphOffset: { left: 0, top: 0, width: 0, height: 0 },
             debounceTimer: null,
             showSaveChangesModal: false,
+            saveChangesAppendVersion: false,
             navUrl: "",
-            faArrowLeft,
-            faArrowRight,
             faTimes,
             faCog,
             faSave,
+            faRedo,
+            faUndo,
         };
     },
     computed: {
@@ -994,13 +1003,8 @@ export default {
             }
         },
         async onActivityClicked(activityId) {
-            if (activityId === "save-and-exit") {
-                await this.saveOrCreate();
-                this.$router.push("/workflows/list");
-            }
-
             if (activityId === "exit") {
-                this.$router.push("/workflows/list");
+                this.onNavigate("/workflows/list");
             }
 
             if (activityId === "workflow-download") {
@@ -1109,6 +1113,7 @@ export default {
             } else if (this.hasChanges && !forceSave && !ignoreChanges) {
                 // if there are changes, prompt user to save or discard or cancel
                 this.navUrl = url;
+                this.saveChangesAppendVersion = appendVersion;
                 this.showSaveChangesModal = true;
             } else if (forceSave) {
                 // when forceSave is true, save the workflow before navigating

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

@@ -13,19 +13,20 @@ interface Props {
     showModal: boolean;
     /** The URL to navigate to before saving/ignoring changes */
     navUrl: string;
+    /** Whether to append the version to the URL */
+    appendVersion: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     showModal: false,
+    appendVersion: false,
 });
 
 const busy = ref(false);
 
 const emit = defineEmits<{
     /** Proceed with or without saving the changes */
     (e: "on-proceed", url: string, forceSave: boolean, ignoreChanges: boolean, appendVersion: boolean): void;
-    /** Update the nav URL prop */
-    (e: "update:nav-url", url: string): void;
     /** Update the show modal boolean prop */
     (e: "update:show-modal", showModal: boolean): void;
 }>();
@@ -43,18 +44,17 @@ const buttonTitles = {
 
 function closeModal() {
     emit("update:show-modal", false);
-    emit("update:nav-url", "");
 }
 
 function dontSave() {
     busy.value = true;
-    emit("on-proceed", props.navUrl, false, true, true);
+    emit("on-proceed", props.navUrl, false, true, props.appendVersion);
 }
 
 function saveChanges() {
     busy.value = true;
     closeModal();
-    emit("on-proceed", props.navUrl, true, false, true);
+    emit("on-proceed", props.navUrl, true, false, props.appendVersion);
 }
 </script>
 

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

@@ -111,18 +111,4 @@ describe("useSpecialWorkflowActivities", () => {
             );
         });
     });
-
-    describe("exitWorkflowActivity tooltip", () => {
-        it("shows save and exit message when connections are valid", () => {
-            const { exitWorkflowActivity } = setUpBestPractices(false);
-            expect(exitWorkflowActivity.value.tooltip).toBe("Save this workflow, then exit the workflow editor");
-        });
-
-        it("shows invalid connections warning when hasInvalidConnections is true", () => {
-            const { exitWorkflowActivity } = setUpBestPractices(true);
-            expect(exitWorkflowActivity.value.tooltip).toBe(
-                "Workflow has invalid connections, review and remove invalid connections",
-            );
-        });
-    });
 });