@rancher/shell 0.3.0 → 0.3.1

package/components/__tests__/NamespaceFilter.test.ts

@@ -25,7 +25,7 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [],
         },
-        mocks:      { $store: { getters: { 'i18n/t': () => text } } },
+        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
         directives: { shortkey: () => jest.fn() }
       });
       const element = wrapper.find(`[data-testid="namespaces-values-none"]`).element.textContent;
@@ -60,7 +60,8 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [{ label: text }],
         },
-        directives: { shortkey: () => jest.fn() }
+        directives: { shortkey: () => jest.fn() },
+        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
       });
 
       const element = wrapper.find(`[data-testid="namespaces-value-0"]`).element.textContent;
@@ -92,8 +93,9 @@ describe('component: NamespaceFilter', () => {
         mocks: {
           $store: {
             getters: {
-              'i18n/t':    () => text,
-              'prefs/get': () => preferences
+              'i18n/t':            () => text,
+              'prefs/get':         () => preferences,
+              namespaceFilterMode: () => undefined,
             },
           }
         },
@@ -114,6 +116,7 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [],
         },
+        mocks:      { $store: { getters: { 'i18n/t': () => '', namespaceFilterMode: () => undefined } } },
         directives: { shortkey: () => jest.fn() }
       });
       const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
@@ -132,7 +135,7 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [],
         },
-        mocks:      { $store: { getters: { 'i18n/t': () => text } } },
+        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
         directives: { shortkey: () => jest.fn() }
       });
       const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
@@ -147,18 +150,20 @@ describe('component: NamespaceFilter', () => {
       const text = 'my option';
       const wrapper = mount(NamespaceFilter, {
         computed: {
-          filtered: () => [
-            {
-              kind:  'namespace',
-              label: `default-${ text }`,
-            },
-          ],
           options: () => [],
           value:   () => [],
         },
-        mocks:      { $store: { getters: { 'i18n/t': () => text } } },
+        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
         directives: { shortkey: () => jest.fn() }
       });
+
+      (wrapper.vm as any).cachedFiltered = [
+        {
+          kind:  'namespace',
+          label: `default-${ text }`,
+        },
+      ];
+
       const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
 
       await dropdown.trigger('click');
@@ -180,28 +185,31 @@ describe('component: NamespaceFilter', () => {
       jest.spyOn(NamespaceFilter.computed.value, 'get').mockReturnValue([]);
       const wrapper = mount(NamespaceFilter, {
         computed: {
-          filtered: () => [
-            {
-              label:     text,
-              key,
-              elementId: text,
-              id:        text,
-              kind:      'namespace',
-            },
-          ],
-          options:        () => [],
-          currentProduct: () => undefined,
-          key:            () => key,
+          options:             () => [],
+          currentProduct:      () => undefined,
+          namespaceFilterMode: () => undefined,
+          key:                 () => key,
         },
         mocks: {
           $store: {
-            getters:  { 'i18n/t': () => text },
+            getters:  { 'i18n/t': () => text, namespaceFilterMode: () => undefined },
             dispatch: action
           }
         },
         directives: { shortkey: () => jest.fn() }
       });
 
+      (wrapper.vm as any).cachedFiltered = [
+        {
+          label:     text,
+          key,
+          elementId: text,
+          id:        text,
+          kind:      'namespace',
+          enabled:   true,
+        },
+      ];
+
       await wrapper.find(`[data-testid="namespaces-dropdown"]`).trigger('click');
       await wrapper.find(`[data-testid="namespaces-option-0"]`).trigger('click');
 

package/components/__tests__/PercentageBar.test.ts

@@ -0,0 +1,32 @@
+import { shallowMount } from '@vue/test-utils';
+import PercentageBar, { PreferredDirection } from '@shell/components/PercentageBar.vue';
+import Bar from '@shell/components/graph/Bar.vue';
+import { ExtendedVue, Vue } from 'vue/types/vue';
+import { DefaultProps } from 'vue/types/options';
+
+const colorStops = {
+  0: '--success', 30: '--warning', 70: '--error'
+};
+
+describe('component: PercentageBar', () => {
+  it('should render component with the correct data applied', () => {
+    const wrapper = shallowMount(PercentageBar as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      propsData: {
+        value:              25,
+        preferredDirection: PreferredDirection.MORE,
+        showPercentage:     true,
+        colorStops
+      }
+    });
+
+    const container = wrapper.find('.percentage-bar');
+    const barComponent = wrapper.findComponent(Bar);
+    const val = wrapper.find('.percentage-value');
+
+    expect(container.exists()).toBe(true);
+    expect(barComponent.exists()).toBe(true);
+    expect(val.exists()).toBe(true);
+    expect(val.text()).toBe('25%');
+    expect(wrapper.vm.primaryColor).toBe('--warning');
+  });
+});

package/components/__tests__/PodSecurityAdmission.test.ts

@@ -0,0 +1,398 @@
+import { mount } from '@vue/test-utils';
+import PodSecurityAdmission from '@shell/components/PodSecurityAdmission.vue';
+
+describe('component: PodSecurityAdmission', () => {
+  it.each([
+    ['updateLabels', {
+      audit:             'privileged',
+      'audit-version':   'latest',
+      enforce:           'privileged',
+      'enforce-version': 'latest',
+      warn:              'privileged',
+      'warn-version':    'latest',
+    }],
+    ['updateExemptions', {
+      namespaces: [], runtimeClasses: [], usernames: []
+    }]
+  ])('should emit %p and exemptions on creation if labels always active', (emission, value) => {
+    const wrapper = mount(PodSecurityAdmission, { propsData: { mode: 'create', labelsAlwaysActive: true } });
+
+    expect(wrapper.emitted(emission)![0][0]).toStrictEqual(value);
+  });
+
+  describe('handling labels', () => {
+    it.each([
+      ['true', 'active'],
+      ['', 'level'],
+      ['', 'version'],
+    ])('should display default value %p for input %p', (value, inputId) => {
+      const wrapper = mount(PodSecurityAdmission, { propsData: { mode: 'edit' } });
+
+      const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+      expect(input.value).toStrictEqual(value);
+    });
+
+    describe.each([
+      'pod-security.kubernetes.io/',
+      ''
+    ])('given prefix %p', (prefix) => {
+      it('should map labels to the form control', () => {
+        const labels = {
+          [`${ prefix }enforce`]:         'baseline',
+          [`${ prefix }enforce-version`]: '123'
+        };
+        const psaControls = {
+          audit: {
+            active:  false,
+            level:   'privileged',
+            version: ''
+          },
+          enforce: {
+            active:  true,
+            level:   'baseline',
+            version: '123'
+          },
+          warn: {
+            active:  false,
+            level:   'privileged',
+            version: ''
+          },
+        };
+
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: {
+            mode:         'edit',
+            labels,
+            labelsPrefix: prefix
+          }
+        });
+
+        expect(wrapper.vm.psaControls).toStrictEqual(psaControls);
+      });
+
+      it.each([
+      // ['true', 'active'],
+      // ['baseline', 'level'],
+        ['123', 'version'],
+      ])('should map labels to the form, with value %p for input %p', (value, inputId) => {
+        const labels = {
+          [`${ prefix }enforce`]:         'baseline',
+          [`${ prefix }enforce-version`]: '123'
+        };
+
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: {
+            mode:         'edit',
+            labels,
+            labelsPrefix: prefix
+          }
+        });
+
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+        expect(input.value).toStrictEqual(value);
+      });
+
+      it.each([
+      // ['true', 'active'],
+      // ['privileged', 'level'],
+        ['', 'version'],
+      ])('should map labels to the form, using default values if none, with value %p for input %p', (value, inputId) => {
+        const labels = {
+          [`${ prefix }enforce`]:         '',
+          [`${ prefix }enforce-version`]: ''
+        };
+
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: {
+            mode:         'edit',
+            labels,
+            labelsPrefix: prefix
+          }
+        });
+
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+        expect(input.value).toStrictEqual(value);
+      });
+
+      describe('changing input values', () => {
+        it('should add labels if active', () => {
+          const version = '123';
+          const newLabels = {
+            [`${ prefix }enforce`]:         'privileged',
+            [`${ prefix }enforce-version`]: version
+          };
+          const wrapper = mount(PodSecurityAdmission, {
+            propsData: {
+              mode:         'edit',
+              labels:       {},
+              labelsPrefix: prefix
+            },
+            // Unable to toggle the checkbox, so we enforce the data
+            data: () => ({
+              psaControls: {
+                enforce: {
+                  active:  true,
+                  level:   '',
+                  version: ''
+                }
+              }
+            }),
+          });
+
+          // Unable to toggle the checkbox, so we use the input
+          wrapper.find(`[data-testid="pod-security-admission--psaControl-0-version"]`).find('input').setValue(version);
+
+          expect(wrapper.emitted('updateLabels')![0][0]).toStrictEqual(newLabels);
+        });
+
+        it('should remove other labels if not active', () => {
+          const labels = {
+            [`${ prefix }audit`]:         'privileged',
+            [`${ prefix }audit-version`]: 'latest'
+          };
+          const newLabels = {
+            [`${ prefix }enforce`]:         'privileged',
+            [`${ prefix }enforce-version`]: 'latest',
+          };
+          const wrapper = mount(PodSecurityAdmission, {
+            propsData: {
+              mode:         'edit',
+              labels,
+              labelsPrefix: prefix
+            },
+            // Unable to toggle the checkbox, so we enforce the data
+            data: () => ({
+              psaControls: {
+                enforce: {
+                  active:  true,
+                  level:   '',
+                  version: ''
+                }
+              }
+            }),
+          });
+
+          // Unable to toggle the checkbox, so we enforce the data
+          wrapper.setData({
+            psaControls: {
+              audit: {
+                active:  false,
+                level:   '',
+                version: ''
+              }
+            }
+          });
+
+          // Unable to toggle the checkbox, so we use the input
+          wrapper.find(`[data-testid="pod-security-admission--psaControl-0-version"]`).find('input').setValue('');
+
+          expect(wrapper.emitted('updateLabels')![0][0]).toStrictEqual(newLabels);
+        });
+
+        it('should assign default version and level if missing', () => {
+          const wrapper = mount(PodSecurityAdmission, {
+            propsData: {
+              mode:         'edit',
+              labels:       {},
+              labelsPrefix: prefix
+            },
+            // Unable to toggle the checkbox, so we enforce the data
+            data: () => ({
+              psaControls: {
+                enforce: {
+                  active:  true,
+                  level:   '',
+                  version: ''
+                }
+              }
+            }),
+          });
+          const newLabels = {
+            [`${ prefix }enforce`]:         'privileged',
+            [`${ prefix }enforce-version`]: 'latest'
+          };
+
+          // Unable to toggle the checkbox, so we use the input
+          wrapper.find(`[data-testid="pod-security-admission--psaControl-0-version"]`).find('input').setValue('');
+
+          expect(wrapper.emitted('updateLabels')![0][0]).toStrictEqual(newLabels);
+        });
+      });
+    });
+
+    describe.each(['level', 'version'])('should keep always %p enabled', (inputId) => {
+      it('given labelsAlwaysActive true and no labels', () => {
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: {
+            mode:               'edit',
+            labelsAlwaysActive: true,
+            labels:             {}
+          },
+        });
+
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+        expect(input.disabled).toBe(false);
+      });
+
+      it('given existing values', () => {
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: {
+            mode:   'edit',
+            labels: {
+              [`enforce`]:         'baseline',
+              [`enforce-version`]: '123'
+            }
+          },
+        });
+
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+        expect(input.disabled).toBe(false);
+      });
+    });
+
+    describe.each(['level', 'version'])('should keep always %p disabled', (inputId) => {
+      it('given labelsAlwaysActive false and no labels', () => {
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: {
+            mode:               'edit',
+            labelsAlwaysActive: false,
+            labels:             {}
+          },
+        });
+
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+        expect(input.disabled).toBe(true);
+      });
+
+      it('given disabled active status', () => {
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: { mode: 'edit' },
+          data:      () => ({
+            psaControls: {
+              enforce: {
+                active:  false,
+                level:   '',
+                version: ''
+              }
+            }
+          }),
+        });
+
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+        expect(input.disabled).toBe(true);
+      });
+
+      it('given view mode and provided labels', () => {
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: {
+            mode:   'view',
+            labels: {
+              [`enforce`]:         'baseline',
+              [`enforce-version`]: '123'
+            }
+          },
+        });
+
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+        expect(input.disabled).toBe(true);
+      });
+    });
+
+    it.each([
+      [true, false],
+    ])('should display the checkbox %p', (value) => {
+      const wrapper = mount(PodSecurityAdmission, {
+        propsData: {
+          mode:               'edit',
+          labelsAlwaysActive: value
+        }
+      });
+
+      const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-active"]`).element as HTMLInputElement;
+
+      expect(!input).toBe(value);
+    });
+  });
+
+  describe('handling exemptions', () => {
+    it.each([
+      [['namespace1', 'namespace2'], 'namespace1,namespace2'],
+    ])('should map %p to the form control as %p', (exemption, control) => {
+      const exemptions = { namespaces: exemption };
+      const result = {
+        namespaces: {
+          active: true,
+          value:  control
+        },
+        runtimeClasses: {
+          active: false,
+          value:  ''
+        },
+        usernames: {
+          active: false,
+          value:  ''
+        },
+      };
+
+      const wrapper = mount(PodSecurityAdmission, {
+        propsData: {
+          mode: 'edit',
+          exemptions,
+        }
+      });
+
+      expect(wrapper.vm.psaExemptionsControls).toStrictEqual(result);
+    });
+
+    it.each([
+      // ['true', 'active'],
+      ['username', 'value'],
+    ])('should map to the form, with value %p for input %p', (value, inputId) => {
+      const exemptions = { usernames: [value] };
+      const wrapper = mount(PodSecurityAdmission, {
+        propsData: {
+          mode: 'edit',
+          exemptions
+        }
+      });
+
+      const input = wrapper.find(`[data-testid="pod-security-admission--psaExemptionsControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+      expect(input.value).toStrictEqual(value);
+    });
+
+    describe('changing input values', () => {
+      it.each([
+        ['username1', ['username1']],
+        ['username1, username2', ['username1', 'username2']],
+        ['username1,username2', ['username1', 'username2']],
+      ])('should emit exemption input value %p as %p', (value, exemption) => {
+        const exemptions = {
+          usernames:      exemption,
+          namespaces:     [],
+          runtimeClasses: []
+        };
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: {
+            mode: 'edit',
+            exemptions
+          },
+        });
+        // Unable to toggle the checkbox, so we use the input
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaExemptionsControl-0-value"]`).find('input');
+
+        input.setValue(value);
+
+        expect(wrapper.emitted('updateExemptions')![0][0]).toStrictEqual(exemptions);
+      });
+    });
+  });
+});

package/components/auth/AuthBanner.vue

@@ -1,12 +1,12 @@
 
 <script>
 import { Banner } from '@components/Banner';
-import AsyncButton from '@shell/components/AsyncButton';
+import DisableAuthProviderModal from '@shell/components/DisableAuthProviderModal';
 
 export default {
   components: {
-    AsyncButton,
-    Banner
+    Banner,
+    DisableAuthProviderModal
   },
 
   props: {
@@ -32,6 +32,12 @@ export default {
       return Object.entries(this.table);
     }
   },
+
+  methods: {
+    showDisableModal() {
+      this.$refs.disableAuthProviderModal.show();
+    }
+  },
 };
 </script>
 
@@ -52,13 +58,13 @@ export default {
       >
         {{ t('action.edit') }}
       </button>
-      <AsyncButton
-        class="ml-10"
-        mode="disable"
-        size="sm"
-        action-color="bg-error"
-        @click="disable"
-      />
+      <button
+        type="button"
+        class="ml-10 btn-sm role-primary bg-error"
+        @click="showDisableModal"
+      >
+        {{ t('generic.disable') }}
+      </button>
     </Banner>
 
     <table
@@ -67,6 +73,10 @@ export default {
     >
       <slot name="rows" />
     </table>
+    <DisableAuthProviderModal
+      ref="disableAuthProviderModal"
+      @disable="disable"
+    />
   </div>
 </template>