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

package/components/ResourceTable.vue

@@ -190,20 +190,6 @@ export default {
     },
   },
 
-  mounted() {
-    /**
-     * v-shortkey prevents the event's propagation:
-     * https://github.com/fgr-araujo/vue-shortkey/blob/55d802ea305cadcc2ea970b55a3b8b86c7b44c05/src/index.js#L156-L157
-     *
-     * 'Enter' key press is handled via event listener in order to allow the event propagation
-     */
-    window.addEventListener('keyup', this.handleEnterKeyPress);
-  },
-
-  beforeUnmount() {
-    window.removeEventListener('keyup', this.handleEnterKeyPress);
-  },
-
   data() {
     // Confirm which store we're in, if schema isn't available we're probably showing a list with different types
     const inStore = this.schema?.id ? this.$store.getters['currentStore'](this.schema.id) : undefined;
@@ -602,6 +588,7 @@ export default {
     :mandatory-sort="_mandatorySort"
     @clickedActionButton="handleActionButtonClick"
     @group-value-change="group = $event"
+    @enter="handleEnterKeyPress"
   >
     <template
       v-if="showGrouping"

package/components/SelectIconGrid.vue

@@ -148,10 +148,12 @@ export default {
         <i
           v-if="r.iconClass"
           :class="r.iconClass"
+          :alt="t('catalog.charts.iconAlt', { app: get(r, nameField) })"
         />
         <LazyImage
           v-else
           :src="get(r, iconField)"
+          :alt="t('catalog.charts.iconAlt', { app: get(r, nameField) })"
         />
       </div>
       <h4 class="name">

package/components/SortableTable/index.vue

@@ -1,6 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
-import { defineAsyncComponent } from 'vue';
+import { defineAsyncComponent, useTemplateRef, onMounted, onBeforeUnmount } from 'vue';
 import day from 'dayjs';
 import isEmpty from 'lodash/isEmpty';
 import { dasherize, ucFirst } from '@shell/utils/string';
@@ -42,7 +42,14 @@ import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
 export default {
   name: 'SortableTable',
 
-  emits: ['clickedActionButton', 'pagination-changed', 'group-value-change', 'selection', 'rowClick'],
+  emits: [
+    'clickedActionButton',
+    'pagination-changed',
+    'group-value-change',
+    'selection',
+    'rowClick',
+    'enter',
+  ],
 
   components: {
     THead,
@@ -518,6 +525,23 @@ export default {
       immediate: true
     },
   },
+  setup(_props, { emit }) {
+    const table = useTemplateRef('table');
+
+    const handleEnterKey = (event) => {
+      if (event.key === 'Enter' && !event.target?.classList?.contains('checkbox-custom')) {
+        emit('enter', event);
+      }
+    };
+
+    onMounted(() => {
+      table.value.addEventListener('keyup', handleEnterKey);
+    });
+
+    onBeforeUnmount(() => {
+      table.value.removeEventListener('keyup', handleEnterKey);
+    });
+  },
 
   created() {
     this.debouncedRefreshTableData = debounce(this.refreshTableData, 500);
@@ -1056,6 +1080,7 @@ export default {
                 :disabled="!act.enabled"
                 :data-testid="componentTestid + '-' + act.action"
                 @click="applyTableAction(act, null, $event)"
+                @keydown.enter.stop
                 @mouseover="setBulkActionOfInterest(act)"
                 @mouseleave="setBulkActionOfInterest(null)"
               >
@@ -1221,6 +1246,7 @@ export default {
       </div>
     </div>
     <table
+      ref="table"
       class="sortable-table"
       :class="classObject"
       width="100%"
@@ -1299,6 +1325,7 @@ export default {
         v-for="(groupedRows) in displayRows"
         v-else
         :key="groupedRows.key"
+        tabindex="-1"
         :class="{ group: groupBy }"
       >
         <slot
@@ -1350,7 +1377,8 @@ export default {
                   class="row-check"
                   align="middle"
                 >
-                  {{ row.mainRowKey }}<Checkbox
+                  {{ row.mainRowKey }}
+                  <Checkbox
                     class="selection-checkbox"
                     :data-node-id="row.key"
                     :data-testid="componentTestid + '-' + i + '-checkbox'"
@@ -1451,6 +1479,7 @@ export default {
                       :ref="`actionButton${i}`"
                       aria-haspopup="true"
                       aria-expanded="false"
+                      :aria-label="t('sortableTable.tableActionsLabel', { resource: row?.row?.id || '' })"
                       :data-testid="componentTestid + '-' + i + '-action-button'"
                       :borderless="true"
                       @click="handleActionButtonClick(i, $event)"

package/components/Tabbed/index.vue

@@ -276,12 +276,11 @@ export default {
           :data-testid="`btn-${tab.name}`"
           :aria-controls="'#' + tab.name"
           :aria-selected="tab.active"
-          :aria-label="tab.labelDisplay"
+          :aria-label="tab.labelDisplay || ''"
           role="tab"
           tabindex="0"
           @click.prevent="select(tab.name, $event)"
-          @keyup.enter="select(tab.name, $event)"
-          @keyup.space="select(tab.name, $event)"
+          @keyup.enter.space="select(tab.name, $event)"
         >
           <span>{{ tab.labelDisplay }}</span>
           <span
@@ -409,10 +408,8 @@ export default {
 
       &:focus-visible {
         @include focus-outline;
-
-        span {
-          text-decoration: underline;
-        }
+        outline-offset: -4px;
+        text-decoration: none;
       }
     }
 

package/components/__tests__/Carousel.test.ts

@@ -1,35 +1,41 @@
 import { mount } from '@vue/test-utils';
 import Carousel from '@shell/components/Carousel.vue';
 
+const sliders = [
+  {
+    key:              'key-0',
+    repoName:         'some-repo-name-0',
+    chartNameDisplay: 'chart-name-display-0',
+    chartDescription: 'chart-description-0'
+  },
+  {
+    key:              'key-1',
+    repoName:         'some-repo-name-1',
+    chartNameDisplay: 'chart-name-display-1',
+    chartDescription: 'chart-description-1'
+  },
+  {
+    key:              'key-2',
+    repoName:         'some-repo-name-2',
+    chartNameDisplay: 'chart-name-display-2',
+    chartDescription: 'chart-description-2'
+  },
+  {
+    key:              'key-3',
+    repoName:         'some-repo-name-3',
+    chartNameDisplay: 'chart-name-display-3',
+    chartDescription: 'chart-description-3'
+  },
+  {
+    key:              'key-4',
+    repoName:         'some-repo-name-4',
+    chartNameDisplay: 'chart-name-display-4',
+    chartDescription: 'chart-description-4'
+  }
+];
+
 describe('component: Carousel', () => {
   it('should render component with the correct data applied', async() => {
-    const sliders = [
-      {
-        key:              'key-0',
-        repoName:         'some-repo-name-0',
-        chartNameDisplay: 'chart-name-display-0',
-        chartDescription: 'chart-description-0'
-      },
-      {
-        key:              'key-1',
-        repoName:         'some-repo-name-1',
-        chartNameDisplay: 'chart-name-display-1',
-        chartDescription: 'chart-description-1'
-      },
-      {
-        key:              'key-2',
-        repoName:         'some-repo-name-2',
-        chartNameDisplay: 'chart-name-display-2',
-        chartDescription: 'chart-description-2'
-      },
-      {
-        key:              'key-3',
-        repoName:         'some-repo-name-3',
-        chartNameDisplay: 'chart-name-display-3',
-        chartDescription: 'chart-description-3'
-      }
-    ];
-
     const wrapper = mount(Carousel, {
       props:  { sliders },
       global: { mocks: { $store: { getters: { clusterId: () => 'some-cluster-id' } } } }
@@ -40,4 +46,27 @@ describe('component: Carousel', () => {
       expect(wrapper.find(`#slide${ index } h1`).text()).toContain(slider.chartNameDisplay);
     });
   });
+
+  it.each([
+    [sliders.slice(0, 2)],
+    [sliders.slice(0, 3)],
+    [sliders.slice(0, 4)],
+    [sliders.slice(0, 5)]
+  ])('should have the correct width and left position', async(sliders) => {
+    const wrapper = mount(Carousel, {
+      props:  { sliders },
+      global: { mocks: { $store: { getters: { clusterId: () => 'some-cluster-id' } } } }
+    });
+
+    const width = 60 * (wrapper.vm.slider.length + 2);
+    const initialLeft = -(40 + wrapper.vm.activeItemId * 60);
+
+    expect(wrapper.vm.trackStyle).toContain(`width: ${ width }%`);
+    expect(wrapper.vm.trackStyle).toContain(`left: ${ initialLeft }`);
+
+    wrapper.vm.activeItemId = wrapper.vm.activeItemId + 1; // next slide
+    expect(wrapper.vm.trackStyle).toContain(`left: ${ -(40 + wrapper.vm.activeItemId * 60) }`);
+    wrapper.vm.activeItemId = wrapper.vm.activeItemId - 1; // previous slide
+    expect(wrapper.vm.trackStyle).toContain(`left: ${ initialLeft }`);
+  });
 });

package/components/form/LabeledSelect.vue

@@ -291,7 +291,8 @@ export default {
     ]"
     :tabindex="isView || disabled ? -1 : 0"
     @click="focusSearch"
-    @keyup.enter.space.down="focusSearch"
+    @keydown.enter.down="focusSearch"
+    @keydown.space.prevent="focusSearch"
   >
     <div
       :class="{ 'labeled-container': true, raised, empty, [mode]: true }"

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