From 721a2eba4adcb7815b6f4f7af464f4a1f16e8cfb Mon Sep 17 00:00:00 2001
From: Paulo Valim <plvalim@gmail.com>
Date: Tue, 30 Jan 2024 16:48:18 +0100
Subject: [PATCH] Adding table view for environement variables (#2461)

---
 .../live/settings_live/env_vars_component.ex  | 86 ++++++++-----------
 1 file changed, 35 insertions(+), 51 deletions(-)

diff --git a/lib/livebook_web/live/settings_live/env_vars_component.ex b/lib/livebook_web/live/settings_live/env_vars_component.ex
index 61da5af2a..947a2f25b 100644
--- a/lib/livebook_web/live/settings_live/env_vars_component.ex
+++ b/lib/livebook_web/live/settings_live/env_vars_component.ex
@@ -11,11 +11,41 @@ defmodule LivebookWeb.SettingsLive.EnvVarsComponent do
     ~H"""
     <div id={@id} class="flex flex-col space-y-4">
       <div class="flex flex-col space-y-4">
-        <div
-          :for={env_var <- @env_vars}
-          class="flex items-center justify-between border border-gray-200 rounded-lg p-4"
-        >
-          <.env_var_info env_var={env_var} edit_label={@edit_label} target={@target} />
+        <.no_entries :if={@env_vars == []}>
+          No environment variables here... yet!
+        </.no_entries>
+        <div :if={@env_vars != []}>
+          <.table id="env-var-table" rows={@env_vars}>
+            <:col :let={env_var} label="Name"><%= env_var.name %></:col>
+            <:action :let={env_var}>
+              <span class="tooltip left" data-tooltip="Edit">
+                <button
+                  id={"env-var-#{env_var.name}-edit"}
+                  type="button"
+                  phx-click={
+                    JS.push("edit_env_var", value: %{env_var: env_var.name}, target: @target)
+                  }
+                  class="icon-button"
+                >
+                  <.remix_icon icon="edit-fill" class="text-lg" />
+                </button>
+              </span>
+            </:action>
+            <:action :let={env_var}>
+              <span class="tooltip left" data-tooltip="Delete">
+                <button
+                  id={"env-var-#{env_var.name}-delete"}
+                  type="button"
+                  phx-click={
+                    JS.push("delete_env_var", value: %{env_var: env_var.name}, target: @target)
+                  }
+                  class="icon-button"
+                >
+                  <.remix_icon icon="delete-bin-6-line" class="text-lg" />
+                </button>
+              </span>
+            </:action>
+          </.table>
         </div>
       </div>
       <div class="flex">
@@ -26,50 +56,4 @@ defmodule LivebookWeb.SettingsLive.EnvVarsComponent do
     </div>
     """
   end
-
-  defp env_var_info(assigns) do
-    ~H"""
-    <div class="grid grid-cols-1 md:grid-cols-2 w-full">
-      <div class="place-content-start">
-        <.labeled_text label="Name">
-          <%= @env_var.name %>
-        </.labeled_text>
-      </div>
-
-      <div class="flex items-center place-content-end">
-        <.menu id={"env-var-#{@env_var.name}-menu"}>
-          <:toggle>
-            <button class="icon-button" aria-label="open environment variable menu" type="button">
-              <.remix_icon icon="more-2-fill" class="text-xl" />
-            </button>
-          </:toggle>
-          <.menu_item>
-            <button
-              id={"env-var-#{@env_var.name}-edit"}
-              type="button"
-              phx-click={JS.push("edit_env_var", value: %{env_var: @env_var.name})}
-              phx-target={@target}
-              role="menuitem"
-            >
-              <.remix_icon icon="file-edit-line" />
-              <span><%= @edit_label %></span>
-            </button>
-          </.menu_item>
-          <.menu_item variant={:danger}>
-            <button
-              id={"env-var-#{@env_var.name}-delete"}
-              type="button"
-              phx-click={JS.push("delete_env_var", value: %{env_var: @env_var.name})}
-              phx-target={@target}
-              role="menuitem"
-            >
-              <.remix_icon icon="delete-bin-line" />
-              <span>Delete</span>
-            </button>
-          </.menu_item>
-        </.menu>
-      </div>
-    </div>
-    """
-  end
 end