@rancher/shell 1.2.3 → 2.0.1

package/initialize/install-plugins.js

@@ -0,0 +1,123 @@
+import PortalVue from 'portal-vue';
+import VueResize from 'vue-resize';
+import ShortKey from 'vue-shortkey';
+import VTooltip from 'v-tooltip';
+import vSelect from 'vue-select';
+import 'vue-resize/dist/vue-resize.css';
+
+import '@shell/plugins/extend-router';
+import '@shell/plugins/formatters';
+import '@shell/plugins/vue-js-modal';
+import '@shell/plugins/js-yaml';
+
+import i18n from '@shell/plugins/i18n';
+import globalFormatters from '@shell/plugins/global-formatters';
+
+import axios from '@shell/utils/axios';
+import cookieUniversalNuxt from '@shell/utils/cookie-universal-nuxt';
+import config from '@shell/utils/config';
+import axiosShell from '@shell/plugins/axios';
+import backButton from '@shell/plugins/back-button';
+import codeMirror from '@shell/plugins/codemirror-loader';
+import VueCodemirror from 'vue-codemirror';
+import * as intNumber from '@shell/directives/int-number';
+import nuxtClientInit from '@shell/plugins/nuxt-client-init';
+import plugin from '@shell/plugins/plugin';
+import plugins from '@shell/core/plugins.js';
+import pluginsLoader from '@shell/core/plugins-loader.js';
+import replaceAll from '@shell/plugins/replaceall';
+import steveCreateWorker from '@shell/plugins/steve-create-worker';
+import version from '@shell/plugins/version';
+import emberCookie from '@shell/plugins/ember-cookie';
+
+export async function installPlugins(vueApp) {
+  vueApp.use(globalFormatters);
+  vueApp.use(PortalVue);
+  vueApp.use(VueResize);
+  vueApp.use(VTooltip);
+  vueApp.use(ShortKey, { prevent: ['input', 'textarea', 'select'] });
+  vueApp.use(VueCodemirror);
+  vueApp.component('v-select', vSelect);
+}
+
+export async function installInjectedPlugins(app, vueApp) {
+  const pluginDefinitions = [config, cookieUniversalNuxt, axios, plugins, pluginsLoader, axiosShell, intNumber, codeMirror, nuxtClientInit, replaceAll, backButton, plugin, version, steveCreateWorker, emberCookie];
+
+  const installations = pluginDefinitions.map(async(pluginDefinition) => {
+    if (typeof pluginDefinition === 'function') {
+      await pluginDefinition(
+        app.context,
+        (key, value) => inject(key, value, app.context, vueApp)
+      );
+    }
+  });
+
+  await Promise.all(installations);
+
+  // We had i18n/init happening asynchronously within the i18n installation method. We need this to happen synchronously otherwise we end up with race conditions where some pages won't load when translated.
+  // If there's any performance reasons this can be done concurrently with all of the installation promises above but I felt it was organizationally better to keep both i18n items together.
+  await app.store.dispatch('i18n/init');
+
+  // 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.
+  vueApp.use(i18n, { store: app.store });
+}
+
+/**
+ * Injects a key-value pair into a given context and installs a Vue plugin with
+ * the provided key-value pair.
+ *
+ * @param {string} key The key to be injected
+ * @param {*} value The value to be injected
+ * @param {object} context The context object into which the key-value pair will
+ * be injected
+ * @param {object} vueApp The Vue instance
+ * @returns {void}
+ *
+ * @property {object} context.app The app object within the context
+ * @property {object} context.store The store object within the context
+ *
+ * Note: This function mutates the context object, including the context app and
+ * store.
+ */
+function inject(key, value, context, vueApp) {
+  if (!key) {
+    throw new Error('inject(key, value) has no key provided');
+  }
+  if (value === undefined) {
+    throw new Error(`inject('${ key }', value) has no value provided`);
+  }
+
+  const { app, store } = context;
+
+  key = `$${ key }`;
+  // Add into app
+  app[key] = value;
+  // Add into context
+  if (!app.context[key]) {
+    app.context[key] = value;
+  }
+
+  // Add into store
+  store[key] = app[key];
+
+  // Check if plugin not already installed
+  const installKey = `__nuxt_${ key }_installed__`;
+
+  window.installedPlugins = window.installedPlugins || {};
+
+  if (window.installedPlugins[installKey]) {
+    return;
+  }
+  window[window.installedPlugins] = true;
+
+  // Call vueApp.use() to install the plugin into vm
+  vueApp.use(() => {
+    if (!Object.prototype.hasOwnProperty.call(vueApp.prototype, key)) {
+      Object.defineProperty(vueApp.prototype, key, {
+        get() {
+          return this.$root.$options[key];
+        }
+      });
+    }
+  });
+}

package/list/__tests__/workload.test.ts

@@ -45,7 +45,7 @@ describe('component: workload', () => {
       }
     });
 
-    expect(wrapper.vm.schema).toStrictEqual(schema);
+    expect((wrapper.vm as any).schema).toStrictEqual(schema);
   });
 
   // TODO - #7473: Further tests may be defined within one of the table components

package/list/catalog.cattle.io.app.vue

@@ -39,6 +39,7 @@ export default {
     :loading="loading"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
     :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+    data-testid="installed-app-catalog-list"
   >
     <template #cell:upgrade="{row}">
       <span

package/list/cis.cattle.io.clusterscan.vue

@@ -1,8 +1,10 @@
 <script>
+import Vue from 'vue';
 import ResourceTable from '@shell/components/ResourceTable';
-import { get } from '@shell/utils/object';
 import { AGE } from '@shell/config/table-headers';
 import ResourceFetch from '@shell/mixins/resource-fetch';
+import { allHash } from '@shell/utils/promise';
+import { fetchSpecsScheduledScanConfig } from '@shell/models/cis.cattle.io.clusterscan';
 
 export default {
   components: { ResourceTable },
@@ -25,19 +27,23 @@ export default {
   },
 
   async fetch() {
-    await this.$fetchType(this.resource);
+    // Fetch the list and schema resource fields in parallel
+    const res = await allHash({
+      resources:              this.$fetchType(this.resource),
+      hasScheduledScanConfig: fetchSpecsScheduledScanConfig(this.schema),
+    });
+
+    Vue.set(this, 'hasScheduledScanConfig', res.hasScheduledScanConfig);
+  },
+
+  data() {
+    return { hasScheduledScanConfig: null };
   },
 
   computed: {
     // warning state and scheduling added in the same version of cis so a check for one is a check for the other
     hasWarningState() {
-      const specSchema = this.$store.getters['cluster/schemaFor'](get(this.schema, 'resourceFields.spec.type') || '');
-
-      if (!specSchema) {
-        return false;
-      }
-
-      return !!get(specSchema, 'resourceFields.scheduledScanConfig');
+      return this.hasScheduledScanConfig;
     },
 
     headers() {
@@ -64,7 +70,7 @@ export default {
     :schema="schema"
     :rows="rows"
     :headers="headers"
-    :loading="loading"
+    :loading="$fetchState.pending"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
     :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
   />

package/list/group.principal.vue

@@ -134,13 +134,13 @@ export default {
           :class="{'mr-5': canCreateGlobalRoleBinding}"
           @click="refreshGroupMemberships"
         />
-        <n-link
+        <router-link
           v-if="canCreateGlobalRoleBinding"
           :to="assignLocation"
           class="btn role-primary"
         >
           {{ t("authGroups.actions.assignRoles") }}
-        </n-link>
+        </router-link>
       </template>
     </Masthead>
 

package/list/management.cattle.io.feature.vue

@@ -1,6 +1,7 @@
 <script>
 import { mapState, mapGetters } from 'vuex';
 import AsyncButton from '@shell/components/AsyncButton';
+import AppModal from '@shell/components/AppModal';
 import { Card } from '@components/Card';
 import ResourceTable from '@shell/components/ResourceTable';
 import { Banner } from '@components/Banner';
@@ -15,7 +16,8 @@ export default {
     Banner,
     Card,
     ResourceTable,
-    LabeledInput
+    LabeledInput,
+    AppModal,
   },
   mixins: [ResourceFetch],
   props:  {
@@ -44,13 +46,7 @@ export default {
       this.serverUrl = this.serverUrlSetting.value;
     } else {
       this.noUrlSet = true;
-      if ( process.server ) {
-        const { req } = this.$nuxt.context;
-
-        this.serverUrl = req.headers.host;
-      } else {
-        this.serverUrl = window.location.origin;
-      }
+      this.serverUrl = window.location.origin;
     }
   },
 
@@ -66,6 +62,7 @@ export default {
       serverUrlSetting: {},
       serverUrl:        '',
       noUrlSet:         false,
+      showModal:        false,
     };
   },
 
@@ -96,9 +93,9 @@ export default {
   watch: {
     showPromptUpdate(show) {
       if (show) {
-        this.$modal.show('toggleFlag');
+        this.showModal = true;
       } else {
-        this.$modal.hide('toggleFlag');
+        this.showModal = false;
       }
     },
 
@@ -166,15 +163,17 @@ export default {
           const response = await this.$axios.get(url, { timeout: 5000 });
 
           if (response?.status === 200) {
-            this.rows = await this.$store.dispatch('management/findAll', { type: this.resource, opt: { force: true } });
+            await this.$store.dispatch('management/findAll', { type: this.resource, opt: { force: true } });
             btnCB(true);
             this.close();
             this.waiting = false;
           }
         } catch (e) {}
 
-        this.waitForBackend(btnCB, id);
-      }, 2500);
+        if (this.waiting) {
+          this.waitForBackend(btnCB, id);
+        }
+      }, 5000);
     },
 
     async saveUrl(btnCB) {
@@ -214,14 +213,15 @@ export default {
         </div>
       </template>
     </ResourceTable>
-    <modal
+    <app-modal
+      v-if="showModal"
       class="update-modal"
       name="toggleFlag"
       :width="350"
       height="auto"
       styles="max-height: 100vh;"
       :click-to-close="!restart || !waiting"
-      @closed="close"
+      @close="close"
     >
       <Card
         v-if="!waiting"
@@ -319,7 +319,7 @@ export default {
           </button>
         </template>
       </Card>
-    </modal>
+    </app-modal>
   </div>
 </template>
 

package/list/management.cattle.io.setting.vue

@@ -92,6 +92,7 @@ export default {
       v-for="setting in settings"
       :key="setting.id"
       class="advanced-setting mb-20"
+      :data-testid="`advanced-setting__option-${setting.id}`"
     >
       <div class="header">
         <div class="title">

package/list/management.cattle.io.user.vue

@@ -6,12 +6,14 @@ import ResourceTable from '@shell/components/ResourceTable';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import { isAdminUser } from '@shell/store/type-map';
+import TableDataUserIcon from '@shell/components/TableDataUserIcon';
 
 export default {
   components: {
     AsyncButton,
     ResourceTable,
-    Masthead
+    Masthead,
+    TableDataUserIcon,
   },
   mixins: [ResourceFetch],
   props:  {
@@ -154,16 +156,23 @@ export default {
       :loading="loading"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
-    />
+    >
+      <template #col:user-state="{row}">
+        <td>
+          <TableDataUserIcon
+            :user-state="row.stateDisplay"
+            :is-active="row.state === 'active'"
+          />
+        </td>
+      </template>
+    </ResourceTable>
   </div>
 </template>
 
 <style lang="scss">
-
   .btn-user-retention {
     display: flex;
     gap: 0.25rem;
     padding: 0;
   }
-
 </style>

package/list/networking.k8s.io.ingress.vue

@@ -0,0 +1,36 @@
+<script>
+import ResourceTable from '@shell/components/ResourceTable';
+import ResourceFetch from '@shell/mixins/resource-fetch';
+export default {
+  components: { ResourceTable },
+  mixins:     [ResourceFetch],
+  props:      {
+    resource: {
+      type:     String,
+      required: true,
+    },
+    schema: {
+      type:     Object,
+      required: true,
+    },
+    useQueryParamsForSimpleFiltering: {
+      type:    Boolean,
+      default: false
+    }
+  },
+  async fetch() {
+    // pathExistsInSchema requires schema networking.k8s.io.ingress to have resources fields via schema definition but none were found. has the schema 'fetchResourceFields' been called?
+    await Promise.all([this.schema.fetchResourceFields(), this.$fetchType(this.resource)]);
+  }
+};
+</script>
+
+<template>
+  <ResourceTable
+    :schema="schema"
+    :rows="rows"
+    :loading="loading"
+    :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+    :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+  />
+</template>