From 4a7f4e101b46116c42f72c922bf4c3a2d5f449ec Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Wed, 22 Oct 2025 19:22:49 -0400
Subject: [PATCH] some review changes

---
 .../components/GatewayCliDeploymentMethod.tsx |  10 +-
 .../GatewayDeploymentMethodSelect.tsx         |   2 +-
 .../components/RelayCliDeploymentMethod.tsx   | 202 ++++++++++++------
 .../RelayDeploymentMethodSelect.tsx           |   2 +-
 4 files changed, 141 insertions(+), 75 deletions(-)

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 a98853bbb..87ca2deee 100644
--- a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayCliDeploymentMethod.tsx
+++ b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayCliDeploymentMethod.tsx
@@ -208,7 +208,7 @@ export const GatewayCliDeploymentMethod = () => {
         placeholder="Enter gateway name..."
         isError={Boolean(errors.name)}
       />
-      {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
+      {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
@@ -236,7 +236,7 @@ export const GatewayCliDeploymentMethod = () => {
         getOptionValue={(option) => option.id}
         components={{ Option: RelayOption }}
       />
-      {errors.relay && <p className="mt-1 text-sm text-red-500">{errors.relay}</p>}
+      {errors.relay && <p className="mt-1 text-sm text-red">{errors.relay}</p>}
 
       <FormLabel
         label="Instance Domain"
@@ -249,9 +249,7 @@ export const GatewayCliDeploymentMethod = () => {
         placeholder="https://app.infisical.com"
         isError={Boolean(errors.instanceDomain)}
       />
-      {errors.instanceDomain && (
-        <p className="mt-1 text-sm text-red-500">{errors.instanceDomain}</p>
-      )}
+      {errors.instanceDomain && <p className="mt-1 text-sm text-red">{errors.instanceDomain}</p>}
 
       <FormLabel
         label="Identity"
@@ -274,7 +272,7 @@ export const GatewayCliDeploymentMethod = () => {
         getOptionValue={(option) => option.id}
         getOptionLabel={(option) => option.name}
       />
-      {errors.identity && <p className="mt-1 text-sm text-red-500">{errors.identity}</p>}
+      {errors.identity && <p className="mt-1 text-sm text-red">{errors.identity}</p>}
 
       <div className="mt-6 flex items-center">
         <Button
diff --git a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayDeploymentMethodSelect.tsx b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayDeploymentMethodSelect.tsx
index 099c7d791..20a169c24 100644
--- a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayDeploymentMethodSelect.tsx
+++ b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayDeploymentMethodSelect.tsx
@@ -25,7 +25,7 @@ export const GatewayDeploymentMethodSelect = ({ onSelect }: Props) => {
   };
 
   return (
-    <div className="grid h-118 grid-cols-4 content-start gap-2">
+    <div className="grid h-fit grid-cols-4 content-start gap-2">
       {deploymentOptions.map((option) => {
         const { image, name, method } = option;
 
diff --git a/frontend/src/pages/organization/NetworkingPage/components/RelayTab/components/RelayCliDeploymentMethod.tsx b/frontend/src/pages/organization/NetworkingPage/components/RelayTab/components/RelayCliDeploymentMethod.tsx
index 65c20bb19..54ed4e87a 100644
--- a/frontend/src/pages/organization/NetworkingPage/components/RelayTab/components/RelayCliDeploymentMethod.tsx
+++ b/frontend/src/pages/organization/NetworkingPage/components/RelayTab/components/RelayCliDeploymentMethod.tsx
@@ -13,7 +13,13 @@ import {
   Input,
   ModalClose
 } from "@app/components/v2";
-import { useOrganization } from "@app/context";
+import {
+  OrgPermissionIdentityActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useOrgPermission
+} from "@app/context";
+
 import {
   useAddIdentityTokenAuth,
   useCreateTokenIdentityTokenAuth,
@@ -22,11 +28,13 @@ import {
 } from "@app/hooks/api";
 import { slugSchema } from "@app/lib/schemas";
 
-const formSchema = z.object({
+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(""))
+});
 
-  instanceDomain: z.string().url("Must be a valid URL").or(z.literal("")),
+const formSchemaWithIdentity = baseFormSchema.extend({
   identity: z
     .object(
       {
@@ -39,11 +47,16 @@ const formSchema = z.object({
     .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 [addTokenManually, setAddTokenManually] = useState(false);
   const [step, setStep] = useState<"form" | "command">("form");
   const [name, setName] = useState("");
   const [host, setHost] = useState("");
@@ -69,6 +82,12 @@ export const RelayCliDeploymentMethod = () => {
   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,
@@ -84,48 +103,63 @@ export const RelayCliDeploymentMethod = () => {
 
   const handleGenerateCommand = async () => {
     setFormErrors([]);
-    const validation = formSchema.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"
-        });
+    if (canCreateToken) {
+      const validation = formSchemaWithIdentity.safeParse({ name, host, instanceDomain, identity });
+      if (!validation.success) {
+        setFormErrors(validation.error.issues);
+        return;
       }
 
-      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"
+      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");
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to generate token for the selected identity",
-        type: "error"
-      });
-      setIdentityToken("");
     }
   };
 
@@ -194,7 +228,7 @@ export const RelayCliDeploymentMethod = () => {
         placeholder="Enter relay name..."
         isError={Boolean(errors.name)}
       />
-      {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
+      {errors.name && <p className="mt-1 text-sm text-red">{errors.name}</p>}
 
       <FormLabel
         label="Host"
@@ -207,7 +241,7 @@ export const RelayCliDeploymentMethod = () => {
         placeholder="0.0.0.0"
         isError={Boolean(errors.host)}
       />
-      {errors.host && <p className="mt-1 text-sm text-red-500">{errors.host}</p>}
+      {errors.host && <p className="mt-1 text-sm text-red">{errors.host}</p>}
 
       <FormLabel
         label="Instance Domain"
@@ -220,32 +254,66 @@ export const RelayCliDeploymentMethod = () => {
         placeholder="https://app.infisical.com"
         isError={Boolean(errors.instanceDomain)}
       />
-      {errors.instanceDomain && (
-        <p className="mt-1 text-sm text-red-500">{errors.instanceDomain}</p>
-      )}
+      {errors.instanceDomain && <p className="mt-1 text-sm text-red">{errors.instanceDomain}</p>}
 
-      <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-500">{errors.identity}</p>}
+      {canCreateToken && !addTokenManually ? (
+        <>
+          <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}
+          />
+          <p className="mt-1 text-xs text-yellow">
+            Selecting an identity will automatically enable token auth and generate a token.{" "}
+            <button
+              onClick={() => setAddTokenManually(true)}
+              className="cursor-pointer underline transition-opacity hover:opacity-70"
+            >
+              Add token manually
+            </button>
+          </p>
+          {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)}
+          />
+          {canCreateToken && (
+            <button
+              onClick={() => setAddTokenManually(false)}
+              className="mt-1 cursor-pointer text-xs text-mineshaft-400 underline transition-opacity hover:opacity-70"
+            >
+              Autogenerate token for identity
+            </button>
+          )}
+          {errors.identityToken && <p className="mt-1 text-sm text-red">{errors.identityToken}</p>}
+        </>
+      )}
 
       <div className="mt-6 flex items-center">
         <Button
diff --git a/frontend/src/pages/organization/NetworkingPage/components/RelayTab/components/RelayDeploymentMethodSelect.tsx b/frontend/src/pages/organization/NetworkingPage/components/RelayTab/components/RelayDeploymentMethodSelect.tsx
index b4a7b7d58..cf7861a8b 100644
--- a/frontend/src/pages/organization/NetworkingPage/components/RelayTab/components/RelayDeploymentMethodSelect.tsx
+++ b/frontend/src/pages/organization/NetworkingPage/components/RelayTab/components/RelayDeploymentMethodSelect.tsx
@@ -25,7 +25,7 @@ export const RelayDeploymentMethodSelect = ({ onSelect }: Props) => {
   };
 
   return (
-    <div className="grid h-118 grid-cols-4 content-start gap-2">
+    <div className="grid h-fit grid-cols-4 content-start gap-2">
       {deploymentOptions.map((option) => {
         const { image, name, method } = option;