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

Author: jesusbalderramawgu

src/authz-module/components/utils.test.tsx

@@ -4,11 +4,6 @@ import { initializeMockApp } from '@edx/frontend-platform/testing';
 import { renderWrapper } from '@src/setupTest';
 import { getCellHeader } from './utils';
 
-const renderCellHeader = (columnId: string, columnTitle: string, filtersApplied: string[]) => {
-  const component = getCellHeader(columnId, columnTitle, filtersApplied);
-  return renderWrapper(<div>{component}</div>);
-};
-
 describe('getCellHeader', () => {
   beforeEach(() => {
     initializeMockApp({
@@ -21,64 +16,74 @@ describe('getCellHeader', () => {
   });
 
   it('displays column title without filter icon when no filters are applied', () => {
-    const { container } = renderCellHeader('scope', 'Scope', []);
-
-    expect(screen.getByText('Scope')).toBeInTheDocument();
-    expect(container.querySelector('svg')).not.toBeInTheDocument();
+    const result = getCellHeader('scope', 'Scope', []);
+    expect(result).toBe('Scope');
   });
 
   it('displays column title without filter icon when column is not in filters applied', () => {
-    const { container } = renderCellHeader('scope', 'Scope', ['role', 'organization']);
+    const result = getCellHeader('scope', 'Scope', ['role', 'organization']);
+    expect(result).toBe('Scope');
+  });
 
-    expect(screen.getByText('Scope')).toBeInTheDocument();
-    expect(container.querySelector('svg')).not.toBeInTheDocument();
+  it('returns a component function when column has filter applied', () => {
+    const result = getCellHeader('scope', 'Scope', ['scope', 'role']);
+    expect(typeof result).toBe('function');
   });
 
-  it('displays column title with filter icon when column has filter applied', () => {
-    const { container } = renderCellHeader('scope', 'Scope', ['scope', 'role']);
+  it('renders filter icon and title when component is rendered', () => {
+    const Header = getCellHeader('scope', 'Scope', ['scope', 'role']) as React.FC;
+    renderWrapper(<Header />);
 
     expect(screen.getByText('Scope')).toBeInTheDocument();
-    expect(container.querySelector('svg')).toBeInTheDocument();
+    expect(screen.getByText('Scope').closest('span')).toHaveClass('d-flex', 'flex-row', 'align-items-center');
   });
 
   it('displays filter icon only for matching column when multiple filters applied', () => {
-    const { container } = renderCellHeader('organization', 'Organization', ['scope', 'organization', 'role']);
+    const Header = getCellHeader('organization', 'Organization', ['scope', 'organization', 'role']) as React.FC;
+    renderWrapper(<Header />);
 
     expect(screen.getByText('Organization')).toBeInTheDocument();
-    expect(container.querySelector('svg')).toBeInTheDocument();
   });
 
   it('handles empty column title', () => {
-    const { container } = renderCellHeader('scope', '', ['scope']);
+    const Header = getCellHeader('scope', '', ['scope']) as React.FC;
+    const { container } = renderWrapper(<Header />);
 
     expect(container.querySelector('svg')).toBeInTheDocument();
   });
 
   it('handles special characters in column title', () => {
-    const { container } = renderCellHeader('scope', 'Scope & Context', ['scope']);
+    const Header = getCellHeader('scope', 'Scope & Context', ['scope']) as React.FC;
+    renderWrapper(<Header />);
 
     expect(screen.getByText('Scope & Context')).toBeInTheDocument();
-    expect(container.querySelector('svg')).toBeInTheDocument();
   });
 
   it('is case sensitive when matching column ID', () => {
-    const { container } = renderCellHeader('scope', 'Scope', ['SCOPE', 'Role']);
-
-    expect(screen.getByText('Scope')).toBeInTheDocument();
-    expect(container.querySelector('svg')).not.toBeInTheDocument();
+    const result = getCellHeader('scope', 'Scope', ['SCOPE', 'Role']);
+    expect(result).toBe('Scope');
   });
 
   it('handles long column titles with filters', () => {
-    const { container } = renderCellHeader('organization', 'Very Long Organization Column Title', ['organization']);
+    const Header = getCellHeader('organization', 'Very Long Organization Column Title', ['organization']) as React.FC;
+    renderWrapper(<Header />);
 
     expect(screen.getByText('Very Long Organization Column Title')).toBeInTheDocument();
-    expect(container.querySelector('svg')).toBeInTheDocument();
   });
 
-  it('displays correct structure when filter is applied', () => {
-    renderCellHeader('role', 'Role', ['role']);
+  it('produces unique toString per column to avoid duplicate React keys', () => {
+    const scopeHeader = getCellHeader('scope', 'Scope', ['scope', 'role']);
+    const roleHeader = getCellHeader('role', 'Role', ['scope', 'role']);
+
+    // When used in template literals (as Paragon does for keys), each column
+    // must produce a unique string to prevent duplicate key warnings.
+    expect(`${scopeHeader}`).not.toBe(`${roleHeader}`);
+    expect(`${scopeHeader}`).toBe('FilteredHeader_scope');
+    expect(`${roleHeader}`).toBe('FilteredHeader_role');
+  });
 
-    const container = screen.getByText('Role').closest('span');
-    expect(container).toHaveClass('d-flex', 'flex-row', 'align-items-center');
+  it('toString does not produce [object Object]', () => {
+    const result = getCellHeader('scope', 'Scope', ['scope']);
+    expect(`${result}`).not.toBe('[object Object]');
   });
 });

src/authz-module/components/utils.tsx

@@ -1,14 +1,31 @@
 import { Icon } from '@openedx/paragon';
 import { FilterList } from '@openedx/paragon/icons';
 
+/**
+ * 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;
 };

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,
   },
 
 ];