@rancher/shell 3.0.5-rc.7 → 3.0.5-rc.9

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() {
@@ -357,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)
       );
     },
 
@@ -369,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) {
@@ -383,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) {
@@ -429,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');
       }
     }
   }
@@ -559,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
@@ -578,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"
@@ -613,7 +657,7 @@ export default {
             </div>
           </div>
           <div
-            v-if="viewMode === 'cards'"
+            v-if="viewMode === VIEW_MODE.CARDS"
             class="cards-panel"
           >
             <div
@@ -842,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() {
@@ -41,6 +37,17 @@ export default {
       allCredentials: null,
       resource:       NORMAN.CLOUD_CREDENTIAL,
       schema:         this.$store.getters['rancher/schemaFor'](NORMAN.CLOUD_CREDENTIAL),
+      groupOptions:   [{
+        tooltipKey: 'resourceTable.groupBy.none',
+        icon:       'icon-list-flat',
+        value:      'none',
+      }, {
+        tooltipKey: 'manager.cloudCredentials.list.groupBy.provider',
+        hideColumn: 'provider',
+        icon:       'icon-folder',
+        value:      'providerDisplay',
+        field:      'providerDisplay',
+      }],
     };
   },
 
@@ -50,7 +57,7 @@ export default {
     },
 
     headers() {
-      const headers = [
+      return [
         ID_UNLINKED,
         NAME_UNLINKED,
         {
@@ -60,23 +67,16 @@ export default {
           sort:      'publicData',
           search:    'publicData',
           formatter: 'CloudCredPublicData',
+        }, {
+          name:     'provider',
+          labelKey: 'manager.cloudCredentials.list.headers.provider',
+          value:    'providerDisplay',
+          sort:     'providerDisplay',
+          search:   'providerDisplay',
         },
         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 +88,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,24 +102,13 @@ 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"
       :rows="rows"
       :headers="headers"
       :namespaced="false"
-      group-by="providerDisplay"
+      :group-options="groupOptions"
     >
       <template #cell:id="{row}">
         {{ row.id.replace('cattle-global-data:', '') }}
@@ -150,9 +116,3 @@ export default {
     </ResourceTable>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.banner {
-  margin: 0 0 10px 0
-}
-</style>

package/pages/c/_cluster/manager/drivers/kontainerDriver/index.vue

@@ -1,13 +1,16 @@
 <script>
 import { NORMAN } from '@shell/config/types';
+import { isAdminUser } from '@shell/store/type-map';
 import ResourceTable from '@shell/components/ResourceTable';
 import AsyncButton from '@shell/components/AsyncButton';
 import Loading from '@shell/components/Loading';
 import Masthead from '@shell/components/ResourceList/Masthead';
+import Banner from '@components/Banner/Banner.vue';
+
 export default {
   name:       'KontainerDrivers',
   components: {
-    ResourceTable, Loading, Masthead, AsyncButton
+    ResourceTable, Loading, Masthead, AsyncButton, Banner
   },
 
   async fetch() {
@@ -21,7 +24,8 @@ export default {
       resource:                         NORMAN.KONTAINER_DRIVER,
       schema:                           this.$store.getters['rancher/schemaFor'](NORMAN.KONTAINER_DRIVER),
       useQueryParamsForSimpleFiltering: false,
-      forceUpdateLiveAndDelayed:        10
+      forceUpdateLiveAndDelayed:        10,
+      showDeprecationBanner:            isAdminUser(this.$store.getters),
     };
   },
   computed: {
@@ -69,6 +73,12 @@ export default {
         />
       </template>
     </Masthead>
+    <Banner
+      v-if="showDeprecationBanner"
+      color="warning"
+      label-key="drivers.kontainer.emberDeprecationMessage"
+      data-testid="kontainer-driver-ember-deprecation-banner"
+    />
     <ResourceTable
       :schema="schema"
       :rows="rows"

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);
     }
   }
 };
@@ -216,7 +223,7 @@ export default {
                   :aria-label="t('plugins.closePluginPanel')"
                   tabindex="0"
                   @click="hide()"
-                  @keyup.enter.space="hide()"
+                  @keydown.enter.space="hide()"
                 >
                   <i class="icon icon-close" />
                 </div>
@@ -264,7 +271,7 @@ export default {
                 @click="loadPluginVersionInfo(v.version)"
                 @keyup.enter.space="loadPluginVersionInfo(v.version)"
               >
-                {{ v.version }}
+                {{ getVersionLabel(v) }}
               </a>
             </div>
           </div>