CP - US(#16438) story implementation and bug fix(#16072) and code cleanup

Author: Bangarraju-Microsoft

src/ContentProcessorWeb/.dockerignore

@@ -0,0 +1,9 @@
+# Include any files or directories that you don't want to be copied to your
+# container here (e.g., local build artifacts, temporary files, etc.).
+#
+# For more help, visit the .dockerignore file reference guide at
+# https://docs.docker.com/engine/reference/builder/#dockerignore-file
+
+
+**/node_modules
+.env

src/ContentProcessorWeb/src/App.tsx

@@ -2,10 +2,9 @@ import * as React from "react";
 import { useEffect } from "react";
 import Header from "./Components/Header/Header.tsx"; // Import Header
 import "./Styles/App.css";
-import "./Components/Panels/Panels.css";
 import "./Components/Content/Content.css";
 import HomePage from "./Pages/HomePage.tsx";
-import DefaultPage from "./Pages/DefaultPage/DefaultPage.tsx";
+import DefaultPage from "./Pages/DefaultPage";
 //import AuxiliaryPage from "./Pages/AuxiliaryPage/AuxiliaryPage.tsx";
 import NotFound from "./Pages/NotFound.tsx";
 import { ToastContainer } from "react-toastify";
@@ -18,7 +17,7 @@ import {
 } from "react-router-dom";
 import Spinner from "./Components/Spinner/Spinner.tsx";
 
-import { useDispatch, useSelector,shallowEqual  } from 'react-redux';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { RootState } from './store';
 
 
@@ -31,7 +30,7 @@ const App: React.FC<AppProps> = ({ isDarkMode, toggleTheme }) => {
 
   const store = useSelector((state: RootState) => ({
     loader: state.loader.loadingStack
-  }),shallowEqual );
+  }), shallowEqual);
 
   // Apply or remove the "dark-mode" class on the body element based on isDarkMode
   useEffect(() => {

src/ContentProcessorWeb/src/Components/DialogComponent/DialogComponent.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import {
+  Dialog,
+  DialogSurface,
+  DialogTitle,
+  DialogBody,
+  DialogContent,
+  DialogActions,
+  Button,
+  useId,
+} from "@fluentui/react-components";
+
+interface FooterButton {
+  text: string;
+  appearance: "primary" | "secondary";
+  onClick: () => void;
+}
+
+interface ConfirmationProps {
+  title: string;
+  content: string;
+  isDialogOpen: boolean; // Controlled state for dialog visibility
+  onDialogClose: () => void; // Function to close the dialog
+  footerButtons: FooterButton[]; // Array of footer buttons
+}
+
+export const Confirmation: React.FC<ConfirmationProps> = ({
+  title,
+  content,
+  isDialogOpen,
+  onDialogClose,
+  footerButtons,
+}) => {
+  const dialogId = useId("dialog-");
+
+  return (
+    <Dialog open={isDialogOpen} onOpenChange={onDialogClose}>
+      <DialogSurface
+        aria-labelledby={`${dialogId}-title`}
+        aria-describedby={`${dialogId}-content`}
+      >
+        <DialogBody>
+          <DialogTitle id={`${dialogId}-title`}>{title}</DialogTitle>
+          <DialogContent id={`${dialogId}-content`}>{content}</DialogContent>
+          <DialogActions>
+            {/* Render the footer buttons dynamically */}
+            {footerButtons.map((button, index) => (
+              <Button
+                key={index}
+                appearance={button.appearance}
+                onClick={() => {
+                  button.onClick();
+                  onDialogClose(); // Close the dialog after an action
+                }}
+              >
+                {button.text}
+              </Button>
+            ))}
+          </DialogActions>
+        </DialogBody>
+      </DialogSurface>
+    </Dialog>
+  );
+};

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

@@ -43,5 +43,13 @@
 
 }
 
+.noDataDocContainer{
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    border: 1px solid rgb(219, 219, 219);
+    background: rgb(246, 246, 246);
+}
+
 
 

src/ContentProcessorWeb/src/Components/DocumentViewer/DocumentViewer.tsx

@@ -28,7 +28,7 @@ const DocumentViewer = ({ className, metadata, urlWithSasToken, iframeKey }: IIF
 
     const getContentComponent = () => {
         if (!metadata || !urlWithSasToken) {
-            return <div style={{ textAlign: 'center' }}>{t("components.document.none", "No document available")}</div>;
+            return <div className={"noDataDocContainer"}><p>{t("components.document.none", "No document available")}</p></div>;
         }
 
         switch (metadata.mimeType) {