Masthead Revision

client/src/api/index.test.ts

@@ -22,6 +22,7 @@ const REGISTERED_USER: User = {
 
 const ANONYMOUS_USER: AnonymousUser = {
     isAnonymous: true,
+    total_disk_usage: 0,
 };
 
 const SESSIONLESS_USER = null;

client/src/api/index.ts

@@ -223,7 +223,7 @@ export interface User extends QuotaUsageResponse {
     username?: string;
 }
 
-export interface AnonymousUser {
+export interface AnonymousUser extends QuotaUsageResponse {
     id?: string;
     isAnonymous: true;
     is_admin?: false;

client/src/components/AboutGalaxy.vue

@@ -3,6 +3,7 @@
 /* (injected by webpack) */
 
 import { computed } from "vue";
+import { RouterLink } from "vue-router";
 
 import { useConfig } from "@/composables/config";
 import { getAppRoot } from "@/onload/loadConfig";
@@ -28,47 +29,101 @@ const versionUserDocumentationUrl = computed(() => {
 
 <template>
     <div v-if="isConfigLoaded" class="about-galaxy">
-        <Heading h1 :icon="['gxd', 'galaxyLogo']" size="xl">About This Galaxy</Heading>
-        <div>
-            <!-- Galaxy version (detailed), with a link to the release notes -->
-            <Heading h2 separator size="md">Galaxy Version Information</Heading>
-            <p>
-                The Galaxy Server is running version
-                <ExternalLink :href="versionUserDocumentationUrl">
-                    <strong> {{ config.version_major }}.{{ config.version_minor }}</strong> </ExternalLink
-                >, and the web client was built on <UtcDate :date="clientBuildDate" mode="pretty" />.
-            </p>
-            <template v-if="config.version_extra">
-                <p>The server also provides the following extra version information</p>
-                <ul>
-                    <li v-for="(value, name, index) in config.version_extra" :key="index">
-                        <strong>{{ name }}</strong>
-                        : {{ value }}
-                    </li>
-                </ul>
-            </template>
-        </div>
-        <div>
-            <Heading h2 separator size="md">Galaxy API Documentation</Heading>
-            <!-- API documentation link -->
-            <p>
-                The Galaxy API is available, and explorable, at
-                <ExternalLink :href="apiDocsLink">
-                    {{ apiDocsLink }}
-                </ExternalLink>
-            </p>
-        </div>
-        <div>
-            <Heading h2 separator size="md">License Information</Heading>
-            <p>The Galaxy Software is licensed under <License :license-id="galaxyLicense" /></p>
-        </div>
-        <div v-if="config.terms_url">
-            <!-- Terms, if available.-->
-            <Heading h2 separator size="md">Terms and Conditions</Heading>
-            <p>
-                This Galaxy Server has specified Terms and Conditions that apply to use of the service.
-                <ExternalLink :href="config.terms_url">Review them here.</ExternalLink>
-            </p>
+        <Heading h1 :icon="['gxd', 'galaxyLogo']" size="xl">Help and Support</Heading>
+        <div class="py-4">
+            <div v-if="config.wiki_url">
+                <Heading h2 separator size="md">Community Hub</Heading>
+                <p>
+                    Interact with the our community, explore and publish tutorials at
+                    <ExternalLink :href="config.wiki_url">
+                        {{ config.wiki_url }}
+                    </ExternalLink>
+                </p>
+            </div>
+            <div v-if="config.citation_url">
+                <Heading h2 separator size="md">How to Cite Us</Heading>
+                <p>
+                    Find more details on how to properly cite Galaxy at
+                    <ExternalLink :href="config.citation_url">
+                        {{ config.citation_url }}
+                    </ExternalLink>
+                </p>
+            </div>
+            <div>
+                <Heading h2 separator size="md">Interactive Tours</Heading>
+                <p>
+                    Explore and learn about Galaxy through interactive
+                    <RouterLink to="tours">tours</RouterLink>.
+                </p>
+            </div>
+            <div v-if="config.screencasts_url">
+                <Heading h2 separator size="md">Videos and Screencasts</Heading>
+                <p>
+                    Learn more about Galaxy by watching videos and screencasts at
+                    <ExternalLink :href="config.screencasts_url">
+                        {{ config.screencasts_url }}
+                    </ExternalLink>
+                </p>
+            </div>
+            <div v-if="config.helpsite_url">
+                <Heading h2 separator size="md">User Documentation</Heading>
+                <p>
+                    Learn more about Galaxy at
+                    <ExternalLink :href="config.helpsite_url">
+                        {{ config.helpsite_url }}
+                    </ExternalLink>
+                </p>
+            </div>
+            <div>
+                <Heading h2 separator size="md">API Documentation</Heading>
+                <!-- API documentation link -->
+                <p>
+                    The Galaxy API is available, and explorable, at
+                    <ExternalLink :href="apiDocsLink">
+                        {{ apiDocsLink }}
+                    </ExternalLink>
+                </p>
+            </div>
+            <div>
+                <!-- Galaxy version (detailed), with a link to the release notes -->
+                <Heading h2 separator size="md">Version Information</Heading>
+                <p>
+                    The Galaxy Server is running version
+                    <ExternalLink :href="versionUserDocumentationUrl">
+                        <strong> {{ config.version_major }}.{{ config.version_minor }}</strong> </ExternalLink
+                    >, and the web client was built on <UtcDate :date="clientBuildDate" mode="pretty" />.
+                </p>
+                <template v-if="config.version_extra">
+                    <p>The server also provides the following extra version information</p>
+                    <ul>
+                        <li v-for="(value, name, index) in config.version_extra" :key="index">
+                            <strong>{{ name }}</strong>
+                            : {{ value }}
+                        </li>
+                    </ul>
+                </template>
+            </div>
+            <div>
+                <Heading h2 separator size="md">License Information</Heading>
+                <p>The Galaxy Software is licensed under <License :license-id="galaxyLicense" /></p>
+            </div>
+            <div v-if="config.terms_url">
+                <!-- Terms, if available.-->
+                <Heading h2 separator size="md">Terms and Conditions</Heading>
+                <p>
+                    This Galaxy Server has specified Terms and Conditions that apply to use of the service.
+                    <ExternalLink :href="config.terms_url">Review them here.</ExternalLink>
+                </p>
+            </div>
+            <div v-if="config.support_url">
+                <Heading h2 separator size="md">Support</Heading>
+                <p>
+                    Do you need help? Reach out at
+                    <ExternalLink :href="config.support_url">
+                        {{ config.support_url }}
+                    </ExternalLink>
+                </p>
+            </div>
         </div>
     </div>
 </template>

client/src/components/ActivityBar/ActivityBar.vue

@@ -142,7 +142,7 @@
 
 <template>
     <div class="d-flex">
         <div
             class="activity-bar d-flex flex-column no-highlight"
             data-description="activity bar"
             @dragover.prevent="onDragOver"
@@ -179,11 +179,7 @@
                                 :to="activity.to"
                                 @click="onToggleSidebar()" />
                             <ActivityItem
-                                v-else-if="
-                                    ['admin', 'tools', 'visualizations', 'multiview', 'invocation'].includes(
-                                        activity.id
-                                    )
-                                "
+                                v-else-if="activity.id === 'admin' || activity.panel"
                                 :id="`activity-${activity.id}`"
                                 :key="activity.id"
                                 :icon="activity.icon"
@@ -216,10 +212,10 @@
                     @click="onToggleSidebar('notifications')" />
                 <ActivityItem
                     id="activity-settings"
-                    icon="cog"
+                    icon="ellipsis-h"
                     :is-active="isActiveSideBar('settings')"
-                    title="Settings"
-                    tooltip="Edit preferences"
+                    title="More"
+                    tooltip="View additional activities"
                     @click="onToggleSidebar('settings')" />
                 <ActivityItem
                     v-if="isAdmin"

client/src/components/ActivityBar/ActivitySettings.test.js

@@ -19,7 +19,7 @@ function testActivity(id, newOptions = {}) {
         description: "activity-test-description",
         icon: "activity-test-icon",
         mutable: true,
-        optional: false,
+        optional: true,
         title: "activity-test-title",
         to: null,
         tooltip: "activity-test-tooltip",
@@ -56,22 +56,23 @@ describe("ActivitySettings", () => {
 
     it("availability of built-in activities", async () => {
         const items = wrapper.findAll(activityItemSelector);
-        expect(items.length).toBe(Activities.length);
+        const nOptional = Activities.filter((x) => x.optional).length;
+        expect(items.length).toBe(nOptional);
     });
 
-    it("visible but non-optional activity", async () => {
+    it("visible and optional activity", async () => {
         activityStore.setAll([testActivity("1")]);
         await wrapper.vm.$nextTick();
         const items = wrapper.findAll(activityItemSelector);
         expect(items.length).toBe(1);
-        const pinnedCheckbox = items.at(0).find("[data-icon='thumbtack']");
-        expect(pinnedCheckbox.exists()).toBeTruthy();
-        const pinnedIcon = wrapper.find("[icon='activity-test-icon'");
-        expect(pinnedIcon.exists()).toBeTruthy();
+        const checkbox = items.at(0).find("[title='Hide in Activity Bar']");
+        expect(checkbox.exists()).toBeTruthy();
+        const icon = wrapper.find("[icon='activity-test-icon'");
+        expect(icon.exists()).toBeTruthy();
         expect(activityStore.getAll()[0].visible).toBeTruthy();
-        pinnedCheckbox.trigger("click");
+        checkbox.trigger("click");
         await wrapper.vm.$nextTick();
-        expect(activityStore.getAll()[0].visible).toBeTruthy();
+        expect(activityStore.getAll()[0].visible).toBeFalsy();
     });
 
     it("non-visible but optional activity", async () => {
@@ -84,12 +85,12 @@ describe("ActivitySettings", () => {
         await wrapper.vm.$nextTick();
         const items = wrapper.findAll(activityItemSelector);
         expect(items.length).toBe(1);
-        const hiddenCheckbox = items.at(0).find("[data-icon='square']");
-        expect(hiddenCheckbox.exists()).toBeTruthy();
+        const checkbox = items.at(0).find("[title='Show in Activity Bar']");
+        expect(checkbox.exists()).toBeTruthy();
         expect(activityStore.getAll()[0].visible).toBeFalsy();
-        hiddenCheckbox.trigger("click");
+        checkbox.trigger("click");
         await wrapper.vm.$nextTick();
-        const visibleCheckbox = items.at(0).find("[data-icon='check-square']");
+        const visibleCheckbox = items.at(0).find("[title='Hide in Activity Bar']");
         expect(visibleCheckbox.exists()).toBeTruthy();
         expect(activityStore.getAll()[0].visible).toBeTruthy();
     });

client/src/components/ActivityBar/ActivitySettings.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faSquare } from "@fortawesome/free-regular-svg-icons";
-import { faCheckSquare, faThumbtack, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faSquare, faStar as faStarRegular } from "@fortawesome/free-regular-svg-icons";
+import { faCheckSquare, faStar, faThumbtack, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
 import { computed, type ComputedRef } from "vue";
 
+import { useActivityAction } from "@/composables/useActivityAction";
 import { type Activity, useActivityStore } from "@/stores/activityStore";
 
 library.add({
     faCheckSquare,
     faSquare,
+    faStar,
+    faStarRegular,
     faTrash,
     faThumbtack,
 });
@@ -21,6 +24,7 @@ const props = defineProps<{
 
 const activityStore = useActivityStore();
 const { activities } = storeToRefs(activityStore);
+const activityAction = useActivityAction();
 
 const filteredActivities = computed(() => {
     if (props.query?.length > 0) {
@@ -44,7 +48,7 @@ const foundActivities: ComputedRef<boolean> = computed(() => {
     return filteredActivities.value.length > 0;
 });
 
-function onClick(activity: Activity) {
+function onFavorite(activity: Activity) {
     if (activity.optional) {
         activity.visible = !activity.visible;
     }
@@ -59,36 +63,49 @@ function onRemove(activity: Activity) {
     <div class="activity-settings rounded no-highlight">
         <div v-if="foundActivities" class="activity-settings-content">
             <div v-for="activity in filteredActivities" :key="activity.id">
-                <button class="activity-settings-item p-2 cursor-pointer" @click="onClick(activity)">
+                <button
+                    v-if="activity.optional"
+                    class="activity-settings-item p-2 cursor-pointer"
+                    @click="activityAction.executeActivity(activity)">
                     <div class="d-flex justify-content-between align-items-start">
-                        <span class="w-100">
-                            <FontAwesomeIcon
-                                v-if="!activity.optional"
-                                class="icon-check mr-1"
-                                icon="fas fa-thumbtack"
-                                fa-fw />
-                            <FontAwesomeIcon
-                                v-else-if="activity.visible"
-                                class="icon-check mr-1"
-                                icon="fas fa-check-square"
-                                fa-fw />
-                            <FontAwesomeIcon v-else class="mr-1" icon="far fa-square" fa-fw />
+                        <span class="d-flex justify-content-between w-100">
                             <span>
                                 <icon class="mr-1" :icon="activity.icon" />
                                 <span v-localize class="font-weight-bold">{{
                                     activity.title || "No title available"
                                 }}</span>
                             </span>
+                            <div>
+                                <BButton
+                                    v-if="activity.mutable"
+                                    v-b-tooltip.hover
+                                    data-description="delete activity"
+                                    size="sm"
+                                    title="Delete Activity"
+                                    variant="link"
+                                    @click.stop="onRemove(activity)">
+                                    <FontAwesomeIcon icon="fa-trash" fa-fw />
+                                </BButton>
+                                <BButton
+                                    v-if="activity.visible"
+                                    v-b-tooltip.hover
+                                    size="sm"
+                                    title="Hide in Activity Bar"
+                                    variant="link"
+                                    @click.stop="onFavorite(activity)">
+                                    <FontAwesomeIcon icon="fas fa-star" fa-fw />
+                                </BButton>
+                                <BButton
+                                    v-else
+                                    v-b-tooltip.hover
+                                    size="sm"
+                                    title="Show in Activity Bar"
+                                    variant="link"
+                                    @click.stop="onFavorite(activity)">
+                                    <FontAwesomeIcon icon="far fa-star" fa-fw />
+                                </BButton>
+                            </div>
                         </span>
-                        <b-button
-                            v-if="activity.mutable"
-                            data-description="delete activity"
-                            class="button-delete"
-                            size="sm"
-                            variant="link"
-                            @click.stop="onRemove(activity)">
-                            <FontAwesomeIcon icon="fa-trash" fa-fw />
-                        </b-button>
                     </div>
                     <div v-localize class="text-muted">
                         {{ activity.description || "No description available" }}
@@ -121,13 +138,6 @@ function onRemove(activity: Activity) {
     text-align: left;
     transition: none;
     width: 100%;
-
-    .icon-check {
-        color: darken($brand-success, 15%);
-    }
-    .button-delete {
-        background: transparent;
-    }
 }
 .activity-settings-item:hover {
     background: $gray-200;