Hub header layout helper (#2408)

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>

lib/livebook_web/components/teams_components.ex

@@ -0,0 +1,39 @@
+defmodule LivebookWeb.TeamsComponents do
+  use Phoenix.Component
+
+  alias LivebookWeb.LayoutHelpers
+
+  @doc """
+  Renders the teams header with the badges.
+  """
+  attr :hub, Livebook.Hubs.Team, required: true
+  attr :hub_metadata, Livebook.Hubs.Metadata, required: true
+  attr :default?, :boolean, required: true
+
+  def header(assigns) do
+    ~H"""
+    <LayoutHelpers.title>
+      <div class="flex gap-2 items-center">
+        <div class="flex justify-center">
+          <span class="relative">
+            <%= @hub.hub_emoji %>
+            <div class={[
+              "absolute w-[10px] h-[10px] border-white border-2 rounded-full right-0 bottom-1",
+              if(@hub_metadata.connected?, do: "bg-green-400", else: "bg-red-400")
+            ]} />
+          </span>
+        </div>
+        <%= @hub.hub_name %>
+        <span class="bg-green-100 text-green-800 text-xs px-2.5 py-0.5 rounded cursor-default">
+          Livebook Teams
+        </span>
+        <%= if @default? do %>
+          <span class="bg-blue-100 text-blue-800 text-xs px-2.5 py-0.5 rounded cursor-default">
+            Default
+          </span>
+        <% end %>
+      </div>
+    </LayoutHelpers.title>
+    """
+  end
+end

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

@@ -5,6 +5,7 @@ defmodule LivebookWeb.Hub.Edit.TeamComponent do
   alias Livebook.Hubs.Provider
   alias Livebook.Teams
   alias LivebookWeb.LayoutHelpers
+  alias LivebookWeb.TeamsComponents
   alias LivebookWeb.NotFoundError
 
   @impl true
@@ -75,30 +76,7 @@ defmodule LivebookWeb.Hub.Edit.TeamComponent do
         <div id={"#{@id}-component"}>
           <div class="mb-8 flex flex-col space-y-10">
             <div class="flex flex-col space-y-2">
-              <LayoutHelpers.title>
-                <div class="flex gap-2 items-center">
-                  <div class="flex justify-center">
-                    <span class="relative">
-                      <%= @hub.hub_emoji %>
-
-                      <div class={[
-                        "absolute w-[10px] h-[10px] border-white border-2 rounded-full right-0 bottom-1",
-                        if(@hub_metadata.connected?, do: "bg-green-400", else: "bg-red-400")
-                      ]} />
-                    </span>
-                  </div>
-                  <%= @hub.hub_name %>
-                  <span class="bg-green-100 text-green-800 text-xs px-2.5 py-0.5 rounded cursor-default">
-                    Livebook Teams
-                  </span>
-                  <%= if @default? do %>
-                    <span class="bg-blue-100 text-blue-800 text-xs px-2.5 py-0.5 rounded cursor-default">
-                      Default
-                    </span>
-                  <% end %>
-                </div>
-              </LayoutHelpers.title>
-
+              <TeamsComponents.header hub={@hub} hub_metadata={@hub_metadata} default?={@default?} />
               <p class="text-sm flex flex-row space-x-6 text-gray-700">
                 <a href={org_url(@hub, "/")} class="hover:text-blue-600">
                   <.remix_icon icon="mail-line" /> Invite users

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

@@ -2,6 +2,7 @@ defmodule LivebookWeb.Hub.Teams.DeploymentGroupLive do
   use LivebookWeb, :live_view
 
   alias LivebookWeb.LayoutHelpers
+  alias LivebookWeb.TeamsComponents
   alias Livebook.Hubs
   alias Livebook.Teams
   alias Livebook.Hubs.Provider
@@ -74,29 +75,7 @@ defmodule LivebookWeb.Hub.Teams.DeploymentGroupLive do
           <div id={"#{@hub.id}-component"}>
             <div class="mb-8 flex flex-col space-y-10">
               <div class="flex flex-col space-y-2">
-                <LayoutHelpers.title>
-                  <div class="flex gap-2 items-center">
-                    <div class="flex justify-center">
-                      <span class="relative">
-                        <%= @hub.hub_emoji %>
-
-                        <div class={[
-                          "absolute w-[10px] h-[10px] border-white border-2 rounded-full right-0 bottom-1",
-                          if(@hub_metadata.connected?, do: "bg-green-400", else: "bg-red-400")
-                        ]} />
-                      </span>
-                    </div>
-                    <%= @hub.hub_name %>
-                    <span class="bg-green-100 text-green-800 text-xs px-2.5 py-0.5 rounded cursor-default">
-                      Livebook Teams
-                    </span>
-                    <%= if @default? do %>
-                      <span class="bg-blue-100 text-blue-800 text-xs px-2.5 py-0.5 rounded cursor-default">
-                        Default
-                      </span>
-                    <% end %>
-                  </div>
-                </LayoutHelpers.title>
+                <TeamsComponents.header hub={@hub} hub_metadata={@hub_metadata} default?={@default?} />
                 <p class="text-sm flex flex-row space-x-6 text-gray-700">
                   <.link patch={~p"/hub/#{@hub.id}"} class="hover:text-blue-600 cursor-pointer">
                     <.remix_icon icon="arrow-left-line" /> Back to Hub