Merge pull request #27 from microsoft/psl-raju-dev

fix: UI - feedback issues and code clean up

Author: Prajwal-Microsoft

src/ContentProcessorWeb/src/App.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import { useEffect } from "react";
 import Header from "./Components/Header/Header.tsx"; // Import Header
 import "./Styles/App.css";
-import "./Components/Content/Content.css";
 import HomePage from "./Pages/HomePage.tsx";
 import DefaultPage from "./Pages/DefaultPage";
 //import AuxiliaryPage from "./Pages/AuxiliaryPage/AuxiliaryPage.tsx";

src/ContentProcessorWeb/src/Components/Content/Content.css

@@ -10,19 +10,8 @@ import {
   useId,
 } from "@fluentui/react-components";
 
-interface FooterButton {
-  text: string;
-  appearance: "primary" | "secondary";
-  onClick: () => void;
-}
+import { ConfirmationProps } from './DialogComponentTypes'
 
-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,

src/ContentProcessorWeb/src/Components/Content/Content.tsx

@@ -0,0 +1,16 @@
+
+import { ReactNode } from 'react';
+
+interface FooterButton {
+  text: string;
+  appearance: "primary" | "secondary";
+  onClick: () => void;
+}
+
+export interface ConfirmationProps {
+  title: string;
+  content: string | ReactNode;
+  isDialogOpen: boolean; // Controlled state for dialog visibility
+  onDialogClose: () => void; // Function to close the dialog
+  footerButtons: FooterButton[]; // Array of footer buttons
+}

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

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Document } from "./DocumentViewer.types";
 import { TIFFViewer } from 'react-tiff';
 import './DocumentViewer.styles.scss';
 
@@ -107,7 +106,7 @@ const DocumentViewer = ({ className, metadata, urlWithSasToken, iframeKey }: IIF
             <div className={"invalidImagePopup"}>
                 <span className="imgEH">We can't open this file</span>
                 <p className="imgCtn">Something went wrong.</p>
-                 </div>
+            </div>
             : getContentComponent()
         }
     </div>

src/ContentProcessorWeb/src/Components/DialogComponent/DialogComponentTypes.ts

@@ -26,9 +26,12 @@ import {
 } from "../../Imports/bundleIcons.tsx";
 import MainLogo from "../../Imports/MainLogo.svg";
 import "./Header.css";
-import { DocumentBulletListCubeRegular, InfoRegular} from "@fluentui/react-icons"
+import { DocumentBulletListCubeRegular, InfoRegular, DocumentData16Regular } from "@fluentui/react-icons"
 
 import useAuth from "../../msal-auth/useAuth.ts";
+import { useSelector, shallowEqual } from 'react-redux';
+import {  RootState } from '../../store/index.ts';
+import useSwaggerPreview from "../../Hooks/useSwaggerPreview.ts";
 
 interface HeaderPageProps {
   toggleTheme: () => void;
@@ -41,13 +44,23 @@ const tabConfigs = [
     value: "default", // Route path defined in App.tsx
     label: "Content", // Visible label on UI
   },
+
+  {
+    icon: <DocumentBulletListCubeRegular />, // Import bundle icon
+    value: "api", // Route path defined in App.tsx
+    label: "API Documentation", // Visible label on UI
+  },
   // Add more
 ];
 
 const HeaderPage: React.FC<HeaderPageProps> = ({ toggleTheme, isDarkMode }) => {
   const { shortcutLabel } = useHeaderHooks({ toggleTheme, isDarkMode });
   const { user, logout, getToken } = useAuth();
 
+  const { openSwaggerUI } = useSwaggerPreview();
+  const store = useSelector((state: RootState) => ({
+    swaggerJSON: state.leftPanel.swaggerJSON,
+  }), shallowEqual);
 
   const navigate = useNavigate();
   const location = useLocation();
@@ -69,12 +82,20 @@ const HeaderPage: React.FC<HeaderPageProps> = ({ toggleTheme, isDarkMode }) => {
     _: React.SyntheticEvent,
     data: { value: TabValue }
   ) => {
-    const newRoute = Object.keys(tabRoutes).find(
-      (key) => tabRoutes[key] === data.value
-    );
-    if (newRoute) {
-      navigate(newRoute);
+    if (data.value == 'api') {
+      _.preventDefault(); 
+      const apiUrl: string = process.env.REACT_APP_API_BASE_URL as string; 
+      const token = localStorage.getItem('token') ?? undefined;
+      openSwaggerUI(store.swaggerJSON, apiUrl, token)
+    } else {
+      const newRoute = Object.keys(tabRoutes).find(
+        (key) => tabRoutes[key] === data.value
+      );
+      if (newRoute) {
+        navigate(newRoute);
+      }
     }
+
   };
 
 
@@ -100,8 +121,8 @@ const HeaderPage: React.FC<HeaderPageProps> = ({ toggleTheme, isDarkMode }) => {
         </TabList>
       </div>
       <div className="headerTag">
-      <InfoRegular style={{ marginRight: "4px" }}/> 
-      <span>AI-generated content may be incorrect</span>
+        <InfoRegular style={{ marginRight: "4px" }} />
+        <span>AI-generated content may be incorrect</span>
       </div>
 
       {/* Tools Section */}