Remove all usage of localize filter, use either directive or local co…

…mputeds

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">

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>

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) {

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,25 +31,25 @@
                             !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>
                             <div class="portlet-content">
                                 <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,28 +59,30 @@
                                 <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>
                             <div class="portlet-content">
                                 <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>
                         </div>
                     </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;

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) {

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) {

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) {

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");

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>