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

package/utils/__tests__/string.test.ts

@@ -1,4 +1,4 @@
-import { decodeHtml, resourceNames, pathArrayToTree } from '@shell/utils/string';
+import { decodeHtml, resourceNames, pathArrayToTree, isBase64EncodedCert } from '@shell/utils/string';
 
 describe('fx: decodeHtml', () => {
   it('should decode HTML values from escaped string into valid markup', () => {
@@ -361,3 +361,25 @@ describe('fx: pathArrayToTree', () => {
     expect(actual).toStrictEqual(expected);
   });
 });
+
+describe('fx: isBase64EncodedCert', () => {
+  it.each([
+    ['valid base64 cert', 'LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0tLS0t', true],
+    ['base64 with padding', 'c3NoIGtleQ==', false],
+    ['base64 with newlines', 'LS0tLS1CRUdJTiBDRVJU\nSUZJQ0FURS0tLS0t\nTUlJQmtUQ0I=', true],
+    ['base64 with CRLF', 'LS0tLS1CRUdJTiBDRVJU\r\nSUZJQ0FURS0tLS0t\r\nTUlJQmtUQ0I=', true],
+  ])('should return %p for %p', (_, value, expected) => {
+    expect(isBase64EncodedCert(value as string)).toBe(expected);
+  });
+
+  it.each([
+    ['empty string', ''],
+    ['null', null],
+    ['undefined', undefined],
+    ['short string like "test"', 'test'],
+    ['short valid base64', 'Zm9v'],
+    ['invalid characters', 'not-valid-base64!'],
+  ])('should return false for %p', (_, value) => {
+    expect(isBase64EncodedCert(value as string)).toBe(false);
+  });
+});

package/utils/__tests__/style.test.ts

@@ -0,0 +1,154 @@
+import {
+  ALL_STATE_COLORS,
+  BLANK_IMAGE,
+  StateColor,
+  getHighestAlertColor,
+  isHigherAlert,
+  isTruncated,
+  stateColorCssVar,
+  toBgColor,
+} from '@shell/utils/style';
+
+describe('stateColorCssVar', () => {
+  it.each([
+    ['success', 'var(--success)'],
+    ['warning', 'var(--warning)'],
+    ['error', 'var(--error)'],
+    ['info', 'var(--info)'],
+    ['disabled', 'var(--disabled)'],
+  ] as [StateColor, string][])('returns css var for %s', (color, expected) => {
+    expect(stateColorCssVar(color)).toBe(expected);
+  });
+});
+
+describe('toBgColor', () => {
+  it('returns bg-info when no color provided', () => {
+    expect(toBgColor(undefined)).toBe('bg-info');
+  });
+
+  it.each([
+    ['success', 'bg-success'],
+    ['warning', 'bg-warning'],
+    ['error', 'bg-error'],
+    ['info', 'bg-info'],
+    ['disabled', 'bg-disabled'],
+  ] as [StateColor, string][])('returns bg-%s for color %s', (color, expected) => {
+    expect(toBgColor(color)).toBe(expected);
+  });
+});
+
+describe('isHigherAlert', () => {
+  it.each([
+    ['error', 'warning', true],
+    ['error', 'success', true],
+    ['error', 'info', true],
+    ['warning', 'success', true],
+    ['warning', 'info', true],
+    ['success', 'info', true],
+    ['warning', 'error', false],
+    ['success', 'error', false],
+    ['info', 'error', false],
+    ['success', 'warning', false],
+    ['info', 'warning', false],
+    ['info', 'success', false],
+    ['error', 'error', false],
+    ['warning', 'warning', false],
+    ['info', 'info', false],
+    ['disabled', 'info', false],
+    ['disabled', 'error', false],
+    ['info', 'disabled', true],
+    ['error', 'disabled', true],
+  ] as [StateColor, StateColor, boolean][])('%s vs %s → %s', (a, b, expected) => {
+    expect(isHigherAlert(a, b)).toBe(expected);
+  });
+});
+
+describe('getHighestAlertColor', () => {
+  it.each([
+    {
+      desc: 'info for an empty array', colors: [], expected: 'info'
+    },
+    {
+      desc: 'error when single error element', colors: ['error'], expected: 'error'
+    },
+    {
+      desc: 'warning when single warning element', colors: ['warning'], expected: 'warning'
+    },
+    {
+      desc: 'error when present among mixed levels', colors: ['info', 'warning', 'error', 'success'], expected: 'error'
+    },
+    {
+      desc: 'warning when no error is present', colors: ['info', 'success', 'warning'], expected: 'warning'
+    },
+    {
+      desc: 'success when only info and success are present', colors: ['info', 'success'], expected: 'success'
+    },
+    {
+      desc: 'info when all colors are info', colors: ['info', 'info', 'info'], expected: 'info'
+    },
+    {
+      desc: 'info (default) when all colors are disabled', colors: ['disabled', 'disabled'], expected: 'info'
+    },
+  ])('returns $desc', ({ colors, expected }) => {
+    expect(getHighestAlertColor(colors as StateColor[])).toBe(expected);
+  });
+});
+
+describe('isTruncated', () => {
+  it('returns false when element is null', () => {
+    expect(isTruncated(null)).toBe(false);
+  });
+
+  it.each([
+    {
+      desc: 'false when text fits within element bounds',
+      el:   {
+        scrollWidth: 100, clientWidth: 200, scrollHeight: 20, clientHeight: 20
+      },
+      expected: false,
+    },
+    {
+      desc: 'true when text is horizontally truncated',
+      el:   {
+        scrollWidth: 300, clientWidth: 200, scrollHeight: 20, clientHeight: 20
+      },
+      expected: true,
+    },
+    {
+      desc: 'true when text is vertically truncated',
+      el:   {
+        scrollWidth: 100, clientWidth: 100, scrollHeight: 50, clientHeight: 40
+      },
+      expected: true,
+    },
+    {
+      desc: 'false for single-pixel vertical overflow (1px tolerance)',
+      el:   {
+        scrollWidth: 100, clientWidth: 100, scrollHeight: 21, clientHeight: 20
+      },
+      expected: false,
+    },
+    {
+      desc: 'true for 2+ pixel vertical overflow',
+      el:   {
+        scrollWidth: 100, clientWidth: 100, scrollHeight: 22, clientHeight: 20
+      },
+      expected: true,
+    },
+  ])('returns $desc', ({ el, expected }) => {
+    expect(isTruncated(el as HTMLElement)).toBe(expected);
+  });
+});
+
+describe('all state colors constant', () => {
+  it('contains all expected state colors', () => {
+    expect(ALL_STATE_COLORS).toStrictEqual(['success', 'warning', 'error', 'info', 'disabled']);
+  });
+});
+
+describe('blank image constant', () => {
+  it('is a valid base64 data URI', () => {
+    expect(BLANK_IMAGE).toMatch(/^data:image\//);
+    expect(BLANK_IMAGE).toContain('base64,');
+  });
+});

package/utils/__tests__/svg-filter.test.ts

@@ -0,0 +1,184 @@
+import { Solver } from '@shell/utils/svg-filter';
+
+describe('solver', () => {
+  describe('css', () => {
+    it.each([
+      {
+        desc:     'all-zero filter values produce zero percentages and zero hue-rotate',
+        filters:  [0, 0, 0, 0, 0, 0],
+        expected: 'filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(0%);',
+      },
+      {
+        desc:     'integer filter values are rounded and formatted correctly',
+        filters:  [50, 20, 3750, 50, 100, 100],
+        expected: 'filter: invert(50%) sepia(20%) saturate(3750%) hue-rotate(180deg) brightness(100%) contrast(100%);',
+      },
+      {
+        desc:     'fractional filter values are rounded to nearest integer',
+        filters:  [10.6, 30.4, 100.5, 25.2, 80.9, 120.1],
+        expected: 'filter: invert(11%) sepia(30%) saturate(101%) hue-rotate(91deg) brightness(81%) contrast(120%);',
+      },
+      {
+        desc:     'hue-rotate index (3) uses 3.6 multiplier',
+        filters:  [0, 0, 0, 100, 0, 0],
+        expected: 'filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(360deg) brightness(0%) contrast(0%);',
+      },
+    ])('$desc', ({ filters, expected }) => {
+      const solver = new Solver({
+        r: 255, g: 0, b: 0
+      });
+
+      expect(solver.css(filters)).toStrictEqual(expected);
+    });
+  });
+
+  describe('loss', () => {
+    it('returns 0 for filters that reproduce the target color exactly', () => {
+      // Target: black (0,0,0). Starting from black and applying:
+      // invert(0%), sepia(0%), saturate(0%), hueRotate(0), brightness(100%), contrast(100%)
+      // should leave color as (0,0,0) — perfect match.
+      const solver = new Solver({
+        r: 0, g: 0, b: 0
+      });
+      const loss = solver.loss([0, 0, 0, 0, 100, 100]);
+
+      expect(loss).toStrictEqual(0);
+    });
+
+    it('returns a positive value when filters produce a color that differs from the target', () => {
+      const solver = new Solver({
+        r: 255, g: 0, b: 0
+      });
+      // Filters that are all zero → color stays black → far from red target
+      const loss = solver.loss([0, 0, 0, 0, 0, 0]);
+
+      expect(loss).toBeGreaterThan(0);
+    });
+
+    it('loss is smaller when color produced by filters is closer to target', () => {
+      const solver = new Solver({
+        r: 0, g: 0, b: 0
+      });
+      // filters [0,0,0,0,0,0]: contrast(0) pushes everything to mid-gray → far from black target
+      const highLoss = solver.loss([0, 0, 0, 0, 0, 0]);
+      // filters [0,0,0,0,100,100]: identity transforms → stays black → matches target
+      const lowerLoss = solver.loss([0, 0, 0, 0, 100, 100]);
+
+      expect(lowerLoss).toBeLessThan(highLoss);
+    });
+
+    it('uses the same reusedColor instance without side effects between calls', () => {
+      const solver = new Solver({
+        r: 100, g: 150, b: 200
+      });
+      const loss1 = solver.loss([10, 5, 200, 30, 90, 110]);
+      const loss2 = solver.loss([10, 5, 200, 30, 90, 110]);
+
+      // Same inputs must produce the same loss regardless of call order
+      expect(loss1).toStrictEqual(loss2);
+    });
+  });
+
+  describe('constructor', () => {
+    it('stores target color components', () => {
+      const solver = new Solver({
+        r: 100, g: 150, b: 200
+      });
+
+      expect(solver.target.r).toStrictEqual(100);
+      expect(solver.target.g).toStrictEqual(150);
+      expect(solver.target.b).toStrictEqual(200);
+    });
+
+    it('clamps target components above 255 to 255', () => {
+      const solver = new Solver({
+        r: 300, g: 0, b: 0
+      });
+
+      expect(solver.target.r).toStrictEqual(255);
+    });
+
+    it('clamps target components below 0 to 0', () => {
+      const solver = new Solver({
+        r: 0, g: -10, b: 0
+      });
+
+      expect(solver.target.g).toStrictEqual(0);
+    });
+
+    it('computes targetHSL from the provided color', () => {
+      // Pure white: hsl should be h=0, s=0, l=100
+      const solver = new Solver({
+        r: 255, g: 255, b: 255
+      });
+
+      expect(solver.targetHSL.h).toStrictEqual(0);
+      expect(solver.targetHSL.s).toStrictEqual(0);
+      expect(solver.targetHSL.l).toBeCloseTo(100, 1);
+    });
+
+    it('computes targetHSL for pure red', () => {
+      // Pure red: r=255, g=0, b=0 → hsl h≈0 (normalised *100 → 0), s=100, l=50
+      const solver = new Solver({
+        r: 255, g: 0, b: 0
+      });
+
+      expect(solver.targetHSL.h).toBeCloseTo(0, 1);
+      expect(solver.targetHSL.s).toBeCloseTo(100, 1);
+      expect(solver.targetHSL.l).toBeCloseTo(50, 1);
+    });
+  });
+
+  describe('solve', () => {
+    it('returns an object with values, loss, filter and filterVal properties', () => {
+      const solver = new Solver({
+        r: 255, g: 0, b: 0
+      });
+      const result = solver.solve();
+
+      expect(result).toHaveProperty('values');
+      expect(result).toHaveProperty('loss');
+      expect(result).toHaveProperty('filter');
+      expect(result).toHaveProperty('filterVal');
+    });
+
+    it('filter starts with "filter: " and ends with ";"', () => {
+      const solver = new Solver({
+        r: 0, g: 128, b: 255
+      });
+      const result = solver.solve();
+
+      expect(result.filter.startsWith('filter: ')).toBe(true);
+      expect(result.filter.endsWith(';')).toBe(true);
+    });
+
+    it('filterVal is filter without the "filter: " prefix and trailing ";"', () => {
+      const solver = new Solver({
+        r: 0, g: 200, b: 100
+      });
+      const result = solver.solve();
+
+      expect(result.filterVal).toStrictEqual(
+        result.filter.replace('filter: ', '').replace(';', '')
+      );
+    });
+
+    it('loss is a non-negative number', () => {
+      const solver = new Solver({
+        r: 50, g: 100, b: 150
+      });
+      const result = solver.solve();
+
+      expect(result.loss).toBeGreaterThanOrEqual(0);
+    });
+
+    it('values array has exactly 6 elements', () => {
+      const solver = new Solver({
+        r: 10, g: 20, b: 30
+      });
+      const result = solver.solve();
+
+      expect(result.values).toHaveLength(6);
+    });
+  });
+});

package/utils/__tests__/time.test.ts

@@ -1,5 +1,8 @@
+import day from 'dayjs';
 import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
-import { dateTimeFormat, isMissingDate } from '@shell/utils/time';
+import {
+  dateTimeFormat, diffFrom, elapsedTime, getSecondsDiff, isMissingDate, safeSetTimeout
+} from '@shell/utils/time';
 import { type Store } from 'vuex';
 import { ZERO_TIME } from '@shell/config/types';
 
@@ -42,3 +45,264 @@ describe('function: dateTimeFormat', () => {
     expect(formattedDate).toBe('');
   });
 });
+
+describe('function: elapsedTime', () => {
+  it.each([
+    {
+      desc:     'returns empty object for 0',
+      seconds:  0,
+      expected: {},
+    },
+    {
+      desc:     'returns empty object for null',
+      seconds:  null,
+      expected: {},
+    },
+    {
+      desc:     'returns empty object for undefined',
+      seconds:  undefined,
+      expected: {},
+    },
+    {
+      desc:     'returns seconds label for 1 second',
+      seconds:  1,
+      expected: { diff: 1, label: '1s' },
+    },
+    {
+      desc:     'returns seconds label for 60 seconds',
+      seconds:  60,
+      expected: { diff: 1, label: '60s' },
+    },
+    {
+      desc:     'returns seconds label for 119 seconds (upper bound)',
+      seconds:  119,
+      expected: { diff: 1, label: '119s' },
+    },
+    {
+      desc:     'returns minutes+seconds label for 120 seconds',
+      seconds:  120,
+      expected: { diff: 1, label: '2m0s' },
+    },
+    {
+      desc:     'returns minutes+seconds label for 599 seconds',
+      seconds:  599,
+      expected: { diff: 1, label: '9m59s' },
+    },
+    {
+      desc:     'returns minutes-only label for 600 seconds',
+      seconds:  600,
+      expected: { diff: 60, label: '10m' },
+    },
+    {
+      desc:     'returns minutes-only label for 10799 seconds (under 3 hours)',
+      seconds:  10799,
+      expected: { diff: 60, label: '179m' },
+    },
+    {
+      desc:     'returns hours+minutes label for 10800 seconds (3 hours)',
+      seconds:  10800,
+      expected: { diff: 60, label: '3h0m' },
+    },
+    {
+      desc:     'returns hours+minutes label for 25200 seconds (7 hours)',
+      seconds:  25200,
+      expected: { diff: 60, label: '7h0m' },
+    },
+    {
+      desc:     'returns hours-only label for 28800 seconds (8 hours)',
+      seconds:  28800,
+      expected: { diff: 60, label: '8h' },
+    },
+    {
+      desc:     'returns hours-only label for 86400 seconds (1 day as hours)',
+      seconds:  86400,
+      expected: { diff: 60, label: '24h' },
+    },
+    {
+      desc:     'returns days+hours label for 172800 seconds (2 days)',
+      seconds:  172800,
+      expected: { diff: 60, label: '2d0h' },
+    },
+    {
+      desc:     'returns days+hours label for 176400 seconds (2 days 1 hour)',
+      seconds:  176400,
+      expected: { diff: 60, label: '2d1h' },
+    },
+  ])('$desc', ({ seconds, expected }) => {
+    expect(elapsedTime(seconds)).toStrictEqual(expected);
+  });
+});
+
+describe('function: safeSetTimeout', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it('invokes the callback after the given delay', () => {
+    const callback = jest.fn();
+
+    safeSetTimeout(100, callback, null);
+    jest.runAllTimers();
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it('invokes the callback with the provided context object', () => {
+    let capturedContext: unknown;
+
+    function cb(this: unknown) {
+      capturedContext = this;
+    }
+    const ctx = { id: 'ctx' };
+
+    safeSetTimeout(100, cb, ctx);
+    jest.runAllTimers();
+
+    expect(capturedContext).toStrictEqual(ctx);
+  });
+
+  it('does not schedule a timeout when delay exceeds 32-bit maximum', () => {
+    const callback = jest.fn();
+    const result = safeSetTimeout(2147483648, callback, null);
+
+    jest.runAllTimers();
+
+    expect(result).toBeUndefined();
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('schedules a timeout for delay equal to 32-bit maximum', () => {
+    const callback = jest.fn();
+
+    safeSetTimeout(2147483647, callback, null);
+    jest.runAllTimers();
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('function: getSecondsDiff', () => {
+  it.each([
+    {
+      desc:      'returns 0 for identical date strings',
+      startDate: '2024-01-01T00:00:00Z',
+      endDate:   '2024-01-01T00:00:00Z',
+      expected:  0,
+    },
+    {
+      desc:      'returns 60 for dates one minute apart',
+      startDate: '2024-01-01T00:00:00Z',
+      endDate:   '2024-01-01T00:01:00Z',
+      expected:  60,
+    },
+    {
+      desc:      'returns 3600 for dates one hour apart',
+      startDate: '2024-01-01T00:00:00Z',
+      endDate:   '2024-01-01T01:00:00Z',
+      expected:  3600,
+    },
+    {
+      desc:      'returns absolute difference when end is before start',
+      startDate: '2024-01-01T01:00:00Z',
+      endDate:   '2024-01-01T00:00:00Z',
+      expected:  3600,
+    },
+    {
+      desc:      'returns 86400 for dates one day apart',
+      startDate: '2024-01-01T00:00:00Z',
+      endDate:   '2024-01-02T00:00:00Z',
+      expected:  86400,
+    },
+  ])('$desc', ({ startDate, endDate, expected }) => {
+    expect(getSecondsDiff(startDate, endDate)).toStrictEqual(expected);
+  });
+});
+
+describe('function: diffFrom', () => {
+  const from = day('2024-01-01T12:00:00Z');
+
+  it.each([
+    {
+      desc:     '30 seconds reports seconds unit',
+      value:    from.subtract(30, 'second'),
+      expected: {
+        diff:     -30,
+        absDiff:  30,
+        label:    30,
+        unitsKey: 'unit.sec',
+        units:    'sec',
+        next:     1,
+      },
+    },
+    {
+      desc:     '120 seconds reports minutes unit with small label',
+      value:    from.subtract(120, 'second'),
+      expected: {
+        diff:     -120,
+        absDiff:  2,
+        label:    2,
+        unitsKey: 'unit.min',
+        units:    'min',
+        next:     6,
+      },
+    },
+    {
+      desc:     '600 seconds reports minutes unit with integer label',
+      value:    from.subtract(600, 'second'),
+      expected: {
+        diff:     -600,
+        absDiff:  10,
+        label:    10,
+        unitsKey: 'unit.min',
+        units:    'min',
+        next:     6,
+      },
+    },
+    {
+      desc:     '5400 seconds reports hours unit with fractional label',
+      value:    from.subtract(5400, 'second'),
+      expected: {
+        diff:     -5400,
+        absDiff:  1.5,
+        label:    1.5,
+        unitsKey: 'unit.hour',
+        units:    'hour',
+        next:     36,
+      },
+    },
+    {
+      desc:     '172800 seconds reports days unit',
+      value:    from.subtract(172800, 'second'),
+      expected: {
+        diff:     -172800,
+        absDiff:  2,
+        label:    2,
+        unitsKey: 'unit.day',
+        units:    'day',
+        next:     72,
+      },
+    },
+  ])('$desc', ({ value, expected }) => {
+    expect(diffFrom(value, from, null)).toStrictEqual(expected);
+  });
+
+  it('includes string property when t function is provided', () => {
+    const value = from.subtract(30, 'second');
+    const t = (key: string, args: unknown) => `${ key }:${ JSON.stringify(args) }`;
+    const result = diffFrom(value, from, t);
+
+    expect(result.string).toStrictEqual(`30 unit.sec:${ JSON.stringify({ count: 30 }) }`);
+  });
+
+  it('omits string property when t function is not provided', () => {
+    const value = from.subtract(30, 'second');
+    const result = diffFrom(value, from, null);
+
+    expect(result).not.toHaveProperty('string');
+  });
+});

package/utils/__tests__/title.test.ts

@@ -0,0 +1,47 @@
+import { updatePageTitle } from '@shell/utils/title';
+
+describe('updatePageTitle', () => {
+  afterEach(() => {
+    document.title = '';
+  });
+
+  it('sets document.title to a single breadcrumb', () => {
+    updatePageTitle('Home');
+    expect(document.title).toStrictEqual('Home');
+  });
+
+  it('joins multiple breadcrumbs with " - "', () => {
+    updatePageTitle('Rancher', 'Clusters', 'my-cluster');
+    expect(document.title).toStrictEqual('Rancher - Clusters - my-cluster');
+  });
+
+  it('filters out null values', () => {
+    updatePageTitle('Rancher', null, 'Clusters');
+    expect(document.title).toStrictEqual('Rancher - Clusters');
+  });
+
+  it('filters out undefined values', () => {
+    updatePageTitle('Rancher', undefined, 'Clusters');
+    expect(document.title).toStrictEqual('Rancher - Clusters');
+  });
+
+  it('filters out false values', () => {
+    updatePageTitle('Rancher', false, 'Clusters');
+    expect(document.title).toStrictEqual('Rancher - Clusters');
+  });
+
+  it('filters out empty string values', () => {
+    updatePageTitle('Rancher', '', 'Clusters');
+    expect(document.title).toStrictEqual('Rancher - Clusters');
+  });
+
+  it('sets document.title to empty string when all breadcrumbs are falsy', () => {
+    updatePageTitle(null, undefined, false);
+    expect(document.title).toStrictEqual('');
+  });
+
+  it('sets document.title to empty string when called with no arguments', () => {
+    updatePageTitle();
+    expect(document.title).toStrictEqual('');
+  });
+});