@rancher/shell 3.0.12-rc.3 → 3.0.12-rc.4

package/components/nav/__tests__/TopLevelMenu.test.ts

@@ -720,7 +720,7 @@ describe('topLevelMenu', () => {
         const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
           global: {
             mocks: {
-              $route: {},
+              $route: { name: 'c-cluster-explorer', params: { cluster: 'local', product: 'explorer' } },
               $store: {
                 ...generateStore([
                   {
@@ -823,7 +823,7 @@ describe('topLevelMenu', () => {
         const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
           global: {
             mocks: {
-              $route: {},
+              $route: { name: 'c-cluster-explorer', params: { cluster: 'local', product: 'explorer' } },
               $store: store
             },
             stubs: ['BrandImage', 'router-link'],
@@ -836,5 +836,123 @@ describe('topLevelMenu', () => {
         expect(wrapper.vm.routeComboActive).toBe(true);
       });
     });
+
+    describe('handleKeyComboClick', () => {
+      it('should not toggle routeCombo when route is a non-explorer c-cluster route', async() => {
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route:  { name: 'c-cluster-fleet', params: { cluster: 'local', product: 'fleet' } },
+              $router: { push: jest.fn() },
+              $store:  { ...generateStore([]) }
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+
+        expect(wrapper.vm.routeCombo).toBe(false);
+        wrapper.vm.handleKeyComboClick();
+        expect(wrapper.vm.routeCombo).toBe(false);
+      });
+
+      it('should toggle routeCombo when route is cluster explorer', async() => {
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route:  { name: 'c-cluster-explorer', params: { cluster: 'local', product: 'explorer' } },
+              $router: { push: jest.fn() },
+              $store:  { ...generateStore([]) }
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+
+        expect(wrapper.vm.routeCombo).toBe(false);
+        wrapper.vm.handleKeyComboClick();
+        expect(wrapper.vm.routeCombo).toBe(true);
+      });
+    });
+
+    describe('clusterMenuClick', () => {
+      it('should navigate normally on non-explorer c-cluster route even with routeCombo set', async() => {
+        const mockPush = jest.fn();
+        const clusterRoute = { name: 'c-cluster-explorer' };
+        const clusters = [
+          {
+            nameDisplay: 'cluster1',
+            id:          'an-id1',
+            mgmt:        { id: 'an-id1' },
+            canExplore:  true,
+            clusterRoute
+          },
+          {
+            nameDisplay: 'cluster2',
+            id:          'an-id2',
+            mgmt:        { id: 'an-id2' },
+            canExplore:  true,
+            clusterRoute
+          }
+        ];
+
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route:  { name: 'c-cluster-fleet', params: { cluster: 'local', product: 'fleet' } },
+              $router: { push: mockPush },
+              $store:  { ...generateStore(clusters) }
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+        await wrapper.setData({ routeCombo: true });
+
+        expect(wrapper.vm.routeComboActive).toBe(false);
+
+        const ev = { preventDefault: jest.fn() };
+
+        wrapper.vm.clusterMenuClick(ev, clusters[1]);
+
+        expect(mockPush).toHaveBeenCalledWith(clusterRoute);
+      });
+
+      it('should navigate to cluster route when routeComboActive is false', async() => {
+        const mockPush = jest.fn();
+        const clusterRoute = { name: 'c-cluster-explorer' };
+        const clusters = [
+          {
+            nameDisplay: 'cluster1',
+            id:          'an-id1',
+            mgmt:        { id: 'an-id1' },
+            canExplore:  true,
+            clusterRoute
+          }
+        ];
+
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route:  { name: 'fleet-management', params: {} },
+              $router: { push: mockPush },
+              $store:  { ...generateStore(clusters) }
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+
+        const ev = { preventDefault: jest.fn() };
+
+        wrapper.vm.clusterMenuClick(ev, clusters[0]);
+
+        expect(mockPush).toHaveBeenCalledWith(clusterRoute);
+      });
+    });
   });
 });

package/components/templates/default.vue

@@ -24,6 +24,7 @@ import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import { getClusterFromRoute, getProductFromRoute } from '@shell/utils/router';
 import SideNav from '@shell/components/SideNav';
 import { Layout } from '@shell/types/window-manager';
+import { RcButton } from '@components/RcButton';
 
 const SET_LOGIN_ACTION = 'set-as-login';
 
@@ -42,6 +43,7 @@ export default {
     AwsComplianceBanner,
     Inactivity,
     SideNav,
+    RcButton,
   },
 
   mixins: [PageHeaderActions, Brand, BrowserTabVisibility],
@@ -162,10 +164,13 @@ export default {
 
 <template>
   <div class="dashboard-root">
-    <a
-      href="#main-content"
-      class="skip-to-content btn role-primary"
-    >{{ t('nav.skipToContent') }}</a>
+    <rc-button
+      size="large"
+      class="skip-to-content"
+      :to="{ hash: '#main-content' }"
+    >
+      {{ t('nav.skipToContent') }}
+    </rc-button>
     <FixedBanner :header="true" />
     <AwsComplianceBanner v-if="managementReady" />
     <div

package/components/templates/home.vue

@@ -12,6 +12,7 @@ import Inactivity from '@shell/components/Inactivity';
 import { mapState, mapGetters } from 'vuex';
 import PromptModal from '@shell/components/PromptModal';
 import { Layout } from '@shell/types/window-manager';
+import { RcButton } from '@components/RcButton';
 
 export default {
 
@@ -24,6 +25,7 @@ export default {
     AwsComplianceBanner,
     Inactivity,
     PromptModal,
+    RcButton
   },
 
   mixins: [Brand, BrowserTabVisibility],
@@ -62,10 +64,13 @@ export default {
 
 <template>
   <div class="dashboard-root">
-    <a
-      href="#main-content"
-      class="skip-to-content btn role-primary"
-    >{{ t('nav.skipToContent') }}</a>
+    <rc-button
+      size="large"
+      class="skip-to-content"
+      :to="{ hash: '#main-content' }"
+    >
+      {{ t('nav.skipToContent') }}
+    </rc-button>
     <FixedBanner :header="true" />
     <Inactivity />
     <AwsComplianceBanner />

package/components/templates/plain.vue

@@ -15,6 +15,7 @@ import Inactivity from '@shell/components/Inactivity';
 import { mapGetters } from 'vuex';
 import PromptModal from '@shell/components/PromptModal';
 import { Layout } from '@shell/types/window-manager';
+import { RcButton } from '@components/RcButton';
 
 export default {
 
@@ -30,6 +31,7 @@ export default {
     SlideInPanelManager,
     AwsComplianceBanner,
     Inactivity,
+    RcButton
   },
 
   mixins: [Brand, BrowserTabVisibility],
@@ -66,10 +68,13 @@ export default {
 
 <template>
   <div class="dashboard-root">
-    <a
-      href="#main-content"
-      class="skip-to-content btn role-primary"
-    >{{ t('nav.skipToContent') }}</a>
+    <rc-button
+      size="large"
+      class="skip-to-content"
+      :to="{ hash: '#main-content' }"
+    >
+      {{ t('nav.skipToContent') }}
+    </rc-button>
     <FixedBanner :header="true" />
     <AwsComplianceBanner />
 

package/composables/useHelmOpResources.test.ts

@@ -0,0 +1,56 @@
+import { ref } from 'vue';
+import { useHelmOpResources } from '@shell/composables/useHelmOpResources';
+
+describe('useHelmOpResources', () => {
+  let emit: jest.Mock;
+
+  beforeEach(() => {
+    emit = jest.fn();
+  });
+
+  describe('updateCorrectDrift', () => {
+    it('should emit update:correct-drift with the given value', () => {
+      const { updateCorrectDrift } = useHelmOpResources(emit, ref([]));
+
+      updateCorrectDrift(true);
+
+      expect(emit).toHaveBeenCalledWith('update:correct-drift', true);
+    });
+  });
+
+  describe('updateSecrets', () => {
+    it('should emit update:downstream-resources with kind Secret', () => {
+      const { updateSecrets } = useHelmOpResources(emit, ref([]));
+
+      updateSecrets(['secret-a', 'secret-b']);
+
+      expect(emit).toHaveBeenCalledWith('update:downstream-resources', { kind: 'Secret', list: ['secret-a', 'secret-b'] });
+    });
+
+    it('should append locked secrets that are not already in the list', () => {
+      const { updateSecrets } = useHelmOpResources(emit, ref(['locked-secret']));
+
+      updateSecrets(['secret-a']);
+
+      expect(emit).toHaveBeenCalledWith('update:downstream-resources', { kind: 'Secret', list: ['secret-a', 'locked-secret'] });
+    });
+
+    it('should not duplicate locked secrets already in the list', () => {
+      const { updateSecrets } = useHelmOpResources(emit, ref(['secret-a']));
+
+      updateSecrets(['secret-a', 'secret-b']);
+
+      expect(emit).toHaveBeenCalledWith('update:downstream-resources', { kind: 'Secret', list: ['secret-a', 'secret-b'] });
+    });
+  });
+
+  describe('updateDownstreamResources', () => {
+    it('should emit update:downstream-resources with the given kind and list', () => {
+      const { updateDownstreamResources } = useHelmOpResources(emit, ref([]));
+
+      updateDownstreamResources('ConfigMap', ['cm-1']);
+
+      expect(emit).toHaveBeenCalledWith('update:downstream-resources', { kind: 'ConfigMap', list: ['cm-1'] });
+    });
+  });
+});

package/composables/useHelmOpResources.ts

@@ -0,0 +1,32 @@
+import { type Ref, toValue } from 'vue';
+
+type Emit = {
+  (e: 'update:correct-drift', value: boolean): void;
+  (e: 'update:downstream-resources', value: { kind: string; list: string[] }): void;
+};
+
+export function useHelmOpResources(emit: Emit, lockedSecrets: Ref<string[]> | (() => string[])) {
+  const updateCorrectDrift = (value: boolean) => {
+    emit('update:correct-drift', value);
+  };
+
+  const updateSecrets = (list: string[]) => {
+    const newList = [...list];
+
+    for (const locked of toValue(lockedSecrets)) {
+      if (!newList.includes(locked)) {
+        newList.push(locked);
+      }
+    }
+
+    emit('update:downstream-resources', { kind: 'Secret', list: newList });
+  };
+
+  const updateDownstreamResources = (kind: string, list: string[]) => {
+    emit('update:downstream-resources', { kind, list });
+  };
+
+  return {
+    updateCorrectDrift, updateSecrets, updateDownstreamResources
+  };
+}

package/composables/useStateColor.test.ts

@@ -0,0 +1,325 @@
+import { useStateColor } from '@shell/composables/useStateColor';
+import type { StateSummaryEntry } from '@shell/composables/useStateColor';
+import { flushPromises } from '@vue/test-utils';
+
+const mockGetters: Record<string, any> = {};
+const mockDispatch = jest.fn();
+
+jest.mock('vuex', () => ({
+  useStore: () => ({
+    getters: new Proxy(mockGetters, {
+      get(target, prop: string) {
+        return target[prop];
+      },
+    }),
+    dispatch: mockDispatch,
+  }),
+}));
+
+jest.mock('@shell/plugins/steve/steve-pagination-utils', () => ({
+  __esModule: true,
+  default:    { createParamsForPagination: jest.fn(() => 'page=1&pagesize=1') },
+}));
+
+jest.mock('@shell/plugins/steve/projectAndNamespaceFiltering.utils', () => ({
+  __esModule: true,
+  default:    { createParam: jest.fn(() => '') },
+}));
+
+describe('composable: useStateColor', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    Object.keys(mockGetters).forEach((key) => delete mockGetters[key]);
+  });
+
+  describe('toStateColor', () => {
+    const testType = 'apps.deployment';
+
+    it.each([
+      ['running', 'success'],
+      ['active', 'success'],
+      ['completed', 'success'],
+      ['error', 'error'],
+      ['failed', 'error'],
+      ['stopped', 'error'],
+      ['warning', 'warning'],
+      ['initializing', 'warning'],
+      ['pending', 'info'],
+      ['waiting', 'info'],
+      ['creating', 'info'],
+    ])('should return %s color for known state "%s"', (state, expectedColor) => {
+      const { toStateColor } = useStateColor();
+
+      expect(toStateColor(state, testType)).toStrictEqual(expectedColor);
+    });
+
+    it('should return "disabled" for state with "darker" color', () => {
+      const { toStateColor } = useStateColor();
+
+      expect(toStateColor('off', testType)).toStrictEqual('disabled');
+    });
+
+    it('should return "warning" for unknown states', () => {
+      const { toStateColor } = useStateColor();
+
+      expect(toStateColor('unknown-state', testType)).toStrictEqual('warning');
+    });
+
+    it('should be case-insensitive', () => {
+      const { toStateColor } = useStateColor();
+
+      expect(toStateColor('Running', testType)).toStrictEqual(toStateColor('running', testType));
+      expect(toStateColor('ERROR', testType)).toStrictEqual(toStateColor('error', testType));
+    });
+
+    it('should handle empty string as active state', () => {
+      const { toStateColor } = useStateColor();
+
+      expect(toStateColor('', testType)).toStrictEqual('success');
+    });
+
+    it('should cache results across calls', () => {
+      const { toStateColor } = useStateColor();
+
+      const first = toStateColor('running', testType);
+      const second = toStateColor('running', testType);
+
+      expect(first).toStrictEqual(second);
+      expect(first).toStrictEqual('success');
+    });
+  });
+
+  describe('resolveStateColors', () => {
+    const schema = { links: { collection: '/k8s/clusters/local/v1/pods' } };
+
+    beforeEach(() => {
+      mockGetters['cluster/schemaFor'] = () => schema;
+      mockGetters['cluster/urlFor'] = () => schema.links.collection;
+    });
+
+    it('should not make requests when all states are already cached', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch.mockResolvedValueOnce({
+        data: [{
+          metadata: {
+            state: {
+              name: 'running', error: false, transitioning: false
+            }
+          }
+        }]
+      });
+      toStateColor('running', 'pod');
+      await flushPromises();
+
+      mockDispatch.mockClear();
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { running: { total: 5, namespace: { default: 5 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+
+    it('should fetch a resource to resolve unknown state colors', async() => {
+      const { resolveStateColors } = useStateColor();
+
+      mockDispatch.mockResolvedValueOnce({
+        data: [{
+          metadata: {
+            state: {
+              name: 'customState', error: true, transitioning: false
+            }
+          }
+        }],
+      });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { customState: { total: 3, namespace: { default: 3 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(mockDispatch).toHaveBeenCalledWith('cluster/request', { url: `${ schema.links.collection }?page=1&pagesize=1` });
+    });
+
+    it('should resolve error states from resource metadata', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch.mockResolvedValueOnce({
+        data: [{
+          metadata: {
+            state: {
+              name: 'init:Error', error: true, transitioning: false
+            }
+          }
+        }],
+      });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { 'init:Error': { total: 1, namespace: { default: 1 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('init:Error', 'pod')).toStrictEqual('error');
+    });
+
+    it('should resolve transitioning states as info', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch.mockResolvedValueOnce({
+        data: [{
+          metadata: {
+            state: {
+              name: 'init:0/1', error: false, transitioning: true
+            }
+          }
+        }],
+      });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { 'init:0/1': { total: 2, namespace: { default: 2 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('init:0/1', 'pod')).toStrictEqual('info');
+    });
+
+    it('should skip entries with null summary', async() => {
+      const { resolveStateColors } = useStateColor();
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: null,
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+
+    it('should skip summary properties that are not metadata.state.name', async() => {
+      const { resolveStateColors } = useStateColor();
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.namespace', counts: { default: { total: 5, namespace: { default: 5 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+
+    it('should handle API errors gracefully and fall back to default color', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch.mockRejectedValueOnce(new Error('network error'));
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { networkFailState: { total: 1, namespace: { default: 1 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('networkFailState', 'pod')).toStrictEqual('warning');
+    });
+
+    it('should handle response with no resource data', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch.mockResolvedValueOnce({ data: [] });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { emptyResult: { total: 1, namespace: { default: 1 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('emptyResult', 'pod')).toStrictEqual('warning');
+    });
+
+    it('should handle resource without metadata.state', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch.mockResolvedValueOnce({ data: [{ metadata: {} }] });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { noStateField: { total: 1, namespace: { default: 1 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('noStateField', 'pod')).toStrictEqual('warning');
+    });
+
+    it('should use schema.links.collection for the request URL', async() => {
+      const { resolveStateColors } = useStateColor();
+      const customSchema = { links: { collection: '/k8s/clusters/c-m-abc123/v1/apps.deployments' } };
+
+      mockGetters['cluster/schemaFor'] = () => customSchema;
+      mockGetters['cluster/urlFor'] = () => customSchema.links.collection;
+      mockDispatch.mockResolvedValueOnce({ data: [] });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'apps.deployments',
+        summary: [{ property: 'metadata.state.name', counts: { urlTestState: { total: 1, namespace: { default: 1 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(mockDispatch).toHaveBeenCalledWith('cluster/request', { url: `${ customSchema.links.collection }?page=1&pagesize=1` });
+    });
+
+    it('should resolve multiple unknown states across entries', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch
+        .mockResolvedValueOnce({
+          data: [{
+            metadata: {
+              state: {
+                name: 'stateA', error: true, transitioning: false
+              }
+            }
+          }],
+        })
+        .mockResolvedValueOnce({
+          data: [{
+            metadata: {
+              state: {
+                name: 'stateB', error: false, transitioning: false
+              }
+            }
+          }],
+        });
+
+      const entries: StateSummaryEntry[] = [
+        {
+          type:    'pod',
+          summary: [{ property: 'metadata.state.name', counts: { stateA: { total: 1, namespace: { default: 1 } } } }],
+        },
+        {
+          type:    'apps.deployments',
+          summary: [{ property: 'metadata.state.name', counts: { stateB: { total: 2, namespace: { default: 2 } } } }],
+        },
+      ];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('stateA', 'pod')).toStrictEqual('error');
+      expect(toStateColor('stateB', 'apps.deployments')).toStrictEqual('warning');
+    });
+  });
+});