@rancher/shell 3.0.9-rc.6 → 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/IconOrSvg.vue

@@ -18,9 +18,9 @@
  */
 import { Solver } from '@shell/utils/svg-filter';
 import { colorToRgb, mapStandardColors, normalizeHex } from '@shell/utils/color';
+import { mapGetters } from 'vuex';
 
 const filterCache = {};
-const cssCache = {};
 
 const colors = {
   header: {
@@ -33,7 +33,7 @@ const colors = {
   },
   primary: {
     color:          '--on-tertiary',
-    hover:          '--link',
+    hover:          '--tertiary-hover-app-bar',
     colorFallback:  '--on-tertiary',
     hoverFallback:  '--primary-hover-text',
     active:         '--on-active',
@@ -63,7 +63,12 @@ export default {
   },
 
   data() {
-    return { className: '' };
+    return {
+      className:    '',
+      mainFilter:   null,
+      hoverFilter:  null,
+      activeFilter: null,
+    };
   },
 
   created() {
@@ -72,6 +77,18 @@ export default {
     }
   },
 
+  computed: {
+    ...mapGetters({
+      brand: 'management/brand',
+      theme: 'prefs/theme',
+    })
+  },
+
+  watch: {
+    brand: 'recomputeColor',
+    theme: 'recomputeColor',
+  },
+
   methods: {
     getComputedStyleFor(cssVar, fallback) {
       const value = window.getComputedStyle(document.body).getPropertyValue(cssVar).trim();
@@ -86,11 +103,11 @@ export default {
 
       const solver = new Solver(rgb);
       const res = solver.solve();
-      const filter = res?.filter;
+      const filterVal = res?.filterVal;
 
-      filterCache[cacheKey] = filter;
+      filterCache[cacheKey] = filterVal;
 
-      return filter;
+      return filterVal;
     },
 
     setColor() {
@@ -111,43 +128,23 @@ export default {
 
       const className = `svg-icon-${ uiColorStr }-${ hoverColorStr }`;
 
-      if (!cssCache[className]) {
-        const hoverFilter = this.resolveColorFilter(hoverColor, hoverColorRGB);
-        const mainFilter = this.resolveColorFilter(uiColor, uiColorRGB);
-        const activeFilter = this.resolveColorFilter(activeColor, activeColorRGB);
-
-        // Add stylesheet (added as global styles)
-        const styles = `
-          img.${ className } {
-            ${ mainFilter };
-          }
-          img.${ className }:hover {
-            ${ hoverFilter };
-          }
-          button:hover > img.${ className } {
-            ${ hoverFilter };
-          }
-          li:hover > img.${ className } {
-            ${ hoverFilter };
-          }
-          a.option:hover > img.${ className } {
-            ${ hoverFilter };
-          }
-          a.option.active-menu-link > img.${ className } {
-            ${ activeFilter };
-          }
-        `;
-
-        const styleSheet = document.createElement('style');
-
-        styleSheet.innerText = styles;
-        document.head.appendChild(styleSheet);
-
-        cssCache[className] = true;
-      }
+      this.hoverFilter = this.resolveColorFilter(hoverColor, hoverColorRGB);
+      this.mainFilter = this.resolveColorFilter(uiColor, uiColorRGB);
+      this.activeFilter = this.resolveColorFilter(activeColor, activeColorRGB);
 
       this['className'] = className;
-    }
+    },
+
+    recomputeColor() {
+      if (!this.src) {
+        return;
+      }
+
+      this.mainFilter = null;
+      this.hoverFilter = null;
+      this.activeFilter = null;
+      this.setColor();
+    },
   }
 };
 </script>
@@ -172,8 +169,30 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  .svg-icon {
+  img.svg-icon {
+    filter: v-bind(mainFilter);
+  }
+
+  button:hover > img.svg-icon,
+  li:hover > img.svg-icon {
+    filter: v-bind(hoverFilter);
+  }
+
+  .side-menu .category div a > img.svg-icon {
     height: 24px;
     width: 24px;
+    filter: v-bind(mainFilter);
+  }
+
+  .side-menu .category div a:hover > img.svg-icon {
+    filter: v-bind(hoverFilter);
+  }
+
+  .side-menu .category div a.active-menu-link > img.svg-icon {
+    filter: v-bind(activeFilter);
+
+    &:hover {
+      filter: v-bind(activeFilter);
+    }
   }
 </style>

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/SortableTable/index.vue

@@ -2099,13 +2099,13 @@ export default {
 
   $header-padding: 20px;
   .sub-header-row {
-    padding: 0 0 $header-padding / 2 0;
+    padding: 0 0 calc($header-padding / 2) 0;
   }
 
   .fixed-header-actions {
     padding: 0 0 $header-padding 0;
     &.with-sub-header {
-      padding: 0 0 $header-padding / 4 0;
+      padding: 0 0 calc($header-padding / 4) 0;
     }
 
     width: 100%;

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/components/form/BannerSettings.vue

@@ -9,7 +9,7 @@ import { ToggleSwitch } from '@components/Form/ToggleSwitch';
 import { TextAreaAutoGrow } from '@components/Form/TextArea';
 import { Banner } from '@components/Banner';
 
-export default ({
+export default {
   name: 'BannerSettings',
 
   props: {
@@ -112,7 +112,7 @@ export default ({
       return this.bannerType === 'bannerConsent';
     }
   }
-});
+};
 </script>
 
 <template>

package/components/form/NotificationSettings.vue

@@ -3,7 +3,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import { Checkbox } from '@components/Form/Checkbox';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 
-export default ({
+export default {
 
   name: 'NotificationSettings',
 
@@ -29,7 +29,7 @@ export default ({
     },
   },
 
-});
+};
 </script>
 
 <template>

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/product/manager.js

@@ -202,7 +202,6 @@ export function init(store) {
   ]);
 
   headers(EXT.KUBECONFIG, [
-    STATE,
     {
       name:      'clusters',
       labelKey:  'tableHeaders.clusters',

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 = {