fix: state

components/installationButtons/index.tsx

@@ -5,20 +5,16 @@ import Button from '../button';
 import { Container } from './installationButtons.styled';
 
 export interface InstallationButtonsProps {
-  activeStep: number;
   showBackButton?: boolean;
   onBackButtonClick?: () => void;
-  onNextButtonClick: () => void;
   showNextButton: boolean;
   nextButtonText?: string;
   nextButtonDisabled?: boolean;
 }
 
 const InstallationButtons: FunctionComponent<InstallationButtonsProps> = ({
-  activeStep,
   showBackButton,
   onBackButtonClick,
-  onNextButtonClick,
   showNextButton,
   nextButtonText = 'Next',
   nextButtonDisabled,
@@ -37,7 +33,6 @@ const InstallationButtons: FunctionComponent<InstallationButtonsProps> = ({
         variant="contained"
         color="primary"
         id="next"
-        onClick={() => activeStep === 0 && onNextButtonClick()}
         disabled={nextButtonDisabled}
       >
         {nextButtonText}

components/installationButtons/installationButtons.stories.tsx

@@ -17,7 +17,7 @@ export default {
 };
 
 const DefaultTemplate: Story = (args) => {
-  return <InstallationButtons onNextButtonClick={noop} onBackButtonClick={noop} {...args} />;
+  return <InstallationButtons onBackButtonClick={noop} {...args} />;
 };
 
 export const Default = DefaultTemplate.bind({});

components/installationStepContainer/index.tsx

@@ -31,7 +31,6 @@ const InstallationStepContainer: FunctionComponent<InstallationStepContainerProp
   installationTitle,
   isProvisionStep,
   showBackButton,
-  onNextButtonClick,
   onBackButtonClick = noop,
   nextButtonText,
   nextButtonDisabled,
@@ -69,8 +68,6 @@ const InstallationStepContainer: FunctionComponent<InstallationStepContainerProp
         </Content>
       </FormContent>
       <InstallationButtons
-        activeStep={activeStep}
-        onNextButtonClick={onNextButtonClick}
         onBackButtonClick={onBackButtonClick}
         showBackButton={showBackButton}
         nextButtonText={nextButtonText}

components/installationStepContainer/installationStepContainer.styled.ts

@@ -60,7 +60,7 @@ export const Title = styled.div`
 `;
 
 export const FormContent = styled.div<{ isProvisionStep: boolean }>`
-  height: calc(100% - 218px);
+  height: calc(100% - 200px);
   overflow-y: auto;
   width: 100%;
 
@@ -71,6 +71,6 @@ export const FormContent = styled.div<{ isProvisionStep: boolean }>`
   `}
 
   ${media.greaterThan('lg')`
-    height: calc(100% - 218px);
+    height: calc(100% - 200px);
   `};
 `;

components/learnMore/index.tsx

@@ -1,23 +1,43 @@
 import React, { FunctionComponent } from 'react';
 import { Divider } from '@mui/material';
+import { formatCloudProvider } from 'utils';
 
 import NextLink from '../../components/nextLink';
+import { InstallationType } from '../../types/redux';
 
 import { Text } from './learnMore.styled';
 
 export interface LearnMoreProps {
   description: string;
   href: string;
   linkTitle: string;
+  installType?: InstallationType;
 }
 
-const LearnMore: FunctionComponent<LearnMoreProps> = ({ description, href, linkTitle }) => {
+const LearnMore: FunctionComponent<LearnMoreProps> = ({
+  description,
+  href,
+  installType,
+  linkTitle,
+}) => {
+  const docsDomainLink = `https://docs.kubefirst.io/${
+    installType && [InstallationType.DIGITAL_OCEAN, InstallationType.VULTR].includes(installType)
+      ? 'k3d'
+      : formatCloudProvider(installType)
+  }`;
+
   return (
     <>
       <Divider sx={{ m: '-20px', p: '8px 0' }} />
       <Text variant="labelLarge">
         {description}{' '}
-        <NextLink href={href || 'https://docs.kubefirst.io'} target="_blank">
+        <NextLink
+          href={
+            href ||
+            `${docsDomainLink}/explore/gitops#using-your-own-gitops-template-repository-fork`
+          }
+          target="_blank"
+        >
           {linkTitle}
         </NextLink>
       </Text>

containers/clusterForms/shared/advancedOptions/index.tsx

@@ -16,9 +16,7 @@ const AdvancedOptions: FunctionComponent<FormFlowProps<InstallValues>> = ({ cont
     setIsAdvancedOptionsEnabled(target.checked);
   };
 
-  const { values } = useAppSelector(({ installation }) => ({
-    values: installation.values,
-  }));
+  const { values, installType } = useAppSelector(({ installation }) => installation);
 
   return (
     <>
@@ -54,6 +52,7 @@ const AdvancedOptions: FunctionComponent<FormFlowProps<InstallValues>> = ({ cont
             }}
           />
           <LearnMore
+            installType={installType}
             description="Learn more about"
             href=""
             linkTitle="customizing the GitOps template"

containers/provision/index.tsx

@@ -70,6 +70,7 @@ const Provision: FunctionComponent = () => {
   const {
     control,
     formState: { isValid: isFormValid },
+    getValues,
     handleSubmit,
     setValue,
     trigger,
@@ -114,20 +115,17 @@ const Provision: FunctionComponent = () => {
 
   const handleGoNext = useCallback(() => {
     dispatch(setInstallationStep(installationStep + 1));
-
-    setTimeout(trigger, 500);
     dispatch(clearError());
     dispatch(clearClusterState());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [dispatch, installationStep]);
 
-  const handleNextButtonClick = useCallback(async () => {
+  const handleNextButtonClick = async () => {
     if (isAuthStep) {
-      await dispatch(getCloudRegions());
+      await dispatch(getCloudRegions(getValues()));
     } else {
       handleGoNext();
     }
-  }, [dispatch, handleGoNext, isAuthStep]);
+  };
 
   const handleBackButtonClick = useCallback(() => {
     dispatch(clearValidation());
@@ -137,6 +135,10 @@ const Provision: FunctionComponent = () => {
   }, [dispatch, installationStep, trigger]);
 
   const onSubmit = async (values: InstallValues) => {
+    if (installationStep === 0 && installType !== InstallationType.CIVO_MARKETPLACE) {
+      return handleNextButtonClick();
+    }
+
     if (isValid) {
       await dispatch(setInstallValues(values));
 
@@ -258,7 +260,6 @@ const Provision: FunctionComponent = () => {
         showBackButton={
           installationStep < stepTitles.length - 1 && installationStep > 0 && !isProvisionStep
         }
-        onNextButtonClick={handleNextButtonClick}
         onBackButtonClick={handleBackButtonClick}
         nextButtonText={isSetupStep ? 'Create cluster' : 'Next'}
         nextButtonDisabled={!isValid}

redux/thunks/api.thunk.ts

@@ -4,6 +4,7 @@ import { FieldValues } from 'react-hook-form';
 import sortBy from 'lodash/sortBy';
 import queryString from 'query-string';
 
+import { formatCloudProvider } from '../../utils';
 import { AppDispatch, RootState } from '../store';
 import {
   Cluster,
@@ -12,15 +13,9 @@ import {
   ClusterServices,
 } from '../../types/provision';
 import { GitOpsCatalogApp, GitOpsCatalogProps } from '../../types/gitOpsCatalog';
-import { InstallationType } from '../../types/redux';
+import { InstallValues, InstallationType } from '../../types/redux';
 import { TelemetryClickEvent } from '../../types/telemetry';
 
-const formatCloudProvider = (cloudProvider?: string) => {
-  return (
-    cloudProvider && cloudProvider.replace(InstallationType.CIVO_MARKETPLACE, InstallationType.CIVO)
-  );
-};
-
 const mapClusterFromRaw = (cluster: ClusterResponse): Cluster => ({
   id: cluster._id,
   clusterName: cluster.cluster_name,
@@ -226,14 +221,14 @@ export const installGitOpsApp = createAsyncThunk<
 
 export const getCloudRegions = createAsyncThunk<
   Array<string>,
-  void,
+  InstallValues,
   {
     dispatch: AppDispatch;
     state: RootState;
   }
->('api/getCloudRegions', async (_, { getState }) => {
+>('api/getCloudRegions', async (values, { getState }) => {
   const {
-    installation: { values, installType },
+    installation: { installType },
   } = getState();
 
   const res = await axios.post<{ regions: Array<string> }>('/api/proxy', {

utils/index.ts

@@ -0,0 +1,7 @@
+import { InstallationType } from '../types/redux';
+
+export const formatCloudProvider = (cloudProvider?: string) => {
+  return (
+    cloudProvider && cloudProvider.replace(InstallationType.CIVO_MARKETPLACE, InstallationType.CIVO)
+  );
+};