Skip to content

Commit

Permalink
wip: layout and styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@jordan-acosta
jordan-acosta committed Jun 19, 2024
1 parent f0f76da commit f45d1d5
Show file tree
Hide file tree
Showing 8 changed files with 65 additions and 56 deletions.
18 changes: 8 additions & 10 deletions app/[installer-slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion components/AWSInstallerFormFields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion components/AzureInstallerFormFields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion components/InputFields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions components/InstallStatus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ 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;
Expand All @@ -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;
Expand Down
83 changes: 47 additions & 36 deletions components/InstallStepper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
import { InstallStatus } from "./InstallStatus";
import StatusIcon from "./StatusIcon";
import showdown from "showdown";
import Card from "./Card";

const markdown = new showdown.Converter();

Expand All @@ -41,15 +42,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: "",
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({
Expand Down Expand Up @@ -128,18 +125,21 @@ const InstallStepper = ({
}
}, 1000 * 5);

console.log("install: ", install);
console.log("error: ", error);

const stepContent = app.input_config.input_groups.map((group, idx) => (
<Accordion open={activeStep === idx + 2}>
<AccordionHeader>{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">
Expand Down Expand Up @@ -175,46 +175,54 @@ const InstallStepper = ({
<Accordion open={activeStep === 0}>
<AccordionHeader>Company</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}
/>
<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}
/>
<AccordionBody className="grid grid-cols-2 gap-4">
<StepOneAzure />
<Card>
<AzureInstallerFormFields
searchParams={searchParams}
regions={regions}
/>
</Card>
</AccordionBody>
</>
)}
Expand All @@ -225,7 +233,10 @@ const InstallStepper = ({
<Accordion open={activeStep === steps.length + 2}>
<AccordionHeader>
<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>
Expand Down
8 changes: 4 additions & 4 deletions components/StepOneAWS.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ export const StepOneAWS: FC<{ app: Record<string, any> }> = ({ app }) => {
</p>
</div>

<div className="flex flex-col gap-12">
<Card>
<div className="flex flex-col gap-4">
<Card className="p-4">
<h3 className="text-md font-semibold">
Create IAM policies with CloudFormation
</h3>
Expand All @@ -51,7 +51,7 @@ export const StepOneAWS: FC<{ app: Record<string, any> }> = ({ app }) => {
</Link>
</Card>

<Card>
<Card className="p-4">
<h3 className="text-md font-semibold">
Create IAM policies with Terraform
</h3>
Expand All @@ -71,7 +71,7 @@ export const StepOneAWS: FC<{ app: Record<string, any> }> = ({ app }) => {
</Link>
</Card>

<Card>
<Card className="p-4">
<h3 className="text-md font-semibold">
Create IAM policies manually
</h3>
Expand Down

0 comments on commit f45d1d5

Please sign in to comment.