Merge branch 'main' into feature/north-flank-app-connection

2026-10-20 17:00:56 +00:00 · 2025-10-24 18:07:23 -03:00
parent f159007449 9abf2e1e60
commit 72749955c2
100 changed files with 4611 additions and 660 deletions
@@ -1,10 +1,10 @@
 import { useEffect } from "react";
-import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRightFromSquare, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useQueryClient } from "@tanstack/react-query";

 import { OrgPermissionCan } from "@app/components/permissions";
-import { Button } from "@app/components/v2";
+import { Button, Tooltip } from "@app/components/v2";
 import {
  OrgPermissionBillingActions,
  OrgPermissionSubjects,
@@ -27,6 +27,9 @@ export const PreviewSection = () => {
  const { subscription } = useSubscription(true);
  const queryClient = useQueryClient();
  const { data, isPending } = useGetOrgPlanBillingInfo(currentOrg?.id ?? "");
+
+  const totalAmount = data?.amount ? data.amount * (data.users + data.identities) : 0;
+
  const getOrgTrialUrl = useGetOrgTrialUrl();
  const createCustomerPortalSession = useCreateCustomerPortalSession();

@@ -190,14 +193,28 @@ export const PreviewSection = () => {
              </OrgPermissionCan>
            )}
          </div>
-          <div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-            <p className="mb-2 text-gray-400">Price</p>
-            <p className="mb-8 text-2xl font-medium text-mineshaft-50">
-              {subscription.status === "trialing"
-                ? "$0.00 / month"
-                : `${formatAmount(data.amount)} / ${data.interval}`}
-            </p>
-          </div>
+          {subscription.slug !== "enterprise" ? (
+            <div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+              <p className="mb-2 text-gray-400">Price</p>
+              <p className="mb-8 text-2xl font-medium text-mineshaft-50">
+                {subscription.status === "trialing" ? (
+                  "$0.00 / month"
+                ) : (
+                  <>
+                    {formatAmount(totalAmount)} / {data.interval}
+                    {(subscription.slug === "pro" || subscription.slug === "pro-annual") && (
+                      <Tooltip
+                        content={`Total price is based on the number of users and machine identities at ${formatAmount(data.amount)} each. You have ${data.users} ${data.users > 1 ? "users" : "user"} and ${data.identities} ${data.identities > 1 ? "machine identities" : "machine identity"}.`}
+                        className="max-w-lg"
+                      >
+                        <FontAwesomeIcon icon={faInfoCircle} className="ml-2" size="xs" />
+                      </Tooltip>
+                    )}
+                  </>
+                )}
+              </p>
+            </div>
+          ) : null}
          <div className="flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
            <p className="mb-2 text-gray-400">Subscription renews on</p>
            <p className="mb-8 text-2xl font-medium text-mineshaft-50">
@@ -8,6 +8,7 @@ import {
  faEllipsisV,
  faInfoCircle,
  faMagnifyingGlass,
+  faPlus,
  faSearch,
  faTrash
 } from "@fortawesome/free-solid-svg-icons";
@@ -17,6 +18,7 @@ import { useQuery } from "@tanstack/react-query";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
+  Button,
  DeleteActionModal,
  DropdownMenu,
  DropdownMenuContent,
@@ -47,6 +49,7 @@ import { gatewaysQueryKeys, useDeleteGatewayById } from "@app/hooks/api/gateways
 import { useDeleteGatewayV2ById } from "@app/hooks/api/gateways-v2";

 import { EditGatewayDetailsModal } from "./components/EditGatewayDetailsModal";
+import { GatewayDeployModal } from "./components/GatewayDeployModal";

 const GatewayHealthStatus = ({ heartbeat }: { heartbeat?: string }) => {
  const heartbeatDate = heartbeat ? new Date(heartbeat) : null;
@@ -73,6 +76,7 @@ export const GatewayTab = withPermission(
    const { data: gateways, isPending: isGatewaysLoading } = useQuery(gatewaysQueryKeys.list());

    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+      "deployGateway",
      "deleteGateway",
      "editDetails"
    ] as const);
@@ -101,8 +105,8 @@ export const GatewayTab = withPermission(

    return (
      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-        <div className="mb-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
+        <div className="mb-2 flex items-center justify-between">
+          <div className="flex grow items-center gap-2">
            <h3 className="text-lg font-medium text-mineshaft-100">Gateways</h3>
            <a
              href="https://infisical.com/docs/documentation/platform/gateways/overview"
@@ -118,6 +122,14 @@ export const GatewayTab = withPermission(
                />
              </div>
            </a>
+            <div className="flex grow" />
+            <Button
+              variant="outline_bg"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handlePopUpOpen("deployGateway")}
+            >
+              Deploy Gateway
+            </Button>
          </div>
        </div>
        <p className="mb-4 text-sm text-mineshaft-400">
@@ -257,6 +269,10 @@ export const GatewayTab = withPermission(
              deleteKey="confirm"
              onDeleteApproved={() => handleDeleteGateway()}
            />
+            <GatewayDeployModal
+              isOpen={popUp.deployGateway.isOpen}
+              onOpenChange={(isOpen) => handlePopUpToggle("deployGateway", isOpen)}
+            />
          </TableContainer>
        </div>
      </div>
@@ -0,0 +1,387 @@
+import { useMemo, useState } from "react";
+import { SingleValue } from "react-select";
+import { faCopy, faQuestionCircle, faUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  Checkbox,
+  FilterableSelect,
+  FormLabel,
+  IconButton,
+  Input,
+  ModalClose,
+  Tooltip
+} from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import {
+  OrgPermissionIdentityActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useOrgPermission
+} from "@app/context";
+import {
+  useAddIdentityTokenAuth,
+  useCreateTokenIdentityTokenAuth,
+  useGetIdentityMembershipOrgs,
+  useGetIdentityTokenAuth,
+  useGetRelays
+} from "@app/hooks/api";
+import { slugSchema } from "@app/lib/schemas";
+
+import { RelayOption } from "./RelayOption";
+
+const baseFormSchema = z.object({
+  name: slugSchema({ field: "name" }),
+  instanceDomain: z.string().url("Must be a valid URL").or(z.literal("")),
+  relay: z
+    .object(
+      {
+        id: z.string(),
+        name: z.string()
+      },
+      { required_error: "Relay is required" }
+    )
+    .nullable()
+    .refine((val) => val !== null, { message: "Relay is required" })
+});
+
+const formSchemaWithIdentity = baseFormSchema.extend({
+  identity: z
+    .object(
+      {
+        id: z.string(),
+        name: z.string()
+      },
+      { required_error: "Identity is required" }
+    )
+    .nullable()
+    .refine((val) => val !== null, { message: "Identity is required" })
+});
+
+const formSchemaWithToken = baseFormSchema.extend({
+  identityToken: z.string().min(1, "Token is required")
+});
+
+export const GatewayCliDeploymentMethod = () => {
+  const { protocol, hostname, port } = window.location;
+  const portSuffix = port && port !== "80" ? `:${port}` : "";
+  const siteURL = `${protocol}//${hostname}${portSuffix}`;
+
+  const navigate = useNavigate({
+    from: ROUTE_PATHS.Organization.NetworkingPage.path
+  });
+
+  const [autogenerateToken, setAutogenerateToken] = useState(true);
+  const [step, setStep] = useState<"form" | "command">("form");
+  const [name, setName] = useState("");
+  const [instanceDomain, setInstanceDomain] = useState(siteURL);
+  const [relay, setRelay] = useState<null | {
+    id: string;
+    name: string;
+  }>(null);
+  const [identity, setIdentity] = useState<null | {
+    id: string;
+    name: string;
+  }>(null);
+  const [identityToken, setIdentityToken] = useState("");
+  const [formErrors, setFormErrors] = useState<z.ZodIssue[]>([]);
+
+  const errors = useMemo(() => {
+    const errorMap: Record<string, string | undefined> = {};
+    formErrors.forEach((issue) => {
+      if (issue.path.length > 0) {
+        errorMap[String(issue.path[0])] = issue.message;
+      }
+    });
+    return errorMap;
+  }, [formErrors]);
+
+  const { data: relays, isPending: isRelaysLoading } = useGetRelays();
+
+  const { currentOrg } = useOrganization();
+  const organizationId = currentOrg?.id || "";
+
+  const { permission } = useOrgPermission();
+  const canCreateToken = permission.can(
+    OrgPermissionIdentityActions.CreateToken,
+    OrgPermissionSubjects.Identity
+  );
+
+  const { data: identityMembershipOrgsData, isPending: isIdentitiesLoading } =
+    useGetIdentityMembershipOrgs({
+      organizationId,
+      limit: 20000
+    });
+  const identityMembershipOrgs = identityMembershipOrgsData?.identityMemberships || [];
+
+  const { mutateAsync: createToken, isPending: isCreatingToken } =
+    useCreateTokenIdentityTokenAuth();
+  const { mutateAsync: addIdentityTokenAuth, isPending: isAddingTokenAuth } =
+    useAddIdentityTokenAuth();
+  const { refetch } = useGetIdentityTokenAuth(identity?.id ?? "");
+
+  const handleGenerateCommand = async () => {
+    setFormErrors([]);
+
+    if (canCreateToken && autogenerateToken) {
+      const validation = formSchemaWithIdentity.safeParse({
+        name,
+        relay,
+        identity,
+        instanceDomain
+      });
+      if (!validation.success) {
+        setFormErrors(validation.error.issues);
+        return;
+      }
+
+      const validatedIdentity = validation.data.identity;
+
+      try {
+        const { data: identityTokenAuth } = await refetch();
+        if (!identityTokenAuth) {
+          await addIdentityTokenAuth({
+            identityId: validatedIdentity.id,
+            organizationId,
+            accessTokenTTL: 2592000,
+            accessTokenMaxTTL: 2592000,
+            accessTokenNumUsesLimit: 0,
+            accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+          });
+          createNotification({
+            text: "Token authentication has been automatically enabled for the selected identity. By default, it is configured to allow all IP addresses with a default token TTL of 30 days. You can manage these settings in Access Control.",
+            type: "warning"
+          });
+        }
+
+        const token = await createToken({
+          identityId: validatedIdentity.id,
+          name: `gateway token for ${name} (autogenerated)`
+        });
+        setIdentityToken(token.accessToken);
+        createNotification({
+          text: "Automatically generated a token for the selected identity.",
+          type: "info"
+        });
+        setStep("command");
+      } catch (err) {
+        console.error(err);
+        createNotification({
+          text: "Failed to generate token for the selected identity",
+          type: "error"
+        });
+        setIdentityToken("");
+      }
+    } else {
+      const validation = formSchemaWithToken.safeParse({
+        name,
+        relay,
+        identityToken,
+        instanceDomain
+      });
+      if (!validation.success) {
+        setFormErrors(validation.error.issues);
+        return;
+      }
+      setStep("command");
+    }
+  };
+
+  const command = useMemo(() => {
+    const domainFlag = instanceDomain ? ` --domain=${instanceDomain}` : "";
+    return `infisical gateway start --name=${name} --relay=${
+      relay?.name || ""
+    }${domainFlag} --token=${identityToken}`;
+  }, [name, relay, identityToken, instanceDomain]);
+
+  if (step === "command") {
+    return (
+      <>
+        <FormLabel label="CLI Command" />
+        <div className="flex gap-2">
+          <Input value={command} isDisabled />
+          <IconButton
+            ariaLabel="copy"
+            variant="outline_bg"
+            colorSchema="secondary"
+            onClick={() => {
+              navigator.clipboard.writeText(command);
+              createNotification({
+                text: "Command copied to clipboard",
+                type: "info"
+              });
+            }}
+            className="w-10"
+          >
+            <FontAwesomeIcon icon={faCopy} />
+          </IconButton>
+        </div>
+        <a
+          href="https://infisical.com/docs/cli/overview"
+          target="_blank"
+          className="mt-2 flex h-4 w-fit items-center gap-2 border-b border-mineshaft-400 text-sm text-mineshaft-400 transition-colors duration-100 hover:border-yellow-400 hover:text-yellow-400"
+          rel="noreferrer"
+        >
+          <span>Install the Infisical CLI</span>
+          <FontAwesomeIcon icon={faUpRightFromSquare} className="size-3" />
+        </a>
+        <div className="mt-6 flex items-center">
+          <ModalClose asChild>
+            <Button className="mr-4" size="sm" colorSchema="secondary">
+              Done
+            </Button>
+          </ModalClose>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <FormLabel label="Name" tooltipText="The name for your gateway." />
+      <Input
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder="Enter gateway name..."
+        isError={Boolean(errors.name)}
+      />
+      {errors.name && <p className="mt-1 text-sm text-red">{errors.name}</p>}
+
+      <FormLabel label="Relay" tooltipText="The relay to use with your gateway." className="mt-4" />
+      <FilterableSelect
+        value={relay}
+        onChange={(newValue) => {
+          if ((newValue as SingleValue<{ id: string }>)?.id === "_create") {
+            navigate({
+              search: (prev) => ({ ...prev, selectedTab: "relays", action: "deploy-relay" })
+            });
+            return;
+          }
+
+          setRelay(newValue as SingleValue<{ id: string; name: string }>);
+        }}
+        isLoading={isRelaysLoading}
+        options={[
+          {
+            id: "_create",
+            name: "Deploy New Relay"
+          },
+          ...(relays || [])
+        ]}
+        placeholder="Select relay..."
+        getOptionLabel={(option) => option.name}
+        getOptionValue={(option) => option.id}
+        components={{ Option: RelayOption }}
+      />
+      {errors.relay && <p className="mt-1 text-sm text-red">{errors.relay}</p>}
+
+      <FormLabel
+        label="Infisical Instance Host Address"
+        tooltipText="The host address of the infisical instance that's accessible by the gateway."
+        className="mt-4"
+      />
+      <Input
+        value={instanceDomain}
+        onChange={(e) => setInstanceDomain(e.target.value)}
+        placeholder="https://app.infisical.com"
+        isError={Boolean(errors.instanceDomain)}
+      />
+      {errors.instanceDomain && <p className="mt-1 text-sm text-red">{errors.instanceDomain}</p>}
+
+      {canCreateToken && autogenerateToken ? (
+        <>
+          <FormLabel
+            label="Identity"
+            tooltipText="The identity that your gateway will use for authentication."
+            className="mt-4"
+          />
+          <FilterableSelect
+            value={identity}
+            onChange={(e) =>
+              setIdentity(
+                e as SingleValue<{
+                  id: string;
+                  name: string;
+                }>
+              )
+            }
+            isLoading={isIdentitiesLoading}
+            placeholder="Select identity..."
+            options={identityMembershipOrgs.map((membership) => membership.identity)}
+            getOptionValue={(option) => option.id}
+            getOptionLabel={(option) => option.name}
+          />
+          {errors.identity && <p className="mt-1 text-sm text-red">{errors.identity}</p>}
+        </>
+      ) : (
+        <>
+          <FormLabel
+            label="Identity Token"
+            tooltipText="The identity token that your relay will use for authentication."
+            className="mt-4"
+          />
+          <Input
+            value={identityToken}
+            onChange={(e) => setIdentityToken(e.target.value)}
+            placeholder="Enter identity token..."
+            isError={Boolean(errors.identityToken)}
+          />
+          {errors.identityToken && <p className="mt-1 text-sm text-red">{errors.identityToken}</p>}
+        </>
+      )}
+
+      {canCreateToken && (
+        <div className="mt-2">
+          <Checkbox
+            isChecked={autogenerateToken}
+            onCheckedChange={(e) => {
+              setAutogenerateToken(Boolean(e));
+            }}
+            id="autogenerate-token"
+            className="mr-2"
+          >
+            <div className="flex items-center">
+              <span>Automatically enable token auth and generate a token for identity</span>
+              <Tooltip
+                className="max-w-md"
+                content={
+                  <>
+                    Token authentication will be automatically enabled for the selected identity if
+                    it isn&apos;t already configured. By default, it will be configured to allow all
+                    IP addresses with a token TTL of 30 days. You can manage these settings in
+                    Access Control.
+                    <br />
+                    <br />A token will automatically be generated to be used with the CLI command.
+                  </>
+                }
+              >
+                <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="mt-0.5 ml-1" />
+              </Tooltip>
+            </div>
+          </Checkbox>
+        </div>
+      )}
+
+      <div className="mt-6 flex items-center">
+        <Button
+          className="mr-4"
+          size="sm"
+          colorSchema="secondary"
+          onClick={handleGenerateCommand}
+          isLoading={isCreatingToken || isAddingTokenAuth}
+        >
+          Continue
+        </Button>
+        <ModalClose asChild>
+          <Button colorSchema="secondary" variant="plain">
+            Cancel
+          </Button>
+        </ModalClose>
+      </div>
+    </>
+  );
+};
@@ -0,0 +1,45 @@
+import { useState } from "react";
+
+import { Modal, ModalContent } from "@app/components/v2";
+import { GatewayDeploymentMethodSelect } from "@app/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayDeploymentMethodSelect";
+
+import { GatewayCliDeploymentMethod } from "./GatewayCliDeploymentMethod";
+
+type Props = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+};
+
+export const GatewayDeploymentInfoMap = {
+  cli: { name: "CLI", image: "SSH.png", component: GatewayCliDeploymentMethod }
+} as const;
+
+export type GatewayDeploymentMethod = keyof typeof GatewayDeploymentInfoMap;
+
+const Content = () => {
+  const [selectedMethod, setSelectedMethod] = useState<null | GatewayDeploymentMethod>(null);
+
+  if (selectedMethod) {
+    const ComponentToRender = GatewayDeploymentInfoMap[selectedMethod]?.component;
+    if (ComponentToRender) {
+      return <ComponentToRender />;
+    }
+  }
+
+  return <GatewayDeploymentMethodSelect onSelect={setSelectedMethod} />;
+};
+
+export const GatewayDeployModal = ({ isOpen, onOpenChange }: Props) => {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent
+        className="max-w-2xl"
+        title="Deploy Gateway"
+        subTitle="Select a deployment method to use for the gateway."
+        bodyClassName="overflow-visible"
+      >
+        <Content />
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -0,0 +1,54 @@
+import { useMemo } from "react";
+
+import {
+  GatewayDeploymentInfoMap,
+  GatewayDeploymentMethod
+} from "@app/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayDeployModal";
+
+type Props = {
+  onSelect: (method: GatewayDeploymentMethod) => void;
+};
+
+export const GatewayDeploymentMethodSelect = ({ onSelect }: Props) => {
+  const deploymentOptions = useMemo(
+    () =>
+      (Object.keys(GatewayDeploymentInfoMap) as GatewayDeploymentMethod[]).map((method) => ({
+        method,
+        name: GatewayDeploymentInfoMap[method].name,
+        image: GatewayDeploymentInfoMap[method].image
+      })),
+    []
+  );
+
+  const handleResourceSelect = (method: GatewayDeploymentMethod) => {
+    onSelect(method);
+  };
+
+  return (
+    <div className="grid h-fit grid-cols-4 content-start gap-2">
+      {deploymentOptions.map((option) => {
+        const { image, name, method } = option;
+
+        return (
+          <button
+            key={method}
+            type="button"
+            onClick={() => handleResourceSelect(method)}
+            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+          >
+            <div className="relative">
+              <img
+                src={`/images/integrations/${image}`}
+                className="mt-auto w-12"
+                alt={`${name} logo`}
+              />
+            </div>
+            <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+              {name}
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
@@ -0,0 +1,32 @@
+import { components, OptionProps } from "react-select";
+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export const RelayOption = ({
+  isSelected,
+  children,
+  ...props
+}: OptionProps<{ id: string; name: string }>) => {
+  const isCreateOption = props.data.id === "_create";
+
+  return (
+    <components.Option isSelected={isSelected} {...props}>
+      <div className="flex flex-row items-center justify-between">
+        {isCreateOption ? (
+          <div className="flex items-center gap-x-1 text-mineshaft-400">
+            <FontAwesomeIcon icon={faPlus} size="sm" />
+            <span className="mr-auto">Deploy New Relay</span>
+          </div>
+        ) : (
+          <>
+            <p className="truncate">{children}</p>
+            {isSelected && (
+              <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
+            )}
+          </>
+        )}
+      </div>
+    </components.Option>
+  );
+};
@@ -1,15 +1,20 @@
-import { useState } from "react";
-import { useSearch } from "@tanstack/react-router";
+import { useNavigate, useSearch } from "@tanstack/react-router";

 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
 import { useOrganization } from "@app/context";

 import { GatewayTab } from "../GatewayTab/GatewayTab";
 import { RelayTab } from "../RelayTab/RelayTab";

 export const NetworkingTabGroup = () => {
-  const search = useSearch({
-    from: "/_authenticate/_inject-org-details/_org-layout/organization/networking/"
+  const navigate = useNavigate({
+    from: ROUTE_PATHS.Organization.NetworkingPage.path
+  });
+  const selectedTab = useSearch({
+    from: ROUTE_PATHS.Organization.NetworkingPage.id,
+    select: (el) => el.selectedTab,
+    structuralSharing: true
  });

  const tabs = [
@@ -17,12 +22,16 @@ export const NetworkingTabGroup = () => {
    { name: "Relays", key: "relays", component: RelayTab }
  ];

-  const [selectedTab, setSelectedTab] = useState(search.selectedTab || tabs[0].key);
+  const handleTabChange = (tab: string) => {
+    navigate({
+      search: { selectedTab: tab }
+    });
+  };

  const { isSubOrganization } = useOrganization();

  return (
-    <Tabs orientation="vertical" value={selectedTab} onValueChange={setSelectedTab}>
+    <Tabs orientation="vertical" value={selectedTab} onValueChange={handleTabChange}>
      <TabList>
        {tabs.map((tab) => (
          <Tab variant={isSubOrganization ? "namespace" : "org"} value={tab.key} key={tab.key}>
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
  faArrowUpRightFromSquare,
  faBookOpen,
@@ -7,15 +7,18 @@ import {
  faEllipsisV,
  faInfoCircle,
  faMagnifyingGlass,
+  faPlus,
  faSearch,
  faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate, useSearch } from "@tanstack/react-router";
 import { formatRelative } from "date-fns";

 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
+  Button,
  DeleteActionModal,
  DropdownMenu,
  DropdownMenuContent,
@@ -34,6 +37,7 @@ import {
  Tooltip,
  Tr
 } from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
 import {
  OrgPermissionSubjects,
  OrgRelayPermissionActions
@@ -42,6 +46,8 @@ import { withPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks";
 import { useDeleteRelayById, useGetRelays } from "@app/hooks/api/relays";

+import { RelayDeployModal } from "./components/RelayDeployModal";
+
 const RelayHealthStatus = ({ heartbeat }: { heartbeat?: string }) => {
  const heartbeatDate = heartbeat ? new Date(heartbeat) : null;
  const now = new Date();
@@ -66,7 +72,29 @@ export const RelayTab = withPermission(
    const [search, setSearch] = useState("");
    const { data: relays, isPending: isRelaysLoading } = useGetRelays();

-    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["deleteRelay"] as const);
+    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+      "deleteRelay",
+      "deployRelay"
+    ] as const);
+
+    const action = useSearch({
+      from: ROUTE_PATHS.Organization.NetworkingPage.id,
+      select: (s) => s.action
+    });
+
+    const navigate = useNavigate({
+      from: ROUTE_PATHS.Organization.NetworkingPage.path
+    });
+
+    useEffect(() => {
+      if (action === "deploy-relay") {
+        handlePopUpOpen("deployRelay");
+        navigate({
+          search: (prev) => ({ ...prev, action: undefined }),
+          replace: true
+        });
+      }
+    }, [action, handlePopUpOpen, navigate]);

    const deleteRelayById = useDeleteRelayById();

@@ -87,8 +115,8 @@ export const RelayTab = withPermission(

    return (
      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-        <div className="mb-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
+        <div className="mb-2 flex items-center justify-between">
+          <div className="flex grow items-center gap-2">
            <h3 className="text-lg font-medium text-mineshaft-100">Relays</h3>
            <a
              href="https://infisical.com/docs/documentation/platform/gateways/relay-deployment"
@@ -104,6 +132,14 @@ export const RelayTab = withPermission(
                />
              </div>
            </a>
+            <div className="flex grow" />
+            <Button
+              variant="outline_bg"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handlePopUpOpen("deployRelay")}
+            >
+              Deploy Relay
+            </Button>
          </div>
        </div>
        <p className="mb-4 text-sm text-mineshaft-400">
@@ -222,6 +258,10 @@ export const RelayTab = withPermission(
              deleteKey="confirm"
              onDeleteApproved={() => handleDeleteRelay()}
            />
+            <RelayDeployModal
+              isOpen={popUp.deployRelay.isOpen}
+              onOpenChange={(isOpen) => handlePopUpToggle("deployRelay", isOpen)}
+            />
          </TableContainer>
        </div>
      </div>
@@ -0,0 +1,352 @@
+import { useMemo, useState } from "react";
+import { SingleValue } from "react-select";
+import { faCopy, faQuestionCircle, faUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  Checkbox,
+  FilterableSelect,
+  FormLabel,
+  IconButton,
+  Input,
+  ModalClose,
+  Tooltip
+} from "@app/components/v2";
+import {
+  OrgPermissionIdentityActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useOrgPermission
+} from "@app/context";
+import {
+  useAddIdentityTokenAuth,
+  useCreateTokenIdentityTokenAuth,
+  useGetIdentityMembershipOrgs,
+  useGetIdentityTokenAuth
+} from "@app/hooks/api";
+import { slugSchema } from "@app/lib/schemas";
+
+const baseFormSchema = z.object({
+  name: slugSchema({ field: "name" }),
+  host: z.string().min(1, "Host is required"),
+  instanceDomain: z.string().url("Must be a valid URL").or(z.literal(""))
+});
+
+const formSchemaWithIdentity = baseFormSchema.extend({
+  identity: z
+    .object(
+      {
+        id: z.string(),
+        name: z.string()
+      },
+      { required_error: "Identity is required" }
+    )
+    .nullable()
+    .refine((val) => val !== null, { message: "Identity is required" })
+});
+
+const formSchemaWithToken = baseFormSchema.extend({
+  identityToken: z.string().min(1, "Token is required")
+});
+
+export const RelayCliDeploymentMethod = () => {
+  const { protocol, hostname, port } = window.location;
+  const portSuffix = port && port !== "80" ? `:${port}` : "";
+  const siteURL = `${protocol}//${hostname}${portSuffix}`;
+
+  const [autogenerateToken, setAutogenerateToken] = useState(true);
+  const [step, setStep] = useState<"form" | "command">("form");
+  const [name, setName] = useState("");
+  const [host, setHost] = useState("");
+
+  const [instanceDomain, setInstanceDomain] = useState(siteURL);
+  const [identity, setIdentity] = useState<null | {
+    id: string;
+    name: string;
+  }>(null);
+  const [identityToken, setIdentityToken] = useState("");
+  const [formErrors, setFormErrors] = useState<z.ZodIssue[]>([]);
+
+  const errors = useMemo(() => {
+    const errorMap: Record<string, string | undefined> = {};
+    formErrors.forEach((issue) => {
+      if (issue.path.length > 0) {
+        errorMap[String(issue.path[0])] = issue.message;
+      }
+    });
+    return errorMap;
+  }, [formErrors]);
+
+  const { currentOrg } = useOrganization();
+  const organizationId = currentOrg?.id || "";
+
+  const { permission } = useOrgPermission();
+  const canCreateToken = permission.can(
+    OrgPermissionIdentityActions.CreateToken,
+    OrgPermissionSubjects.Identity
+  );
+
+  const { data: identityMembershipOrgsData, isPending: isIdentitiesLoading } =
+    useGetIdentityMembershipOrgs({
+      organizationId,
+      limit: 20000
+    });
+  const identityMembershipOrgs = identityMembershipOrgsData?.identityMemberships || [];
+
+  const { mutateAsync: createToken, isPending: isCreatingToken } =
+    useCreateTokenIdentityTokenAuth();
+  const { mutateAsync: addIdentityTokenAuth, isPending: isAddingTokenAuth } =
+    useAddIdentityTokenAuth();
+  const { refetch } = useGetIdentityTokenAuth(identity?.id ?? "");
+
+  const handleGenerateCommand = async () => {
+    setFormErrors([]);
+
+    if (canCreateToken && autogenerateToken) {
+      const validation = formSchemaWithIdentity.safeParse({ name, host, instanceDomain, identity });
+      if (!validation.success) {
+        setFormErrors(validation.error.issues);
+        return;
+      }
+
+      const validatedIdentity = validation.data.identity;
+
+      try {
+        const { data: identityTokenAuth } = await refetch();
+        if (!identityTokenAuth) {
+          await addIdentityTokenAuth({
+            identityId: validatedIdentity.id,
+            organizationId,
+            accessTokenTTL: 2592000,
+            accessTokenMaxTTL: 2592000,
+            accessTokenNumUsesLimit: 0,
+            accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+          });
+          createNotification({
+            text: "Token authentication has been automatically enabled for the selected identity. By default, it is configured to allow all IP addresses with a default token TTL of 30 days. You can manage these settings in Access Control.",
+            type: "warning"
+          });
+        }
+
+        const token = await createToken({
+          identityId: validatedIdentity.id,
+          name: `relay token for ${name} (autogenerated)`
+        });
+        setIdentityToken(token.accessToken);
+        createNotification({
+          text: "Automatically generated a token for the selected identity.",
+          type: "info"
+        });
+        setStep("command");
+      } catch (err) {
+        console.error(err);
+        createNotification({
+          text: "Failed to generate token for the selected identity",
+          type: "error"
+        });
+        setIdentityToken("");
+      }
+    } else {
+      const validation = formSchemaWithToken.safeParse({
+        name,
+        host,
+        instanceDomain,
+        identityToken
+      });
+      if (!validation.success) {
+        setFormErrors(validation.error.issues);
+        return;
+      }
+      setStep("command");
+    }
+  };
+
+  const handleIdentityChange = (
+    selectedIdentity: SingleValue<{
+      id: string;
+      name: string;
+    }>
+  ) => {
+    setIdentity(selectedIdentity);
+  };
+
+  const command = useMemo(() => {
+    const domainFlag = instanceDomain ? ` --domain=${instanceDomain}` : "";
+    return `infisical relay start --name=${name}${domainFlag} --host=${host} --token=${identityToken}`;
+  }, [name, instanceDomain, host, identityToken]);
+
+  if (step === "command") {
+    return (
+      <>
+        <FormLabel label="CLI Command" />
+        <div className="flex gap-2">
+          <Input value={command} isDisabled />
+          <IconButton
+            ariaLabel="copy"
+            variant="outline_bg"
+            colorSchema="secondary"
+            onClick={() => {
+              navigator.clipboard.writeText(command);
+              createNotification({
+                text: "Command copied to clipboard",
+                type: "info"
+              });
+            }}
+            className="w-10"
+          >
+            <FontAwesomeIcon icon={faCopy} />
+          </IconButton>
+        </div>
+        <a
+          href="https://infisical.com/docs/cli/overview"
+          target="_blank"
+          className="mt-2 flex h-4 w-fit items-center gap-2 border-b border-mineshaft-400 text-sm text-mineshaft-400 transition-colors duration-100 hover:border-yellow-400 hover:text-yellow-400"
+          rel="noreferrer"
+        >
+          <span>Install the Infisical CLI</span>
+          <FontAwesomeIcon icon={faUpRightFromSquare} className="size-3" />
+        </a>
+        <div className="mt-6 flex items-center">
+          <ModalClose asChild>
+            <Button className="mr-4" size="sm" colorSchema="secondary">
+              Done
+            </Button>
+          </ModalClose>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <FormLabel label="Name" tooltipText="The name for your relay." />
+      <Input
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder="Enter relay name..."
+        isError={Boolean(errors.name)}
+      />
+      {errors.name && <p className="mt-1 text-sm text-red">{errors.name}</p>}
+
+      <FormLabel
+        label="Host"
+        tooltipText="The public IP address of the system you're deploying the relay to."
+        className="mt-4"
+      />
+      <Input
+        value={host}
+        onChange={(e) => setHost(e.target.value)}
+        placeholder="0.0.0.0"
+        isError={Boolean(errors.host)}
+      />
+      {errors.host && <p className="mt-1 text-sm text-red">{errors.host}</p>}
+
+      <FormLabel
+        label="Infisical Instance Host Address"
+        tooltipText="The host address of the infisical instance that's accessible by the relay."
+        className="mt-4"
+      />
+      <Input
+        value={instanceDomain}
+        onChange={(e) => setInstanceDomain(e.target.value)}
+        placeholder="https://app.infisical.com"
+        isError={Boolean(errors.instanceDomain)}
+      />
+      {errors.instanceDomain && <p className="mt-1 text-sm text-red">{errors.instanceDomain}</p>}
+
+      {canCreateToken && autogenerateToken ? (
+        <>
+          <FormLabel
+            label="Identity"
+            tooltipText="The identity that your relay will use for authentication."
+            className="mt-4"
+          />
+          <FilterableSelect
+            value={identity}
+            onChange={(e) =>
+              handleIdentityChange(
+                e as SingleValue<{
+                  id: string;
+                  name: string;
+                }>
+              )
+            }
+            isLoading={isIdentitiesLoading}
+            placeholder="Select identity..."
+            options={identityMembershipOrgs.map((membership) => membership.identity)}
+            getOptionValue={(option) => option.id}
+            getOptionLabel={(option) => option.name}
+          />
+          {errors.identity && <p className="mt-1 text-sm text-red">{errors.identity}</p>}
+        </>
+      ) : (
+        <>
+          <FormLabel
+            label="Identity Token"
+            tooltipText="The identity token that your relay will use for authentication."
+            className="mt-4"
+          />
+          <Input
+            value={identityToken}
+            onChange={(e) => setIdentityToken(e.target.value)}
+            placeholder="Enter identity token..."
+            isError={Boolean(errors.identityToken)}
+          />
+          {errors.identityToken && <p className="mt-1 text-sm text-red">{errors.identityToken}</p>}
+        </>
+      )}
+
+      {canCreateToken && (
+        <div className="mt-2">
+          <Checkbox
+            isChecked={autogenerateToken}
+            onCheckedChange={(e) => {
+              setAutogenerateToken(Boolean(e));
+            }}
+            id="autogenerate-token"
+            className="mr-2"
+          >
+            <div className="flex items-center">
+              <span>Automatically enable token auth and generate a token for identity</span>
+              <Tooltip
+                className="max-w-md"
+                content={
+                  <>
+                    Token authentication will be automatically enabled for the selected identity if
+                    it isn&apos;t already configured. By default, it will be configured to allow all
+                    IP addresses with a token TTL of 30 days. You can manage these settings in
+                    Access Control.
+                    <br />
+                    <br />A token will automatically be generated to be used with the CLI command.
+                  </>
+                }
+              >
+                <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="mt-0.5 ml-1" />
+              </Tooltip>
+            </div>
+          </Checkbox>
+        </div>
+      )}
+
+      <div className="mt-6 flex items-center">
+        <Button
+          className="mr-4"
+          size="sm"
+          colorSchema="secondary"
+          onClick={handleGenerateCommand}
+          isLoading={isCreatingToken || isAddingTokenAuth}
+        >
+          Continue
+        </Button>
+        <ModalClose asChild>
+          <Button colorSchema="secondary" variant="plain">
+            Cancel
+          </Button>
+        </ModalClose>
+      </div>
+    </>
+  );
+};
@@ -0,0 +1,45 @@
+import { useState } from "react";
+
+import { Modal, ModalContent } from "@app/components/v2";
+import { RelayDeploymentMethodSelect } from "@app/pages/organization/NetworkingPage/components/RelayTab/components/RelayDeploymentMethodSelect";
+
+import { RelayCliDeploymentMethod } from "./RelayCliDeploymentMethod";
+
+type Props = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+};
+
+export const RelayDeploymentInfoMap = {
+  cli: { name: "CLI", image: "SSH.png", component: RelayCliDeploymentMethod }
+} as const;
+
+export type RelayDeploymentMethod = keyof typeof RelayDeploymentInfoMap;
+
+const Content = () => {
+  const [selectedMethod, setSelectedMethod] = useState<null | RelayDeploymentMethod>(null);
+
+  if (selectedMethod) {
+    const ComponentToRender = RelayDeploymentInfoMap[selectedMethod]?.component;
+    if (ComponentToRender) {
+      return <ComponentToRender />;
+    }
+  }
+
+  return <RelayDeploymentMethodSelect onSelect={setSelectedMethod} />;
+};
+
+export const RelayDeployModal = ({ isOpen, onOpenChange }: Props) => {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent
+        className="max-w-2xl"
+        title="Deploy Relay"
+        subTitle="Select a deployment method to use for the relay."
+        bodyClassName="overflow-visible"
+      >
+        <Content />
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -0,0 +1,54 @@
+import { useMemo } from "react";
+
+import {
+  RelayDeploymentInfoMap,
+  RelayDeploymentMethod
+} from "@app/pages/organization/NetworkingPage/components/RelayTab/components/RelayDeployModal";
+
+type Props = {
+  onSelect: (method: RelayDeploymentMethod) => void;
+};
+
+export const RelayDeploymentMethodSelect = ({ onSelect }: Props) => {
+  const deploymentOptions = useMemo(
+    () =>
+      (Object.keys(RelayDeploymentInfoMap) as RelayDeploymentMethod[]).map((method) => ({
+        method,
+        name: RelayDeploymentInfoMap[method].name,
+        image: RelayDeploymentInfoMap[method].image
+      })),
+    []
+  );
+
+  const handleResourceSelect = (method: RelayDeploymentMethod) => {
+    onSelect(method);
+  };
+
+  return (
+    <div className="grid h-fit grid-cols-4 content-start gap-2">
+      {deploymentOptions.map((option) => {
+        const { image, name, method } = option;
+
+        return (
+          <button
+            key={method}
+            type="button"
+            onClick={() => handleResourceSelect(method)}
+            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+          >
+            <div className="relative">
+              <img
+                src={`/images/integrations/${image}`}
+                className="mt-auto w-12"
+                alt={`${name} logo`}
+              />
+            </div>
+            <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+              {name}
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
@@ -5,16 +5,17 @@ import { z } from "zod";
 import { NetworkingPage } from "./NetworkingPage";

 const NetworkingPageQueryParams = z.object({
-  selectedTab: z.string().catch("")
+  selectedTab: z.string().catch("gateways"),
+  action: z.string().optional()
 });

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/networking/"
+  "/_authenticate/_inject-org-details/_org-layout/organization/networking"
 )({
  component: NetworkingPage,
  validateSearch: zodValidator(NetworkingPageQueryParams),
  search: {
-    middlewares: [stripSearchParams({ selectedTab: "" })]
+    middlewares: [stripSearchParams({ selectedTab: "gateways" })]
  },
  context: () => ({
    breadcrumbs: [