@rancher/shell 3.0.8 → 3.0.9-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.8",
+  "version": "3.0.9-rc.2",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancher/dashboard",
   "license": "Apache-2.0",
@@ -67,7 +67,7 @@
     "cookie": "0.7.0",
     "core-js": "3.45.0",
     "cron-validator": "1.4.0",
-    "cronstrue": "2.53.0",
+    "cronstrue": "3.9.0",
     "cross-env": "7.0.3",
     "css-loader": "6.7.3",
     "csv-loader": "3.0.3",
@@ -76,7 +76,7 @@
     "d3-selection": "3.0.0",
     "d3": "7.3.0",
     "dayjs": "1.11.18",
-    "defu": "5.0.1",
+    "defu": "6.1.4",
     "diff2html": "3.4.24",
     "dompurify": "3.2.5",
     "element-matches": "^0.1.2",
@@ -111,7 +111,7 @@
     "jsonpath-plus": "10.3.0",
     "jsrsasign": "11.0.0",
     "jszip": "3.10.1",
-    "lodash": "4.17.21",
+    "lodash": "4.17.23",
     "marked": "4.0.17",
     "node-polyfill-webpack-plugin": "3.0.0",
     "nodemon": "2.0.22",

package/pages/c/_cluster/apps/charts/__tests__/install.test.ts

@@ -0,0 +1,91 @@
+
+import { mount } from '@vue/test-utils';
+import Install from '@shell/pages/c/_cluster/apps/charts/install.vue';
+import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
+
+describe('page: Install', () => {
+  it('should use version annotations for target namespace and name', async() => {
+    const mockStore = {
+      dispatch: jest.fn((action) => {
+        if (action === 'cluster/create') {
+          return Promise.resolve({ metadata: { namespace: '', name: '' } });
+        }
+
+        return Promise.resolve();
+      }),
+      getters: {
+        'catalog/inStore':         'cluster',
+        'features/get':            () => false,
+        defaultNamespace:          'default',
+        'i18n/withFallback':       (key: string) => key,
+        'type-map/hasCustomChart': () => false,
+        'cluster/all':             () => [],
+        'cluster/byId':            () => null,
+        'management/all':          () => [],
+        'prefs/get':               () => {},
+        'catalog/charts':          [],
+        'wm/byId':                 () => null,
+        'i18n/t':                  (key: string) => key,
+      }
+    };
+
+    const wrapper = mount(Install, {
+      global: {
+        mocks: {
+          $store:      mockStore,
+          $route:      { query: {} },
+          $fetchState: { pending: false },
+          t:           (key: string) => key,
+        },
+        stubs: {
+          Loading:             true,
+          Wizard:              true,
+          Banner:              true,
+          Checkbox:            true,
+          LabeledInput:        true,
+          LabeledSelect:       true,
+          NameNsDescription:   true,
+          Tabbed:              true,
+          Questions:           true,
+          YamlEditor:          true,
+          ResourceCancelModal: true,
+          UnitInput:           true,
+          TypeDescription:     true,
+          LazyImage:           true,
+          ChartReadme:         true,
+          ButtonGroup:         true,
+        }
+      },
+      data() {
+        return {
+          version: {
+            annotations: {
+              [CATALOG_ANNOTATIONS.NAMESPACE]:    'custom-ns',
+              [CATALOG_ANNOTATIONS.RELEASE_NAME]: 'custom-name',
+            }
+          },
+          chart: {
+            targetNamespace: 'wrong-ns',
+            targetName:      'wrong-name',
+            versions:        []
+          },
+          query: { versionName: '1.0.0' }
+        };
+      }
+    });
+
+    // Mock methods from mixins
+    jest.spyOn((wrapper.vm as any), 'fetchChart').mockImplementation().mockResolvedValue(undefined);
+    jest.spyOn((wrapper.vm as any), 'fetchAutoInstallInfo').mockImplementation().mockResolvedValue(undefined);
+    jest.spyOn((wrapper.vm as any), 'getClusterRegistry').mockImplementation().mockResolvedValue(undefined);
+    jest.spyOn((wrapper.vm as any), 'getGlobalRegistry').mockImplementation().mockResolvedValue(undefined);
+    jest.spyOn((wrapper.vm as any), 'loadValuesComponent').mockImplementation().mockResolvedValue(undefined);
+    jest.spyOn((wrapper.vm as any), 'updateStepOneReady').mockImplementation();
+
+    // Trigger fetch
+    await Install.fetch.call(wrapper.vm);
+
+    expect(wrapper.vm.forceNamespace).toBe('custom-ns');
+    expect(wrapper.vm.value.metadata.name).toBe('custom-name');
+  });
+});

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

@@ -166,10 +166,10 @@ export default {
     } else if (this.$route.query[FROM_CLUSTER] === _FLAGGED) {
       /* For Fleet, use the fleet-default namespace. */
       this.forceNamespace = DEFAULT_WORKSPACE;
-    } else if ( this.chart?.targetNamespace ) {
+    } else if ( this.version?.annotations?.[CATALOG_ANNOTATIONS.NAMESPACE] ) {
       /* If a target namespace is defined in the chart,
       set the target namespace as default. */
-      this.forceNamespace = this.chart.targetNamespace;
+      this.forceNamespace = this.version.annotations[CATALOG_ANNOTATIONS.NAMESPACE];
     } else if ( this.query.appNamespace ) {
       /* If a namespace is defined in the URL query,
        use that namespace as default. */
@@ -219,13 +219,13 @@ export default {
         The target name indicates the name of the cluster
         group that the chart is meant to be installed in.
       */
-      if ( this.chart?.targetName ) {
+      if ( this.version?.annotations?.[CATALOG_ANNOTATIONS.RELEASE_NAME] ) {
         /*
           Set the name of the chartInstallAction
           to the name of the cluster group
           where the chart should be installed.
         */
-        this.value.metadata.name = this.chart.targetName;
+        this.value.metadata.name = this.version.annotations[CATALOG_ANNOTATIONS.RELEASE_NAME];
         this.nameDisabled = true;
       } else if ( this.query.appName ) {
         this.value.metadata.name = this.query.appName;

package/pages/c/_cluster/explorer/EventsTable.vue

@@ -170,8 +170,8 @@ export default {
         <rc-dropdown-trigger
           data-testid="events-list-row-count-menu-toggle"
           :aria-label="t('glance.changeEventsListRowCount')"
-          ghost
-          small
+          variant="ghost"
+          size="small"
         >
           <i class="icon icon-gear" />
         </rc-dropdown-trigger>

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

@@ -1,11 +1,11 @@
-<script>
+<script lang="ts">
 import debounce from 'lodash/debounce';
 import { getVersionData } from '@shell/config/version';
 import { mapState, mapGetters } from 'vuex';
 import { isEmpty } from '@shell/utils/object';
 import { FLEET } from '@shell/config/types';
 import { WORKSPACE } from '@shell/store/prefs';
-import Loading from '@shell/components/Loading';
+import Loading from '@shell/components/Loading.vue';
 import { checkPermissions, checkSchemasForFindAllHash } from '@shell/utils/auth';
 import { WORKSPACE_ANNOTATION } from '@shell/config/labels-annotations';
 import { filterBy } from '@shell/utils/array';
@@ -15,7 +15,7 @@ import ResourcePanel from '@shell/components/fleet/dashboard/ResourcePanel.vue';
 import ResourceCard from '@shell/components/fleet/dashboard/ResourceCard.vue';
 import ResourceDetails from '@shell/components/fleet/dashboard/ResourceDetails.vue';
 import EmptyDashboard from '@shell/components/fleet/dashboard/Empty.vue';
-import ButtonGroup from '@shell/components/ButtonGroup';
+import ButtonGroup from '@shell/components/ButtonGroup.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import FleetApplications from '@shell/components/fleet/FleetApplications.vue';
 import FleetUtils from '@shell/utils/fleet';
@@ -322,13 +322,19 @@ export default {
       this.selectedCard = selected;
 
       this.$shell.slideIn.open(ResourceDetails, {
-        componentProps: {
-          showHeader: false,
-          width:      window.innerWidth / 3 > 530 ? `${ window.innerWidth / 3 }px` : '530px',
+        showHeader: false,
+        props:      {
           value,
           statePanel,
           workspace
-        }
+        },
+        width:              '73%',
+        // We want this to be full viewport height top to bottom
+        height:             '100vh',
+        top:                '0',
+        'z-index':          101, // We want this to be above the main side menu
+        closeOnRouteChange: ['name', 'params', 'query'], // We want to ignore hash changes, tables in extensions can trigger the drawer to close while opening
+        triggerFocusTrap:   false,
       });
     },
 
@@ -493,8 +499,8 @@ export default {
             @update:value="viewMode = $event"
           />
           <RcButton
-            small
-            ghost
+            size="small"
+            variant="ghost"
             data-testid="fleet-dashboard-expand-all"
             class="collapse-all-btn"
             @click="toggleCardAll(allCardsExpanded ? 'collapse' : 'expand')"
@@ -579,8 +585,8 @@ export default {
               :data-testid="'expand-button'"
             >
               <RcButton
-                small
-                ghost
+                size="small"
+                variant="ghost"
                 :aria-label="`workspace-expand-btn-${ workspace.id }`"
                 :data-testid="`workspace-expand-btn-${ workspace.id }`"
                 @click="toggleCard(workspace.id)"
@@ -646,7 +652,7 @@ export default {
               class="create-button"
             >
               <RcButton
-                small
+                size="small"
                 @click="createResource(workspace.id)"
               >
                 {{ t('fleet.application.intro.add') }}

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

@@ -7,7 +7,6 @@ import Masthead from '@shell/components/ResourceList/Masthead';
 import Banner from '@components/Banner/Banner.vue';
 import RcStatusBadge from '@components/Pill/RcStatusBadge/RcStatusBadge.vue';
 import { exceptionToErrorsArray } from '@shell/utils/error';
-import { isRancherPrime } from '@shell/config/version';
 import { stateDisplay, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 import { getHostedProviders } from '@shell/utils/provider';
 
@@ -23,7 +22,6 @@ export default {
       allProviders:    null,
       resource:        HOSTED_PROVIDER,
       schema:          this.$store.getters['rancher/schemaFor'](HOSTED_PROVIDER),
-      prime:           isRancherPrime(),
       settingResource: null
     };
   },
@@ -107,14 +105,13 @@ export default {
     async generateRows() {
       this.rows = this.allProviders.map((p) => {
         const active = p.id in this.settings ? this.settings[p.id] : true;
-        const canNotPrime = p.prime && !this.prime;
         const canNotChangeSettings = !this.settingResource?.canUpdate;
         const enableAction = {
           action:   'activate',
           label:    this.t('action.activate'),
           icon:     'icon icon-play',
           bulkable: true,
-          enabled:  !active && !canNotPrime && !canNotChangeSettings,
+          enabled:  !active && !canNotChangeSettings,
           invoke:   async(opts, resources) => {
             await this.setSetting(resources, true);
           }
@@ -137,7 +134,6 @@ export default {
           name:        p.label,
           nameDisplay: p.label,
           description: p.description || '',
-          prime:       p.prime,
           active,
           availableActions
         };
@@ -192,13 +188,6 @@ export default {
         <div class="col">
           <div class="row">
             <span class="mr-10">{{ row.name }}</span>
-            <RcStatusBadge
-              v-if="row.prime"
-              class="prime-badge"
-              status="success"
-            >
-              {{ t('providers.hosted.prime') }}
-            </RcStatusBadge>
           </div>
           <div
             v-if="row.description"
@@ -211,10 +200,3 @@ export default {
     </ResourceTable>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.prime-badge {
-  font-size: 10px;
-  line-height: 15px;
-}
-</style>

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

@@ -349,7 +349,7 @@ export default {
                   v-for="btn in panelActions"
                   :key="btn.action"
                   class="mmr-3 mmb-3"
-                  :[btn.role]="true"
+                  :variant="btn.role"
                   @click="onButtonClick(btn)"
                 >
                   <i :class="['icon', btn.icon, 'mmr-2']" />{{ btn.label }}

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

@@ -917,7 +917,7 @@ export default {
         <div v-if="hasFeatureFlag && hasMenuActions">
           <ActionMenu
             data-testid="extensions-page-menu"
-            button-role="tertiary"
+            button-variant="tertiary"
             :button-aria-label="t('plugins.labels.menu')"
             :custom-actions="menuActions"
             @devLoad="showDeveloperLoadDialog"

package/plugins/dashboard-store/__tests__/resource-class.test.ts

@@ -1,6 +1,7 @@
 import jsyaml from 'js-yaml';
 import Resource from '@shell/plugins/dashboard-store/resource-class.js';
 import { resourceClassJunkObject } from '@shell/plugins/dashboard-store/__tests__/utils/store-mocks';
+import { EVENT } from '@shell/config/types';
 
 describe('class: Resource', () => {
   describe('given custom resource keys', () => {
@@ -237,4 +238,237 @@ describe('class: Resource', () => {
       expect(mockStore.dispatch).not.toHaveBeenCalledWith('load', expect.any(Object));
     });
   });
+
+  describe('getter: resourceConditions', () => {
+    it('should return empty array when status.conditions is undefined', () => {
+      const resource = new Resource({ type: 'test' }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': jest.fn() },
+      });
+
+      expect(resource.resourceConditions).toStrictEqual([]);
+    });
+
+    it('should return empty array when status is undefined', () => {
+      const resource = new Resource({ type: 'test', status: {} }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': jest.fn() },
+      });
+
+      expect(resource.resourceConditions).toStrictEqual([]);
+    });
+
+    it('should map conditions correctly', () => {
+      const resource = new Resource({
+        type:   'test',
+        status: {
+          conditions: [
+            {
+              type: 'Ready', status: 'True', message: 'Resource is ready', lastTransitionTime: '2024-01-01T00:00:00Z'
+            },
+          ]
+        }
+      }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': jest.fn() },
+      });
+
+      const conditions = resource.resourceConditions;
+
+      expect(conditions).toHaveLength(1);
+      expect(conditions[0].condition).toBe('Ready');
+      expect(conditions[0].status).toBe('True');
+      expect(conditions[0].message).toBe('Resource is ready');
+      expect(conditions[0].stateSimpleColor).toBe('disabled');
+      expect(conditions[0].time).toBe('2024-01-01T00:00:00Z');
+    });
+
+    it('should set error color when condition has error', () => {
+      const resource = new Resource({
+        type:   'test',
+        status: {
+          conditions: [
+            {
+              type: 'Ready', status: 'False', error: true, message: 'Something failed'
+            },
+          ]
+        }
+      }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': jest.fn() },
+      });
+
+      const conditions = resource.resourceConditions;
+
+      expect(conditions[0].stateSimpleColor).toBe('error');
+      expect(conditions[0].error).toBe(true);
+    });
+
+    it('should prepend reason to message when present', () => {
+      const resource = new Resource({
+        type:   'test',
+        status: {
+          conditions: [
+            {
+              type: 'Ready', status: 'False', reason: 'MinimumReplicasUnavailable', message: 'Deployment does not have minimum availability.'
+            },
+          ]
+        }
+      }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': jest.fn() },
+      });
+
+      const conditions = resource.resourceConditions;
+
+      expect(conditions[0].message).toBe('[MinimumReplicasUnavailable] Deployment does not have minimum availability.');
+    });
+
+    it('should use Unknown for missing type and status', () => {
+      const resource = new Resource({
+        type:   'test',
+        status: {
+          conditions: [
+            { message: 'Some message' },
+          ]
+        }
+      }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': jest.fn() },
+      });
+
+      const conditions = resource.resourceConditions;
+
+      expect(conditions[0].condition).toBe('Unknown');
+      expect(conditions[0].status).toBe('Unknown');
+    });
+
+    it('should prioritize time fields correctly', () => {
+      const resource = new Resource({
+        type:   'test',
+        status: {
+          conditions: [
+            {
+              type: 'Test', lastProbeTime: 'probe-time', lastUpdateTime: 'update-time', lastTransitionTime: 'transition-time'
+            },
+          ]
+        }
+      }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': jest.fn() },
+      });
+
+      const conditions = resource.resourceConditions;
+
+      expect(conditions[0].time).toBe('probe-time');
+    });
+  });
+
+  describe('getter: resourceEvents', () => {
+    it('should return events from the store', () => {
+      const mockEvents = [{ type: 'Normal', reason: 'Test' }];
+      const resource = new Resource({ type: 'test' }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': jest.fn(), 'cluster/all': (type: string) => (type === EVENT ? mockEvents : []) },
+      });
+
+      expect(resource.resourceEvents).toStrictEqual(mockEvents);
+    });
+  });
+
+  describe('getter: cards', () => {
+    it('should return an array containing the insight card', () => {
+      const resource = new Resource({ type: 'test' }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: {
+          'i18n/t':      (key: string) => key,
+          'cluster/all': () => []
+        },
+      });
+
+      const cards = resource.cards;
+
+      expect(cards).toHaveLength(1);
+      expect(cards[0]).toHaveProperty('component');
+      expect(cards[0]).toHaveProperty('props');
+    });
+  });
+
+  describe('getter: insightCardProps', () => {
+    it('should return props with title and rows', () => {
+      const resource = new Resource({
+        type:   'test',
+        status: {
+          conditions: [
+            { type: 'Ready', status: 'True' }
+          ]
+        }
+      }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: {
+          'i18n/t':      (key: string) => key,
+          'cluster/all': () => []
+        },
+      });
+
+      const props = resource.insightCardProps;
+
+      expect(props.title).toBe('component.resource.detail.card.insightsCard.title');
+      expect(props.rows).toHaveLength(2);
+      expect(props.rows[0].label).toBe('component.resource.detail.card.insightsCard.rows.conditions');
+      expect(props.rows[1].label).toBe('component.resource.detail.card.insightsCard.rows.events');
+    });
+  });
+
+  describe('getter: detailPageAdditionalActions', () => {
+    it('should return undefined by default', () => {
+      const resource = new Resource({ type: 'test-type' }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': jest.fn() },
+      });
+
+      expect(resource.detailPageAdditionalActions).toBeUndefined();
+    });
+
+    it('should allow subclasses to override and return button props array', () => {
+      class CustomResource extends Resource {
+        get detailPageAdditionalActions() {
+          return [
+            {
+              label: 'Action 1', variant: 'secondary', onClick: () => {}
+            },
+            {
+              label: 'Action 2', variant: 'primary', onClick: () => {}
+            }
+          ];
+        }
+      }
+
+      const resource = new CustomResource({ type: 'test-type' }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': jest.fn() },
+      });
+
+      const actions = resource.detailPageAdditionalActions;
+
+      expect(Array.isArray(actions)).toBe(true);
+      expect(actions).toHaveLength(2);
+      expect(actions[0].label).toBe('Action 1');
+      expect(actions[0].variant).toBe('secondary');
+      expect(actions[1].label).toBe('Action 2');
+      expect(actions[1].variant).toBe('primary');
+    });
+  });
 });

package/plugins/dashboard-store/actions.js

@@ -471,7 +471,7 @@ export default {
       return findAllGetter(getters, type, opt);
     }
 
-    console.log(`Find Page: [${ ctx.state.config.namespace }] ${ type }. Page: ${ opt.pagination.page }. Size: ${ opt.pagination.pageSize }. Sort: ${ opt.pagination.sort.map((s) => s.field).join(', ') }`); // eslint-disable-line no-console
+    console.log(`Find Page: [${ ctx.state.config.namespace }] ${ type }. Page: ${ opt.pagination.page }. Revision: ${ opt.revision || 'none' }. Size: ${ opt.pagination.pageSize }. Sort: ${ opt.pagination.sort.map((s) => s.field).join(', ') }`); // eslint-disable-line no-console
     opt = opt || {};
     opt.url = getters.urlFor(type, null, opt);
 
@@ -491,7 +491,7 @@ export default {
       return Promise.reject(e);
     }
 
-    // Of type @StorePagination
+    // Of type @StorePaginationResult
     const pagination = opt.pagination ? {
       request: {
         namespace:  opt.namespaced,
@@ -500,7 +500,8 @@ export default {
       result: {
         count:     out.count,
         pages:     out.pages || Math.ceil(out.count / (opt.pagination.pageSize || Number.MAX_SAFE_INTEGER)),
-        timestamp: new Date().getTime()
+        timestamp: new Date().getTime(),
+        revision:  out.revision
       }
     } : undefined;
 
@@ -698,19 +699,19 @@ export default {
 
     const res = await dispatch('request', { opt, type });
 
-    await dispatch('load', { data: res, invalidatePageCache: opt.invalidatePageCache });
+    if (!opt.transient) {
+      await dispatch('load', { data: res, invalidatePageCache: opt.invalidatePageCache });
+    }
 
-    if ( opt.watch !== false ) {
+    if (!opt.transient && opt.watch !== false ) {
       dispatch('watch', createFindWatchArg({
         type, id, opt, res
       }));
     }
 
-    out = getters.byId(type, id);
-
     garbageCollect.gcUpdateLastAccessed(ctx, type);
 
-    return out;
+    return opt.transient ? await dispatch('create', res) : getters.byId(type, id);
   },
 
   /**