Skip to content

Commit

Permalink
Merge pull request #17927 from guerler/masthead_update
Browse files Browse the repository at this point in the history 
Masthead Revision
  • Loading branch information
@guerler
guerler authored Jun 29, 2024
2 parents 414bc64 + 3255601 commit dfa683e
Show file tree
Hide file tree
Showing 33 changed files with 552 additions and 950 deletions.
1 change: 1 addition & 0 deletions client/src/api/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const REGISTERED_USER: User = {

const ANONYMOUS_USER: AnonymousUser = {
isAnonymous: true,
total_disk_usage: 0,
};

const SESSIONLESS_USER = null;
Expand Down
2 changes: 1 addition & 1 deletion client/src/api/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ export interface User extends QuotaUsageResponse {
username?: string;
}

export interface AnonymousUser {
export interface AnonymousUser extends QuotaUsageResponse {
id?: string;
isAnonymous: true;
is_admin?: false;
Expand Down
137 changes: 96 additions & 41 deletions client/src/components/AboutGalaxy.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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>
Expand Down
12 changes: 4 additions & 8 deletions client/src/components/ActivityBar/ActivityBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,11 +179,7 @@ watch(
: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"
Expand Down Expand Up @@ -216,10 +212,10 @@ watch(
@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"
Expand Down
27 changes: 14 additions & 13 deletions client/src/components/ActivityBar/ActivitySettings.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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 () => {
Expand All @@ -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();
});
Expand Down
74 changes: 42 additions & 32 deletions client/src/components/ActivityBar/ActivitySettings.vue
View file
Original file line number Diff line number Diff line change
@@ -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,
});
Expand All @@ -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) {
Expand All @@ -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;
}
Expand All @@ -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" }}
Expand Down Expand Up @@ -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;
Expand Down
Loading

0 comments on commit dfa683e

Please sign in to comment.