Separate new_table as table (#2448)

We use both our own `new_table` component as well as Petals `table` component. Since we import Petal in at the LightningWeb use macro level, we have had to name our table as `new_table`. Which is weird. The commit does two things: 1. Moves the `new_table` component, changes it to `table` and gives it a new home under LightningWeb.Components.Table.table 2. Removes the import for `PetalComponents.Table` What this means is that neither `table` components are available without explicitly importing them.
OpenFn · Sep 5, 2024 · 7c81bfc · 7c81bfc
1 parent 183fa0c
commit 7c81bfc
Show file tree

Hide file tree

Showing 15 changed files with 115 additions and 91 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,9 @@ and this project adheres to
 
 ### Changed
 
+- Rename `new_table` component to `table`.
+  [#2448](https://github.com/OpenFn/lightning/pull/2448)
+
 ### Fixed
 
 - Fix `workflow_id` presence in state.json during Github sync

diff --git a/lib/lightning_web.ex b/lib/lightning_web.ex
@@ -121,7 +121,6 @@ defmodule LightningWeb do
       import PetalComponents.Badge
       import PetalComponents.Card
       import PetalComponents.Dropdown
-      import PetalComponents.Table
       import PetalComponents.Typography
 
       alias LightningWeb.Components

diff --git a/lib/lightning_web/components/core_components.ex b/lib/lightning_web/components/core_components.ex
@@ -32,89 +32,6 @@ defmodule LightningWeb.CoreComponents do
     """
   end
 
-  @doc ~S"""
-  Renders a table with generic styling.
-
-  ## Examples
-
-      <.new_table id="users" rows={@users}>
-        <:col :let={user} label="id"><%= user.id %></:col>
-        <:col :let={user} label="username"><%= user.username %></:col>
-      </.new_table>
-  """
-
-  attr :id, :string, required: true
-  attr :row_click, :any, default: nil
-  attr :rows, :list, required: true
-  attr :row_class, :string, default: ""
-
-  slot :col, required: true do
-    attr :label, :string
-    attr :label_class, :string
-  end
-
-  slot :action, doc: "the slot for showing user actions in the last table column"
-
-  def new_table(assigns) do
-    ~H"""
-    <div
-      id={@id}
-      class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg"
-    >
-      <table class="min-w-full divide-y divide-gray-300">
-        <thead class="">
-          <tr>
-            <th
-              :for={col <- @col}
-              scope="col"
-              class="px-3 py-3.5 text-left text-sm font-semibold text-gray-500"
-            >
-              <div class={col[:label_class]}>
-                <%= col[:label] %>
-              </div>
-            </th>
-            <th
-              :if={@action != []}
-              scope="col"
-              class="relative py-3.5 pl-3 pr-4 sm:pr-6"
-            >
-              <span class="sr-only">Actions</span>
-            </th>
-          </tr>
-        </thead>
-        <tbody class="divide-y divide-gray-200 bg-white">
-          <tr
-            :for={row <- @rows}
-            id={"#{@id}-#{Phoenix.Param.to_param(row)}"}
-            class={[@row_class]}
-          >
-            <td
-              :for={col <- @col}
-              phx-click={@row_click && @row_click.(row)}
-              class={[
-                "whitespace-nowrap px-3 py-4 text-sm text-gray-500",
-                @row_click && "hover:cursor-pointer"
-              ]}
-            >
-              <%= render_slot(col, row) %>
-            </td>
-            <td :if={@action != []} class="p-0 w-14">
-              <div class="relative whitespace-nowrap py-2 text-right text-sm font-medium">
-                <span
-                  :for={action <- @action}
-                  class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
-                >
-                  <%= render_slot(action, row) %>
-                </span>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    """
-  end
-
   @doc """
   Generates tag for inlined form input errors.
   """

diff --git a/lib/lightning_web/components/table.ex b/lib/lightning_web/components/table.ex
@@ -0,0 +1,88 @@
+defmodule LightningWeb.Components.Table do
+  @moduledoc false
+
+  use Phoenix.Component
+
+  @doc ~S"""
+  Renders a table with generic styling.
+
+  ## Examples
+
+      <.table id="users" rows={@users}>
+        <:col :let={user} label="id"><%= user.id %></:col>
+        <:col :let={user} label="username"><%= user.username %></:col>
+      </.table>
+  """
+
+  attr :id, :string, required: true
+  attr :row_click, :any, default: nil
+  attr :rows, :list, required: true
+  attr :row_class, :string, default: ""
+
+  slot :col, required: true do
+    attr :label, :string
+    attr :label_class, :string
+  end
+
+  slot :action, doc: "the slot for showing user actions in the last table column"
+
+  def table(assigns) do
+    ~H"""
+    <div
+      id={@id}
+      class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg"
+    >
+      <table class="min-w-full divide-y divide-gray-300">
+        <thead class="">
+          <tr>
+            <th
+              :for={col <- @col}
+              scope="col"
+              class="px-3 py-3.5 text-left text-sm font-semibold text-gray-500"
+            >
+              <div class={col[:label_class]}>
+                <%= col[:label] %>
+              </div>
+            </th>
+            <th
+              :if={@action != []}
+              scope="col"
+              class="relative py-3.5 pl-3 pr-4 sm:pr-6"
+            >
+              <span class="sr-only">Actions</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-200 bg-white">
+          <tr
+            :for={row <- @rows}
+            id={"#{@id}-#{Phoenix.Param.to_param(row)}"}
+            class={[@row_class]}
+          >
+            <td
+              :for={col <- @col}
+              phx-click={@row_click && @row_click.(row)}
+              class={[
+                "whitespace-nowrap px-3 py-4 text-sm text-gray-500",
+                @row_click && "hover:cursor-pointer"
+              ]}
+            >
+              <%= render_slot(col, row) %>
+            </td>
+            <td :if={@action != []} class="p-0 w-14">
+              <div class="relative whitespace-nowrap py-2 text-right text-sm font-medium">
+                <span
+                  :for={action <- @action}
+                  class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
+                >
+                  <%= render_slot(action, row) %>
+                </span>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    """
+  end
+end
diff --git a/lib/lightning_web/live/audit_live/index.ex b/lib/lightning_web/live/audit_live/index.ex
@@ -4,6 +4,8 @@ defmodule LightningWeb.AuditLive.Index do
   """
   use LightningWeb, :live_view
 
+  import PetalComponents.Table
+
   alias Lightning.Auditing
   alias Lightning.Policies.Permissions
   alias Lightning.Policies.Users

diff --git a/lib/lightning_web/live/components/credentials.ex b/lib/lightning_web/live/components/credentials.ex
@@ -2,6 +2,8 @@ defmodule LightningWeb.Components.Credentials do
   @moduledoc false
   use LightningWeb, :component
 
+  import PetalComponents.Table
+
   alias LightningWeb.CredentialLive.JsonSchemaBodyComponent
   alias LightningWeb.CredentialLive.OauthComponent
   alias LightningWeb.CredentialLive.RawBodyComponent

diff --git a/lib/lightning_web/live/dashboard_live/components.ex b/lib/lightning_web/live/dashboard_live/components.ex
@@ -1,6 +1,8 @@
 defmodule LightningWeb.DashboardLive.Components do
   use LightningWeb, :component
 
+  import PetalComponents.Table
+
   alias Lightning.Accounts.User
   alias Lightning.Projects.Project
 

diff --git a/lib/lightning_web/live/project_live/form_component.html.heex b/lib/lightning_web/live/project_live/form_component.html.heex
@@ -53,7 +53,7 @@
     <div class="mt-2 flow-root">
       <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
         <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-          <.new_table
+          <LightningWeb.Components.Table.table
             id="project_users_table"
             rows={
               Phoenix.HTML.FormData.to_form(
@@ -108,7 +108,7 @@
                 />
               </div>
             </:col>
-          </.new_table>
+          </LightningWeb.Components.Table.table>
         </div>
       </div>
     </div>

diff --git a/lib/lightning_web/live/project_live/index.ex b/lib/lightning_web/live/project_live/index.ex
@@ -4,6 +4,8 @@ defmodule LightningWeb.ProjectLive.Index do
   """
   use LightningWeb, :live_view
 
+  import PetalComponents.Table
+
   alias Lightning.Policies.Permissions
   alias Lightning.Policies.Users
   alias Lightning.Projects

diff --git a/lib/lightning_web/live/project_live/settings.ex b/lib/lightning_web/live/project_live/settings.ex
@@ -2,9 +2,10 @@ defmodule LightningWeb.ProjectLive.Settings do
   @moduledoc """
   Index Liveview for project settings
   """
-
   use LightningWeb, :live_view
 
+  import PetalComponents.Table
+
   alias Lightning.Accounts.User
   alias Lightning.Credentials
   alias Lightning.Credentials.Credential

diff --git a/lib/lightning_web/live/project_live/settings.html.heex b/lib/lightning_web/live/project_live/settings.html.heex
@@ -1050,7 +1050,7 @@
           </div>
         </div>
         <div class="my-6">
-          <.new_table
+          <LightningWeb.Components.Table.table
             id="project_users_table"
             rows={@project_files}
             row_class="group hover:bg-indigo-50 hover:border-l-indigo-500"
@@ -1110,7 +1110,7 @@
                 </.button>
               <% end %>
             </:col>
-          </.new_table>
+          </LightningWeb.Components.Table.table>
         </div>
       </:panel>
     </LightningWeb.Components.Tabbed.container>

diff --git a/lib/lightning_web/live/tokens_live/index.ex b/lib/lightning_web/live/tokens_live/index.ex
@@ -4,6 +4,8 @@ defmodule LightningWeb.TokensLive.Index do
   """
   use LightningWeb, :live_view
 
+  import PetalComponents.Table
+
   alias Lightning.Accounts
   alias Lightning.Policies.Permissions
   alias Lightning.Policies.Users

diff --git a/lib/lightning_web/live/user_live/index.ex b/lib/lightning_web/live/user_live/index.ex
@@ -4,6 +4,8 @@ defmodule LightningWeb.UserLive.Index do
   """
   use LightningWeb, :live_view
 
+  import PetalComponents.Table
+
   alias Lightning.Accounts
   alias Lightning.Policies.Permissions
   alias Lightning.Policies.Users

diff --git a/lib/lightning_web/live/workflow_live/components.ex b/lib/lightning_web/live/workflow_live/components.ex
@@ -2,6 +2,8 @@ defmodule LightningWeb.WorkflowLive.Components do
   @moduledoc false
   use LightningWeb, :component
 
+  import PetalComponents.Table
+
   alias LightningWeb.Components.Form
   alias Phoenix.LiveView.JS
 

diff --git a/lib/lightning_web/live/workflow_live/dashboard_components.ex b/lib/lightning_web/live/workflow_live/dashboard_components.ex
@@ -2,6 +2,8 @@ defmodule LightningWeb.WorkflowLive.DashboardComponents do
   @moduledoc false
   use LightningWeb, :component
 
+  import LightningWeb.Components.Table
+
   alias Lightning.DashboardStats.ProjectMetrics
   alias Lightning.Projects.Project
   alias Lightning.Workflows.WorkflowUsageLimiter
@@ -56,7 +58,7 @@ defmodule LightningWeb.WorkflowLive.DashboardComponents do
       )
 
     ~H"""
-    <.new_table
+    <.table
       id="workflows"
       rows={@workflows}
       row_class="group hover:bg-indigo-50 hover:border-l-indigo-500"
@@ -159,7 +161,7 @@ defmodule LightningWeb.WorkflowLive.DashboardComponents do
           </div>
         </div>
       </:col>
-    </.new_table>
+    </.table>
     """
   end