@rancher/shell 3.0.9-rc.3 → 3.0.9-rc.5

package/pages/auth/setup.vue

@@ -4,7 +4,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import CopyToClipboard from '@shell/components/CopyToClipboard';
 import AsyncButton from '@shell/components/AsyncButton';
 import { LOGGED_OUT, SETUP } from '@shell/config/query-params';
-import { NORMAN, MANAGEMENT } from '@shell/config/types';
+import { NORMAN, MANAGEMENT, EXT } from '@shell/config/types';
 import { findBy } from '@shell/utils/array';
 import { Checkbox } from '@components/Form/Checkbox';
 import { getVendor, getProduct, setVendor } from '@shell/config/private-label';
@@ -21,6 +21,7 @@ import FormValidation from '@shell/mixins/form-validation';
 import isUrl from 'is-url';
 import { isLocalhost } from '@shell/utils/validators/setting';
 import Loading from '@shell/components/Loading';
+import { getBrandMeta } from '@shell/utils/brand';
 
 const calcIsFirstLogin = (store) => {
   const firstLoginSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.FIRST_LOGIN);
@@ -31,7 +32,7 @@ const calcIsFirstLogin = (store) => {
 const calcMustChangePassword = async(store) => {
   await store.dispatch('auth/getUser');
 
-  const out = store.getters['auth/v3User']?.mustChangePassword;
+  const out = store.getters['auth/user']?.mustChangePassword;
 
   return out;
 };
@@ -62,7 +63,7 @@ export default {
       current:            null,
       password:           randomStr(),
       confirm:            null,
-      v3User:             null,
+      user:               null,
       serverUrl:          null,
       mcmEnabled:         null,
       eula:               false,
@@ -124,7 +125,7 @@ export default {
     const me = findBy(principals, 'me', true);
 
     const current = this.$route.query[SETUP] || this.$store.getters['auth/initialPass'];
-    const v3User = this.$store.getters['auth/v3User'] ?? {};
+    const user = this.$store.getters['auth/user'] ?? {};
 
     const mcmFeature = await this.$store.dispatch('management/find', {
       type: MANAGEMENT.FEATURE, id: 'multi-cluster-management', opt: { url: `/v1/${ MANAGEMENT.FEATURE }/multi-cluster-management` }
@@ -149,7 +150,7 @@ export default {
     this['isFirstLogin'] = isFirstLogin;
     this['mustChangePassword'] = mustChangePassword;
     this['current'] = current;
-    this['v3User'] = v3User;
+    this['user'] = user;
     this['serverUrl'] = serverUrl;
     this['mcmEnabled'] = mcmEnabled;
     this['principals'] = principals;
@@ -188,6 +189,21 @@ export default {
 
     showLocalhostWarning() {
       return isLocalhost(this.serverUrl);
+    },
+
+    customizations() {
+      const brandMeta = getBrandMeta(this.$store.getters['management/brand']);
+      const login = brandMeta?.login || {};
+
+      return {
+        setupLabelKey: 'setup.welcome',
+        logoClass:     'login-logo',
+        ...login,
+      };
+    },
+
+    brandLogo() {
+      return this.customizations.logo;
     }
   },
 
@@ -213,19 +229,25 @@ export default {
         await this.$store.dispatch('loadManagement');
 
         if ( this.mustChangePassword ) {
-          await this.$store.dispatch('rancher/request', {
-            url:    '/v3/users?action=changepassword',
-            method: 'post',
-            data:   {
-              currentPassword: this.current,
-              newPassword:     this.password
-            },
-          });
+          const passwordChangeRequest = await this.$store.dispatch('management/create', { type: EXT.PASSWORD_CHANGE_REQUESTS });
+
+          if (!passwordChangeRequest?.canChangePassword) {
+            this.errors = exceptionToErrorsArray(this.t('changePassword.errors.cannotChange'));
+            throw new Error(this.t('changePassword.errors.cannotChange'));
+          }
+
+          passwordChangeRequest.spec = {
+            currentPassword: this.current,
+            newPassword:     this.password,
+            userID:          this.user?.id
+          };
+
+          await passwordChangeRequest.save();
         } else {
           promises.push(setSetting(this.$store, SETTING.FIRST_LOGIN, 'false'));
         }
 
-        const user = this.v3User;
+        const user = this.user;
 
         user.mustChangePassword = false;
         this.$store.dispatch('auth/gotUser', user);
@@ -278,8 +300,18 @@ export default {
            
         </div>
         <div>
+          <div
+            v-if="brandLogo"
+            class="brand-logo"
+          >
+            <BrandImage
+              :class="{[customizations.logoClass]: !!customizations.logoClass}"
+              :file-name="brandLogo"
+              :alt="t('setup.setup')"
+            />
+          </div>
           <h1 class="text-center">
-            {{ t('setup.welcome', {product}) }}
+            {{ t(customizations.setupLabelKey, {product}) }}
           </h1>
 
           <template v-if="mustChangePassword">
@@ -467,6 +499,11 @@ export default {
   .setup {
     overflow: hidden;
 
+    .brand-logo {
+      display: flex;
+      justify-content: center;
+    }
+
     .row {
       & .checkbox {
         margin: auto

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { RcItemCardAction } from '@components/RcItemCard';
+import { RcButton } from '@components/RcButton';
 
 interface FooterItem {
   icon?: string;
@@ -30,26 +31,34 @@ function onClickItem(type: string, label: string) {
       class="app-chart-card-footer-item"
       data-testid="app-chart-card-footer-item"
     >
-      <i
-        v-if="footerItem.icon"
-        v-clean-tooltip="t(footerItem.iconTooltip?.key)"
-        :class="['icon', 'app-chart-card-footer-item-icon', footerItem.icon]"
-      />
       <template
         v-for="(label, j) in footerItem.labels"
         :key="j"
       >
         <rc-item-card-action
           v-if="clickable && footerItem.type"
-          v-clean-tooltip="footerItem.labelTooltip"
-          class="app-chart-card-footer-item-text secondary-text-link"
-          data-testid="app-chart-card-footer-item-text"
-          tabindex="0"
-          :aria-label="t('catalog.charts.appChartCard.footerItem.ariaLabel')"
-          @click="onClickItem(footerItem.type, label)"
+          class="app-chart-card-footer-item-text"
         >
-          {{ label }}
-          <span v-if="footerItem.labels.length > 1 && j !== footerItem.labels.length - 1">, </span>
+          <rc-button
+            v-clean-tooltip="footerItem.labelTooltip"
+            variant="ghost"
+            class="app-chart-card-footer-button secondary-text-link"
+            data-testid="app-chart-card-footer-item-text"
+            :aria-label="t('catalog.charts.appChartCard.footerItem.ariaLabel', { filter: label })"
+            @click="onClickItem(footerItem.type, label)"
+          >
+            <template
+              v-if="footerItem.icon"
+              #before
+            >
+              <i
+                v-clean-tooltip="t(footerItem.iconTooltip?.key)"
+                :class="['icon', 'app-chart-card-footer-item-icon', footerItem.icon]"
+              />
+            </template>
+            {{ label }}
+            <span v-if="footerItem.labels.length > 1 && j !== footerItem.labels.length - 1">, </span>
+          </rc-button>
         </rc-item-card-action>
         <span
           v-else
@@ -78,7 +87,6 @@ function onClickItem(type: string, label: string) {
     margin-right: 8px;
 
     &-text {
-      text-transform: capitalize;
       margin-right: 8px;
       display: -webkit-box;
       -webkit-line-clamp: 1;
@@ -98,5 +106,21 @@ function onClickItem(type: string, label: string) {
       margin-right: 8px;
     }
   }
+
+  &-button {
+    text-transform: capitalize;
+  }
+}
+
+button.variant-ghost.app-chart-card-footer-button {
+  padding: 0;
+  gap: 0;
+  min-height: 20px;
+
+  &:focus-visible {
+    border-color: var(--primary);
+    @include focus-outline;
+    outline-offset: -2px;
+  }
 }
 </style>

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

@@ -696,6 +696,7 @@ export default {
             :content="card.content"
             :value="card.rawChart"
             variant="medium"
+            role="link"
             :class="{ 'single-card': appChartCards.length === 1 }"
             :clickable="true"
             @card-click="selectChart"

package/pages/home.vue

@@ -10,7 +10,7 @@ import SingleClusterInfo from '@shell/components/SingleClusterInfo.vue';
 import DynamicContentBanner from '@shell/components/DynamicContent/DynamicContentBanner.vue';
 import DynamicContentPanel from '@shell/components/DynamicContent/DynamicContentPanel.vue';
 import { mapGetters, mapState } from 'vuex';
-import { MANAGEMENT, CAPI, COUNT } from '@shell/config/types';
+import { MANAGEMENT, CAPI, COUNT, SAVED_COUNTS } from '@shell/config/types';
 import { NAME as MANAGER } from '@shell/config/product/manager';
 import { AGE, STATE } from '@shell/config/table-headers';
 import { MODE, _IMPORT } from '@shell/config/query-params';
@@ -256,8 +256,14 @@ export default defineComponent({
      */
     altClusterList() {
       return this.tooManyClusters && !this.altClusterListDisabled;
-    }
+    },
 
+    clusterCountDisplay() {
+      // If we have the cluster count from the store, use that instead
+      const savedCount = this.$store.getters['management/getSavedCount'](SAVED_COUNTS.K8S_CLUSTERS);
+
+      return typeof savedCount !== 'undefined' ? savedCount : this.clusterCount;
+    }
   },
 
   watch: {
@@ -806,7 +812,7 @@ export default defineComponent({
                     </h1>
                     <BadgeState
                       v-if="clusterCount && !tooManyClusters"
-                      :label="clusterCount.toString()"
+                      :label="clusterCountDisplay.toString()"
                       color="bg-info ml-20 mr-20"
                     />
                   </div>

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

@@ -397,9 +397,7 @@ describe('class: Resource', () => {
 
       const cards = resource.cards;
 
-      expect(cards).toHaveLength(1);
-      expect(cards[0]).toHaveProperty('component');
-      expect(cards[0]).toHaveProperty('props');
+      expect(cards).toHaveLength(0);
     });
   });
 

package/plugins/dashboard-store/actions.js

@@ -515,6 +515,13 @@ export default {
       });
     }
 
+    if (opt.saveCountAs) {
+      commit('setSavedCount', {
+        name:  opt.saveCountAs,
+        count: out.count,
+      });
+    }
+
     if ( !opt.transient && opt.watch !== false ) {
       dispatch('watch', watchArgs);
     }

package/plugins/dashboard-store/getters.js

@@ -351,10 +351,22 @@ export default {
     return out;
   },
 
+  /**
+   * Can the user GET a resource of the given type
+   */
+  canGet: (state, getters) => (type) => {
+    const schema = getters.schemaFor(type);
+
+    return schema?.canGet;
+  },
+
+  /**
+   * Can the user LIST a resource of the given type
+   */
   canList: (state, getters) => (type) => {
     const schema = getters.schemaFor(type);
 
-    return schema && schema.hasLink('collection');
+    return schema?.canList;
   },
 
   typeRegistered: (state, getters) => (type) => {
@@ -559,4 +571,14 @@ export default {
    * Can be used to change behaviour given steve cache api functionality
    */
   isSteveCacheUrl: (state) => () => false,
+
+  /**
+   * Get the saved count for the given name
+   *
+   * @param {string} name Name of the saved count
+   * @returns {number|undefined} The saved count or undefined if not found
+   */
+  getSavedCount: (state) => (name) => {
+    return state.savedCounts[name];
+  }
 };

package/plugins/dashboard-store/index.js

@@ -23,8 +23,9 @@ export const coreStoreState = (namespace, baseUrl, isClusterStore) => ({
     namespace,
     isClusterStore
   },
-  types: {},
-  $ctx:  markRaw({}),
+  types:       {},
+  savedCounts: {}, // Saved counts for resource types (from paginated API called where marked)
+  $ctx:        markRaw({}),
 });
 
 export default (vuexModule, config, init) => {

package/plugins/dashboard-store/mutations.js

@@ -588,6 +588,10 @@ export default {
     cache.haveNamespace = namespace;
   },
 
+  setSavedCount(state, { name, count }) {
+    state.savedCounts[name] = count;
+  },
+
   loadedAll(state, { type }) {
     const cache = registerType(state, type);
 

package/plugins/dashboard-store/resource-class.js

@@ -1284,9 +1284,15 @@ export default class Resource {
 
       // Steve sometimes returns Table responses instead of the resource you just saved.. ignore
       if ( res && res.kind !== 'Table') {
-        await this.$dispatch('load', {
-          data: res, existing: (forNew ? this : undefined ), invalidatePageCache
-        });
+        const keyField = this.$getters.keyFieldForType(this.type);
+        const id = res[keyField];
+
+        // only items with ID will be added to the store, this prevents "new" resources that return an empty body OR no ID from being added to the store with an ID of "undefined"
+        if (id) {
+          await this.$dispatch('load', {
+            data: res, existing: (forNew ? this : undefined ), invalidatePageCache
+          });
+        }
       }
     } catch (e) {
       if ( this.type && this.id && e?._status === 409) {
@@ -2164,7 +2170,7 @@ export default class Resource {
   get insightCardProps() {
     const rows = [
       useResourceCardRow(this.t('component.resource.detail.card.insightsCard.rows.conditions'), this.resourceConditions, undefined, 'condition', '#conditions'),
-      useResourceCardRow(this.t('component.resource.detail.card.insightsCard.rows.events'), this.resourceEvents, undefined, undefined, '#events'),
+      useResourceCardRow(this.t('component.resource.detail.card.insightsCard.rows.events'), this.resourceEvents, 'insightsColor', 'eventType', '#events'),
     ];
 
     return {
@@ -2181,7 +2187,8 @@ export default class Resource {
   }
 
   get _cards() {
-    return [this.insightCard];
+    // All cards are opt in, we're leaving the insights card as part of the base resource since it should proliferate to most resources
+    return [];
   }
 
   get cards() {

package/plugins/steve/__tests__/steve-class.test.ts

@@ -56,5 +56,172 @@ describe('class: Steve', () => {
         expect({ ...steve }).toStrictEqual(customResource);
       });
     });
+
+    describe('method: processSaveResponse', () => {
+      it('should call parent processSaveResponse', () => {
+        const mockDispatch = jest.fn();
+        const mockRootGetters = { 'i18n/t': jest.fn().mockReturnValue('Resource created: test-id') };
+        const steve = new Steve(customResource, {
+          getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+          dispatch:    mockDispatch,
+          rootGetters: mockRootGetters,
+        });
+
+        // Mock the parent processSaveResponse method
+        const parentProcessSaveResponse = jest.spyOn(Object.getPrototypeOf(Object.getPrototypeOf(steve)), 'processSaveResponse');
+
+        const response = { _status: 200 };
+
+        steve.processSaveResponse(response);
+
+        expect(parentProcessSaveResponse).toHaveBeenCalledWith(response);
+      });
+
+      it('should show growl notification for autogenerated names on 201 status', () => {
+        const mockDispatch = jest.fn();
+        const mockT = jest.fn()
+          .mockReturnValueOnce('CustomResourceDefinition')
+          .mockReturnValueOnce('CustomResourceDefinition created')
+          .mockReturnValueOnce('Resource test-generated-abc123 created successfully');
+        const mockRootGetters = { 'i18n/t': mockT };
+        const steve = new Steve(customResource, {
+          getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+          dispatch:    mockDispatch,
+          rootGetters: mockRootGetters,
+        });
+
+        const response = {
+          _status:  201,
+          metadata: { generateName: 'test-generated-' },
+          id:       'default/test-generated-abc123'
+        };
+
+        steve.processSaveResponse(response);
+
+        expect(mockT).toHaveBeenCalledWith(`typeLabel."${ customResource.type }"`, { count: 1 });
+        expect(mockT).toHaveBeenCalledWith('generic.autogeneratedCreated.title', { resource: 'CustomResourceDefinition' });
+        expect(mockT).toHaveBeenCalledWith('generic.autogeneratedCreated.message', { id: 'test-generated-abc123' });
+        expect(mockDispatch).toHaveBeenCalledWith(
+          'growl/success',
+          {
+            title:   'CustomResourceDefinition created',
+            message: 'Resource test-generated-abc123 created successfully',
+            timeout: 3000
+          },
+          { root: true }
+        );
+      });
+
+      it('should show growl notification for autogenerated names without namespace', () => {
+        const mockDispatch = jest.fn();
+        const mockT = jest.fn()
+          .mockReturnValueOnce('CustomResourceDefinition')
+          .mockReturnValueOnce('CustomResourceDefinition created')
+          .mockReturnValueOnce('Resource simple-id created successfully');
+        const mockRootGetters = { 'i18n/t': mockT };
+        const steve = new Steve(customResource, {
+          getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+          dispatch:    mockDispatch,
+          rootGetters: mockRootGetters,
+        });
+
+        const response = {
+          _status:  201,
+          metadata: { generateName: 'simple-' },
+          id:       'simple-id'
+        };
+
+        steve.processSaveResponse(response);
+
+        expect(mockT).toHaveBeenCalledWith(`typeLabel."${ customResource.type }"`, { count: 1 });
+        expect(mockT).toHaveBeenCalledWith('generic.autogeneratedCreated.title', { resource: 'CustomResourceDefinition' });
+        expect(mockT).toHaveBeenCalledWith('generic.autogeneratedCreated.message', { id: 'simple-id' });
+        expect(mockDispatch).toHaveBeenCalledWith(
+          'growl/success',
+          {
+            title:   'CustomResourceDefinition created',
+            message: 'Resource simple-id created successfully',
+            timeout: 3000
+          },
+          { root: true }
+        );
+      });
+
+      it('should not show growl notification for non-201 status', () => {
+        const mockDispatch = jest.fn();
+        const mockT = jest.fn();
+        const mockRootGetters = { 'i18n/t': mockT };
+        const steve = new Steve(customResource, {
+          getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+          dispatch:    mockDispatch,
+          rootGetters: mockRootGetters,
+        });
+
+        const response = {
+          _status:  200,
+          metadata: { generateName: 'test-generated-' },
+          id:       'default/test-generated-abc123'
+        };
+
+        steve.processSaveResponse(response);
+
+        expect(mockT).not.toHaveBeenCalled();
+        expect(mockDispatch).not.toHaveBeenCalledWith(
+          'growl/success',
+          expect.any(Object),
+          { root: true }
+        );
+      });
+
+      it('should not show growl notification without generateName', () => {
+        const mockDispatch = jest.fn();
+        const mockT = jest.fn();
+        const mockRootGetters = { 'i18n/t': mockT };
+        const steve = new Steve(customResource, {
+          getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+          dispatch:    mockDispatch,
+          rootGetters: mockRootGetters,
+        });
+
+        const response = {
+          _status: 201,
+          id:      'default/test-regular-name'
+        };
+
+        steve.processSaveResponse(response);
+
+        expect(mockT).not.toHaveBeenCalled();
+        expect(mockDispatch).not.toHaveBeenCalledWith(
+          'growl/success',
+          expect.any(Object),
+          { root: true }
+        );
+      });
+
+      it('should not show growl notification without id', () => {
+        const mockDispatch = jest.fn();
+        const mockT = jest.fn();
+        const mockRootGetters = { 'i18n/t': mockT };
+        const steve = new Steve(customResource, {
+          getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+          dispatch:    mockDispatch,
+          rootGetters: mockRootGetters,
+        });
+
+        const response = {
+          _status:  201,
+          metadata: { generateName: 'test-generated-' }
+        };
+
+        steve.processSaveResponse(response);
+
+        expect(mockT).not.toHaveBeenCalled();
+        expect(mockDispatch).not.toHaveBeenCalledWith(
+          'growl/success',
+          expect.any(Object),
+          { root: true }
+        );
+      });
+    });
   });
 });

package/plugins/steve/schema.d.ts

@@ -8,12 +8,17 @@ export interface SchemaAttributeColumn {
   type: string,
 }
 
+export type SchemaAttributeVerbs = 'get' | 'patch' | 'list' | 'update'
+
 export interface SchemaAttribute {
   columns: SchemaAttributeColumn[],
   namespaced: boolean
+  verbs: SchemaAttributeVerbs[]
 }
 
 /**
+ * Interface for a steve schema, represents raw json
+ *
  * At some point this will be properly typed, until then...
  */
 export interface Schema {

package/plugins/steve/steve-class.js

@@ -63,4 +63,23 @@ export default class SteveModel extends HybridModel {
   paginationEnabled() {
     return this.$getters['paginationEnabled'](this.type);
   }
+
+  processSaveResponse(res) {
+    super.processSaveResponse(res);
+
+    // Conditionally show the growl for autogenerated names
+    if (res && res._status === 201 && res.metadata?.generateName && res.id) {
+      // Split to remove the namespace if present (default/generated-xxx)
+      const nameOnly = res.id.split('/').pop();
+
+      // Avoid showing the growl without the ID.
+      if (nameOnly.length > 0) {
+        this.$dispatch('growl/success', {
+          title:   this.t('generic.autogeneratedCreated.title', { resource: this.t(`typeLabel."${ this.type }"`, { count: 1 }) }),
+          message: this.t('generic.autogeneratedCreated.message', { id: nameOnly }),
+          timeout: 3000
+        }, { root: true });
+      }
+    }
+  }
 }

package/plugins/steve/steve-pagination-utils.ts

@@ -764,7 +764,8 @@ export const PAGINATION_SETTINGS_STORE_DEFAULTS: PaginationSettingsStores = {
           { resource: CAPI.RANCHER_CLUSTER, context: ['side-bar'] },
           { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] },
           { resource: CATALOG.APP, context: ['branding'] },
-          SECRET
+          SECRET,
+          CAPI.MACHINE_SET
         ],
         generic: false,
       }

package/rancher-components/RcItemCard/RcItemCard.test.ts

@@ -124,7 +124,7 @@ describe('rcItemCard', () => {
       }
     });
 
-    const root = wrapper.get(`[data-testid="item-card-${ id }"]`);
+    const root = wrapper.get(`[data-testid="card-header-left"]`);
 
     expect(root.attributes('role')).toBe('button');
     expect(root.attributes('tabindex')).toBe('0');
@@ -152,7 +152,9 @@ describe('rcItemCard', () => {
       }
     });
 
-    await wrapper.trigger('keydown.enter');
+    const clickTarget = wrapper.find('.item-card-header-left');
+
+    await clickTarget.trigger('keydown.enter');
     expect(wrapper.emitted('card-click')).toBeTruthy();
   });