@rancher/shell 3.0.8 → 3.0.9-rc.2

package/components/form/Security.vue

@@ -1,9 +1,15 @@
 <script>
-import { RadioGroup } from '@components/Form/Radio';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import { LabeledInput } from '@components/Form/LabeledInput';
-import { _VIEW } from '@shell/config/query-params';
+import { _VIEW, _EDIT } from '@shell/config/query-params';
 import { mapGetters } from 'vuex';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import SeccompProfile from '@shell/components/form/SeccompProfile';
+
+export const FORM_TYPES = {
+  CONTAINER: 'container',
+  POD:       'pod'
+};
 
 const allCapabilities = ['ALL',
   'AUDIT_CONTROL',
@@ -48,9 +54,10 @@ export default {
   emits: ['update:value'],
 
   components: {
-    RadioGroup,
+    Checkbox,
     LabeledInput,
-    LabeledSelect
+    LabeledSelect,
+    SeccompProfile
   },
 
   props: {
@@ -60,31 +67,45 @@ export default {
         return {};
       }
     },
-    mode: { type: String, default: 'edit' }
+    formType:            { type: String, default: FORM_TYPES.CONTAINER },
+    mode:                { type: String, default: _EDIT },
+    seccompProfileTypes: {
+      type:    Array,
+      default: () => []
+    }
   },
 
   data() {
-    return {
-      privileged:               this.value.privileged || false,
-      allowPrivilegeEscalation: this.value.allowPrivilegeEscalation || false,
-      allCapabilities,
-      runAsNonRoot:             this.value.runAsNonRoot || false,
-      readOnlyRootFilesystem:   this.value.readOnlyRootFilesystem || false,
-      add:                      [],
-      drop:                     [],
-      runAsUser:                this.value.runAsUser
-    };
-  },
-
-  created() {
-    const { capabilities = {} } = this.value;
-    const {
-      add = [],
-      drop = []
-    } = capabilities;
-
-    this.add = add;
-    this.drop = drop;
+    if (this.formType === FORM_TYPES.CONTAINER) {
+      return {
+        allCapabilities,
+        securityContext: {
+          ...this.value,
+          privileged:               this.value.privileged || false,
+          allowPrivilegeEscalation: this.value.allowPrivilegeEscalation || false,
+          runAsNonRoot:             this.value.runAsNonRoot || false,
+          readOnlyRootFilesystem:   this.value.readOnlyRootFilesystem || false,
+          capabilities:             this.value.capabilities || { add: [], drop: [] },
+          runAsUser:                this.value.runAsUser,
+          seccompProfile:           this.value.seccompProfile,
+          fsGroup:                  this.value.fsGroup,
+        },
+        afterPrivilegedTickedMessage: '',
+        FORM_TYPES,
+      };
+    } else {
+      return {
+        securityContext: {
+          ...this.value,
+          fsGroup:        this.value.fsGroup,
+          runAsNonRoot:   this.value.runAsNonRoot || false,
+          runAsUser:      this.value.runAsUser,
+          seccompProfile: this.value.seccompProfile,
+        },
+        afterPrivilegedTickedMessage: '',
+        FORM_TYPES,
+      };
+    }
   },
 
   computed: {
@@ -95,25 +116,38 @@ export default {
     ...mapGetters({ t: 'i18n/t' })
   },
 
-  watch: {
-    privileged(neu) {
-      if (neu) {
-        this.allowPrivilegeEscalation = true;
+  methods: {
+    focus() {
+      const firstFocusable = this.$refs.firstFocusable;
+
+      // First, try the preferred declarative approach using the ref.
+      if (firstFocusable && typeof firstFocusable.focus === 'function') {
+        firstFocusable.focus();
       }
-    }
-  },
+    },
 
-  methods: {
     update() {
       const securityContext = {
-        runAsNonRoot:             this.runAsNonRoot,
-        readOnlyRootFilesystem:   this.readOnlyRootFilesystem,
-        capabilities:             { add: this.add, drop: this.drop },
-        privileged:               this.privileged,
-        allowPrivilegeEscalation: this.allowPrivilegeEscalation,
-        runAsUser:                this.runAsUser,
+        ...this.value,
+        ...this.securityContext,
       };
 
+      if (securityContext.privileged) {
+        securityContext.allowPrivilegeEscalation = true;
+        delete securityContext.seccompProfile;
+        this.afterPrivilegedTickedMessage = this.t('workload.container.security.privileged.afterTick.true');
+      } else {
+        this.afterPrivilegedTickedMessage = this.t('workload.container.security.privileged.afterTick.false');
+      }
+
+      if (securityContext.fsGroup === '') {
+        delete securityContext.fsGroup;
+      }
+
+      if (securityContext.runAsUser === '') {
+        delete securityContext.runAsUser;
+      }
+
       this.$emit('update:value', securityContext);
     }
 
@@ -122,124 +156,201 @@ export default {
 </script>
 
 <template>
-  <div>
-    <div>
-      <div class="row">
-        <div
-          data-testid="input-security-privileged"
-          class="col span-6"
-        >
-          <RadioGroup
-            v-model:value="privileged"
-            name="privileged"
-            :label="t('workload.container.security.privileged.label')"
-            :options="[false,true]"
-            :labels="[t('workload.container.security.privileged.false'), t('workload.container.security.privileged.true')]"
+  <div
+    v-if="formType === FORM_TYPES.POD"
+  >
+    <div class="row">
+      <div
+        class="col span-6"
+        data-testid="input-security-fsGroup"
+      >
+        <fieldset>
+          <legend
+            id="pod-fs-group-label"
+            class="h3-legend"
+          >
+            {{ t('workload.container.security.podFsGroup') }}
+          </legend>
+          <LabeledInput
+            ref="firstFocusable"
+            v-model:value.number="securityContext.fsGroup"
+            type="number"
             :mode="mode"
+            :label="t('workload.container.security.fsGroup')"
             @update:value="update"
           />
-        </div>
-        <div
-          v-if="!privileged"
-          data-testid="input-security-allowPrivilegeEscalation"
-          class="col span-6"
-        >
-          <RadioGroup
-            v-model:value="allowPrivilegeEscalation"
-            name="allowPrivilegeEscalation"
-            :label="t('workload.container.security.allowPrivilegeEscalation.label')"
-            :disabled="privileged"
-            :options="[false,true]"
-            :labels="[t('workload.container.security.allowPrivilegeEscalation.false'), t('workload.container.security.allowPrivilegeEscalation.true')]"
+        </fieldset>
+      </div>
+    </div>
+  </div>
+  <div
+    v-if="formType === FORM_TYPES.CONTAINER"
+  >
+    <div
+      class="row"
+    >
+      <div class="col span-6">
+        <fieldset>
+          <legend class="h3-legend">
+            {{ t('workload.container.security.privileged.title') }}
+          </legend>
+          <div data-testid="input-security-privileged">
+            <Checkbox
+              ref="firstFocusable"
+              v-model:value="securityContext.privileged"
+              :mode="mode"
+              label-key="workload.container.security.privileged.true"
+              aria-describedby="privilege-help"
+              @update:value="update"
+            />
+            <p
+              id="privilege-help"
+              class="sr-only"
+              aria-hidden="true"
+            >
+              {{ t('workload.container.security.privileged.help') }}
+            </p>
+          </div>
+        </fieldset>
+      </div>
+      <p
+        id="after-privileged-ticked"
+        role="status"
+        aria-live="polite"
+        class="sr-only"
+      >
+        {{ afterPrivilegedTickedMessage }}
+      </p>
+
+      <div
+        v-if="!securityContext.privileged"
+        class="col span-6"
+      >
+        <fieldset>
+          <legend class="h3-legend">
+            {{ t('workload.container.security.allowPrivilegeEscalation.title') }}
+          </legend>
+          <div data-testid="input-security-allowPrivilegeEscalation">
+            <Checkbox
+              v-model:value="securityContext.allowPrivilegeEscalation"
+              :mode="mode"
+              label-key="workload.container.security.allowPrivilegeEscalation.true"
+              @update:value="update"
+            />
+          </div>
+        </fieldset>
+      </div>
+    </div>
+  </div>
+  <div v-if="!securityContext.privileged && formType === FORM_TYPES.CONTAINER || formType === FORM_TYPES.POD">
+    <div class="spacer" />
+    <SeccompProfile
+      v-model:value="securityContext.seccompProfile"
+      :mode="mode"
+      :seccomp-profile-types="seccompProfileTypes"
+      :title="t('workload.container.security.seccompProfile.container')"
+      @update:value="update"
+    />
+  </div>
+  <div>
+    <div class="spacer" />
+    <div class="row">
+      <div class="col span-6">
+        <fieldset>
+          <legend class="h3-legend">
+            {{ t('workload.container.security.runAsNonRoot.title') }}
+          </legend>
+          <div data-testid="input-security-runasNonRoot">
+            <Checkbox
+              v-model:value="securityContext.runAsNonRoot"
+              :mode="mode"
+              label-key="workload.container.security.runAsNonRoot.true"
+              @update:value="update"
+            />
+          </div>
+        </fieldset>
+      </div>
+      <div
+        class="col span-6"
+        data-testid="input-security-runAsUser"
+      >
+        <fieldset>
+          <legend
+            id="run-as-user-label"
+            class="h3-legend"
+          >
+            {{ t('workload.container.security.runAsUser.title') }}
+          </legend>
+          <LabeledInput
+            v-model:value.number="securityContext.runAsUser"
+            :label="t('workload.container.security.runAsUser.label')"
             :mode="mode"
             @update:value="update"
           />
-        </div>
+        </fieldset>
       </div>
     </div>
+  </div>
+  <div v-if="formType === FORM_TYPES.CONTAINER">
     <div class="spacer" />
-
-    <div>
+    <div class="row">
+      <div class="col span-6">
+        <fieldset>
+          <legend class="h3-legend">
+            {{ t('workload.container.security.readOnlyRootFilesystem.title') }}
+          </legend>
+          <div data-testid="input-security-readOnlyRootFilesystem">
+            <Checkbox
+              v-model:value="securityContext.readOnlyRootFilesystem"
+              :mode="mode"
+              label-key="workload.container.security.readOnlyRootFilesystem.true"
+              @update:value="update"
+            />
+          </div>
+        </fieldset>
+      </div>
+    </div>
+  </div>
+  <div v-if="formType === FORM_TYPES.CONTAINER">
+    <div class="spacer" />
+    <fieldset>
+      <legend class="h3-legend">
+        {{ t('workload.container.security.capabilities.title') }}
+      </legend>
       <div class="row">
         <div
-          data-testid="input-security-runasNonRoot"
+          data-testid="input-security-add"
           class="col span-6"
         >
-          <RadioGroup
-            v-model:value="runAsNonRoot"
-            name="runasNonRoot"
-            :label="t('workload.container.security.runAsNonRoot.label')"
-            :options="[false, true]"
-            :labels="[t('workload.container.security.runAsNonRoot.false'), t('workload.container.security.runAsNonRoot.true')]"
+          <LabeledSelect
+            v-model:value="securityContext.capabilities.add"
+            :taggable="true"
+            :close-on-select="false"
             :mode="mode"
+            :multiple="true"
+            :label="t('workload.container.security.capabilities.add')"
+            :options="allCapabilities"
+            :disabled="mode==='view'"
             @update:value="update"
           />
         </div>
         <div
-          data-testid="input-security-readOnlyRootFilesystem"
+          data-testid="input-security-drop"
           class="col span-6"
         >
-          <RadioGroup
-            v-model:value="readOnlyRootFilesystem"
-            name="readOnlyRootFilesystem"
-            :label="t('workload.container.security.readOnlyRootFilesystem.label')"
-            :options="[false, true]"
-            :labels="[t('workload.container.security.readOnlyRootFilesystem.false'), t('workload.container.security.readOnlyRootFilesystem.true')]"
+          <LabeledSelect
+            v-model:value="securityContext.capabilities.drop"
+            :close-on-select="false"
+            :taggable="true"
+            :multiple="true"
             :mode="mode"
+            :label="t('workload.container.security.capabilities.drop')"
+            :options="allCapabilities"
+            :disabled="mode==='view'"
             @update:value="update"
           />
         </div>
       </div>
-    </div>
-    <div class="spacer" />
-
-    <div
-      data-testid="input-security-runAsUser"
-      class="row mb-10"
-    >
-      <div class="col span-6">
-        <LabeledInput
-          v-model:value.number="runAsUser"
-          :label="t('workload.container.security.runAsUser')"
-          :mode="mode"
-          @update:value="update"
-        />
-      </div>
-    </div>
-
-    <div class="row">
-      <div
-        data-testid="input-security-add"
-        class="col span-6"
-      >
-        <LabeledSelect
-          v-model:value="add"
-          :taggable="true"
-          :close-on-select="false"
-          :mode="mode"
-          :multiple="true"
-          :label="t('workload.container.security.addCapabilities')"
-          :options="allCapabilities"
-          :disabled="mode==='view'"
-          @update:value="update"
-        />
-      </div>
-      <div
-        data-testid="input-security-drop"
-        class="col span-6"
-      >
-        <LabeledSelect
-          v-model:value="drop"
-          :close-on-select="false"
-          :taggable="true"
-          :multiple="true"
-          :mode="mode"
-          :label="t('workload.container.security.dropCapabilities')"
-          :options="allCapabilities"
-          :disabled="mode==='view'"
-          @update:value="update"
-        />
-      </div>
-    </div>
+    </fieldset>
   </div>
 </template>

package/components/form/__tests__/LabeledSelect.test.ts

@@ -253,7 +253,7 @@ describe('component: LabeledSelect', () => {
     // in the current architecture of the component
     // screen readers won't pick up the default "Select option" aria-label
     // from the library
-    expect(vSelectInput.attributes('aria-label')).toBe('-');
+    expect(vSelectInput.attributes('aria-label')).toBe(`- ${ value }`);
   });
 
   it('pressing space key while focused on search should not prevent event propagation', async() => {

package/components/form/__tests__/SeccompProfile.test.js

@@ -0,0 +1,124 @@
+import { mount } from '@vue/test-utils';
+import SeccompProfile from '@shell/components/form/SeccompProfile.vue';
+
+describe('component: SeccompProfile', () => {
+  // A mock for the i18n t function
+  const mockT = (key) => key;
+
+  const defaultMountOptions = {
+    props: {
+      mode:                'mode',
+      title:               'Test Title',
+      seccompProfileTypes: [
+        { label: 'None', value: 'None' },
+        { label: 'RuntimeDefault', value: 'RuntimeDefault' },
+        { label: 'Localhost', value: 'Localhost' },
+        { label: 'Unconfined', value: 'Unconfined' },
+      ]
+    },
+    global: { mocks: { $store: { getters: { 'i18n/t': mockT } } } }
+  };
+
+  it('should initialize with type "None" when no seccompProfile is provided', () => {
+    const wrapper = mount(SeccompProfile, {
+      ...defaultMountOptions,
+      props: {
+        ...defaultMountOptions.props,
+        value: {} // Empty securityContext
+      }
+    });
+
+    expect(wrapper.vm.type).toBe('None');
+  });
+
+  it('should initialize with the correct type when seccompProfile is provided', () => {
+    const wrapper = mount(SeccompProfile, {
+      ...defaultMountOptions,
+      props: {
+        ...defaultMountOptions.props,
+        value: { type: 'Unconfined' }
+      }
+    });
+
+    expect(wrapper.vm.type).toBe('Unconfined');
+  });
+
+  it('should initialize with localhostProfile when type is Localhost', () => {
+    const wrapper = mount(SeccompProfile, {
+      ...defaultMountOptions,
+      props: {
+        ...defaultMountOptions.props,
+        value: { type: 'Localhost', localhostProfile: '/my/path' }
+      }
+    });
+
+    expect(wrapper.vm.type).toBe('Localhost');
+    expect(wrapper.vm.localhostProfile).toBe('/my/path');
+    // The localhost input should be visible
+    expect(wrapper.find('[data-testid="seccomp-localhost-input"]').exists()).toBe(true);
+  });
+
+  it('should emit an update event to remove seccompProfile when type is changed to "None"', async() => {
+    const wrapper = mount(SeccompProfile, {
+      ...defaultMountOptions,
+      props: {
+        ...defaultMountOptions.props,
+        value: { seccompProfile: { type: 'Unconfined' } }
+      }
+    });
+
+    // Simulate changing select to 'None'
+    wrapper.vm.type = 'None';
+    await wrapper.vm.update();
+
+    const emitted = wrapper.emitted('update:value');
+
+    expect(emitted).toHaveLength(1);
+    // It should remove seccompProfile
+    expect(emitted[0][0]).toBeUndefined();
+  });
+
+  it('should emit an update event when the type is changed', async() => {
+    const wrapper = mount(SeccompProfile, {
+      ...defaultMountOptions,
+      props: {
+        ...defaultMountOptions.props,
+        value: { seccompProfile: { type: 'RuntimeDefault' } }
+      }
+    });
+
+    // Simulate changing the select
+    wrapper.vm.type = 'Unconfined';
+    await wrapper.vm.update();
+
+    const emitted = wrapper.emitted('update:value');
+
+    expect(emitted).toHaveLength(1);
+    expect(emitted[0][0]).toStrictEqual({ type: 'Unconfined' });
+  });
+
+  it('should emit an update event with localhostProfile when type is Localhost', async() => {
+    const wrapper = mount(SeccompProfile, {
+      ...defaultMountOptions,
+      props: {
+        ...defaultMountOptions.props,
+        value: { seccompProfile: { type: 'RuntimeDefault' } }
+      }
+    });
+
+    // Simulate changing to Localhost and filling the input
+    wrapper.vm.type = 'Localhost';
+    wrapper.vm.localhostProfile = '/my/local/path';
+    await wrapper.vm.update();
+
+    const emitted = wrapper.emitted('update:value');
+
+    expect(emitted).toHaveLength(1);
+    expect(emitted[0][0]).toStrictEqual(
+      {
+        type:             'Localhost',
+        localhostProfile: '/my/local/path'
+      }
+    );
+  });
+});