Resolving a reference to an undefined lockedExist and adding for project memberships with custom permissions

cypress/e2e/po/pages/explorer/cluster-project-members.po.ts

@@ -2,6 +2,9 @@ import PagePo from '@/cypress/e2e/po/pages/page.po';
 import BaseResourceList from '@/cypress/e2e/po/lists/base-resource-list.po';
 import SelectPrincipalPo from '@/cypress/e2e/po/components/select-principal.po';
 import AsyncButtonPo from '@/cypress/e2e/po/components/async-button.po';
+import RadioGroupInputPo from '@/cypress/e2e/po/components/radio-group-input.po';
+import CheckboxInputPo from '@/cypress/e2e/po/components/checkbox-input.po';
+import SortableTablePo from '@/cypress/e2e/po/components/sortable-table.po';
 
 export default class ClusterProjectMembersPo extends PagePo {
   private static createPath(clusterId: string, tabId: string) {
@@ -20,6 +23,12 @@ export default class ClusterProjectMembersPo extends PagePo {
     return cy.get('.btn.role-primary.pull-right').click();
   }
 
+  triggerAddProjectMemberAction(projectLabel: string) {
+    const cleanLabel = projectLabel.replace(' ', '').toLowerCase();
+
+    return cy.get(`[data-testid="add-project-member-${ cleanLabel }"]`).click();
+  }
+
   selectClusterOrProjectMember(name: string) {
     const selectClusterOrProjectMember = new SelectPrincipalPo(`[data-testid="cluster-member-select"]`, this.self());
 
@@ -28,6 +37,27 @@ export default class ClusterProjectMembersPo extends PagePo {
     selectClusterOrProjectMember.clickOptionWithLabel(name);
   }
 
+  selectProjectCustomPermission() {
+    const permissionOptions = new RadioGroupInputPo('[data-testid="permission-options"]');
+
+    permissionOptions.checkExists();
+
+    permissionOptions.set(3);
+  }
+
+  checkTheseProjectCustomPermissions(permissionIndices: number[]) {
+    permissionIndices.forEach((permissionIndex) => {
+      const checkbox = new CheckboxInputPo(`[data-testid="custom-permission-${ permissionIndex }"]`);
+
+      checkbox.checkExists();
+      checkbox.set();
+    });
+  }
+
+  submitProjectCreateButton() {
+    return cy.get('[data-testid="card-actions-slot"] button.role-primary').click();
+  }
+
   saveCreateForm(): AsyncButtonPo {
     return new AsyncButtonPo('[data-testid="form-save"]', this.self());
   }
@@ -47,4 +77,8 @@ export default class ClusterProjectMembersPo extends PagePo {
   listElementWithName(name:string) {
     return this.sortableTable().rowElementWithName(name);
   }
+
+  projectTable() {
+    return new SortableTablePo('#project-membership [data-testid="sortable-table-list-container"]');
+  }
 }

cypress/e2e/tests/pages/explorer2/cluster-project-members.spec.ts

@@ -12,7 +12,8 @@ describe('Cluster Project and Members', { tags: ['@explorer2', '@adminUser'] },
   beforeEach(() => {
     cy.login();
   });
-  it('Members added to both Cluster Membership should not show "Loading..." next to their names', () => {
+
+  it('Should create a new user', () => {
     const usersAdmin = new UsersPo('_');
     const userCreate = usersAdmin.createEdit();
 
@@ -25,6 +26,10 @@ describe('Cluster Project and Members', { tags: ['@explorer2', '@adminUser'] },
     userCreate.confirmNewPass().set(standardPassword);
     userCreate.saveCreateWithErrorRetry();
     usersAdmin.waitForPageWithExactUrl();
+  });
+
+  it('Members added to both Cluster Membership should not show "Loading..." next to their names', () => {
+    HomePagePo.goTo();
 
     // add user to Cluster membership
     const clusterMembership = new ClusterProjectMembersPo('local', 'cluster-membership');
@@ -34,6 +39,7 @@ describe('Cluster Project and Members', { tags: ['@explorer2', '@adminUser'] },
     clusterMembership.waitForPageWithSpecificUrl('/c/local/explorer');
     clusterMembership.navToSideMenuEntryByLabel('Cluster and Project Members');
     clusterMembership.triggerAddClusterOrProjectMemberAction();
+
     clusterMembership.selectClusterOrProjectMember(username);
     cy.intercept('POST', '/v3/clusterroletemplatebindings').as('createClusterMembership');
     clusterMembership.saveCreateForm().click();
@@ -67,4 +73,33 @@ describe('Cluster Project and Members', { tags: ['@explorer2', '@adminUser'] },
     clusterMembership.cancelCreateForm().click();
     clusterMembership.waitForPageWithExactUrl();
   });
+  it('Can create a member with custom permissions', () => {
+    // add user to Cluster membership
+    const projectMembership = new ClusterProjectMembersPo('local', 'project-membership');
+
+    projectMembership.goTo();
+    projectMembership.waitForPageWithSpecificUrl('/c/local/explorer/members#project-membership');
+    projectMembership.triggerAddProjectMemberAction('system');
+    projectMembership.selectProjectCustomPermission();
+    projectMembership.selectClusterOrProjectMember(username);
+    projectMembership.checkTheseProjectCustomPermissions([0, 1]);
+
+    cy.intercept('POST', '/v3/projectroletemplatebindings').as('createProjectMembership');
+    projectMembership.submitProjectCreateButton();
+    cy.wait('@createProjectMembership');
+    cy.get('.modal-overlay').should('not.exist');
+
+    cy.get('body tbody').then((el) => {
+      if (el.find('tr.no-rows').is(':visible')) {
+        cy.reload();
+      }
+
+      projectMembership.projectTable().rowElementWithName(username).should('have.length', 1);
+      projectMembership.projectTable().rowElementWithName(username).find('td:nth-of-type(3)').invoke('text')
+        .then((t) => {
+          expect(t).to.include('Create Namespaces');
+          expect(t).to.include('Manage Config Maps');
+        });
+    });
+  });
 });

shell/components/ExplorerMembers.vue

@@ -355,7 +355,8 @@ export default {
                 <button
                   v-if="canEditProjectMembers"
                   type="button"
-                  class="create-namespace btn btn-sm role-secondary mr-10 right"
+                  class="btn btn-sm role-secondary mr-10 right"
+                  :data-testid="`add-project-member-${getProjectLabel(group).replace(' ', '').toLowerCase()}`"
                   @click="addProjectMember(group)"
                 >
                   {{ t('members.createActionLabel') }}

shell/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"