From e6a76187a28216825d535f6eaf74845c84e5fc80 Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Wed, 22 Oct 2025 03:35:33 -0400
Subject: [PATCH] improve UI & greptile review fixes

---
 .../components/GatewayCliDeploymentMethod.tsx          | 10 +++++-----
 .../components/GatewayDeploymentMethodSelect.tsx       | 10 ++++------
 .../NetworkingPage/components/RelayTab/RelayTab.tsx    |  2 +-
 .../RelayTab/components/RelayCliDeploymentMethod.tsx   | 10 +++++-----
 .../components/RelayDeploymentMethodSelect.tsx         | 10 ++++------
 5 files changed, 19 insertions(+), 23 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 279dc61c9..a98853bbb 100644
--- a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayCliDeploymentMethod.tsx
+++ b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayCliDeploymentMethod.tsx
@@ -125,25 +125,25 @@ export const GatewayCliDeploymentMethod = () => {
           accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
         });
         createNotification({
-          text: "Automatically enabled token authentication for this identity.",
-          type: "info"
+          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 (autogenerated)"
+        name: `gateway token for ${name} (autogenerated)`
       });
       setIdentityToken(token.accessToken);
       createNotification({
-        text: "Automatically generated a token for this identity.",
+        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 identity",
+        text: "Failed to generate token for the selected identity",
         type: "error"
       });
       setIdentityToken("");
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 0a1fd5e12..099c7d791 100644
--- a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayDeploymentMethodSelect.tsx
+++ b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayDeploymentMethodSelect.tsx
@@ -27,21 +27,19 @@ export const GatewayDeploymentMethodSelect = ({ onSelect }: Props) => {
   return (
     <div className="grid h-118 grid-cols-4 content-start gap-2">
       {deploymentOptions.map((option) => {
-        const { image, name } = option;
+        const { image, name, method } = option;
 
         return (
           <button
+            key={method}
             type="button"
-            onClick={() => handleResourceSelect(option.method)}
+            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}`}
-                style={{
-                  width: "50px"
-                }}
-                className="mt-auto"
+                className="mt-auto w-12"
                 alt={`${name} logo`}
               />
             </div>
diff --git a/frontend/src/pages/organization/NetworkingPage/components/RelayTab/RelayTab.tsx b/frontend/src/pages/organization/NetworkingPage/components/RelayTab/RelayTab.tsx
index 9ca3e1318..594c9a27c 100644
--- a/frontend/src/pages/organization/NetworkingPage/components/RelayTab/RelayTab.tsx
+++ b/frontend/src/pages/organization/NetworkingPage/components/RelayTab/RelayTab.tsx
@@ -94,7 +94,7 @@ export const RelayTab = withPermission(
           replace: true
         });
       }
-    }, [action]);
+    }, [action, handlePopUpOpen, navigate]);
 
     const deleteRelayById = useDeleteRelayById();
 
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 543d31bae..65c20bb19 100644
--- a/frontend/src/pages/organization/NetworkingPage/components/RelayTab/components/RelayCliDeploymentMethod.tsx
+++ b/frontend/src/pages/organization/NetworkingPage/components/RelayTab/components/RelayCliDeploymentMethod.tsx
@@ -104,25 +104,25 @@ export const RelayCliDeploymentMethod = () => {
           accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
         });
         createNotification({
-          text: "Automatically enabled token authentication for this identity.",
-          type: "info"
+          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 (autogenerated)"
+        name: `relay token for ${name} (autogenerated)`
       });
       setIdentityToken(token.accessToken);
       createNotification({
-        text: "Automatically generated a token for this identity.",
+        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 identity",
+        text: "Failed to generate token for the selected identity",
         type: "error"
       });
       setIdentityToken("");
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 cb21499e4..b4a7b7d58 100644
--- a/frontend/src/pages/organization/NetworkingPage/components/RelayTab/components/RelayDeploymentMethodSelect.tsx
+++ b/frontend/src/pages/organization/NetworkingPage/components/RelayTab/components/RelayDeploymentMethodSelect.tsx
@@ -27,21 +27,19 @@ export const RelayDeploymentMethodSelect = ({ onSelect }: Props) => {
   return (
     <div className="grid h-118 grid-cols-4 content-start gap-2">
       {deploymentOptions.map((option) => {
-        const { image, name } = option;
+        const { image, name, method } = option;
 
         return (
           <button
+            key={method}
             type="button"
-            onClick={() => handleResourceSelect(option.method)}
+            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}`}
-                style={{
-                  width: "50px"
-                }}
-                className="mt-auto"
+                className="mt-auto w-12"
                 alt={`${name} logo`}
               />
             </div>