diff --git a/.env b/.env index 717ad7f7..244d3b4d 100644 --- a/.env +++ b/.env @@ -5,4 +5,4 @@ DISABLE_TELEMETRY= INSTALL_METHOD= IS_CLUSTER_ZERO= KUBEFIRST_VERSION= -POSTHOG_KEY= \ No newline at end of file +POSTHOG_KEY= diff --git a/assets/civo.svg b/assets/civo.svg new file mode 100644 index 00000000..d50fcd62 --- /dev/null +++ b/assets/civo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/components/clusterReady/index.tsx b/components/clusterReady/index.tsx index b701bfea..49eccd93 100644 --- a/components/clusterReady/index.tsx +++ b/components/clusterReady/index.tsx @@ -12,11 +12,13 @@ const boxImageSrc = process.env.STORYBOOK_MODE ? boxImgSrc : '/static/box.svg'; export interface ClusterRunningMessageProps { clusterName?: string; domainName?: string; + onOpenConsole: () => void; } const ClusterReady: FunctionComponent = ({ clusterName, domainName, + onOpenConsole, }) => ( box @@ -26,7 +28,11 @@ const ClusterReady: FunctionComponent = ({ diff --git a/components/installationInfoCard/index.tsx b/components/installationInfoCard/index.tsx index d2bde5fe..ba5eebec 100644 --- a/components/installationInfoCard/index.tsx +++ b/components/installationInfoCard/index.tsx @@ -9,6 +9,7 @@ import useToggle from '../../hooks/useToggle'; import Typography from '../typography/index'; import { TRUE_BLUE, VOLCANIC_SAND } from '../../constants/colors'; import { InstallationInfo } from '../../types/redux'; +import CivoLogo from '../../assets/civo.svg'; import { Card, @@ -18,20 +19,27 @@ import { Link, LinkContent, DescriptionItem, + Image, } from './installationInfoCard.styled'; interface InstallationInfoCardProps { info: InstallationInfo; + isCivoMarketplace?: boolean; } -const InstallationInfoCard: FunctionComponent = ({ info, ...rest }) => { +const InstallationInfoCard: FunctionComponent = ({ + info, + isCivoMarketplace = false, + ...rest +}) => { const { isOpen, open, close } = useToggle(false); const { title, description, code, ctaLink, ctaDescription } = info; return ( + {isCivoMarketplace && civo-logo} - + {!isCivoMarketplace && } {title} diff --git a/components/installationInfoCard/installationInfoCard.styled.ts b/components/installationInfoCard/installationInfoCard.styled.ts index 61ad1d33..25e54a33 100644 --- a/components/installationInfoCard/installationInfoCard.styled.ts +++ b/components/installationInfoCard/installationInfoCard.styled.ts @@ -1,3 +1,4 @@ +import NextImage from 'next/image'; import styled, { css } from 'styled-components'; import Row from '../row'; @@ -72,3 +73,7 @@ export const DescriptionItem = styled.div` display: flex; gap: 4px; `; + +export const Image = styled(NextImage)` + margin-bottom: 16px; +`; diff --git a/components/service/index.tsx b/components/service/index.tsx index e7f2db8f..37a904ac 100644 --- a/components/service/index.tsx +++ b/components/service/index.tsx @@ -100,7 +100,7 @@ const Service: FunctionComponent = ({ return (
- {name} + {name} {name} {/* > = ({ diff --git a/containers/clusterForms/civo/index.tsx b/containers/clusterForms/civo/index.tsx index 328956eb..44c97794 100644 --- a/containers/clusterForms/civo/index.tsx +++ b/containers/clusterForms/civo/index.tsx @@ -1,11 +1,11 @@ import React, { FunctionComponent } from 'react'; import { FormFlowProps } from 'types/provision'; -import ClusterRunningMessage from '../../../components/clusterReady'; import TerminalLogs from '../../terminalLogs'; import { FormStep } from '../../../constants/installation'; import { InstallValues } from '../../../types/redux'; import AuthForm from '../shared/authForm'; +import ClusterRunning from '../shared/clusterRunning'; import SetupForm from './setupForm'; @@ -13,7 +13,7 @@ const CIVO_FORM_FLOW = { [FormStep.AUTHENTICATION]: AuthForm, [FormStep.SETUP]: SetupForm, [FormStep.PROVISIONING]: TerminalLogs, - [FormStep.READY]: ClusterRunningMessage, + [FormStep.READY]: ClusterRunning, }; export const CivoFormFlow: FunctionComponent> = ({ diff --git a/containers/clusterForms/civo/marketplace.tsx b/containers/clusterForms/civo/marketplace.tsx index a9e0fd30..35e40497 100644 --- a/containers/clusterForms/civo/marketplace.tsx +++ b/containers/clusterForms/civo/marketplace.tsx @@ -1,11 +1,11 @@ import React, { FunctionComponent } from 'react'; import { FormFlowProps } from 'types/provision'; -import ClusterRunningMessage from '../../../components/clusterReady'; import TerminalLogs from '../../terminalLogs'; import { CivoMarketpalceFormStep } from '../../../constants/installation'; import { InstallValues } from '../../../types/redux'; import AuthForm from '../shared/authForm'; +import ClusterRunning from '../shared/clusterRunning'; import SetupForm from './setupForm'; @@ -13,7 +13,7 @@ const CIVO_MARKETPLACE_FORM_FLOW = { [CivoMarketpalceFormStep.AUTHENTICATION]: AuthForm, [CivoMarketpalceFormStep.SETUP]: SetupForm, [CivoMarketpalceFormStep.PROVISIONING]: TerminalLogs, - [CivoMarketpalceFormStep.READY]: ClusterRunningMessage, + [CivoMarketpalceFormStep.READY]: ClusterRunning, }; export const CivoMarketplaceFormFlow: FunctionComponent> = ({ diff --git a/containers/clusterForms/digitalocean/index.tsx b/containers/clusterForms/digitalocean/index.tsx index 4f8478e4..46f59cba 100644 --- a/containers/clusterForms/digitalocean/index.tsx +++ b/containers/clusterForms/digitalocean/index.tsx @@ -1,11 +1,11 @@ import React, { FunctionComponent } from 'react'; import { FormFlowProps } from 'types/provision'; -import ClusterRunningMessage from '../../../components/clusterReady'; import TerminalLogs from '../../terminalLogs'; import { FormStep } from '../../../constants/installation'; import { InstallValues } from '../../../types/redux'; import AuthForm from '../shared/authForm'; +import ClusterRunning from '../shared/clusterRunning'; import DigitalOceanSetupForm from './setupForm'; @@ -13,7 +13,7 @@ const DIGITAL_OCEAN_FORM_FLOW = { [FormStep.AUTHENTICATION]: AuthForm, [FormStep.SETUP]: DigitalOceanSetupForm, [FormStep.PROVISIONING]: TerminalLogs, - [FormStep.READY]: ClusterRunningMessage, + [FormStep.READY]: ClusterRunning, }; export const DigitalOceanFormFlow: FunctionComponent> = ({ diff --git a/containers/clusterForms/shared/authForm/authForm.styled.ts b/containers/clusterForms/shared/authForm/authForm.styled.ts index ed00e7a3..5707e2b3 100644 --- a/containers/clusterForms/shared/authForm/authForm.styled.ts +++ b/containers/clusterForms/shared/authForm/authForm.styled.ts @@ -31,3 +31,14 @@ export const FormContainer = styled.div<{ isVisible?: boolean }>` flex-direction: column; gap: 32px; `; + +export const GitUserField = styled.div``; + +export const GitUserFieldInput = styled.div` + background-color: #fafafa; + border-radius: 4px; + color: ${({ theme }) => theme.colors.volcanicSand}; + height: 20px; + margin-top: 8px; + padding: 8px 12px; +`; diff --git a/containers/clusterForms/shared/authForm/index.tsx b/containers/clusterForms/shared/authForm/index.tsx index 3e456f3d..4d271dd2 100644 --- a/containers/clusterForms/shared/authForm/index.tsx +++ b/containers/clusterForms/shared/authForm/index.tsx @@ -33,7 +33,7 @@ import { } from '../../../../redux/slices/git.slice'; import { setGitProvider } from '../../../../redux/slices/installation.slice'; -import { FormContainer, GitContainer } from './authForm.styled'; +import { FormContainer, GitContainer, GitUserField, GitUserFieldInput } from './authForm.styled'; const AuthForm: FunctionComponent> = ({ control, @@ -41,6 +41,7 @@ const AuthForm: FunctionComponent> = ({ setValue, }) => { const [isGitRequested, setIsGitRequested] = useState(); + const [gitUserName, setGitUserName] = useState(); const dispatch = useAppDispatch(); @@ -112,7 +113,7 @@ const AuthForm: FunctionComponent> = ({ const { value } = target; if (isTokenValid) { - reset && reset({ userName: '' }); + setGitUserName(''); await dispatch(clearGitState()); } @@ -129,7 +130,8 @@ const AuthForm: FunctionComponent> = ({ ); const handleGitProviderChange = (provider: GitProvider) => { - reset && reset({ gitToken: '', gitOwner: '', userName: '' }); + setGitUserName(''); + reset && reset({ gitToken: '', gitOwner: '' }); dispatch(clearGitState()); dispatch(setIsGitSelected(true)); dispatch(setGitProvider(provider)); @@ -137,7 +139,7 @@ const AuthForm: FunctionComponent> = ({ useEffect(() => { if (githubUser?.login || gitlabUser?.name) { - setValue('userName', githubUser?.login || gitlabUser?.name); + setGitUserName(githubUser?.login || gitlabUser?.name); } }, [dispatch, githubUser, gitlabUser, setValue]); @@ -189,15 +191,14 @@ const AuthForm: FunctionComponent> = ({ onChange={handleOnChangeToken} onErrorText="Invalid token." /> - + + {`Username associated with ${gitLabel} token`} + {gitUserName} + {isGitHub ? ( > = ({ } loading={gitStateLoading} label="GitHub organization name" - placeholder="Select" /> ) : ( > = ({ } loading={gitStateLoading} label="GitLab group name" - placeholder="Select" /> )} {apiKeyInfo?.fieldKeys.map(({ label, name, helperText }) => ( diff --git a/containers/clusterForms/shared/clusterRunning/index.tsx b/containers/clusterForms/shared/clusterRunning/index.tsx new file mode 100644 index 00000000..731402f9 --- /dev/null +++ b/containers/clusterForms/shared/clusterRunning/index.tsx @@ -0,0 +1,20 @@ +import React, { FunctionComponent } from 'react'; +import { getClusters } from 'redux/thunks/api.thunk'; +import { useRouter } from 'next/router'; + +import { useAppDispatch } from '../../../../redux/store'; +import ClusterReady from '../../../../components/clusterReady'; + +const ClusterRunning: FunctionComponent = () => { + const dispatch = useAppDispatch(); + const { push } = useRouter(); + + const onOpenConsole = () => { + dispatch(getClusters()); + push('/services'); + }; + + return ; +}; + +export default ClusterRunning; diff --git a/containers/clusterForms/vultr/index.tsx b/containers/clusterForms/vultr/index.tsx index 7cfbf479..f2bf7077 100644 --- a/containers/clusterForms/vultr/index.tsx +++ b/containers/clusterForms/vultr/index.tsx @@ -1,11 +1,11 @@ import React, { FunctionComponent } from 'react'; import { FormFlowProps } from 'types/provision'; -import ClusterRunningMessage from '../../../components/clusterReady'; import TerminalLogs from '../../terminalLogs'; import { FormStep } from '../../../constants/installation'; import { InstallValues } from '../../../types/redux'; import AuthForm from '../shared/authForm'; +import ClusterRunning from '../shared/clusterRunning'; import AwsSetupForm from './setupForm'; @@ -13,7 +13,7 @@ const VULTR_FORM_FLOW = { [FormStep.AUTHENTICATION]: AuthForm, [FormStep.SETUP]: AwsSetupForm, [FormStep.PROVISIONING]: TerminalLogs, - [FormStep.READY]: ClusterRunningMessage, + [FormStep.READY]: ClusterRunning, }; export const VultrFormFlow: FunctionComponent> = ({ diff --git a/containers/gitOpsCatalog/index.tsx b/containers/gitOpsCatalog/index.tsx index 072a2436..4027b5c1 100644 --- a/containers/gitOpsCatalog/index.tsx +++ b/containers/gitOpsCatalog/index.tsx @@ -237,7 +237,7 @@ const gitOpsCatalog: FunctionComponent = () => { variant="filled" icon={} > - {`${selectedApp?.name} successfully added to provisioned services in cluster ${selectedCluster?.name}!`} + {`${selectedApp?.display_name} successfully added to provisioned services in cluster ${selectedCluster?.clusterName}!`} diff --git a/containers/provision/index.tsx b/containers/provision/index.tsx index efe8a3c9..0d2f2679 100644 --- a/containers/provision/index.tsx +++ b/containers/provision/index.tsx @@ -194,19 +194,21 @@ const Provision: FunctionComponent = () => { domainName={values?.domainName as string} /> - {isSetupStep && installType !== InstallationType.LOCAL && ( - - - - )} + {isSetupStep && + installType && + ![InstallationType.LOCAL, InstallationType.CIVO_MARKETPLACE].includes(installType) && ( + + + + )} ); }, [ @@ -268,7 +270,12 @@ const Provision: FunctionComponent = () => { showNextButton={installationStep < stepTitles.length - 1} > {form} - {info && } + {info && ( + + )} ); diff --git a/hooks/useInstallation.ts b/hooks/useInstallation.ts index 0fcac5d2..2d08c847 100644 --- a/hooks/useInstallation.ts +++ b/hooks/useInstallation.ts @@ -85,7 +85,7 @@ const getInfoByType = (installType: InstallationType, step: number) => { }, [InstallationType.CIVO_MARKETPLACE]: { [CivoMarketpalceFormStep.AUTHENTICATION]: { - title: 'Civo Prerequisites', + title: 'Prerequisites', description: [ 'Have an object store bucket available.', 'Establish a publicly routable DNS. Learn more',