Move file system actions into a menu (#1484)

lib/livebook/settings.ex

@@ -50,7 +50,7 @@ defmodule Livebook.Settings do
   end
 
   @doc """
-  Returns all known filesystems with their associated ids.
+  Returns all known file systems with their associated ids.
 
   In case of the local filesystem the id resolves to `"local"`.
   """
@@ -243,9 +243,10 @@ defmodule Livebook.Settings do
   end
 
   @doc """
-  Settings default file system
+  Returns the default file system.
   """
-  def default_file_system do
+  @spec default_file_system() :: Filesystem.t()
+  def default_file_system() do
     case storage().fetch(:filesystem, default_file_system_id()) do
       {:ok, file} -> storage_to_fs(file)
       :error -> Livebook.Config.local_filesystem()
@@ -253,9 +254,10 @@ defmodule Livebook.Settings do
   end
 
   @doc """
-  Get default file system id
+  Returns the default file system id.
   """
-  def default_file_system_id do
+  @spec default_file_system_id() :: file_system_id()
+  def default_file_system_id() do
     case storage().fetch_key(:settings, "global", :default_file_system_id) do
       {:ok, default_file_system_id} -> default_file_system_id
       :error -> "local"
@@ -263,7 +265,8 @@ defmodule Livebook.Settings do
   end
 
   @doc """
-  Settings default file system home
+  Returns the home directory in the default file system.
   """
-  def default_file_system_home, do: FileSystem.File.new(default_file_system())
+  @spec default_file_system_home() :: FileSystem.File.t()
+  def default_file_system_home(), do: FileSystem.File.new(default_file_system())
 end

lib/livebook_web/live/settings_live.ex

@@ -318,7 +318,12 @@ defmodule LivebookWeb.SettingsLive do
     Livebook.Settings.remove_file_system(file_system_id)
 
     file_systems = Livebook.Settings.file_systems()
-    {:noreply, assign(socket, file_systems: file_systems)}
+
+    {:noreply,
+     assign(socket,
+       file_systems: file_systems,
+       default_file_system_id: Livebook.Settings.default_file_system_id()
+     )}
   end
 
   def handle_event("make_default_file_system", %{"id" => file_system_id}, socket) do

lib/livebook_web/live/settings_live/file_systems_component.ex

@@ -13,36 +13,10 @@ defmodule LivebookWeb.SettingsLive.FileSystemsComponent do
             <div class="flex items-center space-x-12">
               <.file_system_info file_system={file_system} />
             </div>
-
+            <.file_system_actions
-            <%= unless is_struct(file_system, FileSystem.Local) do %>
+              file_system_id={file_system_id}
-              <button
+              default_file_system_id={@default_file_system_id}
-                class="button-base button-outlined-red"
+            />
-                phx-click={
-                  with_confirm(
-                    JS.push("detach_file_system", value: %{id: file_system_id}),
-                    title: "Detach file system",
-                    description:
-                      "Are you sure you want to detach this file system? Any sessions using it will keep the access until they get closed.",
-                    confirm_text: "Detach",
-                    confirm_icon: "close-circle-line"
-                  )
-                }
-              >
-                Detach
-              </button>
-            <% end %>
-          </div>
-          <div class="flex justify-end">
-            <%= unless @default_file_system_id == file_system_id do %>
-              <button
-                type="submit"
-                phx-click="make_default_file_system"
-                class="button-base button-outlined-gray"
-                phx-value-id={file_system_id}
-              >
-                Make default
-              </button>
-            <% end %>
           </div>
         <% end %>
       </div>
@@ -68,4 +42,59 @@ defmodule LivebookWeb.SettingsLive.FileSystemsComponent do
     <.labeled_text label="Bucket URL"><%= @file_system.bucket_url %></.labeled_text>
     """
   end
+
+  defp file_system_actions(assigns) do
+    ~H"""
+    <div class="flex items-center space-x-2">
+      <%= if @default_file_system_id == @file_system_id do %>
+        <span class="inline-flex items-center font-sans rounded-full px-2.5 py-0.5 text-xs font-medium bg-gray-100 bg-gray-100 text-gray-800">
+          Default
+        </span>
+      <% end %>
+      <%= if @default_file_system_id != @file_system_id or @file_system_id != "local" do %>
+        <.menu id={"file-system-#{@file_system_id}-menu"}>
+          <:toggle>
+            <button class="icon-button" aria-label="open file system menu" type="button">
+              <.remix_icon icon="more-2-fill" class="text-xl" />
+            </button>
+          </:toggle>
+          <:content>
+            <%= if @default_file_system_id != @file_system_id do %>
+              <button
+                type="button"
+                role="menuitem"
+                class="menu-item text-gray-600"
+                phx-click="make_default_file_system"
+                phx-value-id={@file_system_id}
+              >
+                <.remix_icon icon="star-line" />
+                <span class="font-medium">Make default</span>
+              </button>
+            <% end %>
+            <%= if @file_system_id != "local" do %>
+              <button
+                type="button"
+                role="menuitem"
+                class="menu-item text-red-600"
+                phx-click={
+                  with_confirm(
+                    JS.push("detach_file_system", value: %{id: @file_system_id}),
+                    title: "Detach file system",
+                    description:
+                      "Are you sure you want to detach this file system? Any sessions using it will keep the access until they get closed.",
+                    confirm_text: "Detach",
+                    confirm_icon: "close-circle-line"
+                  )
+                }
+              >
+                <.remix_icon icon="delete-bin-line" />
+                <span class="font-medium">Detach</span>
+              </button>
+            <% end %>
+          </:content>
+        </.menu>
+      <% end %>
+    </div>
+    """
+  end
 end