@rancher/shell 3.0.4 → 3.0.5-rc.2

package/pages/c/_cluster/monitoring/monitor/_namespace/_id.vue

@@ -7,9 +7,11 @@ export default {
   components: { ResourceDetail },
 
   data() {
-    const { query:{ resource } } = this.$route;
+    return { resource: null };
+  },
 
-    return { resource };
+  created() {
+    this.resource = this.$route.query.resource;
   }
 };
 </script>

package/pages/c/_cluster/monitoring/monitor/create.vue

@@ -15,9 +15,11 @@ export default {
   components: { ResourceDetail },
 
   data() {
-    const { query:{ resource } } = this.$route;
+    return { resource: null };
+  },
 
-    return { resource };
+  created() {
+    this.resource = this.$route.query.resource;
   }
 };
 </script>

package/pages/c/_cluster/monitoring/route-receiver/_id.vue

@@ -15,9 +15,11 @@ export default {
   components: { ResourceDetail },
 
   data() {
-    const { query:{ resource } } = this.$route;
+    return { resource: null };
+  },
 
-    return { resource };
+  created() {
+    this.resource = this.$route.query.resource;
   }
 };
 </script>

package/pages/c/_cluster/monitoring/route-receiver/create.vue

@@ -7,10 +7,13 @@ export default {
   components: { ResourceDetail },
 
   data() {
-    const { query:{ resource } } = this.$route;
+    return { resource: null };
+  },
 
-    return { resource };
+  created() {
+    this.resource = this.$route.query.resource;
   }
+
 };
 </script>
 

package/pages/c/_cluster/neuvector/index.vue

@@ -65,7 +65,7 @@ export default {
           <div class="link-content">
             <t :k="fel.label" />
             <i class="icon icon-external-link pull-right" />
-            <hr>
+            <hr role="none">
             <div class="description"><t :k="fel.description" /></div>
           </div>
         </a>

package/pages/c/_cluster/settings/banners.vue

@@ -207,7 +207,7 @@ export default {
 
       <!-- Header Settings -->
       <h2 class="mt-40 mb-10 setting-title">
-        {{ t('banner.headerBanner') }}
+        {{ t('banner.bannerHeader') }}
         <i
           v-if="!!uiBannerIndividual.bannerHeader"
           class="icon icon-lock"
@@ -242,7 +242,7 @@ export default {
 
       <!-- Footer settings -->
       <h2 class="mt-40 mb-10 setting-title">
-        {{ t('banner.footerBanner') }}
+        {{ t('banner.bannerFooter') }}
         <i
           v-if="!!uiBannerIndividual.bannerFooter"
           class="icon icon-lock"
@@ -277,7 +277,7 @@ export default {
 
       <!-- Consent settings -->
       <h2 class="mt-40 mb-10 setting-title">
-        {{ t('banner.loginScreenBanner') }}
+        {{ t('banner.bannerConsent') }}
         <i
           v-if="!!uiBannerIndividual.bannerConsent"
           class="icon icon-lock"
@@ -316,6 +316,7 @@ export default {
         v-model:value="bannerVal.loginError"
         :mode="mode"
         :label="t('notifications.loginError.messageLabel')"
+        :hidden-aria-described-label="t('notifications.loginError.header')"
       />
     </div>
     <template

package/pages/c/_cluster/uiplugins/CatalogList/index.vue

@@ -19,17 +19,15 @@ export default {
   mixins: [ResourceManager],
 
   data() {
-    const actions = [
-      {
-        action:  'showCatalogUninstallDialog',
-        label:   this.t('plugins.uninstall.label'),
-        icon:    'icon icon-trash',
-        enabled: true,
-      }
-    ];
-
     return {
-      actions,
+      actions: [
+        {
+          action:  'showCatalogUninstallDialog',
+          label:   this.t('plugins.uninstall.label'),
+          icon:    'icon icon-trash',
+          enabled: true,
+        }
+      ],
       catalogHeaders: UI_PLUGIN_CATALOG,
     };
   },

package/pages/c/_cluster/uiplugins/__tests__/AddExtensionRepos.test.ts

@@ -1,7 +1,7 @@
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import { UI_PLUGINS_REPOS } from '@shell/config/uiplugins';
-import AddExtensionRepos from '@shell/pages/c/_cluster/uiplugins/AddExtensionRepos.vue';
+import AddExtensionReposDialog from '@shell/dialog/AddExtensionReposDialog.vue';
 const mockedStore = () => {
   return {
     getters: {
@@ -26,19 +26,17 @@ const requiredSetup = () => {
   };
 };
 
-describe('component: AddExtensionRepos', () => {
+describe('component: AddExtensionReposDialog', () => {
   it('should NOT SHOW a checkbox to install official Rancher repo if NOT prime', async() => {
     jest.useFakeTimers();
 
-    const wrapper = mount(AddExtensionRepos, {
+    const wrapper = mount(AddExtensionReposDialog, {
       global: {
         ...requiredSetup(),
         stubs: { Dialog: { template: '<span><slot/></span>' } },
       }
     });
 
-    wrapper.vm.showDialog();
-
     await nextTick();
 
     const rancherCheckbox = wrapper.findComponent('[data-testid="add-extensions-repos-modal-add-official-repo"]');
@@ -53,7 +51,7 @@ describe('component: AddExtensionRepos', () => {
   it('should SHOW a checkbox to install official Rancher repo if IS prime', async() => {
     jest.useFakeTimers();
 
-    const wrapper = mount(AddExtensionRepos, {
+    const wrapper = mount(AddExtensionReposDialog, {
       global: {
         ...requiredSetup(),
         stubs: { Dialog: { template: '<span><slot/></span>' } },
@@ -61,7 +59,6 @@ describe('component: AddExtensionRepos', () => {
     });
 
     wrapper.vm.prime = true;
-    wrapper.vm.showDialog();
 
     await nextTick();
 

package/pages/c/_cluster/uiplugins/index.vue

@@ -15,14 +15,8 @@ import Tab from '@shell/components/Tabbed/Tab.vue';
 import IconMessage from '@shell/components/IconMessage.vue';
 import LazyImage from '@shell/components/LazyImage';
 import { BadgeState } from '@components/BadgeState';
-import UninstallDialog from './UninstallDialog.vue';
-import InstallDialog from './InstallDialog.vue';
-import CatalogLoadDialog from './CatalogList/CatalogLoadDialog.vue';
-import CatalogUninstallDialog from './CatalogList/CatalogUninstallDialog.vue';
-import DeveloperInstallDialog from './DeveloperInstallDialog.vue';
 import PluginInfoPanel from './PluginInfoPanel.vue';
 import SetupUIPlugins from './SetupUIPlugins.vue';
-import AddExtensionRepos from './AddExtensionRepos';
 import CatalogList from './CatalogList/index.vue';
 import Banner from '@components/Banner/Banner.vue';
 import {
@@ -53,20 +47,14 @@ export default {
   components: {
     ActionMenu,
     BadgeState,
-    DeveloperInstallDialog,
     IconMessage,
     CatalogList,
     Banner,
-    CatalogLoadDialog,
-    CatalogUninstallDialog,
-    InstallDialog,
     LazyImage,
     PluginInfoPanel,
     Tab,
     Tabbed,
-    UninstallDialog,
     SetupUIPlugins,
-    AddExtensionRepos,
     TabTitle
   },
 
@@ -253,15 +241,13 @@ export default {
         // Label can be overridden by chart annotation
         const label = uiPluginAnnotation(chart, UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME) || chart.chartNameDisplay;
         const item = {
-          name:         chart.chartName,
+          name:        chart.chartName,
           label,
-          description:  chart.chartDescription,
-          id:           chart.id,
-          versions:     [],
-          installed:    false,
-          builtin:      false,
-          experimental: uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.EXPERIMENTAL, 'true'),
-          certified:    uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.CERTIFIED, CATALOG_ANNOTATIONS._RANCHER)
+          description: chart.chartDescription,
+          id:          chart.id,
+          versions:    [],
+          installed:   false,
+          builtin:     false,
         };
 
         item.versions = [...chart.versions];
@@ -282,9 +268,15 @@ export default {
         const latestNotCompatible = item.versions.find((version) => !version.isVersionCompatible);
 
         if (latestCompatible) {
+          item.experimental = latestCompatible?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true';
+          item.certified = latestCompatible?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER;
+
           item.displayVersion = latestCompatible.version;
           item.icon = latestCompatible.icon;
         } else {
+          item.experimental = uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.EXPERIMENTAL, 'true');
+          item.certified = uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.CERTIFIED, CATALOG_ANNOTATIONS._RANCHER);
+
           item.displayVersion = item.versions?.[0]?.version;
           item.icon = chart.icon || latestCompatible?.annotations?.['catalog.cattle.io/ui-icon'];
         }
@@ -323,6 +315,7 @@ export default {
         if (!chart) {
           // A plugin is loaded, but there is no chart, so add an item so that it shows up
           const rancher = typeof p.metadata?.rancher === 'object' ? p.metadata.rancher : {};
+
           const label = rancher.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME] || p.name;
           const item = {
             name:           p.name,
@@ -334,6 +327,8 @@ export default {
             displayVersion: p.metadata?.version || '-',
             installed:      true,
             builtin:        !!p.builtin,
+            experimental:   rancher?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true',
+            certified:      rancher?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER
           };
 
           // Built-in plugins can chose to be hidden - used where we implement as extensions
@@ -357,7 +352,15 @@ export default {
           chart.installing = this.installing[chart.name];
 
           // Check for upgrade
+          // Use the currently installed version's metadata to show/hide the experimental and certified labels
           if (chart.installableVersions?.length && p.version !== chart.installableVersions?.[0]?.version) {
+            const installedVersion = (chart.installableVersions || []).find((v) => v?.version === p.version);
+
+            if (installedVersion) {
+              chart.experimental = installedVersion?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true';
+              chart.certified = installedVersion?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER;
+            }
+
             chart.upgrade = chart.installableVersions[0].version;
           }
         } else {
@@ -525,21 +528,61 @@ export default {
 
     // Developer Load is in the action menu
     showDeveloperLoadDialog() {
-      this.$refs.developerInstallDialog.showDialog();
+      this.$store.dispatch('management/promptModal', {
+        component:           'DeveloperLoadExtensionDialog',
+        returnFocusSelector: '[data-testid="extensions-page-menu"]',
+        componentProps:      {
+          closed: (res) => {
+            this.didInstall(res);
+          }
+        }
+      });
     },
 
     showAddExtensionReposDialog() {
       this.updateAddReposSetting();
       this.refreshCharts(true);
-      this.$refs.addExtensionReposDialog.showDialog();
+
+      this.$store.dispatch('management/promptModal', {
+        component:      'AddExtensionReposDialog',
+        testId:         'add-extensions-repos-modal',
+        componentProps: {
+          done: () => {
+            this.updateInstallStatus(true);
+          }
+        }
+      });
     },
 
     showCatalogLoadDialog() {
-      this.$refs.catalogLoadDialog.showDialog();
+      this.$store.dispatch('management/promptModal', {
+        component:           'ExtensionCatalogInstallDialog',
+        returnFocusSelector: '[data-testid="extensions-catalog-load-dialog"]',
+        componentProps:      {
+          refresh: () => {
+            this.reloadRequired = true;
+          },
+          closed: (res) => {
+            this.didInstall(res);
+          }
+        }
+      });
     },
 
     showCatalogUninstallDialog(ev) {
-      this.$refs.catalogUninstallDialog.showDialog(ev);
+      this.$store.dispatch('management/promptModal', {
+        component:           'ExtensionCatalogUninstallDialog',
+        returnFocusSelector: '[data-testid="extensions-catalog-load-dialog"]',
+        componentProps:      {
+          catalog: ev,
+          refresh: () => {
+            this.reloadRequired = true;
+          },
+          closed: (res) => {
+            this.didUninstall(res);
+          }
+        }
+      });
     },
 
     showInstallDialog(plugin, mode, ev) {
@@ -547,7 +590,22 @@ export default {
       ev.preventDefault();
       ev.stopPropagation();
 
-      this.$refs.installDialog.showDialog(plugin, mode);
+      this.$store.dispatch('management/promptModal', {
+        component:                            'InstallExtensionDialog',
+        testId:                               'install-extension-modal',
+        returnFocusSelector:                  `[data-testid="extension-card-${ mode }-btn-${ plugin?.name }"]`,
+        returnFocusFirstIterableNodeSelector: '#extensions-main-page',
+        componentProps:                       {
+          plugin,
+          mode,
+          updateStatus: (pluginName, type) => {
+            this.updatePluginInstallStatus(pluginName, type);
+          },
+          closed: (res) => {
+            this.didInstall(res);
+          }
+        }
+      });
     },
 
     showUninstallDialog(plugin, ev) {
@@ -555,7 +613,21 @@ export default {
       ev.preventDefault();
       ev.stopPropagation();
 
-      this.$refs.uninstallDialog.showDialog(plugin);
+      this.$store.dispatch('management/promptModal', {
+        component:                            'UninstallExtensionDialog',
+        testId:                               'uninstall-extension-modal',
+        returnFocusSelector:                  `[data-testid="extension-card-uninstall-btn-${ plugin.name }"]`,
+        returnFocusFirstIterableNodeSelector: '#extensions-main-page',
+        componentProps:                       {
+          plugin,
+          updateStatus: (pluginName, type) => {
+            this.updatePluginInstallStatus(pluginName, type);
+          },
+          closed: (res) => {
+            this.didUninstall(res);
+          }
+        }
+      });
     },
 
     didUninstall(plugin) {
@@ -996,35 +1068,6 @@ export default {
         </div>
       </template>
     </div>
-
-    <InstallDialog
-      ref="installDialog"
-      @closed="didInstall"
-      @update="updatePluginInstallStatus"
-    />
-    <UninstallDialog
-      ref="uninstallDialog"
-      @closed="didUninstall"
-      @update="updatePluginInstallStatus"
-    />
-    <CatalogLoadDialog
-      ref="catalogLoadDialog"
-      @closed="didInstall"
-      @refresh="() => reloadRequired = true"
-    />
-    <CatalogUninstallDialog
-      ref="catalogUninstallDialog"
-      @closed="didUninstall"
-      @refresh="() => reloadRequired = true"
-    />
-    <DeveloperInstallDialog
-      ref="developerInstallDialog"
-      @closed="didInstall"
-    />
-    <AddExtensionRepos
-      ref="addExtensionReposDialog"
-      @done="updateInstallStatus(true)"
-    />
   </div>
 </template>
 

package/pages/diagnostic.vue

@@ -17,6 +17,7 @@ export default {
     const finalCounts = [];
     const promises = [];
     const topFifteenForResponseTime = [];
+    const schemaPromises = [];
 
     clusterForCounts.forEach((cluster, i) => {
       // Necessary to retrieve the proper display name of the cluster
@@ -31,9 +32,11 @@ export default {
         isTableVisible: !!(i === 0 && clusterForCounts.length === 1)
       });
       promises.push(this.$store.dispatch('management/request', { url: `/k8s/clusters/${ cluster.mgmt?.id }/v1/counts` }));
+      schemaPromises.push(this.$store.dispatch('management/request', { url: `/k8s/clusters/${ cluster.mgmt?.id }/v1/schemas?exclude=metadata.managedFields` }));
     });
 
     const countsPerCluster = await Promise.all(promises);
+    const schemasPerCluster = await Promise.all(schemaPromises);
 
     countsPerCluster.forEach((clusterCount, index) => {
       const counts = clusterCount.data?.[0]?.counts;
@@ -69,9 +72,27 @@ export default {
 
     this.topFifteenForResponseTime = topFifteenForResponseTime;
     this.finalCounts = finalCounts;
+
+    // Schemas
+    schemasPerCluster.forEach((schemas, index) => {
+      finalCounts[index].schemaCount = schemas?.data?.length || 0;
+      finalCounts[index].customSchemas = (schemas?.data?.filter((schema) => {
+        return schema.attributes?.group.includes('.') && !schema.attributes?.group.includes('.cattle.io') && !schema.attributes?.group.includes('.k8s.io');
+      }).map((schema) => schema.id) || []).sort();
+    });
   },
 
   data() {
+    return {
+      systemInformation:         null,
+      topFifteenForResponseTime: null,
+      responseTimes:             null,
+      finalCounts:               null,
+      includeResponseTimes:      true,
+    };
+  },
+
+  created() {
     const {
       userAgent,
       userAgentData,
@@ -118,14 +139,7 @@ export default {
       systemInformation.jsMemory.value += `, ${ this.t('about.diagnostic.systemInformation.memUsedJsHeapSize', { usedJSHeapSize: window?.performance?.memory?.usedJSHeapSize }) }`;
     }
 
-    return {
-      systemInformation,
-      topFifteenForResponseTime: null,
-      responseTimes:             null,
-      finalCounts:               null,
-      includeResponseTimes:      true,
-      storeMapping:              this.$store?._modules?.root?.state,
-    };
+    this.systemInformation = systemInformation;
   },
 
   computed: {
@@ -146,9 +160,9 @@ export default {
       const fileName = 'rancher-diagnostic-data.json';
       const data = {
         systemInformation: this.systemInformation,
-        storeMapping:      this.parseStoreData(this.storeMapping),
+        storeMapping:      this.parseStoreData(this.$store?._modules?.root?.state),
         resourceCounts:    this.finalCounts,
-        responseTimes:     this.responseTimes
+        responseTimes:     this.responseTimes,
       };
 
       downloadFile(fileName, JSON.stringify(data), 'application/json')
@@ -352,6 +366,7 @@ export default {
                   <span>Cluster: <b>{{ cluster.name }}</b></span>
                   <span>Namespace: <b>{{ cluster.namespace }}</b></span>
                   <span>Total Resources: <b>{{ sumResourceCount(cluster.counts) }}</b></span>
+                  <span>Total Schemas: <b>{{ cluster.schemaCount }}</b></span>
                   <span>Nodes: <b>{{ nodeCount(cluster.counts) }}</b></span>
                   <i
                     class="icon"
@@ -365,6 +380,22 @@ export default {
             </tr>
           </thead>
           <tbody v-show="cluster.isTableVisible">
+            <tr>
+              <td colspan="3">
+                <div class="schema-title">
+                  Custom Schemas
+                </div>
+                <div class="custom-schemas">
+                  <div
+                    v-for="name in cluster.customSchemas"
+                    :key="name"
+                    class="schema-name"
+                  >
+                    {{ name }}
+                  </div>
+                </div>
+              </td>
+            </tr>
             <tr>
               <th>
                 Resource
@@ -445,6 +476,23 @@ table {
     padding: 8px 5px;
     min-width: 150px;
     text-align: left;
+
+    .schema-title {
+      font-weight: bold;
+      margin-bottom: 4px;
+    }
+
+    .custom-schemas {
+      display: flex;
+      flex-wrap: wrap;
+
+      > .schema-name {
+        margin-right: 5px;
+        margin-bottom: 2px;
+        border: 1px solid var(--border);
+        padding: 2px 5px;
+      }
+    }
   }
 
   th {
@@ -511,7 +559,7 @@ table {
 .resources-count-container {
   .cluster-row {
     display: grid;
-    grid-template-columns: repeat(4, 1fr) 20px;
+    grid-template-columns: repeat(5, 1fr) 20px;
     grid-template-rows: 1fr;
     align-content: center;
     font-weight: normal;

package/pages/fail-whale.vue

@@ -17,17 +17,19 @@ export default {
   mixins: [Brand, BrowserTabVisibility],
 
   data() {
+    return {
+      previousRoute: '',
+      styles:        { '--custom-content': `'${ this.t('nav.failWhale.separator') }'` }
+    };
+  },
+
+  created() {
     const store = this.$store;
 
     if (!store.state.error && !store.state.cameFromError) {
       store.commit('cameFromError');
       this.$router.replace('/');
     }
-
-    return {
-      previousRoute: '',
-      styles:        { '--custom-content': `'${ this.t('nav.failWhale.separator') }'` }
-    };
   },
 
   computed: {
@@ -70,12 +72,15 @@ export default {
         :simple="true"
       />
 
-      <main class="main-layout">
+      <main
+        class="main-layout"
+        aria-label="Fail whale layout"
+      >
         <div
           v-if="error"
           class="outlet"
         >
-          <main class="main-layout error">
+          <div class="main-layout error">
             <div class="text-center">
               <BrandImage
                 file-name="error-desert-landscape.svg"
@@ -105,6 +110,7 @@ export default {
               <hr
                 class="custom-content"
                 :style="styles"
+                role="none"
               >
               <p class="mt-20">
                 <a
@@ -115,7 +121,7 @@ export default {
                 </a>
               </p>
             </div>
-          </main>
+          </div>
         </div>
       </main>
     </div>