From 13c4261f72b5ec7b9570fb2606975f37ddfdeae1 Mon Sep 17 00:00:00 2001
From: Peter Nied <peternied@hotmail.com>
Date: Fri, 6 Dec 2024 00:43:41 +0000
Subject: [PATCH] Basic mockup of sourceselection page

Signed-off-by: Peter Nied <peternied@hotmail.com>
---
 frontend/app/migration/create/page.tsx | 80 ++++++++++++++++++++++++++
 frontend/pages/home.tsx                |  3 -
 2 files changed, 80 insertions(+), 3 deletions(-)
 delete mode 100644 frontend/pages/home.tsx

diff --git a/frontend/app/migration/create/page.tsx b/frontend/app/migration/create/page.tsx
index d69c42361..1b58a74a5 100644
--- a/frontend/app/migration/create/page.tsx
+++ b/frontend/app/migration/create/page.tsx
@@ -1,11 +1,91 @@
 'use client';
+import * as React from 'react';
 import Header from '@cloudscape-design/components/header';
 import SpaceBetween from '@cloudscape-design/components/space-between';
+import {
+  Button,
+  Checkbox,
+  Container,
+  Form,
+  RadioGroup
+} from '@cloudscape-design/components';
+import { CheckboxWrapper } from '@cloudscape-design/components/test-utils/dom';
+import Head from 'next/head';
 
 export default function Page() {
+  const [sourceChoice, setSource] = React.useState("endpoint");
+  const [authType, setAuthType] = React.useState("none");
+
   return (
     <SpaceBetween size="m">
       <Header variant="h1">Create a migration</Header>
+
+      <Container>
+        <form onSubmit={(e) => e.preventDefault()}>
+          <Form
+            actions={
+              <SpaceBetween direction="horizontal" size="xs">
+                <Button formAction="none" variant="link">
+                  Cancel
+                </Button>
+                <Button variant="primary">Submit</Button>
+              </SpaceBetween>
+            }
+            header={<Header variant="h1">Select Source</Header>}
+          >
+            <SpaceBetween direction="vertical" size="l">
+                <Container header={<Header variant="h2">Source Type</Header>}>
+                <RadioGroup
+                      onChange={({ detail }) => setSource(detail.value)}
+                      value={sourceChoice}
+                      items={[
+                        {
+                          value: "endpoint",
+                          label: "Endpoint",
+                          description: "An online source cluster that can receive requests"
+                        },
+                        {
+                          value: "snapshot",
+                          label: "Snapshot",
+                          description: "A snapshot created on a source cluster."
+                        },
+                        {
+                          value: "template",
+                          label: "Template",
+                          description: "Load data from an previous migration session."
+                        }
+                      ]}
+                />
+                </Container>
+                <Container header={<Header variant='h2'>Endpoint Authentication</Header>}>
+                <RadioGroup
+                      onChange={({ detail }) => setSource(detail.value)}
+                      value={sourceChoice}
+                      items={[
+                        {
+                          value: "none",
+                          label: "No Authentication",
+                          description: "The cluster does not check for authentication."
+                        },
+                        {
+                          value: "username",
+                          label: "Username/Password",
+                          description: "The cluster accepts username and password, also called HTTP Basic Authentication."
+                        },
+                        {
+                          value: "sigv4",
+                          label: "AWS Sigv4",
+                          description: "The cluster accepts requests signed with AWS Sigv4."
+                        }
+                      ]}
+                />
+                </Container>
+            </SpaceBetween>
+
+            
+          </Form>
+        </form>
+      </Container>
     </SpaceBetween>
   );
 }
diff --git a/frontend/pages/home.tsx b/frontend/pages/home.tsx
deleted file mode 100644
index 0841bb098..000000000
--- a/frontend/pages/home.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Home() {
-  return <h1>Hello!</h1>;
-}