Apply radio cards

lib/livebook/teams/deployment_group.ex

@@ -23,7 +23,7 @@ defmodule Livebook.Teams.DeploymentGroup do
   @primary_key {:id, :string, autogenerate: false}
   embedded_schema do
     field :name, :string
-    field :mode, Ecto.Enum, values: [:online, :offline]
+    field :mode, Ecto.Enum, values: [:online, :offline], default: :online
     field :hub_id, :string
     field :clustering, Ecto.Enum, values: [:fly_io]
     field :zta_provider, Ecto.Enum, values: @zta_providers

lib/livebook_web/live/hub/edit/team_component.ex

@@ -312,7 +312,7 @@ defmodule LivebookWeb.Hub.Edit.TeamComponent do
         :if={@live_action == :new_deployment_group}
         id="deployment-group-modal"
         show
-        width={:medium}
+        width={:big}
         patch={~p"/hub/#{@hub.id}"}
       >
         <.live_component

lib/livebook_web/live/hub/teams/deployment_group_component.ex

@@ -36,7 +36,7 @@ defmodule LivebookWeb.Hub.Teams.DeploymentGroupComponent do
                   Online
                 </div>
               <% 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
                 </div>
               <% end %>

lib/livebook_web/live/hub/teams/deployment_group_form_component.ex

@@ -45,6 +45,23 @@ defmodule LivebookWeb.Hub.Teams.DeploymentGroupFormComponent do
           class="basis-1/2 grow"
         >
           <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
               field={@form[:name]}
               label="Name"
@@ -53,19 +70,6 @@ defmodule LivebookWeb.Hub.Teams.DeploymentGroupFormComponent do
               autocomplete="off"
               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} />
 
@@ -86,6 +90,43 @@ defmodule LivebookWeb.Hub.Teams.DeploymentGroupFormComponent do
     """
   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
   def handle_event("save", %{"deployment_group" => attrs}, socket) do
     changeset = change_deployment_group(socket, attrs)

test/livebook_teams/teams_test.exs

@@ -179,14 +179,6 @@ defmodule Livebook.TeamsTest do
       assert "can't be blank" in errors_on(changeset).name
     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
       team = create_team_hub(user, node)
       deployment_group = %{build(:deployment_group) | mode: "invalid"}