From 495e8338b9515046ff9f26db2a41aecf50374947 Mon Sep 17 00:00:00 2001
From: Darren Clarke <darren@redaranj.com>
Date: Thu, 25 May 2023 12:37:14 +0000
Subject: [PATCH] Update Link->Leafcutter integration

---
 apps/leafcutter/components/AboutFeature.tsx   |  2 +-
 apps/leafcutter/components/AccountButton.tsx  |  2 +-
 apps/leafcutter/components/Footer.tsx         |  2 +-
 apps/leafcutter/components/Layout.tsx         | 23 ++++--
 apps/leafcutter/components/Sidebar.tsx        |  2 +-
 apps/leafcutter/components/TopNav.tsx         |  2 +-
 .../components/VisualizationSelectCard.tsx    |  2 +-
 apps/leafcutter/lib/checkAuth.ts              | 21 ------
 apps/leafcutter/middleware.ts                 | 39 +++++++++++
 apps/leafcutter/next.config.js                |  3 +
 apps/leafcutter/package.json                  |  4 +-
 apps/leafcutter/pages/about.tsx               |  7 +-
 apps/leafcutter/pages/create.tsx              | 11 +--
 apps/leafcutter/pages/faq.tsx                 |  6 --
 apps/leafcutter/pages/index.tsx               | 15 ++--
 apps/leafcutter/pages/login.tsx               |  2 +-
 .../pages/preview/[...visualizationID].tsx    | 13 ++--
 apps/leafcutter/pages/trends.tsx              | 10 +--
 .../visualizations/[...visualizationID].tsx   | 11 +--
 apps/link/components/LeafcutterWrapper.tsx    | 41 +++++++++++
 apps/link/components/Sidebar.tsx              | 20 ++++--
 apps/link/next.config.js                      |  3 +
 apps/link/pages/knowledge.tsx                 | 31 ++++++++
 apps/link/pages/leafcutter/about.tsx          | 36 +---------
 apps/link/pages/leafcutter/create.tsx         | 36 +---------
 apps/link/pages/leafcutter/faq.tsx            | 36 +---------
 apps/link/pages/leafcutter/index.tsx          | 38 ++--------
 apps/link/pages/leafcutter/trends.tsx         | 36 +---------
 apps/metamigo-frontend/package.json           | 10 +--
 package-lock.json                             | 70 +++++++++----------
 turbo.json                                    | 48 +++----------
 31 files changed, 239 insertions(+), 343 deletions(-)
 delete mode 100644 apps/leafcutter/lib/checkAuth.ts
 create mode 100644 apps/leafcutter/middleware.ts
 create mode 100644 apps/link/components/LeafcutterWrapper.tsx
 create mode 100644 apps/link/pages/knowledge.tsx

diff --git a/apps/leafcutter/components/AboutFeature.tsx b/apps/leafcutter/components/AboutFeature.tsx
index b8b0949..b8ff04c 100644
--- a/apps/leafcutter/components/AboutFeature.tsx
+++ b/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";
diff --git a/apps/leafcutter/components/AccountButton.tsx b/apps/leafcutter/components/AccountButton.tsx
index c4311e3..82a324b 100644
--- a/apps/leafcutter/components/AccountButton.tsx
+++ b/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";
diff --git a/apps/leafcutter/components/Footer.tsx b/apps/leafcutter/components/Footer.tsx
index 7e2207d..49ec23b 100644
--- a/apps/leafcutter/components/Footer.tsx
+++ b/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";
diff --git a/apps/leafcutter/components/Layout.tsx b/apps/leafcutter/components/Layout.tsx
index 5fcc052..0897bdc 100644
--- a/apps/leafcutter/components/Layout.tsx
+++ b/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
diff --git a/apps/leafcutter/components/Sidebar.tsx b/apps/leafcutter/components/Sidebar.tsx
index 6f3eb4c..136b371 100644
--- a/apps/leafcutter/components/Sidebar.tsx
+++ b/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,
diff --git a/apps/leafcutter/components/TopNav.tsx b/apps/leafcutter/components/TopNav.tsx
index 3e18ded..f21af59 100644
--- a/apps/leafcutter/components/TopNav.tsx
+++ b/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";
diff --git a/apps/leafcutter/components/VisualizationSelectCard.tsx b/apps/leafcutter/components/VisualizationSelectCard.tsx
index 571c0e3..6486be8 100644
--- a/apps/leafcutter/components/VisualizationSelectCard.tsx
+++ b/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";
diff --git a/apps/leafcutter/lib/checkAuth.ts b/apps/leafcutter/lib/checkAuth.ts
deleted file mode 100644
index 0b2e3ab..0000000
--- a/apps/leafcutter/lib/checkAuth.ts
+++ /dev/null
@@ -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 },
-  };
-};
diff --git a/apps/leafcutter/middleware.ts b/apps/leafcutter/middleware.ts
new file mode 100644
index 0000000..78d3f35
--- /dev/null
+++ b/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;
+      },
+    }
+  }
+);
diff --git a/apps/leafcutter/next.config.js b/apps/leafcutter/next.config.js
index c160bd0..3aaa53f 100644
--- a/apps/leafcutter/next.config.js
+++ b/apps/leafcutter/next.config.js
@@ -1,4 +1,7 @@
 module.exports = {
+  publicRuntimeConfig: {
+    embedded: Boolean(process.env.LINK_EMBEDDED),
+  },
   i18n: {
     locales: ["en", "fr"],
     defaultLocale: "en",
diff --git a/apps/leafcutter/package.json b/apps/leafcutter/package.json
index 0685f3f..dcc92e0 100644
--- a/apps/leafcutter/package.json
+++ b/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",
diff --git a/apps/leafcutter/pages/about.tsx b/apps/leafcutter/pages/about.tsx
index f1ddc10..c2606bb 100644
--- a/apps/leafcutter/pages/about.tsx
+++ b/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);
diff --git a/apps/leafcutter/pages/create.tsx b/apps/leafcutter/pages/create.tsx
index 4fb28d8..ec8d5d0 100644
--- a/apps/leafcutter/pages/create.tsx
+++ b/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 } };
 };
diff --git a/apps/leafcutter/pages/faq.tsx b/apps/leafcutter/pages/faq.tsx
index cdfd70a..71f0188 100644
--- a/apps/leafcutter/pages/faq.tsx
+++ b/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);
diff --git a/apps/leafcutter/pages/index.tsx b/apps/leafcutter/pages/index.tsx
index c316f6b..0f9eea8 100644
--- a/apps/leafcutter/pages/index.tsx
+++ b/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 } };
 };
diff --git a/apps/leafcutter/pages/login.tsx b/apps/leafcutter/pages/login.tsx
index 5ea6162..30b4dbd 100644
--- a/apps/leafcutter/pages/login.tsx
+++ b/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";
diff --git a/apps/leafcutter/pages/preview/[...visualizationID].tsx b/apps/leafcutter/pages/preview/[...visualizationID].tsx
index fe752df..365fa79 100644
--- a/apps/leafcutter/pages/preview/[...visualizationID].tsx
+++ b/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;
 };
+
+*/
diff --git a/apps/leafcutter/pages/trends.tsx b/apps/leafcutter/pages/trends.tsx
index e3d269c..c895f5e 100644
--- a/apps/leafcutter/pages/trends.tsx
+++ b/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 } };
 };
diff --git a/apps/leafcutter/pages/visualizations/[...visualizationID].tsx b/apps/leafcutter/pages/visualizations/[...visualizationID].tsx
index aad19cb..e286039 100644
--- a/apps/leafcutter/pages/visualizations/[...visualizationID].tsx
+++ b/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 } };
 };
diff --git a/apps/link/components/LeafcutterWrapper.tsx b/apps/link/components/LeafcutterWrapper.tsx
new file mode 100644
index 0000000..06a58ef
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/apps/link/components/Sidebar.tsx b/apps/link/components/Sidebar.tsx
index 5515c2f..3af033f 100644
--- a/apps/link/components/Sidebar.tsx
+++ b/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"
diff --git a/apps/link/next.config.js b/apps/link/next.config.js
index c114e76..ea2105d 100644
--- a/apps/link/next.config.js
+++ b/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: [
       {
diff --git a/apps/link/pages/knowledge.tsx b/apps/link/pages/knowledge.tsx
new file mode 100644
index 0000000..68d52a8
--- /dev/null
+++ b/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;
diff --git a/apps/link/pages/leafcutter/about.tsx b/apps/link/pages/leafcutter/about.tsx
index 4bd0214..b5ebf09 100644
--- a/apps/link/pages/leafcutter/about.tsx
+++ b/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;
diff --git a/apps/link/pages/leafcutter/create.tsx b/apps/link/pages/leafcutter/create.tsx
index 0ed3264..7853fe6 100644
--- a/apps/link/pages/leafcutter/create.tsx
+++ b/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;
diff --git a/apps/link/pages/leafcutter/faq.tsx b/apps/link/pages/leafcutter/faq.tsx
index e81ce32..c421adc 100644
--- a/apps/link/pages/leafcutter/faq.tsx
+++ b/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;
diff --git a/apps/link/pages/leafcutter/index.tsx b/apps/link/pages/leafcutter/index.tsx
index a58dff6..0a7b35e 100644
--- a/apps/link/pages/leafcutter/index.tsx
+++ b/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;
diff --git a/apps/link/pages/leafcutter/trends.tsx b/apps/link/pages/leafcutter/trends.tsx
index a58f37a..1920fed 100644
--- a/apps/link/pages/leafcutter/trends.tsx
+++ b/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;
diff --git a/apps/metamigo-frontend/package.json b/apps/metamigo-frontend/package.json
index 3e438e2..2337535 100644
--- a/apps/metamigo-frontend/package.json
+++ b/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",
diff --git a/package-lock.json b/package-lock.json
index 11b0a1f..2bb5d5d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
       ]
     },
     "apps/leafcutter": {
-      "version": "0.1.54",
+      "version": "0.2.0",
       "dependencies": {
         "@emotion/cache": "^11.11.0",
         "@emotion/react": "^11.11.0",
@@ -380,13 +380,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",
@@ -17394,9 +17394,9 @@
       }
     },
     "node_modules/ra-core": {
-      "version": "4.10.6",
-      "resolved": "https://registry.npmjs.org/ra-core/-/ra-core-4.10.6.tgz",
-      "integrity": "sha512-n+X3Qh86hLgc1XyGcdMIG8wi+LCwHonDJ3GkYeOI9Q42yqVQx7O5A2Nc3eeSR0XSBCTOGt4X19mtzcLKqOvjxA==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/ra-core/-/ra-core-4.11.0.tgz",
+      "integrity": "sha512-KK2C04Vqqy5zHii+/+jBGPDGh3gZALwN6+zCgLeVwLjxZYWTGywXBEgpVi3/+MT/T9B/6r1EALzvfzZoid3ROQ==",
       "dependencies": {
         "clsx": "^1.1.1",
         "date-fns": "^2.19.0",
@@ -17413,7 +17413,7 @@
         "history": "^5.1.0",
         "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0",
-        "react-hook-form": "^7.40.0",
+        "react-hook-form": "^7.43.9",
         "react-router": "^6.1.0",
         "react-router-dom": "^6.1.0"
       }
@@ -17424,9 +17424,9 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "node_modules/ra-data-graphql": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/ra-data-graphql/-/ra-data-graphql-4.10.1.tgz",
-      "integrity": "sha512-SxpOaraZR53Dhc5ZhDpL0G3R6YZcivUKyj91KPwirMRtkffgJJqJkxammvhdTVFDUocKK2V/7EXv94mBkBJfew==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/ra-data-graphql/-/ra-data-graphql-4.11.0.tgz",
+      "integrity": "sha512-FSafY7khLAZ9Zly3YZJdi7M2/PlGLWG+sw84iEpYcj2QUqrdHTE2tAlwk8ly64087CfnW+ite0qFVOBvVkYSQQ==",
       "dependencies": {
         "@apollo/client": "^3.3.19",
         "lodash": "~4.17.5",
@@ -17446,18 +17446,18 @@
       }
     },
     "node_modules/ra-i18n-polyglot": {
-      "version": "4.10.6",
-      "resolved": "https://registry.npmjs.org/ra-i18n-polyglot/-/ra-i18n-polyglot-4.10.6.tgz",
-      "integrity": "sha512-kFIFXiSsUCk6PUTP4uaA4+J8RJotVpFhHk2+J86czK5KNnE/mGepq88ZB2g8dkGpzH+opXTkxGuKCqQQeGCZlw==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/ra-i18n-polyglot/-/ra-i18n-polyglot-4.11.0.tgz",
+      "integrity": "sha512-J9LgEviJyA4RWi+alSR/0elzNfDhj6MKC8fYnLd6aXG2i8XHu7nXNtWdQv26FlovEQ4GXsGbKInyFwIfP0SwNw==",
       "dependencies": {
         "node-polyglot": "^2.2.2",
-        "ra-core": "^4.10.6"
+        "ra-core": "^4.11.0"
       }
     },
     "node_modules/ra-input-rich-text": {
-      "version": "4.10.6",
-      "resolved": "https://registry.npmjs.org/ra-input-rich-text/-/ra-input-rich-text-4.10.6.tgz",
-      "integrity": "sha512-b3yLyBi7jjVb4OhwicyYk0nkbP3xD42AqzDazf6O6hH4+EMBiIl8deRiG1VJaxmmMGY/R9BGSNUxWysEfEjRAA==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/ra-input-rich-text/-/ra-input-rich-text-4.11.0.tgz",
+      "integrity": "sha512-1s4YrrSkZ7QiwpYgxyzJsNgwOQ+tfBF/4r1DqvBKbve2bZt27FCMY/JCtqQsiPmewQSsIQDx8R0ZY7SzcJKjNQ==",
       "dependencies": {
         "@tiptap/core": "^2.0.0-beta.217",
         "@tiptap/extension-color": "^2.0.0-beta.217",
@@ -17483,11 +17483,11 @@
       }
     },
     "node_modules/ra-language-english": {
-      "version": "4.10.6",
-      "resolved": "https://registry.npmjs.org/ra-language-english/-/ra-language-english-4.10.6.tgz",
-      "integrity": "sha512-FM5KKBiPAbgrJF06WnYiijtXEjbKCjM9fOmMxYfT9+sAEWtsrKgJwZZfF07OAQQmg6oyajVXUnPM40M2qviIQg==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/ra-language-english/-/ra-language-english-4.11.0.tgz",
+      "integrity": "sha512-79VYZAaSFhfwL+YkgfhVP1hm60pnG+WuZdxypIX4S7tDPTxZGMcBuSEO4Q5Bf4m5jGRu4Jbwu5JrKhZN6eHbkA==",
       "dependencies": {
-        "ra-core": "^4.10.6"
+        "ra-core": "^4.11.0"
       }
     },
     "node_modules/ra-postgraphile": {
@@ -17516,9 +17516,9 @@
       }
     },
     "node_modules/ra-ui-materialui": {
-      "version": "4.10.6",
-      "resolved": "https://registry.npmjs.org/ra-ui-materialui/-/ra-ui-materialui-4.10.6.tgz",
-      "integrity": "sha512-l0chuLFKJfjcExix3T9SuwZxajmEgIjGjMT2NIlbS6HC4JkX90L/IdZ4CZk01LrbTBGjCXG/tqWtaIVM6VB8oA==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/ra-ui-materialui/-/ra-ui-materialui-4.11.0.tgz",
+      "integrity": "sha512-KLpfLRlXNt5Mst4a9XzU1IolYJofUK3IuTI09wn839CVpsgm6iJTRtwcpcWPS1BcPfQJa5VragKJFAz/qLe/Og==",
       "dependencies": {
         "autosuggest-highlight": "^3.1.1",
         "clsx": "^1.1.1",
@@ -17618,20 +17618,20 @@
       }
     },
     "node_modules/react-admin": {
-      "version": "4.10.6",
-      "resolved": "https://registry.npmjs.org/react-admin/-/react-admin-4.10.6.tgz",
-      "integrity": "sha512-NuHJ3KU9MRyLwCdCIVPQcogBIqXk3umrR4pkyX+JgkO1TDwpItjwmD4Hy92dIFMTMTxCX/l0p3spRvI82Z4nSQ==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-admin/-/react-admin-4.11.0.tgz",
+      "integrity": "sha512-iYmFX5klpiyKvP0r33vXX0XR5K1lFtwZ2XivBVIvCnjA01haBWPxkS61VH2oAeYKTVYBVk+0oqvwKzOp03ANSA==",
       "dependencies": {
         "@emotion/react": "^11.4.1",
         "@emotion/styled": "^11.3.0",
         "@mui/icons-material": "^5.0.1",
         "@mui/material": "^5.0.2",
         "history": "^5.1.0",
-        "ra-core": "^4.10.6",
-        "ra-i18n-polyglot": "^4.10.6",
-        "ra-language-english": "^4.10.6",
-        "ra-ui-materialui": "^4.10.6",
-        "react-hook-form": "^7.40.0",
+        "ra-core": "^4.11.0",
+        "ra-i18n-polyglot": "^4.11.0",
+        "ra-language-english": "^4.11.0",
+        "ra-ui-materialui": "^4.11.0",
+        "react-hook-form": "^7.43.9",
         "react-router": "^6.1.0",
         "react-router-dom": "^6.1.0"
       },
diff --git a/turbo.json b/turbo.json
index 590f517..b6b5176 100644
--- a/turbo.json
+++ b/turbo.json
@@ -6,54 +6,24 @@
       "persistent": true
     },
     "build": {
-      "dependsOn": [
-        "^build"
-      ],
-      "outputs": [
-        ".next/**"
-      ]
+      "dependsOn": ["^build"],
+      "outputs": [".next/**"]
     },
     "test": {
-      "dependsOn": [
-        "build"
-      ],
-      "inputs": [
-        "src/**/*.tsx",
-        "src/**/*.ts",
-        "test/**/*.ts",
-        "test/**/*.tsx"
-      ]
+      "dependsOn": ["build"],
+      "inputs": ["src/**/*.tsx", "src/**/*.ts", "test/**/*.ts", "test/**/*.tsx"]
     },
     "lint": {
-      "inputs": [
-        "src/**/*.tsx",
-        "src/**/*.ts",
-        "test/**/*.ts",
-        "test/**/*.tsx"
-      ]
+      "inputs": ["src/**/*.tsx", "src/**/*.ts", "test/**/*.ts", "test/**/*.tsx"]
     },
     "fix:lint": {
-      "inputs": [
-        "src/**/*.tsx",
-        "src/**/*.ts",
-        "test/**/*.ts",
-        "test/**/*.tsx"
-      ]
+      "inputs": ["src/**/*.tsx", "src/**/*.ts", "test/**/*.ts", "test/**/*.tsx"]
     },
     "fmt": {
-      "inputs": [
-        "src/**/*.tsx",
-        "src/**/*.ts",
-        "test/**/*.ts",
-        "test/**/*.tsx"
-      ]
+      "inputs": ["src/**/*.tsx", "src/**/*.ts", "test/**/*.ts", "test/**/*.tsx"]
     },
     "deploy": {
-      "dependsOn": [
-        "build",
-        "test",
-        "lint"
-      ]
+      "dependsOn": ["build", "test", "lint"]
     }
   }
-}
\ No newline at end of file
+}