UI - Bug and Observations fixed

Author: Bangarraju-Microsoft

src/ContentProcessorWeb/src/Components/DocumentViewer/DocumentViewer.styles.scss

@@ -48,7 +48,7 @@
     justify-content: center;
     height: 100%;
     border: 1px solid var(--colorNeutralBackground2Pressed);
-    background: var(--colorNeutralBackground4)
+    background: var(--colorNeutralBackground1Hover)
 }
 
 

src/ContentProcessorWeb/src/Components/JSONEditor/JSONEditor.styles.scss

@@ -14,4 +14,20 @@ textarea {
     justify-content: center;
     align-items: center;
     height: 100%;
+}
+
+.JSONEditor-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .JSONEditor-searchDiv {
+        flex: 0 0 auto;
+        padding: 5px 10px;
+    }
+
+    .JSONEditor-contentDiv {
+        flex: 1 1 auto;
+        overflow-y: auto;
+    }
 }

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

@@ -17,6 +17,7 @@ const JSONEditor: React.FC<JSONEditorProps> = () => {
   const [isFocused, setIsFocused] = useState(false);
   const dispatch = useDispatch<AppDispatch>();
   const [searchText, setSearchText] = useState('');
+  const searchBoxRef = React.useRef<HTMLDivElement | null>(null);
 
   const store = useSelector((state: RootState) => ({
     processId: state.leftPanel.processId,
@@ -32,9 +33,7 @@ const JSONEditor: React.FC<JSONEditorProps> = () => {
       if (Object.keys(store.contentData).length > 0) {
         const formattedJson = store.contentData.result;
         const data = {
-          extracted_result: {
-            ...formattedJson
-          }
+          ...formattedJson
         }
         setJsonData(data);
       } else {
@@ -49,58 +48,71 @@ const JSONEditor: React.FC<JSONEditorProps> = () => {
   }
 
   const handleFocus = () => setIsFocused(true);
-  const handleBlur = () => setIsFocused(false);
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    const newFocusTarget = e.relatedTarget as HTMLElement | null;
+    if (
+      searchBoxRef.current &&
+      newFocusTarget &&
+      searchBoxRef.current.contains(newFocusTarget)
+    ) {
+      return;
+    }
+
+    setIsFocused(false);
+  };
 
   return (
     <>{
       store.cLoader ? <div className={"JSONEditorLoader"}><p>Loading...</p></div> :
         Object.keys(jsonData).length == 0 ? <p style={{ textAlign: 'center' }}>No data available</p> :
-          <>
+          <div className="JSONEditor-container">
             {store.isJSONEditorSearchEnabled &&
-              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                <SearchBox
-                  size="small"
-                  placeholder="Search"
-                  onFocus={handleFocus}
-                  onBlur={handleBlur}
-                  value={searchText}
-
-                  onChange={(e, data) => { setSearchText(data.value) }}
-                  style={{
-                    width: isFocused ? '200px' : '100px',
-                    transition: 'width 0.3s ease',
-                  }}
-                />
-              </div>}
-            <JsonEditor
-              data={jsonData}
-              className='JSONEditorClass'
-              rootName=""
-              searchText={searchText}
-              searchFilter={"all"}
-              searchDebounceTime={300}
-              theme={[{
-                styles: {
-                  container: {
-                    width: '89%',
-                    minWidth: '100%',
-                    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif',
-                    fontSize: '14px',
-                    paddingTop: '0px'
-                  },
-                }
-              }]}
-              onUpdate={({ newData, currentData, newValue, currentValue, name, path }) => {
-                onUpdateHandle(newData)
-              }}
-              //setData={ setJsonData } // optional
-              restrictEdit={({ key, path, level, index, value, size, parentData, fullData, collapsed }) => {
-                return !path.includes('extracted_result')
-              }
-              }
-              restrictDelete={true}
-            />
-          </>
+              <div className="JSONEditor-searchDiv">
+                <div style={{ display: 'flex', justifyContent: 'flex-end' }} ref={searchBoxRef}>
+                  <SearchBox
+                    size="small"
+                    placeholder="Search"
+                    onFocus={handleFocus}
+                    onBlur={handleBlur}
+                    value={searchText}
+                    onChange={(e, data) => { setIsFocused(true); setSearchText(data.value) }}
+                    style={{
+                      width: isFocused ? '200px' : '100px',
+                      transition: 'width 0.3s ease',
+                    }}
+                  />
+                </div></div>}
+            <div className="JSONEditor-contentDiv">
+              <JsonEditor
+                data={jsonData}
+                className='JSONEditorClass'
+                rootName="extracted_result"
+                searchText={searchText}
+                searchFilter={"all"}
+                searchDebounceTime={300}
+                theme={[{
+                  styles: {
+                    container: {
+                      width: '89%',
+                      minWidth: '100%',
+                      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif',
+                      fontSize: '14px',
+                      paddingTop: '0px'
+                    },
+                  }
+                }]}
+                onUpdate={({ newData, currentData, newValue, currentValue, name, path }) => {
+                  onUpdateHandle(newData)
+                }}
+                //setData={ setJsonData } // optional
+                // restrictEdit={({ key, path, level, index, value, size, parentData, fullData, collapsed }) => {
+                //   return !path.includes('extracted_result')
+                // }
+                // }
+                restrictDelete={true}
+              />
+            </div>
+          </div>
     }</>
   )
 }

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

@@ -134,6 +134,7 @@ const ProcessQueueGrid: React.FC<GridComponentProps> = () => {
                 setItems(items);
             } else {
                 setItems([])
+                dispatch(setSelectedGridRow({ processId: '', item: {}}));
             }
         }
 
@@ -327,6 +328,7 @@ const ProcessQueueGrid: React.FC<GridComponentProps> = () => {
                     </TableHeader>
                     <TableBody className="gridTableBody">
                         <div className="GridList">
+                            {rows.length > 0? 
                             <AutoSizer>
                                 {({ height, width }) => (
                                     <List
@@ -339,7 +341,9 @@ const ProcessQueueGrid: React.FC<GridComponentProps> = () => {
                                         {RenderRow}
                                     </List>
                                 )}
-                            </AutoSizer>
+                            </AutoSizer> : 
+                            <p style={{ textAlign: 'center' }}>No data available</p>
+                            }
                         </div>
                     </TableBody>
                 </Table>

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

@@ -44,7 +44,8 @@ const ComboboxComponent = (props: Partial<ComboboxProps>) => {
   }, [store.schemaData]);
 
   const handleChange: (typeof props)["onOptionSelect"] = (ev, data) => {
-    dispatch(setSchemaSelectedOption(data));
+    const selectedItem = data.optionValue !=undefined ? data : {}
+    dispatch(setSchemaSelectedOption(selectedItem));
   };
 
   return (

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

@@ -53,7 +53,7 @@ const useStyles = makeStyles({
     border: '1px solid #DBDBDB',
     overflow: 'auto',
     background: '#f6f6f6',
-    padding: '10px 5px',
+    padding: '5px 5px',
     boxSizing: 'border-box'
   },
 
@@ -166,7 +166,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.extracted_result, 'comments': comment, 'savedComments': store.comments }))
+      const result = await dispatch(saveContentJson({ 'processId': store.activeProcessId, 'contentJson': store.modified_result, 'comments': comment, 'savedComments': store.comments }))
       if (result?.type === 'SaveContentJSON-Comments/fulfilled') {
         dispatch(setRefreshGrid(true));
       }
@@ -178,6 +178,7 @@ const PanelCenter: React.FC<PanelCenterProps> = ({ togglePanel }) => {
   }
 
   const IsButtonSaveDisalbedCheck = () => {
+    if(!store.activeProcessId) return true;
     if (status.includes(store.selectedItem.status)) return true;
     if (Object.keys(store.modified_result).length > 0) return false;
     if (comment.trim() !== store.comments && comment.trim() !== '') return false;

src/ContentProcessorWeb/src/store/slices/centerPanelSlice.ts

@@ -149,7 +149,7 @@ const centerPanelSlice = createSlice({
             .addCase(fetchContentJsonData.rejected, (state, action: any) => {
                 state.cError = action.error.message || 'An error occurred';
                 state.cLoader = false;
-                state.contentData = [];
+                state.contentData = {};
                 state.comments = "";
                 toast.error(getDisplayMessage(action.payload))
             });