CONSOLE-5061: Add Resource Names column to Role Rules table

frontend/packages/integration-tests-cypress/tests/crud/roles-rolebindings.cy.ts

@@ -118,6 +118,33 @@ describe('Roles and RoleBindings', () => {
     cy.deleteProjectWithCLI(testName);
   });
 
+  it('displays Resource names column in Role rules table', () => {
+    nav.sidenav.clickNavLink(['User Management', 'Roles']);
+    listPage.dvRows.shouldBeLoaded();
+    projectDropdown.selectProject(testName);
+    listPage.dvFilter.byName(roleName);
+    listPage.dvRows.clickRowByName(roleName);
+    detailsPage.isLoaded();
+
+    cy.contains('th', 'Resource names').should('exist');
+
+    cy.contains('th', 'Verbs').should('exist');
+    cy.contains('th', 'Actions').should('not.exist');
+  });
+
+  it('displays Resource names column in ClusterRole rules table', () => {
+    nav.sidenav.clickNavLink(['User Management', 'Roles']);
+    listPage.dvRows.shouldBeLoaded();
+    listPage.dvFilter.by('cluster');
+    listPage.dvFilter.byName(clusterRoleName);
+    listPage.dvRows.clickRowByName(clusterRoleName);
+    detailsPage.isLoaded();
+
+    cy.contains('th', 'Resource names').should('exist');
+    cy.contains('th', 'Verbs').should('exist');
+    cy.contains('th', 'Actions').should('not.exist');
+  });
+
   const allProjectsDropdownLabel = 'All Projects';
   ['Roles', 'RoleBindings'].forEach((rolesOrBindings) => {
     const roleOrBindingName = rolesOrBindings === 'Roles' ? roleName : roleBindingName;

frontend/public/components/RBAC/role.jsx

@@ -97,7 +97,7 @@ class Details extends Component {
     let rules = ruleObj.rules;
     if (ruleFilter) {
       const fuzzyCaseInsensitive = (a, b) => fuzzy(_.toLower(a), _.toLower(b));
-      const searchKeys = ['nonResourceURLs', 'resources', 'verbs'];
+      const searchKeys = ['nonResourceURLs', 'resources', 'verbs', 'resourceNames'];
       rules = rules.filter((rule) =>
         searchKeys.some((k) => _.some(rule[k], (v) => fuzzyCaseInsensitive(ruleFilter, v))),
       );

frontend/public/components/RBAC/rules.jsx

@@ -21,9 +21,10 @@ export const RulesList = ({ rules, name, namespace }) => {
     <Table gridBreakPoint="">
       <Thead>
         <Tr>
-          <Th>{t('public~Actions')}</Th>
+          <Th>{t('public~Verbs')}</Th>
           <Th visibility={['hidden', 'visibleOnSm']}>{t('public~API groups')}</Th>
           <Th>{t('public~Resources')}</Th>
+          <Th>{t('public~Resource names')}</Th>
         </Tr>
       </Thead>
       <Tbody>
@@ -127,6 +128,20 @@ const Resources = connect(({ k8s }) => ({ allModels: k8s.getIn(['RESOURCES', 'mo
   },
 );
 
+const ResourceNames = ({ resourceNames }) => {
+  if (!resourceNames || resourceNames.length === 0) {
+    return null;
+  }
+
+  const names = resourceNames.toSorted().map((name) => (
+    <div className="rbac-rule-row" key={name}>
+      {name}
+    </div>
+  ));
+
+  return <div>{names}</div>;
+};
+
 // This page is temporarily disabled until we update the safe resources list.
 // const EditRule = (name, namespace, i) => ({
 //   label: 'Edit Rule',
@@ -164,7 +179,16 @@ const RuleKebab = ({ name, namespace, i }) => {
   return <Kebab options={options} />;
 };
 
-const Rule = ({ resources, nonResourceURLs, verbs, apiGroups, name, namespace, i }) => (
+const Rule = ({
+  resources,
+  nonResourceURLs,
+  verbs,
+  apiGroups,
+  resourceNames,
+  name,
+  namespace,
+  i,
+}) => (
   <>
     <Td>
       <Actions verbs={verbs} />
@@ -175,6 +199,9 @@ const Rule = ({ resources, nonResourceURLs, verbs, apiGroups, name, namespace, i
     <Td>
       <Resources resources={resources} nonResourceURLs={nonResourceURLs} />
     </Td>
+    <Td>
+      <ResourceNames resourceNames={resourceNames} />
+    </Td>
     <Td className="pf-v6-c-table__action">
       <RuleKebab name={name} namespace={namespace} i={i} />
     </Td>

frontend/public/locales/en/public.json

@@ -1245,6 +1245,7 @@
   "Create Role": "Create Role",
   "API groups": "API groups",
   "Resources": "Resources",
+  "Resource names": "Resource names",
   "Delete rule": "Delete rule",
   "Are you sure you want to delete rule #{{ruleNumber}}?": "Are you sure you want to delete rule #{{ruleNumber}}?",
   "ReplicaSet details": "ReplicaSet details",