Make cloud formation flow default (#2874)

dashboard/src/components/CloudFormationForm.tsx

@@ -22,11 +22,13 @@ import Link from "./porter/Link";
 type Props = {
   goBack: () => void;
   proceed: (id: string) => void;
+  switchToCredentialFlow: () => void;
 };
 
 const CloudFormationForm: React.FC<Props> = ({
   goBack,
   proceed,
+  switchToCredentialFlow
 }) => {
   const [grantPermissionsError, setGrantPermissionsError] = useState("");
   const [roleStatus, setRoleStatus] = useState("");
@@ -90,7 +92,10 @@ const CloudFormationForm: React.FC<Props> = ({
           </Text>
           <Spacer height="15px" />
           <Text color="helper">
-            Provide your AWS account ID to log in and grant Porter access to AWS. You will need to select "Create stack" after being redirected to the AWS console below. Make sure that the stack status has changed from "CREATE_IN_PROGRESS" to "CREATE_COMPLETE" before clicking Continue.
+            Provide your AWS account ID to log in and grant Porter access to AWS by clicking 'Grant permissions' below.
+          </Text>
+          <Text color="helper">
+            You will need to select "Create stack" after being redirected to the AWS console.
           </Text>
           <Spacer y={1} />
           <Input
@@ -109,6 +114,9 @@ const CloudFormationForm: React.FC<Props> = ({
             }
             value={AWSAccountID}
             setValue={(e) => {
+              if (e === "open-sesame") {
+                switchToCredentialFlow();
+              }
               setGrantPermissionsError("");
               setAWSAccountID(e.trim());
             }}
@@ -133,6 +141,10 @@ const CloudFormationForm: React.FC<Props> = ({
           >
             <ButtonImg src={aws} /> Grant permissions
           </Button>
+          <Spacer y={1} />
+          <Text color="helper">
+            Make sure that the stack status has changed from "CREATE_IN_PROGRESS" to "CREATE_COMPLETE" before clicking Continue below.
+          </Text>
         </Fieldset>
         <Spacer y={1} />
         <Button
@@ -256,26 +268,4 @@ const BackButton = styled.div`
     margin-right: 6px;
     margin-left: -2px;
   }
-`;
-
-const StyledForm = styled.div`
-  position: relative;
-  padding: 15px 30px 25px;
-  border-radius: 5px;
-  background: #26292e;
-  border: 1px solid #494b4f;
-  font-size: 13px;
-  margin-bottom: 30px;
-`;
-
-const ErrorContainer = styled.div`
-  position: relative;
-  margin-top: 20px;
-  padding: 30px 30px 25px;
-  border-radius: 5px;
-  background: #26292e;
-  border: 1px solid #494b4f;
-  font-size: 13px;
-  margin-bottom: 30px;
-  color: red;
-`
+`;

dashboard/src/components/CredentialsForm.tsx

@@ -22,7 +22,6 @@ import Spacer from "./porter/Spacer";
 type Props = {
   goBack: () => void;
   proceed: (cloud_provider_credentials_id: string) => void;
-  enableAssumeRole?: () => void;
 };
 
 type AWSCredential = {
@@ -37,7 +36,6 @@ type AWSCredential = {
 const CredentialsForm: React.FC<Props> = ({
   goBack,
   proceed,
-  enableAssumeRole,
 }) => {
   const { currentProject } = useContext(Context);
   const [awsCredentials, setAWSCredentials] = useState<AWSCredential[]>(null);
@@ -162,9 +160,6 @@ const CredentialsForm: React.FC<Props> = ({
             type="password"
             value={awsSecretAccessKey}
             setValue={(e: string) => {
-              if (e === "open-sesame") {
-                enableAssumeRole();
-              }
               setAWSSecretAccessKey(e)
             }}
             label="🔒 AWS secret key"
@@ -313,29 +308,6 @@ const BackButton = styled.div`
   }
 `;
 
-const BackArrow = styled.div`
-  width: 30px;
-  height: 30px;
-  margin-left: -5px;
-  margin-right: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-  border-radius: 50%;
-  right: 10px;
-  top: 10px;
-  cursor: pointer;
-  :hover {
-    background-color: #ffffff11;
-  }
-
-  > i {
-    font-size: 20px;
-    color: #aaaabb;
-  }
-`;
-
 const Name = styled.div`
   font-size: 13px;
   font-weight: 500;

dashboard/src/components/ProvisionerFlow.tsx

@@ -30,7 +30,7 @@ const ProvisionerFlow: React.FC<Props> = ({
   const [credentialId, setCredentialId] = useState("");
   const [showCostConfirmModal, setShowCostConfirmModal] = useState(false);
   const [confirmCost, setConfirmCost] = useState("");
-  const [useAssumeRole, setUseAssumeRole] = useState(false);
+  const [useCloudFormationForm, setUseCloudFormationForm] = useState(true);
 
   const isUsageExceeded = useMemo(() => {
     if (!hasBillingEnabled) {
@@ -42,8 +42,8 @@ const ProvisionerFlow: React.FC<Props> = ({
   const markStepCostConsent = async () => {
     try {
       const res = await api.updateOnboardingStep(
-        "<token>", 
-        { step: "cost-consent-complete" }, 
+        "<token>",
+        { step: "cost-consent-complete" },
         {}
       );
     } catch (err) {
@@ -51,8 +51,8 @@ const ProvisionerFlow: React.FC<Props> = ({
     }
     try {
       const res = await api.inviteAdmin(
-        "<token>", 
-        {}, 
+        "<token>",
+        {},
         { project_id: currentProject.id }
       );
     } catch (err) {
@@ -153,20 +153,18 @@ const ProvisionerFlow: React.FC<Props> = ({
         )}
       </>
     );
-  } else if (currentStep === "credentials" && useAssumeRole) {
-    return (
+  } else if (currentStep === "credentials") {
+    return useCloudFormationForm ? (
       <CloudFormationForm
         goBack={() => setCurrentStep("cloud")}
         proceed={(id) => {
           setCredentialId(id);
           setCurrentStep("cluster");
         }}
+        switchToCredentialFlow={() => setUseCloudFormationForm(false)}
       />
-    );
-  } else if (currentStep === "credentials" && !useAssumeRole) {
-    return (
+    ) : (
       <CredentialsForm
-        enableAssumeRole={() => setUseAssumeRole(true)}
         goBack={() => setCurrentStep("cloud")}
         proceed={(id) => {
           setCredentialId(id);
@@ -179,7 +177,7 @@ const ProvisionerFlow: React.FC<Props> = ({
       <ProvisionerForm
         goBack={() => setCurrentStep("credentials")}
         credentialId={credentialId}
-        useAssumeRole={useAssumeRole}
+        useAssumeRole={useCloudFormationForm}
       />
     );
   }