Show persistent best practice results in workflow editor

client/src/api/schema/schema.ts

@@ -20557,6 +20557,8 @@ export interface components {
              * @default export
              */
             style: string;
+            /** Version */
+            version?: number | null;
         };
         /** RefactorResponse */
         RefactorResponse: {

client/src/api/workflows.ts

@@ -4,6 +4,9 @@ import { rethrowSimple } from "@/utils/simple-error";
 import { GalaxyApi } from "./client";
 
 export type Creator = components["schemas"]["Person"] | components["schemas"]["CreatorOrganization"];
+export type RefactorRequestAction = components["schemas"]["RefactorRequest"]["actions"][number];
+export type RefactorResponse = components["schemas"]["RefactorResponse"];
+export type RefactorResponseActionExecution = RefactorResponse["action_executions"][number];
 export type StoredWorkflowDetailed = components["schemas"]["StoredWorkflowDetailed"];
 export type WorkflowStepTyped = StoredWorkflowDetailed["steps"][number];
 
@@ -36,6 +39,13 @@ export type WorkflowSummary = {
     show_in_tool_panel: boolean;
 };
 
+// TODO: Use schema type once `/api/workflows/{workflow_id}/versions` is typed.
+export interface WorkflowVersion {
+    steps: number;
+    update_time: string;
+    version: number;
+}
+
 export type AnyWorkflow = WorkflowSummary | StoredWorkflowDetailed;
 
 type SortBy = "create_time" | "update_time" | "name";
@@ -107,6 +117,31 @@ export async function getWorkflowInfo(workflowId: string, version?: number, inst
     return data;
 }
 
+export async function refactor(
+    id: string,
+    actions: RefactorRequestAction[],
+    style: string,
+    dryRun = false,
+    version?: number,
+) {
+    const { data, error } = await GalaxyApi().PUT("/api/workflows/{workflow_id}/refactor", {
+        params: {
+            path: { workflow_id: id },
+        },
+        body: {
+            actions: actions,
+            style: style,
+            dry_run: dryRun,
+            version: version,
+        },
+    });
+    if (error) {
+        rethrowSimple(error);
+    }
+
+    return data as RefactorResponse;
+}
+
 export async function undeleteWorkflow(id: string): Promise<WorkflowSummary> {
     const { data, error } = await GalaxyApi().POST("/api/workflows/{workflow_id}/undelete", {
         params: {

client/src/components/ActivityBar/ActivityBar.vue

@@ -37,6 +37,7 @@ const props = withDefaults(
         defaultActivities?: Activity[];
         activityBarId?: string;
         specialActivities?: Activity[];
+        exitActivity?: Activity;
         showAdmin?: boolean;
         optionsTitle?: string;
         optionsTooltip?: string;
@@ -50,6 +51,7 @@ const props = withDefaults(
         defaultActivities: undefined,
         activityBarId: "default",
         specialActivities: () => [],
+        exitActivity: undefined,
         showAdmin: true,
         optionsTitle: "More",
         optionsHeading: "Additional Activities",
@@ -293,6 +295,8 @@ defineExpose({
                                 v-else
                                 :id="`${activity.id}`"
                                 :key="activity.id"
+                                :indicator="activity.indicator"
+                                :indicator-variant="activity.indicatorVariant"
                                 :activity-bar-id="props.activityBarId"
                                 :icon="activity.icon"
                                 :is-active="isActiveRoute(activity.to)"
@@ -306,39 +310,15 @@ defineExpose({
                 </draggable>
             </b-nav>
             <b-nav v-if="!isAnonymous" vertical class="activity-footer flex-nowrap p-1">
-                <NotificationItem
-                    v-if="isConfigLoaded && config.enable_notification_system"
-                    id="notifications"
-                    :activity-bar-id="props.activityBarId"
-                    :icon="faBell"
-                    :is-active="isActiveSideBar('notifications') || isActiveRoute('/user/notifications')"
-                    title="Notifications"
-                    @click="toggleSidebar('notifications')" />
-                <ActivityItem
-                    id="settings"
-                    :activity-bar-id="props.activityBarId"
-                    :icon="props.optionsIcon"
-                    :is-active="isActiveSideBar('settings')"
-                    :title="props.optionsTitle"
-                    :tooltip="props.optionsTooltip"
-                    @click="toggleSidebar('settings')" />
-                <ActivityItem
-                    v-if="isAdmin && showAdmin"
-                    id="admin"
-                    :activity-bar-id="props.activityBarId"
-                    :icon="faUserCog"
-                    :is-active="isActiveSideBar('admin')"
-                    title="Admin"
-                    tooltip="Administer this Galaxy"
-                    variant="danger"
-                    @click="toggleSidebar('admin')" />
                 <template v-for="activity in props.specialActivities">
                     <ActivityItem
                         v-if="activity.panel"
                         :id="`${activity.id}`"
                         :key="activity.id"
                         :activity-bar-id="props.activityBarId"
                         :icon="activity.icon"
+                        :indicator="activity.indicator"
+                        :indicator-variant="activity.indicatorVariant"
                         :is-active="panelActivityIsActive(activity)"
                         :title="activity.title"
                         :tooltip="activity.tooltip"
@@ -351,13 +331,52 @@ defineExpose({
                         :key="activity.id"
                         :activity-bar-id="props.activityBarId"
                         :icon="activity.icon"
+                        :indicator="activity.indicator"
+                        :indicator-variant="activity.indicatorVariant"
                         :is-active="isActiveRoute(activity.to)"
                         :title="activity.title"
                         :tooltip="activity.tooltip"
                         :to="activity.to ?? undefined"
                         :variant="activity.variant"
                         @click="onActivityClicked(activity)" />
                 </template>
+                <NotificationItem
+                    v-if="isConfigLoaded && config.enable_notification_system"
+                    id="notifications"
+                    :activity-bar-id="props.activityBarId"
+                    :icon="faBell"
+                    :is-active="isActiveSideBar('notifications') || isActiveRoute('/user/notifications')"
+                    title="Notifications"
+                    @click="toggleSidebar('notifications')" />
+                <ActivityItem
+                    id="settings"
+                    :activity-bar-id="props.activityBarId"
+                    :icon="props.optionsIcon"
+                    :is-active="isActiveSideBar('settings')"
+                    :title="props.optionsTitle"
+                    :tooltip="props.optionsTooltip"
+                    @click="toggleSidebar('settings')" />
+                <ActivityItem
+                    v-if="isAdmin && showAdmin"
+                    id="admin"
+                    :activity-bar-id="props.activityBarId"
+                    :icon="faUserCog"
+                    :is-active="isActiveSideBar('admin')"
+                    title="Admin"
+                    tooltip="Administer this Galaxy"
+                    variant="danger"
+                    @click="toggleSidebar('admin')" />
+                <ActivityItem
+                    v-if="props.exitActivity"
+                    :id="`${props.exitActivity.id}`"
+                    :activity-bar-id="props.activityBarId"
+                    :icon="props.exitActivity.icon"
+                    :indicator="props.exitActivity.indicator"
+                    :indicator-variant="props.exitActivity.indicatorVariant"
+                    :title="props.exitActivity.title"
+                    :tooltip="props.exitActivity.tooltip"
+                    :variant="props.exitActivity.variant"
+                    @click="onActivityClicked(props.exitActivity)" />
             </b-nav>
         </div>
         <FlexPanel

client/src/components/ActivityBar/ActivityItem.vue

@@ -26,7 +26,8 @@ export interface Props {
     activityBarId: string;
     title?: string;
     icon?: IconDefinition;
-    indicator?: number;
+    indicator?: number | IconDefinition;
+    indicatorVariant?: ActivityVariant;
     isActive?: boolean;
     tooltip?: string;
     tooltipPlacement?: Placement;
@@ -41,6 +42,7 @@ const props = withDefaults(defineProps<Props>(), {
     title: undefined,
     icon: () => faQuestion,
     indicator: 0,
+    indicatorVariant: "danger",
     isActive: false,
     options: undefined,
     progressPercentage: 0,
@@ -89,9 +91,20 @@ const meta = computed(() => store.metaForId(props.id));
                         }" />
                 </span>
                 <div class="nav-icon">
-                    <span v-if="indicator > 0" class="nav-indicator" data-description="activity indicator">
+                    <span
+                        v-if="typeof indicator === 'number' && indicator > 0"
+                        class="nav-indicator"
+                        :class="`${indicatorVariant}-indicator`"
+                        data-description="activity indicator">
                         {{ Math.min(indicator, 99) }}
                     </span>
+                    <span
+                        v-else-if="typeof indicator !== 'number'"
+                        class="nav-indicator"
+                        :class="`${indicatorVariant}-indicator`"
+                        data-description="activity indicator">
+                        <FontAwesomeIcon :icon="indicator" />
+                    </span>
                     <FontAwesomeIcon :icon="icon" />
                 </div>
                 <TextShort v-if="title" :text="localize(title)" class="nav-title" />
@@ -137,8 +150,16 @@ const meta = computed(() => store.metaForId(props.id));
 }
 
 .nav-indicator {
+    &.danger-indicator {
+        background: $brand-danger;
+    }
+    &.primary-indicator {
+        background: $brand-primary;
+    }
+    &.disabled-indicator {
+        background: $brand-secondary;
+    }
     align-items: center;
-    background: $brand-danger;
     border-radius: 50%;
     color: $brand-light;
     display: flex;

client/src/components/Common/LoadingOverlay.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+/**
+ * A loading overlay with a Galaxy Logo spinner.
+ *
+ * TODO: Should probably be improved and standardized to become a `GOverlay` component.
+ */
+
+import GalaxyLoader from "../GalaxyLoader.vue";
+
+interface Props {
+    /** Opacity of the overlay background, between 0 and 1.
+     * @default 0.5
+     */
+    opacity?: number;
+    /** Variant of the Galaxy loader.
+     * @default "light"
+     */
+    variant?: "light" | "dark" | "eu";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    opacity: 0.5,
+    variant: "light",
+});
+</script>
+
+<template>
+    <div class="galaxy-loading-shade" :style="{ '--opacity': props.opacity ?? 0.5 }">
+        <div class="galaxy-loading-spinner">
+            <GalaxyLoader :variant="props.variant" />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.galaxy-loading-shade {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, var(--opacity, 0.5));
+    z-index: 10;
+    border-radius: 0.2rem;
+}
+
+.galaxy-loading-spinner {
+    position: sticky;
+    top: 50%;
+    display: flex;
+    justify-content: center;
+    transform: translateY(-50%);
+}
+</style>

client/src/components/GalaxyLoader.vue

@@ -45,24 +45,39 @@ export default {
     border-radius: 50px;
     position: relative;
     overflow: hidden;
+    animation: galaxy-loader_pulse 2s ease-in-out infinite;
 }
 
 .galaxy-loader_light {
     background-color: transparent;
-    border: 2px solid #58585a;
+    border: 1px solid #58585a;
     box-sizing: border-box;
+    box-shadow:
+        0 8px 32px rgba(88, 88, 90, 0.1),
+        0 4px 16px rgba(88, 88, 90, 0.08),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(1px);
 }
 
 .galaxy-loader_dark {
     background-color: #2c3143;
-    border: 2px solid #2c3143;
+    border: 1px solid #2c3143;
     box-sizing: border-box;
+    box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.3),
+        0 4px 16px rgba(0, 0, 0, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .galaxy-loader_eu {
     background-color: transparent;
-    border: 2px solid #063591;
+    border: 1px solid #063591;
     box-sizing: border-box;
+    box-shadow:
+        0 8px 32px rgba(6, 53, 145, 0.15),
+        0 4px 16px rgba(6, 53, 145, 0.1),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(1px);
 }
 
 .galaxy-loader > div {
@@ -160,4 +175,14 @@ export default {
         -webkit-transform: scaleX(1.2);
     }
 }
+
+@keyframes galaxy-loader_pulse {
+    0%,
+    100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.1);
+    }
+}
 </style>