diff --git a/components/installationButtons/index.tsx b/components/installationButtons/index.tsx index fd72cc90..dcd7a22d 100644 --- a/components/installationButtons/index.tsx +++ b/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 = ({ - activeStep, showBackButton, onBackButtonClick, - onNextButtonClick, showNextButton, nextButtonText = 'Next', nextButtonDisabled, @@ -37,7 +33,6 @@ const InstallationButtons: FunctionComponent = ({ variant="contained" color="primary" id="next" - onClick={() => activeStep === 0 && onNextButtonClick()} disabled={nextButtonDisabled} > {nextButtonText} diff --git a/components/installationButtons/installationButtons.stories.tsx b/components/installationButtons/installationButtons.stories.tsx index 12333c9d..26b9a817 100644 --- a/components/installationButtons/installationButtons.stories.tsx +++ b/components/installationButtons/installationButtons.stories.tsx @@ -17,7 +17,7 @@ export default { }; const DefaultTemplate: Story = (args) => { - return ; + return ; }; export const Default = DefaultTemplate.bind({}); diff --git a/components/installationStepContainer/index.tsx b/components/installationStepContainer/index.tsx index cccf06fc..4dd3bc3f 100644 --- a/components/installationStepContainer/index.tsx +++ b/components/installationStepContainer/index.tsx @@ -31,7 +31,6 @@ const InstallationStepContainer: FunctionComponent ` - 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); `}; `; diff --git a/components/learnMore/index.tsx b/components/learnMore/index.tsx index d750a7b0..437f7789 100644 --- a/components/learnMore/index.tsx +++ b/components/learnMore/index.tsx @@ -1,7 +1,9 @@ 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'; @@ -9,15 +11,33 @@ export interface LearnMoreProps { description: string; href: string; linkTitle: string; + installType?: InstallationType; } -const LearnMore: FunctionComponent = ({ description, href, linkTitle }) => { +const LearnMore: FunctionComponent = ({ + description, + href, + installType, + linkTitle, +}) => { + const docsDomainLink = `https://docs.kubefirst.io/${ + installType && [InstallationType.DIGITAL_OCEAN, InstallationType.VULTR].includes(installType) + ? 'k3d' + : formatCloudProvider(installType) + }`; + return ( <> {description}{' '} - + {linkTitle} diff --git a/containers/clusterForms/shared/advancedOptions/index.tsx b/containers/clusterForms/shared/advancedOptions/index.tsx index 28800b36..e150ef17 100644 --- a/containers/clusterForms/shared/advancedOptions/index.tsx +++ b/containers/clusterForms/shared/advancedOptions/index.tsx @@ -16,9 +16,7 @@ const AdvancedOptions: FunctionComponent> = ({ 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> = ({ cont }} /> { 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} diff --git a/redux/thunks/api.thunk.ts b/redux/thunks/api.thunk.ts index 9675521f..a04c12ae 100644 --- a/redux/thunks/api.thunk.ts +++ b/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, - 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 }>('/api/proxy', { diff --git a/utils/index.ts b/utils/index.ts new file mode 100644 index 00000000..6bd10c03 --- /dev/null +++ b/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) + ); +};