auto select relay for gateway quick setup

frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayCliDeploymentMethod.tsx

@@ -80,7 +80,7 @@ export const GatewayCliDeploymentMethod = () => {
   const [relay, setRelay] = useState<null | {
     id: string;
     name: string;
-  }>(null);
+  }>({ id: "_auto", name: "Auto Select Relay" });
   const [identity, setIdentity] = useState<null | {
     id: string;
     name: string;
@@ -183,9 +183,8 @@ export const GatewayCliDeploymentMethod = () => {
   };
 
   const command = useMemo(() => {
-    return `infisical gateway start --name=${name} --relay=${
-      relay?.name || ""
-    } --domain=${siteURL} --token=${identityToken}`;
+    const relayPart = relay?.id !== "_auto" ? ` --relay=${relay?.name || ""}` : "";
+    return `infisical gateway start --name=${name}${relayPart} --domain=${siteURL} --token=${identityToken}`;
   }, [name, relay, identityToken, siteURL]);
 
   if (step === "command") {
@@ -256,6 +255,10 @@ export const GatewayCliDeploymentMethod = () => {
         }}
         isLoading={isRelaysLoading}
         options={[
+          {
+            id: "_auto",
+            name: "Auto Select Relay"
+          },
           {
             id: "_create",
             name: "Deploy New Relay"

frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/RelayOption.tsx

@@ -1,6 +1,6 @@
 import { components, OptionProps } from "react-select";
 import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faPlus, faWandMagicSparkles } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export const RelayOption = ({
@@ -9,6 +9,7 @@ export const RelayOption = ({
   ...props
 }: OptionProps<{ id: string; name: string }>) => {
   const isCreateOption = props.data.id === "_create";
+  const isAutoOption = props.data.id === "_auto";
 
   return (
     <components.Option isSelected={isSelected} {...props}>
@@ -18,6 +19,11 @@ export const RelayOption = ({
             <FontAwesomeIcon icon={faPlus} size="sm" />
             <span className="mr-auto">Deploy New Relay</span>
           </div>
+        ) : isAutoOption ? (
+          <div className="flex items-center gap-x-1 text-mineshaft-400">
+            <FontAwesomeIcon icon={faWandMagicSparkles} size="sm" />
+            <span className="mr-auto">Auto Select Relay</span>
+          </div>
         ) : (
           <>
             <p className="truncate">{children}</p>