feat(mr settings): permissions table

frontend/src/__mocks__/mockRoleBindingK8sResource.ts

@@ -1,13 +1,13 @@
 import { genUID } from '~/__mocks__/mockUtils';
-import { KnownLabels, RoleBindingKind } from '~/k8sTypes';
-import { RoleBindingSubject } from '~/types';
+import { KnownLabels, RoleBindingKind, RoleBindingSubject } from '~/k8sTypes';
 
 type MockResourceConfigType = {
   name?: string;
   namespace?: string;
   subjects?: RoleBindingSubject[];
   roleRefName?: string;
   uid?: string;
+  modelRegistryName?: string;
 };
 
 export const mockRoleBindingK8sResource = ({
@@ -22,22 +22,38 @@ export const mockRoleBindingK8sResource = ({
   ],
   roleRefName = 'view',
   uid = genUID('rolebinding'),
-}: MockResourceConfigType): RoleBindingKind => ({
-  kind: 'RoleBinding',
-  apiVersion: 'rbac.authorization.k8s.io/v1',
-  metadata: {
-    name,
-    namespace,
-    uid,
-    creationTimestamp: '2023-02-14T21:43:59Z',
-    labels: {
+  modelRegistryName = '',
+}: MockResourceConfigType): RoleBindingKind => {
+  let labels;
+  if (modelRegistryName) {
+    labels = {
+      'app.kubernetes.io/name': modelRegistryName,
+      app: modelRegistryName,
+      'app.kubernetes.io/component': 'model-registry',
+      'app.kubernetes.io/part-of': 'model-registry',
       [KnownLabels.DASHBOARD_RESOURCE]: 'true',
+      component: 'model-registry',
+    };
+  } else {
+    labels = {
+      [KnownLabels.DASHBOARD_RESOURCE]: 'true',
+    };
+  }
+  return {
+    kind: 'RoleBinding',
+    apiVersion: 'rbac.authorization.k8s.io/v1',
+    metadata: {
+      name,
+      namespace,
+      uid,
+      creationTimestamp: '2023-02-14T21:43:59Z',
+      labels,
+    },
+    subjects,
+    roleRef: {
+      apiGroup: 'rbac.authorization.k8s.io',
+      kind: modelRegistryName ? 'Role' : 'ClusterRole',
+      name: roleRefName,
     },
-  },
-  subjects,
-  roleRef: {
-    apiGroup: 'rbac.authorization.k8s.io',
-    kind: 'ClusterRole',
-    name: roleRefName,
-  },
-});
+  };
+};

frontend/src/__tests__/cypress/cypress/pages/components/table.ts

@@ -19,4 +19,8 @@ export class TableRow extends Contextual<HTMLTableRowElement> {
   findKebabAction(name: string): Cypress.Chainable<JQuery<HTMLElement>> {
     return this.find().findKebabAction(name);
   }
+
+  findKebab(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findKebab();
+  }
 }

frontend/src/__tests__/cypress/cypress/pages/modelRegistryPermissions.ts

@@ -0,0 +1,72 @@
+import { Contextual } from './components/Contextual';
+import { TableRow } from './components/table';
+
+class PermissionsTableRow extends TableRow {}
+
+class UsersTab {
+  visit(mrName: string, wait = true) {
+    cy.visitWithLogin(`/modelRegistrySettings/permissions/${mrName}`);
+    if (wait) {
+      this.wait();
+    }
+  }
+
+  private wait() {
+    cy.findByTestId('app-page-title');
+    cy.testA11y();
+  }
+
+  findAddUserButton() {
+    return cy.findByTestId('add-button User');
+  }
+
+  findAddGroupButton() {
+    return cy.findByTestId('add-button Group');
+  }
+
+  getUserTable() {
+    return new PermissionTable(() => cy.findByTestId('role-binding-table User'));
+  }
+
+  getGroupTable() {
+    return new PermissionTable(() => cy.findByTestId('role-binding-table Group'));
+  }
+}
+
+class PermissionTable extends Contextual<HTMLElement> {
+  findRows() {
+    return this.find().find(`[data-label=Username]`);
+  }
+
+  findAddInput() {
+    return this.find().findByTestId('role-binding-name-input');
+  }
+
+  findEditInput(id: string) {
+    return this.find().findByTestId(['role-binding-name-input', id]);
+  }
+
+  findGroupSelect() {
+    return this.find().get(`[aria-label="Name selection"]`);
+  }
+
+  getTableRow(name: string) {
+    return new PermissionsTableRow(() =>
+      this.find().find(`[data-label=Username]`).contains(name).parents('tr'),
+    );
+  }
+
+  findTableHeaderButton(name: string) {
+    return this.find().find('thead').findByRole('button', { name });
+  }
+
+  findSaveNewButton() {
+    return this.find().findByTestId(['save-new-button']);
+  }
+
+  findEditSaveButton(id: string) {
+    return this.find().findByTestId(['save-button', id]);
+  }
+}
+
+export const usersTab = new UsersTab();

frontend/src/__tests__/cypress/cypress/pages/permissions.ts

@@ -23,11 +23,11 @@ class PermissionsTab {
   }
 
   getUserTable() {
-    return new PermissionTable(() => cy.findByTestId('project-sharing-table User'));
+    return new PermissionTable(() => cy.findByTestId('role-binding-table User'));
   }
 
   getGroupTable() {
-    return new PermissionTable(() => cy.findByTestId('project-sharing-table Group'));
+    return new PermissionTable(() => cy.findByTestId('role-binding-table Group'));
   }
 }
 
@@ -37,11 +37,11 @@ class PermissionTable extends Contextual<HTMLElement> {
   }
 
   findAddInput() {
-    return this.find().findByTestId('project-sharing-name-input');
+    return this.find().findByTestId('role-binding-name-input');
   }
 
   findEditInput(id: string) {
-    return this.find().findByTestId(['project-sharing-name-input', id]);
+    return this.find().findByTestId(['role-binding-name-input', id]);
   }
 
   getTableRow(name: string) {
@@ -56,7 +56,7 @@ class PermissionTable extends Contextual<HTMLElement> {
 
   selectPermission(id: string, name: string) {
     return this.find()
-      .findByTestId(['project-sharing-name-input', id])
+      .findByTestId(['role-binding-name-input', id])
       .parents('tr')
       .findByRole('button', { name: 'Options menu' })
       .findSelectOption(name)