@rancher/shell 0.3.20 → 0.3.21

package/components/Questions/__tests__/Int.test.ts

@@ -0,0 +1,123 @@
+import Questions from '@shell/components/Questions';
+import { mount } from '@vue/test-utils';
+import { _EDIT } from '@shell/config/query-params';
+const defaultStubs = {
+  Tab:    true,
+  Tabbed: true,
+};
+const defaultGetters = {
+  currentStore:           () => 'current_store',
+  'management/schemaFor': jest.fn(),
+  'current_store/all':    jest.fn(),
+  'i18n/t':               jest.fn(),
+  'i18n/withFallback':    jest.fn((key, args, fallback) => fallback),
+};
+
+describe('the Int Component', () => {
+  it('input field is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable: 'var_name',
+          type:     'int',
+          label:    '',
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="int-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const descriptionFields = wrapper.findAll('[data-testid="int-description-var_name"]');
+
+    expect(descriptionFields).toHaveLength(0);
+
+    const labelFields = wrapper.findAll('[data-testid="int-row-var_name"] label');
+
+    expect(labelFields).toHaveLength(1);
+    expect(labelFields.at(0).text()).toBe('var_name');
+  });
+
+  it('description is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable:    'var_name',
+          type:        'int',
+          description: 'test description'
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="int-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const descriptionFields = wrapper.findAll('[data-testid="int-description-var_name"]');
+
+    expect(descriptionFields).toHaveLength(1);
+    expect(descriptionFields.at(0).text()).toBe('test description');
+  });
+
+  it('label is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable: 'var_name',
+          type:     'int',
+          label:    'test label'
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="int-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const labelFields = wrapper.findAll('[data-testid="int-row-var_name"] label');
+
+    expect(labelFields).toHaveLength(1);
+    expect(labelFields.at(0).text()).toBe('test label');
+  });
+
+  it('tooltip is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable: 'var_name',
+          type:     'int',
+          tooltip:  'test tooltip'
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="int-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const labelFields = wrapper.findAll('[data-testid="int-row-var_name"] .labeled-tooltip');
+
+    expect(labelFields).toHaveLength(1);
+  });
+});

package/components/Questions/__tests__/String.test.ts

@@ -0,0 +1,123 @@
+import Questions from '@shell/components/Questions';
+import { mount } from '@vue/test-utils';
+import { _EDIT } from '@shell/config/query-params';
+const defaultStubs = {
+  Tab:    true,
+  Tabbed: true,
+};
+const defaultGetters = {
+  currentStore:           () => 'current_store',
+  'management/schemaFor': jest.fn(),
+  'current_store/all':    jest.fn(),
+  'i18n/t':               jest.fn(),
+  'i18n/withFallback':    jest.fn((key, args, fallback) => fallback),
+};
+
+describe('the String Component', () => {
+  it('input field is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable: 'var_name',
+          type:     'string',
+          label:    '',
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="string-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const descriptionFields = wrapper.findAll('[data-testid="string-description-var_name"]');
+
+    expect(descriptionFields).toHaveLength(0);
+
+    const labelFields = wrapper.findAll('[data-testid="string-row-var_name"] label');
+
+    expect(labelFields).toHaveLength(1);
+    expect(labelFields.at(0).text()).toBe('var_name');
+  });
+
+  it('description is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable:    'var_name',
+          type:        'string',
+          description: 'test description'
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="string-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const descriptionFields = wrapper.findAll('[data-testid="string-description-var_name"]');
+
+    expect(descriptionFields).toHaveLength(1);
+    expect(descriptionFields.at(0).text()).toBe('test description');
+  });
+
+  it('label is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable: 'var_name',
+          type:     'string',
+          label:    'test label'
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="string-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const labelFields = wrapper.findAll('[data-testid="string-row-var_name"] label');
+
+    expect(labelFields).toHaveLength(1);
+    expect(labelFields.at(0).text()).toBe('test label');
+  });
+
+  it('tooltip is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable: 'var_name',
+          type:     'string',
+          tooltip:  'test tooltip'
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="string-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const labelFields = wrapper.findAll('[data-testid="string-row-var_name"] .labeled-tooltip');
+
+    expect(labelFields).toHaveLength(1);
+  });
+});

package/components/Questions/__tests__/Yaml.test.ts

@@ -0,0 +1,123 @@
+import Questions from '@shell/components/Questions';
+import { mount } from '@vue/test-utils';
+import { _EDIT } from '@shell/config/query-params';
+const defaultStubs = {
+  Tab:    true,
+  Tabbed: true,
+};
+const defaultGetters = {
+  currentStore:           () => 'current_store',
+  'management/schemaFor': jest.fn(),
+  'current_store/all':    jest.fn(),
+  'i18n/t':               jest.fn(),
+  'i18n/withFallback':    jest.fn((key, args, fallback) => fallback),
+};
+
+describe('the yaml Component', () => {
+  it('input field is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable: 'var_name',
+          type:     'yaml',
+          label:    '',
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="yaml-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const descriptionFields = wrapper.findAll('[data-testid="yaml-description-var_name"]');
+
+    expect(descriptionFields).toHaveLength(0);
+
+    const labelFields = wrapper.findAll('[data-testid="yaml-row-var_name"] h3');
+
+    expect(labelFields).toHaveLength(1);
+    expect(labelFields.at(0).text()).toBe('var_name');
+  });
+
+  it('description is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable:    'var_name',
+          type:        'yaml',
+          description: 'test description'
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="yaml-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const descriptionFields = wrapper.findAll('[data-testid="yaml-description-var_name"]');
+
+    expect(descriptionFields).toHaveLength(1);
+    expect(descriptionFields.at(0).text()).toBe('test description');
+  });
+
+  it('label is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable: 'var_name',
+          type:     'yaml',
+          label:    'test label'
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="yaml-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const labelFields = wrapper.findAll('[data-testid="yaml-row-var_name"] h3');
+
+    expect(labelFields).toHaveLength(1);
+    expect(labelFields.at(0).text()).toBe('test label');
+  });
+
+  it('tooltip is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable: 'var_name',
+          type:     'yaml',
+          tooltip:  'test tooltip'
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="yaml-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const labelFields = wrapper.findAll('[data-testid="yaml-row-var_name"] .has-tooltip');
+
+    expect(labelFields).toHaveLength(1);
+  });
+});

package/components/Questions/index.vue

@@ -13,12 +13,17 @@ import ArrayType from './Array';
 import MapType from './QuestionMap';
 import ReferenceType from './Reference';
 import CloudCredentialType from './CloudCredential';
+import RadioType from './Radio';
+import YamlType from './Yaml';
 
 export const knownTypes = {
   string:          StringType,
-  hostname:        StringType, // @TODO
+  hostname:        StringType,
   multiline:       StringType,
   password:        StringType,
+  ipaddr:          StringType,
+  cidr:            StringType,
+  cron:            StringType,
   boolean:         BooleanType,
   enum:            EnumType,
   int:             IntType,
@@ -30,6 +35,8 @@ export const knownTypes = {
   storageclass:    ReferenceType,
   pvc:             ReferenceType,
   cloudcredential: CloudCredentialType,
+  radio:           RadioType,
+  yaml:            YamlType,
 };
 
 export function componentForQuestion(q) {

package/components/ResourceTable.vue

@@ -7,6 +7,7 @@ import SortableTable from '@shell/components/SortableTable';
 import { NAMESPACE, AGE } from '@shell/config/table-headers';
 import { findBy } from '@shell/utils/array';
 import { ExtensionPoint, TableColumnLocation } from '@shell/core/types';
+import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 
 // Default group-by in the case the group stored in the preference does not apply
 const DEFAULT_GROUP = 'namespace';
@@ -223,7 +224,6 @@ export default {
     _headers() {
       let headers;
       const showNamespace = this.showNamespaceColumn;
-      const type = this.schema?.id || this.$route?.params?.resource || undefined;
 
       if ( this.headers ) {
         headers = this.headers.slice();
@@ -234,7 +234,7 @@ export default {
       // add custom table columns provided by the extensions ExtensionPoint.TABLE_COL hook
       // gate it so that we prevent errors on older versions of dashboard
       if (this.$store.$plugin?.getUIConfig) {
-        const extensionCols = this.$store.$plugin.getUIConfig(ExtensionPoint.TABLE_COL, TableColumnLocation.RESOURCE);
+        const extensionCols = getApplicableExtensionEnhancements(this, ExtensionPoint.TABLE_COL, TableColumnLocation.RESOURCE, this.$route);
 
         // Try and insert the columns before the Age column
         let insertPosition = headers.length;
@@ -257,17 +257,11 @@ export default {
 
         // adding extension defined cols to the correct header config
         extensionCols.forEach((col) => {
-          if (col.locationConfig.resource) {
-            col.locationConfig.resource.forEach((resource) => {
-              if (resource && type === resource) {
-                // we need the 'value' prop to be populated in order for the rows to show the values
-                if (!col.value && col.getValue) {
-                  col.value = col.getValue;
-                }
-                headers.splice(insertPosition, 0, col);
-              }
-            });
+          // we need the 'value' prop to be populated in order for the rows to show the values
+          if (!col.value && col.getValue) {
+            col.value = col.getValue;
           }
+          headers.splice(insertPosition, 0, col);
         });
       }