From b41c4ed9e4059d8f03e986f77d54e369af5ba478 Mon Sep 17 00:00:00 2001
From: bmanifold <bmanifold@users.noreply.github.com>
Date: Wed, 19 Jul 2023 14:56:49 -0400
Subject: [PATCH] Create vertical table component for show pages (#1805)

Why:

* The `show` pages for all of the Firezone resources (i.e. Gateways,
Resources, Devices, etc...) were all very similar but were explicitly
defined in individual tables with their styling also explicitly defined
in each table. This commit creates a `vertical_table` component and a
`vertical_table_row` component to allow the styling to be defined once
and then consistently applied to each `show` page.
---
 .../lib/web/components/table_components.ex    |  71 ++++++
 .../web/lib/web/live/gateways_live/show.ex    | 202 ++++++------------
 2 files changed, 137 insertions(+), 136 deletions(-)

diff --git a/elixir/apps/web/lib/web/components/table_components.ex b/elixir/apps/web/lib/web/components/table_components.ex
index d7a4a4514..d88f5dcf6 100644
--- a/elixir/apps/web/lib/web/components/table_components.ex
+++ b/elixir/apps/web/lib/web/components/table_components.ex
@@ -197,4 +197,75 @@ defmodule Web.TableComponents do
     </table>
     """
   end
+
+  @doc ~S"""
+  Renders a table with 2 columns and generic styling.
+
+  The component will likely be used when displaying the properties of an
+  individual resource (e.g. Gateway, Resource, Device, etc...)
+
+  The component renders a table that is meant to be viewed vertically, with
+  the first column being the label and the second column being the value.
+
+  This component is intended to be used with the `vertical_table_row` component
+
+  ## Examples
+
+      <.vertical_table>
+        <.vertical_table_row>
+          <:label>First Name</:label>
+          <:value>User First Name Here</:value>
+        </.vertical_table_row>
+        <.vertical_table_row>
+          <:label>Last Name</:label>
+          <:value>User Last Name Here</:value>
+        </.vertical_table_row>
+      </.vertical_table>
+  """
+
+  def vertical_table(assigns) do
+    ~H"""
+    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+      <tbody>
+        <%= render_slot(@inner_block) %>
+      </tbody>
+    </table>
+    """
+  end
+
+  @doc ~S"""
+  Renders a row with 2 columns and generic styling.  The first column will be
+  the header and the second column will be the value.
+
+  The component will likely be used when displaying the properties of an
+  individual resource (e.g. Gateway, Resource, Device, etc...)
+
+  This component is intended to be used with the `vertical_table` component.
+
+  ## Examples
+
+      <.vertical_table_row>
+        <:label>First Name</:label>
+        <:value>User First Name Here</:value>
+      </.vertical_table_row>
+  """
+
+  slot :label, doc: "the slot for rendering the label of a row"
+  slot :value, doc: "the slot for rendering the value of a row"
+
+  def vertical_table_row(assigns) do
+    ~H"""
+    <tr class="border-b border-gray-200 dark:border-gray-700">
+      <th scope="row" class={~w[
+          text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap
+          bg-gray-50 dark:text-white dark:bg-gray-800
+        ]}>
+        <%= render_slot(@label) %>
+      </th>
+      <td class="px-6 py-4">
+        <%= render_slot(@value) %>
+      </td>
+    </tr>
+    """
+  end
 end
diff --git a/elixir/apps/web/lib/web/live/gateways_live/show.ex b/elixir/apps/web/lib/web/live/gateways_live/show.ex
index 0cd5607e9..a802f8261 100644
--- a/elixir/apps/web/lib/web/live/gateways_live/show.ex
+++ b/elixir/apps/web/lib/web/live/gateways_live/show.ex
@@ -29,142 +29,72 @@ defmodule Web.GatewaysLive.Show do
     </.section_header>
     <!-- Gateway details -->
     <div class="bg-white dark:bg-gray-800 overflow-hidden">
-      <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-        <tbody>
-          <tr class="border-b border-gray-200 dark:border-gray-700">
-            <th
-              scope="row"
-              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-            >
-              Instance Group Name
-            </th>
-            <td class="px-6 py-4">
-              <.badge type="info">
-                <%= @gateway.group.name_prefix %>
-              </.badge>
-            </td>
-          </tr>
-          <tr class="border-b border-gray-200 dark:border-gray-700">
-            <th
-              scope="row"
-              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-            >
-              Instance Name
-            </th>
-            <td class="px-6 py-4">
-              <%= @gateway.name_suffix %>
-            </td>
-          </tr>
-          <tr class="border-b border-gray-200 dark:border-gray-700">
-            <th
-              scope="row"
-              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-            >
-              Connectivity
-            </th>
-            <td class="px-6 py-4">
-              TODO: Peer to Peer
-            </td>
-          </tr>
-          <tr class="border-b border-gray-200 dark:border-gray-700">
-            <th
-              scope="row"
-              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-            >
-              Status
-            </th>
-            <td class="px-6 py-4">
-              <.badge type="success">
-                TODO: Online
-              </.badge>
-            </td>
-          </tr>
-          <tr class="border-b border-gray-200 dark:border-gray-700">
-            <th
-              scope="row"
-              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-            >
-              Location
-            </th>
-            <td class="px-6 py-4">
-              <code>
-                <%= @gateway.last_seen_remote_ip %>
-              </code>
-            </td>
-          </tr>
-          <tr class="border-b border-gray-200 dark:border-gray-700">
-            <th
-              scope="row"
-              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-            >
-              Last seen
-            </th>
-            <td class="px-6 py-4">
-              <.relative_datetime relative={@gateway.last_seen_at} />
-              <br />
-              <%= @gateway.last_seen_at %>
-            </td>
-          </tr>
-          <tr class="border-b border-gray-200 dark:border-gray-700">
-            <th
-              scope="row"
-              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-            >
-              Remote IPv4
-            </th>
-            <td class="px-6 py-4">
-              <code><%= @gateway.ipv4 %></code>
-            </td>
-          </tr>
-          <tr class="border-b border-gray-200 dark:border-gray-700">
-            <th
-              scope="row"
-              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-            >
-              Remote IPv6
-            </th>
-            <td class="px-6 py-4">
-              <code><%= @gateway.ipv6 %></code>
-            </td>
-          </tr>
-          <tr class="border-b border-gray-200 dark:border-gray-700">
-            <th
-              scope="row"
-              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-            >
-              Transfer
-            </th>
-            <td class="px-6 py-4">
-              TODO: 4.43 GB up, 1.23 GB down
-            </td>
-          </tr>
-          <tr class="border-b border-gray-200 dark:border-gray-700">
-            <th
-              scope="row"
-              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-            >
-              Gateway version
-            </th>
-            <td class="px-6 py-4">
-              <%= "Gateway Version: #{@gateway.last_seen_version}" %>
-              <br />
-
-              <%= "User Agent: #{@gateway.last_seen_user_agent}" %>
-            </td>
-          </tr>
-          <tr class="border-b border-gray-200 dark:border-gray-700">
-            <th
-              scope="row"
-              class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-            >
-              Deployment method
-            </th>
-            <td class="px-6 py-4">
-              TODO: Docker
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <.vertical_table>
+        <.vertical_table_row>
+          <:label>Instance Group Name</:label>
+          <:value><%= @gateway.group.name_prefix %></:value>
+        </.vertical_table_row>
+        <.vertical_table_row>
+          <:label>Instance Name</:label>
+          <:value><%= @gateway.name_suffix %></:value>
+        </.vertical_table_row>
+        <.vertical_table_row>
+          <:label>Connectivity</:label>
+          <:value>TODO: Peer to Peer</:value>
+        </.vertical_table_row>
+        <.vertical_table_row>
+          <:label>Status</:label>
+          <:value>
+            <.badge type="success">TODO: Online</.badge>
+          </:value>
+        </.vertical_table_row>
+        <.vertical_table_row>
+          <:label>Location</:label>
+          <:value>
+            <code>
+              <%= @gateway.last_seen_remote_ip %>
+            </code>
+          </:value>
+        </.vertical_table_row>
+        <.vertical_table_row>
+          <:label>
+            Last seen
+          </:label>
+          <:value>
+            <.relative_datetime relative={@gateway.last_seen_at} />
+            <br />
+            <%= @gateway.last_seen_at %>
+          </:value>
+        </.vertical_table_row>
+        <.vertical_table_row>
+          <:label>Remote IPv4</:label>
+          <:value>
+            <code><%= @gateway.ipv4 %></code>
+          </:value>
+        </.vertical_table_row>
+        <.vertical_table_row>
+          <:label>Remote IPv6</:label>
+          <:value>
+            <code><%= @gateway.ipv6 %></code>
+          </:value>
+        </.vertical_table_row>
+        <.vertical_table_row>
+          <:label>Transfer</:label>
+          <:value>TODO: 4.43 GB up, 1.23 GB down</:value>
+        </.vertical_table_row>
+        <.vertical_table_row>
+          <:label>Gateway Version</:label>
+          <:value>
+            <%= "Gateway Version: #{@gateway.last_seen_version}" %>
+            <br />
+            <%= "User Agent: #{@gateway.last_seen_user_agent}" %>
+          </:value>
+        </.vertical_table_row>
+        <.vertical_table_row>
+          <:label>Deployment Method</:label>
+          <:value>TODO: Docker</:value>
+        </.vertical_table_row>
+      </.vertical_table>
     </div>
     <!-- Linked Resources table -->
     <div class="grid grid-cols-1 p-4 xl:grid-cols-3 xl:gap-4 dark:bg-gray-900">