@rancher/shell 3.0.2-rc.3 → 3.0.2-rc.4

package/components/form/SSHKnownHosts/KnownHostsEditDialog.vue

@@ -0,0 +1,192 @@
+<script>
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import CodeMirror from '@shell/components/CodeMirror';
+import FileSelector from '@shell/components/form/FileSelector.vue';
+import AppModal from '@shell/components/AppModal.vue';
+
+export default {
+  emits: ['closed'],
+
+  components: {
+    FileSelector,
+    AppModal,
+    CodeMirror,
+  },
+
+  props: {
+    value: {
+      type:     String,
+      required: true
+    },
+
+    mode: {
+      type:    String,
+      default: _EDIT
+    },
+  },
+
+  data() {
+    const codeMirrorOptions = {
+      readOnly:        this.isView,
+      gutters:         ['CodeMirror-foldgutter'],
+      mode:            'text/x-properties',
+      lint:            false,
+      lineNumbers:     !this.isView,
+      styleActiveLine: false,
+      tabSize:         2,
+      indentWithTabs:  false,
+      cursorBlinkRate: 530,
+    };
+
+    return {
+      codeMirrorOptions,
+      text:      this.value,
+      showModal: false,
+    };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    }
+  },
+
+  methods: {
+    onTextChange(value) {
+      this.text = value?.trim();
+    },
+
+    showDialog() {
+      this.showModal = true;
+    },
+
+    closeDialog(result) {
+      if (!result) {
+        this.text = this.value;
+      }
+
+      this.showModal = false;
+
+      this.$emit('closed', {
+        success: result,
+        value:   this.text,
+      });
+    },
+  }
+};
+</script>
+
+<template>
+  <app-modal
+    v-if="showModal"
+    ref="sshKnownHostsDialog"
+    height="auto"
+    :scrollable="true"
+    @close="closeDialog(false)"
+  >
+    <div
+      class="ssh-known-hosts-dialog"
+    >
+      <h4 class="mt-10">
+        {{ t('secret.ssh.editKnownHosts.title') }}
+      </h4>
+      <div class="custom mt-10">
+        <div class="dialog-panel">
+          <CodeMirror
+            class="code-mirror"
+            :value="text"
+            data-testid="ssh-known-hosts-dialog_code-mirror"
+            :options="codeMirrorOptions"
+            :showKeyMapBox="true"
+            @onInput="onTextChange"
+          />
+        </div>
+        <div class="dialog-actions">
+          <div class="action-pannel file-selector">
+            <FileSelector
+              class="btn role-secondary"
+              data-testid="ssh-known-hosts-dialog_file-selector"
+              :label="t('generic.readFromFile')"
+              @selected="onTextChange"
+            />
+          </div>
+          <div class="action-pannel form-actions">
+            <button
+              class="btn role-secondary"
+              data-testid="ssh-known-hosts-dialog_cancel-btn"
+              @click="closeDialog(false)"
+            >
+              {{ t('generic.cancel') }}
+            </button>
+            <button
+              class="btn role-primary"
+              data-testid="ssh-known-hosts-dialog_save-btn"
+              @click="closeDialog(true)"
+            >
+              {{ t('generic.save') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </app-modal>
+</template>
+
+<style lang="scss" scoped>
+  .ssh-known-hosts-dialog {
+    padding: 15px;
+
+    h4 {
+      font-weight: bold;
+      margin-bottom: 20px;
+    }
+
+    .dialog-panel {
+      display: flex;
+      flex-direction: column;
+      min-height: 100px;
+      border: 1px solid var(--border);
+
+      :deep() .code-mirror {
+        display: flex;
+        flex-direction: column;
+        resize: none;
+        max-height: 400px;
+        height: 50vh;
+
+        .CodeMirror,
+        .CodeMirror-gutters {
+          min-height: 400px;
+          max-height: 400px;
+          background-color: var(--yaml-editor-bg);
+        }
+
+        .CodeMirror-gutters {
+          width: 25px;
+        }
+
+        .CodeMirror-linenumber {
+          padding-left: 0;
+        }
+      }
+    }
+
+    .dialog-actions {
+      display: flex;
+      justify-content: space-between;
+
+      .action-pannel {
+        margin-top: 10px;
+      }
+
+      .form-actions {
+        display: flex;
+        justify-content: flex-end;
+
+        > *:not(:last-child) {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+</style>

package/components/form/SSHKnownHosts/__tests__/KnownHostsEditDialog.test.ts

@@ -0,0 +1,104 @@
+import { mount, VueWrapper } from '@vue/test-utils';
+import { _EDIT } from '@shell/config/query-params';
+import KnownHostsEditDialog from '@shell/components/form/SSHKnownHosts/KnownHostsEditDialog.vue';
+import CodeMirror from '@shell/components/CodeMirror.vue';
+import FileSelector from '@shell/components/form/FileSelector.vue';
+
+let wrapper: VueWrapper<InstanceType<typeof KnownHostsEditDialog>>;
+
+const mockedStore = () => {
+  return { getters: { 'prefs/get': () => jest.fn() } };
+};
+
+const requiredSetup = () => {
+  return { global: { mocks: { $store: mockedStore() } } };
+};
+
+describe('component: KnownHostsEditDialog', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="modals"></div>';
+    wrapper = mount(KnownHostsEditDialog, {
+      attachTo: document.body,
+      props:    {
+        mode:  _EDIT,
+        value: 'line1\nline2\n',
+      },
+      ...requiredSetup(),
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+    document.body.innerHTML = '';
+  });
+
+  it('should update text from CodeMirror', async() => {
+    await wrapper.setData({ showModal: true });
+
+    expect(wrapper.vm.text).toBe('line1\nline2\n');
+
+    const codeMirror = wrapper.getComponent(CodeMirror);
+
+    expect(codeMirror.element).toBeDefined();
+
+    await codeMirror.setData({ loaded: true });
+
+    // Emit CodeMirror value
+    codeMirror.vm.$emit('onInput', 'bar');
+    await codeMirror.vm.$nextTick();
+
+    expect(wrapper.vm.text).toBe('bar');
+  });
+
+  it('should update text from FileSelector', async() => {
+    await wrapper.setData({ showModal: true });
+
+    expect(wrapper.vm.text).toBe('line1\nline2\n');
+
+    const fileSelector = wrapper.getComponent(FileSelector);
+
+    expect(fileSelector.element).toBeDefined();
+
+    // Emit Fileselector value
+    fileSelector.vm.$emit('selected', 'foo');
+    await fileSelector.vm.$nextTick();
+
+    expect(wrapper.vm.text).toBe('foo');
+  });
+
+  it('should save changes and close dialog', async() => {
+    await wrapper.setData({
+      showModal: true,
+      text:      'foo',
+    });
+
+    expect(wrapper.vm.value).toBe('line1\nline2\n');
+    expect(wrapper.vm.text).toBe('foo');
+
+    await wrapper.vm.closeDialog(true);
+
+    expect((wrapper.emitted('closed') as any)[0][0].value).toBe('foo');
+
+    const dialog = wrapper.vm.$refs['sshKnownHostsDialog'];
+
+    expect(dialog).toBeNull();
+  });
+
+  it('should discard changes and close dialog', async() => {
+    await wrapper.setData({
+      showModal: true,
+      text:      'foo',
+    });
+
+    expect(wrapper.vm.value).toBe('line1\nline2\n');
+    expect(wrapper.vm.text).toBe('foo');
+
+    await wrapper.vm.closeDialog(false);
+
+    expect((wrapper.emitted('closed') as any)[0][0].value).toBe('line1\nline2\n');
+
+    const dialog = wrapper.vm.$refs['sshKnownHostsDialog'];
+
+    expect(dialog).toBeNull();
+  });
+});

package/components/form/SSHKnownHosts/index.vue

@@ -0,0 +1,101 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import KnownHostsEditDialog from './KnownHostsEditDialog.vue';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+
+export default defineComponent({
+  name: 'SSHKnownHosts',
+
+  emits: ['update:value'],
+
+  props: {
+    value: {
+      type:     String,
+      required: true
+    },
+
+    mode: {
+      type:    String,
+      default: _EDIT
+    },
+  },
+
+  components: { KnownHostsEditDialog },
+
+  computed: {
+    isViewMode() {
+      return this.mode === _VIEW;
+    },
+
+    // The number of entries - exclude empty lines and comments
+    entries() {
+      return this.value.split('\n').filter((line: string) => !!line.trim().length && !line.startsWith('#')).length;
+    },
+
+    summary() {
+      return this.t('secret.ssh.editKnownHosts.entries', { entries: this.entries });
+    }
+  },
+
+  methods: {
+    openDialog() {
+      (this.$refs.button as HTMLInputElement)?.blur();
+      (this.$refs.editDialog as any).showDialog();
+    },
+
+    dialogClosed(result: any) {
+      if (result.success) {
+        this.$emit('update:value', result.value);
+      }
+    }
+  }
+});
+</script>
+<template>
+  <div
+    class="input-known-ssh-hosts labeled-input"
+    data-testid="input-known-ssh-hosts"
+  >
+    <label>{{ t('secret.ssh.knownHosts') }}</label>
+    <div
+      class="hosts-input"
+      data-testid="input-known-ssh-hosts_summary"
+    >
+      {{ summary }}
+    </div>
+    <template v-if="!isViewMode">
+      <button
+        ref="button"
+        data-testid="input-known-ssh-hosts_open-dialog"
+        class="show-dialog-btn btn"
+        @click="openDialog"
+      >
+        <i class="icon icon-edit" />
+      </button>
+
+      <KnownHostsEditDialog
+        ref="editDialog"
+        :value="value"
+        :mode="mode"
+        @closed="dialogClosed"
+      />
+    </template>
+  </div>
+</template>
+<style lang="scss" scoped>
+  .input-known-ssh-hosts {
+    display: flex;
+    justify-content: space-between;
+
+    .hosts-input {
+      cursor: default;
+      line-height: calc(18px + 1px);
+      padding: 18px 0 0 0;
+    }
+
+    .show-dialog-btn {
+      display: contents;
+      background-color: transparent;
+    }
+  }
+</style>

package/components/form/Select.vue

@@ -256,7 +256,7 @@ export default {
     }"
     :tabindex="disabled || isView ? -1 : 0"
     @click="focusSearch"
-    @keyup.enter.space.down="focusSearch"
+    @keydown.enter.space.down="focusSearch"
   >
     <v-select
       ref="select-input"

package/components/form/SelectOrCreateAuthSecret.vue

@@ -3,6 +3,7 @@ import { _EDIT } from '@shell/config/query-params';
 import { Banner } from '@components/Banner';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import SSHKnownHosts from '@shell/components/form/SSHKnownHosts';
 import { AUTH_TYPE, NORMAN, SECRET } from '@shell/config/types';
 import { SECRET_TYPES } from '@shell/config/secret';
 import { base64Encode } from '@shell/utils/crypto';
@@ -23,6 +24,7 @@ export default {
     Banner,
     LabeledInput,
     LabeledSelect,
+    SSHKnownHosts,
   },
 
   props: {
@@ -142,6 +144,11 @@ export default {
       type:    Boolean,
       default: false,
     },
+
+    showSshKnownHosts: {
+      type:    Boolean,
+      default: true,
+    },
   },
 
   async fetch() {
@@ -172,6 +179,7 @@ export default {
     if ( !this.value ) {
       this.publicKey = this.preSelect?.publicKey || '';
       this.privateKey = this.preSelect?.privateKey || '';
+      this.sshKnownHosts = this.preSelect?.sshKnownHosts || '';
     }
 
     this.updateSelectedFromValue();
@@ -189,9 +197,10 @@ export default {
 
       filterByNamespace: this.namespace && this.limitToNamespace,
 
-      publicKey:  '',
-      privateKey: '',
-      uniqueId:   new Date().getTime(), // Allows form state to be individually tracked if the form is in a list
+      publicKey:     '',
+      privateKey:    '',
+      sshKnownHosts: '',
+      uniqueId:      new Date().getTime(), // Allows form state to be individually tracked if the form is in a list
 
       SSH:   AUTH_TYPE._SSH,
       BASIC: AUTH_TYPE._BASIC,
@@ -372,15 +381,16 @@ export default {
         return 'mt-20';
       }
 
-      return 'col span-4';
+      return (this.selected === AUTH_TYPE._SSH) && this.showSshKnownHosts ? 'col span-3' : 'col span-4';
     }
   },
 
   watch: {
-    selected:   'update',
-    publicKey:  'updateKeyVal',
-    privateKey: 'updateKeyVal',
-    value:      'updateSelectedFromValue',
+    selected:      'update',
+    publicKey:     'updateKeyVal',
+    privateKey:    'updateKeyVal',
+    sshKnownHosts: 'updateKeyVal',
+    value:         'updateSelectedFromValue',
 
     async namespace(ns) {
       if (ns && !this.selected.startsWith(`${ ns }/`)) {
@@ -463,13 +473,20 @@ export default {
       if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._RKE].includes(this.selected) ) {
         this.privateKey = '';
         this.publicKey = '';
+        this.sshKnownHosts = '';
       }
 
-      this.$emit('inputauthval', {
+      const value = {
         selected:   this.selected,
         privateKey: this.privateKey,
-        publicKey:  this.publicKey
-      });
+        publicKey:  this.publicKey,
+      };
+
+      if (this.sshKnownHosts) {
+        value.sshKnownHosts = this.sshKnownHosts;
+      }
+
+      this.$emit('inputauthval', value);
     },
 
     update() {
@@ -550,6 +567,12 @@ export default {
             [publicField]:  base64Encode(this.publicKey),
             [privateField]: base64Encode(this.privateKey),
           };
+
+          // Add ssh known hosts data key - we will add a key with an empty value if the inout field was left blank
+          // This ensures on edit of the secret, we allow the user to edit the known_hosts field
+          if ((this.selected === AUTH_TYPE._SSH) && this.showSshKnownHosts) {
+            secret.data.known_hosts = base64Encode(this.sshKnownHosts || '');
+          }
         }
       }
 
@@ -603,6 +626,15 @@ export default {
             label-key="selectOrCreateAuthSecret.ssh.privateKey"
           />
         </div>
+        <div
+          v-if="showSshKnownHosts"
+          class="col span-2"
+        >
+          <SSHKnownHosts
+            v-model:value="sshKnownHosts"
+            :mode="mode"
+          />
+        </div>
       </template>
       <template v-else-if="selected === BASIC || selected === RKE">
         <Banner

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

@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import SSHKnownHosts from '@shell/components/form/SSHKnownHosts/index.vue';
+
+describe('component: SSHKnownHosts', () => {
+  it.each([
+    ['0 entities', '', 0],
+    ['0 entities (multiple empty lines)', '\n  \n  \n', 0],
+    ['1 entity', 'line1\n', 1],
+    ['1 entity (multiple empty lines)', 'line1\n\n\n', 1],
+    ['2 entities', 'line1\nline2\n', 2],
+    ['2 entities (multiple empty lines)', 'line1\n  \n  line2\n \n', 2],
+  ])('mode view: summary should be: %p', (_, value, entities) => {
+    const wrapper = mount(SSHKnownHosts, {
+      props: {
+        mode: _VIEW,
+        value,
+      }
+    });
+
+    const knownSshHostsSummary = wrapper.find('[data-testid="input-known-ssh-hosts_summary"]');
+    const knownSshHostsOpenDialog = wrapper.findAll('[data-testid="input-known-ssh-hosts_open-dialog"]');
+
+    expect(wrapper.vm.entries).toBe(entities);
+    expect(knownSshHostsSummary.element).toBeDefined();
+    expect(knownSshHostsOpenDialog).toHaveLength(0);
+  });
+
+  it('mode edit: should display summary and edit button', () => {
+    const wrapper = mount(SSHKnownHosts, {
+      props: {
+        mode:  _EDIT,
+        value: 'line1\nline2\n',
+      }
+    });
+
+    const knownSshHostsSummary = wrapper.find('[data-testid="input-known-ssh-hosts_summary"]');
+    const knownSshHostsOpenDialog = wrapper.find('[data-testid="input-known-ssh-hosts_open-dialog"]');
+
+    expect(knownSshHostsSummary.element).toBeDefined();
+    expect(knownSshHostsOpenDialog.element).toBeDefined();
+  });
+
+  it('mode edit: should open edit dialog', async() => {
+    const wrapper = mount(SSHKnownHosts, {
+      props: {
+        mode:  _EDIT,
+        value: '',
+      }
+    });
+
+    const knownSshHostsOpenDialog = wrapper.find('[data-testid="input-known-ssh-hosts_open-dialog"]');
+    const editDialog = wrapper.vm.$refs['editDialog'] as any;
+
+    await knownSshHostsOpenDialog.trigger('click');
+
+    expect(editDialog.showModal).toBe(true);
+  });
+});

package/composables/focusTrap.ts

@@ -0,0 +1,68 @@
+/**
+ * focusTrap is a composable based on the "focus-trap" package that allows us to implement focus traps
+ * on components for keyboard navigation is a safe and reusable way
+ */
+import { watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
+import { createFocusTrap, FocusTrap } from 'focus-trap';
+
+export function getFirstFocusableElement(element:any = document):any {
+  const focusableElements = element.querySelectorAll(
+    'a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
+  );
+  const filteredFocusableElements:any = [];
+
+  focusableElements.forEach((el:any) => {
+    if (!el.hasAttribute('disabled')) {
+      filteredFocusableElements.push(el);
+    }
+  });
+
+  return filteredFocusableElements.length ? filteredFocusableElements[0] : document.body;
+}
+
+export const DEFAULT_FOCUS_TRAP_OPTS = {
+  escapeDeactivates: true,
+  allowOutsideClick: true
+};
+
+export function useBasicSetupFocusTrap(focusElement: string | HTMLElement, opts:any = DEFAULT_FOCUS_TRAP_OPTS) {
+  let focusTrapInstance: FocusTrap;
+  let focusEl;
+
+  onMounted(() => {
+    focusEl = typeof focusElement === 'string' ? document.querySelector(focusElement) as HTMLElement : focusElement;
+
+    focusTrapInstance = createFocusTrap(focusEl, opts);
+
+    nextTick(() => {
+      focusTrapInstance.activate();
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (Object.keys(focusTrapInstance).length) {
+      focusTrapInstance.deactivate();
+    }
+  });
+}
+
+export function useWatcherBasedSetupFocusTrapWithDestroyIncluded(watchVar:any, focusElement: string | HTMLElement, opts:any = DEFAULT_FOCUS_TRAP_OPTS) {
+  let focusTrapInstance: FocusTrap;
+  let focusEl;
+
+  watch(watchVar, (neu) => {
+    if (neu) {
+      nextTick(() => {
+        focusEl = typeof focusElement === 'string' ? document.querySelector(focusElement) as HTMLElement : focusElement;
+
+        focusTrapInstance = createFocusTrap(focusEl, opts);
+
+        nextTick(() => {
+          focusTrapInstance.activate();
+        });
+      });
+    } else if (!neu && Object.keys(focusTrapInstance).length) {
+      focusTrapInstance.deactivate();
+    }
+  });
+}

package/detail/secret.vue

@@ -122,6 +122,10 @@ export default {
       return this.value._type === TYPES.SSH;
     },
 
+    showKnownHosts() {
+      return this.isSsh && this.value.supportsSshKnownHosts;
+    },
+
     isBasicAuth() {
       return this.value._type === TYPES.BASIC;
     },
@@ -142,6 +146,12 @@ export default {
       return rows;
     },
 
+    knownHosts() {
+      const { data = {} } = this.value;
+
+      return data.known_hosts ? base64Decode(data.known_hosts) : '';
+    },
+
     dataLabel() {
       switch (this.value._type) {
       case TYPES.TLS:
@@ -274,6 +284,21 @@ export default {
         </div>
       </div>
     </Tab>
+    <Tab
+      v-if="showKnownHosts"
+      name="known_hosts"
+      label-key="secret.ssh.knownHosts"
+    >
+      <div class="row">
+        <div class="col span-12">
+          <DetailText
+            :value="knownHosts"
+            label-key="secret.ssh.knownHosts"
+            :conceal="false"
+          />
+        </div>
+      </div>
+    </Tab>
   </ResourceTabs>
 </template>