fix: tweaks

.env

@@ -5,4 +5,4 @@ DISABLE_TELEMETRY=
 INSTALL_METHOD=
 IS_CLUSTER_ZERO=
 KUBEFIRST_VERSION=
-POSTHOG_KEY=
+POSTHOG_KEY=

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<ClusterRunningMessageProps> = ({
   clusterName,
   domainName,
+  onOpenConsole,
 }) => (
   <Container>
     <Image alt="box" src={boxImageSrc} width={170} height={160} />
@@ -26,7 +28,11 @@ const ClusterReady: FunctionComponent<ClusterRunningMessageProps> = ({
       </Typography>
     </Title>
     <Button variant="contained" color="primary">
-      <Link href={`https://kubefirst.${domainName}/services`} target="_blank">
+      <Link
+        href={`https://kubefirst.${domainName}/services`}
+        target="_blank"
+        onClick={onOpenConsole}
+      >
         Open kubefirst console
       </Link>
     </Button>

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<InstallationInfoCardProps> = ({ info, ...rest }) => {
+const InstallationInfoCard: FunctionComponent<InstallationInfoCardProps> = ({
+  info,
+  isCivoMarketplace = false,
+  ...rest
+}) => {
   const { isOpen, open, close } = useToggle(false);
   const { title, description, code, ctaLink, ctaDescription } = info;
 
   return (
     <Card {...rest}>
+      {isCivoMarketplace && <Image src={CivoLogo} alt="civo-logo" height={24} width={72} />}
       <CardInfoHeader>
-        <InfoOutlinedIcon htmlColor={TRUE_BLUE} />
+        {!isCivoMarketplace && <InfoOutlinedIcon htmlColor={TRUE_BLUE} />}
         <Typography variant="subtitle3" color={VOLCANIC_SAND}>
           {title}
         </Typography>

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;
+`;

components/service/index.tsx

@@ -100,7 +100,7 @@ const Service: FunctionComponent<ServiceProps> = ({
   return (
     <Container>
       <Header>
-        <Image src={image} alt={name} width="24" height="24" />
+        <Image src={image} alt={name} width="32" height="32" />
         <Title variant="subtitle2">{name}</Title>
         {/* <NextImage
           src={`https://argocd.mgmt-20.kubefirst.com/api/badge?name=${name.toLowerCase()}`}

containers/clusterForms/aws/index.tsx

@@ -1,19 +1,19 @@
 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';
 
 const AWS_FORM_FLOW = {
   [FormStep.AUTHENTICATION]: AuthForm,
   [FormStep.SETUP]: AwsSetupForm,
   [FormStep.PROVISIONING]: TerminalLogs,
-  [FormStep.READY]: ClusterRunningMessage,
+  [FormStep.READY]: ClusterRunning,
 };
 
 export const AwsFormFlow: FunctionComponent<FormFlowProps<InstallValues>> = ({

containers/clusterForms/civo/index.tsx

@@ -1,19 +1,19 @@
 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';
 
 const CIVO_FORM_FLOW = {
   [FormStep.AUTHENTICATION]: AuthForm,
   [FormStep.SETUP]: SetupForm,
   [FormStep.PROVISIONING]: TerminalLogs,
-  [FormStep.READY]: ClusterRunningMessage,
+  [FormStep.READY]: ClusterRunning,
 };
 
 export const CivoFormFlow: FunctionComponent<FormFlowProps<InstallValues>> = ({

containers/clusterForms/civo/marketplace.tsx

@@ -1,19 +1,19 @@
 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';
 
 const CIVO_MARKETPLACE_FORM_FLOW = {
   [CivoMarketpalceFormStep.AUTHENTICATION]: AuthForm,
   [CivoMarketpalceFormStep.SETUP]: SetupForm,
   [CivoMarketpalceFormStep.PROVISIONING]: TerminalLogs,
-  [CivoMarketpalceFormStep.READY]: ClusterRunningMessage,
+  [CivoMarketpalceFormStep.READY]: ClusterRunning,
 };
 
 export const CivoMarketplaceFormFlow: FunctionComponent<FormFlowProps<InstallValues>> = ({

containers/clusterForms/digitalocean/index.tsx

@@ -1,19 +1,19 @@
 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';
 
 const DIGITAL_OCEAN_FORM_FLOW = {
   [FormStep.AUTHENTICATION]: AuthForm,
   [FormStep.SETUP]: DigitalOceanSetupForm,
   [FormStep.PROVISIONING]: TerminalLogs,
-  [FormStep.READY]: ClusterRunningMessage,
+  [FormStep.READY]: ClusterRunning,
 };
 
 export const DigitalOceanFormFlow: FunctionComponent<FormFlowProps<InstallValues>> = ({

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;
+`;

containers/clusterForms/shared/authForm/index.tsx

@@ -33,14 +33,15 @@ 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<FormFlowProps<InstallValues>> = ({
   control,
   reset,
   setValue,
 }) => {
   const [isGitRequested, setIsGitRequested] = useState<boolean>();
+  const [gitUserName, setGitUserName] = useState<string>();
 
   const dispatch = useAppDispatch();
 
@@ -112,7 +113,7 @@ const AuthForm: FunctionComponent<FormFlowProps<InstallValues>> = ({
     const { value } = target;
 
     if (isTokenValid) {
-      reset && reset({ userName: '' });
+      setGitUserName('');
       await dispatch(clearGitState());
     }
 
@@ -129,15 +130,16 @@ const AuthForm: FunctionComponent<FormFlowProps<InstallValues>> = ({
   );
 
   const handleGitProviderChange = (provider: GitProvider) => {
-    reset && reset({ gitToken: '', gitOwner: '', userName: '' });
+    setGitUserName('');
+    reset && reset({ gitToken: '', gitOwner: '' });
     dispatch(clearGitState());
     dispatch(setIsGitSelected(true));
     dispatch(setGitProvider(provider));
   };
 
   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<FormFlowProps<InstallValues>> = ({
           onChange={handleOnChangeToken}
           onErrorText="Invalid token."
         />
-        <ControlledTextField
-          control={control}
-          name="userName"
-          label={`Username associated with ${gitLabel} token`}
-          disabled
-          rules={{
-            required: false,
-          }}
-        />
+        <GitUserField>
+          <Typography
+            variant="labelLarge"
+            sx={{ display: 'flex', gap: '4px' }}
+            color={EXCLUSIVE_PLUM}
+          >{`Username associated with ${gitLabel} token`}</Typography>
+          <GitUserFieldInput>{gitUserName}</GitUserFieldInput>
+        </GitUserField>
         {isGitHub ? (
           <ControlledAutocomplete
             control={control}
@@ -211,7 +212,6 @@ const AuthForm: FunctionComponent<FormFlowProps<InstallValues>> = ({
             }
             loading={gitStateLoading}
             label="GitHub organization name"
-            placeholder="Select"
           />
         ) : (
           <ControlledAutocomplete
@@ -225,7 +225,6 @@ const AuthForm: FunctionComponent<FormFlowProps<InstallValues>> = ({
             }
             loading={gitStateLoading}
             label="GitLab group name"
-            placeholder="Select"
           />
         )}
         {apiKeyInfo?.fieldKeys.map(({ label, name, helperText }) => (

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 <ClusterReady onOpenConsole={onOpenConsole} />;
+};
+
+export default ClusterRunning;

containers/clusterForms/vultr/index.tsx

@@ -1,19 +1,19 @@
 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';
 
 const VULTR_FORM_FLOW = {
   [FormStep.AUTHENTICATION]: AuthForm,
   [FormStep.SETUP]: AwsSetupForm,
   [FormStep.PROVISIONING]: TerminalLogs,
-  [FormStep.READY]: ClusterRunningMessage,
+  [FormStep.READY]: ClusterRunning,
 };
 
 export const VultrFormFlow: FunctionComponent<FormFlowProps<InstallValues>> = ({

containers/gitOpsCatalog/index.tsx

@@ -237,7 +237,7 @@ const gitOpsCatalog: FunctionComponent = () => {
           variant="filled"
           icon={<CheckCircleIcon />}
         >
-          <Typography variant="subtitle2">{`${selectedApp?.name} successfully added to provisioned services in cluster ${selectedCluster?.name}!`}</Typography>
+          <Typography variant="subtitle2">{`${selectedApp?.display_name} successfully added to provisioned services in cluster ${selectedCluster?.clusterName}!`}</Typography>
         </Alert>
       </Snackbar>
     </Container>

containers/provision/index.tsx

@@ -194,19 +194,21 @@ const Provision: FunctionComponent = () => {
             domainName={values?.domainName as string}
           />
         </FormContent>
-        {isSetupStep && installType !== InstallationType.LOCAL && (
-          <AdvancedOptionsContainer>
-            <AdvancedOptions
-              control={control}
-              currentStep={installationStep}
-              setValue={setValue}
-              trigger={trigger}
-              watch={watch}
-              clusterName={values?.clusterName as string}
-              domainName={values?.domainName as string}
-            />
-          </AdvancedOptionsContainer>
-        )}
+        {isSetupStep &&
+          installType &&
+          ![InstallationType.LOCAL, InstallationType.CIVO_MARKETPLACE].includes(installType) && (
+            <AdvancedOptionsContainer>
+              <AdvancedOptions
+                control={control}
+                currentStep={installationStep}
+                setValue={setValue}
+                trigger={trigger}
+                watch={watch}
+                clusterName={values?.clusterName as string}
+                domainName={values?.domainName as string}
+              />
+            </AdvancedOptionsContainer>
+          )}
       </>
     );
   }, [
@@ -268,7 +270,12 @@ const Provision: FunctionComponent = () => {
         showNextButton={installationStep < stepTitles.length - 1}
       >
         {form}
-        {info && <InstallationInfoCard info={info} />}
+        {info && (
+          <InstallationInfoCard
+            info={info}
+            isCivoMarketplace={installType === InstallationType.CIVO_MARKETPLACE}
+          />
+        )}
       </InstallationStepContainer>
     </Form>
   );

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. <a href="https://www.civo.com/learn/configure-dns#adding-a-domain-name" target="_blank">Learn more</a>',