(not working)Added registry request

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

@@ -13,6 +13,7 @@ export type ProviderSelectorProps = {
     icon: string;
     label: string;
   }[];
+  defaultOption?: string;
 };
 
 export const registryOptions = [
@@ -68,8 +69,12 @@ export const provisionerOptionsWithExternal = [
 const ProviderSelector: React.FC<ProviderSelectorProps> = ({
   selectProvider,
   options,
+  defaultOption,
 }) => {
   const [provider, setProvider] = useState(() => {
+    if (typeof defaultOption === "string") {
+      return defaultOption;
+    }
     if (options.find((o) => o.value === "skip")) {
       return "skip";
     }

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

@@ -112,7 +112,7 @@ const flow: FlowType = {
          * has a proper way of listing the registries and
          * manage them inside the step
          */
-        // go_back: "connect_registry",
+        go_back: "connect_registry",
       },
       execute: {
         on: {

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

@@ -1,7 +1,7 @@
 import Helper from "components/form-components/Helper";
 import SaveButton from "components/SaveButton";
 import TitleSection from "components/TitleSection";
-import React from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router";
 
 import styled from "styled-components";
@@ -13,16 +13,53 @@ import backArrow from "assets/back_arrow.png";
 import FormFlowWrapper from "./forms/FormFlow";
 import { OFState } from "../../state";
 import { useSnapshot } from "valtio";
+import api from "shared/api";
+import Loading from "components/Loading";
 
 const ConnectRegistry: React.FC<{}> = ({}) => {
   const snap = useSnapshot(OFState);
   const { step } = useParams<any>();
+  const [connectedRegistries, setConnectedRegistries] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
 
   const currentProvider = snap.StateHandler.connected_registry?.provider;
 
   const enableGoBack =
     snap.StepHandler.canGoBack && !snap.StepHandler.isSubFlow;
 
+  useEffect(() => {
+    let isSubscribed = true;
+    const projectId = snap.StateHandler?.project?.id;
+
+    if (typeof projectId === "number") {
+      api
+        .getProjectRegistries("<token>", {}, { id: projectId })
+        .then((res) => {
+          const registries = res?.data;
+          if (isSubscribed) {
+            if (Array.isArray(registries) && registries.length) {
+              setConnectedRegistries(registries);
+            }
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+          if (isSubscribed) {
+            setConnectedRegistries(null);
+          }
+        })
+        .finally(() => {
+          if (isSubscribed) {
+            setIsLoading(false);
+          }
+        });
+    }
+
+    return () => {
+      isSubscribed = false;
+    };
+  }, [snap.StateHandler?.project]);
+
   const handleGoBack = () => {
     OFState.actions.nextStep("go_back");
   };
@@ -35,6 +72,22 @@ const ConnectRegistry: React.FC<{}> = ({}) => {
     provider !== "skip" && OFState.actions.nextStep("continue", provider);
   };
 
+  const selectorOptions = useMemo(() => {
+    const options = [...registryOptions];
+    if (Array.isArray(connectedRegistries) && connectedRegistries.length) {
+      const newOptions = options.filter((o) => o.value !== "skip");
+      return [
+        {
+          value: "use_current",
+          label: "Continue with current",
+          icon: "",
+        },
+        ...newOptions,
+      ];
+    }
+    return options;
+  }, [connectedRegistries]);
+
   return (
     <Div>
       {enableGoBack && (
@@ -61,18 +114,36 @@ const ConnectRegistry: React.FC<{}> = ({}) => {
           ? "Link to an existing Docker registry. Don't worry if you don't know what this is."
           : "Link to an existing Docker registry or continue."}
       </Helper>
-
-      {step ? (
+      {isLoading && <Loading />}
+      {!isLoading &&
+        connectedRegistries?.length &&
+        connectedRegistries.map((registry: any) => {
+          return (
+            <>
+              <div>
+                {registry?.name}
+                {registry?.service}
+                {registry?.url}
+              </div>
+            </>
+          );
+        })}
+      {!isLoading && step ? (
         <FormFlowWrapper currentStep={step} />
       ) : (
         <>
           <ProviderSelector
+            defaultOption={
+              Array.isArray(connectedRegistries) && connectedRegistries.length
+                ? "use_current"
+                : "skip"
+            }
             selectProvider={(provider) => {
               if (provider !== "external") {
                 handleSelectProvider(provider);
               }
             }}
-            options={registryOptions}
+            options={selectorOptions}
           />
           <NextStep
             text="Continue"