Improve file select to list files matching search anywhere in the name (#2932)

This commit is contained in:
Jonatan Kłosko 2025-02-13 07:26:48 +01:00 committed by GitHub
parent 2ff2e3a891
commit 7beb71b1cd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -228,7 +228,7 @@ defmodule LivebookWeb.FileSelectComponent do
<div <div
:if={@highlighted_file_infos != []} :if={@highlighted_file_infos != []}
class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2 border-b border-dashed border-grey-200 mb-2 pb-2" class="grid grid-cols-2 lg:grid-cols-3 gap-2 border-b border-dashed border-grey-200 mb-2 pb-2"
> >
<%= for file_info <- Enum.take(@highlighted_file_infos, visible_files_limit()) do %> <%= for file_info <- Enum.take(@highlighted_file_infos, visible_files_limit()) do %>
<.file <.file
@ -242,7 +242,7 @@ defmodule LivebookWeb.FileSelectComponent do
<.more_files_indicator length={length(@highlighted_file_infos)} /> <.more_files_indicator length={length(@highlighted_file_infos)} />
</div> </div>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2"> <div class="grid grid-cols-2 lg:grid-cols-3 gap-2">
<%= for file_info <- Enum.take(@unhighlighted_file_infos, visible_files_limit()) do %> <%= for file_info <- Enum.take(@unhighlighted_file_infos, visible_files_limit()) do %>
<.file <.file
id={"#{@id}-file-#{file_info.id}"} id={"#{@id}-file-#{file_info.id}"}
@ -263,7 +263,7 @@ defmodule LivebookWeb.FileSelectComponent do
defp new_item_section(assigns) do defp new_item_section(assigns) do
~H""" ~H"""
<div <div
class="hidden grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2 border-b border-dashed border-grey-200 mb-2 pb-2" class="hidden grid grid-cols-2 lg:grid-cols-3 gap-2 border-b border-dashed border-grey-200 mb-2 pb-2"
id={@id} id={@id}
> >
<form <form
@ -399,18 +399,21 @@ defmodule LivebookWeb.FileSelectComponent do
<span class={ <span class={
"flex font-medium overflow-hidden whitespace-nowrap #{if(@file_info.is_running, do: "text-green-300", else: "text-gray-500")}" "flex font-medium overflow-hidden whitespace-nowrap #{if(@file_info.is_running, do: "text-green-300", else: "text-gray-500")}"
}> }>
<span>
{@file_info.unhighlighted_before}
</span>
<span <span
:if={@file_info.highlighted != ""} :if={@file_info.highlighted != ""}
class={[ class={[
"font-medium", "font-medium",
@file_info.unhighlighted == "" && "overflow-hidden text-ellipsis", @file_info.unhighlighted_after == "" && "overflow-hidden text-ellipsis",
if(@file_info.is_running, do: "text-green-400", else: "text-gray-900") if(@file_info.is_running, do: "text-green-400", else: "text-gray-900")
]} ]}
> >
{@file_info.highlighted} {@file_info.highlighted}
</span> </span>
<span class="overflow-hidden text-ellipsis"> <span class="overflow-hidden text-ellipsis">
{@file_info.unhighlighted} {@file_info.unhighlighted_after}
</span> </span>
</span> </span>
</button> </button>
@ -628,6 +631,10 @@ defmodule LivebookWeb.FileSelectComponent do
{unhighlighted_file_infos, highlighted_file_infos} = {unhighlighted_file_infos, highlighted_file_infos} =
Enum.split_with(file_infos, &(&1.highlighted == "")) Enum.split_with(file_infos, &(&1.highlighted == ""))
# List files with prefix matching first
highlighted_file_infos =
Enum.sort_by(highlighted_file_infos, &if(&1.unhighlighted_before == "", do: 1, else: 2))
assign(socket, assign(socket,
file_infos: file_infos, file_infos: file_infos,
unhighlighted_file_infos: unhighlighted_file_infos, unhighlighted_file_infos: unhighlighted_file_infos,
@ -637,10 +644,17 @@ defmodule LivebookWeb.FileSelectComponent do
defp annotate_matching(file_infos, prefix) do defp annotate_matching(file_infos, prefix) do
for %{name: name} = info <- file_infos do for %{name: name} = info <- file_infos do
if String.starts_with?(name, prefix) do case String.split(name, prefix, parts: 2) do
%{info | highlighted: prefix, unhighlighted: String.replace_prefix(name, prefix, "")} [unhighlighted_before, unhighlighted_after] ->
else %{
%{info | highlighted: "", unhighlighted: name} info
| unhighlighted_before: unhighlighted_before,
highlighted: prefix,
unhighlighted_after: unhighlighted_after
}
[^name] ->
%{info | unhighlighted_before: "", highlighted: "", unhighlighted_after: name}
end end
end end
end end
@ -685,8 +699,9 @@ defmodule LivebookWeb.FileSelectComponent do
%{ %{
id: Base.url_encode64(file.path, padding: false), id: Base.url_encode64(file.path, padding: false),
name: name, name: name,
unhighlighted_before: "",
highlighted: "", highlighted: "",
unhighlighted: name, unhighlighted_after: name,
file: file, file: file,
is_dir: FileSystem.File.dir?(file), is_dir: FileSystem.File.dir?(file),
is_running: running?(file, running_files), is_running: running?(file, running_files),