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

package/pages/c/_cluster/auth/config/index.vue

@@ -6,6 +6,7 @@ import { MODE, _EDIT } from '@shell/config/query-params';
 import { authProvidersInfo } from '@shell/utils/auth';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
+import { HIDE_LOCAL_AUTH_PROVIDER } from '@shell/store/features';
 
 const resource = MANAGEMENT.AUTH_CONFIG;
 
@@ -28,8 +29,9 @@ export default {
   data() {
     return {
       // Provided by fetch later
-      enabled:  false,
-      nonLocal: null,
+      enabled:          false,
+      nonLocal:         null,
+      disableLocalAuth: this.$store.getters['features/get'](HIDE_LOCAL_AUTH_PROVIDER)
     };
   },
 
@@ -100,8 +102,13 @@ export default {
         <router-link :to="localUsersRoute">
           {{ t('authConfig.manageLocal') }}
         </router-link>
-        <br>
-        {{ t('authConfig.noneEnabled') }}
+        <br><br>
+        <template v-if="disableLocalAuth">
+          {{ t('authConfig.bannerEnableAuthProvider', null, true) }}
+        </template>
+        <template v-else>
+          {{ t('authConfig.noneEnabled') }}
+        </template>
       </div>
     </Banner>
     <SelectIconGrid

package/pages/c/_cluster/monitoring/index.vue

@@ -106,7 +106,12 @@ export default {
         const grafanaMatch = findBy(externalLinks, 'group', 'grafana');
         // Generate Grafana link
         const currentCluster = this.$store.getters['currentCluster'];
-        const rancherMonitoring = !isEmpty(res.apps) ? findBy(res.apps, 'id', 'cattle-monitoring-system/rancher-monitoring') : '';
+        let rancherMonitoring = !isEmpty(res.apps) ? findBy(res.apps, 'id', 'cattle-monitoring-system/rancher-monitoring-dashboards') : '';
+
+        if (!rancherMonitoring) {
+          rancherMonitoring = !isEmpty(res.apps) ? findBy(res.apps, 'id', 'cattle-monitoring-system/rancher-monitoring') : '';
+        }
+
         const clusterPrefix = getClusterPrefix(rancherMonitoring?.currentVersion || '', currentCluster.id);
 
         grafanaMatch.link = `${ clusterPrefix }/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/`;

package/plugins/dashboard-store/resource-class.js

@@ -1253,8 +1253,11 @@ export default class Resource {
 
   async _save(opt = { }) {
     const forNew = !this.id;
+    let errors;
 
-    const errors = this.validationErrors(this, opt);
+    if (!opt.skipUIValidation) {
+      errors = this.validationErrors(this, opt);
+    }
 
     if (!isEmpty(errors)) {
       return Promise.reject(errors);
@@ -1294,7 +1297,9 @@ export default class Resource {
     // @TODO remove this once the API maps steve _type <-> k8s type in both directions
     // `JSON.parse(JSON.stringify` - Completely disconnect the object we're going to send and `this`. This ensures that properties
     // removed from opt.data before sending (as part of cleanForSave) are not stripped from where they're still needed (`this`)
-    opt.data = this.toSave() || JSON.parse(JSON.stringify(this));
+    if (!(opt.method === 'patch')) {
+      opt.data = this.toSave() || JSON.parse(JSON.stringify(this));
+    }
 
     if (opt.data._type) {
       opt.data.type = opt.data._type;
@@ -1312,7 +1317,9 @@ export default class Resource {
       opt.data.annotations = opt.data._annotations;
     }
 
-    opt.data = this.cleanForSave(opt.data, forNew);
+    if (!(opt.method === 'patch')) {
+      opt.data = this.cleanForSave(opt.data, forNew);
+    }
 
     // handle "replace" opt as a query param _replace=true for norman PUT requests
     if (opt?.replace && opt.method === 'put') {

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/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);
+  });
+});