Tidy up hubs onboarding

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

@@ -2,6 +2,7 @@ defmodule LivebookWeb.Hub.Edit.EnterpriseComponent do
   use LivebookWeb, :live_component
 
   alias Livebook.Hubs.Enterprise
+  alias LivebookWeb.LayoutHelpers
 
   @impl true
   def update(assigns, socket) do
@@ -16,7 +17,26 @@ defmodule LivebookWeb.Hub.Edit.EnterpriseComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div id={"#{@id}-component"}>
+    <div id={"#{@id}-component"} class="space-y-8">
+      <div class="flex relative">
+        <LayoutHelpers.title text={"#{@hub.hub_emoji} #{@hub.hub_name}"} />
+
+        <button
+          phx-click={
+            with_confirm(
+              JS.push("delete_hub", value: %{id: @hub.id}),
+              title: "Delete hub",
+              description: "Are you sure you want to delete this hub?",
+              confirm_text: "Delete",
+              confirm_icon: "close-circle-line"
+            )
+          }
+          class="absolute right-0 button-base button-red"
+        >
+          Delete hub
+        </button>
+      </div>
+
       <div class="flex flex-col space-y-10">
         <div class="flex flex-col space-y-2">
           <h2 class="text-xl text-gray-800 font-medium pb-2 border-b border-gray-200">

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

@@ -2,6 +2,7 @@ defmodule LivebookWeb.Hub.Edit.FlyComponent do
   use LivebookWeb, :live_component
 
   alias Livebook.Hubs.{Fly, FlyClient}
+  alias LivebookWeb.LayoutHelpers
 
   @impl true
   def update(assigns, socket) do
@@ -34,7 +35,25 @@ defmodule LivebookWeb.Hub.Edit.FlyComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div id={"#{@id}-component"}>
+    <div id={"#{@id}-component"} class="space-y-8">
+      <div class="flex relative">
+        <LayoutHelpers.title text={"#{@hub.hub_emoji} #{@hub.hub_name}"} />
+
+        <button
+          phx-click={
+            with_confirm(
+              JS.push("delete_hub", value: %{id: @hub.id}),
+              title: "Delete hub",
+              description: "Are you sure you want to delete this hub?",
+              confirm_text: "Delete",
+              confirm_icon: "close-circle-line"
+            )
+          }
+          class="absolute right-0 button-base button-red"
+        >
+          Delete hub
+        </button>
+      </div>
       <div class="flex flex-col space-y-10">
         <div class="flex flex-col space-y-2">
           <div class="flex items-center justify-between border border-gray-200 rounded-lg p-4">

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

@@ -2,6 +2,7 @@ defmodule LivebookWeb.Hub.Edit.PersonalComponent do
   use LivebookWeb, :live_component
 
   alias Livebook.Hubs.Personal
+  alias LivebookWeb.LayoutHelpers
 
   @impl true
   def update(assigns, socket) do
@@ -16,7 +17,15 @@ defmodule LivebookWeb.Hub.Edit.PersonalComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div id={"#{@id}-component"}>
+    <div id={"#{@id}-component"} class="space-y-8">
+      <div class="space-y-4">
+        <LayoutHelpers.title text={"#{@hub.hub_emoji} #{@hub.hub_name}"} />
+
+        <p class="text-gray-700">
+          Your personal hub. Only you can see and access the data in it.
+        </p>
+      </div>
+
       <div class="flex flex-col space-y-10">
         <div class="flex flex-col space-y-2">
           <h2 class="text-xl text-gray-800 font-medium pb-2 border-b border-gray-200">

lib/livebook_web/live/hub/edit_live.ex

@@ -35,27 +35,7 @@ defmodule LivebookWeb.Hub.EditLive do
       current_user={@current_user}
       saved_hubs={@saved_hubs}
     >
-      <div class="p-4 md:px-12 md:py-7 max-w-screen-md mx-auto space-y-8">
-        <div class="flex relative">
-          <LayoutHelpers.title text="Edit Hub" />
-
-          <button
-            :if={@type != "personal"}
-            phx-click={
-              with_confirm(
-                JS.push("delete_hub", value: %{id: @hub.id}),
-                title: "Delete hub",
-                description: "Are you sure you want to delete this hub?",
-                confirm_text: "Delete",
-                confirm_icon: "close-circle-line"
-              )
-            }
-            class="absolute right-0 button-base button-red"
-          >
-            Delete hub
-          </button>
-        </div>
-
+      <div class="p-4 md:px-12 md:py-7 max-w-screen-md mx-auto">
         <%= case @type do %>
           <% "fly" -> %>
             <.live_component

lib/livebook_web/live/hub/new_live.ex

@@ -18,7 +18,47 @@ defmodule LivebookWeb.Hub.NewLive do
   @impl true
   def render(%{enabled?: false} = assigns) do
     ~H"""
-    TODO
+    <LayoutHelpers.layout current_page="/hub" current_user={@current_user} saved_hubs={@saved_hubs}>
+      <div class="p-4 md:px-12 md:py-7 max-w-screen-md mx-auto space-y-6 text-lg">
+        <div>
+          <LayoutHelpers.title text="Hubs are coming soon!" />
+          <p class="mt-4">
+            Deploy applications, share secrets, templates, and more with Livebook Hubs.
+          </p>
+        </div>
+        <p class="text-gray-700">
+          Each Livebook user has their own personal Hub and soon they will be able to deploy
+          their personal notebooks to
+          <a
+            class="underline text-blue-700 hover:text-blue-900 visited:text-purple-900"
+            href="https://fly.io/"
+            target="_blank"
+          >
+            Fly.io
+          </a>
+          and <a
+            class="underline text-blue-700 hover:text-blue-900 visited:text-purple-900"
+            href="https://huggingface.co/"
+            target="_blank"
+          >Hugging Face</a>.
+        </p>
+        <p class="text-gray-700">
+          We are also working on <span class="font-bold">Livebook Teams</span>, which were
+          designed from the ground up to deploy notebooks within your organization.
+          <span class="font-bold">Livebook Teams</span> runs on your own infrastructure
+          to provide essential features for secure collaboration between team members,
+          such as digital signing of notebooks, safe sharing of secrets, and more.
+          To learn more, <a
+            class="underline text-blue-700 hover:text-blue-900 visited:text-purple-900"
+            href="https://docs.google.com/forms/d/e/1FAIpQLSeAABUT042XswwI15RBGiEJ3lSUFF9QSiaRhhzk_j6v-B3quA/viewform"
+            target="_blank"
+          >get in touch</a>!
+        </p>
+        <p class="text-gray-700">
+          - The Livebook Team
+        </p>
+      </div>
+    </LayoutHelpers.layout>
     """
   end