Merge branch 'nico/new-onboarding-flow' of https://github.com/porter-dev/porter into nico/new-onboarding-flow

dashboard/src/main/home/onboarding/steps/ConnectRegistry/forms/_AWSRegistryForm.tsx

@@ -185,29 +185,30 @@ export const CredentialsForm: React.FC<{
           label="📍 AWS Region"
         />
         <Br />
-        {lastConnectedAccount && (
-          <CancelButton
-            text="Cancel"
+        <Flex>
+          {lastConnectedAccount && (
+            <SaveButton
+              text="Cancel"
+              disabled={false}
+              onClick={() => setShowForm(false)}
+              makeFlush={true}
+              clearPosition={true}
+              status=""
+              statusPosition="right"
+              color="#fc4976"
+            />
+          )}
+          <SubmitButton
+            text="Continue"
             disabled={false}
-            onClick={() => setShowForm(false)}
+            onClick={submit}
             makeFlush={true}
             clearPosition={true}
-            status={""}
+            status={buttonStatus}
             statusPosition={"right"}
-            color={"#fc4976"}
+            disableLeftMargin={!lastConnectedAccount}
           />
-        )}
-
-        <SubmitButton
-          text="Continue"
-          disabled={false}
-          onClick={submit}
-          makeFlush={true}
-          clearPosition={true}
-          status={buttonStatus}
-          statusPosition={"right"}
-          disableLeftMargin={!lastConnectedAccount}
-        />
+        </Flex>
       </>
     );
   }
@@ -218,19 +219,12 @@ export const CredentialsForm: React.FC<{
       <PreviewRow>
         <Flex>
           <i className="material-icons">account_circle</i>
-          <FlexColumn>
-            <FlexColumn>
-              <b>ARN:</b>
-              <SelectableSpan>
-                &#8226; {lastConnectedAccount.aws_arn}
-              </SelectableSpan>
-            </FlexColumn>
-          </FlexColumn>
+          {lastConnectedAccount.aws_arn || "arn: n/a"}
         </Flex>
-        <FlexColumnWithMargin marginLeft={"14px"}>
-          <span>Connected at</span>
+        <Right>
+          Connected at{" "}
           {readableDate(lastConnectedAccount.created_at)}
-        </FlexColumnWithMargin>
+        </Right>
       </PreviewRow>
       <Helper>
         Want to use a different account?{" "}
@@ -241,19 +235,7 @@ export const CredentialsForm: React.FC<{
       </Helper>
       <Br />
       <SaveButton
-        text="Connect another account"
-        disabled={false}
-        onClick={() => setShowForm(true)}
-        makeFlush={true}
-        clearPosition={true}
-        status={""}
-        statusPosition={"right"}
-      />
-      <Br />
-      <b>Or</b>
-      <Br />
-      <SaveButton
-        text="Continue with current account"
+        text="Continue"
         disabled={false}
         onClick={() => continueToNextStep(lastConnectedAccount?.id)}
         makeFlush={true}
@@ -370,6 +352,10 @@ export const TestRegistryConnection: React.FC<{ nextFormStep: () => void }> = ({
   );
 };
 
+const Right = styled.div`
+  text-align: right;
+`;
+
 const Br = styled.div`
   width: 100%;
   height: 15px;
@@ -415,12 +401,7 @@ const PreviewRow = styled.div`
   border-radius: 5px;
 `;
 
-const CancelButton = styled(SaveButton)`
-  display: inline-block;
-`;
-
 const SubmitButton = styled(SaveButton)`
-  display: inline-block;
   margin-left: ${(props: { disableLeftMargin: boolean }) =>
     props.disableLeftMargin ? "" : "16px"};
 `;

dashboard/src/main/home/onboarding/steps/ConnectRegistry/forms/_DORegistryForm.tsx

@@ -79,11 +79,11 @@ export const CredentialsForm: React.FC<{
   let content = "Project name: n/a";
 
   if (connectedAccount?.target_email) {
-    content = `User email: ${connectedAccount?.target_email}`;
+    content = `${connectedAccount?.target_email}`;
   }
 
   if (connectedAccount?.target_id) {
-    content = `Project name: ${connectedAccount?.target_id}`;
+    content = `${connectedAccount?.target_id}`;
   }
 
   return (
@@ -96,7 +96,7 @@ export const CredentialsForm: React.FC<{
               <i className="material-icons">account_circle</i>
               {content}
             </Flex>
-            <div>Connected at {readableDate(connectedAccount.created_at)}</div>
+            <Right>Connected at {readableDate(connectedAccount.created_at)}</Right>
           </PreviewRow>
         </>
       )}
@@ -235,6 +235,10 @@ const A = styled.a`
   cursor: pointer;
 `;
 
+const Right = styled.div`
+  text-align: right;
+`;
+
 const Flex = styled.div`
   display: flex;
   color: #ffffff;

dashboard/src/main/home/onboarding/steps/ConnectRegistry/forms/_GCPRegistryForm.tsx

@@ -148,28 +148,30 @@ export const CredentialsForm: React.FC<{
           isRequired={true}
         />
         <Br />
-        {lastConnectedAccount && (
-          <CancelButton
-            text="Cancel"
+        <Flex>
+          {lastConnectedAccount && (
+            <SaveButton
+              text="Cancel"
+              disabled={false}
+              onClick={() => setShowForm(false)}
+              makeFlush={true}
+              clearPosition={true}
+              status=""
+              statusPosition="right"
+              color="#fc4976"
+            />
+          )}
+          <SubmitButton
+            text="Continue"
             disabled={false}
-            onClick={() => setShowForm(false)}
+            onClick={submit}
             makeFlush={true}
             clearPosition={true}
-            status={""}
+            status={buttonStatus}
             statusPosition={"right"}
-            color={"#fc4976"}
+            disableLeftMargin={!lastConnectedAccount}
           />
-        )}
-        <SubmitButton
-          text="Continue"
-          disabled={false}
-          onClick={submit}
-          makeFlush={true}
-          clearPosition={true}
-          status={buttonStatus}
-          statusPosition={"right"}
-          disableLeftMargin={!lastConnectedAccount}
-        />
+        </Flex>
       </>
     );
   }
@@ -179,25 +181,12 @@ export const CredentialsForm: React.FC<{
       <PreviewRow>
         <Flex>
           <i className="material-icons">account_circle</i>
-          <FlexColumn>
-            <FlexColumn>
-              <b>Project ID:</b>
-              <SelectableSpan>
-                &#8226; {lastConnectedAccount.gcp_project_id}
-              </SelectableSpan>
-            </FlexColumn>
-            <FlexColumn>
-              <b>Service account:</b>
-              <SelectableSpan>
-                &#8226; {lastConnectedAccount?.gcp_sa_email}
-              </SelectableSpan>
-            </FlexColumn>
-          </FlexColumn>
+          {lastConnectedAccount?.gcp_sa_email}
         </Flex>
-        <FlexColumnWithMargin marginLeft={"14px"}>
-          <span>Connected at</span>
+        <Right>
+          Connected at{" "}
           {readableDate(lastConnectedAccount.created_at)}
-        </FlexColumnWithMargin>
+        </Right>
       </PreviewRow>
       <Helper>
         Want to use a different account?{" "}
@@ -350,6 +339,10 @@ export const TestRegistryConnection: React.FC<{
   );
 };
 
+const Right = styled.div`
+  text-align: right;
+`;
+
 const Br = styled.div`
   width: 100%;
   height: 15px;
@@ -406,12 +399,7 @@ const PreviewRow = styled.div`
   border-radius: 5px;
 `;
 
-const CancelButton = styled(SaveButton)`
-  display: inline-block;
-`;
-
 const SubmitButton = styled(SaveButton)`
-  display: inline-block;
   margin-left: ${(props: { disableLeftMargin: boolean }) =>
     props.disableLeftMargin ? "" : "16px"};
 `;

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/SharedStatus.tsx

@@ -326,7 +326,7 @@ export const SharedStatus: React.FC<{
       setTFModules([...tfModules]);
 
       tfModules.forEach((val, index) => {
-        if (val?.status != "created" && val?.status != "destroyed") {
+        if (val?.status != "created") {
           updateDesiredState(index, val);
           setupInfraWebsocket(val.id + "", val, index);
         }

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/_AWSProvisionerForm.tsx

@@ -203,29 +203,30 @@ export const CredentialsForm: React.FC<{
           label="📍 AWS Region"
         />
         <Br />
-        {lastConnectedAccount && (
-          <CancelButton
-            text="Cancel"
+        <Flex>
+          {lastConnectedAccount && (
+            <SaveButton
+              text="Cancel"
+              disabled={false}
+              onClick={() => setShowForm(false)}
+              makeFlush={true}
+              clearPosition={true}
+              status=""
+              statusPosition="right"
+              color="#fc4976"
+            />
+          )}
+          <SubmitButton
+            text="Continue"
             disabled={false}
-            onClick={() => setShowForm(false)}
+            onClick={submit}
             makeFlush={true}
             clearPosition={true}
-            status={""}
+            status={buttonStatus}
             statusPosition={"right"}
-            color={"#fc4976"}
+            disableLeftMargin={!lastConnectedAccount}
           />
-        )}
-
-        <SubmitButton
-          text="Continue"
-          disabled={false}
-          onClick={submit}
-          makeFlush={true}
-          clearPosition={true}
-          status={buttonStatus}
-          statusPosition={"right"}
-          disableLeftMargin={!lastConnectedAccount}
-        />
+        </Flex>
       </div>
     );
   }
@@ -236,19 +237,12 @@ export const CredentialsForm: React.FC<{
       <PreviewRow>
         <Flex>
           <i className="material-icons">account_circle</i>
-          <FlexColumn>
-            <FlexColumn>
-              <b>ARN:</b>
-              <SelectableSpan>
-                &#8226; {lastConnectedAccount.aws_arn}
-              </SelectableSpan>
-            </FlexColumn>
-          </FlexColumn>
+          {lastConnectedAccount.aws_arn || "arn: n/a"}
         </Flex>
-        <FlexColumnWithMargin marginLeft={"14px"}>
-          <span>Connected at</span>
+        <Right>
+          Connected at{" "}
           {readableDate(lastConnectedAccount.created_at)}
-        </FlexColumnWithMargin>
+        </Right>
       </PreviewRow>
       <Helper>
         Want to use a different account?{" "}
@@ -440,17 +434,16 @@ export const SettingsForm: React.FC<{
   );
 };
 
+const Right = styled.div`
+  text-align: right;
+`;
+
 const Br = styled.div`
   width: 100%;
   height: 15px;
 `;
 
-const CancelButton = styled(SaveButton)`
-  display: inline-block;
-`;
-
 const SubmitButton = styled(SaveButton)`
-  display: inline-block;
   margin-left: ${(props: { disableLeftMargin: boolean }) =>
     props.disableLeftMargin ? "" : "16px"};
 `;

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/_DOProvisionerForm.tsx

@@ -101,11 +101,11 @@ export const CredentialsForm: React.FC<{
   let content = "Project name: n/a";
 
   if (connectedAccount?.target_email) {
-    content = `User email: ${connectedAccount?.target_email}`;
+    content = `${connectedAccount?.target_email}`;
   }
 
   if (connectedAccount?.target_id) {
-    content = `Project name: ${connectedAccount?.target_id}`;
+    content = `${connectedAccount?.target_id}`;
   }
 
   return (
@@ -118,7 +118,7 @@ export const CredentialsForm: React.FC<{
               <i className="material-icons">account_circle</i>
               {content}
             </Flex>
-            <div>Connected at {readableDate(connectedAccount.created_at)}</div>
+            <Right>Connected at {readableDate(connectedAccount.created_at)}</Right>
           </PreviewRow>
         </>
       )}
@@ -345,6 +345,11 @@ export const SettingsForm: React.FC<{
   );
 };
 
+const Right = styled.div`
+  text-align: right;
+  margin-left: 10px;
+`;
+
 const A = styled.a`
   cursor: pointer;
 `;

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/_GCPProvisionerForm.tsx

@@ -193,28 +193,30 @@ export const CredentialsForm: React.FC<{
           height="100%"
           isRequired={true}
         />
-        {lastConnectedAccount && (
-          <CancelButton
-            text="Cancel"
+        <Flex>
+          {lastConnectedAccount && (
+            <SaveButton
+              text="Cancel"
+              disabled={false}
+              onClick={() => setShowForm(false)}
+              makeFlush={true}
+              clearPosition={true}
+              status=""
+              statusPosition="right"
+              color="#fc4976"
+            />
+          )}
+          <SubmitButton
+            text="Continue"
             disabled={false}
-            onClick={() => setShowForm(false)}
+            onClick={submit}
             makeFlush={true}
             clearPosition={true}
-            status={""}
+            status={buttonStatus}
             statusPosition={"right"}
-            color={"#fc4976"}
+            disableLeftMargin={!lastConnectedAccount}
           />
-        )}
-        <SubmitButton
-          text="Continue"
-          disabled={false}
-          onClick={submit}
-          makeFlush={true}
-          clearPosition={true}
-          status={buttonStatus}
-          statusPosition={"right"}
-          disableLeftMargin={!lastConnectedAccount}
-        />
+        </Flex>
       </>
     );
   }
@@ -225,25 +227,12 @@ export const CredentialsForm: React.FC<{
       <PreviewRow>
         <Flex>
           <i className="material-icons">account_circle</i>
-          <FlexColumn>
-            <FlexColumn>
-              <b>Project ID:</b>
-              <SelectableSpan>
-                &#8226; {lastConnectedAccount.gcp_project_id}
-              </SelectableSpan>
-            </FlexColumn>
-            <FlexColumn>
-              <b>Service account:</b>
-              <SelectableSpan>
-                &#8226; {lastConnectedAccount?.gcp_sa_email}
-              </SelectableSpan>
-            </FlexColumn>
-          </FlexColumn>
+          {lastConnectedAccount?.gcp_sa_email || "n/a"}
         </Flex>
-        <FlexColumnWithMargin marginLeft={"14px"}>
-          <span>Connected at</span>
+        <Right>
+          Connected at{" "}
           {readableDate(lastConnectedAccount.created_at)}
-        </FlexColumnWithMargin>
+        </Right>
       </PreviewRow>
       <Helper>
         Want to use a different account?{" "}
@@ -426,6 +415,10 @@ export const SettingsForm: React.FC<{
   );
 };
 
+const Right = styled.div`
+  text-align: right;
+`;
+
 const Br = styled.div`
   width: 100%;
   height: 15px;
@@ -482,12 +475,7 @@ const PreviewRow = styled.div`
   border-radius: 5px;
 `;
 
-const CancelButton = styled(SaveButton)`
-  display: inline-block;
-`;
-
 const SubmitButton = styled(SaveButton)`
-  display: inline-block;
   margin-left: ${(props: { disableLeftMargin: boolean }) =>
     props.disableLeftMargin ? "" : "16px"};
 `;

internal/kubernetes/config.go

@@ -329,7 +329,7 @@ func (conf *OutOfClusterConfig) CreateRawConfigFromCluster() (*api.Config, error
 			return nil, err
 		}
 
-		tok, err := awsAuth.GetBearerToken(conf.getTokenCache, conf.setTokenCache)
+		tok, err := awsAuth.GetBearerToken(conf.getTokenCache, conf.setTokenCache, cluster.Name)
 
 		if err != nil {
 			return nil, err

internal/models/integrations/aws.go

@@ -104,6 +104,7 @@ func (a *AWSIntegration) PopulateAWSArn() error {
 func (a *AWSIntegration) GetBearerToken(
 	getTokenCache GetTokenCacheFunc,
 	setTokenCache SetTokenCacheFunc,
+	clusterID string,
 ) (string, error) {
 	cache, err := getTokenCache()
 
@@ -126,9 +127,15 @@ func (a *AWSIntegration) GetBearerToken(
 		return "", err
 	}
 
+	clusterIDGuess := string(a.AWSClusterID)
+
+	if clusterIDGuess == "" {
+		clusterIDGuess = clusterID
+	}
+
 	tok, err := generator.GetWithOptions(&token.GetTokenOptions{
 		Session:   sess,
-		ClusterID: string(a.AWSClusterID),
+		ClusterID: clusterID,
 	})
 
 	if err != nil {