From df9b8abf150e6994bdcaf3f6077af28216832a30 Mon Sep 17 00:00:00 2001
From: Darren Clarke <darren@redaranj.com>
Date: Tue, 30 May 2023 09:05:40 +0000
Subject: [PATCH] Use NextJS middleware for proxying

---
 apps/leafcutter/components/Question.tsx       |  1 -
 apps/leafcutter/next.config.js                |  6 +-
 apps/leafcutter/pages/faq.tsx                 |  4 +-
 .../link/components/InternalZammadWrapper.tsx | 21 ++++---
 apps/link/components/LeafcutterWrapper.tsx    |  6 +-
 apps/link/components/MetamigoWrapper.tsx      | 41 +++++++++++++
 apps/link/middleware.ts                       | 42 ++++++++++++-
 apps/link/next.config.js                      |  9 +--
 apps/link/pages/_app.tsx                      |  2 +-
 apps/link/pages/api/proxy/[[...path]].ts      | 39 ------------
 docker/zammad/setup.rb                        | 10 +++
 package-lock.json                             |  6 +-
 package.json                                  | 61 ++++++++++---------
 13 files changed, 154 insertions(+), 94 deletions(-)
 create mode 100644 apps/link/components/MetamigoWrapper.tsx
 delete mode 100644 apps/link/pages/api/proxy/[[...path]].ts

diff --git a/apps/leafcutter/components/Question.tsx b/apps/leafcutter/components/Question.tsx
index 9393cb5..50af2a9 100644
--- a/apps/leafcutter/components/Question.tsx
+++ b/apps/leafcutter/components/Question.tsx
@@ -68,7 +68,6 @@ export const Question: FC<QuestionProps> = ({ question, answer }) => {
       </AccordionSummary>
       <AccordionDetails sx={{ border: 0 }}>
         <Box
-          component="p"
           sx={{ ...p, p: 2, border: `1px solid ${lavender}`, borderRadius: 3 }}
         >
           <ReactMarkdown>{answer}</ReactMarkdown>
diff --git a/apps/leafcutter/next.config.js b/apps/leafcutter/next.config.js
index 3aaa53f..d88693b 100644
--- a/apps/leafcutter/next.config.js
+++ b/apps/leafcutter/next.config.js
@@ -2,17 +2,19 @@ module.exports = {
   publicRuntimeConfig: {
     embedded: Boolean(process.env.LINK_EMBEDDED),
   },
+  basePath: "/proxy/leafcutter",
+  assetPrefix: "/proxy/leafcutter",
   i18n: {
     locales: ["en", "fr"],
     defaultLocale: "en",
   },
 
-  rewrites: async () => ({
+  /*   rewrites: async () => ({
     fallback: [
       {
         source: "/:path*",
         destination: "/api/proxy/:path*",
       },
     ],
-  }),
+  }) */
 };
diff --git a/apps/leafcutter/pages/faq.tsx b/apps/leafcutter/pages/faq.tsx
index 71f0188..79181ba 100644
--- a/apps/leafcutter/pages/faq.tsx
+++ b/apps/leafcutter/pages/faq.tsx
@@ -31,6 +31,7 @@ const FAQ = () => {
       question: t("whatCanYouDoWithLeafcutterQuestion"),
       answer: t("whatCanYouDoWithLeafcutterAnswer"),
     },
+
     {
       question: t("whereIsTheDataComingFromQuestion"),
       answer: t("whereIsTheDataComingFromAnswer"),
@@ -43,6 +44,7 @@ const FAQ = () => {
       question: t("howDoWeKeepTheDataSafeQuestion"),
       answer: t("howDoWeKeepTheDataSafeAnswer"),
     },
+
     {
       question: t("howLongDoYouKeepTheDataQuestion"),
       answer: t("howLongDoYouKeepTheDataAnswer"),
@@ -94,7 +96,7 @@ const FAQ = () => {
           </Grid>
         </Grid>
       </PageHeader>
-      {questions.map((q, index) => (
+      {questions.map((q: any, index: number) => (
         <Question key={index} question={q.question} answer={q.answer} />
       ))}
     </Layout>
diff --git a/apps/link/components/InternalZammadWrapper.tsx b/apps/link/components/InternalZammadWrapper.tsx
index faef7df..e1c96f9 100644
--- a/apps/link/components/InternalZammadWrapper.tsx
+++ b/apps/link/components/InternalZammadWrapper.tsx
@@ -1,4 +1,5 @@
 import { FC, useState } from "react";
+import getConfig from "next/config";
 import { useRouter } from "next/router";
 import Iframe from "react-iframe";
 
@@ -13,13 +14,16 @@ export const InternalZammadWrapper: FC<InternalZammadWrapperProps> = ({
 }) => {
   const router = useRouter();
   const [display, setDisplay] = useState("none");
-  const url = `${origin}/zammad${path}`;
-  console.log({ origin, path, url });
+  const {
+    publicRuntimeConfig: { linkURL },
+  } = getConfig();
+  const url = `${linkURL}/proxy/zammad${path}`;
+  console.log({ url });
 
   return (
     // @ts-ignore
     <Iframe
-      id="link"
+      id="zammad"
       url={url}
       width="100%"
       height="100%"
@@ -27,6 +31,8 @@ export const InternalZammadWrapper: FC<InternalZammadWrapperProps> = ({
       styles={{ display }}
       onLoad={() => {
         const linkElement = document.querySelector("iframe");
+        // const baseElement = linkElement.contentDocument.createElement("base");
+        // baseElement.href = `${linkURL}/proxy/zammad`;
         if (
           linkElement.contentDocument &&
           linkElement.contentDocument?.querySelector &&
@@ -50,15 +56,16 @@ export const InternalZammadWrapper: FC<InternalZammadWrapperProps> = ({
           // @ts-ignore
           if (linkElement.contentDocument.querySelector(".overview-header")) {
             // @ts-ignore
-            linkElement.contentDocument.querySelector(".overview-header").style =
-              "display: none";
+            linkElement.contentDocument.querySelector(
+              ".overview-header"
+            ).style = "display: none";
           }
 
           setDisplay("inherit");
 
           if (linkElement.contentWindow) {
-            linkElement.contentWindow.addEventListener('hashchange', () => {
-              const hash = linkElement.contentWindow?.location?.hash ?? ""
+            linkElement.contentWindow.addEventListener("hashchange", () => {
+              const hash = linkElement.contentWindow?.location?.hash ?? "";
               if (hash.startsWith("#ticket/zoom/")) {
                 setDisplay("none");
                 const ticketID = hash.split("/").pop();
diff --git a/apps/link/components/LeafcutterWrapper.tsx b/apps/link/components/LeafcutterWrapper.tsx
index 06a58ef..b2850dc 100644
--- a/apps/link/components/LeafcutterWrapper.tsx
+++ b/apps/link/components/LeafcutterWrapper.tsx
@@ -11,9 +11,9 @@ type LeafcutterWrapperProps = {
 
 export const LeafcutterWrapper: FC<LeafcutterWrapperProps> = ({ path }) => {
   const {
-    publicRuntimeConfig: { leafcutterURL },
+    publicRuntimeConfig: { linkURL },
   } = getConfig();
-  const fullLeafcutterURL = `${leafcutterURL}/${path}`;
+  const fullLeafcutterURL = `${linkURL}/proxy/leafcutter/${path}`;
 
   return (
     <Layout>
@@ -28,7 +28,7 @@ export const LeafcutterWrapper: FC<LeafcutterWrapperProps> = ({ path }) => {
       >
         <Grid item sx={{ height: "100vh", width: "100%" }}>
           <Iframe
-            id="link"
+            id="leafcutter"
             url={fullLeafcutterURL}
             width="100%"
             height="100%"
diff --git a/apps/link/components/MetamigoWrapper.tsx b/apps/link/components/MetamigoWrapper.tsx
new file mode 100644
index 0000000..2e38bc5
--- /dev/null
+++ b/apps/link/components/MetamigoWrapper.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 MetamigoWrapperProps = {
+  path: string;
+};
+
+export const MetamigoWrapper: FC<MetamigoWrapperProps> = ({ path }) => {
+  const {
+    publicRuntimeConfig: { linkURL },
+  } = getConfig();
+  const fullMetamigoURL = `${linkURL}/metamigo/${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={fullMetamigoURL}
+            width="100%"
+            height="100%"
+            frameBorder={0}
+          />
+        </Grid>
+      </Grid>
+    </Layout>
+  );
+};
diff --git a/apps/link/middleware.ts b/apps/link/middleware.ts
index 4dc393f..78f2ade 100644
--- a/apps/link/middleware.ts
+++ b/apps/link/middleware.ts
@@ -1,7 +1,46 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
 import { withAuth } from "next-auth/middleware";
+import { getToken } from "next-auth/jwt";
+
+const rewriteURL = (request: NextRequest, originBaseURL: string, destinationBaseURL: string, headers: any = {}) => {
+  if (request.nextUrl.pathname.includes('/_next/static/development/')) {
+    return NextResponse.next();
+  }
+
+  const destinationURL = request.url.replace(originBaseURL, destinationBaseURL);
+  console.log(`Rewriting ${request.url} to ${destinationURL}`);
+
+  return NextResponse.rewrite(new URL(destinationURL), { ...request.headers, ...headers });
+};
+
+const checkRewrites = async (request: NextRequest) => {
+  if (request.nextUrl.pathname.startsWith('/proxy/leafcutter')) {
+    return rewriteURL(request, process.env.LINK_URL, process.env.LEAFCUTTER_URL);
+  } else if (request.nextUrl.pathname.startsWith('/proxy/metamigo')) {
+    return rewriteURL(request, process.env.LINK_URL, process.env.METAMIGO_URL);
+  } else if (request.nextUrl.pathname.startsWith('/proxy/zammad')) {
+    const session = await getToken({
+      req: request,
+      secret: process.env.NEXTAUTH_SECRET,
+    });
+    const headers = {
+      'X-Forwarded-User': session.email.toLowerCase(),
+      host: 'zammad.example.com'
+    };
+
+    return rewriteURL(request, `${process.env.LINK_URL}/proxy/zammad`, process.env.ZAMMAD_URL, headers);
+  } else if (request.nextUrl.pathname.startsWith('/assets')) {
+    console.log('asset');
+    return rewriteURL(request, `${process.env.LINK_URL}`, process.env.ZAMMAD_URL);
+  } else if (request.nextUrl.pathname.startsWith('/proxy/assets') || request.nextUrl.pathname.startsWith('/proxy/api')) {
+    console.log('proxy asset');
+    return rewriteURL(request, `${process.env.LINK_URL}/proxy`, process.env.ZAMMAD_URL);
+  }
+};
 
 export default withAuth(
-  () => { },
+  checkRewrites,
   {
     pages: {
       signIn: `/login`,
@@ -32,3 +71,4 @@ export default withAuth(
     }
   }
 );
+
diff --git a/apps/link/next.config.js b/apps/link/next.config.js
index 2308721..9d9da3a 100644
--- a/apps/link/next.config.js
+++ b/apps/link/next.config.js
@@ -2,17 +2,10 @@
 const nextConfig = {
   reactStrictMode: true,
   publicRuntimeConfig: {
+    linkURL: process.env.LINK_URL,
     leafcutterURL: process.env.LEAFCUTTER_URL,
     metamigoURL: process.env.METAMIGO_URL,
   },
-  rewrites: async () => ({
-    fallback: [
-      {
-        source: "/:path*",
-        destination: "/api/proxy/:path*",
-      },
-    ],
-  }),
 };
 
 module.exports = nextConfig;
diff --git a/apps/link/pages/_app.tsx b/apps/link/pages/_app.tsx
index ed759e2..754b65c 100644
--- a/apps/link/pages/_app.tsx
+++ b/apps/link/pages/_app.tsx
@@ -34,7 +34,7 @@ export default function LinkWeb(props: LinkWebProps) {
     typeof window !== "undefined" && window.location.origin
       ? window.location.origin
       : null;
-  const client = new GraphQLClient(`${origin}/graphql`, {
+  const client = new GraphQLClient(`${origin}/proxy/zammad/graphql`, {
     headers: {
       "Content-Type": "application/json",
       Accept: "application/json",
diff --git a/apps/link/pages/api/proxy/[[...path]].ts b/apps/link/pages/api/proxy/[[...path]].ts
deleted file mode 100644
index 2fa510a..0000000
--- a/apps/link/pages/api/proxy/[[...path]].ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { NextApiRequest, NextApiResponse } from 'next';
-import { createProxyMiddleware } from 'http-proxy-middleware';
-import { getToken } from "next-auth/jwt";
-
-const withAuthInfo =
-  (handler) => async (req: NextApiRequest, res: NextApiResponse) => {
-    const session = await getToken({
-      req,
-      secret: process.env.NEXTAUTH_SECRET,
-    });
-
-    if (!session) {
-      return res.redirect("/login");
-    }
-
-    if (req.headers) {
-      req.headers['X-Forwarded-User'] = session.email.toLowerCase();
-      req.headers['host'] = 'zammad.example.com';
-    }
-
-    return handler(req, res);
-  };
-
-const proxy = createProxyMiddleware({
-  target: process.env.ZAMMAD_URL,
-  changeOrigin: true,
-  xfwd: true,
-  ws: false,
-  pathRewrite: { "^/zammad": "" },
-});
-
-export default withAuthInfo(proxy);
-
-export const config = {
-  api: {
-    bodyParser: false,
-    externalResolver: true,
-  },
-};
diff --git a/docker/zammad/setup.rb b/docker/zammad/setup.rb
index 7770aa0..62bbbce 100644
--- a/docker/zammad/setup.rb
+++ b/docker/zammad/setup.rb
@@ -3,8 +3,18 @@
 packages = Dir.glob('/opt/zammad/contrib/link/addons/*')
 
 packages.each do |package|
+  puts "Attempting to uninstall #{package} package..."
+  existing_package = Package.find_by(name: package.name)
+  if existing_package.blank?
+    puts "Package #{name} is not installed."
+  else
+    puts "Uninstalling #{package.name} #{package.version}..."
+    Package.uninstall(name: package.name, version: package.version)
+    puts 'Uninstalled'
+  end
   puts "Installing #{package} package..."
   Package.install(file: package)
+  puts 'Installed'
 rescue StandardError => e
   puts e.message
 end
diff --git a/package-lock.json b/package-lock.json
index 1b67c04..d5af193 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,10 @@
       "workspaces": [
         "apps/*",
         "packages/*"
-      ]
+      ],
+      "dependencies": {
+        "prettier": "^2.8.8"
+      }
     },
     "apps/leafcutter": {
       "version": "0.2.0",
@@ -17297,7 +17300,6 @@
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
       "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
-      "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
       },
diff --git a/package.json b/package.json
index 71ea5f5..c7783e1 100644
--- a/package.json
+++ b/package.json
@@ -1,31 +1,34 @@
 {
-  "name": "link-stack",
-  "version": "2.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "dev": "dotenv -- turbo run dev"
-  },
-  "packageManager": "npm@9.3.1",
-  "workspaces": [
-    "apps/*",
-    "packages/*"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://gitlab.com/digiresilience/link/link-stack.git"
-  },
-  "author": "Darren Clarke",
-  "license": "ISC",
-  "overrides": {
-    "@mui/styles": {
-      "react": "18.2.0"
-    },
-    "typeorm": {
-      "pg": "^8.11.0"
-    },
-    "hapi-postgraphile": {
-      "pg": "^8.11.0"
-    }
-  }
+	"name": "link-stack",
+	"version": "2.0.0",
+	"description": "",
+	"main": "index.js",
+	"scripts": {
+		"dev": "dotenv -- turbo run dev"
+	},
+	"packageManager": "npm@9.3.1",
+	"workspaces": [
+		"apps/*",
+		"packages/*"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://gitlab.com/digiresilience/link/link-stack.git"
+	},
+	"author": "Darren Clarke",
+	"license": "ISC",
+	"overrides": {
+		"@mui/styles": {
+			"react": "18.2.0"
+		},
+		"typeorm": {
+			"pg": "^8.11.0"
+		},
+		"hapi-postgraphile": {
+			"pg": "^8.11.0"
+		}
+	},
+	"devDependencies": {
+		"prettier": "^2.8.8"
+	}
 }