Removing the i18n middleware from the application

rancher · May 2, 2024 · 5312b64 · 5312b64
1 parent ee6332e
commit 5312b64
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 24 deletions.
diff --git a/jest.setup.js b/jest.setup.js
@@ -14,7 +14,7 @@ global.TextEncoder = TextEncoder;
 global.TextDecoder = TextDecoder;
 
 Vue.config.productionTip = false;
-Vue.use(i18n);
+Vue.use(i18n, { store: { dispatch() {} } });
 Vue.use(VTooltip);
 Vue.use(VCleanTooltip);
 Vue.component('v-select', vSelect);

diff --git a/shell/config/middleware.js b/shell/config/middleware.js
@@ -3,7 +3,4 @@ const middleware = {};
 middleware['authenticated'] = require('../middleware/authenticated.js');
 middleware['authenticated'] = middleware['authenticated'].default || middleware['authenticated'];
 
-middleware['i18n'] = require('../middleware/i18n.js');
-middleware['i18n'] = middleware['i18n'].default || middleware['i18n'];
-
 export default middleware;
diff --git a/shell/initialize/App.js b/shell/initialize/App.js
@@ -1,11 +1,11 @@
 // Taken from @nuxt/vue-app/template/App.js
 import {
   getMatchedComponentsInstances, getChildrenComponentInstancesUsingFetch, promisify, globalHandleError, sanitizeComponent
-} from '../utils/nuxt';
-import NuxtError from '../components/templates/error.vue';
-import NuxtLoading from '../components/nav/GlobalLoading.vue';
+} from '@shell/utils/nuxt';
+import NuxtError from '@shell/components/templates/error.vue';
+import NuxtLoading from '@shell/components/nav/GlobalLoading.vue';
 
-import '../assets/styles/app.scss';
+import '@shell/assets/styles/app.scss';
 
 export default {
   render(h) {

diff --git a/shell/initialize/client.js b/shell/initialize/client.js
@@ -90,7 +90,7 @@ const errorHandler = Vue.config.errorHandler || console.error; // eslint-disable
 createApp(nuxt.publicRuntimeConfig).then(mountApp).catch(errorHandler); // eslint-disable-line no-undef
 
 function callMiddleware(Components, context) {
-  let midd = ['i18n'];
+  let midd = [];
   let unknownMiddleware = false;
 
   Components.forEach((Component) => {

diff --git a/shell/initialize/plugins.js b/shell/initialize/plugins.js
@@ -29,8 +29,6 @@ import version from '@shell/plugins/version';
 import emberCookie from '@shell/plugins/ember-cookie';
 
 export async function installPlugins(app, inject, Vue) {
-  Vue.use(i18n);
-
   const pluginDefinitions = [cookieUniversalNuxt, axios, plugins, pluginsLoader, axiosShell, intNumber, positiveIntNumber, nuxtClientInit, replaceAll, backButton, plugin, codeMirror, version, steveCreateWorker, emberCookie];
 
   const installations = pluginDefinitions.map(async(pluginDefinition) => {
@@ -40,4 +38,7 @@ export async function installPlugins(app, inject, Vue) {
   });
 
   await Promise.all(installations);
+
+  // Order matters here. This is coming after the other plugins specifically so $cookies can be installed. i18n/init relies on prefs/get which relies on $cookies.
+  Vue.use(i18n, { store: app.store });
 }
diff --git a/shell/middleware/i18n.js b/shell/middleware/i18n.js
diff --git a/shell/plugins/i18n.js b/shell/plugins/i18n.js
@@ -56,7 +56,10 @@ export function directiveSsr(vnode, binding) {
 }
 
 const i18n = {
+  name:    'i18n',
   install: (Vue, _options) => {
+    _options?.store?.dispatch('i18n/init');
+
     if (Vue.prototype.t && Vue.directive('t') && Vue.component('t')) {
       // eslint-disable-next-line no-console
       console.debug('Skipping i18n install. Directive, component, and option already exist.');
@@ -129,6 +132,12 @@ const i18n = {
 
 export default i18n;
 
-console.warn('The implicit addition of i18n options has been deprecated in Rancher Shell and will be removed in a future version. Make sure to invoke `Vue.use(i18n)` to maintain compatibility.');
+// This is being done for backwards compatibility with our extensions that have written tests and didn't properly make use of Vue.use() when importing and mocking translations
+// Example failing test https://github.com/rancher/dashboard/actions/runs/8927503474/job/24521022320?pr=10923
+const isThisFileBeingExecutedInATest = process.env.NODE_ENV === 'test';
 
-Vue.use(i18n);
+if (isThisFileBeingExecutedInATest) {
+  // Go take a look at our jest.setup.js to see how we make use of Vue.use(i18n, ...)
+  console.warn('The implicit addition of i18n options has been deprecated in Rancher Shell and will be removed in a future version. Make sure to invoke `Vue.use(i18n)` to maintain compatibility.');
+  Vue.use(i18n);
+}
diff --git a/shell/store/index.js b/shell/store/index.js
@@ -778,7 +778,6 @@ export const actions = {
     }
 
     res = await allHash(promises);
-    dispatch('i18n/init');
     const isMultiCluster = getters['isMultiCluster'];
 
     // If the local cluster is a Harvester cluster and 'rancher-manager-support' is true, it means that the embedded Rancher is being used.