@rancher/shell 3.0.4 → 3.0.5-rc.2

package/components/form/SSHKnownHosts/index.vue

@@ -1,6 +1,5 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import KnownHostsEditDialog from './KnownHostsEditDialog.vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 
 export default defineComponent({
@@ -20,8 +19,6 @@ export default defineComponent({
     },
   },
 
-  components: { KnownHostsEditDialog },
-
   computed: {
     isViewMode() {
       return this.mode === _VIEW;
@@ -40,7 +37,20 @@ export default defineComponent({
   methods: {
     openDialog() {
       (this.$refs.button as HTMLInputElement)?.blur();
-      (this.$refs.editDialog as any).showDialog();
+
+      this.$store.dispatch('management/promptModal', {
+        component:           'KnownHostsEditDialog',
+        returnFocusSelector: '#known-ssh-hosts-trigger',
+        testId:              'sshKnownHostsDialog',
+        height:              'auto',
+        componentProps:      {
+          mode:   this.mode,
+          value:  this.value,
+          closed: (res: any) => {
+            this.dialogClosed(res);
+          }
+        }
+      });
     },
 
     dialogClosed(result: any) {
@@ -65,20 +75,19 @@ export default defineComponent({
     </div>
     <template v-if="!isViewMode">
       <button
+        id="known-ssh-hosts-trigger"
         ref="button"
+        role="button"
+        :aria-label="t('secret.ssh.editKnownHosts.title')"
         data-testid="input-known-ssh-hosts_open-dialog"
         class="show-dialog-btn btn"
         @click="openDialog"
       >
-        <i class="icon icon-edit" />
+        <i
+          class="icon icon-edit"
+          :alt="t('secret.ssh.editKnownHosts.title')"
+        />
       </button>
-
-      <KnownHostsEditDialog
-        ref="editDialog"
-        :value="value"
-        :mode="mode"
-        @closed="dialogClosed"
-      />
     </template>
   </div>
 </template>
@@ -94,8 +103,16 @@ export default defineComponent({
     }
 
     .show-dialog-btn {
-      display: contents;
       background-color: transparent;
+      padding: 4px;
+      height: 22px;
+      margin: -3px -3px 0 0;
+      min-height: unset;
+
+      &:focus-visible {
+        @include focus-outline;
+        outline-offset: 1px;
+      }
     }
   }
 </style>

package/components/form/Security.vue

@@ -5,6 +5,45 @@ import { _VIEW } from '@shell/config/query-params';
 import { mapGetters } from 'vuex';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
+const allCapabilities = ['ALL',
+  'AUDIT_CONTROL',
+  'AUDIT_WRITE',
+  'BLOCK_SUSPEND',
+  'CHOWN',
+  'DAC_OVERRIDE',
+  'DAC_READ_SEARCH',
+  'FOWNER',
+  'FSETID',
+  'IPC_LOCK',
+  'IPC_OWNER',
+  'KILL',
+  'LEASE',
+  'LINUX_IMMUTABLE',
+  'MAC_ADMIN',
+  'MAC_OVERRIDE',
+  'MKNOD',
+  'NET_ADMIN',
+  'NET_BIND_SERVICE',
+  'NET_BROADCAST',
+  'NET_RAW',
+  'SETFCAP',
+  'SETGID',
+  'SETPCAP',
+  'SETUID',
+  'SYSLOG',
+  'SYS_ADMIN',
+  'SYS_BOOT',
+  'SYS_CHROOT',
+  'SYS_MODULE',
+  'SYS_NICE',
+  'SYS_PACCT',
+  'SYS_PTRACE',
+  'SYS_RAWIO',
+  'SYS_RESOURCE',
+  'SYS_TIME',
+  'SYS_TTY_CONFIG',
+  'WAKE_ALARM'];
+
 export default {
   emits: ['update:value'],
 
@@ -25,68 +64,27 @@ export default {
   },
 
   data() {
-    const allCapabilities = ['ALL',
-      'AUDIT_CONTROL',
-      'AUDIT_WRITE',
-      'BLOCK_SUSPEND',
-      'CHOWN',
-      'DAC_OVERRIDE',
-      'DAC_READ_SEARCH',
-      'FOWNER',
-      'FSETID',
-      'IPC_LOCK',
-      'IPC_OWNER',
-      'KILL',
-      'LEASE',
-      'LINUX_IMMUTABLE',
-      'MAC_ADMIN',
-      'MAC_OVERRIDE',
-      'MKNOD',
-      'NET_ADMIN',
-      'NET_BIND_SERVICE',
-      'NET_BROADCAST',
-      'NET_RAW',
-      'SETFCAP',
-      'SETGID',
-      'SETPCAP',
-      'SETUID',
-      'SYSLOG',
-      'SYS_ADMIN',
-      'SYS_BOOT',
-      'SYS_CHROOT',
-      'SYS_MODULE',
-      'SYS_NICE',
-      'SYS_PACCT',
-      'SYS_PTRACE',
-      'SYS_RAWIO',
-      'SYS_RESOURCE',
-      'SYS_TIME',
-      'SYS_TTY_CONFIG',
-      'WAKE_ALARM'];
+    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
+    };
+  },
 
-    const {
-      capabilities = {},
-      runAsNonRoot = false,
-      readOnlyRootFilesystem = false,
-      privileged = false,
-      allowPrivilegeEscalation = false,
-      runAsUser
-    } = this.value;
+  created() {
+    const { capabilities = {} } = this.value;
     const {
       add = [],
       drop = []
     } = capabilities;
 
-    return {
-      privileged,
-      allowPrivilegeEscalation,
-      allCapabilities,
-      runAsNonRoot,
-      readOnlyRootFilesystem,
-      add,
-      drop,
-      runAsUser
-    };
+    this.add = add;
+    this.drop = drop;
   },
 
   computed: {

package/components/form/Select.vue

@@ -2,11 +2,12 @@
 import { get } from '@shell/utils/object';
 import LabeledFormElement from '@shell/mixins/labeled-form-element';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
+import { generateRandomAlphaString } from '@shell/utils/string';
 import { LabeledTooltip } from '@components/LabeledTooltip';
 import { onClickOption, calculatePosition } from '@shell/utils/select';
 
 export default {
-  emits: ['update:value', 'createdListItem'],
+  emits: ['update:value', 'createdListItem', 'on-open', 'on-close'],
 
   components: { LabeledTooltip },
   mixins:     [
@@ -90,9 +91,14 @@ export default {
     isLangSelect: {
       type:    Boolean,
       default: false
-    },
+    }
+  },
+  data() {
+    return {
+      isOpen:       false,
+      generatedUid: `s-uid-${ generateRandomAlphaString(12) }`
+    };
   },
-
   methods: {
     // resizeHandler = in mixin
     getOptionLabel(option) {
@@ -119,21 +125,6 @@ export default {
     },
 
     focusSearch() {
-      // we need this override as in a "closeOnSelect" type of component
-      // if we don't have this override, it would open again
-      if (this.overridesMixinPreventDoubleTriggerKeysOpen) {
-        this.$nextTick(() => {
-          const el = this.$refs['select'];
-
-          if ( el ) {
-            el.focus();
-          }
-
-          this.overridesMixinPreventDoubleTriggerKeysOpen = false;
-        });
-
-        return;
-      }
       this.$refs['select-input'].open = true;
 
       this.$nextTick(() => {
@@ -191,14 +182,26 @@ export default {
         return Math.random(100000);
       }
     },
+
     report(e) {
       alert(e);
     },
+
     handleDropdownOpen(args) {
       // function that prevents the "opening dropdown on focus"
       // default behaviour of v-select
       return args.noDrop || args.disabled ? false : args.open;
-    }
+    },
+    onOpen() {
+      this.isOpen = true;
+      this.$emit('on-open');
+      this.resizeHandler();
+    },
+
+    onClose() {
+      this.isOpen = false;
+      this.$emit('on-close');
+    },
   },
   computed: {
     requiredField() {
@@ -259,6 +262,10 @@ export default {
       [$attrs.class]: $attrs.class
     }"
     :tabindex="disabled || isView ? -1 : 0"
+    role="combobox"
+    :aria-expanded="isOpen"
+    :aria-label="$attrs['aria-label'] || undefined"
+    :aria-describedby="$attrs['aria-describedby'] || undefined"
     @click="focusSearch"
     @keydown.enter="focusSearch"
     @keydown.down.prevent="focusSearch"
@@ -286,12 +293,16 @@ export default {
       :modelValue="value != null ? value : ''"
       :dropdownShouldOpen="handleDropdownOpen"
       :tabindex="-1"
-      role="listbox"
+      role="listitem"
+      :uid="generatedUid"
+      :aria-label="'-'"
       @update:modelValue="$emit('update:value', $event)"
       @search:blur="onBlur"
       @search:focus="onFocus"
-      @open="resizeHandler"
+      @open="onOpen"
+      @close="onClose"
       @option:created="(e) => $emit('createdListItem', e)"
+      @keydown.enter.stop
     >
       <template
         #option="option"

package/components/form/ShellInput.vue

@@ -21,6 +21,10 @@ export default {
       causes $emit 'input' of ["-c", "sleep 600"]
   */
   data() {
+    return { userValue: '' };
+  },
+
+  created() {
     let userValue = '';
 
     if ( this.value ) {
@@ -36,7 +40,7 @@ export default {
       }, '').trim();
     }
 
-    return { userValue };
+    this.userValue = userValue;
   },
 
   methods: {

package/components/form/Tolerations.vue

@@ -29,6 +29,10 @@ export default {
   },
 
   data() {
+    return { rules: [] };
+  },
+
+  created() {
     const rules = [];
 
     // on creation in agent configuration, the backend "eats"
@@ -49,7 +53,7 @@ export default {
       });
     }
 
-    return { rules };
+    this.rules = rules;
   },
 
   computed: {

package/components/form/ValueFromResource.vue

@@ -4,6 +4,7 @@ import { get } from '@shell/utils/object';
 import { _VIEW } from '@shell/config/query-params';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { LabeledInput } from '@components/Form/LabeledInput';
+import { ref, watch } from 'vue';
 
 export default {
   emits: ['update:value', 'remove'],
@@ -44,84 +45,164 @@ export default {
   },
 
   data() {
-    const typeOpts = [
-      { value: 'simple', label: 'Key/Value Pair' },
-      { value: 'resourceFieldRef', label: 'Resource' },
-      { value: 'configMapKeyRef', label: 'ConfigMap Key' },
-      { value: 'secretKeyRef', label: 'Secret key' },
-      { value: 'fieldRef', label: 'Pod Field' },
-      { value: 'secretRef', label: 'Secret' },
-      { value: 'configMapRef', label: 'ConfigMap' },
-    ];
-
-    const resourceKeyOpts = ['limits.cpu', 'limits.ephemeral-storage', 'limits.memory', 'requests.cpu', 'requests.ephemeral-storage', 'requests.memory'];
-    let type;
-
-    if (this.value.secretRef) {
-      type = 'secretRef';
-    } else if (this.value.configMapRef) {
-      type = 'configMapRef';
-    } else if (this.value.value) {
-      type = 'simple';
-    } else if (this.value.valueFrom) {
-      type = Object.keys((this.value.valueFrom))[0] || 'simple';
+    return {
+      typeOpts: [
+        { value: 'simple', label: 'Key/Value Pair' },
+        { value: 'resourceFieldRef', label: 'Resource' },
+        { value: 'configMapKeyRef', label: 'ConfigMap Key' },
+        { value: 'secretKeyRef', label: 'Secret key' },
+        { value: 'fieldRef', label: 'Pod Field' },
+        { value: 'secretRef', label: 'Secret' },
+        { value: 'configMapRef', label: 'ConfigMap' },
+      ],
+      secrets:         this.allSecrets,
+      resourceKeyOpts: ['limits.cpu', 'limits.ephemeral-storage', 'limits.memory', 'requests.cpu', 'requests.ephemeral-storage', 'requests.memory'],
+    };
+  },
+
+  setup(props, { emit }) {
+    const type = ref(null);
+
+    if (props.value.secretRef) {
+      type.value = 'secretRef';
+    } else if (props.value.configMapRef) {
+      type.value = 'configMapRef';
+    } else if (props.value.value) {
+      type.value = 'simple';
+    } else if (props.value.valueFrom) {
+      type.value = Object.keys((props.value.valueFrom))[0] || 'simple';
     }
 
-    let refName;
-    let name;
-    let fieldPath;
-    let referenced;
-    let key;
-    let valStr;
-    const keys = [];
+    const refName = ref('');
+    const name = ref('');
+    const fieldPath = ref('');
+    const referenced = ref(null);
+    const key = ref(null);
+    const valStr = ref('');
+    const keys = ref([]);
 
-    switch (type) {
+    switch (type.value) {
     case 'resourceFieldRef':
-      name = this.value.name;
-      refName = this.value.valueFrom[type].containerName;
-      key = this.value.valueFrom[type].resource || '';
+      name.value = props.value.name;
+      refName.value = props.value.valueFrom[type.value].containerName;
+      key.value = props.value.valueFrom[type.value].resource || '';
       break;
     case 'configMapKeyRef':
-      name = this.value.name;
-      key = this.value.valueFrom[type].key || '';
-      refName = this.value.valueFrom[type].name;
-      referenced = this.allConfigMaps.filter((resource) => {
-        return resource.metadata.name === refName;
+      name.value = props.value.name;
+      key.value = props.value.valueFrom[type.value].key || '';
+      refName.value = props.value.valueFrom[type.value].name;
+      referenced.value = props.allConfigMaps.filter((resource) => {
+        return resource.metadata.name === refName.value;
       })[0];
-      if (referenced && referenced.data) {
-        keys.push(...Object.keys(referenced.data));
+      if (referenced.value && referenced.value.data) {
+        keys.value.push(...Object.keys(referenced.value.data));
       }
       break;
     case 'secretRef':
     case 'configMapRef':
-      name = this.value.prefix;
-      refName = this.value[type].name;
+      name.value = props.value.prefix;
+      refName.value = props.value[type.value].name;
       break;
     case 'secretKeyRef':
-      name = this.value.name;
-      key = this.value.valueFrom[type].key || '';
-      refName = this.value.valueFrom[type].name;
-      referenced = this.allSecrets.filter((resource) => {
-        return resource.metadata.name === refName;
+      name.value = props.value.name;
+      key.value = props.value.valueFrom[type.value].key || '';
+      refName.value = props.value.valueFrom[type.value].name;
+      referenced.value = props.allSecrets.filter((resource) => {
+        return resource.metadata.name === refName.value;
       })[0];
-      if (referenced && referenced.data) {
-        keys.push(...Object.keys(referenced.data));
+      if (referenced.value && referenced.value.data) {
+        keys.value.push(...Object.keys(referenced.value.data));
       }
       break;
     case 'fieldRef':
-      fieldPath = get(this.value.valueFrom, `${ type }.fieldPath`) || '';
-      name = this.value.name;
+      fieldPath.value = get(props.value.valueFrom, `${ type.value }.fieldPath`) || '';
+      name.value = props.value.name;
       break;
     default:
-      name = this.value.name;
-      valStr = this.value.value;
+      name.value = props.value.name;
+      valStr.value = props.value.value;
       break;
     }
 
+    referenced.value = refName.value;
+
+    const updateRow = () => {
+      if (!name.value?.length && !refName.value?.length) {
+        if (type.value !== 'fieldRef') {
+          emit('update:value', null);
+
+          return;
+        }
+      }
+      let out = { name: name.value || refName.value };
+
+      switch (type.value) {
+      case 'configMapKeyRef':
+      case 'secretKeyRef':
+        out.valueFrom = {
+          [type.value]: {
+            key: key.value, name: refName.value, optional: false
+          }
+        };
+        break;
+      case 'resourceFieldRef':
+        out.valueFrom = {
+          [type.value]: {
+            containerName: refName.value, divisor: 1, resource: key.value
+          }
+        };
+        break;
+      case 'fieldRef':
+        if (!fieldPath.value || !fieldPath.value.length) {
+          out = null; break;
+        }
+        out.valueFrom = { [type.value]: { apiVersion: 'v1', fieldPath: fieldPath.value } };
+        break;
+      case 'simple':
+        out.value = valStr.value;
+        break;
+      default:
+        delete out.name;
+        out.prefix = name.value;
+        out[type.value] = { name: refName.value, optional: false };
+      }
+      emit('update:value', out);
+    };
+
+    watch(type, () => {
+      referenced.value = null;
+      key.value = '';
+      refName.value = '';
+      keys.value = [];
+      key.value = '';
+      valStr.value = '';
+      fieldPath.value = '';
+    });
+
+    watch(referenced, (neu, old) => {
+      if (neu) {
+        if ((neu.type === SECRET || neu.type === CONFIG_MAP) && neu.data) {
+          keys.value = Object.keys(neu.data);
+        }
+        refName.value = neu?.metadata?.name;
+      }
+      updateRow();
+    });
+
     return {
-      typeOpts, type, refName, referenced: refName, secrets: this.allSecrets, keys, key, fieldPath, name, resourceKeyOpts, valStr
+      type,
+      refName,
+      referenced,
+      keys,
+      key,
+      fieldPath,
+      name,
+      valStr,
+      updateRow,
+      get,
     };
   },
+
   computed: {
     isView() {
       return this.mode === _VIEW;
@@ -189,74 +270,6 @@ export default {
       return ['resourceFieldRef', 'configMapKeyRef', 'secretKeyRef'].includes(this.type);
     },
   },
-
-  watch: {
-    type() {
-      this.referenced = null;
-      this.key = '';
-      this.refName = '';
-      this.keys = [];
-      this.key = '';
-      this.valStr = '';
-      this.fieldPath = '';
-    },
-
-    referenced(neu, old) {
-      if (neu) {
-        if ((neu.type === SECRET || neu.type === CONFIG_MAP) && neu.data) {
-          this.keys = Object.keys(neu.data);
-        }
-        this.refName = neu?.metadata?.name;
-      }
-      this.updateRow();
-    },
-  },
-
-  methods: {
-    updateRow() {
-      if (!this.name?.length && !this.refName?.length) {
-        if (this.type !== 'fieldRef') {
-          this.$emit('update:value', null);
-
-          return;
-        }
-      }
-      let out = { name: this.name || this.refName };
-
-      switch (this.type) {
-      case 'configMapKeyRef':
-      case 'secretKeyRef':
-        out.valueFrom = {
-          [this.type]: {
-            key: this.key, name: this.refName, optional: false
-          }
-        };
-        break;
-      case 'resourceFieldRef':
-        out.valueFrom = {
-          [this.type]: {
-            containerName: this.refName, divisor: 1, resource: this.key
-          }
-        };
-        break;
-      case 'fieldRef':
-        if (!this.fieldPath || !this.fieldPath.length) {
-          out = null; break;
-        }
-        out.valueFrom = { [this.type]: { apiVersion: 'v1', fieldPath: this.fieldPath } };
-        break;
-      case 'simple':
-        out.value = this.valStr;
-        break;
-      default:
-        delete out.name;
-        out.prefix = this.name;
-        out[this.type] = { name: this.refName, optional: false };
-      }
-      this.$emit('update:value', out);
-    },
-    get
-  }
 };
 </script>