@rancher/shell 0.3.0 → 0.3.2

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>
 

package/components/auth/RoleDetailEdit.vue

@@ -380,28 +380,27 @@ export default {
       // - resourceNames
       // - resources
       // - verbs
-      const value = event.label ? event.label : event;
 
       switch (key) {
       case 'apiGroups':
 
-        if (value || (value === '')) {
-          this.$set(rule, 'apiGroups', [value]);
+        if (event || (event === '')) {
+          this.$set(rule, 'apiGroups', [event]);
         }
 
         break;
 
       case 'verbs':
 
-        if (value) {
-          this.$set(rule, 'verbs', [value]);
+        if (event) {
+          this.$set(rule, 'verbs', [event]);
         } else {
           this.$set(rule, 'verbs', []);
         }
         break;
 
       case 'resources':
-        if (event.resourceName) {
+        if (event?.resourceName) {
           // If we are updating the resources defined in a rule,
           // the event will be an object with the
           // properties apiGroupValue and resourceName.
@@ -409,7 +408,7 @@ export default {
           // Automatically fill in the API group of the
           // selected resource.
           this.$set(rule, 'apiGroups', [event.apiGroupValue]);
-        } else if (event.label) {
+        } else if (event?.label) {
           // When the user creates a new resource name in the resource
           // field instead of selecting an existing one,
           // we have to treat that differently because the incoming event
@@ -424,8 +423,8 @@ export default {
         break;
 
       case 'nonResourceURLs':
-        if (value) {
-          this.$set(rule, 'nonResourceURLs', [value]);
+        if (event) {
+          this.$set(rule, 'nonResourceURLs', [event]);
         } else {
           this.$set(rule, 'nonResourceURLs', []);
         }
@@ -447,6 +446,21 @@ export default {
       this.done();
     },
     async actuallySave(url) {
+      // Go through all of the grules and replace double quote apiGroups
+      // k8S documentation shows using empty rules as "" - we change this to empty string when used
+      this.value.rules?.forEach((rule) => {
+        if (rule.apiGroups) {
+          rule.apiGroups = rule.apiGroups.map((group) => {
+            // If the group is two double quotes ("") replace if with empty string
+            if (group.trim() === '\"\"') {
+              group = '';
+            }
+
+            return group;
+          });
+        }
+      });
+
       if ( this.isCreate ) {
         url = url || this.schema.linkFor('collection');
         await this.value.save({ url, redirectUnauthorized: false });
@@ -623,12 +637,7 @@ export default {
                   </span>
                 </div>
                 <div :class="ruleClass">
-                  <span class="text-label">{{ t('rbac.roletemplate.tabs.grantResources.tableHeaders.apiGroups') }}
-                    <span
-                      v-if="isNamespaced"
-                      class="required"
-                    >*</span>
-                  </span>
+                  <span class="text-label">{{ t('rbac.roletemplate.tabs.grantResources.tableHeaders.apiGroups') }}</span>
                 </div>
                 <div
                   v-if="!isNamespaced"
@@ -670,7 +679,7 @@ export default {
                     :value="getRule('apiGroups', props.row.value)"
                     :disabled="isBuiltin"
                     :mode="mode"
-                    @input="setRule('apiGroups', props.row.value, $event)"
+                    @input="setRule('apiGroups', props.row.value, $event.target.value)"
                   >
                 </div>
                 <div
@@ -681,7 +690,7 @@ export default {
                     :value="getRule('nonResourceURLs', props.row.value)"
                     :disabled="isBuiltin"
                     :mode="mode"
-                    @input="setRule('nonResourceURLs', props.row.value, $event)"
+                    @input="setRule('nonResourceURLs', props.row.value, $event.target.value)"
                   >
                 </div>
               </div>

package/components/auth/SelectPrincipal.vue

@@ -40,7 +40,7 @@ export default {
     project: {
       type:    Boolean,
       default: false
-    },
+    }
   },
 
   async fetch() {
@@ -54,10 +54,11 @@ export default {
 
   data() {
     return {
-      principals: null,
-      searchStr:  '',
-      options:    [],
-      newValue:   '',
+      principals:     null,
+      searchStr:      '',
+      options:        [],
+      newValue:       '',
+      tooltipContent: null,
     };
   },
 
@@ -94,6 +95,24 @@ export default {
   },
 
   methods: {
+    setTooltipContent() {
+      if (!this.retainSelection) {
+        return;
+      }
+      if (this.principals) {
+        const selected = this.principals.find(p => p.id === this.newValue);
+
+        this.tooltipContent = selected?.name;
+      } else {
+        this.tooltipContent = null;
+      }
+    },
+    resetTooltipContent() {
+      if (!this.retainSelection) {
+        return;
+      }
+      this.tooltipContent = null;
+    },
     add(id) {
       if (!id) {
         // Ignore attempts to select an invalid principal
@@ -156,6 +175,11 @@ export default {
   <LabeledSelect
     ref="labeled-select"
     v-model="newValue"
+    v-tooltip="{
+      content: tooltipContent,
+      placement: 'bottom',
+      classes: ['select-principal-tooltip']
+    }"
     :mode="mode"
     :label="label"
     :placeholder="placeholder"
@@ -166,6 +190,8 @@ export default {
     :class="{'retain-selection': retainSelection}"
     @input="add"
     @search="onSearch"
+    @on-open="resetTooltipContent()"
+    @on-close="setTooltipContent()"
   >
     <template v-slot:no-options="{ searching }">
       <template v-if="searching">
@@ -226,4 +252,9 @@ export default {
       text-overflow: ellipsis;
     }
   }
+
+  .select-principal-tooltip {
+    max-width: 580px;
+    word-wrap: break-word;
+  }
 </style>