changed buttons

dashboard/src/components/CloudFormationForm.tsx

@@ -45,31 +45,30 @@ const CloudFormationForm: React.FC<Props> = ({
     return externalId
   }
 
-  const checkIfRoleExists = () => {
+  const checkIfRoleExists = async () => {
     let externalId = getExternalId();
     let targetARN = `arn:aws:iam::${AWSAccountID}:role/porter-role`
     setRoleStatus("loading");
     setErrorMessage(undefined)
-    api
-      .createAWSIntegration(
-        "<token>",
-        {
-          aws_target_arn: targetARN,
-          aws_external_id: externalId,
-        },
-        {
-          id: currentProject.id,
-        }
-      )
-      .then(({ data }) => {
-        setRoleStatus("successful")
-        proceed(targetARN);
-      })
-      .catch((err) => {
-        console.log(err);
-        setRoleStatus("");
-        setErrorMessage("Porter could not access your AWS account. Please make sure you have granted permissions and try again.")
-      });
+    try {
+      await api
+        .createAWSIntegration(
+          "<token>",
+          {
+            aws_target_arn: targetARN,
+            aws_external_id: externalId,
+          },
+          {
+            id: currentProject.id,
+          }
+        );
+      setRoleStatus("successful")
+      proceed(targetARN);
+    } catch (err) {
+      console.log(err);
+      setRoleStatus("");
+      setErrorMessage("Porter could not access your AWS account. Please make sure you have granted permissions and try again.")
+    }
   };
 
   const directToCloudFormation = () => {
@@ -132,15 +131,14 @@ const CloudFormationForm: React.FC<Props> = ({
           </Button>
         </Fieldset>
         <Spacer y={1} />
-        <SaveButton
+        <Button
           onClick={() => {
             checkIfRoleExists()
           }}
           status={roleStatus}
-          statusPosition="right"
-          clearPosition
-          text="Continue"
-        />
+        >
+          Continue
+        </Button>
       </>
     );
   }

dashboard/src/components/ProvisionerSettings.tsx

@@ -14,6 +14,7 @@ import InputRow from "./form-components/InputRow";
 import SaveButton from "./SaveButton";
 import { Contract, EnumKubernetesKind, EnumCloudProvider, NodeGroupType, EKSNodeGroup, EKS, Cluster } from "@porter-dev/api-contracts";
 import { ClusterType } from "shared/types";
+import Button from "./porter/Button";
 
 const regionOptions = [
   { value: "us-east-1", label: "US East (N. Virginia) us-east-1" },
@@ -81,8 +82,8 @@ const ProvisionerSettings: React.FC<Props> = props => {
   const markProvisioningStarted = async () => {
     try {
       const res = await api.updateOnboardingStep(
-        "<token>", 
-        { step: "provisioning-started" }, 
+        "<token>",
+        { step: "provisioning-started" },
         {}
       );
     } catch (err) {
@@ -92,7 +93,7 @@ const ProvisionerSettings: React.FC<Props> = props => {
 
   const createCluster = async () => {
     markProvisioningStarted();
-    
+
     var data = new Contract({
       cluster: new Cluster({
         projectId: currentProject.id,
@@ -342,14 +343,11 @@ const ProvisionerSettings: React.FC<Props> = props => {
       <StyledForm>
         {renderForm()}
       </StyledForm>
-      <SaveButton
+      <Button
         disabled={(!clusterName && true) || isReadOnly}
         onClick={createCluster}
-        clearPosition
-        text="Provision"
-        statusPosition="right"
         status={isReadOnly && "Provisioning is still in progress"}
-      />
+      >Provision</Button>
       {errorMessage && <ErrorContainer>{errorMessage} Please correct the issue and try to provision again.</ErrorContainer>}
     </>
   );