@rancher/shell 3.0.5-rc.6 → 3.0.5-rc.8

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

@@ -1,4 +1,5 @@
 <script>
+import debounce from 'lodash/debounce';
 import { getVersionData } from '@shell/config/version';
 import { mapState, mapGetters } from 'vuex';
 import { isEmpty } from '@shell/utils/object';
@@ -103,13 +104,13 @@ export default {
 
   data() {
     return {
-      permissions:     {},
+      permissions:      {},
       FLEET,
-      [FLEET.REPO]:    [],
-      [FLEET.HELM_OP]: [],
-      fleetWorkspaces: [],
+      [FLEET.GIT_REPO]: [],
+      [FLEET.HELM_OP]:  [],
+      fleetWorkspaces:  [],
       VIEW_MODE,
-      viewModeOptions: [
+      viewModeOptions:  [
         {
           tooltipKey: 'fleet.dashboard.viewMode.table',
           icon:       'icon-list-flat',
@@ -129,6 +130,7 @@ export default {
       isStateCollapsed:     {},
       typeFilter:           {},
       stateFilter:          {},
+      searchFilter:         {},
       selectedCard:         null,
       presetVersion:        getVersionData()?.Version,
     };
@@ -136,6 +138,10 @@ export default {
 
   created() {
     this.$store.dispatch('showWorkspaceSwitcher', false);
+
+    this.debouncedUpdateSearchFilter = debounce((workspace, value) => {
+      this.searchFilter[workspace] = value;
+    }, 300);
   },
 
   mounted() {
@@ -323,7 +329,6 @@ export default {
           workspace,
           showHeader:          false,
           width:               window.innerWidth / 3 > 530 ? `${ window.innerWidth / 3 }px` : '530px',
-          zIndex:              1,
           triggerFocusTrap:    true,
           returnFocusSelector: `[data-testid="resource-card-${ value.id }"]`
         }
@@ -358,7 +363,8 @@ export default {
 
     _filterResources(state) {
       return state.resources.filter((item) => this._decodeTypeFilter(item.namespace, item.type) &&
-        this._decodeStateFilter(item.namespace, state)
+        this._decodeStateFilter(item.namespace, state) &&
+        this._decodeSearchFilter(item.namespace, item.nameDisplay)
       );
     },
 
@@ -370,7 +376,7 @@ export default {
     },
 
     _stateExistsInWorkspace(workspace, state) {
-      return !!this.applicationStates[workspace].find((s) => s.statePanel.id === state);
+      return !!this.applicationStates[workspace]?.find((s) => s.statePanel.id === state);
     },
 
     _decodeStateFilter(workspace, state) {
@@ -384,17 +390,33 @@ export default {
         return true;
       }
 
-      if (this.stateFilter[workspace][state.statePanel.id]) {
+      return !!this.stateFilter[workspace]?.[state.statePanel.id];
+    },
+
+    _decodeTypeFilter(workspace, type) {
+      if (isEmpty(this.typeFilter)) {
         return true;
       }
 
-      return false;
+      if (!this.viewMode) {
+        return true;
+      }
+
+      return !!this.typeFilter[workspace]?.[type];
     },
 
-    _decodeTypeFilter(workspace, type) {
-      const emptyFilter = isEmpty(this.typeFilter) || !this.viewMode;
+    _decodeSearchFilter(workspace, name) {
+      if (isEmpty(this.searchFilter)) {
+        return true;
+      }
+
+      if (this.viewMode !== VIEW_MODE.CARDS) {
+        return true;
+      }
+
+      const search = this.searchFilter[workspace];
 
-      return emptyFilter || this.typeFilter[workspace]?.[type];
+      return !search || name?.includes(search);
     },
 
     _cleanStateFilter(workspace) {
@@ -430,12 +452,15 @@ export default {
           };
 
           this.stateFilter[ws.id] = {};
+
+          this.searchFilter[ws.id] = '';
         });
 
         this.preset('isWorkspaceCollapsed', 'object');
         this.preset('isStateCollapsed', 'object');
         this.preset('typeFilter', 'object');
         this.preset('stateFilter', 'object');
+        this.preset('searchFilter', 'object');
       }
     }
   }
@@ -560,6 +585,7 @@ export default {
                 small
                 ghost
                 :aria-label="`workspace-expand-btn-${ workspace.id }`"
+                :data-testid="`workspace-expand-btn-${ workspace.id }`"
                 @click="toggleCard(workspace.id)"
               >
                 <i
@@ -579,27 +605,44 @@ export default {
           :data-testid="`fleet-dashboard-expanded-panel-${ workspace.id }`"
         >
           <div class="actions">
-            <div class="type-filters">
-              <Checkbox
-                :data-testid="'fleet-dashboard-filter-git-repos'"
-                :value="typeFilter[workspace.id]?.[FLEET.GIT_REPO]"
-                @update:value="selectType(workspace.id, FLEET.GIT_REPO, $event)"
-              >
-                <template #label>
-                  <i class="icon icon-lg icon-git mr-5" />
-                  <span class="label">{{ t('fleet.dashboard.cards.filters.gitRepos') }}</span>
-                </template>
-              </Checkbox>
-              <Checkbox
-                :data-testid="'fleet-dashboard-filter-helm-ops'"
-                :value="typeFilter[workspace.id]?.[FLEET.HELM_OP]"
-                @update:value="selectType(workspace.id, FLEET.HELM_OP, $event)"
+            <div class="resource-filters">
+              <div
+                v-if="viewMode === VIEW_MODE.CARDS"
+                class="search-filter"
               >
-                <template #label>
-                  <i class="icon icon-lg icon-helm mr-5" />
-                  <span class="label">{{ t('fleet.dashboard.cards.filters.helmOps') }}</span>
-                </template>
-              </Checkbox>
+                <input
+                  :value="searchFilter[workspace.id]"
+                  type="search"
+                  role="textbox"
+                  class="input"
+                  :data-testid="`fleet-dashboard-search-input-${ workspace.id }`"
+                  :aria-label="t('fleet.dashboard.cards.search')"
+                  :placeholder="t('fleet.dashboard.cards.search')"
+                  @input="debouncedUpdateSearchFilter(workspace.id, $event.target.value)"
+                >
+              </div>
+              <div class="type-filter">
+                <Checkbox
+                  :data-testid="'fleet-dashboard-filter-git-repos'"
+                  :value="typeFilter[workspace.id]?.[FLEET.GIT_REPO]"
+                  @update:value="selectType(workspace.id, FLEET.GIT_REPO, $event)"
+                >
+                  <template #label>
+                    <i class="icon icon-lg icon-git mr-5" />
+                    <span class="label">{{ t('fleet.dashboard.cards.filters.gitRepos') }}</span>
+                  </template>
+                </Checkbox>
+                <Checkbox
+                  :data-testid="'fleet-dashboard-filter-helm-ops'"
+                  :value="typeFilter[workspace.id]?.[FLEET.HELM_OP]"
+                  @update:value="selectType(workspace.id, FLEET.HELM_OP, $event)"
+                >
+                  <template #label>
+                    <i class="icon icon-lg icon-helm mr-5" />
+                    <span class="label">{{ t('fleet.dashboard.cards.filters.helmOps') }}</span>
+                  </template>
+                </Checkbox>
+              </div>
             </div>
             <div
               v-if="permissions.gitRepos || permissions.helmOps"
@@ -614,7 +657,7 @@ export default {
             </div>
           </div>
           <div
-            v-if="viewMode === 'cards'"
+            v-if="viewMode === VIEW_MODE.CARDS"
             class="cards-panel"
           >
             <div
@@ -843,23 +886,38 @@ export default {
       align-items: center;
       justify-content: space-between;
 
-      .type-filters {
+      .resource-filters {
         display: flex;
-        flex-direction: column;
-        margin-top: 5px;
+        flex-direction: row;
+        align-items: center;
 
-        .checkbox-outer-container {
-          width: fit-content;
+        .type-filter {
+          display: flex;
+          flex-direction: column;
+          margin-top: 5px;
+
+          .checkbox-outer-container {
+            width: fit-content;
+          }
+
+          .label {
+            margin-top: 2px;
+            line-height: 20px;
+          }
+
+          .icon {
+            padding: 2px;
+            font-size: 25px;
+          }
         }
 
-        .label {
+        .search-filter {
           margin-top: 2px;
-          line-height: 20px;
-        }
+          margin-right: 32px;
 
-        .icon {
-          padding: 2px;
-          font-size: 25px;
+          input {
+            width: 190px;
+          }
         }
       }
     }

package/pages/c/_cluster/manager/cloudCredential/index.vue

@@ -10,14 +10,12 @@ import {
   NAME_UNLINKED,
 } from '@shell/config/table-headers';
 import { allHash } from 'utils/promise';
-import { Banner } from '@components/Banner';
 
 export default {
   components: {
     Loading,
     ResourceTable,
     Masthead,
-    Banner
   },
 
   async fetch() {
@@ -32,8 +30,6 @@ export default {
     const hash = await allHash(promises);
 
     this.allCredentials = hash.allCredentials;
-    // This can be optimized in future to to a quick fetch for those with annotation `"provisioning.cattle.io/driver": "harvester"`
-    this.hasHarvester = !!this.allCredentials.find((cc) => !!cc.harvestercredentialConfig);
   },
 
   data() {
@@ -50,7 +46,7 @@ export default {
     },
 
     headers() {
-      const headers = [
+      return [
         ID_UNLINKED,
         NAME_UNLINKED,
         {
@@ -62,21 +58,8 @@ export default {
           formatter: 'CloudCredPublicData',
         },
         DESCRIPTION,
+        AGE_NORMAN
       ];
-
-      if (this.hasHarvester) {
-        headers.push({
-          name:      'expiresDate',
-          labelKey:  'tableHeaders.expires',
-          value:     'expires',
-          sort:      'expiresForSort',
-          formatter: 'CloudCredExpired',
-        });
-      }
-
-      headers.push(AGE_NORMAN);
-
-      return headers;
     },
 
     createLocation() {
@@ -88,29 +71,6 @@ export default {
         },
       };
     },
-
-    expiredData() {
-      const counts = this.allCredentials.reduce((res, cc) => {
-        const expireData = cc.expireData;
-
-        if (expireData?.expiring) {
-          res.expiring++;
-        }
-        if (expireData?.expired) {
-          res.expired++;
-        }
-
-        return res;
-      }, {
-        expiring: 0,
-        expired:  0
-      });
-
-      return {
-        expiring: counts.expiring ? this.t('manager.cloudCredentials.banners.expiring', { count: counts.expiring }) : '',
-        expired:  counts.expired ? this.t('manager.cloudCredentials.banners.expired', { count: counts.expired }) : '',
-      };
-    }
   },
 
 };
@@ -125,17 +85,6 @@ export default {
       :create-location="createLocation"
       :type-display="t('manager.cloudCredentials.label')"
     />
-    <Banner
-      v-if="expiredData.expiring"
-      data-testid="cert-expiring-banner"
-      color="warning"
-      :label="expiredData.expiring"
-    />
-    <Banner
-      v-if="expiredData.expired"
-      color="error"
-      :label="expiredData.expired"
-    />
 
     <ResourceTable
       :schema="schema"
@@ -150,9 +99,3 @@ export default {
     </ResourceTable>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.banner {
-  margin: 0 0 10px 0
-}
-</style>

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

@@ -6,6 +6,7 @@ import LazyImage from '@shell/components/LazyImage';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import { useWatcherBasedSetupFocusTrapWithDestroyIncluded } from '@shell/composables/focusTrap';
+import { getPluginChartVersionLabel, getPluginChartVersion } from '@shell/utils/uiplugins';
 
 export default {
   async fetch() {
@@ -79,9 +80,11 @@ export default {
     },
 
     async loadPluginVersionInfo(version) {
-      const versionName = version || this.info.displayVersion;
+      const pluginChartVersion = getPluginChartVersion(this.info);
 
-      const isVersionNotCompatible = this.info.versions?.find((v) => v.version === versionName && !v.isVersionCompatible);
+      const versionName = version || pluginChartVersion || this.info.versions?.[0]?.version;
+
+      const isVersionNotCompatible = this.info.versions?.find((v) => versionName === (v.appVersion ?? v.version) && !v.isVersionCompatible);
 
       if (!this.info.chart || isVersionNotCompatible) {
         return;
@@ -147,6 +150,10 @@ export default {
       if (event.key === 'Escape') {
         this.hide();
       }
+    },
+
+    getVersionLabel(version) {
+      return getPluginChartVersionLabel(version);
     }
   }
 };
@@ -264,7 +271,7 @@ export default {
                 @click="loadPluginVersionInfo(v.version)"
                 @keyup.enter.space="loadPluginVersionInfo(v.version)"
               >
-                {{ v.version }}
+                {{ getVersionLabel(v) }}
               </a>
             </div>
           </div>

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

@@ -32,6 +32,7 @@ import {
 } from '@shell/config/uiplugins';
 import TabTitle from '@shell/components/TabTitle';
 import versions from '@shell/utils/versions';
+import { getPluginChartVersionLabel } from '@shell/utils/uiplugins';
 
 const MAX_DESCRIPTION_LENGTH = 200;
 
@@ -272,12 +273,14 @@ export default {
           item.certified = latestCompatible?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER;
 
           item.displayVersion = latestCompatible.version;
+          item.displayVersionLabel = getPluginChartVersionLabel(latestCompatible);
           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.displayVersionLabel = getPluginChartVersionLabel(item.versions?.[0]);
           item.icon = chart.icon || latestCompatible?.annotations?.['catalog.cattle.io/ui-icon'];
         }
 
@@ -318,17 +321,18 @@ export default {
 
           const label = rancher.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME] || p.name;
           const item = {
-            name:           p.name,
+            name:                p.name,
             label,
-            description:    p.metadata?.description,
-            icon:           p.metadata?.icon,
-            id:             p.id,
-            versions:       [],
-            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
+            description:         p.metadata?.description,
+            icon:                p.metadata?.icon,
+            id:                  p.id,
+            versions:            [],
+            displayVersion:      p.metadata?.version,
+            displayVersionLabel: 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
@@ -347,35 +351,42 @@ export default {
           chart.installed = true;
           chart.uiplugin = p;
           chart.displayVersion = p.version;
+          let displayVersionLabel = p.version;
 
           // Can't do this here
           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);
+          const latestInstallableVersion = chart.installableVersions?.[0];
+
+          if (latestInstallableVersion && p.version !== (latestInstallableVersion.appVersion ?? latestInstallableVersion.version)) {
+            // Use the currently installed version's metadata to show/hide the experimental and certified labels
+            const installedVersion = (chart.installableVersions || []).find((v) => (v.appVersion ?? v.version) === p.version);
 
             if (installedVersion) {
               chart.experimental = installedVersion?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true';
               chart.certified = installedVersion?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER;
+              displayVersionLabel = getPluginChartVersionLabel(installedVersion);
             }
 
-            chart.upgrade = chart.installableVersions[0].version;
+            chart.upgrade = getPluginChartVersionLabel(latestInstallableVersion);
           }
+
+          chart.displayVersionLabel = displayVersionLabel;
         } else {
           // No chart, so add a card for the plugin based on its Custom resource being present
           const item = {
-            name:           p.name,
-            label:          p.name,
-            description:    p.description || '-',
-            id:             `${ p.name }-${ p.version }`,
-            versions:       [],
-            displayVersion: p.version || '-',
-            installed:      true,
-            installing:     false,
-            builtin:        false,
-            uiplugin:       p,
+            name:                p.name,
+            label:               p.name,
+            description:         p.description || '-',
+            id:                  `${ p.name }-${ p.version }`,
+            versions:            [],
+            displayVersion:      p.version,
+            displayVersionLabel: p.version || '-',
+            installed:           true,
+            installing:          false,
+            builtin:             false,
+            uiplugin:            p,
           };
 
           all.push(item);
@@ -937,7 +948,7 @@ export default {
                     -
                   </span>
                   <span v-else>
-                    <span>{{ plugin.displayVersion }}</span>
+                    <span>{{ plugin.displayVersionLabel }}</span>
                     <span
                       v-if="plugin.upgrade"
                       v-clean-tooltip="t('plugins.upgradeAvailable')"