Added credentials preview to DO registry form

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

@@ -1,5 +1,6 @@
 import Helper from "components/form-components/Helper";
 import InputRow from "components/form-components/InputRow";
+import Loading from "components/Loading";
 import SaveButton from "components/SaveButton";
 import RegistryImageList from "main/home/onboarding/components/RegistryImageList";
 import { OFState } from "main/home/onboarding/state";
@@ -11,6 +12,16 @@ import api from "shared/api";
 import styled from "styled-components";
 import { useSnapshot } from "valtio";
 
+const readableDate = (s: string) => {
+  const ts = new Date(s);
+  const date = ts.toLocaleDateString();
+  const time = ts.toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+  return `${time} on ${date}`;
+};
+
 /**
  * This will redirect to DO, and we should pass the redirection URI to be /onboarding/registry?provider=do
  *
@@ -23,36 +34,78 @@ export const CredentialsForm: React.FC<{
   nextFormStep: (data: Partial<DORegistryConfig>) => void;
   project: any;
 }> = ({ nextFormStep, project }) => {
-  const location = useLocation();
+  const snap = useSnapshot(OFState);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [connectedAccount, setConnectedAccount] = useState(null);
+
   useEffect(() => {
-    api
-      .getOAuthIds("<token>", {}, { project_id: project?.id })
-      .then((res) => {
-        let tgtIntegration = res.data.find((integration: any) => {
-          return integration.client === "do";
-        });
+    api.getOAuthIds("<token>", {}, { project_id: project?.id }).then((res) => {
+      let integrations = res.data.filter((integration: any) => {
+        return integration.client === "do";
+      });
 
-        if (tgtIntegration) {
-          nextFormStep({
-            credentials: {
-              id: tgtIntegration.id,
-            },
-          });
+      if (Array.isArray(integrations) && integrations.length) {
+        // Sort decendant
+        integrations.sort((a, b) => b.id - a.id);
+        let lastUsed = integrations.find((i) => {
+          i.id === snap.StateHandler?.provision_resources?.credentials?.id;
+        });
+        if (!lastUsed) {
+          lastUsed = integrations[0];
         }
-      })
-      .catch(console.log);
+        setConnectedAccount(lastUsed);
+      }
+      setIsLoading(false);
+    });
   }, []);
 
+  const submit = (integrationId: number) => {
+    nextFormStep({
+      credentials: {
+        id: integrationId,
+      },
+    });
+  };
+
   const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
 
   const encoded_redirect_uri = encodeURIComponent(url);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
   return (
-    <ConnectDigitalOceanButton
-      target={"_blank"}
-      href={`/api/projects/${project?.id}/oauth/digitalocean?redirect_uri=${encoded_redirect_uri}`}
-    >
-      Sign in to Digital Ocean
-    </ConnectDigitalOceanButton>
+    <>
+      {connectedAccount !== null && (
+        <div>
+          <div>Connected account: {connectedAccount.client}</div>
+          <div>Connected at: {readableDate(connectedAccount.created_at)}</div>
+        </div>
+      )}
+      <ConnectDigitalOceanButton
+        target={"_blank"}
+        href={`/api/projects/${project?.id}/oauth/digitalocean?redirect_uri=${encoded_redirect_uri}`}
+      >
+        {connectedAccount !== null
+          ? "Connect another account"
+          : "Sign In to Digital Ocean"}
+      </ConnectDigitalOceanButton>
+
+      <Br />
+      {connectedAccount !== null && (
+        <SaveButton
+          text="Continue with connected account"
+          disabled={false}
+          onClick={() => submit(connectedAccount.id)}
+          makeFlush={true}
+          clearPosition={true}
+          status={""}
+          statusPosition={"right"}
+        />
+      )}
+    </>
   );
 };