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 } };
 };