feat: queue refactor (#266)

* feat: add commit hooks

* feat: add ci

* feat: queue, algolia upgrade, cluster zero validations

* fix: eslint warning

* fix: yaml

* fix: ci

* fix: yaml

* fix: ci

* fix: ci

* fix: ci

* fix: npm

* fix: npm

* fix: npm

* fix: npm

* fix: custom.d.ts

* fix: next-env.d.ts

* fix: next eslint rollback

* fix: rollback getclusters

.eslintrc.json

@@ -34,5 +34,10 @@
     "prefer-template": "warn",
     "react-hooks/exhaustive-deps": "error",
     "@typescript-eslint/no-explicit-any": "error"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

.github/workflows/ci.yaml

@@ -0,0 +1,20 @@
+name: Console CI
+
+on:
+  push:
+    branches: [main, feat_queue_refactor]
+  pull_request:
+    branches: [main, feat_queue_refactor]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+      - run: npm install --legacy-peer-deps
+      - run: npm run test
+      - run: npm run lint
+      - run: npm run check-types

.gitignore

@@ -35,7 +35,6 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
 
 # custom
 /dist

.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn test
+yarn lint
+yarn check-types

components/clusterTable/clusterTable.stories.tsx

@@ -42,6 +42,6 @@ export const Default: StoryObj<typeof ClusterTable> = {
   },
 };
 
-export const WithSelectableRows: StoryObj<typeof ClusterTable> = {
-  render: () => <ClusterTableWithHooks />,
-};
+// export const WithSelectableRows: StoryObj<typeof ClusterTable> = {
+//   render: () => <ClusterTableWithHooks />,
+// };

components/clusterTable/clusterTable.styled.ts

@@ -74,7 +74,7 @@ export const StyledTag = styled(Tag)`
   width: fit-content;
 `;
 
-export const StyledTableRow = muiStyled(TableRow)<{ selected?: boolean }>(({ selected }) => ({
+export const StyledTableRow = muiStyled(TableRow)<{ selected?: boolean }>(() => ({
   [`&.${tableRowClasses.root}`]: {
     border: 0,
     height: 'fit-content',

components/installationButtons/index.tsx

@@ -1,23 +1,26 @@
 import React, { FunctionComponent } from 'react';
+import { CircularProgress } from '@mui/material';
 
 import Button from '../button';
 
 import { Container } from './installationButtons.styled';
 
 export interface InstallationButtonsProps {
-  showBackButton?: boolean;
+  isLoading?: boolean;
+  nextButtonDisabled?: boolean;
+  nextButtonText?: string;
   onBackButtonClick?: () => void;
+  showBackButton?: boolean;
   showNextButton: boolean;
-  nextButtonText?: string;
-  nextButtonDisabled?: boolean;
 }
 
 const InstallationButtons: FunctionComponent<InstallationButtonsProps> = ({
-  showBackButton,
+  isLoading,
+  nextButtonDisabled,
+  nextButtonText = 'Next',
   onBackButtonClick,
+  showBackButton,
   showNextButton,
-  nextButtonText = 'Next',
-  nextButtonDisabled,
   ...rest
 }) => (
   <Container {...rest}>
@@ -33,8 +36,9 @@ const InstallationButtons: FunctionComponent<InstallationButtonsProps> = ({
         variant="contained"
         color="primary"
         id="next"
-        disabled={nextButtonDisabled}
+        disabled={nextButtonDisabled || isLoading}
       >
+        {isLoading && <CircularProgress size={20} sx={{ mr: '8px' }} />}
         {nextButtonText}
       </Button>
     )}

components/installationStepContainer/index.tsx

@@ -29,6 +29,7 @@ const InstallationStepContainer: FunctionComponent<InstallationStepContainerProp
   steps,
   hasInfo,
   installationTitle,
+  isLoading,
   isProvisionStep,
   showBackButton,
   onBackButtonClick = noop,
@@ -71,6 +72,7 @@ const InstallationStepContainer: FunctionComponent<InstallationStepContainerProp
         nextButtonText={nextButtonText}
         nextButtonDisabled={nextButtonDisabled}
         showNextButton={showNextButton}
+        isLoading={isLoading}
       />
     </Container>
   );

components/tag/index.tsx

@@ -1,5 +1,4 @@
 import React, { FunctionComponent } from 'react';
-import styled from 'styled-components';
 import CloseIcon from '@mui/icons-material/Close';
 
 import Typography from '../typography';

containers/clusterForms/clusterCreation/clusterCreation.styled.ts

@@ -2,7 +2,6 @@ import styled, { css } from 'styled-components';
 
 import Column from '../../../components/column';
 import Button from '../../../components/button';
-import ControlledNumberInput from '../../../components/controlledFields/numberInput';
 
 export const AdvancedOptionsButton = styled.button.attrs({ type: 'button' })<{
   expanded?: boolean;

containers/clusterForms/k3d/index.tsx

@@ -24,7 +24,7 @@ export const LocalFormFlow: FunctionComponent<{ currentStep: LocalFormStep }> =
 
   return (
     <ContentContainer>
-      <ActiveFormStep clusterName="kubefirst" domainName="kubefirst.dev" />
+      <ActiveFormStep />
     </ContentContainer>
   );
 };

containers/clusterForms/shared/clusterRunning/index.tsx

@@ -1,20 +1,17 @@
 import React, { FunctionComponent, useCallback } from 'react';
-import { useRouter } from 'next/router';
 
 import ClusterReady from '../../../../components/clusterReady';
 import { useAppDispatch, useAppSelector } from '../../../../redux/store';
 import { setSelectedCluster } from '../../../../redux/slices/cluster.slice';
 
 const ClusterRunning: FunctionComponent = () => {
-  const { push } = useRouter();
   const dispatch = useAppDispatch();
 
   const { managementCluster } = useAppSelector(({ api }) => api);
 
   const onOpenConsole = useCallback(() => {
     dispatch(setSelectedCluster(managementCluster));
-    push('/services');
-  }, [dispatch, managementCluster, push]);
+  }, [dispatch, managementCluster]);
 
   return (
     <ClusterReady

containers/clusterForms/shared/setupForm/index.tsx

@@ -1,6 +1,14 @@
-import React, { ChangeEvent, FunctionComponent, useMemo, useState } from 'react';
+import React, {
+  ChangeEvent,
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { useFormContext } from 'react-hook-form';
 import { capitalize } from 'lodash';
+import { setInstallationStep } from 'redux/slices/installation.slice';
 
 import { clearDomains } from '../../../../redux/slices/api.slice';
 import ControlledPassword from '../../../../components/controlledFields/Password';
@@ -23,25 +31,31 @@ const SetupForm: FunctionComponent = () => {
   const [isCloudFlareSelected, setIsCloudFlareSelected] = useState<boolean>(false);
   const [selectedRegion, setSelectedRegion] = useState<string>('');
   const dispatch = useAppDispatch();
+  const { control, setValue } = useFormContext<InstallValues>();
 
-  const { cloudDomains, cloudRegions, installType, values } = useAppSelector(
+  const { cloudDomains, cloudRegions, installationStep, installType, values } = useAppSelector(
     ({ api, installation }) => ({
       cloudDomains: api.cloudDomains,
       cloudRegions: api.cloudRegions,
-      values: installation.values,
+      installationStep: installation.installationStep,
       installType: installation.installType,
+      values: installation.values,
     }),
   );
 
-  const { control, setValue } = useFormContext<InstallValues>();
-
   const cloudRegionLabel = useMemo(
     () =>
       CLOUD_REGION_LABELS[installType as InstallationType] ||
       (CLOUD_REGION_LABELS[InstallationType.AWS] as string),
     [installType],
   );
 
+  const checkAuth = useCallback(() => {
+    if (!values?.gitToken) {
+      dispatch(setInstallationStep(installationStep - 1));
+    }
+  }, [dispatch, installationStep, values?.gitToken]);
+
   const handleRegionOnSelect = async (region: string) => {
     setSelectedRegion(region);
     dispatch(getCloudDomains({ region }));
@@ -78,6 +92,10 @@ const SetupForm: FunctionComponent = () => {
     }
   };
 
+  useEffect(() => {
+    checkAuth();
+  }, [checkAuth]);
+
   return (
     <>
       <ControlledTextField

containers/clusterManagement/index.tsx

@@ -5,7 +5,7 @@ import Button from '../../components/button';
 import Typography from '../../components/typography';
 import { useAppDispatch, useAppSelector } from '../../redux/store';
 import { deleteCluster, getCloudRegions, getClusters } from '../../redux/thunks/api.thunk';
-import { Cluster, ClusterCreationStep, ClusterStatus } from '../../types/provision';
+import { Cluster, ClusterCreationStep, ClusterStatus, ClusterType } from '../../types/provision';
 import useToggle from '../../hooks/useToggle';
 import Drawer from '../../components/drawer';
 import useModal from '../../hooks/useModal';
@@ -80,6 +80,7 @@ const ClusterManagement: FunctionComponent = () => {
         id: presentedCluster?.id,
         clusterName: managementCluster?.clusterName as string,
         status: ClusterStatus.DELETING,
+        clusterType: ClusterType.WORKLOAD,
         callback: handleGetClusters,
       });
 
@@ -121,6 +122,7 @@ const ClusterManagement: FunctionComponent = () => {
       addClusterToQueue({
         id: clusterId,
         clusterName: managementCluster?.clusterName as string,
+        clusterType: ClusterType.WORKLOAD,
         status: ClusterStatus.PROVISIONING,
         callback: handleGetClusters,
       });

containers/deleteCluster/index.tsx

@@ -40,8 +40,9 @@ const DeleteCluster: FunctionComponent<DeleteClusterProps> = ({
             <>
               <Typography>Deleting a management cluster is carried out via the CLI.</Typography>
               <Typography style={{ marginBottom: '13px' }}>
-                <strong>Note:</strong> deleting a management cluster will also delete all it's
-                corresponding worker clusters
+                <strong>Note:</strong>{' '}
+                {`deleting a management cluster will also delete all it's
+                corresponding worker clusters`}
               </Typography>
               <NextLink href="https://docs.kubefirst.io/common/deprovision" target="_blank">
                 <>

containers/header/index.tsx

@@ -1,7 +1,6 @@
 import React, { FunctionComponent, useEffect } from 'react';
 
 import { setSelectedCluster } from '../../redux/slices/cluster.slice';
-import { getClusters } from '../../redux/thunks/api.thunk';
 import { useAppDispatch, useAppSelector } from '../../redux/store';
 
 import { Container } from './header.styled';
@@ -10,10 +9,6 @@ const Header: FunctionComponent = () => {
   const dispatch = useAppDispatch();
   const { managementCluster } = useAppSelector(({ api }) => api);
 
-  useEffect(() => {
-    dispatch(getClusters());
-  }, [dispatch]);
-
   useEffect(() => {
     if (managementCluster && managementCluster.id) {
       dispatch(setSelectedCluster(managementCluster));

containers/kubefirstContent/hits.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { useHits } from 'react-instantsearch-hooks-web';
+import { useHits } from 'react-instantsearch';
 
 import ContentHit from '../../components/contentHit';
 import { Content } from '../../types/algolia/content';

containers/kubefirstContent/index.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { Divider } from '@mui/material';
 import algoliasearch from 'algoliasearch/lite';
-import { InstantSearch } from 'react-instantsearch-hooks-web';
+import { InstantSearch } from 'react-instantsearch';
 
 const KUBEFIRST_CONTENT_INDEX_NAME = 'kubefirst-content';
 

containers/kubefirstContent/refinementList.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { useRefinementList } from 'react-instantsearch-hooks-web';
+import { useRefinementList } from 'react-instantsearch';
 import sortBy from 'lodash/sortBy';
 import { FormControlLabel, FormGroup } from '@mui/material';
 

containers/kubefirstContent/slider.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useEffect, useMemo, useState } from 'react';
 import { Slider as SliderMui, styled } from '@mui/material';
 import moment from 'moment';
-import { RangeInputProps, useRange } from 'react-instantsearch-hooks-web';
+import { RangeInputProps, useRange } from 'react-instantsearch';
 import { RangeBoundaries } from 'instantsearch.js/es/connectors/range/connectRange';
 
 import { PORT_GORE, PRIMARY, SALTBOX_BLUE } from '../../constants/colors';

containers/navigation/index.tsx

@@ -23,19 +23,13 @@ const Navigation: FunctionComponent = () => {
   } = useModal();
 
   const { asPath } = useRouter();
-  const {
-    gitProvider,
-    installationStep,
-    installType,
-    isClusterZero,
-    kubefirstVersion,
-    selectedCluster,
-  } = useAppSelector(({ config, cluster, installation }) => ({
-    kubefirstVersion: config.kubefirstVersion,
-    isClusterZero: config.isClusterZero,
-    selectedCluster: cluster.selectedCluster,
-    ...installation,
-  }));
+  const { gitProvider, installationStep, installType, isClusterZero, kubefirstVersion } =
+    useAppSelector(({ config, cluster, installation }) => ({
+      kubefirstVersion: config.kubefirstVersion,
+      isClusterZero: config.isClusterZero,
+      selectedCluster: cluster.selectedCluster,
+      ...installation,
+    }));
 
   const { isEnabled: isMultiClusterEnabled } = useFeatureFlag('multicluster-management');
 
@@ -52,16 +46,16 @@ const Navigation: FunctionComponent = () => {
           icon: <ScatterPlotIcon />,
           path: '/cluster-management',
           title: 'Cluster Management',
-          isEnabled: isMultiClusterEnabled,
+          isEnabled: isMultiClusterEnabled && !isClusterZero,
         },
         {
           icon: <GridViewOutlinedIcon />,
           path: '/services',
           title: 'Services',
-          isEnabled: !isClusterZero || !!selectedCluster?.clusterName,
+          isEnabled: !isClusterZero,
         },
       ].filter(({ isEnabled }) => isEnabled),
-    [isMultiClusterEnabled, isClusterZero, selectedCluster?.clusterName],
+    [isMultiClusterEnabled, isClusterZero],
   );
 
   const handleIsActiveItem = useCallback(