Refactors icon imports and usage

Updates icon imports to use `IconDefinition` type from `@fortawesome/fontawesome-svg-core` Replaces string-based icon references with FontAwesome icon objects Removes unnecessary `library.add` calls Improves type safety and consistency in icon usage in activity bar components
galaxyproject · Dec 3, 2024 · f461d7c · f461d7c
1 parent eaf09ba
commit f461d7c
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 39 deletions.
diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { faEllipsisH, type IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { type IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { faBell, faEllipsisH, faUserCog } from "@fortawesome/free-solid-svg-icons";
 import { watchImmediate } from "@vueuse/core";
 import { storeToRefs } from "pinia";
 import { computed, type Ref, ref } from "vue";
@@ -263,7 +264,7 @@ defineExpose({
                 <NotificationItem
                     v-if="isConfigLoaded && config.enable_notification_system"
                     id="activity-notifications"
-                    icon="bell"
+                    :icon="faBell"
                     :is-active="isActiveSideBar('notifications') || isActiveRoute('/user/notifications')"
                     title="Notifications"
                     @click="toggleSidebar('notifications')" />
@@ -279,7 +280,7 @@ defineExpose({
                     v-if="isAdmin && showAdmin"
                     id="admin"
                     :activity-bar-id="props.activityBarId"
-                    icon="user-cog"
+                    :icon="faUserCog"
                     :is-active="isActiveSideBar('admin')"
                     title="Admin"
                     tooltip="Administer this Galaxy"

diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { type IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { Placement } from "@popperjs/core";
 import { computed } from "vue";
@@ -21,7 +23,7 @@ export interface Props {
     id: string;
     activityBarId: string;
     title?: string;
-    icon?: string | object;
+    icon?: IconDefinition;
     indicator?: number;
     isActive?: boolean;
     tooltip?: string;
@@ -35,7 +37,7 @@ export interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
     title: undefined,
-    icon: "question",
+    icon: () => faQuestion,
     indicator: 0,
     isActive: false,
     options: undefined,

diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -1,22 +1,12 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faSquare, faStar as faStarRegular } from "@fortawesome/free-regular-svg-icons";
-import { faCheckSquare, faStar, faThumbtack, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faStar as faStarRegular } from "@fortawesome/free-regular-svg-icons";
+import { faStar, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed, type ComputedRef } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { type Activity, useActivityStore } from "@/stores/activityStore";
 
-library.add({
-    faCheckSquare,
-    faSquare,
-    faStar,
-    faStarRegular,
-    faTrash,
-    faThumbtack,
-});
-
 const props = defineProps<{
     activityBarId: string;
     query: string;
@@ -90,7 +80,7 @@ function executeActivity(activity: Activity) {
                 <div class="d-flex justify-content-between align-items-start">
                     <span class="d-flex justify-content-between w-100">
                         <span>
-                            <icon class="mr-1" :icon="activity.icon" />
+                            <FontAwesomeIcon class="mr-1" :icon="activity.icon" />
                             <span v-localize class="font-weight-bold">{{
                                 activity.title || "No title available"
                             }}</span>
@@ -104,7 +94,7 @@ function executeActivity(activity: Activity) {
                                 title="Delete Activity"
                                 variant="link"
                                 @click.stop="onRemove(activity)">
-                                <FontAwesomeIcon icon="fa-trash" fa-fw />
+                                <FontAwesomeIcon :icon="faTrash" fa-fw />
                             </BButton>
                             <BButton
                                 v-if="activity.visible"
@@ -113,7 +103,7 @@ function executeActivity(activity: Activity) {
                                 title="Hide in Activity Bar"
                                 variant="link"
                                 @click.stop="onFavorite(activity)">
-                                <FontAwesomeIcon icon="fas fa-star" fa-fw />
+                                <FontAwesomeIcon :icon="faStar" fa-fw />
                             </BButton>
                             <BButton
                                 v-else
@@ -122,7 +112,7 @@ function executeActivity(activity: Activity) {
                                 title="Show in Activity Bar"
                                 variant="link"
                                 @click.stop="onFavorite(activity)">
-                                <FontAwesomeIcon icon="far fa-star" fa-fw />
+                                <FontAwesomeIcon :icon="faStarRegular" fa-fw />
                             </BButton>
                         </div>
                     </span>

diff --git a/client/src/components/ActivityBar/Items/InteractiveItem.vue b/client/src/components/ActivityBar/Items/InteractiveItem.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
 
@@ -13,7 +14,7 @@ const totalCount = computed(() => entryPoints.value.length);
 export interface Props {
     id: string;
     title: string;
-    icon: string | object;
+    icon: IconDefinition;
     isActive: boolean;
     to: string;
 }

diff --git a/client/src/components/ActivityBar/Items/NotificationItem.vue b/client/src/components/ActivityBar/Items/NotificationItem.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
 
@@ -11,7 +12,7 @@ const { totalUnreadCount } = storeToRefs(useNotificationsStore());
 export interface Props {
     id: string;
     title: string;
-    icon: string;
+    icon: IconDefinition;
     isActive: boolean;
 }
 

diff --git a/client/src/components/ActivityBar/Items/UploadItem.vue b/client/src/components/ActivityBar/Items/UploadItem.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { storeToRefs } from "pinia";
 import { onMounted } from "vue";
 
@@ -11,7 +12,7 @@ import ActivityItem from "@/components/ActivityBar/ActivityItem.vue";
 export interface Props {
     id: string;
     title: string;
-    icon: string | object;
+    icon: IconDefinition;
     tooltip: string;
 }
 

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { faCaretDown, faCaretRight, faFile, faFolder, type IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { type IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { faCaretDown, faCaretRight, faFile, faFolder } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BFormCheckbox, BFormRadio } from "bootstrap-vue";
 import { computed, type ComputedRef, onMounted, ref } from "vue";

diff --git a/client/src/stores/activitySetup.ts b/client/src/stores/activitySetup.ts
@@ -1,14 +1,30 @@
 /**
  * List of built-in activities
  */
+import {
+    faChartBar,
+    faColumns,
+    faDatabase,
+    faFile,
+    faFileContract,
+    faFolder,
+    faHdd,
+    faLaptop,
+    faList,
+    faPlay,
+    faSitemap,
+    faUpload,
+    faWrench,
+} from "@fortawesome/free-solid-svg-icons";
+
 import { type Activity } from "@/stores/activityStore";
 import { type EventData } from "@/stores/eventStore";
 
 export const defaultActivities = [
     {
         anonymous: false,
         description: "Displays currently running interactive tools (ITs), if these are enabled by the administrator.",
-        icon: "fa-laptop",
+        icon: faLaptop,
         id: "interactivetools",
         mutable: false,
         optional: false,
@@ -21,7 +37,7 @@ export const defaultActivities = [
     {
         anonymous: true,
         description: "Opens a data dialog, allowing uploads from URL, pasted content or disk.",
-        icon: "upload",
+        icon: faUpload,
         id: "upload",
         mutable: false,
         optional: false,
@@ -34,7 +50,7 @@ export const defaultActivities = [
     {
         anonymous: true,
         description: "Displays the tool panel to search and access all available tools.",
-        icon: "wrench",
+        icon: faWrench,
         id: "tools",
         mutable: false,
         optional: false,
@@ -47,7 +63,7 @@ export const defaultActivities = [
     {
         anonymous: true,
         description: "Displays a panel to search and access workflows.",
-        icon: "sitemap",
+        icon: faSitemap,
         id: "workflows",
         mutable: false,
         optional: true,
@@ -60,7 +76,7 @@ export const defaultActivities = [
     {
         anonymous: false,
         description: "Displays all workflow runs.",
-        icon: "fa-list",
+        icon: faList,
         id: "invocation",
         mutable: false,
         optional: true,
@@ -73,7 +89,7 @@ export const defaultActivities = [
     {
         anonymous: true,
         description: "Displays the list of available visualizations.",
-        icon: "chart-bar",
+        icon: faChartBar,
         id: "visualizations",
         mutable: false,
         optional: true,
@@ -86,7 +102,7 @@ export const defaultActivities = [
     {
         anonymous: true,
         description: "Displays the list of all histories.",
-        icon: "fa-hdd",
+        icon: faHdd,
         id: "histories",
         mutable: false,
         optional: true,
@@ -99,7 +115,7 @@ export const defaultActivities = [
     {
         anonymous: false,
         description: "Displays the history selector panel and opens History Multiview in the center panel.",
-        icon: "fa-columns",
+        icon: faColumns,
         id: "multiview",
         mutable: false,
         optional: true,
@@ -112,7 +128,7 @@ export const defaultActivities = [
     {
         anonymous: false,
         description: "Displays all of your datasets across all histories.",
-        icon: "fa-folder",
+        icon: faFolder,
         id: "datasets",
         mutable: false,
         optional: true,
@@ -125,7 +141,7 @@ export const defaultActivities = [
     {
         anonymous: true,
         description: "Display and create new pages.",
-        icon: "fa-file-contract",
+        icon: faFileContract,
         id: "pages",
         mutable: false,
         optional: true,
@@ -138,7 +154,7 @@ export const defaultActivities = [
     {
         anonymous: false,
         description: "Display Data Libraries with datasets available to all users.",
-        icon: "fa-database",
+        icon: faDatabase,
         id: "libraries",
         mutable: false,
         optional: true,
@@ -155,7 +171,7 @@ export function convertDropData(data: EventData): Activity | null {
         return {
             anonymous: true,
             description: "Displays this dataset.",
-            icon: "fa-file",
+            icon: faFile,
             id: `dataset-${data.id}`,
             mutable: true,
             optional: true,
@@ -170,7 +186,7 @@ export function convertDropData(data: EventData): Activity | null {
         return {
             anonymous: false,
             description: data.description as string,
-            icon: "fa-play",
+            icon: faPlay,
             id: `workflow-${data.id}`,
             mutable: true,
             optional: true,

diff --git a/client/src/stores/activityStore.ts b/client/src/stores/activityStore.ts
@@ -1,6 +1,7 @@
 /**
  * Stores the Activity Bar state
  */
+import { type IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { useDebounceFn, watchImmediate } from "@vueuse/core";
 import { computed, type Ref, ref, set } from "vue";
 
@@ -21,7 +22,7 @@ export interface Activity {
     // unique identifier
     id: string;
     // icon to be displayed in activity bar
-    icon: string | object;
+    icon: IconDefinition;
     // indicate if this activity can be modified and/or deleted
     mutable?: boolean;
     // indicate wether this activity can be disabled by the user