fix(portal): Dedicate 3/12 width for columns with IPs (#5001)

- Ensure IP address appears on newline always
- Dedicate 3/12 width for table columns that can contain IPv6 addresses
- Removes the `(IP)` parentheses because that makes it hard to
copy/paste the IP

Fixes #4992

elixir/apps/web/lib/web/live/actors/show.ex

@@ -326,7 +326,7 @@ defmodule Web.Actors.Show do
           <:col :let={token} label="TYPE" class="w-1/12">
             <%= token.type %>
           </:col>
-          <:col :let={token} :if={@actor.type != :service_account} label="IDENTITY" class="w-3/12">
+          <:col :let={token} :if={@actor.type != :service_account} label="IDENTITY" class="w-2/12">
             <.identity_identifier account={@account} identity={token.identity} />
           </:col>
           <:col :let={token} :if={@actor.type == :service_account} label="NAME" class="w-2/12">
@@ -335,18 +335,18 @@ defmodule Web.Actors.Show do
           <:col :let={token} label="CREATED">
             <.created_by account={@account} schema={token} />
           </:col>
-          <:col :let={token} label="LAST USED (IP)">
+          <:col :let={token} label="LAST USED" class="w-3/12">
             <p>
               <.relative_datetime datetime={token.last_seen_at} />
             </p>
             <p :if={not is_nil(token.last_seen_at)}>
-              <.last_seen schema={token} />
+              <code class="text-xs"><.last_seen schema={token} /></code>
             </p>
           </:col>
           <:col :let={token} label="EXPIRES">
             <.relative_datetime datetime={token.expires_at} />
           </:col>
-          <:col :let={token} label="LAST USED BY CLIENTS">
+          <:col :let={token} label="CLIENT">
             <.intersperse_blocks :if={token.type == :client}>
               <:separator>,&nbsp;</:separator>
 
@@ -420,10 +420,10 @@ defmodule Web.Actors.Show do
           ordered_by={@order_by_table_id["flows"]}
           metadata={@flows_metadata}
         >
-          <:col :let={flow} label="AUTHORIZED AT">
+          <:col :let={flow} label="AUTHORIZED">
             <.relative_datetime datetime={flow.inserted_at} />
           </:col>
-          <:col :let={flow} label="EXPIRES AT">
+          <:col :let={flow} label="EXPIRES">
             <.relative_datetime datetime={flow.expires_at} />
           </:col>
           <:col :let={flow} label="POLICY">
@@ -431,17 +431,19 @@ defmodule Web.Actors.Show do
               <Web.Policies.Components.policy_name policy={flow.policy} />
             </.link>
           </:col>
-          <:col :let={flow} label="CLIENT (IP)">
+          <:col :let={flow} label="CLIENT" class="w-3/12">
             <.link navigate={~p"/#{@account}/clients/#{flow.client_id}"} class={link_style()}>
               <%= flow.client.name %>
             </.link>
-            (<%= flow.client_remote_ip %>)
+            <br />
+            <code class="text-xs"><%= flow.client_remote_ip %></code>
           </:col>
-          <:col :let={flow} label="GATEWAY (IP)">
+          <:col :let={flow} label="GATEWAY" class="w-3/12">
             <.link navigate={~p"/#{@account}/gateways/#{flow.gateway_id}"} class={[link_style()]}>
               <%= flow.gateway.group.name %>-<%= flow.gateway.name %>
             </.link>
-            (<%= flow.gateway_remote_ip %>)
+            <br />
+            <code class="text-xs"><%= flow.gateway_remote_ip %></code>
           </:col>
           <:col :let={flow} :if={@flow_activities_enabled?} label="ACTIVITY">
             <.link navigate={~p"/#{@account}/flows/#{flow.id}"} class={[link_style()]}>

elixir/apps/web/lib/web/live/clients/show.ex

@@ -171,13 +171,13 @@ defmodule Web.Clients.Show do
           ordered_by={@order_by_table_id["flows"]}
           metadata={@flows_metadata}
         >
-          <:col :let={flow} label="AUTHORIZED AT">
+          <:col :let={flow} label="AUTHORIZED">
             <.relative_datetime datetime={flow.inserted_at} />
           </:col>
-          <:col :let={flow} label="EXPIRES AT">
+          <:col :let={flow} label="EXPIRES">
             <.relative_datetime datetime={flow.expires_at} />
           </:col>
-          <:col :let={flow} label="REMOTE IP">
+          <:col :let={flow} label="REMOTE IP" class="w-3/12">
             <%= flow.client_remote_ip %>
           </:col>
           <:col :let={flow} label="POLICY">
@@ -185,11 +185,12 @@ defmodule Web.Clients.Show do
               <.policy_name policy={flow.policy} />
             </.link>
           </:col>
-          <:col :let={flow} label="GATEWAY (IP)">
+          <:col :let={flow} label="GATEWAY" class="w-3/12">
             <.link navigate={~p"/#{@account}/gateways/#{flow.gateway_id}"} class={[link_style()]}>
               <%= flow.gateway.group.name %>-<%= flow.gateway.name %>
             </.link>
-            (<%= flow.gateway_remote_ip %>)
+            <br />
+            <code class="text-xs"><%= flow.gateway_remote_ip %></code>
           </:col>
           <:col :let={flow} :if={@flow_activities_enabled?} label="ACTIVITY">
             <.link navigate={~p"/#{@account}/flows/#{flow.id}"} class={[link_style()]}>

elixir/apps/web/lib/web/live/policies/show.ex

@@ -170,13 +170,13 @@ defmodule Web.Policies.Show do
           ordered_by={@order_by_table_id["flows"]}
           metadata={@flows_metadata}
         >
-          <:col :let={flow} label="AUTHORIZED AT">
+          <:col :let={flow} label="AUTHORIZED">
             <.relative_datetime datetime={flow.inserted_at} />
           </:col>
-          <:col :let={flow} label="EXPIRES AT">
+          <:col :let={flow} label="EXPIRES">
             <.relative_datetime datetime={flow.expires_at} />
           </:col>
-          <:col :let={flow} label="CLIENT, ACTOR (IP)">
+          <:col :let={flow} label="CLIENT, ACTOR" class="w-3/12">
             <.link navigate={~p"/#{@account}/clients/#{flow.client_id}"} class={link_style()}>
               <%= flow.client.name %>
             </.link>
@@ -184,13 +184,14 @@ defmodule Web.Policies.Show do
             <.link navigate={~p"/#{@account}/actors/#{flow.client.actor_id}"} class={link_style()}>
               <%= flow.client.actor.name %>
             </.link>
-            (<%= flow.client_remote_ip %>)
+            <%= flow.client_remote_ip %>
           </:col>
-          <:col :let={flow} label="GATEWAY (IP)">
+          <:col :let={flow} label="GATEWAY" class="w-3/12">
             <.link navigate={~p"/#{@account}/gateways/#{flow.gateway_id}"} class={link_style()}>
               <%= flow.gateway.group.name %>-<%= flow.gateway.name %>
             </.link>
-            (<%= flow.gateway_remote_ip %>)
+            <br />
+            <code class="text-xs"><%= flow.gateway_remote_ip %></code>
           </:col>
           <:col :let={flow} :if={@flow_activities_enabled?} label="ACTIVITY">
             <.link navigate={~p"/#{@account}/flows/#{flow.id}"} class={link_style()}>

elixir/apps/web/lib/web/live/resources/show.ex

@@ -268,10 +268,10 @@ defmodule Web.Resources.Show do
           ordered_by={@order_by_table_id["flows"]}
           metadata={@flows_metadata}
         >
-          <:col :let={flow} label="AUTHORIZED AT">
+          <:col :let={flow} label="AUTHORIZED">
             <.relative_datetime datetime={flow.inserted_at} />
           </:col>
-          <:col :let={flow} label="EXPIRES AT">
+          <:col :let={flow} label="EXPIRES">
             <.relative_datetime datetime={flow.expires_at} />
           </:col>
           <:col :let={flow} label="POLICY">
@@ -279,7 +279,7 @@ defmodule Web.Resources.Show do
               <.policy_name policy={flow.policy} />
             </.link>
           </:col>
-          <:col :let={flow} label="CLIENT, ACTOR (IP)">
+          <:col :let={flow} label="CLIENT, ACTOR" class="w-3/12">
             <.link navigate={~p"/#{@account}/clients/#{flow.client_id}"} class={[link_style()]}>
               <%= flow.client.name %>
             </.link>
@@ -287,13 +287,14 @@ defmodule Web.Resources.Show do
             <.link navigate={~p"/#{@account}/actors/#{flow.client.actor_id}"} class={[link_style()]}>
               <%= flow.client.actor.name %>
             </.link>
-            (<%= flow.client_remote_ip %>)
+            <%= flow.client_remote_ip %>
           </:col>
-          <:col :let={flow} label="GATEWAY (IP)">
+          <:col :let={flow} label="GATEWAY" class="w-3/12">
             <.link navigate={~p"/#{@account}/gateways/#{flow.gateway_id}"} class={[link_style()]}>
               <%= flow.gateway.group.name %>-<%= flow.gateway.name %>
             </.link>
-            (<%= flow.gateway_remote_ip %>)
+            <br />
+            <code class="text-xs"><%= flow.gateway_remote_ip %></code>
           </:col>
           <:col :let={flow} :if={@flow_activities_enabled?} label="ACTIVITY">
             <.link navigate={~p"/#{@account}/flows/#{flow.id}"} class={[link_style()]}>

elixir/apps/web/test/web/live/actors/show_test.exs

@@ -131,16 +131,16 @@ defmodule Web.Live.Actors.ShowTest do
       |> render()
       |> table_to_map()
 
-    assert row["authorized at"]
-    assert row["expires at"]
+    assert row["authorized"]
+    assert row["expires"]
     assert row["policy"] =~ flow.policy.actor_group.name
     assert row["policy"] =~ flow.policy.resource.name
 
-    assert row["client (ip)"] ==
-             "#{flow.client.name} (#{client.last_seen_remote_ip})"
+    assert row["client"] ==
+             "#{flow.client.name} #{client.last_seen_remote_ip}"
 
-    assert row["gateway (ip)"] ==
-             "#{flow.gateway.group.name}-#{flow.gateway.name} (#{flow.gateway.last_seen_remote_ip})"
+    assert row["gateway"] ==
+             "#{flow.gateway.group.name}-#{flow.gateway.name} #{flow.gateway.last_seen_remote_ip}"
   end
 
   test "renders flows even for deleted policies", %{
@@ -171,16 +171,16 @@ defmodule Web.Live.Actors.ShowTest do
       |> render()
       |> table_to_map()
 
-    assert row["authorized at"]
-    assert row["expires at"]
+    assert row["authorized"]
+    assert row["expires"]
     assert row["policy"] =~ flow.policy.actor_group.name
     assert row["policy"] =~ flow.policy.resource.name
 
-    assert row["client (ip)"] ==
-             "#{flow.client.name} (#{client.last_seen_remote_ip})"
+    assert row["client"] ==
+             "#{flow.client.name} #{client.last_seen_remote_ip}"
 
-    assert row["gateway (ip)"] ==
-             "#{flow.gateway.group.name}-#{flow.gateway.name} (#{flow.gateway.last_seen_remote_ip})"
+    assert row["gateway"] ==
+             "#{flow.gateway.group.name}-#{flow.gateway.name} #{flow.gateway.last_seen_remote_ip}"
   end
 
   test "renders flows even for deleted policy assocs", %{
@@ -212,16 +212,16 @@ defmodule Web.Live.Actors.ShowTest do
       |> render()
       |> table_to_map()
 
-    assert row["authorized at"]
-    assert row["expires at"]
+    assert row["authorized"]
+    assert row["expires"]
     assert row["policy"] =~ flow.policy.actor_group.name
     assert row["policy"] =~ flow.policy.resource.name
 
-    assert row["client (ip)"] ==
-             "#{flow.client.name} (#{client.last_seen_remote_ip})"
+    assert row["client"] ==
+             "#{flow.client.name} #{client.last_seen_remote_ip}"
 
-    assert row["gateway (ip)"] ==
-             "#{flow.gateway.group.name}-#{flow.gateway.name} (#{flow.gateway.last_seen_remote_ip})"
+    assert row["gateway"] ==
+             "#{flow.gateway.group.name}-#{flow.gateway.name} #{flow.gateway.last_seen_remote_ip}"
   end
 
   test "renders groups table", %{
@@ -545,13 +545,13 @@ defmodule Web.Live.Actors.ShowTest do
 
       assert row1["type"] == "browser"
       assert row1["expires"] in ["tomorrow", "in 24 hours"]
-      assert row1["last used (ip)"] == "never"
+      assert row1["last used"] == "never"
       assert around_now?(row1["created"])
       assert row1["actions"] == "Revoke"
 
       assert row2["type"] == "client"
       assert row2["expires"] in ["tomorrow", "in 24 hours"]
-      assert row2["last used (ip)"] == "never"
+      assert row2["last used"] == "never"
       assert around_now?(row2["created"])
       assert row2["actions"] == "Revoke"
     end
@@ -968,13 +968,13 @@ defmodule Web.Live.Actors.ShowTest do
 
       assert row1["type"] == "browser"
       assert row1["expires"] in ["tomorrow", "in 24 hours"]
-      assert row1["last used (ip)"] == "never"
+      assert row1["last used"] == "never"
       assert around_now?(row1["created"])
       assert row1["actions"] == "Revoke"
 
       assert row2["type"] == "client"
       assert row2["expires"] in ["tomorrow", "in 24 hours"]
-      assert row2["last used (ip)"] == "never"
+      assert row2["last used"] == "never"
       assert around_now?(row2["created"])
       assert row2["actions"] == "Revoke"
     end

elixir/apps/web/test/web/live/clients/show_test.exs

@@ -191,14 +191,14 @@ defmodule Web.Live.Clients.ShowTest do
       |> render()
       |> table_to_map()
 
-    assert row["authorized at"]
-    assert row["expires at"]
+    assert row["authorized"]
+    assert row["expires"]
     assert row["remote ip"] == to_string(client.last_seen_remote_ip)
     assert row["policy"] =~ flow.policy.actor_group.name
     assert row["policy"] =~ flow.policy.resource.name
 
-    assert row["gateway (ip)"] ==
-             "#{flow.gateway.group.name}-#{flow.gateway.name} (#{flow.gateway.last_seen_remote_ip})"
+    assert row["gateway"] ==
+             "#{flow.gateway.group.name}-#{flow.gateway.name} #{flow.gateway.last_seen_remote_ip}"
   end
 
   test "renders flows even for deleted policies", %{
@@ -227,14 +227,14 @@ defmodule Web.Live.Clients.ShowTest do
       |> render()
       |> table_to_map()
 
-    assert row["authorized at"]
-    assert row["expires at"]
+    assert row["authorized"]
+    assert row["expires"]
     assert row["remote ip"] == to_string(client.last_seen_remote_ip)
     assert row["policy"] =~ flow.policy.actor_group.name
     assert row["policy"] =~ flow.policy.resource.name
 
-    assert row["gateway (ip)"] ==
-             "#{flow.gateway.group.name}-#{flow.gateway.name} (#{flow.gateway.last_seen_remote_ip})"
+    assert row["gateway"] ==
+             "#{flow.gateway.group.name}-#{flow.gateway.name} #{flow.gateway.last_seen_remote_ip}"
   end
 
   test "renders flows even for deleted policy assocs", %{
@@ -264,14 +264,14 @@ defmodule Web.Live.Clients.ShowTest do
       |> render()
       |> table_to_map()
 
-    assert row["authorized at"]
-    assert row["expires at"]
+    assert row["authorized"]
+    assert row["expires"]
     assert row["remote ip"] == to_string(client.last_seen_remote_ip)
     assert row["policy"] =~ flow.policy.actor_group.name
     assert row["policy"] =~ flow.policy.resource.name
 
-    assert row["gateway (ip)"] ==
-             "#{flow.gateway.group.name}-#{flow.gateway.name} (#{flow.gateway.last_seen_remote_ip})"
+    assert row["gateway"] ==
+             "#{flow.gateway.group.name}-#{flow.gateway.name} #{flow.gateway.last_seen_remote_ip}"
   end
 
   test "allows editing clients", %{

elixir/apps/web/test/web/live/policies/show_test.exs

@@ -154,14 +154,14 @@ defmodule Web.Live.Policies.ShowTest do
       |> render()
       |> table_to_map()
 
-    assert row["authorized at"]
-    assert row["expires at"]
-    assert row["client, actor (ip)"] =~ flow.client.name
-    assert row["client, actor (ip)"] =~ "owned by #{flow.client.actor.name}"
-    assert row["client, actor (ip)"] =~ to_string(flow.client_remote_ip)
+    assert row["authorized"]
+    assert row["expires"]
+    assert row["client, actor"] =~ flow.client.name
+    assert row["client, actor"] =~ "owned by #{flow.client.actor.name}"
+    assert row["client, actor"] =~ to_string(flow.client_remote_ip)
 
-    assert row["gateway (ip)"] =~
-             "#{flow.gateway.group.name}-#{flow.gateway.name} (#{flow.gateway.last_seen_remote_ip})"
+    assert row["gateway"] =~
+             "#{flow.gateway.group.name}-#{flow.gateway.name} #{flow.gateway.last_seen_remote_ip}"
   end
 
   test "allows deleting policy", %{

elixir/apps/web/test/web/live/resources/show_test.exs

@@ -252,17 +252,17 @@ defmodule Web.Live.Resources.ShowTest do
       |> render()
       |> table_to_map()
 
-    assert row["authorized at"]
-    assert row["expires at"]
+    assert row["authorized"]
+    assert row["expires"]
     assert row["policy"] =~ flow.policy.actor_group.name
     assert row["policy"] =~ flow.policy.resource.name
 
-    assert row["gateway (ip)"] ==
-             "#{flow.gateway.group.name}-#{flow.gateway.name} (#{flow.gateway.last_seen_remote_ip})"
+    assert row["gateway"] ==
+             "#{flow.gateway.group.name}-#{flow.gateway.name} #{flow.gateway.last_seen_remote_ip}"
 
-    assert row["client, actor (ip)"] =~ flow.client.name
-    assert row["client, actor (ip)"] =~ "owned by #{flow.client.actor.name}"
-    assert row["client, actor (ip)"] =~ to_string(flow.client_remote_ip)
+    assert row["client, actor"] =~ flow.client.name
+    assert row["client, actor"] =~ "owned by #{flow.client.actor.name}"
+    assert row["client, actor"] =~ to_string(flow.client_remote_ip)
   end
 
   test "allows deleting resource", %{