diff --git a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayCliDeploymentMethod.tsx b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayCliDeploymentMethod.tsx index ae44cdd1e..17818f307 100644 --- a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayCliDeploymentMethod.tsx +++ b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayCliDeploymentMethod.tsx @@ -80,7 +80,7 @@ export const GatewayCliDeploymentMethod = () => { const [relay, setRelay] = useState(null); + }>({ id: "_auto", name: "Auto Select Relay" }); const [identity, setIdentity] = useState { }; 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" diff --git a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/RelayOption.tsx b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/RelayOption.tsx index 90c9a7ebd..4f5426a63 100644 --- a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/RelayOption.tsx +++ b/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 ( @@ -18,6 +19,11 @@ export const RelayOption = ({ Deploy New Relay + ) : isAutoOption ? ( +
+ + Auto Select Relay +
) : ( <>

{children}