From c55c1315624d679a52ee91899de867f8cda6df02 Mon Sep 17 00:00:00 2001 From: jedheaj314 <51018779+jedheaj314@users.noreply.github.com> Date: Mon, 27 Jan 2025 12:06:29 +0000 Subject: [PATCH] Add navigation and Agents and Settings Pages (#36) * Bump hashicorp/random from 3.4.3 to 3.6.3 in /infra (#5) Bumps [hashicorp/random](https://github.com/hashicorp/terraform-provider-random) from 3.4.3 to 3.6.3. - [Release notes](https://github.com/hashicorp/terraform-provider-random/releases) - [Changelog](https://github.com/hashicorp/terraform-provider-random/blob/main/CHANGELOG.md) - [Commits](https://github.com/hashicorp/terraform-provider-random/compare/v3.4.3...v3.6.3) --- updated-dependencies: - dependency-name: hashicorp/random dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump hashicorp/azuread from 3.0.2 to 3.1.0 in /infra (#6) Bumps [hashicorp/azuread](https://github.com/hashicorp/terraform-provider-azuread) from 3.0.2 to 3.1.0. - [Release notes](https://github.com/hashicorp/terraform-provider-azuread/releases) - [Changelog](https://github.com/hashicorp/terraform-provider-azuread/blob/main/CHANGELOG.md) - [Commits](https://github.com/hashicorp/terraform-provider-azuread/compare/v3.0.2...v3.1.0) --- updated-dependencies: - dependency-name: hashicorp/azuread dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump hashicorp/azurerm from 4.14.0 to 4.16.0 in /infra (#15) Bumps [hashicorp/azurerm](https://github.com/hashicorp/terraform-provider-azurerm) from 4.14.0 to 4.16.0. - [Release notes](https://github.com/hashicorp/terraform-provider-azurerm/releases) - [Changelog](https://github.com/hashicorp/terraform-provider-azurerm/blob/main/CHANGELOG.md) - [Commits](https://github.com/hashicorp/terraform-provider-azurerm/compare/v4.14.0...v4.16.0) --- updated-dependencies: - dependency-name: hashicorp/azurerm dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump azure/azapi from 2.1.0 to 2.2.0 in /infra (#18) Bumps [azure/azapi](https://github.com/Azure/terraform-provider-azapi) from 2.1.0 to 2.2.0. - [Release notes](https://github.com/Azure/terraform-provider-azapi/releases) - [Changelog](https://github.com/Azure/terraform-provider-azapi/blob/main/CHANGELOG.md) - [Commits](https://github.com/Azure/terraform-provider-azapi/compare/v2.1.0...v2.2.0) --- updated-dependencies: - dependency-name: azure/azapi dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump eslint from 9.17.0 to 9.18.0 in /app/ui (#17) Bumps [eslint](https://github.com/eslint/eslint) from 9.17.0 to 9.18.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v9.17.0...v9.18.0) --- updated-dependencies: - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump fastapi-azure-auth from 5.0.0 to 5.0.1 in /app/api (#8) Bumps [fastapi-azure-auth](https://github.com/intility/fastapi-azure-auth) from 5.0.0 to 5.0.1. - [Release notes](https://github.com/intility/fastapi-azure-auth/releases) - [Commits](https://github.com/intility/fastapi-azure-auth/compare/5.0.0...5.0.1) --- updated-dependencies: - dependency-name: fastapi-azure-auth dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump uvicorn[standard] from 0.32.0 to 0.34.0 in /app/api (#9) Bumps [uvicorn[standard]](https://github.com/encode/uvicorn) from 0.32.0 to 0.34.0. - [Release notes](https://github.com/encode/uvicorn/releases) - [Changelog](https://github.com/encode/uvicorn/blob/master/docs/release-notes.md) - [Commits](https://github.com/encode/uvicorn/compare/0.32.0...0.34.0) --- updated-dependencies: - dependency-name: uvicorn[standard] dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump azure-cosmos from 4.7.0 to 4.9.0 in /app/api (#12) Bumps [azure-cosmos](https://github.com/Azure/azure-sdk-for-python) from 4.7.0 to 4.9.0. - [Release notes](https://github.com/Azure/azure-sdk-for-python/releases) - [Changelog](https://github.com/Azure/azure-sdk-for-python/blob/main/doc/esrp_release.md) - [Commits](https://github.com/Azure/azure-sdk-for-python/compare/azure-cosmos_4.7.0...azure-cosmos_4.9.0) --- updated-dependencies: - dependency-name: azure-cosmos dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump opencensus-ext-azure from 1.1.13 to 1.1.14 in /app/api (#7) Bumps [opencensus-ext-azure](https://github.com/census-instrumentation/opencensus-python) from 1.1.13 to 1.1.14. - [Release notes](https://github.com/census-instrumentation/opencensus-python/releases) - [Changelog](https://github.com/census-instrumentation/opencensus-python/blob/master/CHANGELOG.md) - [Commits](https://github.com/census-instrumentation/opencensus-python/commits) --- updated-dependencies: - dependency-name: opencensus-ext-azure dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump azure-identity from 1.17.1 to 1.19.0 in /app/api (#10) Bumps [azure-identity](https://github.com/Azure/azure-sdk-for-python) from 1.17.1 to 1.19.0. - [Release notes](https://github.com/Azure/azure-sdk-for-python/releases) - [Changelog](https://github.com/Azure/azure-sdk-for-python/blob/main/doc/esrp_release.md) - [Commits](https://github.com/Azure/azure-sdk-for-python/compare/azure-identity_1.17.1...azure-identity_1.19.0) --- updated-dependencies: - dependency-name: azure-identity dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @azure/identity from 4.5.0 to 4.6.0 in /app/ui (#13) Bumps [@azure/identity](https://github.com/Azure/azure-sdk-for-js) from 4.5.0 to 4.6.0. - [Release notes](https://github.com/Azure/azure-sdk-for-js/releases) - [Changelog](https://github.com/Azure/azure-sdk-for-js/blob/main/documentation/Changelog-for-next-generation.md) - [Commits](https://github.com/Azure/azure-sdk-for-js/compare/@azure/identity_4.5.0...@azure/identity_4.6.0) --- updated-dependencies: - dependency-name: "@azure/identity" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump react-router-dom from 7.1.1 to 7.1.3 in /app/ui (#11) Bumps [react-router-dom](https://github.com/remix-run/react-router/tree/HEAD/packages/react-router-dom) from 7.1.1 to 7.1.3. - [Release notes](https://github.com/remix-run/react-router/releases) - [Changelog](https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/CHANGELOG.md) - [Commits](https://github.com/remix-run/react-router/commits/react-router-dom@7.1.3/packages/react-router-dom) --- updated-dependencies: - dependency-name: react-router-dom dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump vite from 6.0.7 to 6.0.11 in /app/ui in the npm_and_yarn group (#32) Bumps the npm_and_yarn group in /app/ui with 1 update: [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite). Updates `vite` from 6.0.7 to 6.0.11 - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v6.0.11/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: direct:development dependency-group: npm_and_yarn ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @types/node from 20.17.12 to 22.10.9 in /app/ui (#33) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.17.12 to 22.10.9. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Add pages and navigation * Update styles * Revert non-intentional changes * Revert mitakenly upgraded packages --------- Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: AJ (Ashitosh Jedhe) --- app/ui/src/App.tsx | 17 +---- app/ui/src/Navigation.tsx | 106 +++++++++++++++++++++++++++ app/ui/src/components/PageHeader.tsx | 29 ++++++++ app/ui/src/pages/admin/Agents.tsx | 20 +++++ app/ui/src/pages/admin/Settings.tsx | 20 +++++ app/ui/src/pages/files/Files.tsx | 18 ++--- app/ui/src/styles/useStyles.ts | 37 ++++++++++ 7 files changed, 221 insertions(+), 26 deletions(-) create mode 100644 app/ui/src/Navigation.tsx create mode 100644 app/ui/src/components/PageHeader.tsx create mode 100644 app/ui/src/pages/admin/Agents.tsx create mode 100644 app/ui/src/pages/admin/Settings.tsx create mode 100644 app/ui/src/styles/useStyles.ts diff --git a/app/ui/src/App.tsx b/app/ui/src/App.tsx index c04ebc2..c4a5db8 100644 --- a/app/ui/src/App.tsx +++ b/app/ui/src/App.tsx @@ -1,12 +1,11 @@ import { IPublicClientApplication } from "@azure/msal-browser"; import { MsalAuthenticationTemplate, MsalProvider } from "@azure/msal-react"; -import { Avatar, Button, makeStyles } from "@fluentui/react-components"; +import { Button, makeStyles } from "@fluentui/react-components"; import { ChevronLeft20Regular } from "@fluentui/react-icons"; -import { Route, Routes, useLocation, useNavigate } from "react-router-dom"; +import { useLocation, useNavigate } from "react-router-dom"; import logo from './assets/Azure.svg'; import { interactionType, loginRequest } from "./authConfig"; -import Files from "./pages/files/Files"; -import Review from "./pages/review/Review"; +import { NavMenu, Pages } from "./Navigation"; type AppProps = { pca: IPublicClientApplication; @@ -50,7 +49,7 @@ function App({ pca }: AppProps) { logo

AI Document Review

- +
@@ -62,13 +61,5 @@ function App({ pca }: AppProps) { ); } -function Pages() { - return ( - - } /> - } /> - - ); -} export default App; diff --git a/app/ui/src/Navigation.tsx b/app/ui/src/Navigation.tsx new file mode 100644 index 0000000..9eb7c5f --- /dev/null +++ b/app/ui/src/Navigation.tsx @@ -0,0 +1,106 @@ +import { + Button, + Menu, + MenuTrigger, + MenuPopover, + MenuList, + MenuItem, + MenuGroup, + MenuGroupHeader, + MenuDivider, + Avatar, + MenuItemLink, +} from "@fluentui/react-components"; +import { + ListBar20Filled, + Prompt20Filled, + Home20Filled, + Settings20Filled, + DocumentBulletListFilled, +} from "@fluentui/react-icons"; +import { useNavigate, useLocation, Routes, Route } from "react-router-dom"; +import Agents from "./pages/admin/Agents"; +import Files from "./pages/files/Files"; +import Review from "./pages/review/Review"; +import Settings from "./pages/admin/Settings"; +import useStyles from "./styles/useStyles"; + + +// paths +const paths = { + home: "/", + adminAgents: "/admin/agents", + review: "/review", + settings: "/admin/settings", +}; + +const documentation_url = "https://github.com/Azure-Samples/ai-document-review"; + +const NavMenu = () => { + const navigate = useNavigate(); + const location = useLocation(); + const classes = useStyles() + + const isSelected = (path: string) => location.pathname === path; + + return ( + + + + ); +}; + +const Pages = () => ( + + } /> + } /> + } /> + } /> + +); + +export { NavMenu, Pages }; diff --git a/app/ui/src/components/PageHeader.tsx b/app/ui/src/components/PageHeader.tsx new file mode 100644 index 0000000..296d035 --- /dev/null +++ b/app/ui/src/components/PageHeader.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import aiDocIcon from '../assets/ai-doc.png'; +import useStyles from "../styles/useStyles"; + + +interface PageHeaderProps { + title: string; + description: string; +} + +const PageHeader: React.FC = ({ title, description }) => { + const classes = useStyles(); + + return ( +
+
+
+ AI Document Review Icon +
+
+

{title}

+

{description}

+
+
+
+ ); +}; + +export default PageHeader; diff --git a/app/ui/src/pages/admin/Agents.tsx b/app/ui/src/pages/admin/Agents.tsx new file mode 100644 index 0000000..d9b7b9b --- /dev/null +++ b/app/ui/src/pages/admin/Agents.tsx @@ -0,0 +1,20 @@ +import { Divider } from '@fluentui/react-components' +import PageHeader from '../../components/PageHeader' +import useStyles from '../../styles/useStyles' + +function Agents() { + const classes = useStyles() + + return ( +
+ + +
+ ) +} + +export default Agents diff --git a/app/ui/src/pages/admin/Settings.tsx b/app/ui/src/pages/admin/Settings.tsx new file mode 100644 index 0000000..8750603 --- /dev/null +++ b/app/ui/src/pages/admin/Settings.tsx @@ -0,0 +1,20 @@ +import { Divider } from '@fluentui/react-components' +import PageHeader from '../../components/PageHeader' +import useStyles from '../../styles/useStyles' + +function Settings() { + const classes = useStyles() + + return ( +
+ + +
+ ) +} + +export default Settings diff --git a/app/ui/src/pages/files/Files.tsx b/app/ui/src/pages/files/Files.tsx index ff02cae..0343fa9 100644 --- a/app/ui/src/pages/files/Files.tsx +++ b/app/ui/src/pages/files/Files.tsx @@ -3,9 +3,9 @@ import { Button, Caption1, Card, CardHeader, CardPreview, Dialog, DialogBody, Di import { ArrowUploadRegular, MoreHorizontal20Regular } from '@fluentui/react-icons'; import { FormEvent, useCallback, useEffect, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import aiDocIcon from '../../assets/ai-doc.png'; import pdfIcon from '../../assets/pdf.svg'; import { listBlobs, uploadBlob } from '../../services/storage'; +import PageHeader from '../../components/PageHeader'; const flex = { gap: "16px", @@ -103,18 +103,10 @@ function Files() { return (
-
-
- AI Document Review Icon -
-
-

Welcome to the AI Document Review accelerator

-

Upload a new document to get started, or select an existing document to pick up where you left off.

- -
-
+
{ diff --git a/app/ui/src/styles/useStyles.ts b/app/ui/src/styles/useStyles.ts new file mode 100644 index 0000000..16238f8 --- /dev/null +++ b/app/ui/src/styles/useStyles.ts @@ -0,0 +1,37 @@ +import { makeStyles, tokens } from "@fluentui/react-components"; + +// Define common styles +const useStyles = makeStyles({ + selected: { + backgroundColor: tokens.colorNeutralBackground5, + color: tokens.colorNeutralForeground1, + }, + container: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + padding: '16px', + width: '100vw', + }, + divider: { + paddingTop: '10px', + paddingBottom: '10px', + maxWidth: '800px', + }, + heroImage: { + margin: '16px', + padding: '16px', + }, + headerContent: { + margin: '16px', + color: '#000', + maxWidth: '800px', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + }, +}); + +export default useStyles;