UI - Changes (expand/collapse panels)

Author: Bangarraju-Microsoft

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

@@ -15,6 +15,14 @@ import "./UploadFilesModal.styles.scss";
 
 import { CheckmarkCircle16Filled, DismissCircle16Filled } from "@fluentui/react-icons";
 
+import {
+  MessageBar,
+  MessageBarTitle,
+  MessageBarBody,
+  MessageBarIntent,
+  Link,
+} from "@fluentui/react-components";
+
 const useStyles = makeStyles({
   container: {
     margin: "10px 0px",
@@ -29,6 +37,15 @@ const useStyles = makeStyles({
   }
 });
 
+const useClasses = makeStyles({
+  messageContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+    marginBottom: "10px"
+  },
+});
+
 
 interface UploadFilesModalProps {
   open: boolean;
@@ -48,6 +65,7 @@ interface FileErrors {
 const UploadFilesModal: React.FC<UploadFilesModalProps> = ({ open, onClose }) => {
 
   const styles = useStyles();
+  const classes = useClasses();
 
   const [files, setFiles] = useState<File[]>([]);
   const [startUpload, setStartUpload] = useState(false);
@@ -61,6 +79,7 @@ const UploadFilesModal: React.FC<UploadFilesModalProps> = ({ open, onClose }) =>
   const [uploadCompleted, setUploadCompleted] = useState(false);
 
 
+  const intents: MessageBarIntent[] = ["warning"];
   const store = useSelector((state: RootState) => ({
     schemaSelectedOption: state.leftPanel.schemaSelectedOption,
     page_size: state.leftPanel.gridData.page_size,
@@ -202,6 +221,16 @@ const UploadFilesModal: React.FC<UploadFilesModalProps> = ({ open, onClose }) =>
         <DialogTitle>Import Content</DialogTitle>
         <DialogContent>
           <div className="dialogBody">
+            <div className={classes.messageContainer}>
+              {intents.map((intent) => (
+                <MessageBar key={intent} intent={intent}>
+                  <MessageBarBody>
+                    <MessageBarTitle>Selected Schema  : {store.schemaSelectedOption.optionText} </MessageBarTitle>
+                    <br />Please upload files specific to "{store.schemaSelectedOption.optionText}"
+                  </MessageBarBody>
+                </MessageBar>
+              ))}
+            </div>
             {/* Drag & Drop Area with Centered Button & Message */}
             <div
               className={`drop-area ${dragging ? "dragging" : ""}`}

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

@@ -84,7 +84,7 @@ const ProcessSteps = () => {
                 restrictEdit={true}
                 restrictDelete={true}
                 restrictAdd={true}
-                rootName=""
+                rootName={step.step_name.toLowerCase()}
                 collapseAnimationTime={300}
                 theme={[{
                   styles: {

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

@@ -12,8 +12,11 @@ import { fetchContentJsonData, setActiveProcessId } from '../../store/slices/cen
 import ProcessSteps from './Components/ProcessSteps/ProcessSteps';
 import { setRefreshGrid } from "../../store/slices/leftPanelSlice.ts";
 
+import { bundleIcon, ChevronDoubleLeft20Filled, ChevronDoubleLeft20Regular } from "@fluentui/react-icons";
+const ChevronDoubleLeft = bundleIcon(ChevronDoubleLeft20Regular, ChevronDoubleLeft20Filled);
+
 interface PanelCenterProps {
-  
+  togglePanel: (panel: string) => void;
 }
 
 const useStyles = makeStyles({
@@ -52,7 +55,7 @@ const useStyles = makeStyles({
     overflow: 'auto',
     background: '#f6f6f6',
     padding: '10px 5px',
-    boxSizing:'border-box'
+    boxSizing: 'border-box'
   },
 
   processTabItemCotnent: {
@@ -61,7 +64,7 @@ const useStyles = makeStyles({
     overflow: 'auto',
     background: '#f6f6f6',
     padding: '5px',
-    boxSizing:'border-box'
+    boxSizing: 'border-box'
   },
   fieldLabel: {
     fontWeight: 'bold',
@@ -86,7 +89,7 @@ const useStyles = makeStyles({
   }
 })
 
-const PanelCenter: React.FC<PanelCenterProps> = () => {
+const PanelCenter: React.FC<PanelCenterProps> = ({ togglePanel }) => {
 
   const styles = useStyles();
   const dispatch = useDispatch<AppDispatch>();
@@ -182,8 +185,10 @@ const PanelCenter: React.FC<PanelCenterProps> = () => {
   }
 
   return (
-    <div className={styles.panelCenter}>
-      <PanelToolbar icon={null} header="Output Review"></PanelToolbar>
+    <div className={`pc ${styles.panelCenter}`}>
+      <PanelToolbar icon={null} header="Output Review">
+        <Button icon={<ChevronDoubleLeft />} title="Collapse Panel" onClick={() => togglePanel('Center')} />
+      </PanelToolbar>
       <div className={styles.panelCenterTopSection} >
         <div className={styles.tabContainer}>
           <TabList selectedValue={selectedTab} onTabSelect={onTabSelect} className="custom-test" >

src/ContentProcessorWeb/src/Pages/DefaultPage/PanelLeft.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Button } from "@fluentui/react-components";
-import { ArrowClockwiseRegular, ArrowUploadRegular } from "@fluentui/react-icons";
+import { ArrowClockwiseRegular, ArrowUploadRegular, ChevronDoubleLeft20Regular, ChevronDoubleLeft20Filled, bundleIcon } from "@fluentui/react-icons";
 import PanelToolbar from "../../Hooks/usePanelHooks.tsx";
 import ProcessQueueGrid from './Components/ProcessQueueGrid/ProcessQueueGrid.tsx';
 import SchemaDropdown from './Components/SchemaDropdown/SchemaDropdown';
@@ -12,10 +12,13 @@ import { AppDispatch, RootState } from '../../store/index.ts';
 import { startLoader, stopLoader } from "../../store/slices/loaderSlice.ts";
 import { toast } from "react-toastify";
 
+const ChevronDoubleLeft = bundleIcon(ChevronDoubleLeft20Regular, ChevronDoubleLeft20Filled);
+
 interface PanelLeftProps {
+  togglePanel: (panel: string) => void;
 }
 
-const PanelLeft: React.FC<PanelLeftProps> = () => {
+const PanelLeft: React.FC<PanelLeftProps> = ({ togglePanel }) => {
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const dispatch = useDispatch<AppDispatch>();
@@ -24,7 +27,7 @@ const PanelLeft: React.FC<PanelLeftProps> = () => {
     schemaSelectedOption: state.leftPanel.schemaSelectedOption,
     page_size: state.leftPanel.gridData.page_size,
     pageSize: state.leftPanel.pageSize,
-    isGridRefresh: state.leftPanel.isGridRefresh
+    isGridRefresh: state.leftPanel.isGridRefresh,
   }), shallowEqual);
 
   useEffect(() => {
@@ -68,14 +71,17 @@ const PanelLeft: React.FC<PanelLeftProps> = () => {
     const { schemaSelectedOption } = store;
     if (Object.keys(schemaSelectedOption).length === 0) {
       toast.error("Please Select Schema");
-      return; 
+      return;
     }
     setIsModalOpen(true);
   };
 
   return (
     <div className="panelLeft">
-      <PanelToolbar icon={null} header="Processing Queue"></PanelToolbar>
+      <PanelToolbar icon={null} header="Processing Queue">
+        <Button icon={<ChevronDoubleLeft />} title="Collapse Panel" onClick={() => togglePanel('Left')}>
+        </Button>
+      </PanelToolbar>
       <div className="topContainer">
         <SchemaDropdown />
         <Button appearance="primary" icon={<ArrowUploadRegular />} onClick={handleImportContent}>

src/ContentProcessorWeb/src/Pages/DefaultPage/PanelRight.tsx

@@ -4,11 +4,15 @@ import DocumentViewer from '../../Components/DocumentViewer/DocumentViewer.tsx'
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { AppDispatch, RootState } from '../../store';
 import { fetchContentFileData } from '../../store/slices/rightPanelSlice'
-
+import { updatePanelCollapse } from "../../store/slices/defaultPageSlice.ts";
+import { bundleIcon, ChevronDoubleLeft20Filled, ChevronDoubleLeft20Regular } from "@fluentui/react-icons";
+import { Button } from "@fluentui/react-components";
+const ChevronDoubleLeft = bundleIcon(ChevronDoubleLeft20Regular, ChevronDoubleLeft20Filled);
 interface PanelRightProps {
+  togglePanel: (panel: string) => void;
 }
 
-const PanelRight: React.FC<PanelRightProps> = () => {
+const PanelRight: React.FC<PanelRightProps> = ({ togglePanel }) => {
 
   const dispatch = useDispatch<AppDispatch>();
   const [fileData, setFileData] = useState({ 'urlWithSasToken': '', 'mimeType': '' })
@@ -41,10 +45,11 @@ const PanelRight: React.FC<PanelRightProps> = () => {
     }
   }, [store.processId, store.fileResponse])
 
-
   return (
-    <div className="panelRight">
-      <PanelToolbar icon={null} header="Source Document"></PanelToolbar>
+    <div className="pr panelRight">
+      <PanelToolbar icon={null} header="Source Document">
+        <Button icon={<ChevronDoubleLeft />} title="Collapse Panel" onClick={() => togglePanel('Right')} />
+      </PanelToolbar>
       <div className="panelRightContent">
         {
           store.rLoader ? <div className={"right-loader"}><p>Loading...</p></div>

src/ContentProcessorWeb/src/Pages/DefaultPage/Panels.styles.scss

@@ -4,7 +4,7 @@
 
 /* Panel container styling */
 
-.panelLeft {
+.panelLeftLayout {
   /* background-color: var(--colorNeutralBackground4); */
   position: relative;
   display: flex;
@@ -18,6 +18,23 @@
   flex: 37%;
   min-width: 300px;
 
+  .collapseButtonDiv {
+    display: none;
+  }
+
+
+  .panelLeft {
+    position: relative;
+    display: flex;
+    height: 100%;
+    box-sizing: border-box;
+    flex-direction: column;
+    overflow-y: auto;
+    background-color: white;
+    border: 1px solid #D6D6D6;
+    border-width: 1px 1px 0px 0px;
+  }
+
   .leftcontent {
     display: flex;
     flex-direction: column;
@@ -31,14 +48,31 @@
     overflow-x: hidden;
     overflow-y: auto;
   }
-  
+
   .topContainer {
     display: flex;
     flex-wrap: wrap;
     align-items: end;
     gap: 10px;
     padding: 0px 16px 16px 16px;
   }
+
+
+}
+
+.panelLeftLayout.collapse {
+  flex: none;
+  width: auto;
+  min-width: 20px;
+  transition: width 0.3s ease;
+
+  .collapseButtonDiv {
+    display: block !important;
+  }
+
+  .panelLeft {
+    display: none !important;
+  }
 }
 
 .panelCenter {
@@ -61,18 +95,39 @@
     padding: 5px 12px 12px 10px !important
   }
 
-  .saveBtnDiv { 
+  .saveBtnDiv {
     display: flex;
-    justify-content: flex-end; 
+    justify-content: flex-end;
     align-items: center;
 
-    .msgp { 
+    .msgp {
       margin: auto;
-       color: red; 
+      color: red;
     }
   }
+
+  .collapseButtonDiv {
+    display: none;
+  }
+}
+
+.panelCenter.collapse {
+  flex: none;
+  width: auto;
+  min-width: 20px;
+  border: 1px solid #d6d6d6;
+  border-width: 1px 1px 0 0;
+
+  .collapseButtonDiv {
+    display: block !important;
+  }
+
+  .pc {
+    display: none !important;
+  }
 }
 
+
 .panelRight {
   /* background-color: var(--colorNeutralBackground4); */
   position: relative;
@@ -113,7 +168,24 @@
     height: 100%;
   }
 
- 
+  .collapseButtonDiv {
+    display: none;
+  }
+
+}
+
+.panelRight.collapse {
+  flex: none;
+  width: auto;
+  min-width: 20px;
+
+  .collapseButtonDiv {
+    display: block !important;
+  }
+
+  .pr {
+    display: none !important;
+  }
 }
 
 .panelToolbar {
@@ -130,4 +202,20 @@
 
 .fullHeight {
   height: 100vh;
+}
+
+.rotate-button {
+  writing-mode: vertical-rl;
+  /* Makes text go top to bottom */
+  text-orientation: mixed;
+  /* Keeps letters upright */
+  height: auto;
+  /* Automatically adjusts height */
+  width: fit-content;
+  /* Adjust width based on content */
+  background-color: #f0f0f0;
+  cursor: pointer;
+  min-width: 10px !important;
+  height: 170px;
+  padding: 10px !important;
 }