@rancher/shell 3.0.2-rc.5 → 3.0.2

package/components/form/Members/MembershipEditor.vue

@@ -1,222 +1,230 @@
-<script>
-import { MANAGEMENT, NORMAN } from '@shell/config/types';
-import ArrayList from '@shell/components/form/ArrayList';
-import Loading from '@shell/components/Loading';
-import { _CREATE, _VIEW } from '@shell/config/query-params';
-import { get, set } from '@shell/utils/object';
-
-function normalizeId(id) {
-  return id?.replace(':', '/') || id;
-}
-
-export function canViewMembershipEditor(store, needsProject = false) {
-  return (!!store.getters['management/schemaFor'](MANAGEMENT.PROJECT_ROLE_TEMPLATE_BINDING) || !needsProject) &&
-    !!store.getters['management/schemaFor'](MANAGEMENT.ROLE_TEMPLATE) &&
-    !!store.getters['rancher/schemaFor'](NORMAN.PRINCIPAL);
-}
-
-export default {
-  emits: ['membership-update'],
-
-  components: { ArrayList, Loading },
-
-  props: {
-    addMemberDialogName: {
-      type:     String,
-      required: true
-    },
-
-    parentKey: {
-      type:     String,
-      required: true
-    },
-
-    parentId: {
-      type:    String,
-      default: null
-    },
-
-    mode: {
-      type:     String,
-      required: true
-    },
-
-    type: {
-      type:     String,
-      required: true
-    },
-
-    defaultBindingHandler: {
-      type:    Function,
-      default: null,
-    },
-
-    modalSticky: {
-      type:    Boolean,
-      default: false,
-    }
-  },
-
-  async fetch() {
-    const roleBindingRequestParams = { type: this.type, opt: { force: true } };
-
-    if (this.type === NORMAN.PROJECT_ROLE_TEMPLATE_BINDING && this.parentId) {
-      Object.assign(roleBindingRequestParams, { opt: { filter: { projectId: this.parentId.split('/').join(':') } } });
-    }
-    const userHydration = [
-      this.schema ? this.$store.dispatch(`rancher/findAll`, roleBindingRequestParams) : [],
-      this.$store.dispatch('rancher/findAll', { type: NORMAN.PRINCIPAL }),
-      this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE }),
-      this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.USER })
-    ];
-    const [allBindings] = await Promise.all(userHydration);
-
-    const bindings = allBindings
-      .filter((b) => normalizeId(get(b, this.parentKey)) === normalizeId(this.parentId));
-
-    this['lastSavedBindings'] = [...bindings];
-
-    // Add the current user as the project owner. This will get created by default
-    if (this.mode === _CREATE && bindings.length === 0 && this.defaultBindingHandler) {
-      const defaultBinding = await this.defaultBindingHandler();
-
-      defaultBinding.isDefaultBinding = true;
-      bindings.push(defaultBinding);
-    }
-
-    this['bindings'] = bindings;
-  },
-
-  data() {
-    return {
-      schema:            this.$store.getters[`rancher/schemaFor`](this.type),
-      bindings:          [],
-      lastSavedBindings: [],
-    };
-  },
-
-  computed: {
-    newBindings() {
-      return this.bindings
-        .filter((binding) => !binding.id && !this.lastSavedBindings.includes(binding) && !binding.isDefaultBinding);
-    },
-    removedBindings() {
-      return this.lastSavedBindings
-        .filter((binding) => !this.bindings.includes(binding));
-    },
-    membershipUpdate() {
-      const newBindings = this.newBindings;
-      const removedBindings = this.removedBindings;
-
-      return {
-        newBindings:     this.newBindings,
-        removedBindings: this.removedBindings,
-        save:            (parentId) => {
-          const savedPromises = newBindings.map((binding) => {
-            set(binding, this.parentKey, parentId);
-
-            return binding.save();
-          });
-
-          const removedPromises = removedBindings.map((binding) => binding.remove());
-
-          return Promise.all([...savedPromises, ...removedPromises]);
-        }
-      };
-    },
-
-    isCreate() {
-      return this.mode === _CREATE;
-    },
-
-    isView() {
-      return this.mode === _VIEW;
-    },
-  },
-  watch: {
-    membershipUpdate: {
-      deep: true,
-      handler() {
-        this.$emit('membership-update', this.membershipUpdate);
-      }
-    }
-  },
-
-  methods: {
-    addMember() {
-      this.$store.dispatch('cluster/promptModal', {
-        component:      this.addMemberDialogName,
-        componentProps: { onAdd: this.onAddMember },
-        modalSticky:    this.modalSticky
-      });
-    },
-
-    onAddMember(bindings) {
-      this['bindings'] = [...this.bindings, ...bindings];
-    },
-  }
-};
-</script>
-<template>
-  <Loading v-if="$fetchState.pending" />
-  <ArrayList
-    v-else
-    v-model:value="bindings"
-    :mode="mode"
-    :show-header="true"
-  >
-    <template #column-headers>
-      <div class="box mb-0">
-        <div class="column-headers row">
-          <div class="col span-6">
-            <label class="text-label">{{ t('membershipEditor.user') }}</label>
-          </div>
-          <div class="col span-6">
-            <label class="text-label">{{ t('membershipEditor.role') }}</label>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template #columns="{row}">
-      <div class="columns row">
-        <div class="col span-6">
-          <Principal
-            :value="row.value.principalId"
-          />
-        </div>
-        <div class="col span-6 role">
-          {{ row.value.roleDisplay }}
-        </div>
-      </div>
-    </template>
-    <template #add>
-      <button
-        type="button"
-        class="btn role-primary mt-10"
-        @click="addMember"
-      >
-        {{ t('generic.add') }}
-      </button>
-    </template>
-    <template #remove-button="{remove, i}">
-      <span v-if="(isCreate && i === 0) || isView" />
-      <button
-        v-else
-        type="button"
-        :disabled="isView"
-        class="btn role-link"
-        @click="remove"
-      >
-        {{ t('generic.remove') }}
-      </button>
-    </template>
-  </ArrayList>
-</template>
-
-<style lang="scss" scoped>
-.role {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-}
-</style>
+<script>
+import { MANAGEMENT, NORMAN } from '@shell/config/types';
+import ArrayList from '@shell/components/form/ArrayList';
+import Principal from '@shell/components/auth/Principal';
+import Loading from '@shell/components/Loading';
+import { _CREATE, _VIEW } from '@shell/config/query-params';
+import { get, set } from '@shell/utils/object';
+
+function normalizeId(id) {
+  return id?.replace(':', '/') || id;
+}
+
+export function canViewMembershipEditor(store, needsProject = false) {
+  return (!!store.getters['management/schemaFor'](MANAGEMENT.PROJECT_ROLE_TEMPLATE_BINDING) || !needsProject) &&
+    !!store.getters['management/schemaFor'](MANAGEMENT.ROLE_TEMPLATE) &&
+    !!store.getters['rancher/schemaFor'](NORMAN.PRINCIPAL);
+}
+
+export default {
+  emits: ['membership-update'],
+
+  components: {
+    ArrayList, Loading, Principal
+  },
+
+  props: {
+    addMemberDialogName: {
+      type:     String,
+      required: true
+    },
+
+    parentKey: {
+      type:     String,
+      required: true
+    },
+
+    parentId: {
+      type:    String,
+      default: null
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+
+    type: {
+      type:     String,
+      required: true
+    },
+
+    defaultBindingHandler: {
+      type:    Function,
+      default: null,
+    },
+
+    modalSticky: {
+      type:    Boolean,
+      default: false,
+    }
+  },
+
+  async fetch() {
+    const roleBindingRequestParams = { type: this.type, opt: { force: true } };
+
+    if (this.type === NORMAN.PROJECT_ROLE_TEMPLATE_BINDING && this.parentId) {
+      Object.assign(roleBindingRequestParams, { opt: { filter: { projectId: this.parentId.split('/').join(':') }, force: true } });
+    }
+    const userHydration = [
+      this.schema ? this.$store.dispatch(`rancher/findAll`, roleBindingRequestParams) : [],
+      this.$store.dispatch('rancher/findAll', { type: NORMAN.PRINCIPAL }),
+      this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE }),
+      this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.USER })
+    ];
+    const [allBindings] = await Promise.all(userHydration);
+
+    const bindings = allBindings
+      .filter((b) => normalizeId(get(b, this.parentKey)) === normalizeId(this.parentId));
+
+    this['lastSavedBindings'] = [...bindings];
+
+    // Add the current user as the project owner. This will get created by default
+    if (this.mode === _CREATE && bindings.length === 0 && this.defaultBindingHandler) {
+      const defaultBinding = await this.defaultBindingHandler();
+
+      defaultBinding.isDefaultBinding = true;
+      bindings.push(defaultBinding);
+    }
+
+    this['bindings'] = bindings;
+  },
+
+  data() {
+    return {
+      schema:            this.$store.getters[`rancher/schemaFor`](this.type),
+      bindings:          [],
+      lastSavedBindings: [],
+    };
+  },
+
+  computed: {
+    newBindings() {
+      return this.bindings
+        .filter((binding) => !binding.id && !this.lastSavedBindings.includes(binding) && !binding.isDefaultBinding);
+    },
+    removedBindings() {
+      return this.lastSavedBindings
+        .filter((binding) => !this.bindings.includes(binding));
+    },
+    membershipUpdate() {
+      const newBindings = this.newBindings;
+      const removedBindings = this.removedBindings;
+
+      return {
+        newBindings:     this.newBindings,
+        removedBindings: this.removedBindings,
+        save:            (parentId) => {
+          const savedPromises = newBindings.map((binding) => {
+            set(binding, this.parentKey, parentId);
+
+            return binding.save();
+          });
+
+          const removedPromises = removedBindings.map((binding) => binding.remove());
+
+          return Promise.all([...savedPromises, ...removedPromises]);
+        }
+      };
+    },
+
+    isCreate() {
+      return this.mode === _CREATE;
+    },
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+  },
+  watch: {
+    membershipUpdate: {
+      deep: true,
+      handler() {
+        this.$emit('membership-update', this.membershipUpdate);
+      }
+    }
+  },
+
+  methods: {
+    addMember() {
+      this.$store.dispatch('cluster/promptModal', {
+        component:      this.addMemberDialogName,
+        componentProps: { onAdd: this.onAddMember },
+        modalSticky:    this.modalSticky
+      });
+    },
+
+    onAddMember(bindings) {
+      this['bindings'] = [...this.bindings, ...bindings];
+    },
+  }
+};
+</script>
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <ArrayList
+    v-else
+    v-model:value="bindings"
+    :mode="mode"
+    :show-header="true"
+  >
+    <template #column-headers>
+      <div class="box mb-0">
+        <div class="column-headers row">
+          <div class="col span-6">
+            <label class="text-label">{{ t('membershipEditor.user') }}</label>
+          </div>
+          <div class="col span-6">
+            <label class="text-label">{{ t('membershipEditor.role') }}</label>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #columns="{row, i}">
+      <div class="columns row">
+        <div class="col span-6">
+          <Principal
+            :value="row.value.principalId"
+          />
+        </div>
+        <div
+          :data-testid="`role-item-${i}`"
+          class="col span-6 role"
+        >
+          {{ row.value.roleDisplay }}
+        </div>
+      </div>
+    </template>
+    <template #add>
+      <button
+        type="button"
+        class="btn role-primary mt-10"
+        data-testid="add-item"
+        @click="addMember"
+      >
+        {{ t('generic.add') }}
+      </button>
+    </template>
+    <template #remove-button="{remove, i}">
+      <span v-if="(isCreate && i === 0) || isView" />
+      <button
+        v-else
+        type="button"
+        :disabled="isView"
+        class="btn role-link"
+        :data-testid="`remove-item-${i}`"
+        @click="remove"
+      >
+        {{ t('generic.remove') }}
+      </button>
+    </template>
+  </ArrayList>
+</template>
+
+<style lang="scss" scoped>
+.role {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+</style>

package/components/form/Members/__tests__/MembershipEditor.test.ts

@@ -0,0 +1,62 @@
+import { mount, type VueWrapper } from '@vue/test-utils';
+import MembershipEditor from '@shell/components/form/Members/MembershipEditor.vue';
+
+describe('component: MembershipEditor', () => {
+  let wrapper: VueWrapper<any, any>;
+
+  beforeEach(() => {
+    wrapper = mount(MembershipEditor, {
+      data() {
+        return {
+          schema:            null,
+          lastSavedBindings: [],
+          bindings:          [
+            {
+              principalId: 'local://user-nkkph',
+              roleDisplay: 'Cluster Owner',
+            },
+            {
+              principalId: 'local://u-jsvzm',
+              roleDisplay: 'Cluster Member 1',
+            },
+            {
+              principalId: 'local://u-rgcfw',
+              roleDisplay: 'Cluster Member 2',
+            },
+            {
+              principalId: 'local://u-gxsrz',
+              roleDisplay: 'Cluster Member 3',
+            }
+          ] as any,
+        };
+      },
+      props: {
+        addMemberDialogName: 'addMemberDialogName',
+        parentKey:           'parentKey',
+        mode:                'edit',
+        type:                'no idea',
+      },
+      global: {
+        mocks: {
+          $store:      { getters: { 'rancher/schemaFor': () => ({ type: 'object' }) } },
+          $fetchState: { pending: false },
+        },
+        stubs: { Principal: true },
+      }
+    });
+  });
+
+  it('should render the component', () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('should remove the correct member', async() => {
+    await wrapper.find('[data-testid="remove-item-1"]').trigger('click');
+
+    const removedMember = wrapper.find('[data-testid="role-item-1"]').text();
+    const lastMember = wrapper.find('[data-testid="role-item-4"]');
+
+    expect(removedMember).toStrictEqual('Cluster Member 2');
+    expect(lastMember.exists()).toBe(false);
+  });
+});

package/components/form/Password.vue

@@ -164,6 +164,9 @@ export default {
 
     .labeled-input {
       .addon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         padding-left: 12px;
         min-width: 65px;
 

package/components/form/ProjectMemberEditor.vue

@@ -194,7 +194,7 @@ export default {
       return this.customPermissions.reduce((acc, customPermissionsItem) => {
         const lockedExist = this.roleTemplates.find((roleTemplateItem) => roleTemplateItem.id === customPermissionsItem.key);
 
-        if (lockedExist.locked) {
+        if (lockedExist && lockedExist.locked) {
           customPermissionsItem['locked'] = true;
           customPermissionsItem['tooltip'] = this.t('members.clusterPermissions.custom.lockedRole');
         }
@@ -261,6 +261,7 @@ export default {
     <div class="row mt-10">
       <div class="col span-12">
         <SelectPrincipal
+          data-testid="cluster-member-select"
           project
           class="mb-20"
           :mode="mode"
@@ -285,6 +286,7 @@ export default {
       <template v-slot:body>
         <RadioGroup
           v-model:value="value.permissionGroup"
+          data-testid="permission-options"
           :options="options"
           name="permission-group"
         />
@@ -294,11 +296,12 @@ export default {
           :class="{'two-column': useTwoColumnsForCustom}"
         >
           <div
-            v-for="(permission, i) in customPermissionsUpdate"
-            :key="i"
+            v-for="(permission, i) in customPermissionsUpdate"
+            :key="i"
           >
             <Checkbox
               v-model:value="permission.value"
+              :data-testid="`custom-permission-${i}`"
               :disabled="permission.locked"
               class="mb-5"
               :label="permission.label"

package/components/form/ResourceTabs/index.vue

@@ -75,23 +75,25 @@ export default {
     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
 
+    const paginationHeaders = eventSchema ? [
+      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,
+    ] : [];
+
     return {
       eventSchema,
       EVENT,
-      selectedTab:       this.defaultTab,
+      selectedTab:    this.defaultTab,
       inStore,
-      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,
-      ]
+      showConditions: false,
+      paginationHeaders
     };
   },
 

package/components/form/SSHKnownHosts/KnownHostsEditDialog.vue

@@ -80,6 +80,7 @@ export default {
   <app-modal
     v-if="showModal"
     ref="sshKnownHostsDialog"
+    data-testid="sshKnownHostsDialog"
     height="auto"
     :scrollable="true"
     @close="closeDialog(false)"
@@ -93,7 +94,6 @@ export default {
       <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"
@@ -145,14 +145,15 @@ export default {
       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-container {
+          border: 1px solid var(--border);
+        }
 
         .CodeMirror,
         .CodeMirror-gutters {