feat: cloud regions and domains

components/cloudProviderCard/index.tsx

@@ -3,13 +3,14 @@ import Image from 'next/image';
 
 import { CardProps } from '../card';
 import Typography from '../typography';
+import Tag from '../tag';
 import { InstallationType } from '../../types/redux';
 import k3dLogo from '../../assets/k3d_logo.svg';
 import awsLogo from '../../assets/aws_logo.svg';
 import civoLogo from '../../assets/civo_logo.svg';
 import digitalOceanLogo from '../../assets/digital_ocean_logo.svg';
 import vultrLogo from '../../assets/vultr_logo.svg';
-import Tag from '../tag';
+import { BISCAY } from '../../constants/colors';
 
 import { CardContainer, DetailsContainer, Link, LabelContainer } from './cloudProviderCard.styled';
 
@@ -90,7 +91,9 @@ const CloudProviderCard: FunctionComponent<CloudProviderCardProps> = ({
       <Image src={logoSrc} alt="logo" width={width} height={height} />
       <DetailsContainer>
         <LabelContainer>
-          <Typography variant="subtitle2">{label}</Typography>
+          <Typography variant="subtitle2" color={BISCAY}>
+            {label}
+          </Typography>
           {beta && <Tag text="BETA" bgColor="light-orange" />}
         </LabelContainer>
         <Typography variant="body2">

components/installationButtons/index.tsx

@@ -9,6 +9,7 @@ export interface InstallationButtonsProps {
   showBackButton?: boolean;
   onBackButtonClick?: () => void;
   onNextButtonClick: () => void;
+  showNextButton: boolean;
   nextButtonText?: string;
   nextButtonDisabled?: boolean;
 }
@@ -18,6 +19,7 @@ const InstallationButtons: FunctionComponent<InstallationButtonsProps> = ({
   showBackButton,
   onBackButtonClick,
   onNextButtonClick,
+  showNextButton,
   nextButtonText = 'Next',
   nextButtonDisabled,
   ...rest
@@ -29,16 +31,18 @@ const InstallationButtons: FunctionComponent<InstallationButtonsProps> = ({
       </Button>
     )}
 
-    <Button
-      type="submit"
-      variant="contained"
-      color="primary"
-      id="next"
-      onClick={() => activeStep === 0 && onNextButtonClick()}
-      disabled={nextButtonDisabled}
-    >
-      {nextButtonText}
-    </Button>
+    {showNextButton && (
+      <Button
+        type="submit"
+        variant="contained"
+        color="primary"
+        id="next"
+        onClick={() => activeStep === 0 && onNextButtonClick()}
+        disabled={nextButtonDisabled}
+      >
+        {nextButtonText}
+      </Button>
+    )}
   </Container>
 );
 

components/installationStepContainer/index.tsx

@@ -12,6 +12,7 @@ import {
   InstallationButtons,
   InstallTitle,
   Content,
+  FormContent,
 } from './installationStepContainer.styled';
 
 interface InstallationStepContainerProps
@@ -34,6 +35,7 @@ const InstallationStepContainer: FunctionComponent<InstallationStepContainerProp
   onBackButtonClick = noop,
   nextButtonText,
   nextButtonDisabled,
+  showNextButton,
   children,
   ...rest
 }) => {
@@ -56,21 +58,24 @@ const InstallationStepContainer: FunctionComponent<InstallationStepContainerProp
   return (
     <Container {...rest}>
       <Progress activeStep={activeStep} steps={steps} />
-      {isProvisionStep ? (
-        <LinearProgress progress={progress} />
-      ) : (
-        <InstallTitle variant="subtitle2">{installationTitle}</InstallTitle>
-      )}
-      <Content hasInfo={hasInfo} isProvisionStep={isProvisionStep}>
-        {children}
-      </Content>
+      <FormContent>
+        {isProvisionStep ? (
+          <LinearProgress progress={progress} />
+        ) : (
+          <InstallTitle variant="subtitle2">{installationTitle}</InstallTitle>
+        )}
+        <Content hasInfo={hasInfo} isProvisionStep={isProvisionStep}>
+          {children}
+        </Content>
+      </FormContent>
       <InstallationButtons
         activeStep={activeStep}
         onNextButtonClick={onNextButtonClick}
         onBackButtonClick={onBackButtonClick}
         showBackButton={showBackButton}
         nextButtonText={nextButtonText}
         nextButtonDisabled={nextButtonDisabled}
+        showNextButton={showNextButton}
       />
     </Container>
   );

components/installationStepContainer/installationStepContainer.styled.ts

@@ -6,7 +6,6 @@ import Typography from '../typography';
 import { media } from '../../utils/media';
 
 export const Container = styled(Column)`
-  background-color: ${({ theme }) => theme.colors.washMe};
   height: 100%;
   width: 100%;
 `;
@@ -19,7 +18,6 @@ export const Content = styled(Column)<{ hasInfo?: boolean; isProvisionStep: bool
   gap: 24px;
   height: calc(100% - 285px);
   margin: 0 auto;
-  overflow-y: auto;
   width: 100%;
 
   ${({ hasInfo }) =>
@@ -44,3 +42,9 @@ export const InstallTitle = styled(Typography)`
 export const Title = styled.div`
   margin: 40px auto;
 `;
+
+export const FormContent = styled.div`
+  height: calc(100% - 198px);
+  margin-bottom: 40px;
+  overflow: auto;
+`;

components/password/index.tsx

@@ -36,7 +36,7 @@ const Password: FunctionComponent<PasswordProps> = ({ label, helperText, ...prop
             edge="end"
             disableRipple
           >
-            {showPassword ? <VisibilityOffOutlinedIcon /> : <VisibilityOutlinedIcon />}
+            {showPassword ? <VisibilityOutlinedIcon /> : <VisibilityOffOutlinedIcon />}
           </IconButton>
         </InputAdornmentContainer>
       }

components/progress/progress.styled.tsx

@@ -12,7 +12,7 @@ import { BISCAY, PORT_GORE } from '../../constants/colors';
 
 export const Label = muiStyled(StepLabel)(() => ({
   [`& .${stepLabelClasses.completed}`]: {
-    color: theme.colors.saltboxBlue,
+    color: `${theme.colors.saltboxBlue} !important`,
   },
   [`& .${stepLabelClasses.active}`]: {
     color: BISCAY,
@@ -29,7 +29,7 @@ export const ColorlibConnector = muiStyled(StepConnector)(({ theme: muiTheme })
   [`&.${stepConnectorClasses.alternativeLabel}`]: {
     left: 'calc(-50% + 26px)',
     right: 'calc(50% + 26px)',
-    top: 25,
+    top: 32,
   },
   [`&.${stepConnectorClasses.active}`]: {
     [`& .${stepConnectorClasses.line}`]: {

containers/clusterForms/aws/setupForm/index.tsx

@@ -1,13 +1,38 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useEffect } from 'react';
 
-import { InstallValues } from '../../../../types/redux';
 import ControlledAutocomplete from '../../../../components/controlledFields/AutoComplete';
 import ControlledTextField from '../../../../components/controlledFields/TextField';
 import LearnMore from '../../../../components/learnMore';
-import { AWS_REGIONS, EMAIL_REGEX } from '../../../../constants/index';
+import { useAppDispatch, useAppSelector } from '../../../../redux/store';
+import { getCloudDomains, getCloudRegions } from '../../../../redux/thunks/api.thunk';
+import { InstallValues } from '../../../../types/redux';
 import { FormFlowProps } from '../../../../types/provision';
+import { EMAIL_REGEX } from '../../../../constants/index';
 
 const AwsSetupForm: FunctionComponent<FormFlowProps<InstallValues>> = ({ control }) => {
+  const dispatch = useAppDispatch();
+  const { cloudDomains, cloudRegions } = useAppSelector(({ api }) => ({
+    cloudDomains: api.cloudDomains,
+    cloudRegions: api.cloudRegions,
+  }));
+
+  const handleRegionOnSelect = async (region: string) => {
+    dispatch(getCloudDomains(region));
+  };
+
+  const formatDomains = (domains: Array<string>) => {
+    return domains.map((domain) => {
+      const formattedDomain = domain[domain.length - 1].includes('.')
+        ? domain.substring(0, domain.length - 1)
+        : domain;
+      return { label: formattedDomain, value: formattedDomain };
+    });
+  };
+
+  useEffect(() => {
+    dispatch(getCloudRegions());
+  }, [dispatch]);
+
   return (
     <>
       <ControlledTextField
@@ -27,16 +52,16 @@ const AwsSetupForm: FunctionComponent<FormFlowProps<InstallValues>> = ({ control
         label="Cloud region"
         required
         rules={{ required: true }}
-        options={AWS_REGIONS}
+        options={cloudRegions && cloudRegions.map((region) => ({ label: region, value: region }))}
+        onChange={handleRegionOnSelect}
       />
-      <ControlledTextField
+      <ControlledAutocomplete
         control={control}
         name="domainName"
         label="Cluster domain name"
         required
-        rules={{
-          required: true,
-        }}
+        rules={{ required: true }}
+        options={cloudDomains && formatDomains(cloudDomains)}
       />
       <ControlledTextField
         control={control}

containers/clusterForms/civo/setupForm/index.tsx

@@ -4,10 +4,22 @@ import { FormFlowProps } from 'types/provision';
 import ControlledAutocomplete from '../../../../components/controlledFields/AutoComplete';
 import ControlledTextField from '../../../../components/controlledFields/TextField';
 import LearnMore from '../../../../components/learnMore';
+import { useAppDispatch, useAppSelector } from '../../../../redux/store';
+import { getCloudDomains } from '../../../../redux/thunks/api.thunk';
 import { InstallValues } from '../../../../types/redux';
-import { CIVO_REGIONS, EMAIL_REGEX } from '../../../../constants';
+import { EMAIL_REGEX } from '../../../../constants';
 
 const CivoSetupForm: FunctionComponent<FormFlowProps<InstallValues>> = ({ control }) => {
+  const dispatch = useAppDispatch();
+  const { cloudDomains, cloudRegions } = useAppSelector(({ api }) => ({
+    cloudDomains: api.cloudDomains,
+    cloudRegions: api.cloudRegions,
+  }));
+
+  const handleRegionOnSelect = async (region: string) => {
+    dispatch(getCloudDomains(region));
+  };
+
   return (
     <>
       <ControlledTextField
@@ -27,16 +39,16 @@ const CivoSetupForm: FunctionComponent<FormFlowProps<InstallValues>> = ({ contro
         label="Cloud Region"
         required
         rules={{ required: true }}
-        options={CIVO_REGIONS}
+        options={cloudRegions && cloudRegions.map((region) => ({ label: region, value: region }))}
+        onChange={handleRegionOnSelect}
       />
-      <ControlledTextField
+      <ControlledAutocomplete
         control={control}
         name="domainName"
         label="Cluster domain name"
         required
-        rules={{
-          required: true,
-        }}
+        rules={{ required: true }}
+        options={cloudDomains && cloudDomains.map((domain) => ({ label: domain, value: domain }))}
       />
       <ControlledTextField
         control={control}

containers/clusterForms/digitalocean/setupForm/index.tsx

@@ -4,10 +4,22 @@ import { FormFlowProps } from 'types/provision';
 import LearnMore from '../../../../components/learnMore';
 import ControlledAutocomplete from '../../../../components/controlledFields/AutoComplete';
 import ControlledTextField from '../../../../components/controlledFields/TextField';
-import { CIVO_REGIONS, EMAIL_REGEX } from '../../../../constants';
+import { useAppDispatch, useAppSelector } from '../../../../redux/store';
+import { getCloudDomains } from '../../../../redux/thunks/api.thunk';
+import { EMAIL_REGEX } from '../../../../constants';
 import { InstallValues } from '../../../../types/redux';
 
 const DigitalOceanSetupForm: FunctionComponent<FormFlowProps<InstallValues>> = ({ control }) => {
+  const dispatch = useAppDispatch();
+  const { cloudDomains, cloudRegions } = useAppSelector(({ api }) => ({
+    cloudDomains: api.cloudDomains,
+    cloudRegions: api.cloudRegions,
+  }));
+
+  const handleRegionOnSelect = async (region: string) => {
+    dispatch(getCloudDomains(region));
+  };
+
   return (
     <>
       <ControlledTextField
@@ -27,16 +39,16 @@ const DigitalOceanSetupForm: FunctionComponent<FormFlowProps<InstallValues>> = (
         label="Datacenter region"
         required
         rules={{ required: true }}
-        options={CIVO_REGIONS}
+        options={cloudRegions && cloudRegions.map((region) => ({ label: region, value: region }))}
+        onChange={handleRegionOnSelect}
       />
-      <ControlledTextField
+      <ControlledAutocomplete
         control={control}
         name="domainName"
         label="Cluster domain name"
         required
-        rules={{
-          required: true,
-        }}
+        rules={{ required: true }}
+        options={cloudDomains && cloudDomains.map((domain) => ({ label: domain, value: domain }))}
       />
       <ControlledTextField
         control={control}

containers/clusterForms/shared/authForm/index.tsx

@@ -93,17 +93,17 @@ const AuthForm: FunctionComponent<FormFlowProps<InstallValues>> = ({ control, se
 
   const gitLabel = useMemo(() => (isGitHub ? 'GitHub' : 'GitLab'), [isGitHub]);
 
+  const gitErrorLabel = useMemo(
+    () => (isGitHub ? 'GitHub organization' : 'GitLab group'),
+    [isGitHub],
+  );
+
   useEffect(() => {
     if (githubUser?.login || gitlabUser?.name) {
       setValue('userName', githubUser?.login || gitlabUser?.name);
     }
   }, [dispatch, githubUser, gitlabUser, setValue]);
 
-  const gitErrorLabel = useMemo(
-    () => (isGitHub ? 'GitHub organization' : 'GitLab group'),
-    [isGitHub],
-  );
-
   useEffect(() => {
     return () => {
       dispatch(clearUserError());
@@ -140,7 +140,6 @@ const AuthForm: FunctionComponent<FormFlowProps<InstallValues>> = ({ control, se
           required
           name="gitOwner"
           rules={{ required: true }}
-          disabled={!isTokenValid}
           onChange={validateGitOwner}
           options={
             githubUserOrganizations &&
@@ -156,7 +155,6 @@ const AuthForm: FunctionComponent<FormFlowProps<InstallValues>> = ({ control, se
           required
           name="gitOwner"
           rules={{ required: true }}
-          disabled={!isTokenValid}
           onChange={validateGitOwner}
           options={
             gitlabGroups && gitlabGroups.map(({ name, path }) => ({ label: name, value: path }))