fix(rbac): add data-testid, names and aria-label to RBAC UI components (

#1224)
janus-idp · Feb 19, 2024 · cabc76d · cabc76d
1 parent 658ad25
commit cabc76d
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 19 deletions.
diff --git a/plugins/rbac/src/components/CreateRole/AddMembersForm.tsx b/plugins/rbac/src/components/CreateRole/AddMembersForm.tsx
@@ -101,6 +101,7 @@ export const AddMembersForm = ({
         renderInput={params => (
           <TextField
             {...params}
+            name="add-users-and-groups"
             variant="outlined"
             label="Users and groups"
             placeholder="Search by user name or group name"

diff --git a/plugins/rbac/src/components/CreateRole/MembersDropdownOption.tsx b/plugins/rbac/src/components/CreateRole/MembersDropdownOption.tsx
@@ -40,6 +40,7 @@ export const MembersDropdownOption = ({
           style={{
             fontWeight: part.highlight ? 400 : 700,
           }}
+          data-testid={option.label}
         >
           {part.text}
         </span>

diff --git a/plugins/rbac/src/components/CreateRole/PermissionPoliciesForm.tsx b/plugins/rbac/src/components/CreateRole/PermissionPoliciesForm.tsx
@@ -159,7 +159,12 @@ export const PermissionPoliciesForm = ({
               }}
             />
           ))}
-          <Button className={classes.addButton} size="small" onClick={onRowAdd}>
+          <Button
+            className={classes.addButton}
+            size="small"
+            onClick={onRowAdd}
+            name="add-permission-policy"
+          >
             <AddIcon />
             Add
           </Button>

diff --git a/plugins/rbac/src/components/CreateRole/PermissionPoliciesFormRow.tsx b/plugins/rbac/src/components/CreateRole/PermissionPoliciesFormRow.tsx
@@ -124,7 +124,7 @@ export const PermissionPoliciesFormRow = ({
         onClick={() => onRemove()}
         disabled={rowCount === 1}
       >
-        <RemoveIcon />
+        <RemoveIcon id={`${rowName}-remove`} />
       </IconButton>
     </div>
   );

diff --git a/plugins/rbac/src/components/CreateRole/PoliciesCheckboxGroup.tsx b/plugins/rbac/src/components/CreateRole/PoliciesCheckboxGroup.tsx
@@ -63,7 +63,7 @@ export const PoliciesCheckboxGroup = ({
                 control={
                   <Checkbox
                     checked={p.effect === 'allow'}
-                    name={`${rowName}.policies[${index}].policy`}
+                    name={`${rowName}.policies[${index}].policy-${p.policy}`}
                     onChange={e => onChangePolicy(e.target.checked, index)}
                   />
                 }

diff --git a/plugins/rbac/src/components/RolesList/DeleteRoleDialog.tsx b/plugins/rbac/src/components/RolesList/DeleteRoleDialog.tsx
@@ -158,9 +158,9 @@ const DeleteRoleDialog = ({
         specified in this role.
         <br />
         <TextField
+          data-testid="delete-role"
           style={{ marginTop: '24px' }}
           required
-          data-testid="delete-name"
           variant="outlined"
           label="Role name"
           defaultValue={deleteRoleValue}

diff --git a/plugins/rbac/src/components/RolesList/RolesList.test.tsx b/plugins/rbac/src/components/RolesList/RolesList.test.tsx
@@ -113,8 +113,8 @@ describe('RolesList', () => {
       createRoleAllowed: false,
       createRoleLoading: false,
     });
-    const { getAllByTestId, getByText } = await renderInTestApp(<RolesList />);
-    expect(getAllByTestId('delete-role')).not.toBeNull();
+    const { getByTestId, getByText } = await renderInTestApp(<RolesList />);
+    expect(getByTestId('delete-role-role:default/guests')).not.toBeNull();
     expect(getByText('Actions')).not.toBeNull();
   });
 
@@ -134,7 +134,7 @@ describe('RolesList', () => {
           },
         },
         {
-          ...useRolesMockData[0],
+          ...useRolesMockData[1],
           actionsPermissionResults: {
             delete: { allowed: false, loading: true },
             edit: { allowed: true, loading: false },
@@ -149,9 +149,11 @@ describe('RolesList', () => {
       createRoleAllowed: false,
       createRoleLoading: false,
     });
-    const { getAllByTestId } = await renderInTestApp(<RolesList />);
-    expect(getAllByTestId('disable-delete-role')).not.toBeNull();
-    expect(getAllByTestId('update-role')).not.toBeNull();
+    const { getByTestId } = await renderInTestApp(<RolesList />);
+    expect(
+      getByTestId('disable-delete-role-role:default/guests'),
+    ).not.toBeNull();
+    expect(getByTestId('update-role-role:default/guests')).not.toBeNull();
   });
 
   it('should show disabled edit icon if user is not authorized to update roles', async () => {
@@ -170,7 +172,7 @@ describe('RolesList', () => {
           },
         },
         {
-          ...useRolesMockData[0],
+          ...useRolesMockData[1],
           actionsPermissionResults: {
             delete: { allowed: true, loading: true },
             edit: { allowed: false, loading: false },
@@ -185,9 +187,11 @@ describe('RolesList', () => {
       createRoleAllowed: true,
       createRoleLoading: false,
     });
-    const { getAllByTestId } = await renderInTestApp(<RolesList />);
-    expect(getAllByTestId('disable-update-role')).not.toBeNull();
-    expect(getAllByTestId('delete-role')).not.toBeNull();
+    const { getByTestId } = await renderInTestApp(<RolesList />);
+    expect(
+      getByTestId('disable-update-role-role:default/guests'),
+    ).not.toBeNull();
+    expect(getByTestId('delete-role-role:default/rbac_admin')).not.toBeNull();
   });
 
   it('should disable create button if user is not authorized to create roles', async () => {

diff --git a/plugins/rbac/src/components/RolesList/RolesListColumns.tsx b/plugins/rbac/src/components/RolesList/RolesListColumns.tsx
@@ -52,8 +52,8 @@ export const columns: TableColumn<RolesData>[] = [
         <EditRole
           dataTestId={
             !props.actionsPermissionResults.edit.allowed
-              ? 'disable-update-role'
-              : 'update-role'
+              ? `disable-update-role-${props.name}`
+              : `update-role-${props.name}`
           }
           roleName={props.name}
           disable={!props.actionsPermissionResults.edit.allowed}
@@ -66,8 +66,8 @@ export const columns: TableColumn<RolesData>[] = [
         <DeleteRole
           dataTestId={
             !props.actionsPermissionResults.delete.allowed
-              ? 'disable-delete-role'
-              : 'delete-role'
+              ? `disable-delete-role-${props.name}`
+              : `delete-role-${props.name}`
           }
           roleName={props.name}
           disable={!props.actionsPermissionResults.delete.allowed}

diff --git a/plugins/rbac/src/components/SnackbarAlert.tsx b/plugins/rbac/src/components/SnackbarAlert.tsx
@@ -13,7 +13,7 @@ export const SnackbarAlert = ({
   return (
     <Snackbar
       open={toastMessage !== ''}
-      autoHideDuration={6000}
+      autoHideDuration={10000}
       anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
       style={{ top: '100px', left: '0px', justifyContent: 'center' }}
       onClose={onAlertClose}