Adding table view for environement variables (#2461)

This commit is contained in:
Paulo Valim 2024-01-30 16:48:18 +01:00 committed by GitHub
parent 556fd97aee
commit 721a2eba4a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

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