From 3ddedc8c9fbd27fee5e96fac409aab450c09fc29 Mon Sep 17 00:00:00 2001
From: d-g-town <66391417+d-g-town@users.noreply.github.com>
Date: Mon, 25 Sep 2023 15:22:47 -0400
Subject: [PATCH] link docs for Azure service principal creation; incorporate
 vertical steps into credential flow, small miscellaneous updates (#3642)

Co-authored-by: David Townley <davidtownley@Davids-MacBook-Air.local>
---
 dashboard/src/components/AzureCostConsent.tsx |   2 +-
 .../src/components/AzureCredentialForm.tsx    | 148 ++++++++++--------
 2 files changed, 83 insertions(+), 67 deletions(-)

diff --git a/dashboard/src/components/AzureCostConsent.tsx b/dashboard/src/components/AzureCostConsent.tsx
index 4674472041..3cf7deb1c0 100644
--- a/dashboard/src/components/AzureCostConsent.tsx
+++ b/dashboard/src/components/AzureCostConsent.tsx
@@ -60,7 +60,7 @@ const AzureCostConsent: React.FC<Props> = ({
               <Fieldset background="#1b1d2688">
                 • Azure Kubernetes Service (AKS) = $73/mo
                 <Spacer height="15px" />
-                • Amazon EC2:
+                • Azure virtual machines:
                 <Spacer height="15px" />
                 <Tab />+ System workloads: Standard_B2als_v2 instance (3) =
                 $82.34/mo
diff --git a/dashboard/src/components/AzureCredentialForm.tsx b/dashboard/src/components/AzureCredentialForm.tsx
index 7dcda1d184..62a047e3bb 100644
--- a/dashboard/src/components/AzureCredentialForm.tsx
+++ b/dashboard/src/components/AzureCredentialForm.tsx
@@ -9,16 +9,12 @@ import { Context } from "shared/Context";
 
 import Text from "./porter/Text";
 import Spacer from "./porter/Spacer";
-import InputRow from "./form-components/InputRow";
-import SaveButton from "./SaveButton";
-import Fieldset from "./porter/Fieldset";
 import Input from "./porter/Input";
 import Button from "./porter/Button";
-import DocsHelper from "./DocsHelper";
 import Error from "./porter/Error";
-import Step from "./porter/Step";
 import Link from "./porter/Link";
 import Container from "./porter/Container";
+import VerticalSteps from "./porter/VerticalSteps";
 
 type Props = {
   goBack: () => void;
@@ -33,6 +29,7 @@ const AzureCredentialForm: React.FC<Props> = ({ goBack, proceed }) => {
   const [subscriptionId, setSubscriptionId] = useState("");
   const [errorMessage, setErrorMessage] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [currentStep, setCurrentStep] = useState<number>(0);
 
   const saveCredentials = async () => {
     setIsLoading(true);
@@ -98,67 +95,85 @@ const AzureCredentialForm: React.FC<Props> = ({ goBack, proceed }) => {
 
   const renderContent = () => {
     return (
-      <>
-        <Spacer y={1} />
-        <Fieldset>
-          <Text size={16}>
-            Create an Azure Service Principal and input credentials
-          </Text>
-          <Spacer height="15px" />
-          <Text color="helper">
-            Provide the credentials for an Azure Service Principal authorized on
-            your Azure subscription.
-          </Text>
-          <Spacer y={1} />
-          <Input
-            label={<Flex>Subscription ID</Flex>}
-            value={subscriptionId}
-            setValue={(e) => {
-              setSubscriptionId(e.trim());
-            }}
-            placeholder="ex: 12345678-abcd-1234-abcd-12345678abcd"
-            width="100%"
-          />
-          <Spacer y={1} />
-          <Input
-            label={<Flex>App ID</Flex>}
-            value={clientId}
-            setValue={(e) => {
-              setClientId(e.trim());
-            }}
-            placeholder="ex: 12345678-abcd-1234-abcd-12345678abcd"
-            width="100%"
-          />
-          <Spacer y={1} />
-          <Input
-            type="password"
-            label={<Flex>Password</Flex>}
-            value={servicePrincipalKey}
-            setValue={(e) => {
-              setServicePrincipalKey(e.trim());
-            }}
-            placeholder="○ ○ ○ ○ ○ ○ ○ ○ ○"
-            width="100%"
-          />
-          <Spacer y={1} />
-          <Input
-            label={<Flex>Tenant ID</Flex>}
-            value={tenantId}
-            setValue={(e) => {
-              setTenantId(e.trim());
-            }}
-            placeholder="ex: 12345678-abcd-1234-abcd-12345678abcd"
-            width="100%"
-          />
-        </Fieldset>
-        <Spacer y={1} />
-        <Button
-          onClick={saveCredentials}
-          status={getButtonStatus()}
-        >
-          Continue
-        </Button>
-      </>
+      <VerticalSteps
+          onlyShowCurrentStep={true}
+          currentStep={currentStep}
+          steps={[
+            <>
+              <Text size={16}>Set up your Azure subscription</Text>
+              <Spacer y={.5} />
+              <Text color="helper">
+                Follow our <Link to="https://docs.porter.run/standard/getting-started/provisioning-on-azure" target="_blank">documentation</Link> to create your service principal and prepare your subscription for use with Porter.
+              </Text>
+              <Spacer y={1} />
+              <Button onClick={() => setCurrentStep(1)}>
+                Continue
+              </Button>
+            </>,
+            <>
+                <Text size={16}>
+                  Input Azure service principal credentials
+                </Text>
+                <Spacer height="15px" />
+                <Text color="helper">
+                  Provide the credentials for an Azure Service Principal authorized on
+                  your Azure subscription.
+                </Text>
+                <Spacer y={1} />
+                <Input
+                    label={<Flex>Subscription ID</Flex>}
+                    value={subscriptionId}
+                    setValue={(e) => {
+                      setSubscriptionId(e.trim());
+                    }}
+                    placeholder="ex: 12345678-abcd-1234-abcd-12345678abcd"
+                    width="100%"
+                />
+                <Spacer y={1} />
+                <Input
+                    label={<Flex>App ID</Flex>}
+                    value={clientId}
+                    setValue={(e) => {
+                      setClientId(e.trim());
+                    }}
+                    placeholder="ex: 12345678-abcd-1234-abcd-12345678abcd"
+                    width="100%"
+                />
+                <Spacer y={1} />
+                <Input
+                    type="password"
+                    label={<Flex>Password</Flex>}
+                    value={servicePrincipalKey}
+                    setValue={(e) => {
+                      setServicePrincipalKey(e.trim());
+                    }}
+                    placeholder="○ ○ ○ ○ ○ ○ ○ ○ ○"
+                    width="100%"
+                />
+                <Spacer y={1} />
+                <Input
+                    label={<Flex>Tenant ID</Flex>}
+                    value={tenantId}
+                    setValue={(e) => {
+                      setTenantId(e.trim());
+                    }}
+                    placeholder="ex: 12345678-abcd-1234-abcd-12345678abcd"
+                    width="100%"
+                />
+              <Spacer y={1} />
+              <Container row>
+                  <Button onClick={() => setCurrentStep(0)} color="#222222">Back</Button>
+                  <Spacer inline x={0.5} />
+                  <Button
+                    onClick={saveCredentials}
+                    status={getButtonStatus()}
+                  >
+                  Continue
+                  </Button>
+              </Container>
+            </>,
+          ]}
+      />
     );
   };
 
@@ -178,6 +193,7 @@ const AzureCredentialForm: React.FC<Props> = ({ goBack, proceed }) => {
         Grant Porter permissions to create infrastructure in your Azure
         subscription.
       </Text>
+      <Spacer y={1} />
       {renderContent()}
     </>
   );