@rancher/shell 3.0.5 → 3.0.7

package/core/types.ts

@@ -1,6 +1,7 @@
 import { ProductFunction } from './plugin';
 import { RouteRecordRaw } from 'vue-router';
 import type { ExtensionManager } from '@shell/types/extension-manager';
+import { PaginationSettingsStores } from '@shell/types/resources/settings';
 
 // Cluster Provisioning types
 export * from './types-provisioning';
@@ -130,9 +131,6 @@ export type Card = {
   component: Function;
 };
 
-// Duplication of HeaderOptions?
-export type TableColumn = any;
-
 /** Definition of a tab (options that can be passed when defining an extension tab enhancement) */
 export type Tab = {
   name: string;
@@ -281,6 +279,9 @@ export interface ProductOptions {
   // typeStoreMap: string;
 }
 
+/**
+ * Configuration required to show a header in a ResourceTable
+ */
 export interface HeaderOptions {
   /**
    * Name of the header. This should be unique.
@@ -305,7 +306,7 @@ export interface HeaderOptions {
   /**
    * A string which represents the path to access the value from the row object which we'll use to sort i.e. `row.meta.value`
    */
-  sort?: string | string[];
+  sort?: string | string[] | boolean;
 
   /**
    * A string which represents the path to access the value from the row object which we'll use to search i.e. `row.meta.value`.
@@ -336,6 +337,26 @@ export interface HeaderOptions {
   getValue?: (row: any) => string | number | null | undefined;
 }
 
+/**
+ * Configuration required to show a header in a ResourceTable when server-side pagination is enable
+ */
+export type PaginationHeaderOptions = Omit<HeaderOptions, 'getValue'>
+
+/**
+ * External extension configuration for @HeaderOptions
+ */
+export type TableColumn = HeaderOptions;
+
+/**
+ * External extension configuration for @PaginationHeaderOptions
+ */
+export type PaginationTableColumn = PaginationHeaderOptions;
+
+/**
+ * External extension configuration for @PaginationSettingsStores
+ */
+export type ServerSidePaginationExtensionConfig = PaginationSettingsStores;
+
 export interface ConfigureTypeOptions {
   /**
    * Override for the create button string on a list view
@@ -621,9 +642,17 @@ export interface IPlugin {
   addCard(where: CardLocation | string, when: LocationConfig | string, action: Card): void;
 
   /**
-   * Adds a new column to the SortableTable component
+   * Adds a new column to a ResourceTable
+   *
+   * @param where
+   * @param when
+   * @param action
+   * @param column
+   *  The information required to show a header and values for a column in a table
+   * @param paginationColumn
+   *  As per `column`, but is used where server-side pagination is enabled
    */
-  addTableColumn(where: TableColumnLocation | string, when: LocationConfig | string, action: TableColumn): void;
+  addTableColumn(where: TableColumnLocation | string, when: LocationConfig | string, column: TableColumn, paginationColumn?: TableColumn): void;
 
   /**
    * Set the component to use for the landing home page
@@ -670,6 +699,8 @@ export interface IPlugin {
   ): void;
   addNavHooks(hooks: NavHooks): void;
 
+  enableServerSidePagination(config: ServerSidePaginationExtensionConfig): void;
+
   /**
    * Adds a model extension
    * @experimental May change or be removed in the future

package/detail/provisioning.cattle.io.cluster.vue

@@ -89,6 +89,7 @@ export default {
   },
 
   async fetch() {
+    await this.$store.dispatch(`management/find`, { type: MANAGEMENT.CLUSTER, id: this.value.mgmtClusterId });
     await this.value.waitForProvisioner();
 
     // Support for the 'provisioner' extension

package/dialog/InstallExtensionDialog.vue

@@ -3,12 +3,12 @@ import AsyncButton from '@shell/components/AsyncButton';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { CATALOG, MANAGEMENT } from '@shell/config/types';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
-import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
+import { UI_PLUGIN_NAMESPACE, isChartVersionHigher } from '@shell/config/uiplugins';
 import Banner from '@components/Banner/Banner.vue';
 import { SETTING } from '@shell/config/settings';
-import { getPluginChartVersion, getPluginChartVersionLabel } from '@shell/utils/uiplugins';
+import { getPluginChartVersionLabel } from '@shell/utils/uiplugins';
 
-// Note: This dialog handles installation and update of a plugin
+// Note: This dialog handles installation, upgrade and downgrade of a plugin
 
 export default {
   emits: ['close'],
@@ -29,7 +29,14 @@ export default {
       required: true
     },
     /**
-     * The action to perform (install, update, rollback)
+     * The pre-selected version in the dropdown
+     */
+    initialVersion: {
+      type:    String,
+      default: null
+    },
+    /**
+     * The action to perform (install, upgrade, downgrade)
      */
     action: {
       type:     String,
@@ -63,33 +70,32 @@ export default {
   },
 
   async fetch() {
-    const chartVersion = getPluginChartVersion(this.plugin);
-
-    // Default to latest version on install (this is default on the plugin)
-    this.version = chartVersion;
-
-    if (this.action === 'update') {
-      this.currentVersion = chartVersion;
-
-      // Update to latest version, so take the first version
-      if (this.plugin?.installableVersions?.length > 0) {
-        this.version = this.plugin?.installableVersions?.[0]?.version;
-      }
-    } else if (this.action === 'rollback') {
-      // Find the newest version once we remove the current version
-      const versionNames = this.plugin.installableVersions.filter((v) => v.version !== chartVersion);
+    // Determine the currently installed version, if any
+    if (this.plugin.installed) {
+      this.currentVersion = this.plugin.installedVersion;
+    }
 
-      this.currentVersion = chartVersion;
+    // Determine the initial version to select in the dropdown
+    if (this.initialVersion) {
+      this.version = this.initialVersion;
+    } else if (this.action === 'upgrade') {
+      // Upgrade to the latest version, so take the first version
+      this.version = this.plugin?.installableVersions?.[0]?.version;
+    } else if (this.action === 'downgrade') {
+      const versions = this.plugin.installableVersions;
+      const currentIndex = versions.findIndex((v) => v.version === this.currentVersion);
 
-      if (versionNames.length > 0) {
-        this.version = versionNames[0].version;
+      if (currentIndex !== -1 && currentIndex < versions.length - 1) {
+        // Select the version just below the current version
+        this.version = versions[currentIndex + 1].version;
       }
+    } else {
+      // Default to the latest installable version for new installs
+      this.version = this.plugin?.installableVersions?.[0]?.version;
     }
 
-    // Make sure we have the version available
-    const versionChart = this.plugin?.installableVersions?.find((v) => v.version === this.version);
-
-    if (!versionChart) {
+    // Fallback if no version could be determined
+    if (!this.version) {
       this.version = this.plugin?.installableVersions?.[0]?.version;
     }
 
@@ -119,37 +125,39 @@ export default {
     },
 
     versionOptions() {
-      if (!this.plugin) {
+      if (!this.plugin?.installableVersions) {
         return [];
       }
 
-      // Don't allow update/rollback to current version
-      const versions = this.plugin?.installableVersions?.filter((v) => {
-        if (this.currentVersion) {
-          return v.version !== this.currentVersion;
-        }
-
-        return true;
-      });
+      // Don't allow upgrade/downgrade to current version by disabling the option
+      return this.plugin.installableVersions.map((v) => {
+        const isCurrent = v.version === this.currentVersion;
 
-      return versions.map((version) => {
         return {
-          label: getPluginChartVersionLabel(version),
-          value: version.version,
+          label:    getPluginChartVersionLabel(v) + (isCurrent ? ` (${ this.t('plugins.labels.current') })` : ''),
+          value:    v.version,
+          disabled: isCurrent,
         };
       });
     },
 
     buttonMode() {
-      if (this.action === 'rollback') {
-        return 'rollback';
+      if (this.action === 'install') {
+        return 'install';
       }
 
-      if (this.action === 'update') {
-        return 'update';
+      if (this.currentVersion && this.version) {
+        if (isChartVersionHigher(this.version, this.currentVersion)) {
+          return 'upgrade';
+        }
+
+        if (isChartVersionHigher(this.currentVersion, this.version)) {
+          return 'downgrade';
+        }
       }
 
-      return 'install';
+      // Fallback for safety, though should not be reached if version is selected
+      return this.action;
     },
 
     chartVersionLoadsWithoutAuth() {
@@ -158,6 +166,23 @@ export default {
 
     returnFocusSelector() {
       return `[data-testid="extension-card-${ this.action }-btn-${ this.plugin?.name }"]`;
+    },
+
+    buttonIcon() {
+      if (this.busy) {
+        return '';
+      }
+
+      switch (this.buttonMode) {
+      case 'install':
+        return 'icon-plus';
+      case 'upgrade':
+        return 'icon-upgrade-alt';
+      case 'downgrade':
+        return 'icon-downgrade-alt';
+      default:
+        return '';
+      }
     }
   },
 
@@ -295,12 +320,12 @@ export default {
 <template>
   <div class="plugin-install-dialog">
     <h4 class="mt-10">
-      {{ t(`plugins.${ action }.title`, { name: plugin?.label }) }}
+      {{ t(`plugins.${ buttonMode }.title`, { name: `"${plugin?.label}"` }, true) }}
     </h4>
     <div class="custom mt-10">
       <div class="dialog-panel">
         <p>
-          {{ t(`plugins.${ action }.prompt`) }}
+          {{ t(`plugins.${ buttonMode }.prompt`) }}
         </p>
         <Banner
           v-if="chartVersionLoadsWithoutAuth"
@@ -335,6 +360,7 @@ export default {
         </button>
         <AsyncButton
           :mode="buttonMode"
+          :icon="buttonIcon"
           data-testid="install-ext-modal-install-btn"
           @click="install"
         />

package/dialog/UninstallExtensionDialog.vue

@@ -103,7 +103,7 @@ export default {
 <template>
   <div class="plugin-install-dialog">
     <h4 class="mt-10">
-      {{ t('plugins.uninstall.title', { name: plugin?.label }) }}
+      {{ t('plugins.uninstall.title', { name: `"${plugin?.label}"` }, true) }}
     </h4>
     <div class="mt-10 dialog-panel">
       <div class="dialog-info">
@@ -122,6 +122,7 @@ export default {
         </button>
         <AsyncButton
           mode="uninstall"
+          :icon="busy ? '' : 'icon-delete'"
           data-testid="uninstall-ext-modal-uninstall-btn"
           @click="uninstall()"
         />

package/dialog/__tests__/InstallExtensionDialog.test.ts

@@ -0,0 +1,111 @@
+import { shallowMount, VueWrapper } from '@vue/test-utils';
+import InstallExtensionDialog from '@shell/dialog/InstallExtensionDialog.vue';
+
+jest.mock('@shell/config/uiplugins', () => ({
+  ...jest.requireActual('@shell/config/uiplugins'),
+  isChartVersionHigher: jest.fn((v1: string, v2: string) => v1 > v2),
+}));
+
+const t = (key: string): string => key;
+
+describe('component: InstallExtensionDialog', () => {
+  let wrapper: VueWrapper<any>;
+
+  const mountComponent = (propsData = {}) => {
+    const store = { dispatch: () => Promise.resolve() };
+
+    const defaultProps = {
+      plugin:       { installableVersions: [] },
+      action:       'install',
+      updateStatus: jest.fn(),
+      closed:       jest.fn(),
+    };
+
+    return shallowMount(InstallExtensionDialog, {
+      propsData: {
+        ...defaultProps,
+        ...propsData,
+      },
+      global: {
+        mocks: {
+          $store: store,
+          t,
+        },
+      }
+    });
+  };
+
+  describe('fetch', () => {
+    it('should set currentVersion if plugin is installed', async() => {
+      wrapper = mountComponent({ plugin: { installed: true, installedVersion: '1.0.0' } });
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+      expect(wrapper.vm.currentVersion).toBe('1.0.0');
+    });
+
+    it('should set version from initialVersion if provided', async() => {
+      wrapper = mountComponent({ initialVersion: '1.2.3', plugin: { installed: false } });
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+      expect(wrapper.vm.version).toBe('1.2.3');
+    });
+
+    it('should set version to latest for upgrade action', async() => {
+      const plugin = { installableVersions: [{ version: '1.1.0' }, { version: '1.0.0' }] };
+
+      wrapper = mountComponent({ plugin, action: 'upgrade' });
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+      expect(wrapper.vm.version).toBe('1.1.0');
+    });
+
+    it('should set version to next oldest for downgrade action', async() => {
+      const plugin = {
+        installed:           true,
+        installedVersion:    '1.1.0',
+        installableVersions: [{ version: '1.1.0' }, { version: '1.0.0' }]
+      };
+
+      wrapper = mountComponent({ plugin, action: 'downgrade' });
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+      expect(wrapper.vm.version).toBe('1.0.0');
+    });
+  });
+
+  describe('versionOptions', () => {
+    it('should include and disable the current version', () => {
+      const plugin = {
+        installableVersions: [
+          { version: '1.1.0' },
+          { version: '1.0.0' },
+        ]
+      };
+
+      wrapper = mountComponent({ plugin });
+      wrapper.vm.currentVersion = '1.0.0';
+
+      const options = wrapper.vm.versionOptions;
+      const currentOption = options.find((o: any) => o.value === '1.0.0');
+
+      expect(currentOption).toBeDefined();
+      expect(currentOption.disabled).toBe(true);
+      expect(currentOption.label).toContain('(plugins.labels.current)');
+    });
+  });
+
+  describe('buttonMode', () => {
+    beforeEach(() => {
+      wrapper = mountComponent({ action: 'upgrade' });
+      wrapper.vm.currentVersion = '1.0.0';
+    });
+
+    it('should be "upgrade" if selected version is higher', async() => {
+      wrapper.vm.version = '1.1.0';
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.buttonMode).toBe('upgrade');
+    });
+
+    it('should be "downgrade" if selected version is lower', async() => {
+      wrapper.vm.version = '0.9.0';
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.buttonMode).toBe('downgrade');
+    });
+  });
+});

package/edit/auth/oidc.vue

@@ -59,11 +59,16 @@ export default {
         userInfoEndpoint: null,
       },
       // TODO #13457: this is duplicated due wrong format
-      oidcScope: [],
-      SLO_OPTION_VALUES
+      oidcScope:       [],
+      SLO_OPTION_VALUES,
+      addCustomClaims: false,
     };
   },
 
+  created() {
+    this.registerBeforeHook(this.willSave, 'willSave');
+  },
+
   computed: {
     tArgs() {
       return {
@@ -140,6 +145,10 @@ export default {
       return this.model?.id === 'cognito';
     },
 
+    isGenericOidc() {
+      return this.model?.id === 'genericoidc';
+    },
+
     isLogoutAllSupported() {
       return this.model?.logoutAllSupported;
     },
@@ -220,6 +229,15 @@ export default {
         this.model.logoutAllForced = false;
         break;
       }
+    },
+
+    model: {
+      handler(newVal) {
+        if (newVal?.nameClaim || newVal?.groupsClaim || newVal?.emailClaim) {
+          this.addCustomClaims = true;
+        }
+      },
+      once: true
     }
   },
 
@@ -248,6 +266,14 @@ export default {
 
     updateScope() {
       this.model.scope = this.oidcScope.join(' ');
+    },
+
+    willSave() {
+      if (this.isGenericOidc && !this.addCustomClaims) {
+        this.model.nameClaim = undefined;
+        this.model.groupsClaim = undefined;
+        this.model.emailClaim = undefined;
+      }
     }
   }
 };
@@ -390,21 +416,60 @@ export default {
           </div>
         </div>
 
-        <!-- Allow group search -->
-        <div
-          v-if="supportsGroupSearch"
-          class="row mb-20"
-        >
-          <div class="col span-6">
-            <Checkbox
-              v-model:value="model.groupSearchEnabled"
-              data-testid="input-group-search"
-              :label="t('authConfig.oidc.groupSearch.label')"
-              :tooltip="t('authConfig.oidc.groupSearch.tooltip')"
-              :mode="mode"
-            />
+        <template v-if="isGenericOidc || supportsGroupSearch">
+          <div
+            class="row mb-20"
+          >
+            <div class="col span-6 checkbox-flex">
+              <!-- Allow group search -->
+              <Checkbox
+                v-if="supportsGroupSearch"
+                v-model:value="model.groupSearchEnabled"
+                data-testid="input-group-search"
+                :label="t('authConfig.oidc.groupSearch.label')"
+                :tooltip="t('authConfig.oidc.groupSearch.tooltip')"
+                :mode="mode"
+              />
+              <Checkbox
+                v-if="isGenericOidc"
+                v-model:value="addCustomClaims"
+                data-testid="input-add-custom-claims"
+                :label="t('authConfig.oidc.customClaims.enable.label')"
+                :tooltip="t('authConfig.oidc.customClaims.enable.tooltip')"
+                :mode="mode"
+              />
+            </div>
           </div>
-        </div>
+        </template>
+
+        <template v-if="addCustomClaims">
+          <h4>{{ t('authConfig.oidc.customClaims.label') }}</h4>
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="model.nameClaim"
+                :label="t(`authConfig.oidc.customClaims.nameClaim.label`)"
+                :mode="mode"
+              />
+            </div>
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="model.groupsClaim"
+                :label="t(`authConfig.oidc.customClaims.groupsClaim.label`)"
+                :mode="mode"
+              />
+            </div>
+          </div>
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="model.emailClaim"
+                :label="t(`authConfig.oidc.customClaims.emailClaim.label`)"
+                :mode="mode"
+              />
+            </div>
+          </div>
+        </template>
 
         <!-- Scopes -->
         <div class="row mb-20">
@@ -608,4 +673,9 @@ export default {
       margin: 0 3px;
     }
   }
+
+  .checkbox-flex {
+    display: flex;
+    flex-direction: column;
+  }
 </style>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 import PaginatedResourceTable from '@shell/components/PaginatedResourceTable.vue';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
-import ClusterRepo from '@shell/models/catalog.cattle.io.clusterrepo';
+import { RancherKubeMetadata } from '@shell/types/kube/kube-api';
 import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { defineComponent } from 'vue';
 
@@ -25,7 +25,7 @@ export default defineComponent({
     /**
      * Filter out hidden repos from list of all repos
      */
-    filterRowsLocal(rows: ClusterRepo[]) {
+    filterRowsLocal(rows: { metadata: RancherKubeMetadata}[]) {
       return rows.filter((repo) => !(repo?.metadata?.annotations?.[CATALOG_ANNOTATIONS.HIDDEN_REPO] === 'true'));
     },
 

package/mixins/__tests__/chart.test.ts

@@ -213,7 +213,7 @@ describe('chartMixin', () => {
       });
 
       expect(wrapper.vm.action).toStrictEqual({
-        name: 'upgradeVersion',
+        name: 'upgrade',
         tKey: 'upgrade',
         icon: 'icon-upgrade-alt',
       });

package/mixins/chart.js

@@ -242,7 +242,7 @@ export default {
 
       if (compare(this.currentVersion, this.targetVersion) < 0) {
         return {
-          name: 'upgradeVersion', tKey: 'upgrade', icon: 'icon-upgrade-alt'
+          name: 'upgrade', tKey: 'upgrade', icon: 'icon-upgrade-alt'
         };
       }
 

package/models/event.js

@@ -25,6 +25,13 @@ export default class K8sEvent extends SteveModel {
     return this._type;
   }
 
+  get firstSeen() {
+    const schema = this.$getters['schemaFor'](this.type);
+    const rowValueGetter = this.$rootGetters['type-map/rowValueGetter'];
+
+    return schema && rowValueGetter ? rowValueGetter(schema, 'First Seen')(this) : null;
+  }
+
   get lastSeen() {
     const schema = this.$getters['schemaFor'](this.type);
     const rowValueGetter = this.$rootGetters['type-map/rowValueGetter'];

package/models/provisioning.cattle.io.cluster.js

@@ -391,6 +391,15 @@ export default class ProvCluster extends SteveModel {
       const pCluster = this.$rootGetters['management/byId'](CAPI.RANCHER_CLUSTER, this.id);
       const name = this.status?.clusterName || pCluster?.status?.clusterName;
 
+      try {
+        if (name) {
+          // Just in case we're not generically watching all mgmt clusters and...
+          // thus won't receive new mgmt cluster over socket...
+          // fire and forget a request to fetch it (this won't make multiple requests if one is already running)
+          this.$dispatch('find', { type: MANAGEMENT.CLUSTER, id: name });
+        }
+      } catch {}
+
       return name && !!this.$rootGetters['management/byId'](MANAGEMENT.CLUSTER, name);
     }, this.$rootGetters['i18n/t']('cluster.managementTimeout'), timeout, interval);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -93,7 +93,7 @@
     "express": "4.17.1",
     "file-saver": "2.0.2",
     "floating-vue": "5.2.2",
-    "focus-trap": "7.6.2",
+    "focus-trap": "7.6.5",
     "frontmatter-markdown-loader": "3.7.0",
     "identicon.js": "2.3.3",
     "intl-messageformat": "7.8.4",

package/pages/c/_cluster/apps/charts/AppChartCardFooter.vue

@@ -80,6 +80,12 @@ function onClickItem(type: string, label: string) {
     &-text {
       text-transform: capitalize;
       margin-right: 8px;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-all;
     }
 
     &-icon {