Add admin activity to activity bar

client/src/components/ActivityBar/ActivityBar.vue

@@ -16,6 +16,7 @@
 import InteractiveItem from "./Items/InteractiveItem.vue";
 import NotificationItem from "./Items/NotificationItem.vue";
 import UploadItem from "./Items/UploadItem.vue";
+import AdminPanel from "@/components/admin/AdminPanel.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import MultiviewPanel from "@/components/Panels/MultiviewPanel.vue";
 import NotificationsPanel from "@/components/Panels/NotificationsPanel.vue";
@@ -31,7 +32,7 @@
 
 const eventStore = useEventStore();
 const activityStore = useActivityStore();
-const { isAnonymous } = storeToRefs(userStore);
+const { isAdmin, isAnonymous } = storeToRefs(userStore);
 
 const emit = defineEmits(["dragstart"]);
 
@@ -137,7 +138,7 @@
 
 <template>
     <div class="d-flex">
         <div
             class="activity-bar d-flex flex-column no-highlight"
             data-description="activity bar"
             @dragover.prevent="onDragOver"
@@ -173,7 +174,7 @@
                                 :to="activity.to"
                                 @click="onToggleSidebar()" />
                             <ActivityItem
-                                v-else-if="['tools', 'visualizations', 'multiview'].includes(activity.id)"
+                                v-else-if="['admin', 'tools', 'visualizations', 'multiview'].includes(activity.id)"
                                 :id="`activity-${activity.id}`"
                                 :key="activity.id"
                                 :icon="activity.icon"
@@ -211,6 +212,15 @@
                     title="Settings"
                     tooltip="Edit preferences"
                     @click="onToggleSidebar('settings')" />
+                <ActivityItem
+                    v-if="isAdmin"
+                    id="activity-admin"
+                    icon="user-cog"
+                    :is-active="isActiveSideBar('admin')"
+                    title="Admin"
+                    tooltip="Administer this Galaxy"
+                    variant="danger"
+                    @click="onToggleSidebar('admin')" />
             </b-nav>
         </div>
         <FlexPanel v-if="isSideBarOpen" side="left" :collapsible="false">
@@ -219,6 +229,7 @@
             <MultiviewPanel v-else-if="isActiveSideBar('multiview')" />
             <NotificationsPanel v-else-if="isActiveSideBar('notifications')" />
             <SettingsPanel v-else-if="isActiveSideBar('settings')" />
+            <AdminPanel v-else-if="isActiveSideBar('admin')" />
         </FlexPanel>
     </div>
 </template>

client/src/components/ActivityBar/ActivityItem.vue

@@ -24,6 +24,7 @@
     progressStatus?: string;
     options?: Option[];
     to?: string;
+    variant?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -37,6 +38,7 @@
     to: undefined,
     tooltip: undefined,
     tooltipPlacement: "right",
+    variant: "primary",
 });
 
 const emit = defineEmits<{
@@ -54,7 +56,7 @@
 <template>
     <Popper reference-is="span" popper-is="span" :placement="tooltipPlacement">
         <template v-slot:reference>
             <div :id="id" class="activity-item" @click="onClick">
                 <b-nav-item
                     class="position-relative my-1 p-2"
                     :class="{ 'nav-item-active': isActive }"
@@ -70,7 +72,7 @@
                                 width: `${Math.round(progressPercentage)}%`,
                             }" />
                     </span>
-                    <span class="position-relative">
+                    <span class="position-relative" :class="`text-${variant}`">
                         <div class="nav-icon">
                             <span v-if="indicator > 0" class="nav-indicator" data-description="activity indicator">
                                 {{ Math.min(indicator, 99) }}

client/src/components/admin/AdminPanel.test.js

@@ -1,10 +1,19 @@
 import { mount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
 
+import { useConfig } from "@/composables/config";
+
 import MountTarget from "./AdminPanel.vue";
 
 const localVue = getLocalVue(true);
 
+jest.mock("@/composables/config", () => ({
+    useConfig: jest.fn(() => ({
+        config: { value: { enable_quotas: true, tool_shed_urls: ["tool_shed_url"], version_major: "1.0.1" } },
+        isConfigLoaded: true,
+    })),
+}));
+
 function createTarget(propsData = {}) {
     return mount(MountTarget, {
         localVue,
@@ -16,21 +25,29 @@ function createTarget(propsData = {}) {
 }
 
 describe("AdminPanel", () => {
-    it("ensure reactivity to prop changes", async () => {
-        const wrapper = createTarget();
-        const sections = {
-            isToolshedInstalled: "#admin-link-toolshed",
-            enableQuotas: "#admin-link-quotas",
-        };
-        for (const elementId of Object.values(sections)) {
-            expect(wrapper.find(elementId).exists()).toBe(false);
-        }
+    it("ensure section visibility with config changes", async () => {
+        const options = [
+            {
+                name: "tool_shed_urls",
+                elementId: "#admin-link-toolshed",
+                value: ["toolshed_url"],
+            },
+            {
+                name: "enable_quotas",
+                elementId: "#admin-link-quotas",
+                value: true,
+            },
+        ];
         for (const available of [true, false]) {
-            for (const [propId, elementId] of Object.entries(sections)) {
+            for (const option of options) {
                 const props = {};
-                props[propId] = available;
-                await wrapper.setProps(props);
-                expect(wrapper.find(elementId).exists()).toBe(available);
+                props[option.name] = available ? option.value : undefined;
+                useConfig.mockImplementation(() => ({
+                    config: { value: { ...props, version_major: "1.0.1" } },
+                    isConfigLoaded: true,
+                }));
+                const wrapper = createTarget();
+                expect(wrapper.find(option.elementId).exists()).toBe(available);
             }
         }
     });