@rancher/shell 3.0.5-rc.1 → 3.0.5-rc.3

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

@@ -83,6 +83,16 @@ export default {
   },
 
   data() {
+    return {
+      systemInformation:         null,
+      topFifteenForResponseTime: null,
+      responseTimes:             null,
+      finalCounts:               null,
+      includeResponseTimes:      true,
+    };
+  },
+
+  created() {
     const {
       userAgent,
       userAgentData,
@@ -129,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: {
@@ -157,7 +160,7 @@ 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,
       };

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: {
@@ -108,6 +110,7 @@ export default {
               <hr
                 class="custom-content"
                 :style="styles"
+                role="none"
               >
               <p class="mt-20">
                 <a

package/pages/home.vue

@@ -226,10 +226,6 @@ export default defineComponent({
     readWhatsNewAlready() {
       return readReleaseNotes(this.$store);
     },
-
-    showSetLoginBanner() {
-      return this.homePageCards?.setLoginPage;
-    },
   },
 
   async created() {
@@ -415,10 +411,6 @@ export default defineComponent({
       markReadReleaseNotes(this.$store);
     },
 
-    showUserPrefs() {
-      this.$router.push({ name: 'prefs' });
-    },
-
     async resetCards() {
       const value = this.$store.getters['prefs/get'](HIDE_HOME_PAGE_CARDS) || {};
 
@@ -441,21 +433,6 @@ export default defineComponent({
       await this.$store.dispatch('prefs/set', { key: HIDE_HOME_PAGE_CARDS, value });
     },
 
-    async closeSetLoginBanner(retry = 0) {
-      let value = this.$store.getters['prefs/get'](HIDE_HOME_PAGE_CARDS);
-
-      if (value === true || value === false || value.length > 0) {
-        value = {};
-      }
-      value.setLoginPage = true;
-
-      const res = await this.$store.dispatch('prefs/set', { key: HIDE_HOME_PAGE_CARDS, value });
-
-      if (retry === 0 && res?.type === 'error' && res?.status === 500) {
-        await this.closeSetLoginBanner(retry + 1);
-      }
-    },
-
     /**
      * Filter out hidden clusters from list of all clusters
      */
@@ -549,31 +526,6 @@ export default defineComponent({
       </div>
       <div class="row home-panels">
         <div class="col main-panel">
-          <div
-            v-if="!showSetLoginBanner"
-            class="mb-10 row"
-          >
-            <div class="col span-12">
-              <Banner
-                color="set-login-page mt-0"
-                data-testid="set-login-page-banner"
-                :closable="true"
-                @close="closeSetLoginBanner()"
-              >
-                <div>
-                  {{ t('landing.landingPrefs.title') }}
-                </div>
-                <a
-                  class="hand mr-20"
-                  tabindex="0"
-                  :aria-label="t('landing.landingPrefs.userPrefs')"
-                  @click.prevent.stop="showUserPrefs"
-                  @keyup.prevent.stop.enter="showUserPrefs"
-                  @keyup.prevent.stop.space="showUserPrefs"
-                ><span v-clean-html="t('landing.landingPrefs.userPrefs')" /></a>
-              </Banner>
-            </div>
-          </div>
           <div class="row panel">
             <div
               v-if="mcm"
@@ -671,6 +623,11 @@ export default defineComponent({
                           v-clean-tooltip="row.unavailableMachines"
                           class="conditions-alert-icon icon-alert icon"
                         />
+                        <i
+                          v-if="row.isRke1"
+                          v-clean-tooltip="t('cluster.rke1Unsupported')"
+                          class="rke1-unsupported-icon icon-warning icon"
+                        />
                       </p>
                       <p
                         v-if="row.description"
@@ -754,7 +711,7 @@ export default defineComponent({
     }
   }
 
-  .set-login-page, .whats-new {
+  .whats-new {
     > :deep() .banner__content {
       display: flex;
 
@@ -767,9 +724,6 @@ export default defineComponent({
     }
   }
 
-  .banner.set-login-page {
-    border: 1px solid var(--border);
-  }
   .table-heading {
     align-items: center;
     display: flex;
@@ -824,6 +778,11 @@ export default defineComponent({
       color: var(--error);
       margin-left: 4px;
     }
+
+    .rke1-unsupported-icon {
+      color: var(--warning);
+      margin-left: 4px;
+    }
   }
 
   // Hide the side-panel showing links when the screen is small

package/pages/prefs.vue

@@ -225,7 +225,7 @@ export default {
       v-if="!isSingleProduct"
       class="mt-10 mb-10"
     >
-      <hr>
+      <hr role="none">
       <h4 v-t="'prefs.landing.label'" />
       <LandingPagePreference
         data-testid="prefs__landingPagePreference"
@@ -233,7 +233,7 @@ export default {
     </div>
     <!-- Display Settings -->
     <div class="mt-10 mb-10">
-      <hr>
+      <hr role="none">
       <h4 v-t="'prefs.displaySettings.title'" />
       <p class="set-landing-leadin">
         {{ t('prefs.displaySettings.detail', {}, raw=true) }}
@@ -277,7 +277,7 @@ export default {
       v-if="!isSingleProduct"
       class="col adv-features mt-10 mb-10"
     >
-      <hr>
+      <hr role="none">
       <h4 v-t="'prefs.confirmationSetting.title'" />
       <Checkbox
         v-model:value="scalingDownPrompt"
@@ -288,7 +288,7 @@ export default {
     </div>
     <!-- Advanced Features -->
     <div class="col adv-features mt-10 mb-10">
-      <hr>
+      <hr role="none">
       <h4 v-t="'prefs.advFeatures.title'" />
       <Checkbox
         v-model:value="viewInApi"
@@ -325,13 +325,14 @@ export default {
         <Checkbox
           v-model:value="pluginDeveloper"
           :label="t('prefs.advFeatures.pluginDeveloper', {}, true)"
+          :tooltip="t('prefs.advFeatures.pluginDeveloperTooltip')"
           class="mt-20"
         />
       </template>
     </div>
     <!-- YAML editor key mapping -->
     <div class="col mt-10 mb-10">
-      <hr>
+      <hr role="none">
       <h4 v-t="'prefs.keymap.label'" />
       <ButtonGroup
         v-model:value="keymap"
@@ -344,7 +345,7 @@ export default {
       v-if="!isSingleProduct"
       class="col mt-10 mb-40"
     >
-      <hr>
+      <hr role="none">
       <h4 v-t="'prefs.helm.label'" />
       <ButtonGroup
         v-model:value="showPreRelease"

package/plugins/clean-html.js

@@ -2,6 +2,7 @@ import DOMPurify from 'dompurify';
 import { uniq } from '@shell/utils/array';
 
 const ALLOWED_TAGS = [
+  'center',
   'code',
   'li',
   'a',
@@ -13,6 +14,7 @@ const ALLOWED_TAGS = [
   'span',
   'div',
   'i',
+  'img',
   'em',
   'strong',
   'h1',

package/plugins/dashboard-store/__tests__/actions.test.ts

@@ -175,7 +175,9 @@ describe('dashboard-store: actions', () => {
         haveSelector:   jest.fn(() => false),
         matching:       jest.fn(() => 'getters.all'),
         urlFor:         jest.fn(() => 'getters.urlFor'),
-        urlOptions:     jest.fn(() => 'getters.urlOptions')
+        urlOptions:     jest.fn(() => 'getters.urlOptions'),
+        haveAll:        jest.fn(() => false),
+        all:            jest.fn(() => []),
       };
       const rootGetters = { 'type-map/optionsFor': jest.fn() };
 
@@ -207,6 +209,7 @@ describe('dashboard-store: actions', () => {
             null,
             {
               ...genericOpt,
+              isCollection:  true,
               depaginate:    undefined,
               labelSelector: genericSelector,
               url:           'getters.urlFor',