fix: ui updates, retry and logs improvements

components/cloudProviderCard/cloudProviderCard.styled.ts

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import NextLink from 'next/link';
 
 import Card from '../card';
 
@@ -24,11 +25,16 @@ export const DetailsContainer = styled.div`
 `;
 
 export const LabelContainer = styled.div`
+  color: ${({ theme }) => theme.colors.volcanicSand};
   display: flex;
   gap: 16px;
 `;
 
-export const LinkContent = styled.a`
+export const Link = styled(NextLink)`
   color: ${({ theme }) => theme.colors.primary};
   text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
 `;

components/cloudProviderCard/index.tsx

@@ -1,6 +1,5 @@
 import React, { FunctionComponent } from 'react';
 import Image from 'next/image';
-import Link from 'next/link';
 
 import { CardProps } from '../card';
 import Typography from '../typography';
@@ -12,12 +11,7 @@ import digitalOceanLogo from '../../assets/digital_ocean_logo.svg';
 import vultrLogo from '../../assets/vultr_logo.svg';
 import Tag from '../tag';
 
-import {
-  CardContainer,
-  DetailsContainer,
-  LinkContent,
-  LabelContainer,
-} from './cloudProviderCard.styled';
+import { CardContainer, DetailsContainer, Link, LabelContainer } from './cloudProviderCard.styled';
 
 const PROVIDER_OPTIONS: Record<
   InstallationType,
@@ -60,7 +54,9 @@ const PROVIDER_OPTIONS: Record<
     logoSrc: digitalOceanLogo,
     label: 'Digital Ocean',
     description:
-      'A powerful open source cloud native tool set for identity and infrastructure management, application delivery, and secrets managament.',
+      'A cloud platform that allows developers to build, deploy, and scale applications. Its simplicity, ease of use and affordable pricing make it a popular choice for small businesses and startups. ',
+    learnMoreLink: '#',
+
     height: 50,
     width: 50,
     beta: true,
@@ -69,7 +65,7 @@ const PROVIDER_OPTIONS: Record<
     logoSrc: vultrLogo,
     label: 'Vultr',
     description:
-      'A powerful open source cloud native tool set for identity and infrastructure management, application delivery, and secrets managament.',
+      'A cloud hosting provider that offers high-performance SSD-based cloud servers, block storage, object storage, and dedicated servers in multiple locations worldwide. ',
     learnMoreLink: '#',
     height: 43,
     width: 50,
@@ -100,8 +96,9 @@ const CloudProviderCard: FunctionComponent<CloudProviderCardProps> = ({
         <Typography variant="body2">
           {description}
           {learnMoreLink && (
-            <Link href={learnMoreLink}>
-              <LinkContent> Learn More</LinkContent>
+            <Link href={learnMoreLink} target="_blank">
+              {' '}
+              Learn More
             </Link>
           )}
         </Typography>

components/errorBanner/index.tsx

@@ -11,7 +11,7 @@ export interface ErrorBannerProps {
   text: string;
 }
 
-const ErrorBanner: FunctionComponent<ErrorBannerProps> = ({ details, text }) => {
+const ErrorBanner: FunctionComponent<ErrorBannerProps> = ({ text }) => {
   return (
     <Container>
       <Header>

components/installationButtons/index.tsx

@@ -24,7 +24,7 @@ const InstallationButtons: FunctionComponent<InstallationButtonsProps> = ({
 }) => (
   <Container {...rest}>
     {showBackButton && (
-      <Button variant="outlined" color="primary" onClick={onBackButtonClick}>
+      <Button variant="outlined" color="secondary" onClick={onBackButtonClick}>
         Back
       </Button>
     )}

components/installationStepContainer/index.tsx

@@ -37,13 +37,21 @@ const InstallationStepContainer: FunctionComponent<InstallationStepContainerProp
   children,
   ...rest
 }) => {
-  const { completedSteps } = useAppSelector(({ cluster }) => ({
+  const { completedSteps, isProvisioned } = useAppSelector(({ cluster }) => ({
     ...cluster,
   }));
-  const progress = useMemo(
-    () => Math.round((completedSteps.length / Object.keys(CLUSTER_CHECKS).length) * 100),
-    [completedSteps.length],
-  );
+  const progress = useMemo(() => {
+    const clusterChecks = Object.keys(CLUSTER_CHECKS);
+    const progress = Math.round((completedSteps.length / clusterChecks.length) * 100);
+
+    if (completedSteps.length === clusterChecks.length && !isProvisioned) {
+      return 98;
+    } else if (isProvisioned) {
+      return 100;
+    }
+
+    return progress;
+  }, [completedSteps.length, isProvisioned]);
 
   return (
     <Container {...rest}>

components/installationStepContainer/installationStepContainer.styled.ts

@@ -36,6 +36,7 @@ export const Content = styled(Column)<{ hasInfo?: boolean; isProvisionStep: bool
 `;
 
 export const InstallTitle = styled(Typography)`
+  color: ${({ theme }) => theme.colors.volcanicSand};
   margin: 40px 0 24px 0 !important;
   text-align: center;
 `;

components/linearProgress/index.tsx

@@ -3,11 +3,12 @@ import LinearProgressMui, { LinearProgressProps } from '@mui/material/LinearProg
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 
-import { LIGHT_GREY, PRIMARY, VOLCANIC_SAND } from '../../constants/colors';
+import { ASMANI_SKY, LIGHT_GREY, PRIMARY, VOLCANIC_SAND } from '../../constants/colors';
 
 import { Container } from './linearProgress.styled';
 
 const LinearProgressWithLabel = (props: LinearProgressProps & { value: number }) => {
+  const isCompleted = props.value === 100;
   return (
     <Box sx={{ width: '512px' }}>
       <Box
@@ -19,7 +20,7 @@ const LinearProgressWithLabel = (props: LinearProgressProps & { value: number })
         }}
       >
         <Typography variant="subtitle3" color={VOLCANIC_SAND}>
-          Provisioning cluster:
+          {isCompleted ? 'Completed!' : 'Provisioning cluster:'}
         </Typography>
         <Typography variant="subtitle3" color={VOLCANIC_SAND}>{`${Math.round(
           props.value,
@@ -35,7 +36,9 @@ const LinearProgressWithLabel = (props: LinearProgressProps & { value: number })
             'background': LIGHT_GREY,
             'height': '9px',
             '> span': {
-              background: `linear-gradient(270deg, ${PRIMARY} 0%, #81E2B4 100%)`,
+              background: isCompleted
+                ? ASMANI_SKY
+                : `linear-gradient(270deg, ${PRIMARY} 0%, ${ASMANI_SKY} 100%)`,
               borderRadius: '55px',
             },
           }}

components/progress/progress.styled.tsx

@@ -8,14 +8,14 @@ import {
 import styled from 'styled-components';
 
 import { theme } from '../../theme';
-import { BISCAY, PORT_GORE, SALTBOX_BLUE } from '../../constants/colors';
+import { BISCAY, PORT_GORE } from '../../constants/colors';
 
 export const Label = muiStyled(StepLabel)(() => ({
-  [`& .${stepLabelClasses.label}`]: {
-    color: `${SALTBOX_BLUE}`,
+  [`& .${stepLabelClasses.completed}`]: {
+    color: theme.colors.saltboxBlue,
   },
   [`& .${stepLabelClasses.active}`]: {
-    color: `${BISCAY}`,
+    color: BISCAY,
   },
   [`& .${stepLabelClasses.disabled}`]: {
     color: theme.colors.saltboxBlue,

constants/cluster.tsx

@@ -7,21 +7,19 @@ export const CLUSTER_MENU_OPTIONS = [
   { label: DELETE_OPTION, color: FIRE_BRICK },
 ];
 
-export const CLUSTER_CHECKS: { [key: string]: string } = {
-  install_tools_check: 'Installing tools',
-  domain_liveness_check: 'Domain liveness check',
-  git_init_check: 'Initializing git',
-  kbot_setup_check: 'Kbot setup',
-  gitops_ready_check: 'Initializing gitops',
-  git_terraform_apply_check: 'Git terraform apply',
-  gitops_pushed_check: 'Gitops repos pushed',
-  cloud_terraform_apply_check: 'Cloud terraform apply',
-  cluster_secrets_created_check: 'Cretating cluster secrets',
-  argocd_install_check: 'Installing argocd',
-  argocd_initialize_check: 'Initializing argocd',
-  argocd_create_registry_check: 'Create argocd registry',
-  argocd_delete_registry_check: 'Delete argocd registry',
-  vault_initialized_check: 'Initializing vault',
-  vault_terraform_apply_check: 'Vault terraform apply',
-  users_terraform_apply_check: 'Users terraform apply',
+export const CLUSTER_CHECKS: { [key: string]: { label: string; order: number } } = {
+  install_tools_check: { label: 'Installing tools', order: 1 },
+  domain_liveness_check: { label: 'Domain liveness check', order: 2 },
+  kbot_setup_check: { label: 'Kbot setup', order: 3 },
+  git_init_check: { label: 'Initializing git', order: 4 },
+  gitops_ready_check: { label: 'Initializing gitops', order: 5 },
+  git_terraform_apply_check: { label: 'Git terraform apply', order: 6 },
+  gitops_pushed_check: { label: 'Gitops repos pushed', order: 7 },
+  cloud_terraform_apply_check: { label: 'Cloud terraform apply', order: 8 },
+  cluster_secrets_created_check: { label: 'Creating cluster secrets', order: 9 },
+  argocd_install_check: { label: 'Installing argocd', order: 10 },
+  argocd_initialize_check: { label: 'Initializing argocd', order: 11 },
+  vault_initialized_check: { label: 'Initializing vault', order: 12 },
+  vault_terraform_apply_check: { label: 'Vault terraform apply', order: 13 },
+  users_terraform_apply_check: { label: 'Users terraform apply', order: 14 },
 };

constants/colors.ts

@@ -48,3 +48,4 @@ export const LIBERTY_BLUE = '#0f172a';
 export const EXCLUSIVE_PLUM = '#71717A';
 export const LAUGHING_ORANGE = '#F59E0B';
 export const SEFID_WHITE = '#FEF2F2';
+export const ASMANI_SKY = '#81E2B4';

containers/conciseLogs/conciseLogs.styled.ts

@@ -8,6 +8,10 @@ export const Container = styled.div`
   overflow: auto;
 `;
 
+export const EstimatedTime = styled.div`
+  margin-bottom: 16px;
+`;
+
 export const Step = styled.div`
   align-items: center;
   display: flex;
@@ -23,9 +27,10 @@ export const StepNumber = styled(Typography)`
 `;
 
 export const StepLabel = styled(Typography)`
-  font-style: normal;
-  font-weight: 400;
+  font-family: 'Roboto Mono';
   font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
   line-height: 18px;
 `;
 

containers/conciseLogs/index.tsx

@@ -1,47 +1,81 @@
 import React, { FunctionComponent, useMemo } from 'react';
+import sortBy from 'lodash/sortBy';
 
 import { CLUSTER_CHECKS } from '../../constants/cluster';
 import { useAppSelector } from '../../redux/store';
+import { InstallationType } from '../../types/redux';
 
-import { Container, Step, StepLabel, StepNumber, Success, SuccessText } from './conciseLogs.styled';
+import {
+  Container,
+  EstimatedTime,
+  Step,
+  StepLabel,
+  StepNumber,
+  Success,
+  SuccessText,
+} from './conciseLogs.styled';
 
+const ESTIMATED_TIMES_BY_CLOUD: Record<InstallationType, number> = {
+  [InstallationType.LOCAL]: 5,
+  [InstallationType.AWS]: 35,
+  [InstallationType.CIVO]: 10,
+  [InstallationType.DIGITAL_OCEAN]: 7,
+  [InstallationType.VULTR]: 10,
+};
 export interface ConciseLogsProps {
-  completedSteps: Array<string>;
+  completedSteps: Array<{ label: string; order: number }>;
 }
 
 const ConciseLogs: FunctionComponent<ConciseLogsProps> = ({ completedSteps }) => {
-  const { isError, isProvisioned, lastErrorCondition } = useAppSelector(({ cluster }) => ({
-    cluster: cluster.selectedCluster,
-    isProvisioned: cluster.isProvisioned,
-    lastErrorCondition: cluster.lastErrorCondition,
-    isError: cluster.isError,
-  }));
+  const { installType, isError, isProvisioned, lastErrorCondition } = useAppSelector(
+    ({ cluster, installation }) => ({
+      cluster: cluster.selectedCluster,
+      isProvisioned: cluster.isProvisioned,
+      lastErrorCondition: cluster.lastErrorCondition,
+      isError: cluster.isError,
+      installType: installation.installType,
+    }),
+  );
 
   const lastStep = useMemo(() => {
     if (completedSteps.length < Object.keys(CLUSTER_CHECKS).length) {
-      const nextStep = Object.values(CLUSTER_CHECKS)[completedSteps.length + 1];
+      const nextStep = Object.values(CLUSTER_CHECKS)[completedSteps.length];
       return nextStep;
     }
 
     return null;
   }, [completedSteps.length]);
 
+  const estimatedTime = useMemo(
+    () => ESTIMATED_TIMES_BY_CLOUD[installType as InstallationType],
+    [installType],
+  );
+
   return (
     <Container>
-      {completedSteps.map((step, index) => (
+      <EstimatedTime>
+        <StepLabel color="secondary">⏰ Estimated time: {estimatedTime} minutes</StepLabel>
+      </EstimatedTime>
+      {sortBy(completedSteps, 'order').map((step, index) => (
         <Step key={index}>
           <>✅</>
-          <StepNumber>{`[${index + 1}/${Object.keys(CLUSTER_CHECKS).length - 1}]`}</StepNumber>
-          <StepLabel color="secondary">{step}</StepLabel>{' '}
+          <StepNumber>{`[${index + 1}/${Object.keys(CLUSTER_CHECKS).length}]`}</StepNumber>
+          <StepLabel color="secondary">{step.label}</StepLabel>{' '}
         </Step>
       ))}
       {!isError && lastStep && (
         <Step>
           <>💫</>
           <StepNumber>{`[${completedSteps.length + 1}/${
-            Object.keys(CLUSTER_CHECKS).length - 1
+            Object.keys(CLUSTER_CHECKS).length
           }]`}</StepNumber>
-          <StepLabel color="secondary">{lastStep}</StepLabel>{' '}
+          <StepLabel color="secondary">{lastStep.label}</StepLabel>{' '}
+        </Step>
+      )}
+      {!isProvisioned && !lastStep && !isError && (
+        <Step>
+          <>💫</>
+          <StepLabel color="secondary">Wrapping up</StepLabel>{' '}
         </Step>
       )}
       {isError && (

containers/installationsSelection/index.tsx

@@ -65,7 +65,7 @@ export const InstallationsSelection: FunctionComponent<InstallationsSelectionPro
       </ButtonContainer>
       {gitProvider && (
         <AdventureContent>
-          <Subtitle variant="subtitle2">Now Select your cloud adventure</Subtitle>
+          <Subtitle variant="subtitle2">Now select your cloud adventure</Subtitle>
           <CloudProviderContainer>
             {INSTALLATION_TYPES.map((type) => (
               <CloudProviderCard

containers/installationsSelection/installationsSelection.styled.ts

@@ -22,6 +22,7 @@ export const AdventureContent = styled(Column)`
 `;
 
 export const Subtitle = styled(Typography)`
+  color: ${({ theme }) => theme.colors.volcanicSand};
   margin: 40px 0 24px 0 !important;
 `;