feat: error handling

components/autocomplete/index.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, ForwardedRef, FunctionComponent } from 'react';
+import React, { ForwardedRef, FunctionComponent } from 'react';
 import { Autocomplete as AutocompleteMUI, CircularProgress, SxProps } from '@mui/material';
 import { ControllerRenderProps, FieldValues } from 'react-hook-form';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -12,7 +12,6 @@ export interface IAutocompleteProps extends ControllerRenderProps<FieldValues> {
   inputRef?: ForwardedRef<unknown>;
   loading?: boolean;
   noOptionsText?: string;
-  onChangeInput?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
   options: Array<{ value: string; label: string }>;
   placeholder?: string;
   sx?: SxProps;
@@ -28,7 +27,6 @@ const AutocompleteComponent: FunctionComponent<IAutocompleteProps> = ({
   loading,
   noOptionsText,
   placeholder,
-  onChangeInput,
   options,
   required,
   error,
@@ -63,9 +61,6 @@ const AutocompleteComponent: FunctionComponent<IAutocompleteProps> = ({
               )}
             </InputAdornmentContainer>
           }
-          onChange={(event) => {
-            onChangeInput && onChangeInput(event);
-          }}
           {...params}
           label={label}
         />

components/controlledFields/AutoComplete.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from 'react';
+import React, { useState } from 'react';
 import { Control, Controller, FieldValues, UseControllerProps } from 'react-hook-form';
 
 import Autocomplete from '../autocomplete/index';
@@ -17,15 +17,15 @@ export interface ControlledTextFieldProps<T extends FieldValues> extends UseCont
   placeholder?: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   filterOptions?: (options: any[]) => any[];
-  onChangeInput?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  onChange?: (value: string) => void;
   options: Array<{ value: string; label: string }>;
 }
 
 function ControlledAutocomplete<T extends FieldValues>({
   label,
   name,
   required,
-  onChangeInput,
+  onChange,
   filterOptions,
   options,
   rules,
@@ -55,8 +55,8 @@ function ControlledAutocomplete<T extends FieldValues>({
           onChange={(event, optionValue) => {
             const { value } = optionValue || {};
             field.onChange({ target: { value } });
+            onChange && onChange(value);
           }}
-          onChangeInput={onChangeInput}
           filterOptions={filterOptions}
           options={options}
           label={label}

components/controlledFields/Password.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { ChangeEvent, useState } from 'react';
 import { Control, Controller, FieldValues, UseControllerProps } from 'react-hook-form';
 
 import Password from '../password/index';
@@ -15,6 +15,7 @@ export interface ControlledTextFieldProps<T extends FieldValues> extends UseCont
   error?: boolean;
   onErrorText?: string;
   onBlur?: (value: string) => void;
+  onChange?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 }
 
 function ControlledPassword<T extends FieldValues>({
@@ -26,6 +27,7 @@ function ControlledPassword<T extends FieldValues>({
   error,
   onErrorText,
   onBlur,
+  onChange,
   ...props
 }: ControlledTextFieldProps<T>) {
   const [isBlur, setIsBlur] = useState(false);
@@ -43,6 +45,10 @@ function ControlledPassword<T extends FieldValues>({
             setIsBlur(true);
             onBlur && onBlur(field.value);
           }}
+          onChange={(event) => {
+            field.onChange(event);
+            onChange && onChange(event);
+          }}
           inputRef={field.ref}
           fullWidth
           required={required}

components/errorBanner/errorBanner.styled.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  background-color: ${({ theme }) => theme.colors.sefidWhite};
+  border: 1px solid #fee2e2;
+  border-radius: 4px;
+  min-height: 18px;
+  padding: 16px;
+  width: calc(100% - 32px);
+`;
+
+export const Header = styled.div`
+  display: flex;
+  gap: 8px;
+`;

components/errorBanner/index.tsx

@@ -0,0 +1,27 @@
+import React, { FunctionComponent } from 'react';
+import ErrorIcon from '@mui/icons-material/Error';
+
+import Typography from '../typography';
+import { VOLCANIC_SAND } from '../../constants/colors';
+
+import { Container, Header } from './errorBanner.styled';
+
+export interface ErrorBannerProps {
+  details?: string;
+  text: string;
+}
+
+const ErrorBanner: FunctionComponent<ErrorBannerProps> = ({ details, text }) => {
+  return (
+    <Container>
+      <Header>
+        <ErrorIcon color="error" fontSize="small" />
+        <Typography variant="body2" color={VOLCANIC_SAND}>
+          <div dangerouslySetInnerHTML={{ __html: text }} />
+        </Typography>
+      </Header>
+    </Container>
+  );
+};
+
+export default ErrorBanner;

components/installationStepContainer/index.tsx

@@ -1,8 +1,11 @@
-import React, { FunctionComponent, PropsWithChildren } from 'react';
+import React, { FunctionComponent, PropsWithChildren, useMemo } from 'react';
 
 import Progress, { ProgressProps } from '../progress';
 import { noop } from '../../utils/noop';
 import { InstallationButtonsProps } from '../installationButtons';
+import LinearProgress from '../linearProgress';
+import { useAppSelector } from '../../redux/store';
+import { CLUSTER_CHECKS } from '../../constants/cluster';
 
 import {
   Container,
@@ -17,34 +20,52 @@ interface InstallationStepContainerProps
     InstallationButtonsProps {
   hasInfo?: boolean;
   installationTitle: string;
+  isProvisionStep: boolean;
 }
 
 const InstallationStepContainer: FunctionComponent<InstallationStepContainerProps> = ({
   activeStep,
   steps,
   hasInfo,
   installationTitle,
+  isProvisionStep,
   showBackButton,
   onNextButtonClick,
   onBackButtonClick = noop,
   nextButtonText,
   nextButtonDisabled,
   children,
   ...rest
-}) => (
-  <Container {...rest}>
-    <Progress activeStep={activeStep} steps={steps} />
-    <InstallTitle variant="subtitle2">{installationTitle}</InstallTitle>
-    <Content hasInfo={hasInfo}>{children}</Content>
-    <InstallationButtons
-      activeStep={activeStep}
-      onNextButtonClick={onNextButtonClick}
-      onBackButtonClick={onBackButtonClick}
-      showBackButton={showBackButton}
-      nextButtonText={nextButtonText}
-      nextButtonDisabled={nextButtonDisabled}
-    />
-  </Container>
-);
+}) => {
+  const { completedSteps } = useAppSelector(({ cluster }) => ({
+    ...cluster,
+  }));
+  const progress = useMemo(
+    () => Math.round((completedSteps.length / Object.keys(CLUSTER_CHECKS).length) * 100),
+    [completedSteps.length],
+  );
+
+  return (
+    <Container {...rest}>
+      <Progress activeStep={activeStep} steps={steps} />
+      {isProvisionStep ? (
+        <LinearProgress progress={progress} />
+      ) : (
+        <InstallTitle variant="subtitle2">{installationTitle}</InstallTitle>
+      )}
+      <Content hasInfo={hasInfo} isProvisionStep={isProvisionStep}>
+        {children}
+      </Content>
+      <InstallationButtons
+        activeStep={activeStep}
+        onNextButtonClick={onNextButtonClick}
+        onBackButtonClick={onBackButtonClick}
+        showBackButton={showBackButton}
+        nextButtonText={nextButtonText}
+        nextButtonDisabled={nextButtonDisabled}
+      />
+    </Container>
+  );
+};
 
 export default InstallationStepContainer;

components/installationStepContainer/installationStepContainer.styled.ts

@@ -13,7 +13,8 @@ export const Container = styled(Column)`
 
 export const InstallationButtons = styled(InstallationButtonsComp)``;
 
-export const Content = styled(Column)<{ hasInfo?: boolean }>`
+export const Content = styled(Column)<{ hasInfo?: boolean; isProvisionStep: boolean }>`
+  background-color: ${({ isProvisionStep, theme }) => isProvisionStep && theme.colors.white};
   align-items: center;
   gap: 24px;
   height: calc(100% - 285px);

components/linearProgress/index.tsx

@@ -0,0 +1,60 @@
+import React, { FunctionComponent } from 'react';
+import LinearProgressMui, { LinearProgressProps } from '@mui/material/LinearProgress';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+import { LIGHT_GREY, PRIMARY, VOLCANIC_SAND } from '../../constants/colors';
+
+import { Container } from './linearProgress.styled';
+
+const LinearProgressWithLabel = (props: LinearProgressProps & { value: number }) => {
+  return (
+    <Box sx={{ width: '512px' }}>
+      <Box
+        sx={{
+          minWidth: 35,
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Typography variant="subtitle3" color={VOLCANIC_SAND}>
+          Provisioning cluster:
+        </Typography>
+        <Typography variant="subtitle3" color={VOLCANIC_SAND}>{`${Math.round(
+          props.value,
+        )}%`}</Typography>
+      </Box>
+      <Box sx={{ width: '100%', mt: 1 }}>
+        <LinearProgressMui
+          variant="determinate"
+          color="primary"
+          {...props}
+          sx={{
+            'borderRadius': '55px',
+            'background': LIGHT_GREY,
+            'height': '9px',
+            '> span': {
+              background: `linear-gradient(270deg, ${PRIMARY} 0%, #81E2B4 100%)`,
+              borderRadius: '55px',
+            },
+          }}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export interface LinearProgressParams {
+  progress: number;
+}
+
+const LinearProgress: FunctionComponent<LinearProgressParams> = ({ progress }) => {
+  return (
+    <Container>
+      <LinearProgressWithLabel value={progress} />
+    </Container>
+  );
+};
+
+export default LinearProgress;

components/linearProgress/linearProgress.styled.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  background-color: ${({ theme }) => theme.colors.white};
+  display: flex;
+  justify-content: center;
+  padding: 40px 0 24px 0 !important;
+`;

components/progress/progress.styled.tsx

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

components/tab/tab.styled.ts

@@ -4,7 +4,6 @@ import { Box } from '@mui/material';
 export const TabContainer = styled(Box)<{ backgroundColor?: string }>`
   background: ${({ backgroundColor }) => backgroundColor};
   border-radius: 4px;
-  margin-top: 32px;
   height: calc(100% - 122px);
   width: 100%;
 `;

constants/cluster.tsx

@@ -6,3 +6,22 @@ export const CLUSTER_MENU_OPTIONS = [
   { label: VIEW_DETAILS_OPTION },
   { 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',
+};

constants/colors.ts

@@ -47,3 +47,4 @@ export const LINK_WATER = '#CED4DA';
 export const LIBERTY_BLUE = '#0f172a';
 export const EXCLUSIVE_PLUM = '#71717A';
 export const LAUGHING_ORANGE = '#F59E0B';
+export const SEFID_WHITE = '#FEF2F2';

constants/index.ts

@@ -19,3 +19,6 @@ export const ANALYTICS_ID = '0gAYkX5RV3vt7s4pqCOOsDb6WHPLT30M';
 export const EMAIL_REGEX = /.+@.+\..+/;
 
 export const DOMAIN_REGEX = new RegExp(/[a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}/);
+
+export const KUBEFIRST_REPOSITORIES = ['gitops', 'metaphor'];
+export const KUBEFIRST_TEAMS = ['admins', 'developers'];