fix: header table change to avoid key error due to paragon, missing flag added

Author: jesusbalderramawgu

src/authz-module/constants.ts

@@ -495,6 +495,7 @@ export const rolesObject = [
     userCount: 1,
     name: 'Course Editor',
     description: 'building and maintaining course content and supporting assets, without operational controls or high impact actions that can affect a live course.',
+    disabled: true,
   },
   {
     role: 'course_auditor',
@@ -513,6 +514,7 @@ export const rolesObject = [
     userCount: 1,
     name: 'Course Auditor',
     description: ' QA, compliance review, content review, and general oversight, no changes in Studio.',
+    disabled: true,
   },
 
 ];

src/authz-module/utils.test.tsx

@@ -6,8 +6,12 @@ import { getCellHeader, getScopeManageAction, getScopeManageActionPermission } f
 import { CONTENT_COURSE_PERMISSIONS, CONTENT_LIBRARY_PERMISSIONS } from './constants';
 
 const renderCellHeader = (columnId: string, columnTitle: string, filtersApplied: string[]) => {
-  const component = getCellHeader(columnId, columnTitle, filtersApplied);
-  return renderWrapper(<div>{component}</div>);
+  const result = getCellHeader(columnId, columnTitle, filtersApplied);
+  if (typeof result === 'function') {
+    const Component = result;
+    return renderWrapper(<Component />);
+  }
+  return renderWrapper(<div>{result}</div>);
 };
 
 describe('utils', () => {

src/authz-module/utils.tsx

@@ -2,14 +2,31 @@ import { Icon } from '@openedx/paragon';
 import { FilterList } from '@openedx/paragon/icons';
 import { CONTENT_COURSE_PERMISSIONS, CONTENT_LIBRARY_PERMISSIONS } from './constants';
 
+/**
+ * Returns a header value for a DataTable column that shows a filter icon
+ * when the column has an active filter.
+ *
+ * When a filter is active, returns a **component function** with a custom
+ * toString() override. This is necessary because Paragon's TableRow builds
+ * cell keys via: `${cell.column.Header}${row.id}`
+ *
+ * - A JSX element stringifies to "[object Object]", causing duplicate keys.
+ * - A function with a custom toString() produces a unique string per column.
+ *
+ * react-table's render('Header') calls the function as a component, so the
+ * JSX is still rendered correctly in the table header.
+ */
 export const getCellHeader = (columnId: string, columnTitle: string, filtersApplied: string[]) => {
   if (filtersApplied.includes(columnId)) {
-    return (
+    const FilteredHeader = () => (
       <span className="d-flex flex-row align-items-center">
         <Icon src={FilterList} size="sm" className="mr-2" />
         {columnTitle}
       </span>
     );
+    FilteredHeader.displayName = `FilteredHeader_${columnId}`;
+    FilteredHeader.toString = () => `FilteredHeader_${columnId}`;
+    return FilteredHeader;
   }
   return columnTitle;
 };