Restore registry form

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

@@ -1,27 +1,16 @@
 import Helper from "components/form-components/Helper";
 import InputRow from "components/form-components/InputRow";
 import UploadArea from "components/form-components/UploadArea";
-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";
 import { StateHandler } from "main/home/onboarding/state/StateHandler";
 import { GCPRegistryConfig } from "main/home/onboarding/types";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 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}`;
-};
-
 export const CredentialsForm: React.FC<{
   nextFormStep: (data: Partial<GCPRegistryConfig>) => void;
   project: any;
@@ -29,56 +18,6 @@ export const CredentialsForm: React.FC<{
   const [projectId, setProjectId] = useState("");
   const [serviceAccountKey, setServiceAccountKey] = useState("");
   const [buttonStatus, setButtonStatus] = useState("");
-  const [showForm, setShowForm] = useState(false);
-  const [lastConnectedAccount, setLastConnectedAccount] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const snap = useSnapshot(OFState);
-
-  useEffect(() => {
-    api
-      .getGCPIntegration("<token>", {}, { project_id: project.id })
-      .then((res) => {
-        let integrations = res.data;
-        if (!Array.isArray(integrations) || !integrations.length) {
-          setShowForm(true);
-          return;
-        }
-
-        // DO NOT USE THE INTEGRATION ID FROM PROVISION_RESOURCES
-        integrations = integrations.filter((i) => {
-          return (
-            i.id !== snap.StateHandler?.provision_resources?.credentials?.id
-          );
-        });
-
-        // filter can change the type from integrations so just in case
-        // we check again that integrations is an array
-        if (!Array.isArray(integrations) || !integrations) {
-          setShowForm(true);
-          return;
-        }
-
-        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];
-        }
-
-        setLastConnectedAccount(lastUsed);
-        setShowForm(false);
-      })
-      .catch((err) => {
-        setShowForm(true);
-        console.error(err);
-      })
-      .finally(() => {
-        setIsLoading(false);
-      });
-  }, []);
 
   const validate = () => {
     if (!projectId) {
@@ -124,99 +63,34 @@ export const CredentialsForm: React.FC<{
     }
   };
 
-  const continueToNextStep = (integration_id: number) => {
-    nextFormStep({
-      credentials: {
-        id: integration_id,
-      },
-    });
-  };
-
-  if (isLoading) {
-    return <Loading />;
-  }
-
-  if (showForm) {
-    return (
-      <>
-        <InputRow
-          type="text"
-          value={projectId}
-          setValue={(x: string) => {
-            setProjectId(x);
-          }}
-          label="🏷️ GCP Project ID"
-          placeholder="ex: blindfold-ceiling-24601"
-          width="100%"
-          isRequired={true}
-        />
-
-        <Helper>Service account credentials for GCP permissions.</Helper>
-        <UploadArea
-          setValue={(x: any) => setServiceAccountKey(x)}
-          label="🔒 GCP Key Data (JSON)"
-          placeholder="Choose a file or drag it here."
-          width="100%"
-          height="100%"
-          isRequired={true}
-        />
-        <Br />
-        <CancelButton
-          text="Cancel"
-          disabled={false}
-          onClick={() => setShowForm(false)}
-          makeFlush={true}
-          clearPosition={true}
-          status={""}
-          statusPosition={"right"}
-          color={"#fc4976"}
-        />
-        <SubmitButton
-          text="Continue"
-          disabled={false}
-          onClick={submit}
-          makeFlush={true}
-          clearPosition={true}
-          status={buttonStatus}
-          statusPosition={"right"}
-        />
-      </>
-    );
-  }
-
   return (
     <>
-      <div>
-        Last connected account:
-        <div>
-          <b>Project ID: </b>
-          {lastConnectedAccount?.gcp_project_id}
-        </div>
-        <div>
-          <b>SA EMAIL: </b>
-          {lastConnectedAccount?.gcp_sa_email}
-        </div>
-        <div>
-          <b>Connected on:</b> {readableDate(lastConnectedAccount?.created_at)}
-        </div>
-      </div>
-      <Br />
-      <SaveButton
-        text="Connect another account"
-        disabled={false}
-        onClick={() => setShowForm(true)}
-        makeFlush={true}
-        clearPosition={true}
-        status={""}
-        statusPosition={"right"}
+      <InputRow
+        type="text"
+        value={projectId}
+        setValue={(x: string) => {
+          setProjectId(x);
+        }}
+        label="🏷️ GCP Project ID"
+        placeholder="ex: blindfold-ceiling-24601"
+        width="100%"
+        isRequired={true}
+      />
+
+      <Helper>Service account credentials for GCP permissions.</Helper>
+      <UploadArea
+        setValue={(x: any) => setServiceAccountKey(x)}
+        label="🔒 GCP Key Data (JSON)"
+        placeholder="Choose a file or drag it here."
+        width="100%"
+        height="100%"
+        isRequired={true}
       />
-      <Br />
-      <b>Or</b>
       <Br />
       <SaveButton
-        text="Continue with current account"
+        text="Continue"
         disabled={false}
-        onClick={() => continueToNextStep(lastConnectedAccount?.id)}
+        onClick={submit}
         makeFlush={true}
         clearPosition={true}
         status={buttonStatus}
@@ -369,12 +243,3 @@ const CodeBlock = styled.span`
   margin-top: -2px;
   user-select: text;
 `;
-
-const CancelButton = styled(SaveButton)`
-  display: inline-block;
-`;
-
-const SubmitButton = styled(SaveButton)`
-  display: inline-block;
-  margin-left: 16px;
-`;