@rancher/shell 3.0.9 → 3.0.10

package/assets/styles/base/_color.scss

@@ -29,3 +29,7 @@ $gray003: #FFF;
 $gray004: #6C6C76;
 $gray005: #4A4B52;
 $gray006: #1b1c21;
+$gray007: #161C24;
+$gray008: #262831;
+$gray009: #6C6C77;
+$gray010: #B6B6C3;

package/assets/styles/themes/_light.scss

@@ -571,17 +571,17 @@
     --rc-success: #{$green001};
     --rc-success-secondary: #{$green002};
 
-    --rc-warning: #{$yellow001};
-    --rc-warning-secondary: #{$yellow002};
+    --rc-warning: #{$yellow002};
+    --rc-warning-secondary: #{$yellow001};
 
     --rc-error: #{$red001};
     --rc-error-secondary: #{$red002};
 
-    --rc-unknown: #{$gray001};
-    --rc-unknown-secondary: #{$gray004};
+    --rc-unknown: #{$gray004};
+    --rc-unknown-secondary: #{$gray001};
 
-    --rc-none: #{$gray002};
-    --rc-none-secondary: #{$gray004};
+    --rc-none: #{$gray004};
+    --rc-none-secondary: #{$gray002};
 
     --rc-primary-hover: #{$blue003};
 

package/assets/styles/themes/_modern.scss

@@ -701,17 +701,17 @@ BODY, .theme-light {
   --rc-success: #{$green001};
   --rc-success-secondary: #{$green002};
 
-  --rc-warning: #{$yellow001};
-  --rc-warning-secondary: #{$yellow002};
+  --rc-warning: #{$yellow002};
+  --rc-warning-secondary: #{$yellow001};
 
   --rc-error: #{$red001};
   --rc-error-secondary: #{$red002};
 
-  --rc-unknown: #{$gray001};
-  --rc-unknown-secondary: #{$gray004};
+  --rc-unknown: #{$gray004};
+  --rc-unknown-secondary: #{$gray001};
 
-  --rc-none: #{$gray002};
-  --rc-none-secondary: #{$gray004};
+  --rc-none: #{$gray004};
+  --rc-none-secondary: #{$gray002};
 
   --rc-primary-hover: #{$blue003};
 
@@ -724,6 +724,10 @@ BODY, .theme-light {
   --rc-disabled-background: #{$gray001};
   --rc-disabled-text-color: #{$gray004};
 
+  --rc-section-background-primary: #{$lightest};
+  --rc-section-background-secondary: #{$lighter};
+  --rc-section-action-color: #{$gray009};
+
   --rc-image-bg: #{$lightest};
   --rc-image-color: #{$darkest};
 
@@ -1068,6 +1072,10 @@ BODY, .theme-dark {
   --rc-disabled-background: #{$gray005};
   --rc-disabled-text-color: #{$gray004};
 
+  --rc-section-background-primary: #{$gray007};
+  --rc-section-background-secondary: #{$gray008};
+  --rc-section-action-color: #{$gray010};
+
   --rc-image-bg: #{$lightest};
   --rc-image-color: #{$darkest};
 

package/assets/translations/en-us.yaml

@@ -30,6 +30,7 @@ generic:
   comma: ', '
   copy: Copy
   copyToClipboard: Copy text to Clipboard
+  copyValueToClipboard: 'Copy {value} to Clipboard'
   copiedToClipboard: Text copied to Clipboard
   create: Create
   created: Created
@@ -438,7 +439,6 @@ accountAndKeys:
     notAllowed: You do not have permission to manage API Keys
     apiEndpoint: "API Endpoint:"
     copyApiEnpoint: Copy API Endpoint to clipboard
-    normanTokenDeprecation: The API Keys feature is being migrated to a new API. Any existing API Keys from the legacy API will continue to work, but new API Keys will be created using the new API.
     add:
       description:
         label: Description
@@ -464,9 +464,7 @@ accountAndKeys:
           month: Months
           year: Years
       scope: Scope
-      userPrincipal: User Principal
       noScope: No Scope
-      enabled: Token enabled
     info:
       accessKey: Access Key
       secretKey: Secret Key
@@ -475,7 +473,7 @@ accountAndKeys:
       keyCreated: A new API Key has been created
       bearerTokenTip: "Access Key and Secret Key can be sent as the username and password for HTTP Basic auth to authorize requests. You can also combine them to use as a Bearer token:"
       ttlLimitedWarning: The Expiry time for this API Key was reduced due to system configuration
-      expiryOptionsWithNever: Since "auth-token-max-ttl-minutes" is set to <= 0, the API Key will not expire unless the "Automatically expire" option is set to "Custom" and a custom expiry time is set.
+
 addClusterMemberDialog:
   title: Add Cluster Member
 
@@ -6857,7 +6855,6 @@ storageClass:
       tooltip: By default the default storage class on the host Harvester cluster is used.
 
 tableHeaders:
-  isLegacy: Legacy
   assuredConcurrencyShares: Assured Concurrency Shares
   autoscaler: Autoscaler
   accessKey: Access Key

package/components/CopyToClipboard.vue

@@ -38,7 +38,35 @@ export default {
     success-label="Copied!"
     error-label="Error Copying"
     v-bind="$attrs"
+    :success-color="$attrs['action-color'] || 'role-primary'"
+    :waiting-color="$attrs['action-color'] || 'role-primary'"
     :delay="2000"
     @click="clicked"
   />
 </template>
+
+<style lang="scss" scoped>
+.icon-btn {
+  min-height: 24px;
+  min-width: 24px;
+  justify-content: center;
+}
+
+.bg-transparent {
+  &:active {
+    background-color: var(--primary-keyboard-focus);
+    color: var(--primary-text);
+  }
+
+  &:focus-visible {
+    @include focus-outline;
+  }
+}
+
+.role-primary {
+  &:active {
+    background-color: var(--primary-keyboard-focus);
+    color: var(--primary-text);
+  }
+}
+</style>

package/components/CopyToClipboardText.vue

@@ -75,6 +75,10 @@ export default {
       }
     }
 
+    &:active {
+      color: var(--primary-keyboard-focus);
+    }
+
     &.copied {
       pointer-events: none;
       color: var(--success);

package/components/CruResource.vue

@@ -782,6 +782,7 @@ export default {
         </div>
         <slot name="form-footer">
           <CruResourceFooter
+            v-if="!isView"
             class="cru__footer"
             :mode="mode"
             :is-form="showAsForm"

package/components/GlobalRoleBindings.vue

@@ -49,10 +49,6 @@ export default {
     userId: {
       type:    String,
       default: ''
-    },
-    watchOverride: {
-      type:    Boolean,
-      default: true,
     }
   },
   async fetch() {
@@ -142,7 +138,7 @@ export default {
       this.update();
     },
     userId(userId, oldUserId) {
-      if (userId === oldUserId || this.watchOverride === true) {
+      if (userId === oldUserId) {
         return;
       }
       this.update();

package/components/ResourceDetail/index.vue

@@ -403,25 +403,6 @@ export default {
       // Remove id? How does subtype get in (cluster/node)
       this.detailComponent = this.$store.getters['type-map/importDetail'](detailResource, id);
       this.editComponent = this.$store.getters['type-map/importEdit'](editResource, id);
-    },
-    /**
-     * Sets the mode and initializes the resource components.
-     *
-     * This method sets the mode of the component and configures the resource
-     * components based on the provided user and resource.
-     *
-     * @param {Object} payload - An object containing the mode, user, and
-     * resource properties.
-     * @param {string} payload.mode - The mode to set.
-     * @param {Object} payload.user - The user object containing user-specific
-     * information.
-     * @param {string} payload.resource - The resource string to use for
-     * initialization.
-     */
-    setMode({ mode, userId, resource }) {
-      this.mode = mode;
-      this.value.id = userId;
-      this.configureResource(userId, resource);
     }
   }
 };
@@ -444,7 +425,6 @@ export default {
     :class="{'flex-content': flexContent}"
     :resource-errors="errors"
     @update:value="$emit('input', $event)"
-    @update:mode="setMode"
     @set-subtype="setSubtype"
   />
   <div v-else>
@@ -514,7 +494,6 @@ export default {
       :real-mode="realMode"
       :class="{'flex-content': flexContent}"
       @update:value="$emit('input', $event)"
-      @update:mode="setMode"
       @set-subtype="setSubtype"
     />
 

package/components/__tests__/CruResource.test.ts

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import CruResource from '@shell/components/CruResource.vue';
-import { _EDIT, _YAML } from '@shell/config/query-params';
+import { _CREATE, _EDIT, _VIEW, _YAML } from '@shell/config/query-params';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 
 describe('component: CruResource', () => {
@@ -171,6 +171,40 @@ describe('component: CruResource', () => {
     expect(event.preventDefault).toHaveBeenCalledWith();
   });
 
+  it.each([
+    [_EDIT, true],
+    [_CREATE, true],
+    [_VIEW, false],
+  ])('should render CruResourceFooter when mode is %s: %s', (mode: string, shouldRender: boolean) => {
+    const wrapper = mount(CruResource, {
+      props: {
+        canYaml:  false,
+        mode,
+        resource: {}
+      },
+      global: {
+        mocks: {
+          $store: {
+            getters: {
+              currentStore:              () => 'current_store',
+              'current_store/schemaFor': jest.fn(),
+              'current_store/all':       jest.fn(),
+              'i18n/t':                  jest.fn(),
+              'i18n/exists':             jest.fn(),
+            },
+            dispatch: jest.fn(),
+          },
+          $route:  { query: { AS: _YAML } },
+          $router: { applyQuery: jest.fn() },
+        },
+      }
+    });
+
+    const footer = wrapper.find('.cru-resource-footer');
+
+    expect(footer.exists()).toBe(shouldRender);
+  });
+
   it('should not prevent default events on keypress Enter', async() => {
     const event = { preventDefault: jest.fn() };
     const wrapper = mount(CruResource, {

package/composables/useIsNewDetailPageEnabled.test.ts

@@ -0,0 +1,98 @@
+import { useIsNewDetailPageEnabled } from '@shell/composables/useIsNewDetailPageEnabled';
+
+const mockStore: any = { getters: {} };
+const mockRoute: any = { query: {} };
+
+jest.mock('vuex', () => ({ useStore: () => mockStore }));
+jest.mock('vue-router', () => ({ useRoute: () => mockRoute }));
+
+const mockGetVersionInfo = jest.fn(() => ({ fullVersion: '2.12.0' }));
+
+jest.mock('@shell/utils/version', () => ({ getVersionInfo: (...args: any[]) => mockGetVersionInfo(...args) }));
+
+describe('useIsNewDetailPageEnabled', () => {
+  beforeEach(() => {
+    mockRoute.query = {};
+    mockGetVersionInfo.mockReturnValue({ fullVersion: '2.12.0' });
+  });
+
+  describe('version gating', () => {
+    it('should return false when version is below 2.12.0', () => {
+      mockGetVersionInfo.mockReturnValue({ fullVersion: '2.11.9' });
+      const result = useIsNewDetailPageEnabled();
+
+      expect(result.value).toBe(false);
+    });
+
+    it('should return false when version is 2.10.0', () => {
+      mockGetVersionInfo.mockReturnValue({ fullVersion: '2.10.0' });
+      const result = useIsNewDetailPageEnabled();
+
+      expect(result.value).toBe(false);
+    });
+
+    it('should return true when version is exactly 2.12.0 and no legacy query', () => {
+      mockGetVersionInfo.mockReturnValue({ fullVersion: '2.12.0' });
+      const result = useIsNewDetailPageEnabled();
+
+      expect(result.value).toBe(true);
+    });
+
+    it('should return true when version is above 2.12.0', () => {
+      mockGetVersionInfo.mockReturnValue({ fullVersion: '2.13.0' });
+      const result = useIsNewDetailPageEnabled();
+
+      expect(result.value).toBe(true);
+    });
+
+    it('should return false when version is undefined', () => {
+      mockGetVersionInfo.mockReturnValue({ fullVersion: undefined });
+      const result = useIsNewDetailPageEnabled();
+
+      expect(result.value).toBe(false);
+    });
+
+    it('should return false when version is null', () => {
+      mockGetVersionInfo.mockReturnValue({ fullVersion: null });
+      const result = useIsNewDetailPageEnabled();
+
+      expect(result.value).toBe(false);
+    });
+
+    it('should handle pre-release version strings', () => {
+      mockGetVersionInfo.mockReturnValue({ fullVersion: 'v2.12.1-rc1' });
+      const result = useIsNewDetailPageEnabled();
+
+      expect(result.value).toBe(true);
+    });
+  });
+
+  describe('legacy query param (with version >= 2.12.0)', () => {
+    it('should return true when no legacy query param is present', () => {
+      const result = useIsNewDetailPageEnabled();
+
+      expect(result.value).toBe(true);
+    });
+
+    it('should return false when legacy query param is "true"', () => {
+      mockRoute.query = { legacy: 'true' };
+      const result = useIsNewDetailPageEnabled();
+
+      expect(result.value).toBe(false);
+    });
+
+    it('should return true when legacy query param is "false"', () => {
+      mockRoute.query = { legacy: 'false' };
+      const result = useIsNewDetailPageEnabled();
+
+      expect(result.value).toBe(true);
+    });
+
+    it('should return true when legacy query param has an unexpected value', () => {
+      mockRoute.query = { legacy: 'something' };
+      const result = useIsNewDetailPageEnabled();
+
+      expect(result.value).toBe(true);
+    });
+  });
+});

package/composables/useIsNewDetailPageEnabled.ts

@@ -1,6 +1,9 @@
 import { useRoute } from 'vue-router';
 import { LEGACY } from '@shell/config/query-params';
 import { computed } from 'vue';
+import { getVersionInfo } from '@shell/utils/version';
+import semver from 'semver';
+import { useStore } from 'vuex';
 
 const enabledByDefault = true;
 
@@ -8,6 +11,15 @@ export const useIsNewDetailPageEnabled = () => {
   const route = useRoute();
 
   return computed(() => {
+    const store = useStore();
+    const { fullVersion } = getVersionInfo(store);
+
+    const coerced = semver.coerce(fullVersion) || { version: '0.0.0' };
+
+    if (!semver.gte(coerced.version, '2.12.0')) {
+      return false;
+    }
+
     if (enabledByDefault) {
       return route?.query?.[LEGACY] !== 'true';
     }

package/config/product/explorer.js

@@ -19,7 +19,7 @@ import {
   USER_ID, USERNAME, USER_DISPLAY_NAME, USER_PROVIDER, USER_LAST_LOGIN, USER_DISABLED_IN, USER_DELETED_IN, WORKLOAD_ENDPOINTS, STORAGE_CLASS_DEFAULT,
   STORAGE_CLASS_PROVISIONER, PERSISTENT_VOLUME_SOURCE,
   HPA_REFERENCE, MIN_REPLICA, MAX_REPLICA, CURRENT_REPLICA,
-  DESCRIPTION, SUB_TYPE, PERSISTENT_VOLUME_CLAIM, RECLAIM_POLICY, PV_REASON, WORKLOAD_HEALTH_SCALE, POD_RESTARTS,
+  ACCESS_KEY, DESCRIPTION, EXPIRES, EXPIRY_STATE, LAST_USED, SUB_TYPE, AGE_NORMAN, SCOPE_NORMAN, PERSISTENT_VOLUME_CLAIM, RECLAIM_POLICY, PV_REASON, WORKLOAD_HEALTH_SCALE, POD_RESTARTS,
   DURATION, MESSAGE, REASON, EVENT_TYPE, OBJECT, ROLE, ROLES, VERSION, INTERNAL_EXTERNAL_IP, KUBE_NODE_OS, CPU, RAM, SECRET_DATA,
   EVENT_LAST_SEEN_TIME,
   EVENT_FIRST_SEEN_TIME,
@@ -546,6 +546,16 @@ export function init(store) {
     AGE
   ]);
 
+  headers(NORMAN.TOKEN, [
+    EXPIRY_STATE,
+    ACCESS_KEY,
+    DESCRIPTION,
+    SCOPE_NORMAN,
+    LAST_USED,
+    EXPIRES,
+    AGE_NORMAN
+  ]);
+
   virtualType({
     label:      store.getters['i18n/t']('clusterIndexPage.header'),
     group:      'Root',

package/config/table-headers.js

@@ -1033,15 +1033,6 @@ export const SCOPE_NORMAN = {
   sort:  ['clusterId'],
 };
 
-export const NORMAN_KEY_DEPRECATION = {
-  name:        'isNormanKeyDeprecated',
-  labelKey:    'tableHeaders.isLegacy',
-  value:       (row) => row.isDeprecated ? 'True' : undefined,
-  sort:        'isDeprecated',
-  align:       'left',
-  dashIfEmpty: true,
-};
-
 export const EXPIRES = {
   name:      'expires',
   value:     'expiresAt',

package/config/types.js

@@ -269,7 +269,6 @@ export const EXT = {
   GROUP_MEMBERSHIP_REFRESH_REQUESTS: 'ext.cattle.io.groupmembershiprefreshrequest',
   PASSWORD_CHANGE_REQUESTS:          'ext.cattle.io.passwordchangerequest',
   KUBECONFIG:                        'ext.cattle.io.kubeconfig',
-  TOKEN:                             'ext.cattle.io.token',
 };
 
 export const CAPI = {

package/edit/auth/github-app-steps.vue

@@ -49,6 +49,7 @@ defineProps<{
             <CopyToClipboard
               label-as="tooltip"
               :text="tArgs.serverUrl"
+              :aria-label="t('generic.copyValueToClipboard', { value: tArgs.serverUrl })"
               class="icon-btn"
               action-color="bg-transparent"
             />
@@ -67,6 +68,7 @@ defineProps<{
             <CopyToClipboard
               :text="t(`authConfig.${name}.form.callback.value`, tArgs, true)"
               label-as="tooltip"
+              :aria-label="t('generic.copyValueToClipboard', { value: t(`authConfig.${name}.form.callback.value`, tArgs, true) })"
               class="icon-btn"
               action-color="bg-transparent"
             />

package/edit/auth/github-steps.vue

@@ -40,6 +40,7 @@ defineProps<{
             <b>{{ t(`authConfig.${name}.form.homepage.label`) }}</b>: {{ tArgs.serverUrl }} <CopyToClipboard
               label-as="tooltip"
               :text="tArgs.serverUrl"
+              :aria-label="t('generic.copyValueToClipboard', { value: tArgs.serverUrl })"
               class="icon-btn"
               action-color="bg-transparent"
             />
@@ -49,6 +50,7 @@ defineProps<{
             <b>{{ t(`authConfig.${name}.form.callback.label`) }}</b>: {{ tArgs.serverUrl }} <CopyToClipboard
               :text="tArgs.serverUrl"
               label-as="tooltip"
+              :aria-label="t('generic.copyValueToClipboard', { value: tArgs.serverUrl })"
               class="icon-btn"
               action-color="bg-transparent"
             />

package/edit/management.cattle.io.user.vue

@@ -16,8 +16,6 @@ export default {
     ChangePassword, GlobalRoleBindings, CruResource, LabeledInput, Loading
   },
 
-  emits: ['update:mode'],
-
   mixins: [
     CreateEditView
   ],
@@ -42,8 +40,7 @@ export default {
         password:     false,
         roles:        !showGlobalRoles,
         rolesChanged: false,
-      },
-      watchOverride: false,
+      }
     };
   },
 
@@ -110,10 +107,20 @@ export default {
         if (this.isCreate) {
           const user = await this.createUser();
 
-          await this.updateRoles(user.id);
+          await this.createSecret(user);
+          await this.updateRoles(user);
+
+          // Show success notification only after ALL operations complete
+          // this is a "clone" of steve-class "processSaveResponse" toast/growl
+          this.$store.dispatch('growl/success', {
+            title:   this.t('generic.autogeneratedCreated.title', { resource: user.kind }),
+            message: this.t('generic.autogeneratedCreated.message', { id: user.username, resource: user.kind }),
+            timeout: 3000
+          }, { root: true });
         } else {
-          await this.editUser();
-          await this.updateRoles();
+          const user = await this.editUser();
+
+          await this.updateRoles(user);
         }
 
         this.$router.replace({ name: this.doneRoute });
@@ -139,21 +146,10 @@ export default {
         username:           this.form.username
       });
 
-      const userSaved = await user.save();
-
-      if (this.form.password.password) {
-        // create secret to hold user password
-        const secret = await this.$store.dispatch('management/create', {
-          type:     SECRET,
-          metadata: {
-            namespace: 'cattle-local-user-passwords',
-            name:      userSaved.id
-          },
-          data: { password: base64Encode(this.form.password.password) }
-        });
-
-        await secret.save();
-      }
+      const userSaved = await user.save({
+        // Don't show a success toast until the secret and GRB are also created
+        suppressSuccessToast: true,
+      });
 
       return userSaved;
     },
@@ -178,27 +174,57 @@ export default {
         await wait(5000);
       }
 
-      this.value.save();
+      const user = this.value.save();
+
+      return user;
     },
 
-    async updateRoles(userId) {
+    async createSecret(user) {
+      if (this.form.password.password) {
+        try {
+        // create secret to hold user password
+          const secret = await this.$store.dispatch('management/create', {
+            type:     SECRET,
+            metadata: {
+              namespace: 'cattle-local-user-passwords',
+              name:      user.id
+            },
+            data: { password: base64Encode(this.form.password.password) }
+          });
+
+          await secret.save();
+        } catch (err) {
+          if (this.isCreate) {
+            try {
+              // If secret creation fails, attempt to clean up the user to maintain consistency
+              await user.remove();
+            } catch (cleanupErr) {
+              // Log cleanup error but prioritize original error for user feedback
+              console.error('Failed to clean up user after secret creation failure:', cleanupErr); // eslint-disable-line no-console
+            }
+          }
+
+          throw err;
+        }
+      }
+    },
+
+    async updateRoles(user) {
       if (!this.$refs.grb) {
         return;
       }
 
       try {
-        await this.$refs.grb.save(userId);
+        await this.$refs.grb.save(user.id);
       } catch (err) {
         if (this.isCreate) {
-          this.watchOverride = true;
-          this.$emit(
-            'update:mode',
-            {
-              userId,
-              mode:     _EDIT,
-              resource: 'management.cattle.io.user',
-            }
-          );
+          try {
+            // If GRB creation fails, clean up the user to maintain consistency
+            await user.remove();
+          } catch (cleanupErr) {
+            // Log cleanup error but prioritize original error for user feedback
+            console.error('Failed to clean up user after GRB creation failure:', cleanupErr); // eslint-disable-line no-console
+          }
         }
         throw err;
       }
@@ -274,7 +300,6 @@ export default {
         :user-id="value.id || liveValue.id"
         :mode="mode"
         :real-mode="realMode"
-        :watch-override="watchOverride"
         type="user"
         @hasChanges="validation.rolesChanged = $event"
         @canLogIn="validation.roles = $event"