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.

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

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">