Changed navlink page and improved error handling for FileImageUpload (#9411)

Author: eva-vashkevich

docusaurus/docs/code-base-works/forms-and-validation.md

@@ -70,6 +70,8 @@ While individual fields are typically responsible for displaying their own valid
 To use the `form-validation` mixin, import the mixin and include it in `mixins` in the component like any other mixin. Once included, ensure the following:
 1. Set the "validation-passed" property on the `CruResource` component to "fvFormIsValid" (computed property provided by the mixin). This conditionally disables the "save" button on the form.
 2. Set the "errors" property on the `CruResource` component to "fvUnreportedValidationErrors" (computed property provided by the mixin) or some other value that aggregates errors not otherwise shown in the form as a fallback means of displaying error state to the user.
+3. Add ":rules" to the input component to bind validation rule to the field.
+
 
 The `form-validation` mixin itself includes most of the information a developer will need to use it in comments in the file itself but a high-level summary would cover the following points:
 

jest.config.js

@@ -18,7 +18,8 @@ module.exports = {
   transform: {
     '^.+\\.js$':   '<rootDir>/node_modules/babel-jest', // process js with `babel-jest`
     '.*\\.(vue)$': '<rootDir>/node_modules/@vue/vue2-jest', // process `*.vue` files with `vue-jest`
-    '^.+\\.tsx?$': 'ts-jest' // process `*.ts` files with `ts-jest`
+    '^.+\\.tsx?$': 'ts-jest', // process `*.ts` files with `ts-jest`
+    '^.+\\.svg$':  '<rootDir>/svgTransform.js' // to mock `*.svg` files
   },
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   collectCoverage:     false,

shell/assets/translations/en-us.yaml

@@ -3512,10 +3512,13 @@ navLink:
         label: Group name
         tooltip: Assign link to a group
       sideLabel:
-        label: Link Label
+        label: Link label
       description:
         label: Link description
+    groupImage:
+      label: Group Image
       iconSrc:
+        tip: 'Image height should be 21 pixels with a max width of 200 pixels. Max file size is 20KB. Accepted formats: JPEG, PNG, SVG.'
         label: Add image
 networkpolicy:
   egress:

shell/components/LazyImage.vue

@@ -3,12 +3,12 @@ export default {
   props: {
     initialSrc: {
       type:    String,
-      default: require('~shell/assets/images/generic-catalog.svg'),
+      default: require('@shell/assets/images/generic-catalog.svg'),
     },
 
     errorSrc: {
       type:    String,
-      default: require('~shell/assets/images/generic-catalog.svg'),
+      default: require('@shell/assets/images/generic-catalog.svg'),
     },
 
     src: {

shell/components/form/FileImageSelector.vue

@@ -31,6 +31,10 @@ export default {
       type:    Number,
       default: 200000
     },
+    accept: {
+      type:    String,
+      default: 'image/*'
+    }
   },
   computed: {
     isView() {
@@ -44,6 +48,9 @@ export default {
      */
     setIcon(event) {
       this.$emit('input', event);
+    },
+    setError(error) {
+      this.$emit('error', error);
     }
   }
 };
@@ -58,7 +65,9 @@ export default {
     :read-as-data-url="true"
     :byte-limit="byteLimit"
     :label="label"
+    :accept="accept"
     @selected="setIcon"
+    @error="setError"
   />
 
   <div

shell/components/form/FileSelector.vue

@@ -63,7 +63,8 @@ export default {
     accept: {
       type:    String,
       default: '*'
-    }
+    },
+
   },
 
   computed: {

shell/components/form/__tests__/FileImageSelector.test.ts

@@ -0,0 +1,42 @@
+/* eslint-disable jest/no-hooks */
+import FileImageSelector from '@shell/components/form/FileImageSelector';
+import { mount } from '@vue/test-utils';
+import FileSelector from '@shell/components/form/FileSelector';
+
+describe('component: FileImageSelector', () => {
+  let wrapper: any;
+
+  beforeEach(() => {
+    wrapper = mount(FileImageSelector, {
+      propsData: { label: 'upload' },
+      mocks:     {},
+      methods:   {},
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render', () => {
+    const uploadButton = wrapper.find('.btn');
+
+    expect(wrapper.isVisible()).toBe(true);
+    expect(uploadButton.exists()).toBeTruthy();
+  });
+  it('should throw error if file could not be uploaded', async() => {
+    const fs = wrapper.findComponent(FileSelector);
+
+    expect(fs.exists()).toBeTruthy();
+    await fs.vm.$emit('error');
+
+    expect(wrapper.emitted('error')).toHaveLength(1);
+  });
+
+  it('should emit input on image upload', async() => {
+    const fs = wrapper.findComponent(FileSelector);
+
+    await fs.vm.$emit('selected');
+    expect(wrapper.emitted('input')).toHaveLength(1);
+  });
+});

shell/components/form/__tests__/FileSelector.test.ts

@@ -0,0 +1,76 @@
+/* eslint-disable jest/no-hooks */
+import FileSelector from '@shell/components/form/FileSelector';
+import { mount } from '@vue/test-utils';
+
+describe('component: FileSelector', () => {
+  let wrapper: any;
+
+  beforeEach(() => {
+    jest.restoreAllMocks();
+  });
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const binaryString = Buffer.from('/9j/4AAQSkZJRgABAQAASABIAAD/4QCARXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAKgAgAEAAAAAQAAADmgAwAEAAAAAQAAAFEAAAAA/+0AOFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/iAihJQ0NfUFJPRklMRQABAQAAAhgAAAAABDAAAG1udHJSR0IgWFlaIAAAAAAAAAAAAAAAAGFjc3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD21gABAAAAANMtAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACWRlc2MAAADwAAAAdHJYWVoAAAFkAAAAFGdYWVoAAAF4AAAAFGJYWVoAAAGMAAAAFHJUUkMAAAGgAAAAKGdUUkMAAAGgAAAAKGJUUkMAAAGgAAAAKHd0cHQAAAHIAAAAFGNwcnQAAAHcAAAAPG1sdWMAAAAAAAAAAQAAAAxlblVTAAAAWAAAABwAcwBSAEcAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAG+iAAA49QAAA5BYWVogAAAAAAAAYpkAALeFAAAY2lhZWiAAAAAAAAAkoAAAD4QAALbPcGFyYQAAAAAABAAAAAJmZgAA8qcAAA1ZAAAT0AAAClsAAAAAAAAAAFhZWiAAAAAAAAD21gABAAAAANMtbWx1YwAAAAAAAAABAAAADGVuVVMAAAAgAAAAHABHAG8AbwBnAGwAZQAgAEkAbgBjAC4AIAAyADAAMQA2/8AAEQgAUQA5AwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMAEAsMDgwKEA4NDhIREBMYKBoYFhYYMSMlHSg6Mz08OTM4N0BIXE5ARFdFNzhQbVFXX2JnaGc+TXF5cGR4XGVnY//bAEMBERISGBUYLxoaL2NCOEJjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY//dAAQABP/aAAwDAQACEQMRAD8AdRRRX0B4gUUUUAFFFFABRRRQB//QdRRRX0B4gUUUUAFFFFABRRRQB//RdRRRX0B4gUUUUAFFFFABRRRQB//SdRRRX0B4gUUUUAFFFFABRRRQB//TdRRRX0B4gUUUUAFFFFAwooooA//UdRRRX0B4gUUUUAFFFFAwooooA//Z', 'base64'); // Binary data string
+  const jpegBlobFile = new Blob([binaryString], { type: 'image/jpeg' });
+  const obj = { hello: 'world' };
+  const jsonBlobFile = new Blob([JSON.stringify(obj, null, 2)], { type: 'application/json' });
+
+  it('should render', () => {
+    wrapper = mount(FileSelector, {
+      propsData: { label: 'upload' },
+      mocks:     {},
+      methods:   {},
+    });
+
+    const uploadButton = wrapper.find('.btn');
+
+    expect(wrapper.isVisible()).toBe(true);
+    expect(uploadButton.exists()).toBeTruthy();
+  });
+
+  it('should succeed when loading an image', async() => {
+    wrapper = mount(FileSelector, {
+      propsData: { label: 'upload', accept: 'image/jpeg,image/png,image/svg+xml' },
+      mocks:     {},
+      methods:   {},
+    });
+    const readAsTextSpy = jest.spyOn(FileReader.prototype, 'readAsText');
+
+    const event = {
+      target: {
+        files: [
+          jpegBlobFile
+        ]
+      }
+    };
+
+    await wrapper.vm.fileChange(event);
+    expect(wrapper.emitted('selected')).toHaveLength(1);
+    expect(readAsTextSpy).toHaveBeenCalledWith(jpegBlobFile);
+  });
+
+  it('should fail when file is too big', async() => {
+    wrapper = mount(FileSelector, {
+      propsData: {
+        label: 'upload', accept: 'image/jpeg,image/png,image/svg+xml', byteLimit: 10
+      },
+      mocks:   {},
+      methods: {},
+    });
+    const readAsTextSpy = jest.spyOn(FileReader.prototype, 'readAsText');
+
+    const event = {
+      target: {
+        files: [
+          jpegBlobFile
+        ]
+      }
+    };
+
+    await wrapper.vm.fileChange(event);
+    expect(wrapper.emitted('error')).toHaveLength(1);
+    expect(readAsTextSpy).not.toHaveBeenCalledWith(jsonBlobFile);
+  });
+});

shell/edit/__tests__/ui.cattle.io.navlink.test.ts

@@ -0,0 +1,110 @@
+/* eslint-disable jest/no-hooks */
+import { mount } from '@vue/test-utils';
+import Navlink from '@shell/edit/ui.cattle.io.navlink.vue';
+import { _CREATE } from '@shell/config/query-params';
+import CruResource from '@shell/components/CruResource';
+
+describe('view: ui.cattle.io.navlink should', () => {
+  const name = 'test';
+  const url = 'http://test.com';
+  let wrapper: any;
+
+  const requiredSetup = () => ({
+    // Remove all these mocks after migration to Vue 2.7/3 due mixin logic
+    mocks: {
+      $store: {
+        getters: {
+          currentStore:              () => 'current_store',
+          'current_store/schemaFor': jest.fn(),
+          'current_store/all':       jest.fn(),
+          'i18n/t':                  (val) => val,
+          'i18n/exists':             jest.fn(),
+        }
+      },
+      $route:  { query: { AS: '' } },
+      $router: { applyQuery: jest.fn() },
+    },
+    propsData: {
+      metadata:   { namespace: 'test' },
+      spec:       { template: {} },
+      targetInfo: { mode: 'all' },
+      value:      {},
+      mode:       _CREATE,
+    },
+
+  });
+
+  beforeEach(() => {
+    wrapper = mount(Navlink, { ...requiredSetup() });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('have "Create" button disabled before fields are filled in', () => {
+    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+    expect(saveButton.disabled).toBe(true);
+  });
+  it('have "Create" button disabled when Link type is URL and only name is filled in', async() => {
+    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+    const nameField = wrapper.find('[data-testid="Navlink-name-field"]').find('input');
+
+    nameField.setValue(name);
+
+    await wrapper.vm.$nextTick();
+
+    expect(saveButton.disabled).toBe(true);
+  });
+  it('have "Create" button enabled when Link type is URL and all required fields are filled in', async() => {
+    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+    const nameField = wrapper.find('[data-testid="Navlink-name-field"]').find('input');
+    const urlField = wrapper.find('[data-testid="Navlink-url-field"]');
+
+    nameField.setValue(name);
+    urlField.setValue(url);
+
+    await wrapper.vm.$nextTick();
+
+    expect(saveButton.disabled).toBe(false);
+  });
+
+  it('have "Create" button disabled when Link type is Service and and only name is filled in', async() => {
+    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+    const nameField = wrapper.find('[data-testid="Navlink-name-field"]').find('input');
+    const rg = wrapper.find('[data-testid="Navlink-link-radiogroup"]');
+
+    const serviceBttn = rg.findAll('.radio-label').at(1);
+
+    nameField.setValue(name);
+    serviceBttn.trigger('click');
+    await wrapper.vm.$nextTick();
+
+    expect(saveButton.disabled).toBe(true);
+  });
+
+  it('have "Create" button enabled when Link type is Service and and all required fields are filled in', async() => {
+    const nameField = wrapper.find('[data-testid="Navlink-name-field"]').find('input');
+    const rg = wrapper.find('[data-testid="Navlink-link-radiogroup"]');
+
+    const serviceBttn = rg.findAll('.radio-label').at(1);
+
+    nameField.setValue(name);
+    serviceBttn.trigger('click');
+    await wrapper.vm.$nextTick();
+
+    const schemeField = wrapper.find('[data-testid="Navlink-scheme-field"]');
+    const serviceField = wrapper.find('[data-testid="Navlink-currentService-field"]');
+
+    schemeField.find('button').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
+
+    serviceField.find('button').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
+
+    expect(CruResource.computed.canSave()).toBe(true);
+  });
+});