From 50553b0565c7e161962ec9aa3c92ba6baeed9f8a Mon Sep 17 00:00:00 2001
From: Dat Boi Diego <fidiego@users.noreply.github.com>
Date: Thu, 11 Jul 2024 11:59:10 -0500
Subject: [PATCH 01/14]  feat: interpolate install.install_inputs.values into
 the post_install_markdown (#46)

* fix: update install inputs

* feat: interpolate install.install_inputs.values into the post_install_markdown

* feat: hijack enter for stepper navigation

the stepper is wrapped in one big form element so pressing enter in any
of the steps would submit the form. this is less than intutitive
behavior since users are likely to interpret the sections of the stepper
as distinct forms.

as a result, we opt to hijack/intercept enters on the form and use it to
navigate the stepper instead of submitting the form. now, the only way
to submit the form is via the (re)provision button.

* feat: interpolate install.id into the post install markdown
---
 app/[installer-slug]/actions.ts               |  2 +-
 .../InstallStatusContent/InstallButton.tsx    |  7 +-
 .../InstallStatusContent/index.tsx            | 95 +++++++++++++------
 components/InstallStepper/index.tsx           | 16 +++-
 4 files changed, 87 insertions(+), 33 deletions(-)

diff --git a/app/[installer-slug]/actions.ts b/app/[installer-slug]/actions.ts
index 22ba534..3144ead 100644
--- a/app/[installer-slug]/actions.ts
+++ b/app/[installer-slug]/actions.ts
@@ -125,7 +125,7 @@ export async function redeployInstall(
     return updateRes;
   }
 
-  if (reqBody.inputs.length > 0) {
+  if (Object.keys(reqBody.inputs).length > 0) {
     const inputsRes = await updateInputs(id, app, formData);
     if (inputsRes.error) {
       return inputsRes;
diff --git a/components/InstallStepper/InstallStatusContent/InstallButton.tsx b/components/InstallStepper/InstallStatusContent/InstallButton.tsx
index 8ea4e44..625ee73 100644
--- a/components/InstallStepper/InstallStatusContent/InstallButton.tsx
+++ b/components/InstallStepper/InstallStatusContent/InstallButton.tsx
@@ -4,9 +4,12 @@ export const InstallButton = ({ install }) => {
   const loading = install.status === "provisioning";
 
   let label = "Create Install";
-  if (install && install.id && install.id.length > 0)
+  if (install && install.id && install.id.length > 0) {
     label = "Reprovision Install";
-  if (loading) label = "Provisioning";
+  }
+  if (loading) {
+    label = "Provisioning";
+  }
 
   return (
     <Button
diff --git a/components/InstallStepper/InstallStatusContent/index.tsx b/components/InstallStepper/InstallStatusContent/index.tsx
index 0beb73f..b928f5c 100644
--- a/components/InstallStepper/InstallStatusContent/index.tsx
+++ b/components/InstallStepper/InstallStatusContent/index.tsx
@@ -4,49 +4,86 @@ import { StatusIcon } from "@/components";
 import { InstallButton } from "./InstallButton";
 import { Markdown } from "@/components/Markdown";
 
+const interpolateInputsAndInstallId = (install_id, inputs: {}, text) => {
+  let interpolated = text;
+  Object.keys(inputs).forEach((key) => {
+    let value = inputs[key];
+    let regex = new RegExp(
+      String.raw`\{\{[ ]{0,1}\.nuon\.install\.inputs\.${key}[ ]{0,1}\}\}`,
+      "g",
+    ); // https://regex101.com/r/U5iEei/1
+    interpolated = interpolated.replaceAll(regex, value);
+  });
+
+  if (install_id) {
+    // interpolate install.id
+    let regex = new RegExp(
+      String.raw`\{\{[ ]{0,1}\.nuon\.install\.id[ ]{0,1}\}\}`,
+      "g",
+    ); // https://regex101.com/r/U5iEei/1
+    interpolated = interpolated.replaceAll(regex, install_id);
+  }
+
+  return interpolated;
+};
+
 export const InstallStatusContent = ({
   open = false,
   onClick = () => {},
   install = {
+    id: null,
     status: "",
     status_description: "",
+    install_inputs: [],
   },
   post_install_markdown = "",
-}) => (
-  <Accordion open={open}>
-    <AccordionHeader
-      className={
-        open
-          ? `px-4
+}) => {
+  let install_input_values = {};
+  if (install.install_inputs && install.install_inputs.length > 0) {
+    install_input_values =
+      install.install_inputs[install.install_inputs.length - 1].values;
+  }
+  const post_install_markdown_with_inputs = interpolateInputsAndInstallId(
+    install.id,
+    install_input_values,
+    post_install_markdown,
+  );
+  return (
+    <Accordion open={open}>
+      <AccordionHeader
+        className={
+          open
+            ? `px-4
               text-accordion-header-active-color
               dark:text-accordion-header-active-color-dark
               hover:!text-gray-500
               bg-accordion-header-active-background
               dark:bg-accordion-header-active-background-dark`
-          : "px-4"
-      }
-      onClick={onClick}
-    >
-      <span>
-        Install Status <StatusIcon status={install.status} />{" "}
-        <span className="text-sm font-medium">
-          {install.status_description}
+            : "px-4"
+        }
+        onClick={onClick}
+      >
+        <span>
+          Install Status <StatusIcon status={install.status} />{" "}
+          <span className="text-sm font-medium">
+            {install.status_description}
+          </span>
         </span>
-      </span>
-    </AccordionHeader>
-    <AccordionBody>
-      <div className="grid grid-cols-2 gap-2">
-        <div>
-          <Markdown content={post_install_markdown} />
-        </div>
+      </AccordionHeader>
+      <AccordionBody>
+        <div className="grid grid-cols-2 gap-2">
+          <div>
+            <Markdown content={post_install_markdown_with_inputs} />
+          </div>
 
-        <div>
-          <InstallStatus install={install} />
-          <div className="mt-4 flex justify-end">
-            <InstallButton install={install} />
+          <div>
+            <InstallStatus install={install} />
+            <div className="mt-4 flex justify-end">
+              <InstallButton install={install} />
+            </div>
           </div>
         </div>
-      </div>
-    </AccordionBody>
-  </Accordion>
-);
+      </AccordionBody>
+    </Accordion>
+  );
+};
diff --git a/components/InstallStepper/index.tsx b/components/InstallStepper/index.tsx
index c0c824e..c06d213 100644
--- a/components/InstallStepper/index.tsx
+++ b/components/InstallStepper/index.tsx
@@ -55,6 +55,11 @@ const InstallStepper = ({
   const formAction = async (event) => {
     event.preventDefault();
 
+    if (event.key == "Enter") {
+      // this should have been caught by onKeyUp but we include it here also
+      handleNext();
+    }
+
     const formData = new FormData(event.target);
     let installID = "";
     if (install.id === "") {
@@ -225,7 +230,16 @@ const InstallStepper = ({
         </Step>
       </Stepper>
 
-      <form className="mt-10" onSubmit={formAction}>
+      <form
+        className="mt-10"
+        onSubmit={formAction}
+        onKeyUp={(e) => {
+          e.preventDefault();
+          if (e.key == "Enter") {
+            handleNext();
+          }
+        }}
+      >
         <CompanyContent
           name={install.name}
           open={activeStep === 0}

From 2676b104cefa5af4fc017a09b209809cf3045614 Mon Sep 17 00:00:00 2001
From: Dat Boi Diego <fidiego@users.noreply.github.com>
Date: Thu, 11 Jul 2024 16:34:38 -0500
Subject: [PATCH 02/14] feat: handle dark theme in cards (#48)

---
 components/Card.tsx | 9 ++++++++-
 theme.ts.example    | 3 +++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/Card.tsx b/components/Card.tsx
index e961579..cf3b5b8 100644
--- a/components/Card.tsx
+++ b/components/Card.tsx
@@ -6,7 +6,14 @@ export const Card: FC<{ children?: React.ReactNode; className?: string }> = ({
 }) => {
   return (
     <div
-      className={`flex flex-col gap-2 bg-card-background items-start border-card-border-color border-card-border-width rounded-card-radius shadow-card-shadow shadow-card-color ${className}`}
+      className={`
+        flex flex-col gap-2  items-start
+        bg-card-background dark:bg-card-background-dark
+        border-card-border-color dark:border-card-border-color-dark
+        shadow-card-shadow
+        shadow-card-color dark:shadow-card-color-dark
+        border-card-border-width
+        rounded-card-radius ${className}`}
     >
       {children}
     </div>
diff --git a/theme.ts.example b/theme.ts.example
index 274b764..d8b2c89 100644
--- a/theme.ts.example
+++ b/theme.ts.example
@@ -16,6 +16,9 @@ export default {
         "card-text-color": colors.white,
         "card-border-color": colors.black,
         "card-background": "rgb(255 255 255 / 5%)",
+        "card-text-color-dark": colors. black,
+        "card-border-color-dark": colors.black,
+        "card-background-dark": "rgb(0,0,0 / 5%)",
         "accordion-header-color": colors.black,
         "accordion-header-background": primary["500"],
         "accordion-header-active-color": colors.black,

From f54c4a1d261ffa0248ab05af50becb5102477aac Mon Sep 17 00:00:00 2001
From: Jordan Acosta <jordan@nuon.co>
Date: Thu, 11 Jul 2024 15:32:04 -0700
Subject: [PATCH 03/14] fix: handle installs with no inputs (#47)

With the recent changes to render input values in the form, it looks
like the installer could no longer handle installs with no inputs. This
change should fix that.
---
 components/InstallStepper/index.tsx | 30 +++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/components/InstallStepper/index.tsx b/components/InstallStepper/index.tsx
index c06d213..51b4d1f 100644
--- a/components/InstallStepper/index.tsx
+++ b/components/InstallStepper/index.tsx
@@ -23,16 +23,6 @@ const InstallStepper = ({
   getInstall,
   redeployInstall,
 }) => {
-  const [activeStep, setActiveStep] = React.useState(
-    existingInstall ? app.input_config.input_groups.length + 2 : 0,
-  );
-  const [isLastStep, setIsLastStep] = React.useState(false);
-  const [isFirstStep, setIsFirstStep] = React.useState(false);
-
-  const handleNext = () => !isLastStep && setActiveStep((cur) => cur + 1);
-  const handlePrev = () => !isFirstStep && setActiveStep((cur) => cur - 1);
-  const router = useRouter();
-
   // track state of install
   const [install, setInstall] = React.useState(
     existingInstall
@@ -42,9 +32,25 @@ const InstallStepper = ({
           status: "not created",
           status_description: "install has not been created yet",
           install_components: [],
+          install_inputs: [],
         },
   );
 
+  // TODO: break this out into a testable function
+  const _install_inputs = install.install_inputs[0] || [{ values: {} }];
+  const install_input_values = _install_inputs.values;
+  const input_groups = app.input_config.input_groups || [];
+
+  const [activeStep, setActiveStep] = React.useState(
+    existingInstall ? input_groups.length + 2 : 0,
+  );
+  const [isLastStep, setIsLastStep] = React.useState(false);
+  const [isFirstStep, setIsFirstStep] = React.useState(false);
+
+  const handleNext = () => !isLastStep && setActiveStep((cur) => cur + 1);
+  const handlePrev = () => !isFirstStep && setActiveStep((cur) => cur - 1);
+  const router = useRouter();
+
   const [error, setError] = React.useState({
     description: "",
     error: "",
@@ -136,10 +142,6 @@ const InstallStepper = ({
     }
   }, 1000 * 10);
 
-  // TODO: break this out into a testable function
-  const _install_inputs = install.install_inputs || [{ values: {} }];
-  const install_input_values = _install_inputs[0].values;
-  const input_groups = app.input_config.input_groups || [];
   const stepContent = input_groups.map((group, idx) => (
     <GroupContent
       key={idx}

From 627afc309e8f3167bcfdb867d19b66e922d5a72d Mon Sep 17 00:00:00 2001
From: Dat Boi Diego <fidiego@users.noreply.github.com>
Date: Mon, 15 Jul 2024 11:54:03 -0500
Subject: [PATCH 04/14] Fd/display name (#49)

* theme example: dark card updates

* app: use display name, if available
---
 app/page.tsx     | 4 +++-
 theme.ts.example | 6 +++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 931a338..6987c16 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -34,7 +34,9 @@ export default async function Home({ searchParams }) {
             apps.map((app) => (
               <Card className="p-6" key={app.id}>
                 <span>
-                  <h2 className="text-lg font-semibold mb-2">{app.name}</h2>
+                  <h2 className="text-lg font-semibold mb-2">
+                    {app.display_name ? app.display_name : app.name}
+                  </h2>
                   <p className="text-xs leading-relaxed">{app.description}</p>
                 </span>
 
diff --git a/theme.ts.example b/theme.ts.example
index d8b2c89..1266e1b 100644
--- a/theme.ts.example
+++ b/theme.ts.example
@@ -16,9 +16,9 @@ export default {
         "card-text-color": colors.white,
         "card-border-color": colors.black,
         "card-background": "rgb(255 255 255 / 5%)",
-        "card-text-color-dark": colors. black,
-        "card-border-color-dark": colors.black,
-        "card-background-dark": "rgb(0,0,0 / 5%)",
+        "card-text-color-dark": colors.white,
+        "card-border-color-dark": colors.white,
+        "card-background-dark": colors.black,
         "accordion-header-color": colors.black,
         "accordion-header-background": primary["500"],
         "accordion-header-active-color": colors.black,

From 29caec37dcccd0020f97235528e3510f0413238c Mon Sep 17 00:00:00 2001
From: Dat Boi Diego <fidiego@users.noreply.github.com>
Date: Tue, 16 Jul 2024 09:49:04 -0500
Subject: [PATCH 05/14] feat: use the app display name in the installer page
 (#50)

if it is present
---
 app/[installer-slug]/[install-id]/page.tsx | 4 +++-
 app/[installer-slug]/page.tsx              | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/[installer-slug]/[install-id]/page.tsx b/app/[installer-slug]/[install-id]/page.tsx
index 427f94f..30864dc 100644
--- a/app/[installer-slug]/[install-id]/page.tsx
+++ b/app/[installer-slug]/[install-id]/page.tsx
@@ -36,7 +36,9 @@ export default async function Installer({ params, searchParams }) {
         </div>
 
         <div className="text-center">
-          <h1 className="text-2xl font-semibold mb-2">{app.name}</h1>
+          <h1 className="text-2xl font-semibold mb-2">
+            {app.display_name || app.name}
+          </h1>
           <p>{app?.description}</p>
         </div>
       </header>
diff --git a/app/[installer-slug]/page.tsx b/app/[installer-slug]/page.tsx
index 97767be..e2005c9 100644
--- a/app/[installer-slug]/page.tsx
+++ b/app/[installer-slug]/page.tsx
@@ -33,7 +33,9 @@ export default async function Installer({ params, searchParams }) {
         </div>
 
         <div className="text-center">
-          <h1 className="text-2xl font-semibold mb-2">{app.name}</h1>
+          <h1 className="text-2xl font-semibold mb-2">
+            {app.display_name || app.name}
+          </h1>
           <p>{app?.description}</p>
         </div>
       </header>

From 97f7800abe38ad4321665a70f45033ba45bc55b8 Mon Sep 17 00:00:00 2001
From: Dat Boi Diego <fidiego@users.noreply.github.com>
Date: Tue, 16 Jul 2024 15:37:20 -0500
Subject: [PATCH 06/14] Fd/card shadow and installer order (#51)

* feat: mov cloud configs after the app configs

* feat: add card drop shadows back and in theme
---
 app/page.tsx                                  |  5 +++-
 components/Card.tsx                           |  2 --
 components/InstallStepper/GroupContent.tsx    |  6 ++---
 .../InstallStatusContent/InstallButton.tsx    |  7 +++++-
 components/InstallStepper/index.tsx           | 23 +++++++++----------
 theme.ts.example                              |  5 ++--
 6 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 6987c16..245147a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -32,7 +32,10 @@ export default async function Home({ searchParams }) {
         <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-6">
           {apps.length &&
             apps.map((app) => (
-              <Card className="p-6" key={app.id}>
+              <Card
+                className="p-6 shadow-card-shadow dark:shadow-card-shadow-dark"
+                key={app.id}
+              >
                 <span>
                   <h2 className="text-lg font-semibold mb-2">
                     {app.display_name ? app.display_name : app.name}
diff --git a/components/Card.tsx b/components/Card.tsx
index cf3b5b8..f56873e 100644
--- a/components/Card.tsx
+++ b/components/Card.tsx
@@ -10,8 +10,6 @@ export const Card: FC<{ children?: React.ReactNode; className?: string }> = ({
         flex flex-col gap-2  items-start
         bg-card-background dark:bg-card-background-dark
         border-card-border-color dark:border-card-border-color-dark
-        shadow-card-shadow
-        shadow-card-color dark:shadow-card-color-dark
         border-card-border-width
         rounded-card-radius ${className}`}
     >
diff --git a/components/InstallStepper/GroupContent.tsx b/components/InstallStepper/GroupContent.tsx
index 695e16e..05090c7 100644
--- a/components/InstallStepper/GroupContent.tsx
+++ b/components/InstallStepper/GroupContent.tsx
@@ -10,11 +10,11 @@ export const GroupContent = ({
   searchParams = {},
   install_input_values = {},
 }) => (
-  <Accordion key={idx} open={activeStep === idx + 2}>
+  <Accordion key={idx} open={activeStep === idx + 1}>
     <AccordionHeader
-      onClick={() => setActiveStep(idx + 2)}
+      onClick={() => setActiveStep(idx + 1)}
       className={
-        activeStep === idx + 2
+        activeStep === idx + 1
           ? `px-4
               text-accordion-header-active-color
               dark:text-accordion-header-active-color-dark
diff --git a/components/InstallStepper/InstallStatusContent/InstallButton.tsx b/components/InstallStepper/InstallStatusContent/InstallButton.tsx
index 625ee73..3d0dec1 100644
--- a/components/InstallStepper/InstallStatusContent/InstallButton.tsx
+++ b/components/InstallStepper/InstallStatusContent/InstallButton.tsx
@@ -15,7 +15,12 @@ export const InstallButton = ({ install }) => {
     <Button
       loading={loading}
       type="submit"
-      className="text-sm text-button-text-color bg-button-bg-color hover:bg-button-bg-hover focus:bg-button-bg-focus active:bg-button-bg-active shadow-button-shadow !border-button-border-color border-button-border-width rounded-button-radius px-4 py-1.5"
+      className={`
+          text-sm text-button-text-color
+          bg-button-bg-color hover:bg-button-bg-hover focus:bg-button-bg-focus active:bg-button-bg-active
+          !shadow-button-shadow !dark:shadow-button-shadow-dark
+          !border-button-border-color border-button-border-width rounded-button-radius
+          px-4 py-1.5 mr-1`}
     >
       {label}
     </Button>
diff --git a/components/InstallStepper/index.tsx b/components/InstallStepper/index.tsx
index 51b4d1f..4363eb0 100644
--- a/components/InstallStepper/index.tsx
+++ b/components/InstallStepper/index.tsx
@@ -148,7 +148,7 @@ const InstallStepper = ({
       group={group}
       install_input_values={install_input_values}
       idx={idx}
-      setActiveStep={() => setActiveStep(idx + 2)}
+      setActiveStep={() => setActiveStep(idx + 1)}
       activeStep={activeStep}
     />
   ));
@@ -159,9 +159,9 @@ const InstallStepper = ({
       activeClassName="border-4 border-step-active-border-color dark:border-step-active-border-color"
       completedClassName="border-4 border-step-complete-border-color dark:border-step-complete-border-color"
       key={idx}
-      onClick={() => setActiveStep(idx + 2)}
+      onClick={() => setActiveStep(idx + 1)}
     >
-      {idx + 3}
+      {idx + 2}
       <div className="absolute -bottom-[2rem] w-max text-center">
         <Typography variant="h6" className="text-black dark:text-gray-100">
           {group.display_name}
@@ -200,13 +200,15 @@ const InstallStepper = ({
           </div>
         </Step>
 
+        {...steps}
+
         <Step
           className="border-4 border-black bg-black text-white dark:border-white dark:bg-white dark:text-black"
           activeClassName="border-4 border-step-active-border-color dark:border-step-active-border-color"
           completedClassName="border-4 border-step-complete-border-color dark:border-step-complete-border-color"
-          onClick={() => setActiveStep(1)}
+          onClick={() => setActiveStep(steps.length + 1)}
         >
-          2
+          {steps.length + 2}
           <div className="absolute -bottom-[2rem] w-max text-center">
             <Typography variant="h6" className="text-black dark:text-gray-100">
               AWS IAM Role
@@ -214,8 +216,6 @@ const InstallStepper = ({
           </div>
         </Step>
 
-        {...steps}
-
         <Step
           className="border-4 border-black bg-black text-white dark:border-white dark:bg-white dark:text-black"
           activeClassName="border-4 border-step-active-border-color dark:border-step-active-border-color"
@@ -223,7 +223,6 @@ const InstallStepper = ({
           onClick={() => setActiveStep(steps.length + 2)}
         >
           {steps.length + 3}
-
           <div className="absolute -bottom-[2rem] w-max text-center">
             <Typography variant="h6" className="text-black dark:text-gray-100">
               Install Status
@@ -248,18 +247,18 @@ const InstallStepper = ({
           onClick={() => setActiveStep(0)}
         />
 
+        {...stepContent}
+
         <CloudAccountContent
           app={app}
           aws_account={install.aws_account}
           azure_account={install.aws_account}
-          open={activeStep == 1}
-          onClick={() => setActiveStep(1)}
+          open={activeStep == steps.length + 1}
+          onClick={() => setActiveStep(steps.length + 1)}
           searchParams={searchParams}
           regions={regions}
         />
 
-        {...stepContent}
-
         <InstallStatusContent
           open={activeStep === steps.length + 2}
           onClick={() => setActiveStep(steps.length + 2)}
diff --git a/theme.ts.example b/theme.ts.example
index 1266e1b..cd80cc2 100644
--- a/theme.ts.example
+++ b/theme.ts.example
@@ -35,8 +35,9 @@ export default {
         "button-bg-active": primary["700"],
       },
       boxShadow: {
-        "card-shadow":
-          "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+        // card shadow classes are applied not applied by default. only on landing page cards.
+        "card-shadow": "4px 4px 0 0 black, 0 1px 2px -1px black",
+        "card-shadow-dark": "4px 4px 0 0 white, 0 1px 2px -1px white",
         "button-shadow":
           "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
       },

From e32dd9bec724fe15f1cecbbc2f16699eaff4c4e4 Mon Sep 17 00:00:00 2001
From: Dat Boi Diego <fidiego@users.noreply.github.com>
Date: Tue, 16 Jul 2024 15:48:25 -0500
Subject: [PATCH 07/14] fix: add padding to accordion header in azure section
 (#52)

---
 .../InstallStepper/CloudAccountContent.tsx       | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/components/InstallStepper/CloudAccountContent.tsx b/components/InstallStepper/CloudAccountContent.tsx
index 5aa6122..9e6c1de 100644
--- a/components/InstallStepper/CloudAccountContent.tsx
+++ b/components/InstallStepper/CloudAccountContent.tsx
@@ -49,7 +49,21 @@ export const CloudAccountContent = ({
 
     {app?.cloud_platform === "azure" && (
       <>
-        <AccordionHeader onClick={onClick}>Azure Account</AccordionHeader>
+        <AccordionHeader
+          className={
+            open
+              ? `px-4
+                  text-accordion-header-active-color
+                  dark:text-accordion-header-active-color-dark
+                  hover:!text-gray-500
+                  bg-accordion-header-active-background
+                  dark:bg-accordion-header-active-background-dark`
+              : "px-4"
+          }
+          onClick={onClick}
+        >
+          Azure Account
+        </AccordionHeader>
         <AccordionBody className="grid grid-cols-2 gap-4">
           <StepOneAzure />
           <Card>

From ccc805d6c235e17d02f08605258b007e5949842b Mon Sep 17 00:00:00 2001
From: Dat Boi Diego <fidiego@users.noreply.github.com>
Date: Wed, 17 Jul 2024 10:01:14 -0500
Subject: [PATCH 08/14] Fd/fix rendering of large logos (#53)

* theme: update default button shadow

* logo: ensure largest logos render
---
 app/[installer-slug]/page.tsx | 4 ++--
 theme.ts.example              | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/[installer-slug]/page.tsx b/app/[installer-slug]/page.tsx
index e2005c9..dd247a6 100644
--- a/app/[installer-slug]/page.tsx
+++ b/app/[installer-slug]/page.tsx
@@ -19,13 +19,13 @@ export default async function Installer({ params, searchParams }) {
   return (
     <>
       <header className="flex flex-col gap-4">
-        <div className="flex justify-between items-center pt-4">
+        <div className="flex justify-between items-center pt-4 pb-4">
           <Link className="w-fit" href="/">
             {"< Other installation options"}
           </Link>
           <Link href={installer?.metadata?.homepage_url}>
             <img
-              className="inline-block"
+              className="inline-block min-h-16 max-w-2xl"
               src={installer?.metadata?.logo_url}
               alt={installer?.metadata?.name}
             />
diff --git a/theme.ts.example b/theme.ts.example
index cd80cc2..9ba7a77 100644
--- a/theme.ts.example
+++ b/theme.ts.example
@@ -38,8 +38,8 @@ export default {
         // card shadow classes are applied not applied by default. only on landing page cards.
         "card-shadow": "4px 4px 0 0 black, 0 1px 2px -1px black",
         "card-shadow-dark": "4px 4px 0 0 white, 0 1px 2px -1px white",
-        "button-shadow":
-          "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+        "button-shadow": "3px 3px 0 0 black, 0 1px 2px -1px black",
+        "button-shadow-dark": "3px 3px 0 0 white, 0 1px 2px -1px white",
       },
       borderWidth: {
         "card-border-width": "1px",

From 204fb07843f27100fad7807da2eafde0b1746d03 Mon Sep 17 00:00:00 2001
From: Dat Boi Diego <fidiego@users.noreply.github.com>
Date: Wed, 24 Jul 2024 17:10:02 -0600
Subject: [PATCH 09/14] feat: delegation aware installer  (#54)

* feat: ignore .env files

* feat: delegation aware installer

only works for ios. is backwards compatible.
---
 .gitignore                                    |  4 ++
 components/AWSInstallerFormFields.tsx         |  1 +
 .../InstallStepper/CloudAccountContent.tsx    | 13 +++++-
 components/StepOneAWS.tsx                     | 42 ++++++++++++++++++-
 4 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index fd3dbb5..77a5cff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,7 @@
+.env
+.env.local
+.env.stage
+
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
diff --git a/components/AWSInstallerFormFields.tsx b/components/AWSInstallerFormFields.tsx
index 282c195..2aadfb6 100644
--- a/components/AWSInstallerFormFields.tsx
+++ b/components/AWSInstallerFormFields.tsx
@@ -25,6 +25,7 @@ export const AWSInstallerFormFields: FC<{
   searchParams?: Record<string, string>;
   regions: Array<Object>;
   aws_account: any | null;
+  aws_delegation_config: { iam_role_arn: "" } | null;
 }> = ({ searchParams = {}, regions, aws_account }) => {
   return (
     <fieldset className="p-4 w-full">
diff --git a/components/InstallStepper/CloudAccountContent.tsx b/components/InstallStepper/CloudAccountContent.tsx
index 9e6c1de..48da0db 100644
--- a/components/InstallStepper/CloudAccountContent.tsx
+++ b/components/InstallStepper/CloudAccountContent.tsx
@@ -7,8 +7,18 @@ import {
   Card,
 } from "@/components";
 
+interface AWSDelegationConfig {
+  iam_role_arn: string | null;
+}
+interface SandboxConfig {
+  aws_delegation_config: AWSDelegationConfig;
+}
+
 export const CloudAccountContent = ({
-  app = { cloud_platform: "aws" },
+  app = {
+    cloud_platform: "aws",
+    sandbox_config: { aws_delegation_config: { iam_role_arn: null } },
+  },
   aws_account = null,
   azure_account = null,
   open = false,
@@ -38,6 +48,7 @@ export const CloudAccountContent = ({
           <StepOneAWS app={app} />
           <Card>
             <AWSInstallerFormFields
+              aws_delegation_config={app?.sandbox_config?.aws_delegation_config}
               searchParams={searchParams}
               regions={regions}
               aws_account={aws_account}
diff --git a/components/StepOneAWS.tsx b/components/StepOneAWS.tsx
index 1f923bb..152b9b6 100644
--- a/components/StepOneAWS.tsx
+++ b/components/StepOneAWS.tsx
@@ -1,7 +1,47 @@
 import React, { type FC } from "react";
 import { Link, Card } from "@/components";
 
+/*
+ * Compose the Cloud Formation QuickCreate URL
+ *
+ * The templateUrl changes based on wether or not delegation is enabled.
+ *
+ */
+const composeCloudformationQuickCreateUrl = (app, aws_delegation_config) => {
+  const base_url =
+    "https://us-west-2.console.aws.amazon.com/cloudformation/home#/stacks/quickcreate";
+
+  let delegationEnabled =
+    aws_delegation_config && aws_delegation_config.iam_role_arn;
+  let params = {};
+
+  if (delegationEnabled) {
+    params = {
+      templateUrl:
+        "https://nuon-artifacts.s3.us-west-2.amazonaws.com/sandbox/aws-ecs/cloudformation-template.yaml",
+      stackName: `nuon-${app?.sandbox_config?.public_git_vcs_config?.directory}-permissions`,
+      param_DelegationRoleARN: `${aws_delegation_config?.iam_role_arn}`,
+    };
+  } else {
+    params = {
+      templateUrl:
+        app?.sandbox_config?.artifacts?.cloudformation_stack_template,
+      stackName: `nuon-${app?.sandbox_config?.public_git_vcs_config?.directory}-permissions`,
+      param_DelegationRoleARN: `${aws_delegation_config?.iam_role_arn}`,
+    };
+  }
+
+  let searchParams = new URLSearchParams(params);
+  let url = new URL(base_url);
+  return url + "?" + searchParams.toString();
+};
+
 export const StepOneAWS: FC<{ app: Record<string, any> }> = ({ app }) => {
+  let aws_delegation_config = app?.sandbox_config?.aws_delegation_config;
+  let quickCreateUrl = composeCloudformationQuickCreateUrl(
+    app,
+    aws_delegation_config,
+  );
   return (
     <div className="flex flex-col gap-4">
       <p>
@@ -40,7 +80,7 @@ export const StepOneAWS: FC<{ app: Record<string, any> }> = ({ app }) => {
 
         <Link
           className="text-sm mt-4"
-          href={`https://us-west-2.console.aws.amazon.com/cloudformation/home#/stacks/quickcreate?templateUrl=${app?.sandbox_config?.artifacts?.cloudformation_stack_template}&stackName=nuon-${app?.sandbox_config?.public_git_vcs_config?.directory}-permissions`}
+          href={quickCreateUrl}
           target="_blank"
           rel="noreferrer"
         >

From 571b6c21341b27b809abef5dbe9d2f631c9387b3 Mon Sep 17 00:00:00 2001
From: Dat Boi Diego <fidiego@users.noreply.github.com>
Date: Mon, 29 Jul 2024 16:05:30 -0500
Subject: [PATCH 10/14] fix: use the delegation template if delegation is
 enabled (#55)

---
 components/StepOneAWS.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/StepOneAWS.tsx b/components/StepOneAWS.tsx
index 152b9b6..8daf48e 100644
--- a/components/StepOneAWS.tsx
+++ b/components/StepOneAWS.tsx
@@ -18,7 +18,7 @@ const composeCloudformationQuickCreateUrl = (app, aws_delegation_config) => {
   if (delegationEnabled) {
     params = {
       templateUrl:
-        "https://nuon-artifacts.s3.us-west-2.amazonaws.com/sandbox/aws-ecs/cloudformation-template.yaml",
+        "https://nuon-artifacts.s3.us-west-2.amazonaws.com/sandbox/aws-ecs/cloudformation-template-delegation.yaml",
       stackName: `nuon-${app?.sandbox_config?.public_git_vcs_config?.directory}-permissions`,
       param_DelegationRoleARN: `${aws_delegation_config?.iam_role_arn}`,
     };

From e685460c2fd333fb8dbface7db69df32414cbb7e Mon Sep 17 00:00:00 2001
From: Dat Boi Diego <fidiego@users.noreply.github.com>
Date: Tue, 30 Jul 2024 11:16:40 -0500
Subject: [PATCH 11/14] feat: better color determination for last step (#56)

the last step is special in the sense that its state depends on the
state of the Stepper/Steps AND on the state of the Install. in this
commit, we introduce a method for dynamically determining the last
Step's activeClassName to achieve the desired state-based border
color.
---
 components/InstallStepper/index.tsx | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/components/InstallStepper/index.tsx b/components/InstallStepper/index.tsx
index 4363eb0..ce45f3b 100644
--- a/components/InstallStepper/index.tsx
+++ b/components/InstallStepper/index.tsx
@@ -13,6 +13,26 @@ import { GroupContent } from "./GroupContent";
 import { InstallStatusContent } from "./InstallStatusContent";
 import { ErrorAlert } from "./ErrorAlert";
 
+const getFinalStepActiveClassName = (status: string | null) => {
+  // default is the "orange"/in-progress colors
+  const defaultClassName =
+    "border-4 border-step-active-border-color dark:border-step-active-border-color";
+  // success is the "green"/complete colors
+  let successClassName =
+    "border-4 border-step-complete-border-color dark:border-step-complete-border-color";
+  // error is the "red" color. there is no themeable color for this state.
+  let errorClassName = "border-4 border-red-800 dark:border-red-800";
+
+  if (status === "active") {
+    return successClassName;
+  } else if (status === "error") {
+    return errorClassName;
+  } else if (status === "") {
+    return defaultClassName;
+  }
+  return defaultClassName;
+};
+
 const InstallStepper = ({
   app,
   existingInstall,
@@ -177,6 +197,7 @@ const InstallStepper = ({
     );
   }
 
+  let finalStepActiveClassName = getFinalStepActiveClassName(install?.status);
   return (
     <div className="relative w-full p-4">
       <Stepper
@@ -216,9 +237,11 @@ const InstallStepper = ({
           </div>
         </Step>
 
+        {/* this step needs to be in the complete state if the installation is complete. as a result, the activeClassName
+            is determined dynamically. */}
         <Step
           className="border-4 border-black bg-black text-white dark:border-white dark:bg-white dark:text-black"
-          activeClassName="border-4 border-step-active-border-color dark:border-step-active-border-color"
+          activeClassName={finalStepActiveClassName}
           completedClassName="border-4 border-step-complete-border-color dark:border-step-complete-border-color"
           onClick={() => setActiveStep(steps.length + 2)}
         >

From 92cb420f99373109c02d76db21e8866763e7b81b Mon Sep 17 00:00:00 2001
From: Dat Boi Diego <fidiego@users.noreply.github.com>
Date: Tue, 30 Jul 2024 12:13:37 -0500
Subject: [PATCH 12/14] feat: installer status: more responsive flow (#57)

---
 components/InstallStepper/InstallStatusContent/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/InstallStepper/InstallStatusContent/index.tsx b/components/InstallStepper/InstallStatusContent/index.tsx
index b928f5c..b0d03aa 100644
--- a/components/InstallStepper/InstallStatusContent/index.tsx
+++ b/components/InstallStepper/InstallStatusContent/index.tsx
@@ -71,7 +71,7 @@ export const InstallStatusContent = ({
         </span>
       </AccordionHeader>
       <AccordionBody>
-        <div className="grid grid-cols-2 gap-2">
+        <div className="grid grid-cols-1 gap-4 lg:gap-8 lg:grid-cols-2">
           <div>
             <Markdown content={post_install_markdown_with_inputs} />
           </div>

From 8e243e2dab9f4e55c346eb0fd3a2a277cab162e7 Mon Sep 17 00:00:00 2001
From: Dat Boi Diego <fidiego@users.noreply.github.com>
Date: Mon, 5 Aug 2024 08:43:07 -0500
Subject: [PATCH 13/14] feat: use og_image_url in installer metadata (#58)

---
 app/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 1edc944..b14866e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -25,7 +25,7 @@ export async function generateMetadata(): Promise<Metadata> {
       type: "website",
       images: [
         {
-          url: metadata.logo_url,
+          url: metadata.og_image_url,
         },
       ],
     },

From 383fe0d4aaeeee63d2aca572f1a379d147d06820 Mon Sep 17 00:00:00 2001
From: Dat Boi Diego <fidiego@users.noreply.github.com>
Date: Wed, 28 Aug 2024 17:54:20 -0500
Subject: [PATCH 14/14] feat: allow installer to pull the installerId from
 searchParams (#59)

* chore: npm audit fix

* feat: allow installer to pull the installerId from searchParams

this required a refactor of the root layout and modifications to the way
we handle `Metadata`.

- [ ] figure out how to use `searchParams` in the `generateMetadata`
- [ ] ensure the metadata is generated well regardless of what method we
      use to get the installerId.

* feat: include metadata in all pages
---
 app/[installer-slug]/[install-id]/page.tsx | 55 +++++++++++++++-
 app/[installer-slug]/page.tsx              | 54 ++++++++++++++-
 app/layout.tsx                             | 76 ++--------------------
 app/page.tsx                               | 53 ++++++++++++++-
 common/index.ts                            | 32 ++++++---
 components/Footer.tsx                      | 35 ++++++++++
 package-lock.json                          | 27 ++++----
 7 files changed, 236 insertions(+), 96 deletions(-)
 create mode 100644 components/Footer.tsx

diff --git a/app/[installer-slug]/[install-id]/page.tsx b/app/[installer-slug]/[install-id]/page.tsx
index 30864dc..cc25099 100644
--- a/app/[installer-slug]/[install-id]/page.tsx
+++ b/app/[installer-slug]/[install-id]/page.tsx
@@ -1,3 +1,5 @@
+import type { Metadata } from "next";
+
 import {
   createInstall,
   getInstall,
@@ -5,16 +7,66 @@ import {
 } from "@/app/[installer-slug]/actions";
 import { getAppBySlug, getInstaller } from "@/common";
 import { Link } from "@/components";
+
+import { Footer } from "@/components/Footer";
+
 import InstallStepper from "@/components/InstallStepper";
 import { getCloudPlatformRegions } from "@/common";
 
+type Props = {
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export async function generateMetadata({
+  searchParams,
+}: Props): Promise<Metadata> {
+  const { metadata } = await getInstaller(
+    searchParams ? searchParams.installerId : null,
+  );
+  console.debug("[install] Generating Metdata");
+
+  // TODO(fd): we need to address this.
+  if (!!!metadata) {
+    console.debug("[install] No Metdata Found");
+    return {};
+  }
+
+  return {
+    title: `Install Details | ${metadata.name}`,
+    description: metadata.description,
+    icons: {
+      icon: metadata.favicon_url,
+      shortcut: metadata.favicon_url,
+    },
+    openGraph: {
+      title: metadata.name,
+      description: metadata.description,
+      type: "website",
+      images: [
+        {
+          url: metadata.og_image_url,
+        },
+      ],
+    },
+    twitter: {
+      title: metadata.name,
+      description: metadata.description,
+      images: [
+        {
+          url: metadata.logo_url,
+        },
+      ],
+    },
+  };
+}
+
 export default async function Installer({ params, searchParams }) {
   const slug = params?.["installer-slug"];
   const installId = params?.["install-id"];
 
   const [app, installer, install] = await Promise.all([
     getAppBySlug(slug),
-    getInstaller(),
+    getInstaller(searchParams ? searchParams.installerId : null),
     getInstall(installId),
   ]);
   const regions = await getCloudPlatformRegions(app.cloud_platform);
@@ -55,6 +107,7 @@ export default async function Installer({ params, searchParams }) {
           regions={regions}
         />
       </main>
+      <Footer {...installer.metadata} />
     </>
   );
 }
diff --git a/app/[installer-slug]/page.tsx b/app/[installer-slug]/page.tsx
index dd247a6..6aa3b3d 100644
--- a/app/[installer-slug]/page.tsx
+++ b/app/[installer-slug]/page.tsx
@@ -1,3 +1,5 @@
+import type { Metadata } from "next";
+
 import {
   createInstall,
   getInstall,
@@ -5,14 +7,62 @@ import {
 } from "@/app/[installer-slug]/actions";
 import { getAppBySlug, getInstaller } from "@/common";
 import { Link } from "@/components";
+import { Footer } from "@/components/Footer";
 import InstallStepper from "@/components/InstallStepper";
 import { getCloudPlatformRegions } from "@/common";
 
+type Props = {
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export async function generateMetadata({
+  searchParams,
+}: Props): Promise<Metadata> {
+  const { metadata } = await getInstaller(
+    searchParams ? searchParams.installerId : null,
+  );
+  console.debug("[installer] Generating Metdata");
+
+  // TODO(fd): we need to address this.
+  if (!!!metadata) {
+    console.debug("[installer] No Metdata Found");
+    return {};
+  }
+
+  return {
+    title: `Installer | ${metadata.name}`,
+    description: metadata.description,
+    icons: {
+      icon: metadata.favicon_url,
+      shortcut: metadata.favicon_url,
+    },
+    openGraph: {
+      title: metadata.name,
+      description: metadata.description,
+      type: "website",
+      images: [
+        {
+          url: metadata.og_image_url,
+        },
+      ],
+    },
+    twitter: {
+      title: metadata.name,
+      description: metadata.description,
+      images: [
+        {
+          url: metadata.logo_url,
+        },
+      ],
+    },
+  };
+}
+
 export default async function Installer({ params, searchParams }) {
   const slug = params?.["installer-slug"];
   const [app, installer] = await Promise.all([
     getAppBySlug(slug),
-    getInstaller(),
+    getInstaller(searchParams ? searchParams.installerId : null),
   ]);
   const regions = await getCloudPlatformRegions(app.cloud_platform);
 
@@ -39,7 +89,6 @@ export default async function Installer({ params, searchParams }) {
           <p>{app?.description}</p>
         </div>
       </header>
-
       <main className="flex-auto" id="steps">
         <InstallStepper
           app={app}
@@ -52,6 +101,7 @@ export default async function Installer({ params, searchParams }) {
           regions={regions}
         />
       </main>
+      <Footer {...installer.metadata} />
     </>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index b14866e..fe96469 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,93 +1,27 @@
-import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import React from "react";
-import { getInstaller } from "@/common";
-import { Link, PoweredByNuon } from "@/components";
-import { Markdown } from "@/components/Markdown";
 import "./globals.css";
 import theme from "@/theme";
 
 const inter = Inter({ subsets: ["latin"] });
 
-export async function generateMetadata(): Promise<Metadata> {
-  const { metadata } = await getInstaller();
-
-  return {
-    title: metadata.name,
-    description: metadata.description,
-    icons: {
-      icon: metadata.favicon_url,
-      shortcut: metadata.favicon_url,
-    },
-    openGraph: {
-      title: metadata.name,
-      description: metadata.description,
-      type: "website",
-      images: [
-        {
-          url: metadata.og_image_url,
-        },
-      ],
-    },
-    twitter: {
-      title: metadata.name,
-      description: metadata.description,
-      images: [
-        {
-          url: metadata.logo_url,
-        },
-      ],
-    },
-  };
-}
-
-const missingData = {
-  orgName: "Nuon",
-};
-
 export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { metadata } = await getInstaller();
-
   return (
     <html
       className={`${theme.forceDarkMode ? "dark" : ""} bg-white dark:bg-black text-black dark:text-white`}
       lang="en"
     >
       <body className={`${inter.className} w-full h-dvh`}>
-        <div className="flex flex-col w-full max-w-5xl mx-auto p-6 py-12 gap-6 md:gap-12">
+        <div
+          className="flex flex-col w-full max-w-5xl mx-auto p-6 py-12 gap-6 md:gap-12"
+          id="content-wapper
+        "
+        >
           {children}
-          <footer className="flex items-center justify-between">
-            <div className="flex gap-2 items-center">
-              {metadata.copyright_markdown ? (
-                <Markdown content={metadata.copyright_markdown} />
-              ) : (
-                <>
-                  <span className="text-xs">
-                    &copy; {new Date().getFullYear()}
-                  </span>
-                  <Link
-                    href={metadata.homepage_url}
-                    className="text-xs"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    {missingData.orgName}
-                  </Link>
-                </>
-              )}
-            </div>
-            <div className="flex gap-6 items-center">
-              {metadata.footer_markdown ? (
-                <Markdown content={metadata.footer_markdown} />
-              ) : (
-                <PoweredByNuon />
-              )}
-            </div>
-          </footer>
         </div>
       </body>
     </html>
diff --git a/app/page.tsx b/app/page.tsx
index 245147a..22a7850 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,8 +1,58 @@
 import { getInstaller } from "@/common";
 import { Link, Video, Card } from "@/components";
+import { Footer } from "@/components/Footer";
+
+import type { Metadata } from "next";
+
+type Props = {
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export async function generateMetadata({
+  searchParams,
+}: Props): Promise<Metadata> {
+  const { metadata } = await getInstaller(
+    searchParams ? searchParams.installerId : null,
+  );
+  console.debug("[index] Generating Metdata");
+
+  // TODO(fd): we need to address this.
+  if (!!!metadata) {
+    console.debug("[index] No Metdata Found");
+    return {};
+  }
+
+  return {
+    title: metadata.name,
+    description: metadata.description,
+    icons: {
+      icon: metadata.favicon_url,
+      shortcut: metadata.favicon_url,
+    },
+    openGraph: {
+      title: metadata.name,
+      description: metadata.description,
+      type: "website",
+      images: [
+        {
+          url: metadata.og_image_url,
+        },
+      ],
+    },
+    twitter: {
+      title: metadata.name,
+      description: metadata.description,
+      images: [
+        {
+          url: metadata.logo_url,
+        },
+      ],
+    },
+  };
+}
 
 export default async function Home({ searchParams }) {
-  const { metadata, apps } = await getInstaller();
+  const { metadata, apps } = await getInstaller(searchParams.installerId);
   const queryString = new URLSearchParams(searchParams).toString();
   const demoUrl = metadata.formatted_demo_url || metadata.demo_url;
   const isDemoUrlValid = /^((http|https):\/\/)/.test(demoUrl);
@@ -50,6 +100,7 @@ export default async function Home({ searchParams }) {
             ))}
         </div>
       </main>
+      <Footer {...metadata} />
     </>
   );
 }
diff --git a/common/index.ts b/common/index.ts
index 366e5cd..50216eb 100644
--- a/common/index.ts
+++ b/common/index.ts
@@ -1,17 +1,29 @@
 export const NUON_API_URL =
   process?.env?.NUON_API_URL || "https://ctl.prod.nuon.co";
 
-export async function getInstaller(): Promise<Record<string, any>> {
-  const res = await fetch(
-    `${NUON_API_URL}/v1/installers/${process.env?.NUON_INSTALLER_ID}`,
-    {
-      cache: "no-store",
-      headers: {
-        Authorization: `Bearer ${process?.env?.NUON_API_TOKEN}`,
-        "X-Nuon-Org-ID": process.env?.NUON_ORG_ID || "",
-      },
+export async function getInstaller(
+  installerId: string[] | string | null | undefined, // man, this is why we use any
+): Promise<Record<string, any>> {
+  let nuonInstallerId = process.env?.NUON_INSTALLER_ID;
+  if (installerId !== null && installerId !== undefined) {
+    nuonInstallerId = String(installerId); // cast here to silence the linter
+    console.debug(`Using installerId from arg: ${nuonInstallerId}`);
+  } else {
+    console.debug(`Using installerId from env: ${nuonInstallerId}`);
+  }
+  let url = `${NUON_API_URL}/v1/installers/${nuonInstallerId}`;
+  const res = await fetch(url, {
+    cache: "no-store",
+    headers: {
+      Authorization: `Bearer ${process?.env?.NUON_API_TOKEN}`,
+      "X-Nuon-Org-ID": process.env?.NUON_ORG_ID || "",
     },
-  );
+  });
+  if (res.status > 300) {
+    console.error(
+      `[${res.status}] Encountered an error while fetching installer. url=${url}`,
+    );
+  }
 
   return res.json();
 }
diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 0000000..07ad107
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,35 @@
+import { Link, PoweredByNuon } from "@/components";
+import { Markdown } from "@/components/Markdown";
+
+const missingData = {
+  orgName: "Nuon",
+};
+
+export const Footer = (metadata: any) => (
+  <footer className="flex items-center justify-between">
+    <div className="flex gap-2 items-center">
+      {metadata.copyright_markdown ? (
+        <Markdown content={metadata.copyright_markdown} />
+      ) : (
+        <>
+          <span className="text-xs">&copy; {new Date().getFullYear()}</span>
+          <Link
+            href={metadata.homepage_url}
+            className="text-xs"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {missingData.orgName}
+          </Link>
+        </>
+      )}
+    </div>
+    <div className="flex gap-6 items-center">
+      {metadata.footer_markdown ? (
+        <Markdown content={metadata.footer_markdown} />
+      ) : (
+        <PoweredByNuon />
+      )}
+    </div>
+  </footer>
+);
diff --git a/package-lock.json b/package-lock.json
index 07da91a..ad9ca21 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2714,12 +2714,13 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -4092,10 +4093,11 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -4913,6 +4915,7 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
@@ -5435,12 +5438,13 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -7295,6 +7299,7 @@
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
       },