mirror of
https://github.com/livebook-dev/livebook.git
synced 2025-10-20 18:36:31 +08:00
Apply radio cards
This commit is contained in:
parent
573cb6a75d
commit
5b15f36278
5 changed files with 57 additions and 24 deletions
|
@ -23,7 +23,7 @@ defmodule Livebook.Teams.DeploymentGroup do
|
||||||
@primary_key {:id, :string, autogenerate: false}
|
@primary_key {:id, :string, autogenerate: false}
|
||||||
embedded_schema do
|
embedded_schema do
|
||||||
field :name, :string
|
field :name, :string
|
||||||
field :mode, Ecto.Enum, values: [:online, :offline]
|
field :mode, Ecto.Enum, values: [:online, :offline], default: :online
|
||||||
field :hub_id, :string
|
field :hub_id, :string
|
||||||
field :clustering, Ecto.Enum, values: [:fly_io]
|
field :clustering, Ecto.Enum, values: [:fly_io]
|
||||||
field :zta_provider, Ecto.Enum, values: @zta_providers
|
field :zta_provider, Ecto.Enum, values: @zta_providers
|
||||||
|
|
|
@ -312,7 +312,7 @@ defmodule LivebookWeb.Hub.Edit.TeamComponent do
|
||||||
:if={@live_action == :new_deployment_group}
|
:if={@live_action == :new_deployment_group}
|
||||||
id="deployment-group-modal"
|
id="deployment-group-modal"
|
||||||
show
|
show
|
||||||
width={:medium}
|
width={:big}
|
||||||
patch={~p"/hub/#{@hub.id}"}
|
patch={~p"/hub/#{@hub.id}"}
|
||||||
>
|
>
|
||||||
<.live_component
|
<.live_component
|
||||||
|
|
|
@ -36,7 +36,7 @@ defmodule LivebookWeb.Hub.Teams.DeploymentGroupComponent do
|
||||||
Online
|
Online
|
||||||
</div>
|
</div>
|
||||||
<% else %>
|
<% else %>
|
||||||
<div class="bg-red-100 text-red-800 text-xs px-2.5 py-0.5 rounded cursor-default">
|
<div class="bg-gray-200 text-gray-800 text-xs px-2.5 py-0.5 rounded cursor-default">
|
||||||
Airgapped
|
Airgapped
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
|
@ -45,6 +45,23 @@ defmodule LivebookWeb.Hub.Teams.DeploymentGroupFormComponent do
|
||||||
class="basis-1/2 grow"
|
class="basis-1/2 grow"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col space-y-4">
|
<div class="flex flex-col space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="mb-2 flex items-center gap-1 text-sm text-gray-800 font-medium">
|
||||||
|
Type
|
||||||
|
</label>
|
||||||
|
<div class="flex gap-y-6 sm:gap-x-4">
|
||||||
|
<.radio_card field={@form[:mode]} title="Online" value={:online}>
|
||||||
|
Deploy notebooks to your infrastructure with the click of a button.
|
||||||
|
This mode requires running app servers connected to Livebook Teams.
|
||||||
|
</.radio_card>
|
||||||
|
|
||||||
|
<.radio_card field={@form[:mode]} title="Airgapped" value={:offline}>
|
||||||
|
Manually deploy notebooks to your infrastructure via Dockerfiles.
|
||||||
|
Connection to Livebook Teams is not required.
|
||||||
|
</.radio_card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<.text_field
|
<.text_field
|
||||||
field={@form[:name]}
|
field={@form[:name]}
|
||||||
label="Name"
|
label="Name"
|
||||||
|
@ -53,19 +70,6 @@ defmodule LivebookWeb.Hub.Teams.DeploymentGroupFormComponent do
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
phx-debounce
|
phx-debounce
|
||||||
/>
|
/>
|
||||||
<.select_field
|
|
||||||
label="Mode"
|
|
||||||
help={
|
|
||||||
~S'''
|
|
||||||
Deployment group mode.
|
|
||||||
'''
|
|
||||||
}
|
|
||||||
field={@form[:mode]}
|
|
||||||
options={[
|
|
||||||
{"Offline", :offline},
|
|
||||||
{"Online", :online}
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<LivebookWeb.AppComponents.deployment_group_form_content hub={@hub} form={@form} />
|
<LivebookWeb.AppComponents.deployment_group_form_content hub={@hub} form={@form} />
|
||||||
|
|
||||||
|
@ -86,6 +90,43 @@ defmodule LivebookWeb.Hub.Teams.DeploymentGroupFormComponent do
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
|
|
||||||
|
defp radio_card(assigns) do
|
||||||
|
~H"""
|
||||||
|
<label class={[
|
||||||
|
"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none w-1/2",
|
||||||
|
to_string(@field.value) == to_string(@value) &&
|
||||||
|
"border-blue-500 ring-1 ring-blue-500"
|
||||||
|
]}>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name={@field.name}
|
||||||
|
value={@value}
|
||||||
|
checked={to_string(@field.value) == to_string(@value)}
|
||||||
|
class="sr-only"
|
||||||
|
/>
|
||||||
|
<span class="flex flex-1">
|
||||||
|
<span class="flex flex-col">
|
||||||
|
<span class="block text-sm font-medium text-gray-900">
|
||||||
|
<%= @title %>
|
||||||
|
</span>
|
||||||
|
<span class="mt-1 flex items-center text-sm text-gray-700">
|
||||||
|
<%= render_slot(@inner_block) %>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<.remix_icon
|
||||||
|
icon="checkbox-circle-fill"
|
||||||
|
class={[
|
||||||
|
"text-blue-600 h-5 w-5",
|
||||||
|
if(to_string(@field.value) == to_string(@value), do: "visible", else: "invisible")
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true">
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
@impl true
|
@impl true
|
||||||
def handle_event("save", %{"deployment_group" => attrs}, socket) do
|
def handle_event("save", %{"deployment_group" => attrs}, socket) do
|
||||||
changeset = change_deployment_group(socket, attrs)
|
changeset = change_deployment_group(socket, attrs)
|
||||||
|
|
|
@ -179,14 +179,6 @@ defmodule Livebook.TeamsTest do
|
||||||
assert "can't be blank" in errors_on(changeset).name
|
assert "can't be blank" in errors_on(changeset).name
|
||||||
end
|
end
|
||||||
|
|
||||||
test "returns changeset errors when the mode is blank", %{user: user, node: node} do
|
|
||||||
team = create_team_hub(user, node)
|
|
||||||
deployment_group = %{build(:deployment_group) | mode: ""}
|
|
||||||
|
|
||||||
assert {:error, changeset} = Teams.create_deployment_group(team, deployment_group)
|
|
||||||
assert "can't be blank" in errors_on(changeset).mode
|
|
||||||
end
|
|
||||||
|
|
||||||
test "returns changeset errors when the mode is invalid", %{user: user, node: node} do
|
test "returns changeset errors when the mode is invalid", %{user: user, node: node} do
|
||||||
team = create_team_hub(user, node)
|
team = create_team_hub(user, node)
|
||||||
deployment_group = %{build(:deployment_group) | mode: "invalid"}
|
deployment_group = %{build(:deployment_group) | mode: "invalid"}
|
||||||
|
|
Loading…
Add table
Reference in a new issue