fix: update type declaration and validation

Author: dcoa

.github/workflows/ci.yml

@@ -23,6 +23,8 @@ jobs:
       run: npm ci
     - name: Lint
       run: npm run lint
+    - name: Types
+      run: npm run types
     - name: Test
       run: npm run test
     - name: Build

src/authz-module/audit-user/index.tsx

@@ -32,8 +32,8 @@ const AuditUserPage = () => {
 
   useEffect(() => {
     if (!user && !isLoadingUser) {
-      // @ts-ignore
-      if (!isErrorUser || errorUser?.customAttributes?.httpErrorStatus === 404) {
+      const err = errorUser as { customAttributes?: { httpErrorStatus?: number } } | null;
+      if (!isErrorUser || err?.customAttributes?.httpErrorStatus === 404) {
         navigate(AUTHZ_HOME_PATH);
       }
     }

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

@@ -17,7 +17,7 @@ describe('AuthZTitle', () => {
 
   it('renders without optional fields', () => {
     render(<AuthZTitle {...defaultProps} />);
-    expect(screen.getByText(defaultProps.activeLabel)).toBeInTheDocument();
+    expect(screen.getByText(defaultProps.activeLabel as string)).toBeInTheDocument();
     expect(screen.getByText(defaultProps.pageTitle)).toBeInTheDocument();
     expect(screen.getByText(defaultProps.pageSubtitle as string)).toBeInTheDocument();
   });
@@ -35,7 +35,7 @@ describe('AuthZTitle', () => {
       expect(screen.getByText(label)).toHaveAttribute('href', expect.stringContaining(to));
     });
 
-    expect(screen.getByText(defaultProps.activeLabel)).toBeInTheDocument();
+    expect(screen.getByText(defaultProps.activeLabel as string)).toBeInTheDocument();
   });
 
   it('renders page title', () => {

src/authz-module/components/PermissionTable.tsx

@@ -5,7 +5,7 @@ import {
   Card, Icon, OverlayTrigger, Tooltip,
 } from '@openedx/paragon';
 import { PermissionsResourceGrouped, Role } from '@src/types';
-import { actionsDictionary } from './RoleCard/constants';
+import { actionsDictionary, ActionKey } from './RoleCard/constants';
 import ResourceTooltip from './ResourceTooltip';
 import messages from './messages';
 
@@ -66,7 +66,7 @@ const PermissionTable = ({ permissionsTable, roles, title }: PermissionTableProp
               {resourceGroup.permissions.map(permission => (
                 <tr key={permission.key} className="border-top">
                   <td className="text-start d-flex align-items-center small px-4 py-3">
-                    <Icon className="d-inline-block mr-2" size="sm" src={actionsDictionary[permission.actionKey]} />
+                    <Icon className="d-inline-block mr-2" size="sm" src={actionsDictionary[permission.actionKey as ActionKey]} />
                     {permission.label}
                   </td>
                   {roles.map(role => (

src/authz-module/components/ResourceTooltip.tsx

@@ -17,7 +17,7 @@ const ResourceTooltip = ({ resourceGroup }:ResourceTooltipProps) => (
           <p className="small">{resourceGroup.description}</p>
           <ul className="small">
             {resourceGroup.permissions.map(permission => (
-              <li><b>{permission.label.trim()}:</b> {permission.description}</li>
+              <li><b>{permission.label?.trim()}:</b> {permission.description}</li>
             ))}
           </ul>
         </Popover.Content>

src/authz-module/components/RoleCard/index.test.tsx

@@ -26,12 +26,13 @@ describe('RoleCard', () => {
       {
         key: 'library',
         label: 'Library Resource',
+        description: 'Library resource description',
         permissions: [
           {
-            key: 'view', label: 'View', actionKey: 'view', disabled: false,
+            key: 'view', resource: 'library', label: 'View', actionKey: 'view', disabled: false,
           },
           {
-            key: 'manage', label: 'Manage', actionKey: 'manage', disabled: true,
+            key: 'manage', resource: 'library', label: 'Manage', actionKey: 'manage', disabled: true,
           },
         ],
       },

src/authz-module/components/RoleCard/index.tsx

@@ -3,6 +3,7 @@ import {
   Card, Collapsible, Container, Icon, IconButton,
 } from '@openedx/paragon';
 import { Delete, Person } from '@openedx/paragon/icons';
+import { RoleResourceGroup } from '@src/types';
 import PermissionRow from './PermissionsRow';
 import messages from './messages';
 
@@ -15,7 +16,7 @@ interface RoleCardProps extends CardTitleProps {
   objectName?: string | null;
   description: string;
   handleDelete?: () => void;
-  permissionsByResource: any[];
+  permissionsByResource: RoleResourceGroup[];
 }
 
 const CardTitle = ({ title, userCounter = null }: CardTitleProps) => {

src/authz-module/components/TableCells.tsx

@@ -1,13 +1,14 @@
+import { ContextType, useContext, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Icon, IconButton } from '@openedx/paragon';
 import { AppContext } from '@edx/frontend-platform/react';
 import {
   RemoveRedEye,
   Delete, ExpandMore,
 } from '@openedx/paragon/icons';
-import { TableCellValue, AppContextType, UserRole } from '@src/types';
-import { useNavigate } from 'react-router-dom';
-import { useContext, useMemo } from 'react';
+import { UserRole } from '@src/types';
+import type { TableCellValue } from '@src/paragon';
 import { DJANGO_MANAGED_ROLES, MAP_ROLE_KEY_TO_LABEL } from '@src/authz-module/constants';
 import { RESOURCE_ICONS } from './constants';
 import messages from './messages';
@@ -25,7 +26,7 @@ type ExtendedCellProps = CellPropsWithValue & {
 
 const NameCell = ({ row }: CellProps) => {
   const intl = useIntl();
-  const { authenticatedUser } = useContext(AppContext) as AppContextType;
+  const { authenticatedUser } = useContext(AppContext) as ContextType<typeof AppContext>;
   const username = authenticatedUser?.username;
 
   if (row.original.username === username) {
@@ -36,7 +37,7 @@ const NameCell = ({ row }: CellProps) => {
       </span>
     );
   }
-  return row.original.fullName || row.original.username;
+  return <span>{row.original.fullName || row.original.username}</span>;
 };
 
 const ViewActionCell = ({ row }: CellProps) => {

src/authz-module/components/TableControlBar/MultipleChoiceFilter.tsx

@@ -22,7 +22,7 @@ const MultipleChoiceFilter = ({
   const { formatMessage } = useIntl();
 
   const checkedBoxes = filterValue || [];
-  const handleClickCheckbox = (value, displayName) => {
+  const handleClickCheckbox = (value: string, displayName: string) => {
     const newValue = {
       groupName: filterButtonText?.toLocaleLowerCase() || '',
       value,
@@ -71,7 +71,7 @@ const MultipleChoiceFilter = ({
           type="text"
           trailingElement={<Icon src={Search} />}
           placeholder={formatMessage(messages['authz.table.controlbar.search'])}
-          onChange={(e) => {
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             setSearchValue(e.target.value);
             onSearchChange?.(e.target.value);
           }}

src/authz-module/components/TableControlBar/SearchFilter.tsx

@@ -6,7 +6,7 @@ import { Search } from '@openedx/paragon/icons';
 
 interface SearchFilterProps {
   filterValue: string;
-  setFilter: (value: string) => void;
+  setFilter: (value: string | undefined) => void;
   placeholder: string;
 }
 
@@ -19,7 +19,7 @@ const SearchFilter = ({
       trailingElement={<Icon src={Search} />}
       value={filterValue || ''}
       type="text"
-      onChange={e => {
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
         setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
       }}
       placeholder={placeholder}