feat: layout and styles

nuonco · Jun 19, 2024 · 44e055f · 44e055f
1 parent c973f5d
commit 44e055f
Show file tree

Hide file tree

Showing 11 changed files with 220 additions and 163 deletions.
diff --git a/app/[installer-slug]/page.tsx b/app/[installer-slug]/page.tsx
@@ -19,26 +19,24 @@ export default async function Installer({ params, searchParams }) {
 
   return (
     <>
-      <header className="grid grid-cols-3 gap-4">
-        <div className="col-span-1 items-center pt-4">
-          <Link className="w-fit" href="/">
+      <header className="flex flex-col gap-4">
+        <div className="flex justify-between pt-4">
+          <Link className="w-fit pt-4" href="/">
             {"< Other installation options"}
           </Link>
-        </div>
-
-        <div className="col-span-1">
           <Link href={installer?.metadata?.homepage_url}>
             <img
-              className="m-auto"
+              className="inline-block"
               src={installer?.metadata?.logo_url}
               alt={installer?.metadata?.name}
             />
           </Link>
         </div>
 
-        <p className="col-span-3 text-4xl text-center leading-relaxed">
-          {app?.description}
-        </p>
+        <div className="text-center">
+          <h1 className="text-2xl font-semibold mb-2">{app.name}</h1>
+          <p>{app?.description}</p>
+        </div>
       </header>
 
       <main className="flex-auto" id="steps">

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -58,7 +58,7 @@ export default async function RootLayout({
       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-12 md:gap-24">
+        <div className="flex flex-col w-full max-w-5xl mx-auto p-6 py-12 gap-6 md:gap-12">
           {children}
           <footer className="flex items-center justify-between">
             <div className="flex gap-2 items-center">

diff --git a/components/AWSInstallerFormFields.tsx b/components/AWSInstallerFormFields.tsx
@@ -26,7 +26,7 @@ export const AWSInstallerFormFields: FC<{
   regions: Array<Object>;
 }> = ({ searchParams = {}, regions }) => {
   return (
-    <fieldset className="p-4">
+    <fieldset className="p-4 w-full">
       <label className="flex flex-col flex-auto gap-2">
         <span className="text-sm font-medium">AWS IAM role ARN</span>
         <input

diff --git a/components/AzureInstallerFormFields.tsx b/components/AzureInstallerFormFields.tsx
@@ -26,7 +26,7 @@ export const AzureInstallerFormFields: FC<{
   regions: Array<Object>;
 }> = ({ searchParams = {}, regions }) => {
   return (
-    <fieldset className="p-4">
+    <fieldset className="p-4 w-full">
       <label className="flex flex-col flex-auto gap-2">
         <span className="text-sm font-medium">Location</span>
         <AzureLocationSelect

diff --git a/components/Card.tsx b/components/Card.tsx
@@ -9,7 +9,7 @@ export default function Card({
 }>) {
   return (
     <div
-      className={`flex flex-col gap-2 rounded bg-card-background dark:bg-white items-start rounded border-card-border border-2 ${className}`}
+      className={`flex flex-col gap-2 rounded bg-card-background dark:bg-white items-start border border-card-border shadow shadow-card-border ${className}`}
     >
       {children}
     </div>

diff --git a/components/InputFields.tsx b/components/InputFields.tsx
@@ -5,7 +5,7 @@ export const InputFields: FC<{
   searchParams?: Record<string, string>;
 }> = ({ group, inputs, searchParams = {} }) => {
   return (
-    <fieldset key={group.id} name={group.name} className="p-4">
+    <fieldset key={group.id} name={group.name} className="p-4 w-full">
       {group.app_inputs.map((input) => (
         <label className="flex flex-col flex-auto gap-2" key={input?.id}>
           <span className="text-sm font-medium">

diff --git a/components/InstallStatus.tsx → components/InstallStepper/InstallStatus.tsx b/components/InstallStatus.tsx → components/InstallStepper/InstallStatus.tsx
@@ -2,14 +2,14 @@
 
 import React from "react";
 
-import Card from "./Card";
-import StatusIcon from "./StatusIcon";
+import Card from "@/components/Card";
+import StatusIcon from "@/components/StatusIcon";
 
 export const InstallStatus: FC<{ install: Record<string, any> }> = ({
   install,
 }) => {
   let sandboxStatus = "pending";
-  let sandboxStatusDescription = "Sandbox has not deployed yet.";
+  let sandboxStatusDescription = "waiting to provision";
   if (install.install_sandbox_runs && install.install_sandbox_runs.length > 0) {
     const lastRun = install.install_sandbox_runs[0];
     sandboxStatus = lastRun.status;
@@ -18,7 +18,7 @@ export const InstallStatus: FC<{ install: Record<string, any> }> = ({
 
   const components = install.install_components.map((component, idx) => {
     let status = "pending";
-    let status_description = "Component has not deployed yet.";
+    let status_description = "waiting to deploy";
     if (component.install_deploys.length > 0) {
       const lastDeploy = component.install_deploys[0];
       status = lastDeploy.status;

diff --git a/components/InstallStepper.tsx → components/InstallStepper/index.tsx b/components/InstallStepper.tsx → components/InstallStepper/index.tsx
@@ -2,9 +2,11 @@
 
 import React, { useEffect, useRef } from "react";
 import {
+  ThemeProvider,
   Stepper,
   Step,
   Button,
+  IconButton,
   Accordion,
   AccordionHeader,
   AccordionBody,
@@ -17,10 +19,11 @@ import {
   StepOneAWS,
   StepOneAzure,
   Link,
-} from "../components";
+} from "@/components";
 import { InstallStatus } from "./InstallStatus";
-import StatusIcon from "./StatusIcon";
+import StatusIcon from "@/components/StatusIcon";
 import showdown from "showdown";
+import Card from "@/components/Card";
 
 const markdown = new showdown.Converter();
 
@@ -41,15 +44,11 @@ const InstallStepper = ({
   const handleNext = () => !isLastStep && setActiveStep((cur) => cur + 1);
   const handlePrev = () => !isFirstStep && setActiveStep((cur) => cur - 1);
 
-  const steps = app.input_config.input_groups.map((group, idx) => (
-    <Step onClick={() => setActiveStep(idx + 2)}>{idx + 3}</Step>
-  ));
-
   // track state of install
   const [install, setInstall] = React.useState({
-    id: "",
+    id: searchParams.install_id || "",
     status: "not created",
-    status_description: "No install has been created yet.",
+    status_description: "install has not been created yet",
     install_components: [],
   });
   const [error, setError] = React.useState({
@@ -62,6 +61,8 @@ const InstallStepper = ({
   const formAction = async (event) => {
     event.preventDefault();
 
+    console.log("event: ", event);
+
     const formData = new FormData(event.target);
     let installID = "";
     if (install.id === "") {
@@ -132,14 +133,22 @@ const InstallStepper = ({
   console.log("error: ", error);
 
   const stepContent = app.input_config.input_groups.map((group, idx) => (
-    <Accordion open={activeStep === idx + 2}>
-      <AccordionHeader>{group.display_name}</AccordionHeader>
+    <Accordion key={idx} open={activeStep === idx + 2}>
+      <AccordionHeader onClick={() => setActiveStep(idx + 2)}>
+        {group.display_name}
+      </AccordionHeader>
       <AccordionBody>
-        <InputFields group={group} searchParams={searchParams} />
+        <Card>
+          <InputFields group={group} searchParams={searchParams} />
+        </Card>
       </AccordionBody>
     </Accordion>
   ));
 
+  const steps = app.input_config.input_groups.map((group, idx) => (
+    <Step onClick={() => setActiveStep(idx + 2)}>{idx + 3}</Step>
+  ));
+
   const errorAlert =
     error.error !== "" ? (
       <div className="fixed w-full right-0 bottom-0 left-0 p-4">
@@ -148,73 +157,124 @@ const InstallStepper = ({
     ) : null;
 
   return (
-    <div className="w-full p-4">
+    <div className="relative w-full p-4">
       <Stepper
         activeStep={activeStep}
         isLastStep={(value) => setIsLastStep(value)}
         isFirstStep={(value) => setIsFirstStep(value)}
       >
         <Step onClick={() => setActiveStep(0)}>1</Step>
+
         <Step onClick={() => setActiveStep(1)}>2</Step>
+
         {...steps}
+
         <Step onClick={() => setActiveStep(steps.length + 2)}>
           {steps.length + 3}
         </Step>
       </Stepper>
 
-      <div className="mt-4 flex justify-between">
-        <Button onClick={handlePrev} disabled={isFirstStep}>
-          Prev
-        </Button>
-        <Button onClick={handleNext} disabled={isLastStep}>
-          Next
-        </Button>
+      <div className="absolute -left-8 -right-8 top-1/2 flex justify-between">
+        <IconButton
+          className="rounded-full"
+          onClick={handlePrev}
+          disabled={isFirstStep}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="size-6"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M15.75 19.5 8.25 12l7.5-7.5"
+            />
+          </svg>
+        </IconButton>
+        <IconButton
+          className="rounded-full"
+          onClick={handleNext}
+          disabled={isLastStep}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="size-6"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="m8.25 4.5 7.5 7.5-7.5 7.5"
+            />
+          </svg>
+        </IconButton>
       </div>
 
       <form className="mt-4" onSubmit={formAction}>
         <Accordion open={activeStep === 0}>
-          <AccordionHeader>Company</AccordionHeader>
+          <AccordionHeader onClick={() => setActiveStep(0)}>
+            Company Info
+          </AccordionHeader>
           <AccordionBody>
-            <fieldset className="p-4">
-              <label className="flex flex-col flex-auto gap-2">
-                <span className="text-sm font-medium">Name</span>
-                <input
-                  className="border bg-inherit rounded px-4 py-1.5 shadow-inner"
-                  defaultValue={
-                    Object.hasOwn(searchParams, "name")
-                      ? searchParams?.name
-                      : ""
-                  }
-                  name="name"
-                  type="text"
-                  required
-                />
-              </label>
-            </fieldset>
+            <Card>
+              <fieldset className="p-4 w-full">
+                <label className="flex flex-col flex-auto gap-2">
+                  <span className="text-sm font-medium">Name</span>
+                  <input
+                    className="border bg-inherit rounded px-4 py-1.5 shadow-inner"
+                    defaultValue={
+                      Object.hasOwn(searchParams, "name")
+                        ? searchParams?.name
+                        : ""
+                    }
+                    name="name"
+                    type="text"
+                    required
+                  />
+                </label>
+              </fieldset>
+            </Card>
           </AccordionBody>
         </Accordion>
 
         <Accordion open={activeStep == 1}>
           {app?.cloud_platform === "aws" && (
             <>
-              <AccordionHeader>AWS Account</AccordionHeader>
-              <AccordionBody>
-                <AWSInstallerFormFields
-                  searchParams={searchParams}
-                  regions={regions}
-                />
+              <AccordionHeader onClick={() => setActiveStep(1)}>
+                AWS IAM Role
+              </AccordionHeader>
+              <AccordionBody className="grid grid-cols-2 gap-4">
+                <StepOneAWS app={app} />
+                <Card>
+                  <AWSInstallerFormFields
+                    searchParams={searchParams}
+                    regions={regions}
+                  />
+                </Card>
               </AccordionBody>
             </>
           )}
 
           {app?.cloud_platform === "azure" && (
             <>
-              <AccordionHeader>Azure Account</AccordionHeader>
-              <AccordionBody>
-                <AzureInstallerFormFields
-                  searchParams={searchParams}
-                  regions={regions}
-                />
+              <AccordionHeader onClick={() => setActiveStep(1)}>
+                Azure Account
+              </AccordionHeader>
+              <AccordionBody className="grid grid-cols-2 gap-4">
+                <StepOneAzure />
+                <Card>
+                  <AzureInstallerFormFields
+                    searchParams={searchParams}
+                    regions={regions}
+                  />
+                </Card>
               </AccordionBody>
             </>
           )}
@@ -223,9 +283,12 @@ const InstallStepper = ({
         {...stepContent}
 
         <Accordion open={activeStep === steps.length + 2}>
-          <AccordionHeader>
+          <AccordionHeader onClick={() => setActiveStep(steps.length + 2)}>
             <span>
-              Install Status <StatusIcon status={install.status} />
+              Install Status <StatusIcon status={install.status} />{" "}
+              <span className="text-sm font-medium">
+                {install.status_description}
+              </span>
             </span>
           </AccordionHeader>
           <AccordionBody>
@@ -253,6 +316,7 @@ const InstallStepper = ({
           </AccordionBody>
         </Accordion>
       </form>
+
       {errorAlert}
     </div>
   );