removed mui (#3555)

Co-authored-by: Justin Rhee <jusrhee@Justins-MacBook-Air-2.local>
Co-authored-by: Soham Dessai <sd5we@virginia.edu>
Co-authored-by: sdess09 <37374498+sdess09@users.noreply.github.com>

dashboard/src/components/CloudFormationForm.tsx

@@ -15,10 +15,11 @@ import Button from "./porter/Button";
 import Link from "./porter/Link";
 import Container from "./porter/Container";
 import Step from "./porter/Step";
-import { Box, Step as MuiStep, StepContent, StepLabel, Stepper, ThemeProvider, Typography, createTheme } from "@material-ui/core";
 import { useQuery } from "@tanstack/react-query";
 import Modal from "./porter/Modal";
 import theme from "shared/themes/midnight";
+import VerticalSteps from "./porter/VerticalSteps";
+import PreflightChecks from "./PreflightChecks";
 
 type Props = {
   goBack: () => void;
@@ -26,36 +27,6 @@ type Props = {
   switchToCredentialFlow: () => void;
 };
 
-const stepperTheme = createTheme({
-  palette: {
-    background: {
-      paper: 'none',
-    },
-    text: {
-      primary: '#DFDFE1',
-      secondary: '#aaaabb',
-    },
-    action: {
-      active: '#001E3C',
-    },
-  },
-  typography: {
-    fontFamily: "Work Sans, sans-serif",
-  },
-  overrides: {
-    MuiStepIcon: {
-      root: {
-        '&$completed': {
-          color: theme.button,
-        },
-        '&$active': {
-          color: theme.button,
-        },
-      },
-    },
-  },
-});
-
 const CloudFormationForm: React.FC<Props> = ({
   goBack,
   proceed,
@@ -65,6 +36,7 @@ const CloudFormationForm: React.FC<Props> = ({
   const [currentStep, setCurrentStep] = useState<number>(0);
   const [hasClickedCloudformationButton, setHasClickedCloudformationButton] = useState(false);
   const [showNeedHelpModal, setShowNeedHelpModal] = useState(false);
+  const [preflightData, setPreflightData] = useState<any>(undefined);
 
   const { currentProject, user } = useContext(Context);
   const markStepStarted = async (
@@ -116,10 +88,17 @@ const CloudFormationForm: React.FC<Props> = ({
             id: currentProject.id,
           }
         );
+      setPreflightData({
+        "Msg": {
+          "preflight_checks": {
+            cloudFormation: {},
+          }
+        }
+      })
       return true;
     },
     {
-      enabled: currentStep === 2,
+      enabled: currentStep === 3,
       retry: (failureCount, err) => {
         // if they've waited over 35 seconds notify us on slack. Cloudformation stack should only take around 20-25 seconds to create
         if (failureCount === 7 && hasClickedCloudformationButton) {
@@ -203,6 +182,7 @@ const CloudFormationForm: React.FC<Props> = ({
   }
 
   const directToCloudFormation = () => {
+    setCurrentStep(3)
     const externalId = getExternalId();
     let trustArn = process.env.TRUST_ARN ? process.env.TRUST_ARN : "arn:aws:iam::108458755588:role/CAPIManagement";
     const cloudformation_url = `https://console.aws.amazon.com/cloudformation/home?#/stacks/create/review?templateURL=https://porter-role.s3.us-east-2.amazonaws.com/cloudformation-policy.json&stackName=PorterRole&param_ExternalIdParameter=${externalId}&param_TrustArnParameter=${trustArn}`
@@ -216,150 +196,168 @@ const CloudFormationForm: React.FC<Props> = ({
       <>
         <Text>Grant Porter permissions to create infrastructure in your AWS account by following 3 simple steps.</Text>
         <Spacer y={1} />
-        <ThemeProvider theme={stepperTheme} >
-          <Stepper activeStep={currentStep} orientation="vertical" style={{ padding: 0 }}>
-            <MuiStep>
-              <StepLabel>Log in to your AWS Account.</StepLabel>
-              <StepContent>
-                <Text color="helper">Return to Porter after successful login.</Text>
-                <Spacer y={0.5} />
-                <AWSButtonContainer>
-                  <ButtonImg src={aws} />
-                  <Button
-                    width={"170px"}
-                    onClick={directToAWSLogin}
-                    color="linear-gradient(180deg, #26292e, #24272c)"
-                    withBorder
-                  >
-                    Log in
-                  </Button>
-                </AWSButtonContainer>
-                <Spacer y={0.5} />
-                <StepChangeButtonsContainer>
-                  <Button onClick={() => setCurrentStep(1)}>Continue</Button>
-                </StepChangeButtonsContainer>
-              </StepContent>
-            </MuiStep>
-            <MuiStep>
-              <StepLabel>Enter your AWS Account ID.</StepLabel>
-              <StepContent>
-                <Text color="helper">Make sure this is the ID of the account you are currently logged into and would like to provision resources in.</Text>
-                <Spacer y={0.5} />
-                <Input
-                  label={
-                    <Flex>
-                      👤 AWS account ID
-                      <i
-                        className="material-icons"
-                        onClick={() => {
-                          window.open("https://us-east-1.console.aws.amazon.com/billing/home?region=us-east-1#/account", "_blank")
-                        }}
-                      >
-                        help_outline
-                      </i>
-                    </Flex>
-                  }
-                  value={AWSAccountID}
-                  setValue={handleAWSAccountIDChange}
-                  placeholder="ex: 915037676314"
-                  error={awsAccountIdInputError}
-                />
-                <Spacer y={0.5} />
-                <StepChangeButtonsContainer>
-                  <Button onClick={handleContinueWithAWSAccountId} disabled={awsAccountIdInputError != null || AWSAccountID.length === 0}>Continue</Button>
-                  <Spacer inline x={0.5} />
-                  <Button onClick={() => setCurrentStep(0)} color="#121212">Back</Button>
-                </StepChangeButtonsContainer>
-              </StepContent>
-            </MuiStep>
-            <MuiStep>
-              <StepLabel optional={<Typography variant="caption" color="textSecondary">This grants Porter permissions to create infrastructure in your account.</Typography>}>Create an AWS Cloudformation Stack.</StepLabel>
-              <StepContent>
-                <Text color="helper">Clicking the button below will take you to the AWS CloudFormation console. Return to Porter after clicking 'Create stack' in the bottom right corner.</Text>
-                <Spacer y={0.5} />
-                <AWSButtonContainer>
-                  <ButtonImg src={aws} />
-                  <Button
-                    width={"170px"}
-                    onClick={directToCloudFormation}
-                    color="linear-gradient(180deg, #26292e, #24272c)"
-                    withBorder
-                    disabled={canProceed}
-                    disabledTooltipMessage={"Porter can already access your account!"}
-                  >
-                    Grant permissions
-                  </Button>
-                </AWSButtonContainer>
-                <Spacer y={0.5} />
-                <Text color="helper">
-                  Once the CloudFormation stack has status{" "}
-                  <Box component="span" color="#1d8102">
-                    CREATE_COMPLETE
-                  </Box>, you may proceed.
-                </Text>
-                <Spacer y={0.25} />
-                <Text color="helper">This may take 1 - 2 minutes.</Text>
-                <Spacer y={0.5} />
-                <StepChangeButtonsContainer>
-                  <Button onClick={handleProceedToProvisionStep} disabled={!canProceed}>Continue</Button>
-                  <Spacer inline x={0.5} />
-                  <Button
-                    onClick={() => setCurrentStep(1)}
-                    color="#121212"
-                    status={canProceed ? "success" : hasClickedCloudformationButton ? "loading" : undefined}
-                    loadingText={`Checking if Porter can access AWS account ID ${AWSAccountID}...`}
-                    successText={`Porter can access AWS account ID ${AWSAccountID}`}
-                  >
-                    Back
-                  </Button>
-                </StepChangeButtonsContainer>
-                <Spacer y={0.5} />
-                <Link hasunderline onClick={() => setShowNeedHelpModal(true)}>
+        <VerticalSteps
+          onlyShowCurrentStep={true}
+          currentStep={currentStep}
+          steps={[
+            <>
+              <Text size={16}>Log in to your AWS account</Text>
+              <Spacer y={.5} />
+              <Text color="helper">
+                Return to Porter after successful login.
+              </Text>
+              <Spacer y={.5} />
+              <AWSButtonContainer>
+                <ButtonImg src={aws} />
+                <Button
+                  width={"170px"}
+                  onClick={directToAWSLogin}
+                  color="linear-gradient(180deg, #26292e, #24272c)"
+                  withBorder
+                >
+                  Log in
+                </Button>
+              </AWSButtonContainer>
+              <Spacer y={1} />
+              <Button onClick={() => setCurrentStep(1)}>
+                Continue
+              </Button>
+            </>,
+            <>
+              <Text size={16}>Enter your AWS account ID</Text>
+              <Spacer y={.5} />
+              <Text color="helper">
+                Make sure this is the ID of the account you are currently logged into and would like to provision resources in.
+              </Text>
+              <Spacer y={.5} />
+              <Input
+                label={
+                  <Flex>
+                    👤 AWS account ID
+                    <i
+                      className="material-icons"
+                      onClick={() => {
+                        window.open("https://us-east-1.console.aws.amazon.com/billing/home?region=us-east-1#/account", "_blank")
+                      }}
+                    >
+                      help_outline
+                    </i>
+                  </Flex>
+                }
+                value={AWSAccountID}
+                setValue={handleAWSAccountIDChange}
+                placeholder="ex: 915037676314"
+                error={awsAccountIdInputError}
+              />
+              <Spacer y={1} />
+              <StepChangeButtonsContainer>
+                <Button onClick={handleContinueWithAWSAccountId} disabled={awsAccountIdInputError != null || AWSAccountID.length === 0}>Continue</Button>
+                <Spacer inline x={0.5} />
+                <Button onClick={() => setCurrentStep(0)} color="#222222">Back</Button>
+              </StepChangeButtonsContainer>
+            </>,
+            <>
+              <Text size={16}>Create an AWS CloudFormation stack</Text>
+              <Spacer y={.5} />
+              <Text color="helper">
+                This grants Porter permissions to create infrastructure in your account.
+              </Text>
+              <Spacer y={.5} />
+              <Text color="helper">
+                Clicking the button below will take you to the AWS CloudFormation console. Return to Porter after clicking 'Create stack' in the bottom right corner.
+              </Text>
+              <Spacer y={.5} />
+              <AWSButtonContainer>
+                <ButtonImg src={aws} />
+                <Button
+                  width={"170px"}
+                  onClick={directToCloudFormation}
+                  color="linear-gradient(180deg, #26292e, #24272c)"
+                  withBorder
+                  disabled={canProceed || preflightData}
+                  disabledTooltipMessage={"Porter can already access your account!"}
+                >
+                  Grant permissions
+                </Button>
+              </AWSButtonContainer>
+              <Spacer y={1} />
+              <StepChangeButtonsContainer>
+                <Button onClick={() => setCurrentStep(3)}>Continue</Button>
+                <Spacer inline x={0.5} />
+                <Button
+                  onClick={() => setCurrentStep(1)}
+                  color="#222222"
+                  // status={canProceed ? "success" : hasClickedCloudformationButton ? "loading" : undefined}
+                  loadingText={`Checking if Porter can access AWS account ID ${AWSAccountID}...`}
+                  successText={`Porter can access AWS account ID ${AWSAccountID}`}
+                >
+                  Back
+                </Button>
+              </StepChangeButtonsContainer>
+            </>,
+            <>
+              <Text size={16}>Check permissions</Text>
+              <Spacer y={.5} />
+              <Text color="helper">
+                Checking if Porter can access AWS account with ID {AWSAccountID}. This can take up to a minute.<Spacer inline width="10px" /><Link hasunderline onClick={() => setShowNeedHelpModal(true)}>
                   Need help?
                 </Link>
-              </StepContent>
-            </MuiStep>
-            {showNeedHelpModal &&
-              <Modal closeModal={() => setShowNeedHelpModal(false)} width={"800px"}>
-                <Text size={16}>Granting Porter access to AWS</Text>
-                <Spacer y={1} />
-                <Text color="helper">
-                  Porter needs access to your AWS account in order to create infrastructure. You can grant Porter access to AWS by following these steps:
-                </Text>
-                <Spacer y={1} />
-                <Step number={1}>
-                  <Link to="https://aws.amazon.com/resources/create-account/" target="_blank">
-                    Create an AWS account
-                  </Link>
-                  <Spacer inline width="5px" />
-                  if you don't already have one.
-                </Step>
-                <Spacer y={1} />
-                <Step number={2}>
-                  Once you are logged in to your AWS account,
-                  <Spacer inline width="5px" />
-                  <Link to="https://console.aws.amazon.com/billing/home?region=us-east-1#/account" target="_blank">
-                    copy your account ID
-                  </Link>.
-                </Step>
-                <Spacer y={1} />
-                <Step number={3}>Fill in your account ID on Porter and select "Grant permissions".</Step>
-                <Spacer y={1} />
-                <Step number={4}>After being redirected to AWS CloudFormation, select "Create stack" on the bottom right.</Step>
-                <Spacer y={1} />
-                <Step number={5}>The stack will start to create. Refresh until the stack status has changed from "CREATE_IN_PROGRESS" to "CREATE_COMPLETE":</Step>
-                <Spacer y={1} />
-                <ImageDiv>
-                  <img src={cloudformationStatus} height="250px" />
-                </ImageDiv>
-                <Spacer y={1} />
-                <Step number={6}>Return to Porter and select "Continue".</Step>
-                <Spacer y={1} />
-                <Step number={7}>If you continue to see issues, <a href="mailto:support@porter.run">email support.</a></Step>
-              </Modal>
-            }
-          </Stepper>
-        </ThemeProvider>
+              </Text>
+              <Spacer y={1} />
+              <PreflightChecks preflightData={preflightData} provider={"DEFAULT"} />
+              <Spacer y={1} />
+              <Container row>
+                <Button
+                  onClick={handleProceedToProvisionStep}
+                  disabled={!canProceed}
+                >
+                  Continue
+                </Button>
+                <Spacer inline x={0.5} />
+                <Button onClick={() => setCurrentStep(2)} color="#222222">Back</Button>
+              </Container>
+            </>,
+          ]}
+        />
+        {showNeedHelpModal &&
+          <Modal closeModal={() => setShowNeedHelpModal(false)} width={"800px"}>
+            <Text size={16}>Granting Porter access to AWS</Text>
+            <Spacer y={1} />
+            <Text color="helper">
+              Porter needs access to your AWS account in order to create infrastructure. You can grant Porter access to AWS by following these steps:
+            </Text>
+            <Spacer y={1} />
+            <Step number={1}>
+              <Link to="https://aws.amazon.com/resources/create-account/" target="_blank">
+                Create an AWS account
+              </Link>
+              <Spacer inline width="5px" />
+              if you don't already have one.
+            </Step>
+            <Spacer y={1} />
+            <Step number={2}>
+              Once you are logged in to your AWS account,
+              <Spacer inline width="5px" />
+              <Link to="https://console.aws.amazon.com/billing/home?region=us-east-1#/account" target="_blank">
+                copy your account ID
+              </Link>.
+            </Step>
+            <Spacer y={1} />
+            <Step number={3}>Fill in your account ID on Porter and select "Grant permissions".</Step>
+            <Spacer y={1} />
+            <Step number={4}>After being redirected to AWS CloudFormation, select "Create stack" on the bottom right.</Step>
+            <Spacer y={1} />
+            <Step number={5}>The stack will start to create. Refresh until the stack status has changed from "CREATE_IN_PROGRESS" to "CREATE_COMPLETE":</Step>
+            <Spacer y={1} />
+            <ImageDiv>
+              <img src={cloudformationStatus} height="250px" />
+            </ImageDiv>
+            <Spacer y={1} />
+            <Step number={6}>Return to Porter and select "Continue".</Step>
+            <Spacer y={1} />
+            <Step number={7}>If you continue to see issues, <a href="mailto:support@porter.run">email support.</a></Step>
+          </Modal>
+        }
       </>
     );
   }

dashboard/src/components/PreflightChecks.tsx

@@ -91,33 +91,45 @@ const PreflightChecks: React.FC<Props> = (props) => {
     );
   };
   return (
-    <AppearingDiv>
-      <Text size={16}>Cluster provision check</Text>
-      <Spacer y={.5} />
-      <Text color="helper">
-        Porter checks that the account has the right permissions and resources to provision a cluster.
-      </Text>
-      <Spacer y={1} />
-      {
-        props.error ?
-          props.provider === 'AWS' ?
-            <Error message="Selected region is not available for your account. Please select another region" /> :
-            <>
-              <Error message="There is an error with your account. Please ensure billing is enabled or contact Porter Support: support@porter.run" />
-              <Spacer y={.5} />
-              <Link to="https://support.google.com/googleapi/answer/6158867?hl=en" target="_blank">
-                Check to see if billing is enabled on your account
-              </Link>
-              <Spacer y={.5} />
-            </>
-          :
-          Object.keys(currentMessageConst).map((checkKey) => (
-            <PreflightCheckItem key={checkKey} checkKey={checkKey} />
-          ))
 
-      }
-    </AppearingDiv >
-  );
+    props.provider === 'DEFAULT' ?
+      <AppearingDiv>
+        {Object.keys(currentMessageConst).map((checkKey) => (
+          <PreflightCheckItem key={checkKey} checkKey={checkKey} />
+        ))}
+      </AppearingDiv >
+      :
+
+      (
+
+        <AppearingDiv>
+          <Text size={16}>Cluster provision check</Text>
+          <Spacer y={.5} />
+          <Text color="helper">
+            Porter checks that the account has the right permissions and resources to provision a cluster.
+          </Text>
+          <Spacer y={1} />
+          {
+            props.error ?
+              props.provider === 'AWS' ?
+                <Error message="Selected region is not available for your account. Please select another region" /> :
+                <>
+                  <Error message="There is an error with your account. Please ensure billing is enabled or contact Porter Support: support@porter.run" />
+                  <Spacer y={.5} />
+                  <Link to="https://support.google.com/googleapi/answer/6158867?hl=en" target="_blank">
+                    Check to see if billing is enabled on your account
+                  </Link>
+                  <Spacer y={.5} />
+                </>
+              :
+              Object.keys(currentMessageConst).map((checkKey) => (
+                <PreflightCheckItem key={checkKey} checkKey={checkKey} />
+              ))
+
+          }
+        </AppearingDiv >
+      )
+  )
 };
 
 
@@ -131,7 +143,7 @@ const AppearingDiv = styled.div<{ color?: string }>`
   display: flex;
   flex-direction: column; 
   color: ${(props) => props.color || "#ffffff44"};
-  margin-left: 10px;
+ 
   @keyframes floatIn {
     from {
       opacity: 0;

dashboard/src/components/ProvisionerSettings.tsx

@@ -1013,6 +1013,7 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
                   <Text color="helper">
                     Preflight checks for the account didn't pass. Please fix the issues and retry.
                   </Text>
+                  <Spacer y={.5} />
                   < Button
                     // disabled={isDisabled()}
                     disabled={isLoading}

dashboard/src/components/porter/VerticalSteps.tsx

@@ -1,39 +1,54 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
+import AnimateHeight from "react-animate-height";
+import Button from "./Button";
+import Spacer from "./Spacer";
+import Container from "./Container";
+
+import check from "assets/check.png";
 
 type Props = {
   steps: React.ReactNode[];
   currentStep: number;
+  onlyShowCurrentStep?: boolean;
 };
 
 const VerticalSteps: React.FC<Props> = ({
   steps,
   currentStep,
+  onlyShowCurrentStep,
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
     <StyledVerticalSteps>
+      <Line />
       {steps.map((step, i) => {
         return (
-          <StepWrapper isLast={i === steps.length - 1} key={i}>
-            {
-              (i !== steps.length - 1) && (
-                <Line isActive={i + 1 <= currentStep} />
-              )
-            }
-            <Dot isActive={i <= currentStep}>
-              <Number>{i+1}</Number>
-            </Dot>
-            <OpacityWrapper isActive={i <= currentStep}>
-              {step}
-              {
-                i > currentStep && (
+          <Relative>
+            {i === steps.length - 1 && (
+              <LineCover />
+            )}
+            {onlyShowCurrentStep && i < currentStep ? (
+              <Check src={check} />
+            ) : (
+              <Dot isActive={i <= currentStep}>
+                <Number>{i+1}</Number>
+              </Dot>
+            )}
+            <StepWrapper
+              height={onlyShowCurrentStep ? (i === currentStep ? "auto" : 30) : "auto"}
+              isLast={i === steps.length - 1}
+              key={i}
+            >
+              <OpacityWrapper isActive={i <= currentStep}>
+                {step}
+                {i > currentStep && (
                   <ReadOnlyOverlay />
-                )
-              }
-            </OpacityWrapper>
-          </StepWrapper>
+                )}
+              </OpacityWrapper>
+            </StepWrapper>
+          </Relative>
         );
       })}
     </StyledVerticalSteps>
@@ -42,6 +57,33 @@ const VerticalSteps: React.FC<Props> = ({
 
 export default VerticalSteps;
 
+const LineCover = styled.div`
+  width: 10px;
+  height: 100%;
+  position: absolute;
+  left: -4px;
+  top: 0;
+  background: #121212;
+`;
+
+const Relative = styled.div`
+  position: relative;
+`;
+
+const Check = styled.img`
+  height: 26px;
+  border-radius: 50%;
+  position: absolute;
+  left: -8px;
+  top: -2px;
+  opacity: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #121212;
+  padding: 8px;
+`;
+
 const Number = styled.div`
   font-size: 12px;
   color: #fff;
@@ -57,14 +99,13 @@ const ReadOnlyOverlay = styled.div`
 `;
 
 const Line = styled.div<{
-  isActive: boolean;
+  isActive?: boolean;
 }>`
   width: 1px;
-  height: calc(100% + 35px);
+  height: calc(100% - 10px);
   background: #414141;
   position: absolute;
   left: 4px;
-  top: 8px;
   opacity: 1;
 `;
 
@@ -91,7 +132,7 @@ const OpacityWrapper = styled.div<{
   opacity: ${props => props.isActive ? 1 : 0.5};
 `;
 
-const StepWrapper = styled.div<{
+const StepWrapper = styled(AnimateHeight)<{
   isLast: boolean;
 }>`
   padding-left: 30px;
@@ -101,4 +142,5 @@ const StepWrapper = styled.div<{
 
 const StyledVerticalSteps = styled.div<{
 }>`
+  position: relative;
 `;

dashboard/src/shared/util.ts

@@ -13,12 +13,7 @@ export function valueExists<T>(value: T | null | undefined): value is T {
 
 
 export const PREFLIGHT_MESSAGE_CONST = {
-  "apiEnabled": "APIs enabled on service account",
-  "cidrAvailability": "CIDR availability",
-  "eip": "Elastic IP availability",
-  "natGateway": "NAT Gateway availability",
-  "vpc": "VPC availability",
-  "vcpus": "vCPUs availability",
+  "cloudFormation": "CloudFormation stack created",
 }
 
 export const PREFLIGHT_MESSAGE_CONST_AWS = {