Implemented connect GAR registry form

dashboard/src/main/home/onboarding/components/ProviderSelector.tsx

@@ -32,6 +32,11 @@ export const registryOptions = [
     icon: integrationList["gcr"]?.icon,
     label: "Google Cloud Registry (GCR)",
   },
+  {
+    value: "gar",
+    icon: integrationList["gcr"]?.icon,
+    label: "Google Artifact Registry (GAR)",
+  },
   {
     value: "do",
     icon: integrationList["do"]?.icon,
@@ -50,6 +55,7 @@ export const provisionerOptions = [
     icon: integrationList["gcp"]?.icon,
     label: "Google Cloud Platform (GCP)",
   },
+
   {
     value: "do",
     icon: integrationList["do"]?.icon,

dashboard/src/main/home/onboarding/constants.ts

@@ -0,0 +1,26 @@
+export const GCP_REGION_OPTIONS = [
+  { value: "asia-east1", label: "asia-east1" },
+  { value: "asia-east2", label: "asia-east2" },
+  { value: "asia-northeast1", label: "asia-northeast1" },
+  { value: "asia-northeast2", label: "asia-northeast2" },
+  { value: "asia-northeast3", label: "asia-northeast3" },
+  { value: "asia-south1", label: "asia-south1" },
+  { value: "asia-southeast1", label: "asia-southeast1" },
+  { value: "asia-southeast2", label: "asia-southeast2" },
+  { value: "australia-southeast1", label: "australia-southeast1" },
+  { value: "europe-north1", label: "europe-north1" },
+  { value: "europe-west1", label: "europe-west1" },
+  { value: "europe-west2", label: "europe-west2" },
+  { value: "europe-west3", label: "europe-west3" },
+  { value: "europe-west4", label: "europe-west4" },
+  { value: "europe-west6", label: "europe-west6" },
+  { value: "northamerica-northeast1", label: "northamerica-northeast1" },
+  { value: "southamerica-east1", label: "southamerica-east1" },
+  { value: "us-central1", label: "us-central1" },
+  { value: "us-east1", label: "us-east1" },
+  { value: "us-east4", label: "us-east4" },
+  { value: "us-west1", label: "us-west1" },
+  { value: "us-west2", label: "us-west2" },
+  { value: "us-west3", label: "us-west3" },
+  { value: "us-west4", label: "us-west4" },
+];

dashboard/src/main/home/onboarding/state/StateHandler.ts

@@ -3,6 +3,7 @@ import type {
   AWSProvisionerConfig,
   AWSRegistryConfig,
   DORegistryConfig,
+  GARRegistryConfig,
   GCPProvisionerConfig,
   GCPRegistryConfig,
   SkipProvisionConfig,
@@ -12,6 +13,7 @@ import type {
 export type ConnectedRegistryConfig =
   | AWSRegistryConfig
   | GCPRegistryConfig
+  | GARRegistryConfig
   | DORegistryConfig
   | SkipRegistryConnection;
 
@@ -34,7 +36,7 @@ export type OnboardingState = {
   user_email: string;
   project: ProjectData | null;
   connected_source: ConnectedSourceData | null;
-  connected_registry: any | null;
+  connected_registry: ConnectedRegistryConfig | null;
   provision_resources: Partial<ProvisionerConfig> | null;
   actions: {
     restoreState: (state: OnboardingState) => void;

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

@@ -23,6 +23,7 @@ import {
 
 import {
   CredentialsForm as GCPCredentialsForm,
+  GARegistryConfig,
   SettingsForm as GCPSettingsForm,
   TestRegistryConnection as GCPTestRegistryConnection,
 } from "./_GCPRegistryForm";
@@ -42,6 +43,11 @@ const Forms = {
     settings: GCPSettingsForm,
     test_connection: GCPTestRegistryConnection,
   },
+  gar: {
+    credentials: GCPCredentialsForm,
+    settings: GARegistryConfig,
+    test_connection: GCPTestRegistryConnection,
+  },
   do: {
     credentials: DOCredentialsForm,
     settings: DOSettingsForm,
@@ -62,6 +68,12 @@ const FormTitle = {
     doc:
       "https://docs.porter.run/deploying-applications/deploying-from-docker-registry/linking-existing-registry#google-container-registry-gcr",
   },
+  gar: {
+    label: "Google Artifact Registry (GAR)",
+    icon: integrationList["gcr"].icon,
+    doc:
+      "https://docs.porter.run/deploying-applications/deploying-from-docker-registry/linking-existing-registry#google-artifact-registry-gar",
+  },
   do: {
     label: "DigitalOcean Container Registry (DOCR)",
     icon: integrationList["do"].icon,

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

@@ -1,9 +1,11 @@
 import Helper from "components/form-components/Helper";
 import InputRow from "components/form-components/InputRow";
+import SelectRow from "components/form-components/SelectRow";
 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 { GCP_REGION_OPTIONS } from "main/home/onboarding/constants";
 import { OFState } from "main/home/onboarding/state";
 import { StateHandler } from "main/home/onboarding/state/StateHandler";
 import { GCPRegistryConfig } from "main/home/onboarding/types";
@@ -305,6 +307,126 @@ export const SettingsForm: React.FC<{
   );
 };
 
+export const GARegistryConfig: React.FC<{
+  nextFormStep: (data: Partial<GCPRegistryConfig>) => void;
+  project: any;
+}> = ({ nextFormStep, project }) => {
+  const [buttonStatus, setButtonStatus] = useState("");
+  const [registryName, setRegistryName] = useState("");
+  const [region, setRegion] = useState("us-east1");
+  const [projectId, setProjectId] = useState("");
+
+  const snap = useSnapshot(OFState);
+
+  const validate = () => {
+    if (!registryName) {
+      return {
+        hasError: true,
+        error: "Registry Name cannot be empty",
+      };
+    }
+    if (!region) {
+      return {
+        hasError: true,
+        error: "Region is missing",
+      };
+    }
+
+    if (!GCP_REGION_OPTIONS.map((val) => val.value).includes(region)) {
+      return {
+        hasError: true,
+        error: "Region is invalid",
+      };
+    }
+
+    return { hasError: false, error: "" };
+  };
+
+  const submit = async () => {
+    const validation = validate();
+
+    if (validation.hasError) {
+      setButtonStatus(validation.error);
+      return;
+    }
+
+    setButtonStatus("loading");
+
+    const registryUrl = `${region}-docker.pkg.dev/${projectId}`;
+
+    try {
+      const data = await api
+        .connectGCRRegistry(
+          "<token>",
+          {
+            name: registryName,
+            gcp_integration_id:
+              snap.StateHandler.connected_registry.credentials.id,
+            url: registryUrl,
+          },
+          {
+            id: project.id,
+          }
+        )
+        .then((res) => res?.data);
+
+      nextFormStep({
+        settings: {
+          registry_connection_id: data.id,
+          gcr_url: registryUrl,
+          registry_name: registryName,
+        },
+      });
+    } catch (error) {
+      setButtonStatus("Couldn't connect registry.");
+    }
+  };
+  return (
+    <>
+      <Helper>Porter will use this registry to store your images.</Helper>
+      <InputRow
+        type="text"
+        value={registryName}
+        setValue={(name: string) => setRegistryName(name)}
+        isRequired={true}
+        label="🏷️ Registry Name"
+        placeholder="ex: paper-straw"
+        width="100%"
+      />
+      <InputRow
+        type="text"
+        value={projectId}
+        setValue={(id: string) => setProjectId(id)}
+        isRequired={true}
+        label="🔗 Project ID"
+        placeholder="ex: skynet-dev-172969"
+        width="100%"
+      />
+      <SelectRow
+        options={GCP_REGION_OPTIONS}
+        width="100%"
+        value={region}
+        scrollBuffer={true}
+        dropdownMaxHeight="240px"
+        setActiveValue={(x: string) => {
+          setRegion(x);
+        }}
+        label="📍 GCP Region"
+      />
+      <Br />
+      <SaveButton
+        text="Continue"
+        disabled={false}
+        onClick={submit}
+        makeFlush={true}
+        clearPosition={true}
+        status={buttonStatus}
+        statusPosition={"right"}
+      />
+    </>
+  );
+};
+
 export const TestRegistryConnection: React.FC<{
   nextFormStep: () => void;
   project: any;

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

@@ -4,6 +4,7 @@ import SelectRow from "components/form-components/SelectRow";
 import UploadArea from "components/form-components/UploadArea";
 import Loading from "components/Loading";
 import SaveButton from "components/SaveButton";
+import { GCP_REGION_OPTIONS } from "main/home/onboarding/constants";
 import { OFState } from "main/home/onboarding/state";
 import {
   GCPProvisionerConfig,
@@ -16,33 +17,6 @@ import { Infrastructure } from "shared/types";
 import styled from "styled-components";
 import { useSnapshot } from "valtio";
 
-const regionOptions = [
-  { value: "asia-east1", label: "asia-east1" },
-  { value: "asia-east2", label: "asia-east2" },
-  { value: "asia-northeast1", label: "asia-northeast1" },
-  { value: "asia-northeast2", label: "asia-northeast2" },
-  { value: "asia-northeast3", label: "asia-northeast3" },
-  { value: "asia-south1", label: "asia-south1" },
-  { value: "asia-southeast1", label: "asia-southeast1" },
-  { value: "asia-southeast2", label: "asia-southeast2" },
-  { value: "australia-southeast1", label: "australia-southeast1" },
-  { value: "europe-north1", label: "europe-north1" },
-  { value: "europe-west1", label: "europe-west1" },
-  { value: "europe-west2", label: "europe-west2" },
-  { value: "europe-west3", label: "europe-west3" },
-  { value: "europe-west4", label: "europe-west4" },
-  { value: "europe-west6", label: "europe-west6" },
-  { value: "northamerica-northeast1", label: "northamerica-northeast1" },
-  { value: "southamerica-east1", label: "southamerica-east1" },
-  { value: "us-central1", label: "us-central1" },
-  { value: "us-east1", label: "us-east1" },
-  { value: "us-east4", label: "us-east4" },
-  { value: "us-west1", label: "us-west1" },
-  { value: "us-west2", label: "us-west2" },
-  { value: "us-west3", label: "us-west3" },
-  { value: "us-west4", label: "us-west4" },
-];
-
 export const CredentialsForm: React.FC<{
   nextFormStep: (data: Partial<GCPRegistryConfig>) => void;
   project: any;
@@ -489,7 +463,7 @@ export const SettingsForm: React.FC<{
         isRequired={true}
       />
       <SelectRow
-        options={regionOptions}
+        options={GCP_REGION_OPTIONS}
         width="100%"
         value={region}
         scrollBuffer={true}

dashboard/src/main/home/onboarding/types.ts

@@ -34,6 +34,19 @@ export type GCPRegistryConfig = {
   };
 };
 
+export type GARRegistryConfig = {
+  skip: false;
+  provider: "gar";
+  credentials: {
+    id: number;
+  };
+  settings: {
+    registry_connection_id: number;
+    registry_name: string;
+    gar_url: string;
+  };
+};
+
 export type DORegistryConfig = {
   skip: false;
   provider: "do";