Bug fix(#17041) US (#17042,17138)

Author: Bangarraju-Microsoft

infra/deploy_container_registry.bicep

@@ -3,49 +3,31 @@
 targetScope = 'resourceGroup'
 
 param environmentName string
-
+ 
 var uniqueId = toLower(uniqueString(subscription().id, environmentName, resourceGroup().location))
 var solutionName = 'cps-${padLeft(take(uniqueId, 12), 12, '0')}'
-
+ 
 var containerNameCleaned = replace('cr${solutionName }', '-', '')
-
+ 
 @description('Provide a location for the registry.')
 param location string = resourceGroup().location
-
+ 
 @description('Provide a tier of your Azure Container Registry.')
 param acrSku string = 'Basic'
-
+ 
 resource containerRegistry 'Microsoft.ContainerRegistry/registries@2021-09-01' = {
   name: containerNameCleaned
   location: location
   sku: {
     name: acrSku
   }
   properties: {
-    adminUserEnabled: true
-    dataEndpointEnabled: false
-    networkRuleBypassOptions: 'AzureServices'
-    networkRuleSet: {
-      defaultAction: 'Allow'
-    }
-    policies: {
-      quarantinePolicy: {
-        status: 'disabled'
-      }
-      retentionPolicy: {
-        status: 'enabled'
-        days: 7
-      }
-      trustPolicy: {
-        status: 'disabled'
-        type: 'Notary'
-      }
-    }
     publicNetworkAccess: 'Enabled'
     zoneRedundancy: 'Disabled'
   }
 }
-
+ 
 output createdAcrName string = containerNameCleaned
 output createdAcrId string = containerRegistry.id
 output acrEndpoint string = containerRegistry.properties.loginServer
+ 

src/ContentProcessorAPI/app/routers/contentprocessor.py

@@ -517,5 +517,5 @@ async def delete_processed_file(
     return ContentResultDelete(
         status="Success" if deleted_file else "Failed",
         process_id=deleted_file.process_id if deleted_file else "",
-        message="" if deleted_file else "This record no longer exists. Please refresh the page."
+        message="" if deleted_file else "This record no longer exists. Please refresh."
     )

src/ContentProcessorWeb/config-overrides.js

@@ -1,7 +1,5 @@
 const { override, addWebpackModuleRule, addWebpackResolve } = require('customize-cra');
 
-console.log('Applying config-overrides.js...');
-
 module.exports = override(
   addWebpackModuleRule({
     test: /\.md$/,

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

@@ -9,7 +9,7 @@ import {
 import { Button } from "@fluentui/react-button";
 import { Field, ProgressBar, makeStyles } from "@fluentui/react-components";
 import { useDispatch, useSelector, shallowEqual } from "react-redux";
-import { fetchContentTableData, uploadFile } from "../../store/slices/leftPanelSlice";
+import { fetchContentTableData, setRefreshGrid, uploadFile } from "../../store/slices/leftPanelSlice";
 import { AppDispatch, RootState } from "../../store";
 import "./UploadFilesModal.styles.scss";
 
@@ -164,6 +164,7 @@ const UploadFilesModal: React.FC<UploadFilesModalProps> = ({ open, onClose }) =>
   // Upload files
   const handleUpload = async () => {
     setUploading(true);
+    let uploadCount = 0;
     try {
       const schema = store.schemaSelectedOption?.optionValue ?? "defaultSchema";
 
@@ -172,12 +173,13 @@ const UploadFilesModal: React.FC<UploadFilesModalProps> = ({ open, onClose }) =>
 
         try {
           await dispatch(uploadFile({ file, schema })).unwrap();
+          uploadCount++;
           setUploadProgress((prev) => ({ ...prev, [file.name]: 100 })); // Set progress to 100% after upload
         } catch (error: any) {
           // Capture and log the error specific to the file
           setFileErrors((prev) => ({
             ...prev,
-            [file.name]: { message: error.message }
+            [file.name]: { message: error }
           }));
           setUploadProgress((prev) => ({ ...prev, [file.name]: -1 })); // Optional: Indicate failure with -1 or another value
         }
@@ -186,17 +188,16 @@ const UploadFilesModal: React.FC<UploadFilesModalProps> = ({ open, onClose }) =>
       //console.error("Overall upload failed:", error);
     } finally {
       setUploading(false);
-      // setFiles([]) // If you want to clear the files after upload
       setStartUpload(false);
       setUploadCompleted(true);
       if (fileInputRef.current) {
         fileInputRef.current.value = '';  // Reset the file input
       }
-      dispatch(fetchContentTableData({ pageSize: store.pageSize, pageNumber: 1 })).unwrap();
+      if (uploadCount > 0)
+        dispatch(setRefreshGrid(true));
     }
   };
 
-
   const handleButtonClick = () => {
     fileInputRef.current?.click(); // Open file selector
   };

src/ContentProcessorWeb/src/Hooks/useConsoleSuppression.ts

@@ -2,19 +2,25 @@ import { useEffect } from "react";
 
 // Custom hook to suppress console logs, warnings, and errors in localhost
 const useConsoleSuppression = () => {
+
+  function toBoolean(value: unknown): boolean {
+    return (window.location.hostname === "localhost") ? true : String(value).toLowerCase() === "true";
+  }
+
   useEffect(() => {
-    if (window.location.hostname !== "localhost" &&  process.env.REACT_APP_CONSOLE_LOG_ENABLED?.toLocaleLowerCase() != "true" ) {
+    const isConsoleFlag = toBoolean(process.env.REACT_APP_CONSOLE_LOG_ENABLED);
+    if (isConsoleFlag !== true) {
       // Save the original console methods
       const originalConsoleError = console.error;
       const originalConsoleWarn = console.warn;
       const originalConsoleLog = console.log;
       const originalConsoleInfo = console.info;
 
       // Suppress console methods
-      console.error = () => {};
-      console.warn = () => {};
-      console.log = () => {};
-      console.info = () => {};
+      console.error = () => { };
+      console.warn = () => { };
+      console.log = () => { };
+      console.info = () => { };
 
       // Clean up when component unmounts
       return () => {

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

@@ -13,7 +13,7 @@ import AutoSizer from "react-virtualized-auto-sizer";
 import CustomCellRender from "./CustomCellRender";
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { RootState, AppDispatch } from '../../../../store';
-import { setSelectedGridRow, deleteProcessedFile, fetchContentTableData } from '../../../../store/slices/leftPanelSlice';
+import { setSelectedGridRow, deleteProcessedFile } from '../../../../store/slices/leftPanelSlice';
 import useFileType from "../../../../Hooks/useFileType";
 import { Confirmation } from "../../../../Components/DialogComponent/DialogComponent.tsx";
 import { Item, TableRowData, ReactWindowRenderFnProps, GridComponentProps } from './ProcessQueueGridTypes.ts';
@@ -140,15 +140,13 @@ const ProcessQueueGrid: React.FC<GridComponentProps> = () => {
     }, [store.gridData])
 
     useEffect(() => {
-        console.log("selectedRows", selectedRows, items);
         if (items.length > 0 && selectedRows.size > 0) {
             const selectedRow = [...selectedRows][0];
             if (typeof selectedRow === 'number') {
                 let selectedItem = items[selectedRow];
                 if (!selectedItem) {
                     setSelectedRows(new Set<TableRowId>([0]));
                 } else {
-                    console.log("selectedItem", selectedItem);
                     const findItem = getSelectedItem(selectedItem?.processId.label ?? '');
                     dispatch(setSelectedGridRow({ processId: selectedItem?.processId.label, item: findItem }));
                 }
@@ -289,9 +287,7 @@ const ProcessQueueGrid: React.FC<GridComponentProps> = () => {
                 toggleDialog();
                 await dispatch(deleteProcessedFile({ processId: selectedDeleteItem.processId.label ?? null }));
             } catch (error: any) {
-
-            } finally {
-                dispatch(fetchContentTableData({ pageSize: store.pageSize, pageNumber: 1 })).unwrap();
+                console.log("error : ", error)
             }
         }
     };
@@ -315,7 +311,7 @@ const ProcessQueueGrid: React.FC<GridComponentProps> = () => {
                     size="medium"
                     aria-label="Table with selection"
                     aria-rowcount={rows.length}
-                   className="gridTable"
+                    className="gridTable"
                 >
                     <TableHeader>
                         <TableRow aria-rowindex={1}>

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

@@ -167,11 +167,13 @@ const PanelCenter: React.FC<PanelCenterProps> = ({ togglePanel }) => {
     try {
       dispatch(startLoader("1"));
       dispatch(setUpdateComments(comment))
-      await dispatch(saveContentJson({ 'processId': store.activeProcessId, 'contentJson': store.modified_result.extracted_result, 'comments': comment, 'savedComments': store.comments }))
+      const result = await dispatch(saveContentJson({ 'processId': store.activeProcessId, 'contentJson': store.modified_result.extracted_result, 'comments': comment, 'savedComments': store.comments }))
+      if (result?.type === 'SaveContentJSON-Comments/fulfilled') {
+        dispatch(setRefreshGrid(true));
+      }
     } catch (error) {
       console.error('API Error:', error);
     } finally {
-      dispatch(setRefreshGrid(true));
       dispatch(stopLoader("1"));
     }
   }

src/ContentProcessorWeb/src/Services/httpUtility.ts

@@ -3,8 +3,9 @@
 const api: string = process.env.REACT_APP_API_BASE_URL as string; // base API URL
 
 // Define the types for the response
-interface ApiResponse<T = any> {
-  data: T;
+interface FetchResponse<T> {
+  data: T | null;
+  status: number;
 }
 
 interface FetchOptions {
@@ -13,47 +14,81 @@ interface FetchOptions {
   body?: string | FormData | null;
 }
 
+export const handleApiThunk = async <T>(
+  apiCall: Promise<{ data: T | null; status: number }>,
+  rejectWithValue: (reason: any) => any,
+  errorMessage = 'Request failed'
+): Promise<T | any> => {
+  try {
+    const response = await apiCall;
+    console.log("API Response : ", response);
+    if (response.status === 200 || response.status === 202) {
+      return response.data;
+    } else {
+      return rejectWithValue(`${errorMessage}. Status: ${response.status}`);
+    }
+  } catch (error: any) {
+    if (error.status == 415 || error.status == 404)
+      return rejectWithValue(error.data.message || `Unexpected error: ${errorMessage}`);
+    return rejectWithValue(error.message || `Unexpected error: ${errorMessage}`);
+  }
+};
+
+
 // Fetch with JWT Authentication
-const fetchWithAuth = async <T>(url: string, method: string = 'GET', body: any = null): Promise<T | null> => {
-  const token = localStorage.getItem('token'); // Get the token from localStorage
+
+const fetchWithAuth = async <T>(
+  url: string,
+  method: string = 'GET',
+  body: any = null
+): Promise<FetchResponse<T>> => {
+  const token = localStorage.getItem('token');
 
   const headers: HeadersInit = {
-    'Authorization': `Bearer ${token}`, // Add the token to the Authorization header
-    'Content-Type': 'application/json',
+    'Authorization': `Bearer ${token}`,
     'Accept': 'application/json',
     'Cache-Control': 'no-cache',
   };
 
-  // If body is FormData, do not set Content-Type header
-  if (body instanceof FormData) {
-    delete headers['Content-Type'];
-  } else {
+  if (!(body instanceof FormData)) {
     headers['Content-Type'] = 'application/json';
     body = body ? JSON.stringify(body) : null;
   }
 
-  const options: FetchOptions = {
+  const options: RequestInit = {
     method,
     headers,
   };
 
   if (body) {
-    options.body = body; // Add the body only if it exists (for POST, PUT)
+    options.body = body;
   }
 
   try {
     const response = await fetch(`${api}${url}`, options);
 
+    const status = response.status;
+    const isJson = response.headers.get('content-type')?.includes('application/json');
+
+    const data = isJson ? await response.json() : null;
+
     if (!response.ok) {
-      const errorText = await response.text();
-      throw new Error(errorText || 'Something went wrong');
+      throw { data, status };
     }
 
-    const isJson = response.headers.get('content-type')?.includes('application/json');
-    return isJson ? (await response.json()) as T : null;
+    return { data, status };
   } catch (error: any) {
-    //console.error('API Error:', error.message);
-    throw error;
+    if (error?.status !== undefined) {
+      throw error;
+    }
+    const isNetworkError = error instanceof TypeError && error.message === 'Failed to fetch';
+    const isOffline = !navigator.onLine; //isNetworkError ||
+
+    const message = isOffline
+      ? 'No internet connection. Please check your network and try again.'
+      : 'Unable to connect to the server. Please try again later.';
+
+    throw { data: null, status: 0, message };
   }
 };
 
@@ -133,13 +168,13 @@ const fetchWithoutAuth = async <T>(url: string, method: string = 'POST', body: a
 
 // Authenticated requests (with token) and login (without token)
 export const httpUtility = {
-  get: <T>(url: string): Promise<T | null> => fetchWithAuth<T>(url, 'GET'),
-  post: <T>(url: string, body: any): Promise<T | null> => fetchWithAuth<T>(url, 'POST', body),
-  put: <T>(url: string, body: any): Promise<T | null> => fetchWithAuth<T>(url, 'PUT', body),
-  delete: <T>(url: string): Promise<T | null> => fetchWithAuth<T>(url, 'DELETE'),
-  upload: <T>(url: string, formData: FormData): Promise<T | null> => fetchWithAuth<T>(url, 'POST', formData),
+  get: <T>(url: string): Promise<{ data: T | null; status: number }> => fetchWithAuth<T>(url, 'GET'),
+  post: <T>(url: string, body: any): Promise<{ data: T | null; status: number }> => fetchWithAuth<T>(url, 'POST', body),
+  put: <T>(url: string, body: any): Promise<{ data: T | null; status: number }> => fetchWithAuth<T>(url, 'PUT', body),
+  delete: <T>(url: string): Promise<{ data: T | null; status: number }> => fetchWithAuth<T>(url, 'DELETE'),
+  upload: <T>(url: string, formData: FormData): Promise<{ data: T | null; status: number }> => fetchWithAuth<T>(url, 'POST', formData),
   login: <T>(url: string, body: any): Promise<T | null> => fetchWithoutAuth<T>(url, 'POST', body), // For login without auth
-  headers : <T>(url: string): Promise<any> => fetchHeadersWithAuth<T>(url, 'GET'),  
+  headers: <T>(url: string): Promise<any> => fetchHeadersWithAuth<T>(url, 'GET'),
 };
 
 export default httpUtility;