@rancher/shell 3.0.5-rc.3 → 3.0.5-rc.6

package/components/__tests__/ConfigMapSettings.test.ts

@@ -0,0 +1,376 @@
+
+import { mount } from '@vue/test-utils';
+import ConfigMapSettings, { Setting } from '@shell/components/ConfigMapSettings/index.vue';
+import { _EDIT } from '@shell/config/query-params';
+import { CONFIG_MAP } from '@shell/config/types';
+import jsyaml from 'js-yaml';
+
+const mockedStore = () => {
+  return {
+    getters: {
+      'cluster/schemaFor':    jest.fn(),
+      'management/schemaFor': jest.fn(),
+      'i18n/t':               (text: string, v = {}) => {
+        return `${ text }${ Object.values(v) }`;
+      },
+    },
+  };
+};
+
+const mockedRoute = { query: {} };
+
+const requiredSetup = () => {
+  return {
+    global: {
+      mocks: {
+        $store:      mockedStore(),
+        $route:      mockedRoute,
+        $fetchState: {},
+      },
+      stubs: { AsyncButton: true }
+    }
+  };
+};
+
+const settings = {
+  garbageCollectionInterval: {
+    weight:  0,
+    type:    'string',
+    path:    'garbageCollectionInterval',
+    default: '15m',
+  },
+  garbageCollectionIntervalNumber: {
+    weight:  0,
+    type:    'number',
+    handler: 'UnitInput',
+    path:    'garbageCollectionIntervalNumber',
+    default: '15m',
+  },
+  gitClientTimeout: {
+    weight:  1,
+    type:    'string',
+    path:    'gitClientTimeout',
+    default: '30s',
+  },
+  gitClientTimeoutNumber: {
+    weight:  1,
+    type:    'number',
+    handler: 'UnitInput',
+    path:    'gitClientTimeoutNumber',
+    default: '30s',
+  },
+  gitjobReplicas: {
+    weight:  1,
+    type:    'number',
+    path:    'gitjob.replicas',
+    default: 1,
+  },
+  multiSelect: {
+    weight:  4,
+    type:    'array',
+    path:    'multiSelect',
+    default: 'foo',
+    items:   [{
+      type:  'string',
+      value: 'foo'
+    }, {
+      type:  'string',
+      value: 'bar'
+    }],
+  },
+  singleSelect: {
+    weight: 1,
+    type:   'string',
+    items:  [{
+      type:  'string',
+      value: 'strict'
+    }, {
+      type:  'string',
+      value: 'system-store'
+    }],
+    path:    'agentTLSMode',
+    default: 'system-store',
+  },
+  nodeSelector: {
+    weight:  1,
+    type:    'object',
+    handler: 'Textarea',
+    path:    'nodeSelector',
+    default: {},
+  },
+  nodeSelectorKeyValue: {
+    weight:  1,
+    type:    'object',
+    handler: 'KeyValue',
+    path:    'nodeSelectorKeyValue',
+    default: { foo: 'val' },
+  },
+  debug: {
+    weight:  1,
+    type:    'boolean',
+    path:    'debug',
+    default: false,
+  },
+  tolerationsTaints: {
+    weight:  2,
+    type:    'object',
+    handler: 'Taints',
+    path:    'tolerationsTaints',
+    default: [{
+      key:    'foo1',
+      value:  'bar1',
+      effect: 'PreferNoSchedule'
+    }],
+  },
+} as Record<string, Setting>;
+
+const groups = [{
+  name:     'general',
+  children: [
+    'garbageCollectionInterval',
+    'gitClientTimeout'
+  ],
+  expanded: true,
+  weight:   0
+}];
+
+const configMap = {
+  type:     CONFIG_MAP,
+  metadata: {
+    namespace: 'ns',
+    name:      'name'
+  },
+  data: {
+    fleet: jsyaml.dump({
+      foo:                             'bar',
+      garbageCollectionInterval:       '1h',
+      gitjob:                          { replicas: 5 },
+      debug:                           true,
+      nodeSelector:                    { key: 'value1' },
+      garbageCollectionIntervalNumber: '14m',
+      gitClientTimeoutNumber:          '3m',
+      nodeSelectorKeyValue:            { foo: 'bar' },
+      tolerationsTaints:               [{
+        key:    'foo',
+        value:  'bar',
+        effect: 'PreferNoSchedule'
+      }]
+    }),
+    foo: { bar: 'value' }
+  },
+  save: () => {},
+};
+
+describe('component: ConfigMapSettings', () => {
+  it('should init values from settings descriptor default values, having ConfigMap === null', async() => {
+    const wrapper = mount(ConfigMapSettings, {
+      ...requiredSetup(),
+      props: {
+        settings,
+        groups,
+        name:      'cm-name',
+        namespace: 'cm-namespace',
+        dataKey:   'fleet'
+      },
+      computed: {
+        mode:       () => _EDIT,
+        canEdit:    () => true,
+        fetchState: () => ({ $fetchState: false }),
+      },
+    });
+
+    wrapper.vm.initValues();
+
+    await wrapper.vm.$nextTick();
+
+    const generalGroup = wrapper.find('[data-testid="cm-settings-group-body-general"]');
+
+    const garbageCollectionInterval = wrapper.find('[data-testid="cm-settings-field-string-garbageCollectionInterval"]').element as HTMLInputElement;
+    const garbageCollectionIntervalNumber = wrapper.find('[data-testid="cm-settings-field-number-UnitInput-garbageCollectionIntervalNumber"]').element as HTMLInputElement;
+    const gitClientTimeout = wrapper.find('[data-testid="cm-settings-field-string-gitClientTimeout"]').element as HTMLInputElement;
+    const gitClientTimeoutNumber = wrapper.find('[data-testid="cm-settings-field-number-UnitInput-gitClientTimeoutNumber"]').element as HTMLInputElement;
+    const gitjobReplicas = wrapper.find('[data-testid="cm-settings-field-number-gitjobReplicas"]').element as HTMLInputElement;
+    const multiSelect = wrapper.find('[data-testid="cm-settings-field-array-multiSelect"]').element as HTMLInputElement;
+    const nodeSelector = wrapper.find('[data-testid="cm-settings-field-object-Textarea-nodeSelector"]').element as HTMLInputElement;
+    const nodeSelectorKeyValue = wrapper.find('[data-testid="cm-settings-field-object-KeyValue-nodeSelectorKeyValue"]').find('[data-testid="input-kv-item-key-0"]').element as HTMLInputElement;
+    const tolerationsTaints = wrapper.find('[data-testid="cm-settings-field-object-Taints-tolerationsTaints"]').find('[data-testid="input-kv-item-key-0"]').element as HTMLInputElement;
+    const singleSelect = wrapper.find('[data-testid="cm-settings-field-string-singleSelect"]').element as HTMLInputElement;
+    const debug = wrapper.find('[data-testid="cm-settings-field-boolean-debug"]').find('input[type="checkbox"]').element as HTMLInputElement;
+
+    expect(generalGroup.exists()).toBe(true);
+    expect(garbageCollectionInterval.value).toBe('15m');
+    expect(garbageCollectionIntervalNumber.value).toBe('900');
+    expect(gitClientTimeout.value).toBe('30s');
+    expect(gitClientTimeoutNumber.value).toBe('30');
+    expect(multiSelect.textContent).toContain('foo');
+    expect(singleSelect.textContent).toContain('system-store');
+    expect(nodeSelector.value).toBe('{}');
+    expect(nodeSelectorKeyValue.value).toBe('foo');
+    expect(tolerationsTaints.value).toBe('foo1');
+    expect(gitjobReplicas.value).toBe('1');
+    expect(debug.checked).toBe(false);
+  });
+
+  it('should display error when parsing malformed values', async() => {
+    const wrapper = mount(ConfigMapSettings, {
+      ...requiredSetup(),
+      props: {
+        settings,
+        groups,
+        name:      'cm-name',
+        namespace: 'cm-namespace',
+        dataKey:   'fleet'
+      },
+      computed: {
+        mode:       () => _EDIT,
+        canEdit:    () => true,
+        fetchState: () => ({ $fetchState: false }),
+      },
+    });
+
+    wrapper.setData({
+      configMap: {
+        type:     CONFIG_MAP,
+        metadata: {
+          namespace: 'ns',
+          name:      'name'
+        },
+        data: {
+          fleet: { foo: 'bar' },
+          foo:   { bar: 'value' }
+        }
+      }
+    });
+
+    wrapper.vm.initValues();
+
+    await wrapper.vm.$nextTick();
+
+    const error = wrapper.find('[data-testid="cm-settings-error"]');
+
+    expect(error.text()).toContain('parseError');
+  });
+
+  it('should merge settings descriptor default values with ConfigMap values', async() => {
+    const wrapper = mount(ConfigMapSettings, {
+      ...requiredSetup(),
+      props: {
+        settings,
+        groups,
+        name:      'cm-name',
+        namespace: 'cm-namespace',
+        dataKey:   'fleet'
+      },
+      computed: {
+        mode:       () => _EDIT,
+        canEdit:    () => true,
+        fetchState: () => ({ $fetchState: false }),
+      },
+    });
+
+    wrapper.setData({ configMap });
+
+    wrapper.vm.initValues();
+
+    await wrapper.vm.$nextTick();
+
+    const garbageCollectionInterval = wrapper.find('[data-testid="cm-settings-field-string-garbageCollectionInterval"]').element as HTMLInputElement;
+    const gitClientTimeout = wrapper.find('[data-testid="cm-settings-field-string-gitClientTimeout"]').element as HTMLInputElement;
+    const gitjobReplicas = wrapper.find('[data-testid="cm-settings-field-number-gitjobReplicas"]').element as HTMLInputElement;
+    const multiSelect = wrapper.find('[data-testid="cm-settings-field-array-multiSelect"]').element as HTMLInputElement;
+    const nodeSelector = wrapper.find('[data-testid="cm-settings-field-object-Textarea-nodeSelector"]').element as HTMLInputElement;
+    const singleSelect = wrapper.find('[data-testid="cm-settings-field-string-singleSelect"]').element as HTMLInputElement;
+    const debug = wrapper.find('[data-testid="cm-settings-field-boolean-debug"]').find('input[type="checkbox"]').element as HTMLInputElement;
+    const garbageCollectionIntervalNumber = wrapper.find('[data-testid="cm-settings-field-number-UnitInput-garbageCollectionIntervalNumber"]').element as HTMLInputElement;
+    const gitClientTimeoutNumber = wrapper.find('[data-testid="cm-settings-field-number-UnitInput-gitClientTimeoutNumber"]').element as HTMLInputElement;
+    const nodeSelectorKeyValue = wrapper.find('[data-testid="cm-settings-field-object-KeyValue-nodeSelectorKeyValue"]').find('[data-testid="input-kv-item-key-0"]').element as HTMLInputElement;
+    const tolerationsTaints = wrapper.find('[data-testid="cm-settings-field-object-Taints-tolerationsTaints"]').find('[data-testid="input-kv-item-key-0"]').element as HTMLInputElement;
+
+    expect(garbageCollectionInterval.value).toBe('1h');
+    expect(gitClientTimeout.value).toBe('30s');
+    expect(multiSelect.textContent).toContain('foo');
+    expect(singleSelect.textContent).toContain('system-store');
+    expect(nodeSelector.value).toBe('{\"key\":\"value1\"}');
+    expect(gitjobReplicas.value).toBe('5');
+    expect(debug.checked).toBe(true);
+    expect(garbageCollectionIntervalNumber.value).toBe('840');
+    expect(gitClientTimeoutNumber.value).toBe('180');
+    expect(nodeSelectorKeyValue.value).toBe('foo');
+    expect(tolerationsTaints.value).toBe('foo');
+  });
+
+  it('should save ConfigMap values preserving extraneous values', async() => {
+    const wrapper = mount(ConfigMapSettings, {
+      ...requiredSetup(),
+      props: {
+        settings,
+        groups,
+        name:      'cm-name',
+        namespace: 'cm-namespace',
+        dataKey:   'fleet'
+      },
+      computed: {
+        mode:       () => _EDIT,
+        canEdit:    () => true,
+        fetchState: () => ({ $fetchState: false }),
+      },
+    });
+
+    wrapper.setData({ configMap });
+
+    wrapper.vm.initValues();
+
+    await wrapper.vm.$nextTick();
+
+    await wrapper.vm.save(() => {});
+
+    const cm = wrapper.vm.configMap as any;
+
+    expect(cm.data).toStrictEqual({
+      fleet: 'foo: bar\ngarbageCollectionInterval: 1h\ngitjob:\n  replicas: 5\ndebug: true\nnodeSelector:\n  key: value1\ngarbageCollectionIntervalNumber: 840s\ngitClientTimeoutNumber: 180s\nnodeSelectorKeyValue:\n  foo: bar\ntolerationsTaints:\n  - key: foo\n    value: bar\n    effect: PreferNoSchedule\ngitClientTimeout: 30s\nmultiSelect: foo\nagentTLSMode: system-store\n',
+      foo:   { bar: 'value' },
+    });
+  });
+
+  it('should show groups titles and hide body if group is collapsed', async() => {
+    const wrapper = mount(ConfigMapSettings, {
+      ...requiredSetup(),
+      props: {
+        settings,
+        groups: [{
+          name:     'general',
+          children: [
+            'garbageCollectionInterval',
+            'gitClientTimeout'
+          ],
+          expanded: false,
+          weight:   0
+        }],
+        name:      'cm-name',
+        namespace: 'cm-namespace',
+        dataKey:   'fleet'
+      },
+      computed: {
+        mode:       () => _EDIT,
+        canEdit:    () => true,
+        fetchState: () => ({ $fetchState: false }),
+      },
+    });
+
+    wrapper.vm.initValues();
+
+    await wrapper.vm.$nextTick();
+
+    const generalGroupRow = wrapper.find('[data-testid="cm-settings-row-general"]');
+    const generalGroupBody = wrapper.find('[data-testid="cm-settings-group-body-general"]');
+
+    const garbageCollectionInterval = wrapper.find('[data-testid="cm-settings-field-string-garbageCollectionInterval"]');
+    const gitClientTimeout = wrapper.find('[data-testid="cm-settings-field-string-gitClientTimeout"]');
+
+    expect(generalGroupRow.exists()).toBe(true);
+    expect(generalGroupBody.exists()).toBe(false);
+
+    expect(garbageCollectionInterval.exists()).toBe(false);
+    expect(gitClientTimeout.exists()).toBe(false);
+  });
+});

package/components/__tests__/FilterPanel.test.ts

@@ -0,0 +1,81 @@
+import { mount } from '@vue/test-utils';
+import FilterPanel from '@shell/components/FilterPanel.vue';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+
+const filters = [
+  {
+    key:     'status',
+    title:   'Status',
+    options: [
+      { label: 'Installed', value: 'installed' },
+      { label: 'Deprecated', value: 'deprecated' }
+    ]
+  },
+  {
+    key:     'repos',
+    title:   'Repository',
+    options: [
+      { label: 'Repo A', value: 'repo-a' },
+      { label: 'Repo B', value: 'repo-b' }
+    ]
+  }
+];
+
+describe('component: FilterPanel', () => {
+  it('renders all filter groups and options with correct labels', () => {
+    const wrapper = mount(FilterPanel, {
+      props: {
+        modelValue: {},
+        filters
+      }
+    });
+
+    expect(wrapper.findAll('.filter-panel-filter-group-title')).toHaveLength(2);
+    expect(wrapper.text()).toContain('Status');
+    expect(wrapper.text()).toContain('Repository');
+    expect(wrapper.text()).toContain('Installed');
+    expect(wrapper.text()).toContain('Repo A');
+    expect(wrapper.text()).toContain('Repo B');
+  });
+
+  it('emits update:modelValue when a new status is added via checkbox emit', async() => {
+    const wrapper = mount(FilterPanel, {
+      props: {
+        modelValue: { status: ['installed'] },
+        filters
+      }
+    });
+
+    const checkboxes = wrapper.findAllComponents(Checkbox);
+    const deprecatedCheckbox = checkboxes.find((c) => c.props('label') === 'Deprecated');
+
+    expect(deprecatedCheckbox).toBeTruthy();
+
+    deprecatedCheckbox?.vm.$emit('update:value', ['installed', 'deprecated']);
+    await wrapper.vm.$nextTick();
+
+    const emitted = wrapper.emitted('update:modelValue');
+
+    expect(emitted).toBeTruthy();
+    expect(emitted?.[0][0].status).toStrictEqual(['installed', 'deprecated']);
+  });
+
+  it('renders a custom component if provided in option', () => {
+    const CustomComponent = { template: '<div>Custom content</div>' };
+
+    const wrapper = mount(FilterPanel, {
+      props: {
+        modelValue: {},
+        filters:    [
+          {
+            key:     'custom',
+            title:   'Custom Filters',
+            options: [{ component: CustomComponent }]
+          }
+        ]
+      }
+    });
+
+    expect(wrapper.text()).toContain('Custom content');
+  });
+});

package/components/__tests__/GrowlManager.test.ts

@@ -43,7 +43,6 @@ describe('component: GrowlManager', () => {
     const growlFirstItemTitle = wrapper.find('.growl-list [data-testid="growl-list-item-0"] .growl-text div');
     const growlFirstItemMessage = wrapper.find('.growl-list [data-testid="growl-list-item-0"] .growl-text p');
     const growlFirstItemClose = wrapper.find('.growl-list [data-testid="growl-list-item-0"] .close.icon');
-    const clearAllButton = wrapper.find('button[type="button"]');
 
     expect(growlMainContainer.exists()).toBe(true);
     expect(growlListContainer.exists()).toBe(true);
@@ -52,7 +51,6 @@ describe('component: GrowlManager', () => {
     expect(growlFirstItemTitle.text()).toBe('growl1-title');
     expect(growlFirstItemMessage.text()).toBe('growl1-message');
     expect(growlFirstItemClose.exists()).toBe(true);
-    expect(clearAllButton.exists()).toBe(true);
   });
 
   it('clicking on individual growl close should dismiss the individual growl', async() => {
@@ -79,29 +77,6 @@ describe('component: GrowlManager', () => {
     expect(spyDispatch).toHaveBeenCalledTimes(1);
   });
 
-  it('clicking on clear all growls should dismiss all growls', async() => {
-    const mockStore = {
-      getters:  { 'i18n/t': jest.fn() },
-      dispatch: () => jest.fn()
-    };
-
-    const wrapper = shallowMount(GrowlManager, {
-      computed: { stack: () => stackMock },
-      global:   { mocks: { $store: mockStore } }
-    });
-
-    const clearAllButton = wrapper.find('button[type="button"]');
-    const spyCloseAll = jest.spyOn(wrapper.vm, 'closeAll');
-    const spyDispatch = jest.spyOn(mockStore, 'dispatch');
-
-    clearAllButton.trigger('click');
-
-    await nextTick();
-
-    expect(spyCloseAll).toHaveBeenCalledTimes(1);
-    expect(spyDispatch).toHaveBeenCalledTimes(1);
-  });
-
   it('growl should auto remove itself after set interval of 1 second', async() => {
     jest.useFakeTimers();
 

package/components/auth/AuthBanner.vue

@@ -98,9 +98,8 @@ export default {
 }
 
 .values {
-  tr td:not(:first-of-type) {
-    padding-left: 10px;
-  }
+  border-spacing: 8px 8px;  // Add spacing between columns and rows
+  margin-left: -8px; // Move the table back to the left, to compensate for the spacing from above on the left-hand column
 }
 
 </style>

package/components/auth/RoleDetailEdit.vue

@@ -18,6 +18,7 @@ import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 
 import { SUBTYPE_MAPPING, VERBS } from '@shell/models/management.cattle.io.roletemplate';
 import Loading from '@shell/components/Loading';
+import Banner from '@components/Banner/Banner.vue';
 
 const GLOBAL = SUBTYPE_MAPPING.GLOBAL.key;
 const CLUSTER = SUBTYPE_MAPPING.CLUSTER.key;
@@ -64,7 +65,8 @@ export default {
     SortableTable,
     Loading,
     Error,
-    LabeledInput
+    LabeledInput,
+    Banner,
   },
 
   mixins: [CreateEditView, FormValidation],
@@ -497,7 +499,8 @@ export default {
           index:           i,
           apiGroups:       rule.apiGroups || [''],
           resources:       rule.resources || [],
-          nonResourceURLs: rule.nonResourceURLs || []
+          nonResourceURLs: rule.nonResourceURLs || [],
+          verbs:           rule.verbs,
         };
 
         VERBS.forEach((verb) => {
@@ -531,6 +534,13 @@ export default {
 
       return res;
     },
+
+    showPsaWarning(grant) {
+      return this.value.subtype === NAMESPACE &&
+        grant.verbs?.includes('updatepsa') &&
+        grant.resources?.includes('projects') &&
+        grant.apiGroups?.includes('management.cattle.io');
+    }
   }
 };
 </script>
@@ -558,7 +568,28 @@ export default {
         :table-actions="false"
         :row-actions="false"
         :search="false"
-      />
+        :sub-rows="true"
+      >
+        <template #sub-row="{row, fullColspan, onRowMouseEnter, onRowMouseLeave}">
+          <tr
+
+            class="sub-row"
+            @mouseenter="onRowMouseEnter"
+            @mouseleave="onRowMouseLeave"
+          >
+            <td
+              v-if="showPsaWarning(row)"
+              :colspan="fullColspan"
+            >
+              <Banner
+                style="margin: 0px"
+                label-key="rbac.roletemplate.tabs.grantResources.psaWarning"
+                color="warning"
+              />
+            </td>
+          </tr>
+        </template>
+      </SortableTable>
       <div
         v-for="(inherited, index) of inheritedRules"
         :key="index"
@@ -732,6 +763,17 @@ export default {
                 </div>
               </div>
             </template>
+            <template #value-sub-row="{row}">
+              <div
+                v-if="showPsaWarning(row.value)"
+                class="mr-20"
+              >
+                <Banner
+                  label-key="rbac.roletemplate.tabs.grantResources.psaWarning"
+                  color="warning"
+                />
+              </div>
+            </template>
           </ArrayList>
         </Tab>
         <Tab

package/components/auth/login/ldap.vue

@@ -69,7 +69,7 @@ export default {
             v-model:value="password"
             type="password"
             :label="t('login.password')"
-            autocomplete="password"
+            autocomplete="current-password"
           />
         </div>
       </div>

package/components/auth/login/oidc.vue

@@ -6,7 +6,12 @@ export default {
 
   computed: {
     uniqueDisplayName() {
-      return this.t('model.authConfig.description.oidc');
+      switch (this.name) {
+      case 'cognito':
+        return this.t('model.authConfig.description.cognito');
+      default:
+        return this.t('model.authConfig.description.oidc');
+      }
     },
   },