From 30344b06364db5c33f8d7aedabe66ba7539425be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Valim?= Date: Tue, 23 Aug 2022 12:38:39 +0200 Subject: [PATCH] Create LayoutHelpers to encapsulate the whole home layout instead of sidebar (#1352) --- lib/livebook_web/live/explore_live.ex | 90 +++--- lib/livebook_web/live/home_live.ex | 191 ++++++------- lib/livebook_web/live/hub_live.ex | 148 +++++----- .../{sidebar_helpers.ex => layout_helpers.ex} | 157 ++++++----- lib/livebook_web/live/settings_live.ex | 264 +++++++++--------- lib/livebook_web/router.ex | 2 +- 6 files changed, 416 insertions(+), 436 deletions(-) rename lib/livebook_web/live/{sidebar_helpers.ex => layout_helpers.ex} (56%) diff --git a/lib/livebook_web/live/explore_live.ex b/lib/livebook_web/live/explore_live.ex index 0077bf937..c14789969 100644 --- a/lib/livebook_web/live/explore_live.ex +++ b/lib/livebook_web/live/explore_live.ex @@ -2,9 +2,8 @@ defmodule LivebookWeb.ExploreLive do use LivebookWeb, :live_view import LivebookWeb.SessionHelpers - import LivebookWeb.UserHelpers - alias LivebookWeb.{SidebarHelpers, ExploreHelpers, PageHelpers} + alias LivebookWeb.{LayoutHelpers, ExploreHelpers, PageHelpers} alias Livebook.Notebook.Explore on_mount LivebookWeb.SidebarHook @@ -24,62 +23,51 @@ defmodule LivebookWeb.ExploreLive do @impl true def render(assigns) do ~H""" -
- -
- -
-
- -

- Check out a number of examples showcasing various parts of the Elixir ecosystem. - Click on any notebook you like and start playing around with it! + +

+
+ +

+ Check out a number of examples showcasing various parts of the Elixir ecosystem. + Click on any notebook you like and start playing around with it! +

+
+
+
+

+ <%= @lead_notebook_info.title %> +

+

+ <%= @lead_notebook_info.details.description %>

-
-
-
-

- <%= @lead_notebook_info.title %> -

-

- <%= @lead_notebook_info.details.description %> -

-
- <%= live_patch("Let's go", - to: Routes.explore_path(@socket, :notebook, @lead_notebook_info.slug), - class: "button-base button-blue" - ) %> -
-
- -
- <% # Note: it's fine to use stateless components in this comprehension, - # because @notebook_infos never change %> - <%= for info <- @notebook_infos do %> - - <% end %> + - <%= for group_info <- Explore.group_infos() do %> - <.notebook_group group_info={group_info} socket={@socket} /> +
+
+ <% # Note: it's fine to use stateless components in this comprehension, + # because @notebook_infos never change %> + <%= for info <- @notebook_infos do %> + <% end %>
+ <%= for group_info <- Explore.group_infos() do %> + <.notebook_group group_info={group_info} socket={@socket} /> + <% end %>
-
- - <.current_user_modal current_user={@current_user} /> + """ end diff --git a/lib/livebook_web/live/home_live.ex b/lib/livebook_web/live/home_live.ex index 0c601b9d1..a956addc0 100644 --- a/lib/livebook_web/live/home_live.ex +++ b/lib/livebook_web/live/home_live.ex @@ -2,9 +2,8 @@ defmodule LivebookWeb.HomeLive do use LivebookWeb, :live_view import LivebookWeb.SessionHelpers - import LivebookWeb.UserHelpers - alias LivebookWeb.{ExploreHelpers, PageHelpers, SidebarHelpers} + alias LivebookWeb.{ExploreHelpers, PageHelpers, LayoutHelpers} alias Livebook.{Sessions, Session, LiveMarkdown, Notebook, FileSystem} on_mount LivebookWeb.SidebarHook @@ -37,106 +36,100 @@ defmodule LivebookWeb.HomeLive do @impl true def render(assigns) do ~H""" -
- <.live_region role="alert" /> - -
- - - <.remix_icon icon="add-line" /> - New notebook - - - <.update_notification version={@new_version} instructions_url={@update_instructions_url} /> - <.memory_notification memory={@memory} app_service_url={@app_service_url} /> -
-
- - -
- -
- <.live_component - module={LivebookWeb.FileSelectComponent} - id="home-file-select" - file={@file} - extnames={[LiveMarkdown.extension()]} - running_files={files(@sessions)} - > -
- - <%= if file_running?(@file, @sessions) do %> - <%= live_redirect("Join session", - to: Routes.session_path(@socket, :page, session_id_by_file(@file, @sessions)), - class: "button-base button-blue" - ) %> - <% else %> - - - - <% end %> -
- -
- -
-
-

- Explore -

- <%= live_redirect to: Routes.explore_path(@socket, :page), - class: "flex items-center text-blue-600" do %> - See all - <.remix_icon icon="arrow-right-line" class="align-middle ml-1" /> - <% end %> -
-
- <% # Note: it's fine to use stateless components in this comprehension, - # because @notebook_infos never change %> - <%= for info <- @notebook_infos do %> - - <% end %> -
-
-
- <.live_component - module={LivebookWeb.HomeLive.SessionListComponent} - id="session-list" - sessions={@sessions} - memory={@memory} - /> + + <:topbar_action> + + <.remix_icon icon="add-line" /> + New notebook + + + <.update_notification version={@new_version} instructions_url={@update_instructions_url} /> + <.memory_notification memory={@memory} app_service_url={@app_service_url} /> +
+
+ +
-
-
- <.current_user_modal current_user={@current_user} /> +
+ <.live_component + module={LivebookWeb.FileSelectComponent} + id="home-file-select" + file={@file} + extnames={[LiveMarkdown.extension()]} + running_files={files(@sessions)} + > +
+ + <%= if file_running?(@file, @sessions) do %> + <%= live_redirect("Join session", + to: Routes.session_path(@socket, :page, session_id_by_file(@file, @sessions)), + class: "button-base button-blue" + ) %> + <% else %> + + + + <% end %> +
+ +
+ +
+
+

+ Explore +

+ <%= live_redirect to: Routes.explore_path(@socket, :page), + class: "flex items-center text-blue-600" do %> + See all + <.remix_icon icon="arrow-right-line" class="align-middle ml-1" /> + <% end %> +
+
+ <% # Note: it's fine to use stateless components in this comprehension, + # because @notebook_infos never change %> + <%= for info <- @notebook_infos do %> + + <% end %> +
+
+
+ <.live_component + module={LivebookWeb.HomeLive.SessionListComponent} + id="session-list" + sessions={@sessions} + memory={@memory} + /> +
+
+ <%= if @live_action == :close_session do %> <.modal id="close-session-modal" show class="w-full max-w-xl" patch={@self_path}> diff --git a/lib/livebook_web/live/hub_live.ex b/lib/livebook_web/live/hub_live.ex index 846f70119..2c31e083f 100644 --- a/lib/livebook_web/live/hub_live.ex +++ b/lib/livebook_web/live/hub_live.ex @@ -1,11 +1,9 @@ defmodule LivebookWeb.HubLive do use LivebookWeb, :live_view - import LivebookWeb.UserHelpers - alias Livebook.Hubs alias Livebook.Hubs.Provider - alias LivebookWeb.{PageHelpers, SidebarHelpers} + alias LivebookWeb.{PageHelpers, LayoutHelpers} alias Phoenix.LiveView.JS on_mount LivebookWeb.SidebarHook @@ -23,85 +21,81 @@ defmodule LivebookWeb.HubLive do @impl true def render(assigns) do ~H""" -
- <.live_region role="alert" /> - + +
+
+ +

+ Manage your Livebooks in the cloud with Hubs. +

+
-
-
-
- -

- Manage your Livebooks in the cloud with Hubs. -

+
+

+ 1. Select your Hub service +

+ +
+ <.card_item id="fly" selected={@selected_provider} title="Fly"> + <:logo> + <%= Phoenix.HTML.raw(File.read!("static/images/fly.svg")) %> + + <:headline> + Deploy notebooks to your Fly account. + + + + <.card_item id="enterprise" selected={@selected_provider} title="Livebook Enterprise"> + <:logo> + Livebook Enterprise logo + + <:headline> + Control access, manage secrets, and deploy notebooks within your team. + +
+
+ <%= if @selected_provider do %>

- 1. Select your Hub service + 2. Configure your Hub

-
- <.card_item id="fly" selected={@selected_provider} title="Fly"> - <:logo> - <%= Phoenix.HTML.raw(File.read!("static/images/fly.svg")) %> - - <:headline> - Deploy notebooks to your Fly account. - - + <%= if @selected_provider == "fly" do %> + <.live_component + module={LivebookWeb.HubLive.FlyComponent} + id="fly-form" + operation={@operation} + hub={@hub} + /> + <% end %> - <.card_item id="enterprise" selected={@selected_provider} title="Livebook Enterprise"> - <:logo> - Livebook Enterprise logo - - <:headline> - Control access, manage secrets, and deploy notebooks within your team and company. - - -
+ <%= if @selected_provider == "enterprise" do %> +
+ Livebook Enterprise is currently in closed beta. If you want to learn more, click here. +
+ <% end %>
- - <%= if @selected_provider do %> -
-

- 2. Configure your Hub -

- - <%= if @selected_provider == "fly" do %> - <.live_component - module={LivebookWeb.HubLive.FlyComponent} - id="fly-form" - operation={@operation} - hub={@hub} - /> - <% end %> - - <%= if @selected_provider == "enterprise" do %> -
- Livebook Enterprise is currently in closed beta. If you want to learn more, click here. -
- <% end %> -
- <% end %> -
+ <% end %>
- - <.current_user_modal current_user={@current_user} /> -
+ """ end @@ -136,11 +130,17 @@ defmodule LivebookWeb.HubLive do hub = Hubs.fetch_hub!(id) provider = Provider.type(hub) - {:noreply, assign(socket, operation: :edit, hub: hub, selected_provider: provider)} + {:noreply, + assign(socket, + operation: :edit, + hub: hub, + selected_provider: provider, + current_page: Routes.hub_path(socket, :edit, hub.id) + )} end def handle_params(_params, _url, socket) do - {:noreply, assign(socket, operation: :new)} + {:noreply, assign(socket, operation: :new, current_page: Routes.hub_path(socket, :new))} end @impl true diff --git a/lib/livebook_web/live/sidebar_helpers.ex b/lib/livebook_web/live/layout_helpers.ex similarity index 56% rename from lib/livebook_web/live/sidebar_helpers.ex rename to lib/livebook_web/live/layout_helpers.ex index cc069e270..62f41022e 100644 --- a/lib/livebook_web/live/sidebar_helpers.ex +++ b/lib/livebook_web/live/layout_helpers.ex @@ -1,4 +1,4 @@ -defmodule LivebookWeb.SidebarHelpers do +defmodule LivebookWeb.LayoutHelpers do use Phoenix.Component import LivebookWeb.LiveHelpers @@ -8,58 +8,75 @@ defmodule LivebookWeb.SidebarHelpers do alias LivebookWeb.Router.Helpers, as: Routes @doc """ - Renders the mobile toggle for the sidebar. + The layout used in the non-session pages. """ - def toggle(assigns) do - assigns = assign_new(assigns, :inner_block, fn -> [] end) + def layout(assigns) do + assigns = assign_new(assigns, :topbar_action, fn -> [] end) ~H""" -
-
- - +
+ <.live_region role="alert" /> + <.sidebar + socket={@socket} + current_page={@current_page} + current_user={@current_user} + saved_hubs={@saved_hubs} + /> +
+
+ <.topbar_sidebar_toggle /> + +
+ <%= render_slot(@inner_block) %>
- """ end - @doc """ - Renders sidebar container. - """ - def sidebar(assigns) do + defp sidebar(assigns) do ~H"""
- <.hub_section socket={@socket} hubs={@saved_hubs} /> + <.hub_section socket={@socket} hubs={@saved_hubs} current_page={@current_page} />
<%= if Livebook.Config.shutdown_enabled?() do %> @@ -149,9 +166,15 @@ defmodule LivebookWeb.SidebarHelpers do end defp sidebar_link(assigns) do + assigns = assign_new(assigns, :icon_style, fn -> nil end) + ~H""" <%= live_redirect to: @to, class: "h-7 flex items-center hover:text-white #{sidebar_link_text_color(@to, @current)} border-l-4 #{sidebar_link_border_color(@to, @current)} hover:border-white" do %> - <.remix_icon icon={@icon} class="text-lg leading-6 w-[56px] flex justify-center" /> + <.remix_icon + icon={@icon} + class="text-lg leading-6 w-[56px] flex justify-center" + style={@icon_style} + /> <%= @title %> @@ -165,41 +188,25 @@ defmodule LivebookWeb.SidebarHelpers do
-
- HUBS -
-
- <%= live_redirect to: Routes.hub_path(@socket, :page), - class: "flex absolute right-5 items-center justify-center - text-gray-400 hover:text-white hover:border-white" do %> - <.remix_icon icon="add-line" /> - <% end %> -
+ HUBS
<%= for hub <- @hubs do %> - <%= live_redirect to: Routes.hub_path(@socket, :edit, hub.id), class: "h-7 flex items-center cursor-pointer text-gray-400 hover:text-white" do %> - <.remix_icon - class="text-lg leading-6 w-[56px] flex justify-center" - icon="checkbox-blank-circle-fill" - style={"color: #{hub.color}"} - /> - - - <%= hub.name %> - - <% end %> + <.sidebar_link + title={hub.name} + icon="checkbox-blank-circle-fill" + icon_style={"color: #{hub.color}"} + to={Routes.hub_path(@socket, :edit, hub.id)} + current={@current_page} + /> <% end %> -
- <%= live_redirect to: Routes.hub_path(@socket, :page), class: "h-7 flex items-center cursor-pointer text-gray-400 hover:text-white" do %> - <.remix_icon class="text-lg leading-6 w-[56px] flex justify-center" icon="add-line" /> - - - Add Hub - - <% end %> -
+ <.sidebar_link + title="Add Hub" + icon="add-line" + to={Routes.hub_path(@socket, :new)} + current={@current_page} + />
<% end %> diff --git a/lib/livebook_web/live/settings_live.ex b/lib/livebook_web/live/settings_live.ex index 22c2048b4..debced8cf 100644 --- a/lib/livebook_web/live/settings_live.ex +++ b/lib/livebook_web/live/settings_live.ex @@ -1,9 +1,7 @@ defmodule LivebookWeb.SettingsLive do use LivebookWeb, :live_view - import LivebookWeb.UserHelpers - - alias LivebookWeb.{SidebarHelpers, PageHelpers} + alias LivebookWeb.{LayoutHelpers, PageHelpers} on_mount LivebookWeb.SidebarHook @@ -24,149 +22,143 @@ defmodule LivebookWeb.SettingsLive do @impl true def render(assigns) do ~H""" -
- -
- -
- -
-
- -

- Here you can change global Livebook configuration. Keep in mind - that this configuration gets persisted and will be restored on application - launch. -

-
- -
-

- About -

-
-
- <%= if app_name = Livebook.Config.app_service_name() do %> - <.labeled_text label="Application"> - <%= if app_url = Livebook.Config.app_service_url() do %> - - <%= app_name %> - - <% else %> + +
+ +
+
+ +

+ Here you can change global Livebook configuration. Keep in mind + that this configuration gets persisted and will be restored on application + launch. +

+
+ +
+

+ About +

+
+
+ <%= if app_name = Livebook.Config.app_service_name() do %> + <.labeled_text label="Application"> + <%= if app_url = Livebook.Config.app_service_url() do %> + <%= app_name %> - <% end %> - - <% end %> - <.labeled_text label="Livebook"> - v<%= Application.spec(:livebook, :vsn) %> + + <% else %> + <%= app_name %> + <% end %> - <.labeled_text label="Elixir"> - v<%= System.version() %> - -
- - <%= live_redirect to: Routes.live_dashboard_path(@socket, :home), - class: "button-base button-outlined-gray" do %> - <.remix_icon icon="dashboard-2-line" class="align-middle mr-1" /> - Open dashboard <% end %> + <.labeled_text label="Livebook"> + v<%= Application.spec(:livebook, :vsn) %> + + <.labeled_text label="Elixir"> + v<%= System.version() %> +
-
- -
-

- Updates -

-
- <.switch_checkbox - name="update_check_enabled" - label="Show banner when a new Livebook version is available" - checked={@update_check_enabled} - /> -
-
- -
-

- Autosave -

-

- The directory to keep unsaved notebooks. -

- <.autosave_path_select state={@autosave_path_state} /> -
- -
-

- File systems -

-

- File systems are used to store notebooks. The local disk filesystem - is visible only to the current machine, but alternative file systems - are available, such as S3-based storages. -

- + + <%= live_redirect to: Routes.live_dashboard_path(@socket, :home), + class: "button-base button-outlined-gray" do %> + <.remix_icon icon="dashboard-2-line" class="align-middle mr-1" /> + Open dashboard + <% end %>
- -
-
-

- User settings -

-

- The configuration in this section changes only your Livebook - experience and is saved in your browser. -

-
- -
-

- Code editor -

-
- <.switch_checkbox - name="editor_auto_completion" - label="Show completion list while typing" - checked={false} - /> - <.switch_checkbox - name="editor_auto_signature" - label="Show function signature while typing" - checked={false} - /> - <.switch_checkbox name="editor_font_size" label="Increase font size" checked={false} /> - <.switch_checkbox - name="editor_high_contrast" - label="Use high contrast theme" - checked={false} - /> - <.switch_checkbox - name="editor_markdown_word_wrap" - label="Wrap words in Markdown" - checked={false} - /> -
+ +
+

+ Updates +

+
+ <.switch_checkbox + name="update_check_enabled" + label="Show banner when a new Livebook version is available" + checked={@update_check_enabled} + /> +
+
+ +
+

+ Autosave +

+

+ The directory to keep unsaved notebooks. +

+ <.autosave_path_select state={@autosave_path_state} /> +
+ +
+

+ File systems +

+

+ File systems are used to store notebooks. The local disk filesystem + is visible only to the current machine, but alternative file systems + are available, such as S3-based storages. +

+ +
+
+ +
+
+

+ User settings +

+

+ The configuration in this section changes only your Livebook + experience and is saved in your browser. +

+
+ +
+

+ Code editor +

+
+ <.switch_checkbox + name="editor_auto_completion" + label="Show completion list while typing" + checked={false} + /> + <.switch_checkbox + name="editor_auto_signature" + label="Show function signature while typing" + checked={false} + /> + <.switch_checkbox name="editor_font_size" label="Increase font size" checked={false} /> + <.switch_checkbox + name="editor_high_contrast" + label="Use high contrast theme" + checked={false} + /> + <.switch_checkbox + name="editor_markdown_word_wrap" + label="Wrap words in Markdown" + checked={false} + />
-
- - <.current_user_modal current_user={@current_user} /> + <%= if @live_action == :add_file_system do %> <.modal diff --git a/lib/livebook_web/router.ex b/lib/livebook_web/router.ex index 70af03b32..69d152808 100644 --- a/lib/livebook_web/router.ex +++ b/lib/livebook_web/router.ex @@ -56,7 +56,7 @@ defmodule LivebookWeb.Router do live "/explore/notebooks/:slug", ExploreLive, :notebook if Application.compile_env(:livebook, :feature_flags)[:hub] do - live "/hub", HubLive, :page + live "/hub", HubLive, :new live "/hub/:id", HubLive, :edit end