WIP 5

apps/leafcutter/app/(login)/login/_components/Login.tsx

@@ -9,7 +9,7 @@ import { useTranslate } from "react-polyglot";
 import { LanguageSelect } from "app/_components/LanguageSelect";
 import LeafcutterLogoLarge from "images/leafcutter-logo-large.png";
 import { signIn } from "next-auth/react";
-import { useAppContext } from "app/_components/AppProvider";
+import { useLeafcutterContext } from "leafcutter-ui";
 
 type LoginProps = {
   session: any;
@@ -20,7 +20,7 @@ export const Login: FC<LoginProps> = ({ session }) => {
   const {
     colors: { leafcutterElectricBlue, lightGray },
     typography: { h1, h4 },
-  } = useAppContext();
+  } = useLeafcutterContext();
   const buttonStyles = {
     backgroundColor: lightGray,
     borderRadius: 500,

apps/leafcutter/app/(main)/about/page.tsx

@@ -1,4 +1,4 @@
-import { About } from "leafcutter-common";
+import { About } from "leafcutter-ui";
 
 export default function Page() {
   return <About />;

apps/leafcutter/app/(main)/create/page.tsx

@@ -1,5 +1,5 @@
 import { getTemplates } from "app/_lib/opensearch";
-import { Create } from "leafcutter-common";
+import { Create } from "leafcutter-ui";
 
 export default async function Page() {
   const templates = await getTemplates(100);

apps/leafcutter/app/(main)/faq/page.tsx

@@ -1,4 +1,4 @@
-import { FAQ } from "leafcutter-common";
+import { FAQ } from "leafcutter-ui";
 
 export default function Page() {
   return <FAQ />;

apps/leafcutter/app/(main)/layout.tsx

@@ -1,7 +1,5 @@
 import { ReactNode } from "react";
 import "app/_styles/global.css";
-// import getConfig from "next/config";
-// import { LicenseInfo } from "@mui/x-data-grid-pro";
 import { InternalLayout } from "../_components/InternalLayout";
 
 type LayoutProps = {

apps/leafcutter/app/(main)/page.tsx

@@ -1,7 +1,7 @@
 import { getServerSession } from "next-auth";
 import { authOptions } from "app/_lib/auth";
 import { getUserVisualizations } from "app/_lib/opensearch";
-import { Home } from "leafcutter-common";
+import { Home } from "leafcutter-ui";
 
 export default async function Page() {
   const session = await getServerSession(authOptions);

apps/leafcutter/app/(main)/preview/[...visualizationID]/page.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 // import { Client } from "@opensearch-project/opensearch";
-import { Preview } from "leafcutter-common";
+import { Preview } from "leafcutter-ui";
 // import { createVisualization } from "lib/opensearch";
 
 export default function Page() {

apps/leafcutter/app/(main)/setup/_components/Setup.tsx

@@ -5,12 +5,12 @@ import { useLayoutEffect } from "react";
 import { useRouter } from "next/navigation";
 import { Grid, CircularProgress } from "@mui/material";
 import Iframe from "react-iframe";
-import { useAppContext } from "leafcutter-common/components/AppProvider";
+import { useLeafcutterContext } from "leafcutter-ui/components/LeafcutterProvider";
 
 export const Setup: FC = () => {
   const {
     colors: { leafcutterElectricBlue },
-  } = useAppContext();
+  } = useLeafcutterContext();
   const router = useRouter();
   useLayoutEffect(() => {
     setTimeout(() => router.push("/"), 4000);

apps/leafcutter/app/(main)/trends/page.tsx

@@ -1,5 +1,5 @@
 import { getTrends } from "app/_lib/opensearch";
-import { Trends } from "leafcutter-common";
+import { Trends } from "leafcutter-ui";
 
 export default async function Page() {
   const visualizations = await getTrends(25);

apps/leafcutter/app/(main)/visualizations/[...visualizationID]/page.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 import { Client } from "@opensearch-project/opensearch";
-import { VisualizationDetail } from "leafcutter-common";
+import { VisualizationDetail } from "leafcutter-ui";
 
 const getVisualization = async (visualizationID: string) => {
   const node = `https://${process.env.OPENSEARCH_USERNAME}:${process.env.OPENSEARCH_PASSWORD}@${process.env.OPENSEARCH_URL}`;

apps/leafcutter/app/_components/AccountButton.tsx

@@ -11,13 +11,13 @@ import {
   bindTrigger,
   bindMenu,
 } from "material-ui-popup-state/hooks";
-import { useAppContext } from "leafcutter-common/components/AppProvider";
+import { useLeafcutterContext } from "leafcutter-ui/components/LeafcutterProvider";
 
 export const AccountButton: FC = () => {
   const t = useTranslate();
   const {
     colors: { leafcutterElectricBlue },
-  } = useAppContext();
+  } = useLeafcutterContext();
   const popupState = usePopupState({ variant: "popover", popupId: "account" });
 
   return (

apps/leafcutter/app/_components/AppProvider.tsx

@@ -8,7 +8,7 @@ import {
   useState,
   PropsWithChildren,
 } from "react";
-import { colors, typography } from "leafcutter-common/styles/theme";
+import { colors, typography } from "leafcutter-ui/styles/theme";
 
 const basePath = process.env.GITLAB_CI
   ? "/link/link-stack/apps/leafcutter"
@@ -29,7 +29,7 @@ const AppContext = createContext({
   setFoundCount: null as any,
 });
 
-export const AppProvider: FC<PropsWithChildren> = ({ children }) => {
+export const LeafcutterProvider: FC<PropsWithChildren> = ({ children }) => {
   const initialState = {
     incidentType: {
       display: "Incident Type",
@@ -156,6 +156,6 @@ export const AppProvider: FC<PropsWithChildren> = ({ children }) => {
   );
 };
 
-export function useAppContext() {
+export function useLeafcutterContext() {
   return useContext(AppContext);
 }

apps/leafcutter/app/_components/HelpButton.tsx

@@ -4,7 +4,7 @@ import { FC, useState } from "react";
 import { useRouter, usePathname } from "next/navigation";
 import { Button } from "@mui/material";
 import { QuestionMark as QuestionMarkIcon } from "@mui/icons-material";
-import { useAppContext } from "leafcutter-common/components/AppProvider";
+import { useLeafcutterContext } from "leafcutter-ui/components/LeafcutterProvider";
 
 export const HelpButton: FC = () => {
   const router = useRouter();
@@ -12,7 +12,7 @@ export const HelpButton: FC = () => {
   const [helpActive, setHelpActive] = useState(false);
   const {
     colors: { leafcutterElectricBlue },
-  } = useAppContext();
+  } = useLeafcutterContext();
   const onClick = () => {
     if (helpActive) {
       router.push(pathname);

apps/leafcutter/app/_components/InternalLayout.tsx

@@ -7,8 +7,8 @@ import CookieConsent from "react-cookie-consent";
 import { useCookies } from "react-cookie";
 import { TopNav } from "./TopNav";
 import { Sidebar } from "./Sidebar";
-import { GettingStartedDialog } from "leafcutter-common";
-import { useAppContext } from "leafcutter-common/components/AppProvider";
+import { GettingStartedDialog } from "leafcutter-ui";
+import { useLeafcutterContext } from "leafcutter-ui/components/LeafcutterProvider";
 // import { Footer } from "./Footer";
 
 type LayoutProps = PropsWithChildren<{
@@ -29,7 +29,7 @@ export const InternalLayout: FC<LayoutProps> = ({
       cdrLinkOrange,
       helpYellow,
     },
-  } = useAppContext();
+  } = useLeafcutterContext();
 
   return (
     <>

apps/leafcutter/app/_components/LanguageSelect.tsx

@@ -8,13 +8,13 @@ import {
   bindTrigger,
   bindMenu,
 } from "material-ui-popup-state/hooks";
-import { useAppContext } from "leafcutter-common/components/AppProvider";
+import { useLeafcutterContext } from "leafcutter-ui/components/LeafcutterProvider";
 // import { Tooltip } from "./Tooltip";
 
 export const LanguageSelect = () => {
   const {
     colors: { white, leafcutterElectricBlue },
-  } = useAppContext();
+  } = useLeafcutterContext();
   const router = useRouter();
   const locales: any = { en: "English", fr: "Français" };
   const locale = "en";

apps/leafcutter/app/_components/MultiProvider.tsx

@@ -8,10 +8,10 @@ import { CookiesProvider } from "react-cookie";
 import { I18n } from "react-polyglot";
 import { AdapterDateFns } from "@mui/x-date-pickers-pro/AdapterDateFnsV3";
 import { LocalizationProvider } from "@mui/x-date-pickers-pro";
-import { AppProvider } from "leafcutter-common/components/AppProvider";
+import { LeafcutterProvider } from "leafcutter-ui/components/LeafcutterProvider";
 import { NextAppDirEmotionCacheProvider } from "tss-react/next/appDir";
-import en from "leafcutter-common/locales/en.json";
-import fr from "leafcutter-common/locales/fr.json";
+import en from "leafcutter-ui/locales/en.json";
+import fr from "leafcutter-ui/locales/fr.json";
 import { LicenseInfo } from "@mui/x-date-pickers-pro";
 
 LicenseInfo.setLicenseKey(
@@ -29,13 +29,13 @@ export const MultiProvider: FC<PropsWithChildren> = ({ children }: any) => {
       <SessionProvider>
         <CookiesProvider>
           <CssBaseline />
-          <AppProvider>
+          <LeafcutterProvider>
             <LocalizationProvider dateAdapter={AdapterDateFns}>
               <I18n locale={locale} messages={messages[locale]}>
                 {children}
               </I18n>
             </LocalizationProvider>
-          </AppProvider>
+          </LeafcutterProvider>
         </CookiesProvider>
       </SessionProvider>
     </NextAppDirEmotionCacheProvider>

apps/leafcutter/app/_components/Sidebar.tsx

@@ -20,8 +20,8 @@ import {
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useTranslate } from "react-polyglot";
-import { useAppContext } from "leafcutter-common/components/AppProvider";
-import { Tooltip } from "leafcutter-common";
+import { useLeafcutterContext } from "leafcutter-ui/components/LeafcutterProvider";
+import { Tooltip } from "leafcutter-ui";
 // import { ArrowCircleRight as ArrowCircleRightIcon } from "@mui/icons-material";
 
 const MenuItem = ({
@@ -43,7 +43,7 @@ const MenuItem = ({
 }) => {
   const {
     colors: { leafcutterLightBlue, black },
-  } = useAppContext();
+  } = useLeafcutterContext();
 
   return (
     <Link href={href} passHref>
@@ -105,7 +105,7 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => {
   const section = pathname?.split("/")[1];
   const {
     colors: { white }, //  leafcutterElectricBlue, leafcutterLightBlue,
-  } = useAppContext();
+  } = useLeafcutterContext();
 
   // const [recentUpdates, setRecentUpdates] = useState([]);
 

apps/leafcutter/app/_components/TopNav.tsx

@@ -8,8 +8,8 @@ import { useTranslate } from "react-polyglot";
 import LeafcutterLogo from "images/leafcutter-logo.png";
 import { AccountButton } from "./AccountButton";
 import { HelpButton } from "./HelpButton";
-import { Tooltip } from "leafcutter-common";
-import { useAppContext } from "leafcutter-common/components/AppProvider";
+import { Tooltip } from "leafcutter-ui";
+import { useLeafcutterContext } from "leafcutter-ui/components/LeafcutterProvider";
 // import { LanguageSelect } from "./LanguageSelect";
 
 export const TopNav: FC = () => {
@@ -17,7 +17,7 @@ export const TopNav: FC = () => {
   const {
     colors: { white, leafcutterElectricBlue, cdrLinkOrange },
     typography: { h5, h6 },
-  } = useAppContext();
+  } = useLeafcutterContext();
 
   return (
     <AppBar

apps/leafcutter/middleware.ts

@@ -1,3 +1,4 @@
+
 import { withAuth } from "next-auth/middleware";
 
 export default withAuth(
@@ -6,26 +7,13 @@ export default withAuth(
       signIn: `/login`,
     },
     callbacks: {
-      authorized: ({ token, req }) => {
-        const {
-          url,
-        } = req;
-        const parsedURL = new URL(url);
-
-        console.log({ url });
-        console.log({ pathname: parsedURL.pathname });
-        console.log({ allowed: parsedURL.pathname.startsWith("/app") });
-        const allowed = parsedURL.pathname.startsWith('/login') || parsedURL.pathname.startsWith('/api' || parsedURL.pathname.startsWith("/app"));
-        if (allowed) {
-          return true;
-        }
-
+      authorized: ({ token }) => {
+        // check for existence in opensearch user list
         if (token?.email) {
           return true;
         }
 
         return false;
-
       },
     }
   }
@@ -33,6 +21,6 @@ export default withAuth(
 
 export const config = {
   matcher: [
-    '/((?!api|app|bootstrap|3961|ui|translations|internal|login|node_modules|_next/static|_next/image|favicon.ico).*)',
+    '/((?!api|app|login|_next/static|_next/image|favicon.ico).*)',
   ],
 };

apps/leafcutter/next.config.js

@@ -7,7 +7,7 @@ const ContentSecurityPolicy = `
 `;
 
 module.exports = {
-  transpilePackages: ["leafcutter-common"],
+  transpilePackages: ["leafcutter-ui", "opensearch-common"],
   experimental: {
     missingSuspenseWithCSRBailout: false,
   },

apps/leafcutter/package.json

@@ -18,19 +18,20 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5",
-    "@mui/lab": "^5.0.0-alpha.168",
+    "@mui/lab": "^5.0.0-alpha.169",
     "@mui/material": "^5",
     "@mui/x-data-grid-pro": "^6.19.6",
     "@mui/x-date-pickers-pro": "^6.19.7",
     "@opensearch-project/opensearch": "^2.6.0",
     "cryptr": "^6.3.0",
-    "date-fns": "^3.5.0",
+    "date-fns": "^3.6.0",
     "http-proxy-middleware": "^2.0.6",
-    "leafcutter-common": "*",
-    "material-ui-popup-state": "^5.0.10",
-    "next": "14.1.3",
+    "leafcutter-ui": "*",
+    "material-ui-popup-state": "^5.1.0",
+    "next": "14.1.4",
     "next-auth": "^4.24.7",
     "next-http-proxy-middleware": "^1.2.6",
+    "opensearch-common": "*",
     "nodemailer": "^6.9.12",
     "react": "18.2.0",
     "react-cookie": "^7.1.0",
@@ -45,14 +46,14 @@
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.0",
-    "@types/node": "^20.11.28",
-    "@types/react": "18.2.66",
+    "@babel/core": "^7.24.1",
+    "@types/node": "^20.11.30",
+    "@types/react": "18.2.67",
     "@types/uuid": "^9.0.8",
     "babel-loader": "^9.1.3",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-next": "^14.1.3",
+    "eslint-config-next": "^14.1.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",