Update Link->Leafcutter integration

apps/leafcutter/components/AboutFeature.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { Grid, Box, GridSize } from "@mui/material";
 import AboutDots from "images/about-dots.png";
 import { useAppContext } from "./AppProvider";

apps/leafcutter/components/AccountButton.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { signOut } from "next-auth/react";
 import { Button, Box, Menu, MenuItem } from "@mui/material";
 import { useTranslate } from "react-polyglot";

apps/leafcutter/components/Footer.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { Container, Grid, Box, Button } from "@mui/material";
 import { useTranslate } from "react-polyglot";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import Link from "next/link";
 import leafcutterLogo from "images/leafcutter-logo.png";
 import footerLogo from "images/footer-logo.png";

apps/leafcutter/components/Layout.tsx

@@ -1,4 +1,5 @@
 import { FC, PropsWithChildren } from "react";
+import getConfig from "next/config";
 import { Grid, Container } from "@mui/material";
 import CookieConsent from "react-cookie-consent";
 import { useCookies } from "react-cookie";
@@ -10,7 +11,13 @@ import { useAppContext } from "./AppProvider";
 
 export const Layout: FC<PropsWithChildren> = ({ children }) => {
   const [cookies, setCookie] = useCookies(["cookieConsent"]);
+
   const consentGranted = cookies.cookieConsent === "true";
+  console.log({ val: process.env.LINK_EMBEDDED });
+  const {
+    publicRuntimeConfig: { embedded },
+  } = getConfig();
+
   const {
     colors: {
       white,
@@ -24,14 +31,18 @@ export const Layout: FC<PropsWithChildren> = ({ children }) => {
   return (
     <>
       <Grid container direction="column">
-        <Grid item>
-          <TopNav />
-        </Grid>
-        <Sidebar open />
-        <Grid item sx={{ mt: "100px", ml: "310px" }}>
+        {!embedded && (
+          <Grid item>
+            <TopNav />
+          </Grid>
+        )}
+        {!embedded && <Sidebar open />}
+        <Grid
+          item
+          sx={{ mt: embedded ? 0 : "100px", ml: embedded ? 0 : "310px" }}
+        >
           <Container sx={{ padding: 2 }}>{children}</Container>
         </Grid>
-        <Grid item>{/*          <Footer /> */}</Grid>
       </Grid>
       {!consentGranted ? (
         <CookieConsent

apps/leafcutter/components/Sidebar.tsx

@@ -4,7 +4,7 @@ import AboutMenuIcon from "images/about-menu.png";
 import TrendsMenuIcon from "images/trends-menu.png";
 import SearchCreateMenuIcon from "images/search-create-menu.png";
 import FAQMenuIcon from "images/faq-menu.png";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import {
   Box,
   Grid,

apps/leafcutter/components/TopNav.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import Link from "next/link";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { AppBar, Grid, Box } from "@mui/material";
 import { useTranslate } from "react-polyglot";
 import LeafcutterLogo from "images/leafcutter-logo.png";

apps/leafcutter/components/VisualizationSelectCard.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { Card, Grid } from "@mui/material";
 import horizontalBar from "images/horizontal-bar.svg";
 import horizontalBarStacked from "images/horizontal-bar-stacked.svg";

apps/leafcutter/lib/checkAuth.ts

@@ -1,21 +0,0 @@
-import { GetServerSideProps, GetServerSidePropsContext } from "next";
-import { getSession } from "next-auth/react";
-
-export const checkAuth: GetServerSideProps = async (
-  context: GetServerSidePropsContext
-) => {
-  const session = await getSession(context);
-
-  if (!session) {
-    return {
-      redirect: {
-        destination: "/login",
-        permanent: false,
-      },
-    };
-  }
-
-  return {
-    props: { session },
-  };
-};

apps/leafcutter/middleware.ts

@@ -0,0 +1,39 @@
+import { withAuth } from "next-auth/middleware";
+
+export default withAuth(
+  () => { },
+  {
+    pages: {
+      signIn: `/login`,
+    },
+    callbacks: {
+      authorized: ({ token, req }) => {
+        const {
+          url,
+          headers,
+        } = req;
+
+        const embedded = process.env.LINK_EMBEDDED === "true";
+        if (embedded) {
+          return true;
+        }
+
+        // check login page
+        const parsedURL = new URL(url);
+        if (parsedURL.pathname.startsWith('/login')) {
+          return true;
+        }
+
+        // check session auth
+        const authorizedDomains = ["redaranj.com", "digiresilience.org"];
+        const userDomain = token?.email?.toLowerCase().split("@").pop() ?? "unauthorized.net";
+
+        if (authorizedDomains.includes(userDomain)) {
+          return true;
+        }
+
+        return false;
+      },
+    }
+  }
+);

apps/leafcutter/next.config.js

@@ -1,4 +1,7 @@
 module.exports = {
+  publicRuntimeConfig: {
+    embedded: Boolean(process.env.LINK_EMBEDDED),
+  },
   i18n: {
     locales: ["en", "fr"],
     defaultLocale: "en",

apps/leafcutter/package.json

@@ -1,8 +1,8 @@
 {
   "name": "leafcutter",
-  "version": "0.1.54",
+  "version": "0.2.0",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3001",
     "login": "aws sso login --profile cdr-leafcutter-dashboard-production",
     "kubeconfig": "aws eks update-kubeconfig --name cdr-leafcutter-dashboard-cluster --profile  cdr-leafcutter-dashboard-production",
     "fwd:opensearch": "kubectl port-forward opensearch-cluster-master-0 9200:9200 --namespace leafcutter",

apps/leafcutter/pages/about.tsx

@@ -1,11 +1,10 @@
 import { GetServerSideProps, GetServerSidePropsContext } from "next";
 import { useTranslate } from "react-polyglot";
 import Head from "next/head";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import Link from "next/link";
 import { Grid, Container, Box, Button } from "@mui/material";
 import { Layout } from "components/Layout";
-import { checkAuth } from "lib/checkAuth";
 import { useAppContext } from "components/AppProvider";
 import { PageHeader } from "components/PageHeader";
 import { AboutFeature } from "components/AboutFeature";
@@ -166,7 +165,3 @@ const About = () => {
 };
 
 export default About;
-
-export const getServerSideProps: GetServerSideProps = async (
-  context: GetServerSidePropsContext
-) => checkAuth(context);

apps/leafcutter/pages/create.tsx

@@ -7,7 +7,6 @@ import { Box, Grid } from "@mui/material";
 import { useCookies } from "react-cookie";
 import { getTemplates } from "lib/opensearch";
 import { Layout } from "components/Layout";
-import { checkAuth } from "lib/checkAuth";
 import { useAppContext } from "components/AppProvider";
 import { PageHeader } from "components/PageHeader";
 import { VisualizationBuilder } from "components/VisualizationBuilder";
@@ -75,13 +74,7 @@ export default Create;
 export const getServerSideProps: GetServerSideProps = async (
   context: GetServerSidePropsContext
 ) => {
-  const res: any = await checkAuth(context);
+  const templates = await getTemplates(100);
 
-  if (res.redirect) {
-    return res;
-  }
-
-  res.props.templates = await getTemplates(100);
-
-  return res;
+  return { props: { templates } };
 };

apps/leafcutter/pages/faq.tsx

@@ -1,9 +1,7 @@
 import Head from "next/head";
-import { GetServerSideProps, GetServerSidePropsContext } from "next";
 import { useTranslate } from "react-polyglot";
 import { Box, Grid } from "@mui/material";
 import { Layout } from "components/Layout";
-import { checkAuth } from "lib/checkAuth";
 import { PageHeader } from "components/PageHeader";
 import { Question } from "components/Question";
 import { useAppContext } from "components/AppProvider";
@@ -104,7 +102,3 @@ const FAQ = () => {
 };
 
 export default FAQ;
-
-export const getServerSideProps: GetServerSideProps = async (
-  context: GetServerSidePropsContext
-) => checkAuth(context);

apps/leafcutter/pages/index.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { NextPage, GetServerSideProps, GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
+import { getSession } from "next-auth/react";
 import Head from "next/head";
 import Link from "next/link";
 import ReactMarkdown from "react-markdown";
@@ -8,7 +9,6 @@ import { Grid, Button } from "@mui/material";
 import { useTranslate } from "react-polyglot";
 import { useCookies } from "react-cookie";
 import { Layout } from "components/Layout";
-import { checkAuth } from "lib/checkAuth";
 import { getUserVisualizations } from "lib/opensearch";
 import { Welcome } from "components/Welcome";
 import { WelcomeDialog } from "components/WelcomeDialog";
@@ -111,15 +111,10 @@ export default MyVisualizations;
 export const getServerSideProps: GetServerSideProps = async (
   context: GetServerSidePropsContext
 ) => {
-  const res: any = await checkAuth(context);
-
-  if (res.redirect) {
-    return res;
-  }
-
-  res.props.visualizations = await getUserVisualizations(
-    res.props.session.user.email,
+  const session = (await getSession(context)) ?? null;
+  const visualizations = await getUserVisualizations(
+    session?.user?.email ?? "none",
     20
   );
-  return res;
+  return { props: { visualizations } };
 };

apps/leafcutter/pages/login.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import { NextPage } from "next";
 import Link from "next/link";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { Box, Grid, Container, IconButton } from "@mui/material";
 import { Apple as AppleIcon, Google as GoogleIcon } from "@mui/icons-material";
 import { useTranslate } from "react-polyglot";

apps/leafcutter/pages/preview/[...visualizationID].tsx

@@ -4,7 +4,6 @@ import { GetServerSideProps, GetServerSidePropsContext } from "next";
 // import { Client } from "@opensearch-project/opensearch";
 import { RawDataViewer } from "components/RawDataViewer";
 import { VisualizationDetail } from "components/VisualizationDetail";
-import { checkAuth } from "lib/checkAuth";
 // import { createVisualization } from "lib/opensearch";
 
 interface PreviewProps {
@@ -25,16 +24,12 @@ const Preview: FC<PreviewProps> = ({
   );
 
 export default Preview;
-
+/*
 export const getServerSideProps: GetServerSideProps = async (
   context: GetServerSidePropsContext
 ) => {
-  const res: any = await checkAuth(context);
 
-  if (res.redirect) {
-    return res;
-  }
-  /*
+
   const {
     visualizationID,
     searchQuery,
@@ -104,6 +99,8 @@ export const getServerSideProps: GetServerSideProps = async (
   }));
   console.log({ data: res.props.data });
   console.log(res.props.data[0]);
-  */
+
   return res;
 };
+
+*/

apps/leafcutter/pages/trends.tsx

@@ -3,7 +3,6 @@ import Head from "next/head";
 import { Grid, Box } from "@mui/material";
 import { useTranslate } from "react-polyglot";
 import { Layout } from "components/Layout";
-import { checkAuth } from "lib/checkAuth";
 import { getTrends } from "lib/opensearch";
 import { PageHeader } from "components/PageHeader";
 import { VisualizationCard } from "components/VisualizationCard";
@@ -81,12 +80,7 @@ export default Trends;
 export const getServerSideProps: GetServerSideProps = async (
   context: GetServerSidePropsContext
 ) => {
-  const res: any = await checkAuth(context);
-  if (res.redirect) {
-    return res;
-  }
+  const visualizations = await getTrends(25);
 
-  res.props.visualizations = await getTrends(25);
-
-  return res;
+  return { props: { visualizations } };
 };

apps/leafcutter/pages/visualizations/[...visualizationID].tsx

@@ -4,7 +4,6 @@ import { Client } from "@opensearch-project/opensearch";
 import Head from "next/head";
 import { Layout } from "components/Layout";
 import { VisualizationDetail } from "components/VisualizationDetail";
-import { checkAuth } from "lib/checkAuth";
 
 type VisualizationProps = {
   visualization: any;
@@ -24,12 +23,6 @@ export default Visualization;
 export const getServerSideProps: GetServerSideProps = async (
   context: GetServerSidePropsContext
 ) => {
-  const res: any = await checkAuth(context);
-
-  if (res.redirect) {
-    return res;
-  }
-
   const { visualizationID } = context.query;
 
   const node = `https://${process.env.OPENSEARCH_USERNAME}:${process.env.OPENSEARCH_PASSWORD}@${process.env.OPENSEARCH_URL}`;
@@ -51,7 +44,7 @@ export const getServerSideProps: GetServerSideProps = async (
     (hit: any) => hit._id.split(":")[1] === visualizationID[0]
   );
   const hit = hits[0];
-  res.props.visualization = {
+  const visualization = {
     id: hit._id.split(":")[1],
     title: hit._source.visualization.title,
     description: hit._source.visualization.description,
@@ -60,5 +53,5 @@ export const getServerSideProps: GetServerSideProps = async (
     }?embed=true`,
   };
 
-  return res;
+  return { props: { visualization } };
 };

apps/link/components/LeafcutterWrapper.tsx

@@ -0,0 +1,41 @@
+import { FC } from "react";
+import getConfig from "next/config";
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import Iframe from "react-iframe";
+
+type LeafcutterWrapperProps = {
+  path: string;
+};
+
+export const LeafcutterWrapper: FC<LeafcutterWrapperProps> = ({ path }) => {
+  const {
+    publicRuntimeConfig: { leafcutterURL },
+  } = getConfig();
+  const fullLeafcutterURL = `${leafcutterURL}/${path}`;
+
+  return (
+    <Layout>
+      <Head>
+        <title>Link Shell</title>
+      </Head>
+      <Grid
+        container
+        spacing={0}
+        sx={{ height: "100%", width: "100%" }}
+        direction="column"
+      >
+        <Grid item sx={{ height: "100vh", width: "100%" }}>
+          <Iframe
+            id="link"
+            url={fullLeafcutterURL}
+            width="100%"
+            height="100%"
+            frameBorder={0}
+          />
+        </Grid>
+      </Grid>
+    </Layout>
+  );
+};

apps/link/components/Sidebar.tsx

@@ -116,7 +116,7 @@ const MenuItem = ({
                 fontWeight: "bold",
                 border: 0,
                 textAlign: "left",
-                color: "white"
+                color: "white",
               }}
             >
               {name}
@@ -154,8 +154,8 @@ interface SidebarProps {
 
 export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
   const { pathname } = useRouter();
-  const { data: session } = useSession()
-  const username = session?.user?.name || "User"
+  const { data: session } = useSession();
+  const username = session?.user?.name || "User";
 
   return (
     <Drawer
@@ -276,9 +276,9 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
             {open
               ? username
               : username
-                .split(" ")
-                .map((name) => name.substring(0, 1))
-                .join("")}
+                  .split(" ")
+                  .map((name) => name.substring(0, 1))
+                  .join("")}
           </Typography>
         </Grid>
         <Grid item>
@@ -396,6 +396,14 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
               </List>
             </Collapse>
 
+            <MenuItem
+              name="Knowledge Base"
+              href="/knowledge"
+              Icon={CottageIcon}
+              iconSize={20}
+              selected={pathname.endsWith("/knowledge")}
+              open={open}
+            />
             <MenuItem
               name="Leafcutter"
               href="/leafcutter"

apps/link/next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  publicRuntimeConfig: {
+    leafcutterURL: process.env.LEAFCUTTER_URL,
+  },
   rewrites: async () => ({
     fallback: [
       {

apps/link/pages/knowledge.tsx

@@ -0,0 +1,31 @@
+import { FC } from "react";
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import { ZammadWrapper } from "components/ZammadWrapper";
+
+const Assigned: FC = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid
+        item
+        sx={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <ZammadWrapper path="/#knowledge_base/1/locale/en-us" />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Assigned;

apps/link/pages/leafcutter/about.tsx

@@ -1,36 +1,6 @@
-import { FC, useState } from "react";
-import Head from "next/head";
-import { Grid } from "@mui/material";
-import { Layout } from "components/Layout";
-import Iframe from "react-iframe";
+import { NextPage } from "next";
+import { LeafcutterWrapper } from "components/LeafcutterWrapper";
 
-const About: FC = () => {
-  const [leafcutterURL, setLeafcutterURL] = useState(
-    "https://lc.digiresilience.org/about"
-  );
-  return (
-    <Layout>
-      <Head>
-        <title>Link Shell</title>
-      </Head>
-      <Grid
-        container
-        spacing={0}
-        sx={{ height: "100%", width: "100%" }}
-        direction="column"
-      >
-        <Grid item sx={{ height: "100vh", width: "100%" }}>
-          <Iframe
-            id="link"
-            url={leafcutterURL}
-            width="100%"
-            height="100%"
-            frameBorder={0}
-          />
-        </Grid>
-      </Grid>
-    </Layout>
-  );
-};
+const About: NextPage = () => <LeafcutterWrapper path="about" />;
 
 export default About;

apps/link/pages/leafcutter/create.tsx

@@ -1,36 +1,6 @@
-import { FC, useState } from "react";
-import Head from "next/head";
-import { Grid } from "@mui/material";
-import { Layout } from "components/Layout";
-import Iframe from "react-iframe";
+import { NextPage } from "next";
+import { LeafcutterWrapper } from "components/LeafcutterWrapper";
 
-const Create: FC = () => {
-  const [leafcutterURL, setLeafcutterURL] = useState(
-    "https://lc.digiresilience.org/create"
-  );
-  return (
-    <Layout>
-      <Head>
-        <title>Link Shell</title>
-      </Head>
-      <Grid
-        container
-        spacing={0}
-        sx={{ height: "100%", width: "100%" }}
-        direction="column"
-      >
-        <Grid item sx={{ height: "100vh", width: "100%" }}>
-          <Iframe
-            id="link"
-            url={leafcutterURL}
-            width="100%"
-            height="100%"
-            frameBorder={0}
-          />
-        </Grid>
-      </Grid>
-    </Layout>
-  );
-};
+const Create: NextPage = () => <LeafcutterWrapper path="create" />;
 
 export default Create;

apps/link/pages/leafcutter/faq.tsx

@@ -1,36 +1,6 @@
-import { FC, useState } from "react";
-import Head from "next/head";
-import { Grid } from "@mui/material";
-import { Layout } from "components/Layout";
-import Iframe from "react-iframe";
+import { NextPage } from "next";
+import { LeafcutterWrapper } from "components/LeafcutterWrapper";
 
-const FAQ: FC = () => {
-  const [leafcutterURL, setLeafcutterURL] = useState(
-    "https://lc.digiresilience.org/faq"
-  );
-  return (
-    <Layout>
-      <Head>
-        <title>Link Shell</title>
-      </Head>
-      <Grid
-        container
-        spacing={0}
-        sx={{ height: "100%", width: "100%" }}
-        direction="column"
-      >
-        <Grid item sx={{ height: "100vh", width: "100%" }}>
-          <Iframe
-            id="link"
-            url={leafcutterURL}
-            width="100%"
-            height="100%"
-            frameBorder={0}
-          />
-        </Grid>
-      </Grid>
-    </Layout>
-  );
-};
+const FAQ: NextPage = () => <LeafcutterWrapper path="faq" />;
 
 export default FAQ;

apps/link/pages/leafcutter/index.tsx

@@ -1,36 +1,6 @@
-import { FC, useState } from "react";
-import Head from "next/head";
-import { Grid, Button } from "@mui/material";
-import { Layout } from "components/Layout";
-import Iframe from "react-iframe";
+import { NextPage } from "next";
+import { LeafcutterWrapper } from "components/LeafcutterWrapper";
 
-const Leafcutter: FC = () => {
-  const [leafcutterURL, setLeafcutterURL] = useState(
-    "https://lc.digiresilience.org"
-  );
-  return (
-    <Layout>
-      <Head>
-        <title>Link Shell</title>
-      </Head>
-      <Grid
-        container
-        spacing={0}
-        sx={{ height: "100%", width: "100%" }}
-        direction="column"
-      >
-        <Grid item sx={{ height: "100vh", width: "100%" }}>
-          <Iframe
-            id="link"
-            url={leafcutterURL}
-            width="100%"
-            height="100%"
-            frameBorder={0}
-          />
-        </Grid>
-      </Grid>
-    </Layout>
-  );
-};
+const Dashboard: NextPage = () => <LeafcutterWrapper path="" />;
 
-export default Leafcutter;
+export default Dashboard;

apps/link/pages/leafcutter/trends.tsx

@@ -1,36 +1,6 @@
-import { FC, useState } from "react";
-import Head from "next/head";
-import { Grid, Button } from "@mui/material";
-import { Layout } from "components/Layout";
-import Iframe from "react-iframe";
+import { NextPage } from "next";
+import { LeafcutterWrapper } from "components/LeafcutterWrapper";
 
-const Trends: FC = () => {
-  const [leafcutterURL, setLeafcutterURL] = useState(
-    "https://lc.digiresilience.org/trends"
-  );
-  return (
-    <Layout>
-      <Head>
-        <title>Link Shell</title>
-      </Head>
-      <Grid
-        container
-        spacing={0}
-        sx={{ height: "100%", width: "100%" }}
-        direction="column"
-      >
-        <Grid item sx={{ height: "100vh", width: "100%" }}>
-          <Iframe
-            id="link"
-            url={leafcutterURL}
-            width="100%"
-            height="100%"
-            frameBorder={0}
-          />
-        </Grid>
-      </Grid>
-    </Layout>
-  );
-};
+const Trends: NextPage = () => <LeafcutterWrapper path="trends" />;
 
 export default Trends;

apps/metamigo-frontend/package.json

@@ -15,13 +15,13 @@
     "jwks-rsa": "^3.0.1",
     "next": "13.4.3",
     "next-auth": "4.22.1",
-    "ra-data-graphql": "^4.10.1",
-    "ra-i18n-polyglot": "^4.10.6",
-    "ra-input-rich-text": "^4.10.6",
-    "ra-language-english": "^4.10.6",
+    "ra-data-graphql": "^4.11.0",
+    "ra-i18n-polyglot": "^4.11.0",
+    "ra-input-rich-text": "^4.11.0",
+    "ra-language-english": "^4.11.0",
     "ra-postgraphile": "^6.1.1",
     "react": "18.2.0",
-    "react-admin": "^4.10.6",
+    "react-admin": "^4.11.0",
     "react-digit-input": "^2.1.0",
     "react-dom": "18.2.0",
     "react-qr-code": "^2.0.11",