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

package/plugins/steve/__tests__/steve-class-resource-api.test.ts

@@ -0,0 +1,147 @@
+import {
+  describe, it, expect, jest, beforeEach, afterEach
+} from '@jest/globals';
+import Steve from '@shell/plugins/steve/steve-class.js';
+
+describe('class: Steve — ResourceInstanceApi methods', () => {
+  let consoleErrorSpy: any;
+
+  beforeEach(() => {
+    consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
+  function createSteveModel(overrides: Record<string, any> = {}) {
+    const dispatch = jest.fn<any, any[]>();
+
+    dispatch.mockResolvedValue(undefined);
+
+    // @ts-expect-error - JS class without TS declarations
+    const model = new Steve({
+      type:     'configmap',
+      id:       'default/my-config',
+      metadata: { name: 'my-config', namespace: 'default' },
+      links:    { update: 'https://rancher/v1/configmaps/default/my-config', self: 'https://rancher/v1/configmaps/default/my-config' },
+      ...overrides,
+    }, {
+      getters: {
+        schemaFor:       () => ({ linkFor: jest.fn() }),
+        keyFieldForType: () => 'id',
+      },
+      dispatch,
+      rootGetters: {
+        'i18n/t':              jest.fn(),
+        'type-map/optionsFor': () => ({
+          isEditable: true, isRemovable: true, isCreatable: true
+        }),
+        'type-map/hasCustomEdit': () => true,
+      },
+    });
+
+    return { model: model as any, dispatch };
+  }
+
+  describe('update', () => {
+    it('should send a merge-patch request and load the response into the store', async() => {
+      const patchResponse = {
+        type: 'configmap', id: 'default/my-config', kind: 'ConfigMap', data: { key: 'patched' }
+      };
+      const { model, dispatch } = createSteveModel();
+
+      dispatch
+        .mockResolvedValueOnce(patchResponse)
+        .mockResolvedValueOnce(undefined);
+
+      const result = await model.update({ data: { key: 'patched' } });
+
+      expect(result).toStrictEqual(model);
+      expect(dispatch).toHaveBeenCalledWith('request', {
+        opt: expect.objectContaining({
+          url:     'https://rancher/v1/configmaps/default/my-config',
+          method:  'patch',
+          headers: expect.objectContaining({ 'content-type': 'application/strategic-merge-patch+json' }),
+          data:    { data: { key: 'patched' } },
+        }),
+        type: 'configmap'
+      });
+      expect(dispatch).toHaveBeenCalledWith('load', expect.objectContaining({
+        data:                patchResponse,
+        invalidatePageCache: false,
+      }));
+    });
+
+    it('should not call load when response is a Table', async() => {
+      const tableResponse = { kind: 'Table', rows: [] };
+      const { model, dispatch } = createSteveModel();
+
+      dispatch.mockResolvedValueOnce(tableResponse);
+
+      await model.update({ data: { key: 'value' } });
+
+      expect(dispatch).toHaveBeenCalledTimes(1);
+      expect(dispatch).not.toHaveBeenCalledWith('load', expect.anything());
+    });
+
+    it('should throw when canEdit is false', async() => {
+      const { model, dispatch } = createSteveModel({ links: {} });
+
+      await expect(model.update({ data: {} })).rejects.toThrow(
+        'ResourceInstance API error - configmap/default/my-config - Cannot patch: permission denied'
+      );
+      expect(dispatch).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('replace', () => {
+    it('should call save() and return the instance', async() => {
+      const { model, dispatch } = createSteveModel();
+
+      dispatch.mockResolvedValueOnce(undefined);
+
+      const result = await model.replace();
+
+      expect(result).toStrictEqual(model);
+      expect(dispatch).toHaveBeenCalledWith('request', expect.objectContaining({ opt: expect.objectContaining({ method: 'put' }) }));
+    });
+
+    it('should throw when canEdit is false', async() => {
+      const { model, dispatch } = createSteveModel({ links: {} });
+
+      await expect(model.replace()).rejects.toThrow(
+        'ResourceInstance API error - configmap/default/my-config - Cannot update: permission denied'
+      );
+      expect(dispatch).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('delete', () => {
+    it('should call remove()', async() => {
+      const { model, dispatch } = createSteveModel({
+        links: {
+          update: 'https://rancher/v1/configmaps/default/my-config',
+          self:   'https://rancher/v1/configmaps/default/my-config',
+          remove: 'https://rancher/v1/configmaps/default/my-config',
+        }
+      });
+
+      dispatch.mockResolvedValueOnce({ _status: 204 });
+      dispatch.mockResolvedValueOnce(undefined);
+
+      await model.delete();
+
+      expect(dispatch).toHaveBeenCalledWith('request', expect.objectContaining({ opt: expect.objectContaining({ method: 'delete' }) }));
+    });
+
+    it('should throw when canDelete is false', async() => {
+      const { model, dispatch } = createSteveModel({ links: {} });
+
+      await expect(model.delete()).rejects.toThrow(
+        'ResourceInstance API error - configmap/default/my-config - Cannot delete: permission denied'
+      );
+      expect(dispatch).not.toHaveBeenCalled();
+    });
+  });
+});

package/plugins/steve/steve-class.js

@@ -91,4 +91,47 @@ export default class SteveModel extends HybridModel {
       }
     }
   }
+
+  /**
+   * RESOURCES API - ResourceInstance update method to send a PATCH request
+   */
+  async update(data) {
+    if (!this.canEdit) {
+      throw new Error(`ResourceInstance API error - ${ this.type }/${ this.id } - Cannot patch: permission denied`);
+    }
+
+    console.error('Updating instance with data:', data); // eslint-disable-line no-console
+
+    await this.save({
+      data,
+      method:  'patch',
+      headers: { 'content-type': 'application/strategic-merge-patch+json' }
+    });
+
+    return this;
+  }
+
+  /**
+   * RESOURCES API - ResourceInstance update method to send a PUT request
+   */
+  async replace() {
+    if (!this.canEdit) {
+      throw new Error(`ResourceInstance API error - ${ this.type }/${ this.id } - Cannot update: permission denied`);
+    }
+
+    await this.save();
+
+    return this;
+  }
+
+  /**
+   * RESOURCES API - ResourceInstance delete method to send a DELETE request
+   */
+  async delete() {
+    if (!this.canDelete) {
+      throw new Error(`ResourceInstance API error - ${ this.type }/${ this.id } - Cannot delete: permission denied`);
+    }
+
+    await this.remove();
+  }
 }

package/plugins/steve/subscribe.js

@@ -834,6 +834,17 @@ const defaultActions = {
     state.debugSocket && console.debug(`Subscribe Flush [${ getters.storeName }]`, queue.length, 'items'); // eslint-disable-line no-console
 
     for ( const { action, event, body } of queue ) {
+      const havePage = getters['havePage'](body?.type);
+
+      if (havePage) {
+        // eslint-disable-next-line no-console
+        console.warn(`Prevented watch \`flush\` data from polluting the cache for type "${ body?.type }" (currently represents a page)`, {
+          action, event, body
+        });
+
+        continue;
+      }
+
       if ( action === 'dispatch' && event === 'load' ) {
         // Group loads into one loadMulti when possible
         toLoad.push(body);

package/rancher-components/Form/LabeledInput/LabeledInput.test.ts

@@ -57,6 +57,121 @@ describe('component: LabeledInput', () => {
     });
   });
 
+  describe('type "integer"', () => {
+    const i18nMock = { $store: { getters: { 'i18n/t': jest.fn() } } };
+
+    it('should render a text input with numeric inputmode', () => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { type: 'integer', value: '' },
+        mocks:     i18nMock
+      });
+      const input = wrapper.find('input');
+
+      expect(input.attributes('type')).toBe('text');
+      expect(input.attributes('inputmode')).toBe('numeric');
+    });
+
+    it.each([
+      'e', 'E', '.', '+',
+    ])('should prevent non-integer key "%s"', (key) => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { type: 'integer', value: '' },
+        mocks:     i18nMock
+      });
+      const input = wrapper.find('input');
+      const event = new KeyboardEvent('keydown', { key, cancelable: true });
+
+      input.element.dispatchEvent(event);
+
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it.each([
+      '0', '1', '9', '-', 'Backspace', 'Tab', 'ArrowLeft',
+    ])('should allow key "%s"', (key) => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { type: 'integer', value: '' },
+        mocks:     i18nMock
+      });
+      const input = wrapper.find('input');
+      const event = new KeyboardEvent('keydown', { key, cancelable: true });
+
+      input.element.dispatchEvent(event);
+
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it('should also block "-" when min="0"', () => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { type: 'integer', value: '' },
+        attrs:     { min: '0' },
+        mocks:     i18nMock
+      });
+      const input = wrapper.find('input');
+      const event = new KeyboardEvent('keydown', { key: '-', cancelable: true });
+
+      input.element.dispatchEvent(event);
+
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    function createPasteEvent(text: string): Event {
+      const event = new Event('paste', { cancelable: true });
+
+      (event as Event & { clipboardData: Pick<DataTransfer, 'getData'> }).clipboardData = { getData: () => text };
+
+      return event;
+    }
+
+    it.each([
+      '123',
+      '-5',
+    ])('should allow pasting valid integer "%s"', (text) => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { type: 'integer', value: '' },
+        mocks:     i18nMock
+      });
+      const input = wrapper.find('input');
+      const event = createPasteEvent(text);
+
+      input.element.dispatchEvent(event);
+
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it.each([
+      '-e10',
+      '1.5',
+      '12abc',
+      '1e5',
+    ])('should block pasting invalid integer "%s"', (text) => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { type: 'integer', value: '' },
+        mocks:     i18nMock
+      });
+      const input = wrapper.find('input');
+      const event = createPasteEvent(text);
+
+      input.element.dispatchEvent(event);
+
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it('should block pasting negative integer when min="0"', () => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { type: 'integer', value: '' },
+        attrs:     { min: '0' },
+        mocks:     i18nMock
+      });
+      const input = wrapper.find('input');
+      const event = createPasteEvent('-5');
+
+      input.element.dispatchEvent(event);
+
+      expect(event.defaultPrevented).toBe(true);
+    });
+  });
+
   describe('a11y: adding ARIA props', () => {
     const ariaLabelVal = 'some-aria-label';
     const subLabelVal = 'some-sublabel';

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -29,7 +29,11 @@ export default defineComponent({
     ...labeledFormElementProps,
     /**
      * The type of the Labeled Input.
-     * @values text, cron, multiline, multiline-password
+     *
+     * Any native HTML input type is passed through to the underlying input
+     * (e.g. text, password, number, email). A few custom values change the
+     * rendering or behaviour:
+     * @values cron (renders as text), multiline, multiline-password, integer (renders as text with inputmode="numeric", blocks non-integer input)
      */
     type: {
       type:    String,
@@ -150,6 +154,23 @@ export default defineComponent({
     });
 
     const effectiveStatus = computed(() => props.status);
+    const isInteger = computed(() => props.type === 'integer');
+    const nativeType = computed(() => {
+      if (props.type === 'cron') {
+        return 'text';
+      }
+
+      if (props.type === 'integer') {
+        return 'text';
+      }
+
+      return props.type;
+    });
+
+    // Hints the mobile keyboard to show a numeric layout, since the
+    // integer type renders as type="text" to avoid browser number
+    // formatting quirks (e.g. scientific notation for large values).
+    const inputMode = computed(() => (isInteger.value ? 'numeric' : undefined));
 
     return {
       focused,
@@ -163,6 +184,9 @@ export default defineComponent({
       veeHandleBlur,
       veeValidate,
       effectiveStatus,
+      isInteger,
+      nativeType,
+      inputMode,
     };
   },
 
@@ -325,6 +349,59 @@ export default defineComponent({
       }
     },
 
+    isValidIntegerInput(inputValue: string): boolean {
+      const integer = /^-?[0-9]*$/;
+      const nonNegativeInteger = /^[0-9]*$/;
+      const pattern = Number(this.$attrs.min) >= 0 ? nonNegativeInteger : integer;
+
+      if (!pattern.test(inputValue)) {
+        return false;
+      }
+
+      const numeric = Number(inputValue);
+
+      // Safe integer is primarily here to validate that the number fits in the datatype
+      // used for numbers in the browser, if we exceed this safe number the browser automatically converts the number to scientific notation.
+      if (inputValue !== '' && inputValue !== '-' && !Number.isSafeInteger(numeric)) {
+        return false;
+      }
+
+      return true;
+    },
+
+    prospectiveValue(input: HTMLInputElement, inserted: string): string {
+      const start = input.selectionStart ?? 0;
+      const end = input.selectionEnd ?? 0;
+
+      return input.value.slice(0, start) + inserted + input.value.slice(end);
+    },
+
+    onKeydown(event: KeyboardEvent): void {
+      // Skip named keys (Backspace, Arrow, etc.) and modifier shortcuts (Ctrl+A, Cmd+C).
+      if (!this.isInteger || event.key.length !== 1 || event.ctrlKey || event.metaKey) {
+        return;
+      }
+
+      const next = this.prospectiveValue(event.target as HTMLInputElement, event.key);
+
+      if (!this.isValidIntegerInput(next)) {
+        event.preventDefault();
+      }
+    },
+
+    onPaste(event: ClipboardEvent): void {
+      if (!this.isInteger) {
+        return;
+      }
+
+      const paste = event.clipboardData?.getData('text/plain') ?? '';
+      const next = this.prospectiveValue(event.target as HTMLInputElement, paste);
+
+      if (!this.isValidIntegerInput(next)) {
+        event.preventDefault();
+      }
+    },
+
     /**
      * Emit on input change
      */
@@ -435,14 +512,15 @@ export default defineComponent({
         :id="inputId"
         ref="value"
         v-stripped-aria-label="!hasLabel && ariaLabel ? ariaLabel : undefined"
-        :role="type === 'number' ? undefined : 'textbox'"
+        :role="nativeType === 'number' ? undefined : 'textbox'"
         :class="{ 'no-label': !hasLabel }"
         v-bind="$attrs"
         :name="name || undefined"
         :maxlength="_maxlength"
         :disabled="isDisabled"
         :aria-disabled="isDisabled"
-        :type="type === 'cron' ? 'text' : type"
+        :type="nativeType"
+        :inputmode="inputMode"
         :value="value"
         :placeholder="_placeholder"
         autocomplete="off"
@@ -451,6 +529,8 @@ export default defineComponent({
         :aria-describedby="ariaDescribedBy"
         :aria-required="requiredField"
         @input="onInput"
+        @keydown="onKeydown"
+        @paste="onPaste"
         @focus="onFocus"
         @blur="onBlur"
         @change="onChange"

package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue

@@ -77,6 +77,16 @@ export default defineComponent({
     disabled: {
       type:    Boolean,
       default: false
+    },
+
+    /**
+     * Recalculate the height when the value is changed programmatically (e.g.
+     * populated from a file) and when the window is resized, not just on user
+     * input. Opt-in to avoid changing the behaviour of existing usages.
+     */
+    resizeOnValueChangeAndResizeWindow: {
+      type:    Boolean,
+      default: false
     }
   },
 
@@ -117,6 +127,14 @@ export default defineComponent({
   },
 
   watch: {
+    // Recalculate the height when the value is changed programmatically (e.g.
+    // populated from a file), not just on user input. Opt-in via resizeOnValueChangeAndResizeWindow.
+    value() {
+      if (this.resizeOnValueChangeAndResizeWindow) {
+        this.queueResize();
+      }
+    },
+
     $attrs: {
       deep: true,
       handler() {
@@ -134,6 +152,18 @@ export default defineComponent({
     this.$nextTick(() => {
       this.autoSize();
     });
+
+    // Width changes alter text wrapping, so the required height can change when
+    // the window is resized. Opt-in via resizeOnValueChangeAndResizeWindow.
+    if (this.resizeOnValueChangeAndResizeWindow) {
+      window.addEventListener('resize', this.queueResize);
+    }
+  },
+
+  beforeUnmount() {
+    if (this.resizeOnValueChangeAndResizeWindow) {
+      window.removeEventListener('resize', this.queueResize);
+    }
   },
 
   methods: {

package/rancher-components/Form/TextArea/__tests__/TextAreaAutoGrow.test.ts

@@ -0,0 +1,95 @@
+import { mount } from '@vue/test-utils';
+import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
+
+describe('component: TextAreaAutoGrow', () => {
+  it('should recalculate its height when the value changes programmatically and resizeOnValueChangeAndResizeWindow is set', async() => {
+    const wrapper = mount(TextAreaAutoGrow, { props: { value: 'initial', resizeOnValueChangeAndResizeWindow: true } });
+
+    // queueResize is the (debounced) entrypoint that triggers autoSize
+    const queueResize = jest.fn();
+
+    wrapper.vm.queueResize = queueResize;
+
+    await wrapper.setProps({ value: 'a\nmuch\nlonger\nvalue\nset\nfrom\noutside' });
+
+    expect(queueResize).toHaveBeenCalledWith();
+  });
+
+  it('should not recalculate its height on programmatic value change by default', async() => {
+    const wrapper = mount(TextAreaAutoGrow, { props: { value: 'initial' } });
+
+    const queueResize = jest.fn();
+
+    wrapper.vm.queueResize = queueResize;
+
+    await wrapper.setProps({ value: 'a\nmuch\nlonger\nvalue\nset\nfrom\noutside' });
+
+    expect(queueResize).not.toHaveBeenCalled();
+  });
+
+  it('should recalculate its height on user input', async() => {
+    const wrapper = mount(TextAreaAutoGrow, { props: { value: '' } });
+
+    const queueResize = jest.fn();
+
+    wrapper.vm.queueResize = queueResize;
+
+    await wrapper.find('textarea').setValue('typed value');
+
+    expect(queueResize).toHaveBeenCalledWith();
+  });
+
+  it('should register a window resize listener when resizeOnValueChangeAndResizeWindow is set', () => {
+    const addSpy = jest.spyOn(window, 'addEventListener');
+
+    const wrapper = mount(TextAreaAutoGrow, { props: { value: 'initial', resizeOnValueChangeAndResizeWindow: true } });
+
+    const resizeListener = addSpy.mock.calls.find(([event]) => event === 'resize')?.[1];
+
+    expect(resizeListener).toBe(wrapper.vm.queueResize);
+
+    addSpy.mockRestore();
+  });
+
+  it('should not register a window resize listener by default', () => {
+    const addSpy = jest.spyOn(window, 'addEventListener');
+
+    mount(TextAreaAutoGrow, { props: { value: 'initial' } });
+
+    const resizeListener = addSpy.mock.calls.find(([event]) => event === 'resize')?.[1];
+
+    expect(resizeListener).toBeUndefined();
+
+    addSpy.mockRestore();
+  });
+
+  it('should recalculate its height when a window resize fires and resizeOnValueChangeAndResizeWindow is set', () => {
+    jest.useFakeTimers();
+    const component = TextAreaAutoGrow as unknown as { methods: Record<string, () => void> };
+    const autoSizeSpy = jest.spyOn(component.methods, 'autoSize');
+
+    mount(TextAreaAutoGrow, { props: { value: 'initial', resizeOnValueChangeAndResizeWindow: true } });
+    autoSizeSpy.mockClear();
+
+    window.dispatchEvent(new Event('resize'));
+    jest.advanceTimersByTime(150); // queueResize is debounced (100ms)
+
+    expect(autoSizeSpy).toHaveBeenCalledWith(expect.any(Event));
+
+    autoSizeSpy.mockRestore();
+    jest.useRealTimers();
+  });
+
+  it('should remove the window resize listener when unmounted', () => {
+    const removeSpy = jest.spyOn(window, 'removeEventListener');
+
+    const wrapper = mount(TextAreaAutoGrow, { props: { value: 'initial', resizeOnValueChangeAndResizeWindow: true } });
+    const { queueResize } = wrapper.vm;
+
+    wrapper.unmount();
+
+    expect(removeSpy).toHaveBeenCalledWith('resize', queueResize);
+
+    removeSpy.mockRestore();
+  });
+});

package/rancher-components/RcButton/index.ts

@@ -1,2 +1,2 @@
 export { default as RcButton } from './RcButton.vue';
-export type { RcButtonType } from './types';
+export type { RcButtonType, ButtonSize } from './types';

package/rancher-components/RcDropdown/RcDropdownTrigger.vue

@@ -3,9 +3,13 @@
  * A button that opens a menu. Used in conjunction with `RcDropdown.vue`.
  */
 import { inject, onMounted, ref } from 'vue';
-import { RcButton, RcButtonType } from '@components/RcButton';
+import { RcButton, RcButtonType, ButtonSize } from '@components/RcButton';
 import { DropdownContext, defaultContext } from './types';
 
+defineProps<{
+  size?: ButtonSize,
+}>();
+
 const {
   showMenu,
   registerTrigger,
@@ -32,6 +36,7 @@ defineExpose({ focus });
     role="button"
     aria-haspopup="menu"
     :aria-expanded="isMenuOpen"
+    :size="size"
     @keydown.enter.space="handleKeydown"
     @click="showMenu(true)"
   >

package/store/__tests__/auth.test.ts

@@ -134,3 +134,21 @@ describe('action: test', () => {
     });
   });
 });
+
+describe('action: getLocalProviderEnabled', () => {
+  it('should return true if local auth provider exists', async() => {
+    const dispatch = jest.fn().mockResolvedValue({ id: 'local' });
+    const result = await actions.getLocalProviderEnabled({ dispatch } as any);
+
+    expect(dispatch).toHaveBeenCalledWith('getAuthProvider', 'local');
+    expect(result).toBe(true);
+  });
+
+  it('should return false if local auth provider does not exist', async() => {
+    const dispatch = jest.fn().mockResolvedValue(undefined);
+    const result = await actions.getLocalProviderEnabled({ dispatch } as any);
+
+    expect(dispatch).toHaveBeenCalledWith('getAuthProvider', 'local');
+    expect(result).toBe(false);
+  });
+});