Refactor JSONEditor and UploadFilesModal components for improved type safety and UI consistency

- Updated JSONEditor to use Record<string, unknown> for better type handling.
- Modified UploadFilesModal to use DialogBody for layout adjustments and changed modalType to 'modal'.
- Enhanced CustomCellRender and ProcessQueueGrid components to handle optional chaining and type assertions.
- Adjusted ProcessSteps to ensure proper type handling and rendering logic.
- Updated PanelCenter, PanelLeft, and PanelRight to restrict togglePanel prop to specific string literals.
- Refined API error handling in httpUtility to ensure consistent return types.
- Cleaned up msaConfig by removing unnecessary cookie storage option.
- Added refreshTrigger to initial state in leftPanelSlice test for better state management.

Author: Pavan-Microsoft

src/ContentProcessorWeb/package.json

@@ -6,12 +6,9 @@
   "dependencies": {
     "@azure/msal-browser": "^5.6.2",
     "@azure/msal-react": "^5.2.0",
-    "@fluentui/react-button": "^9.8.0",
     "@fluentui/react-components": "^9.73.6",
-    "@fluentui/react-dialog": "^9.16.6",
     "@fluentui/react-icons": "^2.0.245",
     "@reduxjs/toolkit": "^2.11.2",
-    "axios": "^1.14.0",
     "babel-preset-react-app": "^10.1.0",
     "contentprocessor_web": "file:",
     "cra-template-typescript": "1.3.0",
@@ -61,12 +58,14 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
+    "@types/node": "^22.15.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-virtualized": "^9.22.3",
     "@types/react-window": "^2.0.0",
     "customize-cra": "^1.0.0",
+    "eslint": "^8.57.0",
     "gh-pages": "^6.3.0",
     "globals": "^17.4.0",
     "husky": "^9.1.7",
@@ -75,7 +74,7 @@
     "react-tiff": "^0.0.16",
     "sass": "^1.98.0",
     "sass-loader": "^16.0.7",
-    "typescript": "^6.0.2",
+    "typescript": "^5.8.3",
     "typescript-eslint": "^8.58.0"
   },
   "compilerOptions": {
@@ -102,10 +101,9 @@
       "postcss": "^8.5.6",
       "nth-check": "^2.1.1",
       "string_decoder": "^1.3.0",
-      "typescript": "^4.9.5",
+      "typescript": "^5.8.3",
       "node-forge": "^1.4.0",
       "@tootallnate/once": "^3.0.1",
-      "axios": "^1.15.0",
       "brace-expansion": "^2.0.3",
       "flatted": "^3.4.2",
       "immutable": "^5.1.5",

src/ContentProcessorWeb/pnpm-lock.yaml

@@ -47,7 +47,7 @@ const JSONEditor: React.FC<JSONEditorProps> = () => {
       if (Object.keys(store.contentData).length > 0) {
         const formattedJson = store.contentData.result;
         const data = {
-          ...formattedJson
+          ...(formattedJson as Record<string, unknown>)
         }
         setJsonData(data);
       } else {
@@ -116,7 +116,7 @@ const JSONEditor: React.FC<JSONEditorProps> = () => {
                   }
                 }]}
                 onUpdate={({ newData }) => {
-                  onUpdateHandle(newData)
+                  onUpdateHandle(newData as Record<string, unknown>)
                 }}
                 restrictDelete={true}
                 showIconTooltips={true}

src/ContentProcessorWeb/src/Components/JSONEditor/JSONEditor.tsx

@@ -11,12 +11,11 @@ import React, { useState, useRef, useEffect } from "react";
 import {
   Dialog,
   DialogSurface,
+  DialogBody,
   DialogTitle,
   DialogContent,
   DialogActions,
-} from "@fluentui/react-dialog";
-import { Button } from "@fluentui/react-button";
-import {
+  Button,
   ProgressBar,
   makeStyles,
   Combobox,
@@ -343,8 +342,9 @@ const UploadFilesModal: React.FC<UploadFilesModalProps> = ({ open, onClose }) =>
     onClose();
   };
   return (
-    <Dialog open={open} modalType="alert" >
+    <Dialog open={open} modalType="modal" >
       <DialogSurface className={styles.dialogSurface}>
+        <DialogBody style={{ display: "flex", flexDirection: "column", overflow: "hidden", flex: 1 }}>
         <DialogTitle>Import Content</DialogTitle>
         <DialogContent className={styles.dialogContent}>
           <div className="dialogBody">
@@ -439,6 +439,7 @@ const UploadFilesModal: React.FC<UploadFilesModalProps> = ({ open, onClose }) =>
             {uploading ? "Importing..." : "Import"}
           </Button>
         </DialogActions>
+        </DialogBody>
       </DialogSurface>
     </Dialog>
   );

src/ContentProcessorWeb/src/Components/UploadContent/UploadFilesModal.tsx

@@ -167,8 +167,8 @@ const CellRenderer: React.FC<CellRendererProps> = ({ type, props }) => {
           <MenuItem
             icon={<DeleteIcon />}
             onClick={() => {
-              setSelectedDeleteItem(item);
-              toggleDialog();
+              setSelectedDeleteItem?.(item);
+              toggleDialog?.();
             }}
             style={{ maxWidth: 'auto', minWidth: 'auto' }}
           >
@@ -190,11 +190,11 @@ const CellRenderer: React.FC<CellRendererProps> = ({ type, props }) => {
     case 'schemaScore':
       return calculateSchemaScore(valueText || '', lastModifiedBy || '', status || '');
     case 'text':
-      return renderText(text, 'center');
+      return renderText(text ?? '', 'center');
     case 'date':
-      return renderText(text, 'date');
+      return renderText(text ?? '', 'date');
     case 'deleteButton':
-      return renderDeleteButton(item, deleteBtnStatus || {});
+      return item ? renderDeleteButton(item, deleteBtnStatus || { disabled: false, message: '' }) : <div>Invalid Type</div>;
     default:
       return <div>Invalid Type</div>;
   }

src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessQueueGrid/CustomCellRender.tsx

@@ -88,7 +88,7 @@ const ProcessQueueGrid: React.FC<GridComponentProps> = () => {
     useEffect(() => {
         if (!store.gridLoader) {
             if (store.gridData.items && store.gridData.items.length > 0) {
-                const claimRows: ClaimRowData[] = store.gridData.items.map((item: ClaimItem) => ({
+                const claimRows: ClaimRowData[] = (store.gridData.items as unknown as ClaimItem[]).map((item: ClaimItem) => ({
                     claim: item,
                     isExpanded: false,
                     isSelected: false,
@@ -113,7 +113,7 @@ const ProcessQueueGrid: React.FC<GridComponentProps> = () => {
                     setSelectedDocumentId(null);
                     dispatch(
                         setSelectedClaim({
-                            claim: firstClaim,
+                            claim: firstClaim as unknown as Record<string, unknown>,
                         })
                     );
                 }
@@ -149,7 +149,7 @@ const ProcessQueueGrid: React.FC<GridComponentProps> = () => {
         // Dispatch the claim selection
         dispatch(
             setSelectedClaim({
-                claim: claim,
+                claim: claim as unknown as Record<string, unknown>,
             })
         );
     };
@@ -160,7 +160,7 @@ const ProcessQueueGrid: React.FC<GridComponentProps> = () => {
         dispatch(
             setSelectedGridRow({
                 processId: document.process_id,
-                item: document,
+                item: document as unknown as Record<string, unknown>,
             })
         );
     };

src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessQueueGrid/ProcessQueueGrid.tsx

@@ -6,8 +6,8 @@
  * data structures (claims, documents, grid rows).
  */
 
+import type { JSX } from "react";
 import { TableRowData as RowStateBase } from "@fluentui/react-components";
-import { ListChildComponentProps } from "react-window";
 
 /** A single processed document within a claim batch. */
 export interface ProcessedDocument {
@@ -95,11 +95,5 @@ export interface TableRowData extends RowStateBase<Item> {
     appearance: "brand" | "none";
 }
 
-export interface ReactWindowRenderFnProps extends ListChildComponentProps {
-    data: TableRowData[];
-    style: React.CSSProperties;
-    index: number;
-}
-
 /** Props for the {@link ProcessQueueGrid} component. */
 export type GridComponentProps = Record<string, never>;

src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessQueueGrid/ProcessQueueGridTypes.ts

@@ -92,15 +92,18 @@ const ProcessSteps: React.FC = () => {
 
   return (
     <Accordion collapsible>
-      {!status.includes(store.selectedItem.status) && store.processStepsData?.map((step, index) => (
-        <AccordionItem key={index} value={step.step_name}>
+      {!status.includes(store.selectedItem.status as string) && store.processStepsData?.map((step, index) => {
+        const stepName = step.step_name as string;
+        const processedTime = step.processed_time as string;
+        return (
+        <AccordionItem key={index} value={stepName}>
           <AccordionHeader onClick={() => handleExpand(index)}> {loadingStates[index] && <Spinner size="tiny" style={{ position: 'absolute', left: '10px' }} label="" />}
-            <span style={{ fontWeight: 'bold', textTransform: 'capitalize'}}>{step.step_name}</span>
+            <span style={{ fontWeight: 'bold', textTransform: 'capitalize'}}>{stepName}</span>
             <span style={{ color: 'green', marginLeft: 'auto', display: 'flex', alignItems: 'center' }}>
-              {renderProcessTimeInSeconds(step.processed_time)} <CheckmarkCircleFilled style={{ marginLeft: '4px' }} />
+              {renderProcessTimeInSeconds(processedTime)} <CheckmarkCircleFilled style={{ marginLeft: '4px' }} />
             </span>
           </AccordionHeader>
-          <div ref={(el) => (childRefs.current[index] = el)}>
+          <div ref={(el) => { childRefs.current[index] = el; }}>
             <AccordionPanel >
               <JsonEditor
                 key={`json-editor-${index}`}
@@ -109,7 +112,7 @@ const ProcessSteps: React.FC = () => {
                 restrictEdit={true}
                 restrictDelete={true}
                 restrictAdd={true}
-                rootName={step.step_name.toLowerCase()}
+                rootName={stepName.toLowerCase()}
                 collapseAnimationTime={300}
                 theme={[{
                   styles: {
@@ -126,7 +129,8 @@ const ProcessSteps: React.FC = () => {
             </AccordionPanel>
           </div>
         </AccordionItem>
-      ))}
+        );
+      })}
     </Accordion>
 
   );

src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessSteps/ProcessSteps.tsx

@@ -47,7 +47,7 @@ const ChevronDoubleLeft = bundleIcon(ChevronDoubleLeft20Regular, ChevronDoubleLe
 /** Props for the {@link PanelCenter} component. */
 interface PanelCenterProps {
   /** Callback to collapse/expand a named panel. */
-  readonly togglePanel: (panel: string) => void;
+  readonly togglePanel: (panel: 'Left' | 'Right' | 'Center' | 'All') => void;
 }
 
 const useStyles = makeStyles({
@@ -153,7 +153,7 @@ const PanelCenter: React.FC<PanelCenterProps> = ({ togglePanel }) => {
   );
 
   useEffect(() => {
-    dispatch(setActiveProcessId(store.processId))
+    dispatch(setActiveProcessId(store.processId ?? ''))
     setComment('');
     // Reset tab to appropriate default when selection changes
     if (store.selectionType === 'claim') {
@@ -183,7 +183,7 @@ const PanelCenter: React.FC<PanelCenterProps> = ({ togglePanel }) => {
       }
     }
     // Only fetch for document selection
-    if (store.selectionType === 'document' && (store.activeProcessId != null || store.activeProcessId !== '') && !status.includes(store.selectedItem.status) && store.selectedItem?.process_id === store.activeProcessId) {
+    if (store.selectionType === 'document' && (store.activeProcessId != null || store.activeProcessId !== '') && !status.includes(store.selectedItem.status as string) && store.selectedItem?.process_id === store.activeProcessId) {
       fetchContent();
     }
   }, [store.activeProcessId, store.selectedItem, store.selectionType, store.refreshTrigger])
@@ -192,14 +192,14 @@ const PanelCenter: React.FC<PanelCenterProps> = ({ togglePanel }) => {
   useEffect(() => {
     if (store.selectionType === 'claim' && store.selectedClaim?.id) {
       setClaimComment('');
-      dispatch(fetchClaimDetails({ claimId: store.selectedClaim.id }));
+      dispatch(fetchClaimDetails({ claimId: store.selectedClaim.id as string }));
     }
   }, [store.selectionType, store.selectedClaim?.id, dispatch, store.refreshTrigger])
 
   // Sync claim comment with API response
   useEffect(() => {
-    if (store.claimDetails?.data?.process_comment !== undefined) {
-      setClaimComment(store.claimDetails.data.process_comment || '');
+    if ((store.claimDetails?.data as Record<string, unknown>)?.process_comment !== undefined) {
+      setClaimComment((store.claimDetails?.data as Record<string, unknown>)?.process_comment as string || '');
     }
   }, [store.claimDetails])
 
@@ -232,7 +232,7 @@ const PanelCenter: React.FC<PanelCenterProps> = ({ togglePanel }) => {
           <div style={{ marginBottom: '16px' }}>
             <h4 style={{ margin: '0 0 8px 0', color: tokens.colorNeutralForeground1 }}>Summary</h4>
             <p style={{ margin: 0, color: tokens.colorNeutralForeground2, whiteSpace: 'pre-wrap' }}>
-              {store.claimDetails.data.process_summary || 'No summary available'}
+              {(store.claimDetails.data as Record<string, unknown>)?.process_summary as string || 'No summary available'}
             </p>
           </div>
         </div>
@@ -266,7 +266,7 @@ const PanelCenter: React.FC<PanelCenterProps> = ({ togglePanel }) => {
 
   const ExtractedResults = React.useCallback(() => (
     <div role="tabpanel" className={styles.tabItemCotnent} aria-labelledby="Extracted Results">
-      {store.activeProcessId && !status.includes(store.selectedItem.status) ? (
+      {store.activeProcessId && !status.includes(store.selectedItem.status as string) ? (
         <JSONEditor
           processId={store.activeProcessId}
         />
@@ -277,7 +277,7 @@ const PanelCenter: React.FC<PanelCenterProps> = ({ togglePanel }) => {
   const ProcessHistory = useCallback(() => (
     <div role="tabpanel" className={styles.processTabItemCotnent} aria-labelledby="Process Steps">
       {apiLoader ? <div className={styles.apiLoader}><p>Loading...</p></div>
-        : (store.processStepsData?.length === 0 || status.includes(store.selectedItem.status)) ? <p style={{ textAlign: 'center' }}> No data available</p>
+        : (store.processStepsData?.length === 0 || status.includes(store.selectedItem.status as string)) ? <p style={{ textAlign: 'center' }}> No data available</p>
           : <ProcessSteps />
       }
     </div>
@@ -291,7 +291,7 @@ const PanelCenter: React.FC<PanelCenterProps> = ({ togglePanel }) => {
     try {
       dispatch(startLoader("1"));
       dispatch(setUpdateComments(comment))
-      const result = await dispatch(saveContentJson({ 'processId': store.activeProcessId, 'contentJson': store.modified_result, 'comments': comment, 'savedComments': store.comments }))
+      const result = await dispatch(saveContentJson({ 'processId': store.activeProcessId, 'contentJson': store.modified_result as unknown as string, 'comments': comment, 'savedComments': store.comments }))
       if (result?.type === 'SaveContentJSON-Comments/fulfilled') {
         dispatch(setRefreshGrid(true));
       }
@@ -304,7 +304,7 @@ const PanelCenter: React.FC<PanelCenterProps> = ({ togglePanel }) => {
 
   const isButtonSaveDisabledCheck = () => {
     if(!store.activeProcessId) return true;
-    if (status.includes(store.selectedItem.status)) return true;
+    if (status.includes(store.selectedItem.status as string)) return true;
     if (Object.keys(store.modified_result).length > 0) return false;
     if (comment.trim() !== store.comments && comment.trim() !== '') return false;
     if (store.comments !== '' && comment.trim() === '') return false;
@@ -314,15 +314,15 @@ const PanelCenter: React.FC<PanelCenterProps> = ({ togglePanel }) => {
   const isClaimSaveDisabled = () => {
     if (!store.claimDetails) return true;
     if (store.claimCommentSaving) return true;
-    const savedComment = store.claimDetails?.data?.process_comment || '';
+    const savedComment = ((store.claimDetails?.data as Record<string, unknown>)?.process_comment as string) || '';
     // Enable save if comment has changed
     if (claimComment.trim() !== savedComment) return false;
     return true;
   }
 
   const handleClaimSave = async () => {
     if (store.selectedClaim?.id) {
-      await dispatch(saveClaimComment({ claimId: store.selectedClaim.id, comment: claimComment }));
+      await dispatch(saveClaimComment({ claimId: store.selectedClaim.id as string, comment: claimComment }));
     }
   }
 

src/ContentProcessorWeb/src/Pages/DefaultPage/PanelCenter.tsx

@@ -27,7 +27,7 @@ const ChevronDoubleLeft = bundleIcon(ChevronDoubleLeft20Regular, ChevronDoubleLe
 /** Props for the {@link PanelLeft} component. */
 interface PanelLeftProps {
   /** Callback to collapse/expand a named panel. */
-  readonly togglePanel: (panel: string) => void;
+  readonly togglePanel: (panel: 'Left' | 'Right' | 'Center' | 'All') => void;
 }
 
 /**