From 94e0925ebfd841105a808f5c6a3f2fd741d314a7 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Mon, 23 Oct 2023 11:20:32 -0400
Subject: [PATCH] Remove all usage of localize filter, use either directive or
 local computeds

---
 .../components/ActivityBar/ActivityItem.vue   | 12 +++++-
 client/src/components/Annotation.vue          | 11 ++++-
 client/src/components/Common/DelayedInput.vue | 13 +++++-
 .../DatasetInformation/DatasetAttributes.vue  | 43 +++++++++++++------
 .../DatasetInformation/DatasetError.vue       |  8 +++-
 client/src/components/Form/FormGeneric.vue    | 10 ++++-
 client/src/components/Form/FormMessage.vue    |  9 +++-
 .../History/CurrentHistory/HistoryEmpty.vue   | 11 ++++-
 .../CurrentHistory/HistoryMessages.vue        | 14 +++---
 .../History/HistoryPublishedList.vue          |  8 +++-
 .../components/History/Modals/CopyModal.vue   |  5 ++-
 client/src/components/Indices/IndexFilter.vue |  9 +++-
 .../components/Indices/SharingIndicators.vue  | 17 ++++++--
 client/src/components/LoadingSpan.vue         |  4 +-
 .../NewUserWelcome/components/Slides.vue      |  4 +-
 .../NewUserWelcome/components/Subtopics.vue   | 10 ++---
 .../NewUserWelcome/components/Topics.vue      | 10 ++---
 .../ObjectStore/SelectObjectStore.vue         |  2 +-
 .../ObjectStore/ShowSelectedObjectStore.vue   | 11 +++--
 .../src/components/Page/PageIndexActions.vue  |  4 +-
 client/src/components/Page/PageList.vue       | 13 ++++--
 client/src/components/Upload/UploadButton.vue | 12 +++++-
 .../Quota/ProvidedQuotaSourceUsageBar.vue     |  2 +-
 .../Workflow/Editor/LintSection.vue           |  2 +-
 .../BioComputeObjectExportCard.vue            |  2 +-
 .../Plugins/BioComputeObject/SendForm.vue     |  2 +-
 .../Workflow/WorkflowIndexActions.vue         |  6 ++-
 .../components/Workflow/WorkflowRunButton.vue |  6 ++-
 client/src/components/plugins/localization.js |  2 -
 29 files changed, 193 insertions(+), 69 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index c6ce2a2ee75b..0988f4f0909f 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -5,6 +5,7 @@ import { useRouter } from "vue-router/composables";
 import TextShort from "@/components/Common/TextShort.vue";
 import Popper from "@/components/Popper/Popper.vue";
 
+import { localize } from "@/utils/localization";
 const router = useRouter();
 
 interface Option {
@@ -43,6 +44,13 @@ const emit = defineEmits<{
     (e: "click"): void;
 }>();
 
+const localized = computed(() => {
+    return {
+        tooltip: localize(props.tooltip),
+        title: localize(props.title),
+    };
+});
+
 function onClick(evt: MouseEvent): void {
     emit("click");
     if (props.to) {
@@ -58,7 +66,7 @@ function onClick(evt: MouseEvent): void {
                 <b-nav-item
                     class="position-relative my-1 p-2"
                     :class="{ 'nav-item-active': isActive }"
-                    :aria-label="title | l">
+                    :aria-label="localized.title">
                     <span v-if="progressStatus" class="progress">
                         <div
                             class="progress-bar notransition"
@@ -83,7 +91,7 @@ function onClick(evt: MouseEvent): void {
             </div>
         </template>
         <div class="text-center px-2 py-1">
-            <small v-if="tooltip">{{ tooltip | l }}</small>
+            <small v-if="tooltip">{{ localized.tooltip }}</small>
             <small v-else>No tooltip available for this item</small>
             <div v-if="options" class="nav-options p-1">
                 <router-link v-for="(option, index) in options" :key="index" :to="option.value">
diff --git a/client/src/components/Annotation.vue b/client/src/components/Annotation.vue
index 8bc0aa4224c3..71b04c8c4401 100644
--- a/client/src/components/Annotation.vue
+++ b/client/src/components/Annotation.vue
@@ -6,8 +6,8 @@
         class="annotation"
         tag-name="p"
         :value="annotation"
-        :title="'Edit annotation...' | localize"
-        :placeholder="'Edit annotation...' | localize">
+        :title="localized.title"
+        :placeholder="localized.title">
         <DebouncedInput v-slot="inputScope" v-model="annotation" :delay="1000">
             <b-form-textarea
                 size="sm"
@@ -24,6 +24,8 @@
 </template>
 
 <script>
+import localize from "@/utils/localization";
+
 import ClickToEdit from "./ClickToEdit";
 import DebouncedInput from "./DebouncedInput";
 
@@ -47,6 +49,11 @@ export default {
                 }
             },
         },
+        localized() {
+            return {
+                title: localize("Edit annotation..."),
+            };
+        },
     },
 };
 </script>
diff --git a/client/src/components/Common/DelayedInput.vue b/client/src/components/Common/DelayedInput.vue
index 641b206e7da5..4a7c61da468d 100644
--- a/client/src/components/Common/DelayedInput.vue
+++ b/client/src/components/Common/DelayedInput.vue
@@ -19,7 +19,7 @@
                 size="sm"
                 :pressed="showAdvanced"
                 :variant="showAdvanced ? 'info' : 'secondary'"
-                :title="titleAdvanced | l"
+                :title="localized.titleAdvanced"
                 data-description="toggle advanced search"
                 @click="onToggle">
                 <icon v-if="showAdvanced" fixed-width icon="angle-double-up" />
@@ -30,7 +30,7 @@
                 aria-haspopup="true"
                 class="search-clear"
                 size="sm"
-                :title="titleClear | l"
+                :title="localized.titleClear"
                 data-description="reset query"
                 @click="clearBox">
                 <icon v-if="loading" fixed-width icon="spinner" spin />
@@ -40,6 +40,7 @@
     </b-input-group>
 </template>
 <script>
+import localize from "@/utils/localization";
 export default {
     props: {
         query: {
@@ -86,6 +87,14 @@ export default {
             this.setQuery(this.query);
         }
     },
+    computed: {
+        localized() {
+            return {
+                titleClear: localize(this.titleClear),
+                titleAdvanced: localize(this.titleAdvanced),
+            };
+        },
+    }
     methods: {
         clearTimer() {
             if (this.queryTimer) {
diff --git a/client/src/components/DatasetInformation/DatasetAttributes.vue b/client/src/components/DatasetInformation/DatasetAttributes.vue
index e197e126b6a9..0b24b4d6eb75 100644
--- a/client/src/components/DatasetInformation/DatasetAttributes.vue
+++ b/client/src/components/DatasetInformation/DatasetAttributes.vue
@@ -2,14 +2,14 @@
     <div aria-labelledby="dataset-attributes-heading">
         <h1 id="dataset-attributes-heading" v-localize class="h-lg">Edit Dataset Attributes</h1>
         <b-alert v-if="messageText" class="dataset-attributes-alert" :variant="messageVariant" show>
-            {{ messageText | l }}
+            {{ localized.messageText }}
         </b-alert>
         <DatasetAttributesProvider :id="datasetId" v-slot="{ result, loading }" @error="onError">
             <div v-if="!loading" class="mt-3">
                 <b-tabs>
                     <b-tab v-if="!result['attribute_disable']">
                         <template v-slot:title>
-                            <FontAwesomeIcon icon="bars" class="mr-1" />{{ "Attributes" | l }}
+                            <FontAwesomeIcon icon="bars" class="mr-1" />{{ localized.attributes }}
                         </template>
                         <FormDisplay :inputs="result['attribute_inputs']" @onChange="onAttribute" />
                         <div class="mt-2">
@@ -18,10 +18,10 @@
                                 variant="primary"
                                 class="mr-1"
                                 @click="submit('attribute', 'attributes')">
-                                <FontAwesomeIcon icon="save" class="mr-1" />{{ "Save" | l }}
+                                <FontAwesomeIcon icon="save" class="mr-1" />{{ localized.save }}
                             </b-button>
                             <b-button v-if="!result['metadata_disable']" @click="submit('attribute', 'autodetect')">
-                                <FontAwesomeIcon icon="redo" class="mr-1" />{{ "Auto-detect" | l }}
+                                <FontAwesomeIcon icon="redo" class="mr-1" />{{ localized.autoDetect }}
                             </b-button>
                         </div>
                     </b-tab>
@@ -31,14 +31,14 @@
                             !result['metadata_disable']
                         ">
                         <template v-slot:title>
-                            <FontAwesomeIcon icon="database" class="mr-1" />{{ "Datatypes" | l }}
+                            <FontAwesomeIcon icon="database" class="mr-1" />{{ localized.datatypes }}
                         </template>
                         <div v-if="!result['datatype_disable']" class="ui-portlet-section">
                             <div class="portlet-header">
                                 <div class="portlet-title">
                                     <FontAwesomeIcon icon="database" class="portlet-title-icon fa-fw mr-1" />
                                     <span class="portlet-title-text">
-                                        <b itemprop="name">{{ "Assign Datatype" | l }}</b>
+                                        <b itemprop="name">{{ localized.assignDatatype }}</b>
                                     </span>
                                 </div>
                             </div>
@@ -46,10 +46,10 @@
                                 <FormDisplay :inputs="result['datatype_inputs']" @onChange="onDatatype" />
                                 <div class="mt-2">
                                     <b-button variant="primary" class="mr-1" @click="submit('datatype', 'datatype')">
-                                        <FontAwesomeIcon icon="save" class="mr-1" />{{ "Save" | l }}
+                                        <FontAwesomeIcon icon="save" class="mr-1" />{{ localized.save }}
                                     </b-button>
                                     <b-button @click="submit('datatype', 'datatype_detect')">
-                                        <FontAwesomeIcon icon="redo" class="mr-1" />{{ "Auto-detect" | l }}
+                                        <FontAwesomeIcon icon="redo" class="mr-1" />{{ localized.autoDetect }}
                                     </b-button>
                                 </div>
                             </div>
@@ -59,7 +59,7 @@
                                 <div class="portlet-title">
                                     <FontAwesomeIcon icon="cog" class="portlet-title-icon fa-fw mr-1" />
                                     <span class="portlet-title-text">
-                                        <b itemprop="name">{{ "Convert to Datatype" | l }}</b>
+                                        <b itemprop="name">{{ localized.convertToDatatype }}</b>
                                     </span>
                                 </div>
                             </div>
@@ -67,7 +67,9 @@
                                 <FormDisplay :inputs="result['conversion_inputs']" @onChange="onConversion" />
                                 <div class="mt-2">
                                     <b-button variant="primary" @click="submit('conversion', 'conversion')">
-                                        <FontAwesomeIcon icon="exchange-alt" class="mr-1" />{{ "Create Dataset" | l }}
+                                        <FontAwesomeIcon icon="exchange-alt" class="mr-1" />{{
+                                            localized.createDatatype
+                                        }}
                                     </b-button>
                                 </div>
                             </div>
@@ -75,12 +77,12 @@
                     </b-tab>
                     <b-tab v-if="!result['permission_disable']">
                         <template v-slot:title>
-                            <FontAwesomeIcon icon="user" class="mr-1" />{{ "Permissions" | l }}
+                            <FontAwesomeIcon icon="user" class="mr-1" />{{ localized.permissions }}
                         </template>
                         <FormDisplay :inputs="result['permission_inputs']" @onChange="onPermission" />
                         <div class="mt-2">
                             <b-button variant="primary" @click="submit('permission', 'permission')">
-                                <FontAwesomeIcon icon="save" class="mr-1" />{{ "Save" | l }}
+                                <FontAwesomeIcon icon="save" class="mr-1" />{{ localized.save }}
                             </b-button>
                         </div>
                     </b-tab>
@@ -98,6 +100,8 @@ import { getGalaxyInstance } from "app";
 import FormDisplay from "components/Form/FormDisplay";
 import { DatasetAttributesProvider } from "components/providers/DatasetProvider";
 
+import { localize } from "@/utils/localization";
+
 import { setAttributes } from "./services";
 
 library.add(faBars, faCog, faDatabase, faExchangeAlt, faRedo, faSave, faUser);
@@ -121,6 +125,21 @@ export default {
             formData: {},
         };
     },
+    computed: {
+        localized() {
+            return {
+                messageText: localize(this.messageText),
+                attributes: localize("Attributes"),
+                save: localize("Save"),
+                autoDetect: localize("Auto-detect"),
+                datatypes: localize("Datatypes"),
+                assignDatatype: localize("Assign Datatype"),
+                convertToDatatype: localize("Convert to Datatype"),
+                createDataset: localize("Create Dataset"),
+                permissions: localize("Permissions"),
+            };
+        },
+    },
     methods: {
         onAttribute(data) {
             this.formData["attribute"] = data;
diff --git a/client/src/components/DatasetInformation/DatasetError.vue b/client/src/components/DatasetInformation/DatasetError.vue
index 06ee7c0bf3aa..14193b2ffa0c 100644
--- a/client/src/components/DatasetInformation/DatasetError.vue
+++ b/client/src/components/DatasetInformation/DatasetError.vue
@@ -64,7 +64,7 @@
                     <div v-if="showForm" id="fieldsAndButton">
                         <span class="mr-2 font-weight-bold">{{ emailTitle }}</span>
                         <span v-if="!!currentUser?.email">{{ currentUser?.email }}</span>
-                        <span v-else>{{ "You must be logged in to receive emails" | l }}</span>
+                        <span v-else>{{ localized.loginForEmail }}</span>
                         <FormElement
                             id="dataset-error-message"
                             v-model="message"
@@ -95,6 +95,7 @@ import { mapState } from "pinia";
 
 import { useMarkdown } from "@/composables/markdown";
 import { useUserStore } from "@/stores/userStore";
+import { localize } from "@/utils/localization";
 
 import DatasetErrorDetails from "./DatasetErrorDetails";
 import { sendErrorReport } from "./services";
@@ -135,6 +136,11 @@ export default {
             const hasError = this.resultMessages.some((msg) => msg[1] === "danger");
             return noResult || hasError;
         },
+        localized() {
+            return {
+                loginForEmail: localize("You must be logged in to receive emails"),
+            };
+        },
     },
     methods: {
         onError(err) {
diff --git a/client/src/components/Form/FormGeneric.vue b/client/src/components/Form/FormGeneric.vue
index 623c2ca244bc..4e3380976fc9 100644
--- a/client/src/components/Form/FormGeneric.vue
+++ b/client/src/components/Form/FormGeneric.vue
@@ -14,10 +14,10 @@
             </FormCard>
             <div class="mt-3">
                 <b-button id="submit" variant="primary" class="mr-1" @click="onSubmit()">
-                    <span :class="submitIconClass" />{{ submitTitle | l }}
+                    <span :class="submitIconClass" />{{ localized.submitTitle }}
                 </b-button>
                 <b-button v-if="cancelRedirect" @click="onCancel()">
-                    <span class="mr-1 fa fa-times" />{{ "Cancel" | l }}
+                    <span class="mr-1 fa fa-times" />{{ localized.cancel }}
                 </b-button>
             </div>
         </div>
@@ -85,6 +85,12 @@ export default {
         submitIconClass() {
             return `mr-1 fa ${this.submitIcon}`;
         },
+        localized() {
+            return {
+                submitTitle: this.submitTitle,
+                cancel: "Cancel",
+            };
+        },
     },
     methods: {
         configTitle(options) {
diff --git a/client/src/components/Form/FormMessage.vue b/client/src/components/Form/FormMessage.vue
index 8ab3d1395267..8e3f4d340ec7 100644
--- a/client/src/components/Form/FormMessage.vue
+++ b/client/src/components/Form/FormMessage.vue
@@ -1,9 +1,11 @@
 <template>
     <b-alert class="mt-2" :variant="variant" :show="showAlert">
-        {{ message | l }}
+        {{ localized.message }}
     </b-alert>
 </template>
 <script>
+import { localize } from "@/utils/localization";
+
 export default {
     props: {
         message: {
@@ -38,6 +40,11 @@ export default {
             }
             return false;
         },
+        localized() {
+            return {
+                message: localize(this.message),
+            };
+        },
     },
     watch: {
         message(newMessage) {
diff --git a/client/src/components/History/CurrentHistory/HistoryEmpty.vue b/client/src/components/History/CurrentHistory/HistoryEmpty.vue
index addac9563877..b82640be98a2 100644
--- a/client/src/components/History/CurrentHistory/HistoryEmpty.vue
+++ b/client/src/components/History/CurrentHistory/HistoryEmpty.vue
@@ -2,7 +2,7 @@
     <b-alert show>
         <h4 class="mb-1">
             <i class="fa fa-info-circle empty-message"></i>
-            <span>{{ message | l }}</span>
+            <span>{{ localized.message }}</span>
         </h4>
         <p v-if="writable">
             <a v-localize href="#" @click.prevent="openGlobalUploadModal">You can load your own data</a>
@@ -15,6 +15,8 @@
 <script>
 import { useGlobalUploadModal } from "composables/globalUploadModal";
 
+import { localize } from "@/utils/localization";
+
 export default {
     props: {
         message: { type: String, default: "This history is empty." },
@@ -24,6 +26,13 @@ export default {
         const { openGlobalUploadModal } = useGlobalUploadModal();
         return { openGlobalUploadModal };
     },
+    computed: {
+        localized() {
+            return {
+                message: localize(this.message),
+            };
+        },
+    },
     methods: {
         clickDataLink() {
             this.eventHub.$emit("openToolSection", "getext");
diff --git a/client/src/components/History/CurrentHistory/HistoryMessages.vue b/client/src/components/History/CurrentHistory/HistoryMessages.vue
index fe000326487c..ad07d7095230 100644
--- a/client/src/components/History/CurrentHistory/HistoryMessages.vue
+++ b/client/src/components/History/CurrentHistory/HistoryMessages.vue
@@ -1,13 +1,10 @@
 <template>
     <div v-if="hasMessages" class="mx-3 my-2">
         <b-alert :show="history.isDeleted" variant="warning">
-            {{ "This history has been deleted" | localize }}
+            {{ localized.isDeleted }}
         </b-alert>
         <b-alert :show="userOverQuota" variant="warning">
-            {{
-                "You are over your disk quota. Tool execution is on hold until your disk usage drops below your allocated quota."
-                    | localize
-            }}
+            {{ localized.userOverQuota }}
         </b-alert>
     </div>
 </template>
@@ -26,6 +23,13 @@ export default {
         hasMessages() {
             return this.userOverQuota || history.isDeleted;
         },
+        localized() {
+            return {
+                isDeleted: "This history has been deleted",
+                userOverQuota:
+                    "You are over your disk quota. Tool execution is on hold until your disk usage drops below your allocated quota.",
+            };
+        },
     },
 };
 </script>
diff --git a/client/src/components/History/HistoryPublishedList.vue b/client/src/components/History/HistoryPublishedList.vue
index cca94b113dd7..58ec23c4a277 100644
--- a/client/src/components/History/HistoryPublishedList.vue
+++ b/client/src/components/History/HistoryPublishedList.vue
@@ -188,6 +188,12 @@ onUnmounted(() => {
     useInfiniteScroll(scrollableDiv.value, () => {});
 });
 
+const localized = computed(() => {
+    return {
+        placeholder: "Search by name or use the advanced filtering options",
+    };
+});
+
 watch([filterText, sortBy, sortDesc], async () => {
     await load();
 });
@@ -202,7 +208,7 @@ watch([filterText, sortBy, sortDesc], async () => {
         <div v-else>
             <FilterMenu
                 name="Published Histories"
-                :placeholder="'Search by name or use the advanced filtering options' | localize"
+                :placeholder="localized.placeholder"
                 :filter-class="filters"
                 :filter-text.sync="filterText"
                 :loading="loading"
diff --git a/client/src/components/History/Modals/CopyModal.vue b/client/src/components/History/Modals/CopyModal.vue
index fdcdeddb30da..c8673b1265ee 100644
--- a/client/src/components/History/Modals/CopyModal.vue
+++ b/client/src/components/History/Modals/CopyModal.vue
@@ -37,7 +37,7 @@
             <div>
                 <b-button class="mr-3" @click="cancel()"> Cancel </b-button>
                 <b-button :variant="saveVariant" :disabled="loading || !formValid" @click="copy(ok)">
-                    {{ saveTitle | localize }}
+                    {{ saveTitle }}
                 </b-button>
             </div>
         </div>
@@ -49,6 +49,7 @@ import { mapActions, mapState } from "pinia";
 
 import { useHistoryStore } from "@/stores/historyStore";
 import { useUserStore } from "@/stores/userStore";
+import { localize } from "@/utils/localization";
 
 export default {
     props: {
@@ -67,7 +68,7 @@ export default {
             return `Copying History: ${this.history.name}`;
         },
         saveTitle() {
-            return this.loading ? "Saving..." : "Copy History";
+            return localize(this.loading ? "Saving..." : "Copy History");
         },
         saveVariant() {
             return this.loading ? "info" : this.formValid ? "primary" : "secondary";
diff --git a/client/src/components/Indices/IndexFilter.vue b/client/src/components/Indices/IndexFilter.vue
index 94ce4cc5b645..65be5243e511 100644
--- a/client/src/components/Indices/IndexFilter.vue
+++ b/client/src/components/Indices/IndexFilter.vue
@@ -7,7 +7,7 @@
                     name="query"
                     :value="debouncedValue"
                     autocomplete="off"
-                    :placeholder="placeholder | localize"
+                    :placeholder="localized.placeholder"
                     data-description="filter index input"
                     class="search-query index-filter-query"
                     :size="size"
@@ -92,6 +92,13 @@ export default {
             localFilter: this.value,
         };
     },
+    computed: {
+        localized() {
+            return {
+                placeholder: this.placeholder,
+            };
+        },
+    },
     watch: {
         value(newValue) {
             this.localFilter = newValue;
diff --git a/client/src/components/Indices/SharingIndicators.vue b/client/src/components/Indices/SharingIndicators.vue
index b2f1cd3fdae2..61eb9ef211dc 100644
--- a/client/src/components/Indices/SharingIndicators.vue
+++ b/client/src/components/Indices/SharingIndicators.vue
@@ -3,6 +3,9 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faGlobe, faLink, faShareAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, VBTooltip } from "bootstrap-vue";
+import { computed } from "vue";
+
+import { localize } from "@/utils/localization";
 
 library.add(faGlobe, faShareAlt, faLink);
 
@@ -10,6 +13,14 @@ interface SharingIndicatorsProps {
     object: Object;
 }
 const props = defineProps<SharingIndicatorsProps>();
+
+const localized = computed(() => {
+    return {
+        findPublished: localize("Find all published items"),
+        findImportable: localize("Find all importable items"),
+        findShared: localize("Find all items shared with me"),
+    };
+});
 </script>
 
 <template>
@@ -20,7 +31,7 @@ const props = defineProps<SharingIndicatorsProps>();
             class="sharing-indicator-published"
             size="sm"
             variant="link"
-            :title="'Find all published items' | localize"
+            :title="localized.findPublished"
             @click.prevent="$emit('filter', 'published')">
             <FontAwesomeIcon icon="globe" />
         </BButton>
@@ -30,7 +41,7 @@ const props = defineProps<SharingIndicatorsProps>();
             class="sharing-indicator-importable"
             size="sm"
             variant="link"
-            :title="'Find all importable items' | localize"
+            :title="localized.findImportable"
             @click.prevent="$emit('filter', 'importable')">
             <FontAwesomeIcon icon="link" />
         </BButton>
@@ -40,7 +51,7 @@ const props = defineProps<SharingIndicatorsProps>();
             class="sharing-indicator-shared"
             size="sm"
             variant="link"
-            :title="'Find all items shared with me' | localize"
+            :title="localized.findShared"
             @click.prevent="$emit('filter', 'shared_with_me')">
             <FontAwesomeIcon icon="share-alt" />
         </BButton>
diff --git a/client/src/components/LoadingSpan.vue b/client/src/components/LoadingSpan.vue
index c4c3b9d26b5e..470f6bf0bca5 100644
--- a/client/src/components/LoadingSpan.vue
+++ b/client/src/components/LoadingSpan.vue
@@ -1,7 +1,9 @@
 <template>
     <span>
         <span :class="spinnerClasses" title="loading"></span>
-        <span v-if="!spinnerOnly" class="loading-message">{{ message }}.<span class="blinking">..</span></span>
+        <span v-if="!spinnerOnly" v-localize class="loading-message"
+            >{{ message }}.<span class="blinking">..</span></span
+        >
     </span>
 </template>
 <script>
diff --git a/client/src/components/NewUserWelcome/components/Slides.vue b/client/src/components/NewUserWelcome/components/Slides.vue
index d8ad5024b50f..005027be077e 100644
--- a/client/src/components/NewUserWelcome/components/Slides.vue
+++ b/client/src/components/NewUserWelcome/components/Slides.vue
@@ -14,12 +14,12 @@
             position="float">
             <b-carousel-slide v-for="(slide, idx) in slides" :key="idx">
                 <h2 class="carousel-caption h-md">
-                    {{ slide.text | localize }}
+                    {{ slide.text }}
                 </h2>
                 <img class="carousel-fig" :src="imgUrl(slide.file)" :class="slide.size" :alt="slide.alt" />
             </b-carousel-slide>
             <b-carousel-slide>
-                <h2 class="h-md">{{ "Enjoy using Galaxy!" | localize }}</h2>
+                <h2 class="h-md">{{ "Enjoy using Galaxy!" }}</h2>
                 <img class="large-img" :src="imgUrl('sections/galaxy_logo.png')" alt="Galaxy logo" />
             </b-carousel-slide>
         </b-carousel>
diff --git a/client/src/components/NewUserWelcome/components/Subtopics.vue b/client/src/components/NewUserWelcome/components/Subtopics.vue
index caf3f1127078..1ac9bff02d5b 100644
--- a/client/src/components/NewUserWelcome/components/Subtopics.vue
+++ b/client/src/components/NewUserWelcome/components/Subtopics.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
         <header class="main-header">
-            <h1 class="text-center my-3">{{ title | localize }}</h1>
-            <h2 class="text-center my-3 h-sm">{{ intro | localize }}</h2>
+            <h1 v-localize class="text-center my-3">{{ title }}</h1>
+            <h2 v-localize class="text-center my-3 h-sm">{{ intro }}</h2>
         </header>
         <b-row class="justify-content-md-center mb-3" :data-new-user-welcome-topic-title="title">
             <b-card-group v-for="(subject, idx) in topics" :key="idx">
@@ -15,9 +15,9 @@
                         height="50h"
                         :src="imgUrl(subject.image)"
                         :alt="subject.alt"></b-card-img>
-                    <b-card-text class="font-weight-light">{{ subject.intro | localize }}</b-card-text>
-                    <b-button class="mt-auto" variant="info" @click="$emit('select', idx)">{{
-                        subject.title | localize
+                    <b-card-text v-localize class="font-weight-light">{{ subject.intro }}</b-card-text>
+                    <b-button v-localize class="mt-auto" variant="info" @click="$emit('select', idx)">{{
+                        subject.title
                     }}</b-button>
                 </b-card>
             </b-card-group>
diff --git a/client/src/components/NewUserWelcome/components/Topics.vue b/client/src/components/NewUserWelcome/components/Topics.vue
index 2c2fcfc9ca38..d1b174a9d24f 100644
--- a/client/src/components/NewUserWelcome/components/Topics.vue
+++ b/client/src/components/NewUserWelcome/components/Topics.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
         <header class="main-header">
-            <h1 class="text-center my-3">{{ title | localize }}</h1>
-            <h2 class="text-center my-3 h-sm">{{ intro | localize }}</h2>
+            <h1 v-localize class="text-center my-3">{{ title }}</h1>
+            <h2 v-localize class="text-center my-3 h-sm">{{ intro }}</h2>
         </header>
         <b-row class="justify-content-md-center mb-3">
             <b-card-group v-for="(subject, idx) in topics" :key="idx">
@@ -15,9 +15,9 @@
                         height="50h"
                         :src="imgUrl(subject.image)"
                         :alt="subject.alt"></b-card-img>
-                    <b-card-text class="font-weight-light">{{ subject.blurb | localize }}</b-card-text>
-                    <b-button class="mt-auto" variant="info" @click="$emit('select', idx)">{{
-                        subject.title | localize
+                    <b-card-text v-localize class="font-weight-light">{{ subject.blurb }}</b-card-text>
+                    <b-button v-localize class="mt-auto" variant="info" @click="$emit('select', idx)">{{
+                        subject.title
                     }}</b-button>
                 </b-card>
             </b-card-group>
diff --git a/client/src/components/ObjectStore/SelectObjectStore.vue b/client/src/components/ObjectStore/SelectObjectStore.vue
index c9b0a0fc3213..782ffe5683a9 100644
--- a/client/src/components/ObjectStore/SelectObjectStore.vue
+++ b/client/src/components/ObjectStore/SelectObjectStore.vue
@@ -96,7 +96,7 @@ async function handleSubmit(preferredObjectStoreId: string) {
                             class="preferred-object-store-select-button"
                             data-object-store-id="__null__"
                             @click="handleSubmit(null)"
-                            ><i>{{ defaultOptionTitle | localize }}</i></b-button
+                            ><i v-localize>{{ defaultOptionTitle }}</i></b-button
                         >
                         <b-button
                             v-for="object_store in objectStores"
diff --git a/client/src/components/ObjectStore/ShowSelectedObjectStore.vue b/client/src/components/ObjectStore/ShowSelectedObjectStore.vue
index 51eaf5fca96e..62b65c255bb1 100644
--- a/client/src/components/ObjectStore/ShowSelectedObjectStore.vue
+++ b/client/src/components/ObjectStore/ShowSelectedObjectStore.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
+import { localize } from "@/utils/localization";
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import { getObjectStoreDetails } from "./services";
@@ -20,6 +21,10 @@ const objectStore = ref<ConcreteObjectStoreModel | null>(null);
 const loading = ref(true);
 const error = ref<string | null>(null);
 
+const loadingMessage = computed(() => {
+    return localize("Loading object store details");
+});
+
 async function fetch() {
     loading.value = true;
     try {
@@ -37,13 +42,13 @@ watch(
         fetch();
     }
 );
+
 fetch();
-const loadingMessage = "Loading object store details";
 </script>
 
 <template>
     <div>
-        <LoadingSpan v-if="loading" :message="loadingMessage | localize" />
+        <LoadingSpan v-if="loading" :message="loadingMessage" />
         <DescribeObjectStore v-else-if="objectStore != null" :what="forWhat" :storage-info="objectStore">
         </DescribeObjectStore>
         <b-alert v-else-if="error" show variant="danger">{{ error }}</b-alert>
diff --git a/client/src/components/Page/PageIndexActions.vue b/client/src/components/Page/PageIndexActions.vue
index b4563d38a521..2233baa2c874 100644
--- a/client/src/components/Page/PageIndexActions.vue
+++ b/client/src/components/Page/PageIndexActions.vue
@@ -14,9 +14,9 @@ function create() {
 </script>
 <template>
     <span>
-        <BButton id="page-create" class="m-1" @click="create">
+        <BButton id="page-create" v-localize class="m-1" @click="create">
             <FontAwesomeIcon icon="plus" />
-            {{ "Create" | localize }}
+            Create
         </BButton>
     </span>
 </template>
diff --git a/client/src/components/Page/PageList.vue b/client/src/components/Page/PageList.vue
index e7e0f3ac311c..7a35ce3f4e62 100644
--- a/client/src/components/Page/PageList.vue
+++ b/client/src/components/Page/PageList.vue
@@ -67,9 +67,9 @@
                 <span v-if="row.item.published || row.item.shared || row.item.importable">
                     <SharingIndicators :object="row.item" @filter="(filter) => applyFilter(filter, true)" />
                     <CopyToClipboard
-                        :title="'Copy URL' | localize"
+                        :title="localized.copyURL"
                         :text="copyUrl(row.item)"
-                        :message="'Link copied to your clipboard' | localize" />
+                        :message="localized.linkCopied" />
                 </span>
                 <a
                     v-if="!row.item.published && !row.item.shared && !row.item.importable"
@@ -104,6 +104,7 @@ import Filtering, { contains, equals, expandNameTagWithQuotes, toBool } from "ut
 import _l from "utils/localization";
 import { useRouter } from "vue-router/composables";
 
+import { localize } from "@/utils/localization";
 import { absPath } from "@/utils/redirect";
 
 import PageDropdown from "./PageDropdown";
@@ -260,7 +261,13 @@ export default {
             return extraParams;
         },
         title() {
-            return this.published ? `Published Pages` : `Pages`;
+            return localize(this.published ? `Published Pages` : `Pages`);
+        },
+        localized() {
+            return {
+                copyURL: localize("Copy URL"),
+                linkCopied: localize("Link copied to your clipboard"),
+            };
         },
     },
     created() {
diff --git a/client/src/components/Upload/UploadButton.vue b/client/src/components/Upload/UploadButton.vue
index ade8abee45b5..460a7dec952b 100644
--- a/client/src/components/Upload/UploadButton.vue
+++ b/client/src/components/Upload/UploadButton.vue
@@ -2,8 +2,8 @@
     <b-button
         id="activity-upload"
         v-b-tooltip.hover.noninteractive.bottom
-        :aria-label="title | localize"
-        :title="title | localize"
+        :aria-label="localizedTitle"
+        :title="localizedTitle"
         class="upload-button"
         size="sm"
         @click="showUploadDialog">
@@ -30,6 +30,8 @@ import { VBTooltip } from "bootstrap-vue";
 import { useGlobalUploadModal } from "composables/globalUploadModal";
 import Query from "utils/query-string-parsing";
 
+import { localize } from "@/utils/localization";
+
 library.add(faUpload);
 
 export default {
@@ -50,6 +52,11 @@ export default {
             percentage: 0,
         };
     },
+    computed: {
+        localizedTitle() {
+            return localize(this.title);
+        },
+    },
     mounted() {
         this.eventHub.$on("upload:status", this.setStatus);
         this.eventHub.$on("upload:percentage", this.setPercentage);
@@ -61,6 +68,7 @@ export default {
         this.eventHub.$off("upload:status", this.setStatus);
         this.eventHub.$off("upload:percentage", this.setPercentage);
     },
+
     methods: {
         showUploadDialog() {
             this.openGlobalUploadModal();
diff --git a/client/src/components/User/DiskUsage/Quota/ProvidedQuotaSourceUsageBar.vue b/client/src/components/User/DiskUsage/Quota/ProvidedQuotaSourceUsageBar.vue
index e53c86043add..ae0801260c1a 100644
--- a/client/src/components/User/DiskUsage/Quota/ProvidedQuotaSourceUsageBar.vue
+++ b/client/src/components/User/DiskUsage/Quota/ProvidedQuotaSourceUsageBar.vue
@@ -3,7 +3,7 @@
         v-if="objectStore.quota.enabled"
         v-slot="{ result: quotaUsage, loading: isLoadingUsage }"
         :quota-source-label="objectStore.quota.source">
-        <LoadingSpan v-if="isLoadingUsage" :message="loadingMessage | localize" />
+        <LoadingSpan v-if="isLoadingUsage" :message="loadingMessage" />
         <QuotaUsageBar v-else-if="quotaUsage" :quota-usage="quotaUsage" :embedded="true" :compact="true" />
     </QuotaSourceUsageProvider>
 </template>
diff --git a/client/src/components/Workflow/Editor/LintSection.vue b/client/src/components/Workflow/Editor/LintSection.vue
index cfa1ffd0ef83..db13e7ff362f 100644
--- a/client/src/components/Workflow/Editor/LintSection.vue
+++ b/client/src/components/Workflow/Editor/LintSection.vue
@@ -6,7 +6,7 @@
         </div>
         <div v-else>
             <FontAwesomeIcon icon="exclamation-triangle" class="text-warning" />
-            <span>{{ warningMessage | localize }}</span>
+            <span v-localize>{{ warningMessage }}</span>
             <div v-if="hasWarningItems" class="mt-2">
                 <div
                     v-for="(item, idx) in warningItems"
diff --git a/client/src/components/Workflow/Invocation/Export/Plugins/BioComputeObject/BioComputeObjectExportCard.vue b/client/src/components/Workflow/Invocation/Export/Plugins/BioComputeObject/BioComputeObjectExportCard.vue
index 0ddd8e6d61ec..164919098c5f 100644
--- a/client/src/components/Workflow/Invocation/Export/Plugins/BioComputeObject/BioComputeObjectExportCard.vue
+++ b/client/src/components/Workflow/Invocation/Export/Plugins/BioComputeObject/BioComputeObjectExportCard.vue
@@ -80,7 +80,7 @@
                             </label>
                         </div>
                         <div class="form-group">
-                            <button class="btn btn-primary">{{ "Submit" | localize }}</button>
+                            <button v-localize class="btn btn-primary">Submit</button>
                         </div>
                     </form>
                 </div>
diff --git a/client/src/components/Workflow/Invocation/Export/Plugins/BioComputeObject/SendForm.vue b/client/src/components/Workflow/Invocation/Export/Plugins/BioComputeObject/SendForm.vue
index ef219e57601c..bf1789863ce5 100644
--- a/client/src/components/Workflow/Invocation/Export/Plugins/BioComputeObject/SendForm.vue
+++ b/client/src/components/Workflow/Invocation/Export/Plugins/BioComputeObject/SendForm.vue
@@ -173,7 +173,7 @@ defineExpose({ showModal });
                         <FontAwesomeIcon icon="spinner" spin />
                         Generating BCO please wait...
                     </div>
-                    <button v-else class="btn btn-primary">{{ "Submit" | localize }}</button>
+                    <button v-else v-localize class="btn btn-primary">Submit</button>
                 </div>
             </form>
         </div>
diff --git a/client/src/components/Workflow/WorkflowIndexActions.vue b/client/src/components/Workflow/WorkflowIndexActions.vue
index 7e549cdec6a2..46d061b7d82a 100644
--- a/client/src/components/Workflow/WorkflowIndexActions.vue
+++ b/client/src/components/Workflow/WorkflowIndexActions.vue
@@ -3,24 +3,26 @@
         <BButton
             id="workflow-create"
             v-b-tooltip.hover
+            v-localize
             aria-haspopup="true"
             :title="createTitle"
             :disabled="isAnonymous"
             class="m-1"
             @click="navigateToCreate">
             <FontAwesomeIcon icon="plus" />
-            {{ "Create" | localize }}
+            Create
         </BButton>
         <BButton
             id="workflow-import"
             v-b-tooltip.hover
+            v-localize
             aria-haspopup="true"
             :title="importTitle"
             :disabled="isAnonymous"
             class="m-1"
             @click="navigateToImport">
             <FontAwesomeIcon icon="upload" />
-            {{ "Import" | localize }}
+            Import
         </BButton>
     </span>
 </template>
diff --git a/client/src/components/Workflow/WorkflowRunButton.vue b/client/src/components/Workflow/WorkflowRunButton.vue
index 08d0c81ad492..c9088e39856b 100644
--- a/client/src/components/Workflow/WorkflowRunButton.vue
+++ b/client/src/components/Workflow/WorkflowRunButton.vue
@@ -1,7 +1,7 @@
 <template>
     <BButton
         v-b-tooltip.hover.bottom
-        :title="title | localize"
+        :title="title"
         :data-workflow-run="id"
         class="workflow-run btn-sm btn-primary fa fa-play"
         @click.stop="executeWorkflow" />
@@ -10,6 +10,8 @@
 <script>
 import { BButton, VBTooltip } from "bootstrap-vue";
 
+import { localize } from "@/utils/localization";
+
 export default {
     components: {
         BButton,
@@ -29,7 +31,7 @@ export default {
     },
     computed: {
         title() {
-            return "Run workflow";
+            return localize("Run workflow");
         },
     },
     methods: {
diff --git a/client/src/components/plugins/localization.js b/client/src/components/plugins/localization.js
index cf6c196778b2..f01fffed8121 100644
--- a/client/src/components/plugins/localization.js
+++ b/client/src/components/plugins/localization.js
@@ -34,8 +34,6 @@ function localizeMixin(l) {
 
 export const localizationPlugin = {
     install(Vue, l = _l) {
-        Vue.filter("localize", l);
-        Vue.filter("l", l);
         Vue.directive("localize", localizeDirective(l));
         Vue.mixin(localizeMixin(l));
     },