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

package/utils/__tests__/aws.test.ts

@@ -0,0 +1,140 @@
+import { isIpv4Network, isIpv6Network, getVpcDisplayName, getSubnetDisplayName } from '@shell/utils/aws';
+
+describe('aws utils', () => {
+  describe('isIpv4Network', () => {
+    it.each([
+      {
+        desc:     'returns true when CidrBlock is set',
+        network:  { CidrBlock: '10.0.0.0/16' },
+        expected: true,
+      },
+      {
+        desc:     'returns false when CidrBlock is absent',
+        network:  {},
+        expected: false,
+      },
+      {
+        desc:     'returns false when CidrBlock is an empty string',
+        network:  { CidrBlock: '' },
+        expected: false,
+      },
+      {
+        desc:     'returns true when CidrBlock is a non-empty string',
+        network:  { CidrBlock: '0.0.0.0/0' },
+        expected: true,
+      },
+    ])('$desc', ({ network, expected }) => {
+      expect(isIpv4Network(network as any)).toStrictEqual(expected);
+    });
+  });
+
+  describe('isIpv6Network', () => {
+    it.each([
+      {
+        desc:     'returns true when Ipv6CidrBlockAssociationSet has entries',
+        network:  { Ipv6CidrBlockAssociationSet: [{ Ipv6CidrBlock: '::/0' }] },
+        expected: true,
+      },
+      {
+        desc:     'returns false when Ipv6CidrBlockAssociationSet is an empty array',
+        network:  { Ipv6CidrBlockAssociationSet: [] },
+        expected: false,
+      },
+      {
+        desc:     'returns false when Ipv6CidrBlockAssociationSet is absent',
+        network:  {},
+        expected: false,
+      },
+      {
+        desc:     'returns false when Ipv6CidrBlockAssociationSet is undefined',
+        network:  { Ipv6CidrBlockAssociationSet: undefined },
+        expected: false,
+      },
+    ])('$desc', ({ network, expected }) => {
+      expect(isIpv6Network(network as any)).toStrictEqual(expected);
+    });
+  });
+
+  describe('getVpcDisplayName', () => {
+    it.each([
+      {
+        desc: 'returns "Name (VpcId)" when Name tag is present',
+        vpc:  {
+          VpcId: 'vpc-abc123',
+          Tags:  [{ Key: 'Name', Value: 'my-vpc' }],
+        },
+        expected: 'my-vpc (vpc-abc123)',
+      },
+      {
+        desc: 'returns VpcId alone when Tags array is empty',
+        vpc:  {
+          VpcId: 'vpc-abc123',
+          Tags:  [],
+        },
+        expected: 'vpc-abc123',
+      },
+      {
+        desc:     'returns VpcId alone when Tags is absent',
+        vpc:      { VpcId: 'vpc-abc123' },
+        expected: 'vpc-abc123',
+      },
+      {
+        desc: 'returns VpcId alone when no tag has Key "Name"',
+        vpc:  {
+          VpcId: 'vpc-abc123',
+          Tags:  [{ Key: 'Env', Value: 'prod' }],
+        },
+        expected: 'vpc-abc123',
+      },
+      {
+        desc: 'uses the first Name tag when multiple tags exist',
+        vpc:  {
+          VpcId: 'vpc-abc123',
+          Tags:  [
+            { Key: 'Env', Value: 'prod' },
+            { Key: 'Name', Value: 'primary-vpc' },
+          ],
+        },
+        expected: 'primary-vpc (vpc-abc123)',
+      },
+    ])('$desc', ({ vpc, expected }) => {
+      expect(getVpcDisplayName(vpc as any)).toStrictEqual(expected);
+    });
+  });
+
+  describe('getSubnetDisplayName', () => {
+    it.each([
+      {
+        desc:   'returns "Name (SubnetId)" when Name tag is present',
+        subnet: {
+          SubnetId: 'subnet-xyz789',
+          Tags:     [{ Key: 'Name', Value: 'my-subnet' }],
+        },
+        expected: 'my-subnet (subnet-xyz789)',
+      },
+      {
+        desc:   'returns SubnetId alone when Tags array is empty',
+        subnet: {
+          SubnetId: 'subnet-xyz789',
+          Tags:     [],
+        },
+        expected: 'subnet-xyz789',
+      },
+      {
+        desc:     'returns SubnetId alone when Tags is absent',
+        subnet:   { SubnetId: 'subnet-xyz789' },
+        expected: 'subnet-xyz789',
+      },
+      {
+        desc:   'returns SubnetId alone when no tag has Key "Name"',
+        subnet: {
+          SubnetId: 'subnet-xyz789',
+          Tags:     [{ Key: 'Zone', Value: 'us-east-1a' }],
+        },
+        expected: 'subnet-xyz789',
+      },
+    ])('$desc', ({ subnet, expected }) => {
+      expect(getSubnetDisplayName(subnet as any)).toStrictEqual(expected);
+    });
+  });
+});

package/utils/__tests__/banners.test.ts

@@ -0,0 +1,176 @@
+import { getIndividualBanners, overlayIndividualBanners } from '@shell/utils/banners';
+
+describe('banners', () => {
+  describe('getIndividualBanners', () => {
+    it('returns an empty object when no settings match', () => {
+      const store = { getters: { 'management/all': () => [] } };
+
+      expect(getIndividualBanners(store)).toStrictEqual({});
+    });
+
+    it('ignores settings without a value', () => {
+      const store = {
+        getters: {
+          'management/all': () => [
+            {
+              id:    'ui-banner-header',
+              value: '',
+            },
+          ],
+        },
+      };
+
+      expect(getIndividualBanners(store)).toStrictEqual({});
+    });
+
+    it('ignores settings not in the known banner id list', () => {
+      const store = {
+        getters: {
+          'management/all': () => [
+            {
+              id:    'ui-some-other-setting',
+              value: 'some-value',
+            },
+          ],
+        },
+      };
+
+      expect(getIndividualBanners(store)).toStrictEqual({});
+    });
+
+    it.each([
+      {
+        desc:        'maps ui-banner-header to bannerHeader',
+        id:          'ui-banner-header',
+        expectedKey: 'bannerHeader',
+      },
+      {
+        desc:        'maps ui-banner-footer to bannerFooter',
+        id:          'ui-banner-footer',
+        expectedKey: 'bannerFooter',
+      },
+      {
+        desc:        'maps ui-banner-login-consent to bannerConsent',
+        id:          'ui-banner-login-consent',
+        expectedKey: 'bannerConsent',
+      },
+    ])('$desc', ({ id, expectedKey }) => {
+      const setting = {
+        id,
+        value: '{"text":"hello"}',
+      };
+      const store = { getters: { 'management/all': () => [setting] } };
+      const result = getIndividualBanners(store);
+
+      expect(Object.keys(result)).toStrictEqual([expectedKey]);
+      expect(result[expectedKey]).toStrictEqual(setting);
+    });
+
+    it('collects multiple matching banner settings', () => {
+      const headerSetting = {
+        id:    'ui-banner-header',
+        value: '{"text":"header"}',
+      };
+      const footerSetting = {
+        id:    'ui-banner-footer',
+        value: '{"text":"footer"}',
+      };
+      const store = { getters: { 'management/all': () => [headerSetting, footerSetting] } };
+      const result = getIndividualBanners(store);
+
+      expect(result['bannerHeader']).toStrictEqual(headerSetting);
+      expect(result['bannerFooter']).toStrictEqual(footerSetting);
+    });
+  });
+
+  describe('overlayIndividualBanners', () => {
+    it('does nothing when banners object is empty', () => {
+      const parsedBanner = { showHeader: 'false' };
+
+      overlayIndividualBanners(parsedBanner, {});
+      expect(parsedBanner).toStrictEqual({ showHeader: 'false' });
+    });
+
+    it('overlays bannerHeader and sets showHeader to true', () => {
+      const parsedBanner: Record<string, unknown> = {};
+      const banners = { bannerHeader: { value: '{"text":"Top banner","color":"#fff"}' } };
+
+      overlayIndividualBanners(parsedBanner, banners);
+
+      expect(parsedBanner['bannerHeader']).toStrictEqual({ text: 'Top banner', color: '#fff' });
+      expect(parsedBanner['showHeader']).toStrictEqual('true');
+    });
+
+    it('overlays bannerFooter and sets showFooter to true', () => {
+      const parsedBanner: Record<string, unknown> = {};
+      const banners = { bannerFooter: { value: '{"text":"Footer"}' } };
+
+      overlayIndividualBanners(parsedBanner, banners);
+
+      expect(parsedBanner['bannerFooter']).toStrictEqual({ text: 'Footer' });
+      expect(parsedBanner['showFooter']).toStrictEqual('true');
+    });
+
+    it('overlays bannerConsent and sets showConsent to true', () => {
+      const parsedBanner: Record<string, unknown> = {};
+      const banners = { bannerConsent: { value: '{"text":"Consent"}' } };
+
+      overlayIndividualBanners(parsedBanner, banners);
+
+      expect(parsedBanner['bannerConsent']).toStrictEqual({ text: 'Consent' });
+      expect(parsedBanner['showConsent']).toStrictEqual('true');
+    });
+
+    it('overlays multiple banners at once', () => {
+      const parsedBanner: Record<string, unknown> = {};
+      const banners = {
+        bannerHeader:  { value: '{"text":"Header"}' },
+        bannerFooter:  { value: '{"text":"Footer"}' },
+        bannerConsent: { value: '{"text":"Consent"}' },
+      };
+
+      overlayIndividualBanners(parsedBanner, banners);
+
+      expect(parsedBanner['bannerHeader']).toStrictEqual({ text: 'Header' });
+      expect(parsedBanner['bannerFooter']).toStrictEqual({ text: 'Footer' });
+      expect(parsedBanner['bannerConsent']).toStrictEqual({ text: 'Consent' });
+      expect(parsedBanner['showHeader']).toStrictEqual('true');
+      expect(parsedBanner['showFooter']).toStrictEqual('true');
+      expect(parsedBanner['showConsent']).toStrictEqual('true');
+    });
+
+    it('silently skips a banner with invalid JSON value', () => {
+      const parsedBanner: Record<string, unknown> = { existing: 'value' };
+      const banners = { bannerHeader: { value: 'not-valid-json{{{' } };
+
+      overlayIndividualBanners(parsedBanner, banners);
+
+      expect(parsedBanner).toStrictEqual({ existing: 'value' });
+    });
+
+    it('skips invalid banner but still processes valid ones', () => {
+      const parsedBanner: Record<string, unknown> = {};
+      const banners = {
+        bannerHeader: { value: 'bad json' },
+        bannerFooter: { value: '{"text":"Footer"}' },
+      };
+
+      overlayIndividualBanners(parsedBanner, banners);
+
+      expect(parsedBanner['bannerHeader']).toBeUndefined();
+      expect(parsedBanner['showHeader']).toBeUndefined();
+      expect(parsedBanner['bannerFooter']).toStrictEqual({ text: 'Footer' });
+      expect(parsedBanner['showFooter']).toStrictEqual('true');
+    });
+
+    it('overwrites existing parsedBanner field when overlaying', () => {
+      const parsedBanner: Record<string, unknown> = { bannerHeader: { text: 'Old' }, showHeader: 'false' };
+      const banners = { bannerHeader: { value: '{"text":"New"}' } };
+
+      overlayIndividualBanners(parsedBanner, banners);
+
+      expect(parsedBanner['bannerHeader']).toStrictEqual({ text: 'New' });
+      expect(parsedBanner['showHeader']).toStrictEqual('true');
+    });
+  });
+});

package/utils/__tests__/chart.test.ts

@@ -1,4 +1,7 @@
-import { compareChartVersions } from '@shell/utils/chart';
+import { compareChartVersions, getStandaloneReadmeUrl } from '@shell/utils/chart';
+import {
+  CHART, REPO, REPO_TYPE, VERSION, DEPRECATED
+} from '@shell/config/query-params';
 
 describe('compareChartVersions', () => {
   describe('standard SemVer Comparison', () => {
@@ -94,3 +97,63 @@ describe('compareChartVersions', () => {
     });
   });
 });
+
+describe('getStandaloneReadmeUrl', () => {
+  it('builds readme route with defaults', () => {
+    const router = { resolve: jest.fn(() => ({ href: '/c/local/readme' })) };
+
+    const href = getStandaloneReadmeUrl(router as any, {
+      cluster:     'local',
+      repoType:    'cluster',
+      repoName:    'rancher-charts',
+      chartName:   'my-chart',
+      versionName: '1.2.3',
+      deprecated:  'false',
+    });
+
+    expect(href).toBe('/c/local/readme');
+    expect(router.resolve).toHaveBeenCalledWith({
+      name:   'readme',
+      params: { cluster: 'local' },
+      query:  {
+        [REPO_TYPE]:          'cluster',
+        [REPO]:               'rancher-charts',
+        [CHART]:              'my-chart',
+        [VERSION]:            '1.2.3',
+        [DEPRECATED]:         'false',
+        showAppReadme:        'true',
+        hideReadmeFirstTitle: 'true'
+      }
+    });
+  });
+
+  it('builds readme route with explicit options', () => {
+    const router = { resolve: jest.fn(() => ({ href: '/c/c-abc/readme' })) };
+
+    const href = getStandaloneReadmeUrl(router as any, {
+      cluster:              'c-abc',
+      repoType:             'cluster',
+      repoName:             'partner-charts',
+      chartName:            'other-chart',
+      versionName:          '9.9.9',
+      deprecated:           'true',
+      showAppReadme:        false,
+      hideReadmeFirstTitle: false,
+    });
+
+    expect(href).toBe('/c/c-abc/readme');
+    expect(router.resolve).toHaveBeenCalledWith({
+      name:   'readme',
+      params: { cluster: 'c-abc' },
+      query:  {
+        [REPO_TYPE]:          'cluster',
+        [REPO]:               'partner-charts',
+        [CHART]:              'other-chart',
+        [VERSION]:            '9.9.9',
+        [DEPRECATED]:         'true',
+        showAppReadme:        'false',
+        hideReadmeFirstTitle: 'false'
+      }
+    });
+  });
+});

package/utils/__tests__/color.test.ts

@@ -0,0 +1,226 @@
+import {
+  contrastColor,
+  parseColor,
+  textColor,
+  hexToRgb,
+  mapStandardColors,
+  rgbToRgb,
+  colorToRgb,
+  normalizeHex,
+  createCssVars,
+} from '@shell/utils/color';
+
+describe('shell/utils/color', () => {
+  describe('hexToRgb', () => {
+    it.each([
+      {
+        desc:     'a lowercase hex color',
+        input:    '#ff0080',
+        expected: {
+          r: 255, g: 0, b: 128
+        },
+      },
+      {
+        desc:     'a hex color without # prefix',
+        input:    'ff0080',
+        expected: {
+          r: 255, g: 0, b: 128
+        },
+      },
+      {
+        desc:     'an uppercase hex color',
+        input:    '#AABBCC',
+        expected: {
+          r: 170, g: 187, b: 204
+        },
+      },
+    ])('parses $desc', ({ input, expected }) => {
+      expect(hexToRgb(input)).toStrictEqual(expected);
+    });
+
+    it.each([
+      { desc: 'an invalid hex string', input: 'not-a-color' },
+      { desc: 'a short 3-character hex (not supported by hexToRgb)', input: '#abc' },
+    ])('returns null for $desc', ({ input }) => {
+      expect(hexToRgb(input)).toBeNull();
+    });
+  });
+
+  describe('rgbToRgb', () => {
+    it.each([
+      {
+        desc:     'a valid rgb() string with spaces',
+        input:    'rgb(10, 20, 30)',
+        expected: {
+          r: 10, g: 20, b: 30
+        },
+      },
+      {
+        desc:     'an rgb() string without spaces',
+        input:    'rgb(0,128,255)',
+        expected: {
+          r: 0, g: 128, b: 255
+        },
+      },
+    ])('parses $desc', ({ input, expected }) => {
+      expect(rgbToRgb(input)).toStrictEqual(expected);
+    });
+
+    it.each([
+      { desc: 'an rgba string', input: 'rgba(10,20,30,0.5)' },
+      { desc: 'a plain color name', input: 'red' },
+    ])('returns null for $desc', ({ input }) => {
+      expect(rgbToRgb(input)).toBeNull();
+    });
+  });
+
+  describe('colorToRgb', () => {
+    it('converts a hex color to rgb object', () => {
+      expect(colorToRgb('#ff0000')).toStrictEqual({
+        r: 255, g: 0, b: 0
+      });
+    });
+
+    it('converts an rgb() string to rgb object', () => {
+      expect(colorToRgb('rgb(0, 0, 255)')).toStrictEqual({
+        r: 0, g: 0, b: 255
+      });
+    });
+
+    it('returns { r:0, g:0, b:0 } for an unrecognized format', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      expect(colorToRgb('hsl(0,100%,50%)')).toStrictEqual({
+        r: 0, g: 0, b: 0
+      });
+      consoleSpy.mockRestore();
+    });
+
+    it('warns for unrecognized color formats', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      colorToRgb('blue');
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('Unable to parse color: blue'));
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('normalizeHex', () => {
+    it.each([
+      {
+        desc: '3-char hex with # to 6-char', input: '#abc', expected: '#aabbcc'
+      },
+      {
+        desc: '3-char hex without # to 6-char', input: 'abc', expected: 'aabbcc'
+      },
+      {
+        desc: '6-char hex with # unchanged', input: '#aabbcc', expected: '#aabbcc'
+      },
+      {
+        desc: '6-char hex without # unchanged', input: 'aabbcc', expected: 'aabbcc'
+      },
+    ])('handles $desc', ({ input, expected }) => {
+      expect(normalizeHex(input)).toStrictEqual(expected);
+    });
+  });
+
+  describe('mapStandardColors', () => {
+    it.each([
+      {
+        desc: '"black" to its hex value', input: 'black', expected: '#000000'
+      },
+      {
+        desc: '"white" to its hex value', input: 'white', expected: '#ffffff'
+      },
+      {
+        desc: 'an unknown color string unchanged', input: '#123456', expected: '#123456'
+      },
+    ])('maps $desc', ({ input, expected }) => {
+      expect(mapStandardColors(input)).toStrictEqual(expected);
+    });
+  });
+
+  describe('textColor', () => {
+    it.each([
+      {
+        desc: '"black" for a light color (#ffffff)', input: '#ffffff', expected: 'black'
+      },
+      {
+        desc: '"white" for a dark color (#000000)', input: '#000000', expected: 'white'
+      },
+      {
+        desc: '"black" for brightness above threshold (rgb 200,200,200)', input: 'rgb(200, 200, 200)', expected: 'black'
+      },
+      {
+        desc: '"white" for brightness below threshold (rgb 50,50,50)', input: 'rgb(50, 50, 50)', expected: 'white'
+      },
+    ])('returns $desc', ({ input, expected }) => {
+      const color = parseColor(input);
+
+      expect(textColor(color)).toStrictEqual(expected);
+    });
+  });
+
+  describe('contrastColor', () => {
+    it('returns light text on a very dark background (light theme)', () => {
+      expect(contrastColor('#000000')).toStrictEqual('rgb(255, 255, 255)');
+    });
+
+    it('returns dark text on a very light background (light theme)', () => {
+      expect(contrastColor('#ffffff')).toStrictEqual('rgb(20, 20, 25)');
+    });
+
+    it('uses custom contrast options when provided', () => {
+      const opts = { dark: '#000000', light: '#ffffff' };
+
+      // white background → dark text has higher contrast
+      expect(contrastColor('#ffffff', opts)).toStrictEqual('#000000');
+    });
+  });
+
+  describe('createCssVars', () => {
+    it('returns an object with expected CSS variable keys for light theme', () => {
+      const vars = createCssVars('#4a90d9', 'light', 'primary');
+      const expectedKeys = [
+        '--primary',
+        '--primary-text ',
+        '--primary-hover-bg',
+        '--primary-active-bg',
+        '--primary-active-text',
+        '--primary-border',
+        '--primary-banner-bg',
+        '--primary-light-bg',
+        '--primary-keyboard-focus',
+      ];
+
+      expect(Object.keys(vars)).toStrictEqual(expectedKeys);
+    });
+
+    it('sets --primary to the input color', () => {
+      const vars = createCssVars('#4a90d9');
+
+      expect(vars['--primary']).toStrictEqual('#4a90d9');
+    });
+
+    it('sets --primary-border to the input color', () => {
+      const vars = createCssVars('#4a90d9');
+
+      expect(vars['--primary-border']).toStrictEqual('#4a90d9');
+    });
+
+    it('uses a custom name prefix', () => {
+      const vars = createCssVars('#ff0000', 'light', 'accent');
+
+      expect(vars).toHaveProperty('--accent');
+      expect(vars).toHaveProperty('--accent-hover-bg');
+    });
+
+    it('produces opacity-based banner-bg and light-bg values', () => {
+      const vars = createCssVars('#ff0000');
+
+      // opacity(color, 0.15) and opacity(color, 0.05) produce rgba strings
+      expect(vars['--primary-banner-bg']).toContain('rgba');
+      expect(vars['--primary-light-bg']).toContain('rgba');
+    });
+  });
+});