feat: gitlab support

components/cloudProviderCard/cloudProviderCard.styled.ts

@@ -8,6 +8,7 @@ export const CardContainer = styled(Card)`
   max-width: 540px;
   min-width: 365px;
   padding: 24px;
+  height: 84px;
 `;
 
 export const DetailsContainer = styled.div`

components/gitProviderButton/gitProviderButton.styled.ts

@@ -5,7 +5,7 @@ export const Button = styled.button<{ active?: boolean }>`
   justify-content: center;
   align-items: center;
   width: 260px;
-  height: 88px;
+  height: 84px;
   border: 2px solid #e2e8f0;
   border-radius: 8px;
   background-color: white;

components/menu/index.tsx

@@ -56,18 +56,18 @@ const Menu: FunctionComponent<MenuProps> = ({ label, options, onClickMenu }) =>
         sx={{ '& .MuiMenu-paper': { backgroundColor: 'white' } }}
         anchorOrigin={{
           vertical: 'bottom',
-          horizontal: 'left',
+          horizontal: 'right',
         }}
         transformOrigin={{
           vertical: 'top',
-          horizontal: 'left',
+          horizontal: 'right',
         }}
       >
         {options &&
           options.map(({ label, icon, color }) => {
             return (
               <MenuItem key={label} onClick={() => handleClickMenu(label)}>
-                <ListItemIcon>{icon}</ListItemIcon>
+                {icon && <ListItemIcon>{icon}</ListItemIcon>}
                 <ListItemText>
                   <Typography variant="body2" color={color || VOLCANIC_SAND}>
                     {label}

components/progress/progress.styled.tsx

@@ -17,6 +17,9 @@ export const Label = muiStyled(StepLabel)(() => ({
   [`& .${stepLabelClasses.disabled}`]: {
     color: theme.colors.saltboxBlue,
   },
+  [`& .${stepLabelClasses.alternativeLabel}`]: {
+    marginTop: '4px !important',
+  },
 }));
 
 export const ColorlibConnector = muiStyled(StepConnector)(({ theme: muiTheme }) => ({
@@ -86,6 +89,6 @@ export const Container = styled.div`
   background-color: ${({ theme }) => theme.colors.childOfLight};
   display: flex;
   justify-content: center;
-  padding: 25px 0;
+  padding: 21px 0;
   width: 100%;
 `;

components/table/index.tsx

@@ -12,6 +12,7 @@ import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 
 import Typography from '../typography';
 import Menu from '../menu';
+import { CHILD_OF_LIGHT, SALTBOX_BLUE } from '../../constants/colors';
 
 export interface Row {
   [key: string]: unknown | ReactNode;
@@ -42,13 +43,13 @@ const Table: FunctionComponent<TableProps> = ({
         <TableHead>
           <TableRow>
             {cols.map((col) => (
-              <TableCell key={col} sx={{ backgroundColor: '#F1F5F9' }}>
-                <Typography variant="labelMedium" color="#64748B">
+              <TableCell key={col} sx={{ backgroundColor: CHILD_OF_LIGHT }}>
+                <Typography variant="labelMedium" color={SALTBOX_BLUE}>
                   {col?.toUpperCase()}
                 </Typography>
               </TableCell>
             ))}
-            {hasActionMenu && <TableCell sx={{ backgroundColor: '#F1F5F9' }}></TableCell>}
+            {hasActionMenu && <TableCell sx={{ backgroundColor: CHILD_OF_LIGHT }}></TableCell>}
           </TableRow>
         </TableHead>
         <TableBody>

constants/cluster.ts

@@ -1,8 +1 @@
-export const CLUSTER_MANAGEMENT_COLUMNS = [
-  'Cluster Name',
-  'Status',
-  'Created by',
-  'Git Provider',
-  'Cloud',
-  'Creation Date',
-];
+export const CLUSTER_MANAGEMENT_COLUMNS = ['Cluster Name', 'Status', 'Created On', 'Created by'];

containers/clusterForms/aws/index.tsx

@@ -5,12 +5,12 @@ 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 AwsReadinessForm from './readinessForm';
 import AwsSetupForm from './setupForm';
 
 const AWS_FORM_FLOW = {
-  [FormStep.AUTHENTICATION]: AwsReadinessForm,
+  [FormStep.AUTHENTICATION]: AuthForm,
   [FormStep.SETUP]: AwsSetupForm,
   [FormStep.PROVISIONING]: TerminalLogs,
   [FormStep.READY]: ClusterRunningMessage,

containers/clusterForms/civo/index.tsx

@@ -5,12 +5,12 @@ 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 AwsReadinessForm from './readinessForm';
 import AwsSetupForm from './setupForm';
 
 const CIVO_FORM_FLOW = {
-  [FormStep.AUTHENTICATION]: AwsReadinessForm,
+  [FormStep.AUTHENTICATION]: AuthForm,
   [FormStep.SETUP]: AwsSetupForm,
   [FormStep.PROVISIONING]: TerminalLogs,
   [FormStep.READY]: ClusterRunningMessage,

containers/clusterForms/digitalocean/index.tsx

@@ -5,12 +5,12 @@ 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 DigitalOceanReadinessForm from './readinessForm';
 import DigitalOceanSetupForm from './setupForm';
 
 const DIGITAL_OCEAN_FORM_FLOW = {
-  [FormStep.AUTHENTICATION]: DigitalOceanReadinessForm,
+  [FormStep.AUTHENTICATION]: AuthForm,
   [FormStep.SETUP]: DigitalOceanSetupForm,
   [FormStep.PROVISIONING]: TerminalLogs,
   [FormStep.READY]: ClusterRunningMessage,