cloud create menu updates

Author: jsladerman

www/src/components/create-cluster/CreateCluster.tsx

@@ -210,7 +210,7 @@ const SidebarWrapperSC = styled.div(({ theme }) => ({
 
 const ContentWrapperSC = styled.div(({ theme }) => ({
   display: 'flex',
-  margin: 'auto',
+  height: 'fit-content',
   minWidth: 600,
   maxWidth: 720,
   flexDirection: 'column',

www/src/components/create-cluster/steps/ConfigureCloudInstanceStep.tsx

@@ -35,7 +35,8 @@ export function ConfigureCloudInstanceStep() {
   const cloud = CloudProvider.Aws
   const [name, setName] = useState('')
   const [size, setSize] = useState<ConsoleSize>(ConsoleSize.Small)
-  const [region, setRegion] = useState<string>(REGIONS[0])
+  const [cloud, _setCloud] = useState<CloudProvider>(CloudProvider.Aws)
+  const [region, _setRegion] = useState<string>(REGIONS[0])
   const [confirm, setConfirm] = useState(false)
 
   const [showNameError, setShowNameError] = useState(false)
@@ -131,6 +132,19 @@ export function ConfigureCloudInstanceStep() {
               ))}
           </Select>
         </FormFieldSC>
+        {/* <FormFieldSC label="Cloud">
+          <Select
+            selectedKey={cloud}
+            onSelectionChange={(cloud) => setCloud(cloud as CloudProvider)}
+          >
+            {Object.values(CloudProvider).map((value) => (
+              <ListBoxItem
+                key={value}
+                label={value}
+              />
+            ))}
+          </Select>
+        </FormFieldSC>
         {cloud === CloudProvider.Aws && (
           <FormFieldSC label="Region">
             <Select
@@ -145,7 +159,7 @@ export function ConfigureCloudInstanceStep() {
               ))}
             </Select>
           </FormFieldSC>
-        )}
+        )} */}
       </Flex>
       <Confirm
         open={confirm}
@@ -171,7 +185,7 @@ const ValidationHintSC = styled.span(({ theme }) => ({
 
 const validateName = (name: string) => {
   const nameValidity = {
-    length: name.length >= 4 && name.length <= 11,
+    length: name.length >= 5 && name.length <= 15,
     lowercase: !/[A-Z]/.test(name),
     alphanumeric: !!name.match(/^[a-z0-9]+$/),
     startsWithLetter: !!name.at(0)?.match(/[a-z]/),
@@ -185,7 +199,7 @@ const validateName = (name: string) => {
       : !nameValidity.alphanumeric
       ? 'Name must be alphanumeric'
       : !nameValidity.length
-      ? 'Name must be between 4 and 11 characters'
+      ? 'Name must be between 5 and 15 characters'
       : '',
   }
 }