PXP-11326: Update TS version (#203)

* feat(PXP-11326): update ts 5.4 * fix some typing issues with tables * feat(PXP-11326): resolve some warnings * checkpoint * Update package.json * add axe/react security updates --------- Co-authored-by: craigrbarnes <[email protected]>
uc-cdis · Aug 26, 2024 · c7ba76f · c7ba76f
1 parent f2ecb5f
commit c7ba76f
Show file tree

Hide file tree

Showing 30 changed files with 807 additions and 4,837 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,11 +31,19 @@
     "classnames": "^2.3.1",
     "dom-to-svg": "^0.12.2",
     "isomorphic-fetch": "^3.0.0",
-    "oxlint": "^0.2.3-alpha.0",
+    "oxlint": "^0.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-responsive-carousel": "^3.2.23",
-    "url-join": "^5.0.0"
+    "url-join": "^5.0.0",
+    "@mantine/core": "^6.0.22",
+    "@mantine/form": "^6.0.22",
+    "@mantine/hooks": "^6.0.22",
+    "@mantine/dates": "^6.0.22",
+    "@mantine/modals": "^6.0.22",
+    "@mantine/next": "^6.0.22",
+    "@tabler/icons-react" : "^3.10.0",
+    "@mantine/notifications": "^6.0.22"
   },
   "devDependencies": {
     "@axe-core/react": "^4.10.0",
@@ -47,8 +55,8 @@
     "@types/jest": "^29.5.12",
     "@types/node": "20.4.1",
     "@types/react": "^18.2.21",
-    "@typescript-eslint/eslint-plugin": "^5.31.0",
-    "@typescript-eslint/parser": "^5.31.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "eslint": "^8.20.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
@@ -65,6 +73,6 @@
     "terser-webpack-plugin": "^5.3.3",
     "ts-jest": "^29.1.2",
     "ts-node-dev": "^2.0.0",
-    "typescript": "5.0.2"
+    "typescript": "^5.4.3"
   }
 }
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -38,8 +38,7 @@
   },
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "5.0.2"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@rollup/plugin-json": "^6.0.0",

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -53,12 +53,13 @@
     "@fontsource/source-sans-pro": "^4.5.11",
     "@graphiql/react": "^0.23.1",
     "@iconify/react": "^4.0.1",
-    "@mantine/core": "^6.0.21",
-    "@mantine/form": "^6.0.21",
-    "@mantine/hooks": "^6.0.21",
-    "@mantine/modals": "^6.0.21",
-    "@mantine/next": "^6.0.21",
-    "@mantine/notifications": "^6.0.21",
+    "@mantine/core": "^6.0.22",
+    "@mantine/form": "^6.0.22",
+    "@mantine/hooks": "^6.0.22",
+    "@mantine/dates": "^6.0.22",
+    "@mantine/modals": "^6.0.22",
+    "@mantine/next": "^6.0.22",
+    "@mantine/notifications": "^6.0.22",
     "@mdx-js/loader": "^2.1.5",
     "@mdx-js/mdx": "^2.1.5",
     "@next/mdx": "^14.1.1",
@@ -138,8 +139,6 @@
     "@types/recharts": "^1.8.23",
     "@types/tinycolor2": "^1.4.4",
     "@types/uuid": "^9.0.4",
-    "@typescript-eslint/eslint-plugin": "^5.56.0",
-    "@typescript-eslint/parser": "^5.56.0",
     "autoprefixer": "^10.4.15",
     "css-loader": "^6.8.1",
     "eslint": "^8.49.0",
@@ -162,8 +161,7 @@
   "peerDependencies": {
     "@gen3/core": "^0.10.33",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "5.0.2"
+    "react-dom": "^18.2.0"
   },
   "files": [
     "dist"

diff --git a/packages/frontend/src/components/Details/DetailsDrawer.tsx b/packages/frontend/src/components/Details/DetailsDrawer.tsx
@@ -1,5 +1,5 @@
 import { Button, Drawer } from '@mantine/core';
-import React, { cloneElement, useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { useDisclosure } from '@mantine/hooks';
 import { MdKeyboardDoubleArrowLeft as BackIcon } from 'react-icons/md';
 import { DetailsComponentProps } from './types';

diff --git a/packages/frontend/src/components/Details/DetailsModal.tsx b/packages/frontend/src/components/Details/DetailsModal.tsx
@@ -29,7 +29,7 @@ export const DetailsModal = <
 
   const styling = useMemo(
     () => mergeDefaultTailwindClassnames(DEFAULT_PROPS, classNames ?? {}, true),
-    [],
+    [classNames],
   );
 
   useEffect(() => {

diff --git a/packages/frontend/src/components/ErrorCard.tsx b/packages/frontend/src/components/ErrorCard.tsx
@@ -1,7 +1,6 @@
 import React, { ReactElement } from 'react';
 import { Card, Text, Group, ThemeIcon } from '@mantine/core';
-import { IconAlertTriangle } from '@tabler/icons-react';
-
+import { BsExclamationTriangle as IconAlertTriangle } from 'react-icons/bs';
 interface ErrorCardProps {
   message: string;
   icon?: ReactElement;

diff --git a/packages/frontend/src/components/Layout/TexturedSidePanel.tsx b/packages/frontend/src/components/Layout/TexturedSidePanel.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-import { Box } from '@mantine/core';
 
 interface TexturedSidePanelProps {
   readonly url?: string;

diff --git a/packages/frontend/src/components/Modals/FirstTimeModal.tsx b/packages/frontend/src/components/Modals/FirstTimeModal.tsx
@@ -1,9 +1,8 @@
 import { Text } from '@mantine/core';
 import { useCookies } from 'react-cookie';
 import { BaseModal } from './BaseModal';
-import TextContent, { TextContentProps } from '../Content/TextContent';
+import TextContent from '../Content/TextContent';
 import { FirstTimeModalConfig } from './types';
-import { first } from 'lodash';
 
 interface FirstTimeModalProps {
   readonly openModal: boolean;

diff --git a/packages/frontend/src/features/Authz/Users/Inputs.tsx b/packages/frontend/src/features/Authz/Users/Inputs.tsx
@@ -11,24 +11,24 @@ export const UserId = ({ form }: { form: UseFormReturnType<NewUserFormValues> })
   return <TextInput {...form.getInputProps('userId')} label="User Id" withAsterisk />;
 };
 export const NameInput = ({
-                            form
-                          }: {
+  form
+}: {
   form: UseFormReturnType<NewUserFormValues>;
 }) => {
   return <TextInput {...form.getInputProps('name')} label="Full name" />;
 };
 export const EmailInput = ({
-                             form
-                           }: {
+  form
+}: {
   form: UseFormReturnType<NewUserFormValues>;
 }) => {
   return <TextInput {...form.getInputProps('email')} label="Email" />;
 };
 
 export const IsAdminInput = ({
   form
-                              }: {
-    form: UseFormReturnType<NewUserFormValues>;
-  }) => {
-        return <Switch labelPosition="left" label="Is Administrator" />;
+}: {
+  form: UseFormReturnType<NewUserFormValues>;
+}) => {
+  return <Switch labelPosition="left" label="Is Administrator" />;
 };
diff --git a/packages/frontend/src/features/Authz/Users/UserTable.tsx b/packages/frontend/src/features/Authz/Users/UserTable.tsx
@@ -7,7 +7,7 @@ import {
 } from 'mantine-react-table';
 import { User } from '../types';
 import { AuthzContext } from '../Provider';
-import { Box, Menu, Text } from '@mantine/core';
+import { Menu } from '@mantine/core';
 
 interface UserTableProps {
   setCurrentUser: (user: User) => void;

diff --git a/packages/frontend/src/features/CohortBuilder/CohortPanel.tsx b/packages/frontend/src/features/CohortBuilder/CohortPanel.tsx
@@ -147,7 +147,7 @@ export const CohortPanel = ({
   const index = guppyConfig.dataType;
   const fields = useMemo(
     () => getAllFieldsFromFilterConfigs(filters?.tabs ?? []),
-    [],
+    [filters?.tabs],
   );
 
   const [facetDefinitions, setFacetDefinitions] = useState<

diff --git a/packages/frontend/src/features/CohortBuilder/ExplorerTable/CellRenderers.tsx b/packages/frontend/src/features/CohortBuilder/ExplorerTable/CellRenderers.tsx
@@ -1,19 +1,20 @@
 import { MRT_Cell } from 'mantine-react-table';
 import { isArray } from 'lodash';
-import React, { ReactElement } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { Badge } from '@mantine/core';
 import Link from 'next/link';
+import { JSONObject } from '@gen3/core';
 
 const NullCell = (): ReactElement => <span>NULL</span>;
 
 interface CellRendererFunctionProps {
-  cell: MRT_Cell;
+  cell: MRT_Cell<JSONObject>;
 }
 
 export type CellRendererFunction = (
   props: CellRendererFunctionProps,
   ...args: any[]
-) => ReactElement;
+) => ReactNode;
 
 // TODO need to type this
 export const RenderArrayCell: CellRendererFunction = ({
@@ -128,14 +129,14 @@ export const TableCellRenderer = (
         'array',
         functionName,
       );
-      return (cell): ReactElement => func(cell);
+      return (cell): ReactNode => func(cell);
     }
     case 'link': {
       const func = CellRendererFactory.getInstance().getCellRenderer(
         'link',
         functionName,
       );
-      return (cell): ReactElement => func(cell, ...params);
+      return (cell): ReactNode => func(cell, ...params);
     }
     default:
       return ValueCellRenderer;

diff --git a/packages/frontend/src/features/CohortBuilder/ExplorerTable/ExplorerTable.tsx b/packages/frontend/src/features/CohortBuilder/ExplorerTable/ExplorerTable.tsx
@@ -109,7 +109,10 @@ const ExplorerTable = ({ index, tableConfig }: ExplorerTableProps) => {
           cellRendererFunc && columnDef?.params
             ? (cell: CellRendererFunctionProps) =>
                 cellRendererFunc(cell, cellRendererFuncParams)
-            : cellRendererFunc,
+            : cellRendererFunc
+            ? cellRendererFunc
+            : undefined,
+
         size: columnDef?.width,
         enableSorting: columnDef?.sortable ?? undefined,
       };
@@ -186,8 +189,8 @@ const ExplorerTable = ({ index, tableConfig }: ExplorerTableProps) => {
    *   @see https://www.mantine-react-table.com/docs/guides/state-management#manage-individual-states-as-needed
    */
 
-  const table = useMantineReactTable({
-    columns: cols,
+  const table = useMantineReactTable<JSONObject>({
+    columns: cols as any[], //TODO: fix this
     data: data?.data?.[index] ?? [],
     manualSorting: true,
     manualPagination: true,

diff --git a/packages/frontend/src/features/CohortBuilder/ExplorerTable/ExplorerTableCellRenderers.tsx b/packages/frontend/src/features/CohortBuilder/ExplorerTable/ExplorerTableCellRenderers.tsx
@@ -1,5 +1,5 @@
 import { RenderFactoryTypedInstance } from '../../../utils/RendererFactory';
-import React, { ReactElement } from 'react';
+import React, { ReactNode } from 'react';
 import { isArray } from 'lodash';
 import { Badge, Text } from '@mantine/core';
 import { CellRendererFunctionProps } from './types';
@@ -11,7 +11,8 @@ export interface CellRendererFunctionCatalogEntry {
 export type CellRendererFunction = (
   props: CellRendererFunctionProps,
   ...args: any[]
-) => ReactElement;
+) => ReactNode;
+
 // TODO need to type this
 export const RenderArrayCell: CellRendererFunction = ({
   cell,
@@ -60,7 +61,7 @@ export const RenderArrayCellNegativePositive = ({
 };
 
 const ValueCellRenderer = ({ cell }: CellRendererFunctionProps) => {
-  return <span>{cell.getValue() as ReactElement}</span>;
+  return <span>{cell.getValue() as ReactNode}</span>;
 };
 
 const ArrayCellFunctionCatalog = {
@@ -80,7 +81,7 @@ const RenderLinkCell = (
     >
       <Text c="blue" td="underline" fw={700}>
         {' '}
-        {cell.getValue() as ReactElement}{' '}
+        {cell.getValue() as ReactNode}{' '}
       </Text>
     </a>
   );
@@ -98,13 +99,13 @@ const RenderLinkCellUsingValueMap = (
     const linkMap = args[0].valueToURL as Record<string, string>;
     href = linkMap[cell.getValue() as string] ?? null;
   }
-  if (!href) return <Text fw={700}> {cell.getValue() as ReactElement} </Text>;
+  if (!href) return <Text fw={700}> {cell.getValue() as ReactNode} </Text>;
 
   return (
     <a href={`${href}`} target="_blank" rel="noreferrer">
       <Text c="blue" td="underline" fw={700}>
         {' '}
-        {cell.getValue() as ReactElement}{' '}
+        {cell.getValue() as ReactNode}{' '}
       </Text>
     </a>
   );

diff --git a/packages/frontend/src/features/CohortBuilder/QueryExpressionsExpandedContext.tsx b/packages/frontend/src/features/CohortBuilder/QueryExpressionsExpandedContext.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export interface CollapsedStateReducerAction {
-  type: "expand" | "collapse" | "clear" | "init" | "expandAll" | "collapseAll";
+  type: 'expand' | 'collapse' | 'clear' | 'init' | 'expandAll' | 'collapseAll';
   cohortId: string;
   field?: string;
 }

diff --git a/packages/frontend/src/features/Discovery/ActionBar/ActionBar.tsx b/packages/frontend/src/features/Discovery/ActionBar/ActionBar.tsx
@@ -16,7 +16,7 @@ const ActionBar = ({ config }: ActionBarProps) => {
         return (
           <DataLibraryActionButton
             label={button.label}
-            icon={DownloadIcon}
+            icon={<DownloadIcon />}
             toolTip={button.tooltip}
             loginRequired={config?.loginRequireForAllButtons ?? true}
             onClick={() => {

diff --git a/packages/frontend/src/features/Discovery/ActionBar/DownloadAsZipButton.tsx b/packages/frontend/src/features/Discovery/ActionBar/DownloadAsZipButton.tsx
@@ -8,7 +8,7 @@ const DownloadAsZipButton = ({ selectedResources }: ActionButtonProps) => {
   return (
     <DataLibraryActionButton
       label="Download Zip"
-      icon={DownloadIcon}
+      icon={<DownloadIcon />}
       toolTip="Download Zip"
       onClick={() => {
         console.log('Download Zip');

diff --git a/packages/frontend/src/features/Discovery/ActionBar/DownloadManifestButton.tsx b/packages/frontend/src/features/Discovery/ActionBar/DownloadManifestButton.tsx
@@ -50,7 +50,7 @@ const DownloadManifestButton = ({
   return (
     <DataLibraryActionButton
       label="Download Manifest"
-      icon={DownloadIcon}
+      icon={<DownloadIcon />}
       toolTip="Download Manifest"
       onClick={() => {
         console.log('Download Manifest');

diff --git a/packages/frontend/src/features/Discovery/DiscoveryTable.tsx b/packages/frontend/src/features/Discovery/DiscoveryTable.tsx
@@ -87,7 +87,7 @@ const DiscoveryTable = ({
   }, [config.studyColumns]);
 
   const table = useMantineReactTable({
-    columns: cols as any[], // TODO: fix typing issues when migrating to mantine-react-table v2.
+    columns: cols as any[],
     data: data ?? [],
     manualSorting: manualSortingAndPagination,
     manualPagination: manualSortingAndPagination,

diff --git a/packages/frontend/src/features/Discovery/StudyPage/DownloadLinksPanel.tsx b/packages/frontend/src/features/Discovery/StudyPage/DownloadLinksPanel.tsx
@@ -65,7 +65,9 @@ const DownloadLinksPanel = ({
                   return (
                     <Group key={id} position="apart">
                       <Text>{entry['titleField'] || ''}</Text>
-                      <Button leftIcon={DownloadIcon()} disabled={!id}>Download File</Button>
+                      <Button leftIcon={<DownloadIcon />} disabled={!id}>
+                        Download File
+                      </Button>
                     </Group>
                   );
                 },

diff --git a/packages/frontend/src/lib/session/session.tsx b/packages/frontend/src/lib/session/session.tsx
@@ -246,7 +246,7 @@ export const SessionProvider = ({
       window.removeEventListener('mousedown', updateUserActivity);
       window.removeEventListener('keypress', updateUserActivity);
     };
-  }, []);
+  }, [updateSession, updateSessionIntervalMilliseconds]);
 
   useInterval(
     () => {

diff --git a/packages/frontend/src/pages/index.tsx b/packages/frontend/src/pages/index.tsx
@@ -14,6 +14,8 @@ const IndexPage = ({ top, navigation }: HeaderProps) => {
   );
 };
 
+// todo
+
 const getServerSideProps: GetServerSideProps = async () => {
   return {
     redirect: {

diff --git a/packages/frontend/src/types/react-table-config.d.ts b/packages/frontend/src/types/react-table-config.d.ts
@@ -114,8 +114,7 @@ declare module 'react-table' {
       UseSortByColumnProps<D> {}
 
   export interface Cell<
-    D extends Record<string, unknown> = Record<string, unknown>,
-    V = any,
+    D extends Record<string, unknown> = Record<string, unknown>
   > extends UseGroupByCellProps<D>,
       UseRowStateCellProps<D> {}