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

package/components/form/ResourceTabs/index.vue

@@ -8,10 +8,14 @@ import Tab from '@shell/components/Tabbed/Tab';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import Conditions from '@shell/components/form/Conditions';
 import { EVENT } from '@shell/config/types';
-import SortableTable from '@shell/components/SortableTable';
+import PaginatedResourceTable from '@shell/components/PaginatedResourceTable.vue';
 import { _VIEW } from '@shell/config/query-params';
 import RelatedResources from '@shell/components/RelatedResources';
 import { isConditionReadyAndWaiting } from '@shell/plugins/dashboard-store/resource-class';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { MESSAGE, REASON } from '@shell/config/table-headers';
+import { STEVE_EVENT_LAST_SEEN, STEVE_EVENT_TYPE, STEVE_NAME_COL } from '@shell/config/pagination-table-headers';
+import { headerFromSchemaColString } from '@shell/store/type-map.utils';
 
 export default {
 
@@ -21,7 +25,7 @@ export default {
     Tabbed,
     Tab,
     Conditions,
-    SortableTable,
+    PaginatedResourceTable,
     RelatedResources,
   },
 
@@ -69,14 +73,25 @@ export default {
 
   data() {
     const inStore = this.$store.getters['currentStore'](EVENT);
+    const eventSchema = this.$store.getters[`${ inStore }/schemaFor`](EVENT); // @TODO be smarter about which resources actually ever have events
 
     return {
-      hasEvents:      this.$store.getters[`${ inStore }/schemaFor`](EVENT), // @TODO be smarter about which resources actually ever have events
-      allEvents:      [],
-      selectedTab:    this.defaultTab,
-      didLoadEvents:  false,
+      eventSchema,
+      EVENT,
+      selectedTab:       this.defaultTab,
       inStore,
-      showConditions: false,
+      showConditions:    false,
+      paginationHeaders: [
+        STEVE_EVENT_LAST_SEEN,
+        STEVE_EVENT_TYPE,
+        REASON,
+        headerFromSchemaColString('Subobject', eventSchema, this.$store.getters, true),
+        headerFromSchemaColString('Source', eventSchema, this.$store.getters, true),
+        MESSAGE,
+        headerFromSchemaColString('First Seen', eventSchema, this.$store.getters, true),
+        headerFromSchemaColString('Count', eventSchema, this.$store.getters, true),
+        STEVE_NAME_COL,
+      ]
     };
   },
 
@@ -92,7 +107,7 @@ export default {
 
   computed: {
     showEvents() {
-      return this.isView && this.needEvents && this.hasEvents;
+      return this.isView && this.needEvents && this.eventSchema;
     },
     showRelated() {
       return this.isView && this.needRelated;
@@ -128,18 +143,6 @@ export default {
         },
       ];
     },
-    events() {
-      return this.allEvents.filter((event) => {
-        return event.involvedObject?.uid === this.value?.metadata?.uid;
-      }).map((event) => {
-        return {
-          reason:    (`${ event.reason || this.t('generic.unknown') }${ event.count > 1 ? ` (${ event.count })` : '' }`).trim(),
-          message:   event.message || this.t('generic.unknown'),
-          date:      event.lastTimestamp || event.firstTimestamp || event.metadata.creationTimestamp,
-          eventType: event.eventType
-        };
-      });
-    },
     conditionsHaveIssues() {
       if (this.showConditions) {
         return this.value.status?.conditions?.filter((cond) => !isConditionReadyAndWaiting(cond)).some((cond) => cond.error);
@@ -153,15 +156,6 @@ export default {
     // Ensures we only fetch events and show the table when the events tab has been activated
     tabChange(neu) {
       this.selectedTab = neu?.selectedName;
-
-      if (!this.didLoadEvents && this.selectedTab === 'events') {
-        const inStore = this.$store.getters['currentStore'](EVENT);
-
-        this.$store.dispatch(`${ inStore }/findAll`, { type: EVENT }).then((events) => {
-          this.allEvents = events;
-          this.didLoadEvents = true;
-        });
-      }
     },
 
     /**
@@ -180,6 +174,54 @@ export default {
         this.showConditions = this.$store.getters[`${ this.inStore }/pathExistsInSchema`](this.value.type, 'status.conditions');
       }
     },
+
+    /**
+     * Filter out hidden repos from list of all repos
+     */
+    filterEventsLocal(rows) {
+      return rows.filter((event) => event.involvedObject?.uid === this.value?.metadata?.uid);
+    },
+
+    /**
+     * Filter out hidden repos via api
+     *
+     * pagination: PaginationArgs
+     * returns: PaginationArgs
+     */
+    filterEventsApi(pagination) {
+      if (!pagination.filters) {
+        pagination.filters = [];
+      }
+
+      const field = `involvedObject.uid`; // Pending API Support - https://github.com/rancher/rancher/issues/48603
+
+      // of type PaginationParamFilter
+      let existing = null;
+
+      for (let i = 0; i < pagination.filters.length; i++) {
+        const filter = pagination.filters[i];
+
+        if (!!filter.fields.find((f) => f.field === field)) {
+          existing = filter;
+          break;
+        }
+      }
+
+      const required = PaginationParamFilter.createSingleField({
+        field,
+        exact:  true,
+        value:  this.value.metadata.uid,
+        equals: true
+      });
+
+      if (!!existing) {
+        Object.assign(existing, required);
+      } else {
+        pagination.filters.push(required);
+      }
+
+      return pagination;
+    }
   }
 };
 </script>
@@ -208,15 +250,16 @@ export default {
       name="events"
       :weight="-2"
     >
-      <SortableTable
+      <!-- namespaced: false given we don't want the default handling of namespaced resource (apply header filter)  -->
+      <PaginatedResourceTable
         v-if="selectedTab === 'events'"
-        :rows="events"
+        :schema="eventSchema"
+        :local-filter="filterEventsLocal"
+        :api-filter="filterEventsApi"
+        :use-query-params-for-simple-filtering="false"
         :headers="eventHeaders"
-        key-field="id"
-        :search="false"
-        :table-actions="false"
-        :row-actions="false"
-        default-sort-by="date"
+        :paginationHeaders="paginationHeaders"
+        :namespaced="false"
       />
     </Tab>
 

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/SecretSelector.vue

@@ -70,7 +70,7 @@ export default {
       secrets:            null,
       SECRET,
       allSecretsSettings: {
-        mapResult: (secrets) => {
+        updateResources: (secrets) => {
           const allSecretsInNamespace = secrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
           const mappedSecrets = this.mapSecrets(allSecretsInNamespace.sort((a, b) => a.name.localeCompare(b.name)));
 
@@ -81,7 +81,7 @@ export default {
       },
       paginateSecretsSetting: {
         requestSettings: this.paginatePageOptions,
-        mapResult:       (secrets) => {
+        updateResources: (secrets) => {
           const mappedSecrets = this.mapSecrets(secrets);
 
           this.secrets = secrets; // We need the key from the selected secret. When paginating we won't touch the store, so just pass back here

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"