improve UI & greptile review fixes

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.",
+          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: "info"
+          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("");

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={{
+                className="mt-auto w-12"
-                  width: "50px"
-                }}
-                className="mt-auto"
                 alt={`${name} logo`}
               />
             </div>

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();
 

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.",
+          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: "info"
+          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("");

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={{
+                className="mt-auto w-12"
-                  width: "50px"
-                }}
-                className="mt-auto"
                 alt={`${name} logo`}
               />
             </div>