From b298e79d0691998047ce334c1c63dce387bdaebe Mon Sep 17 00:00:00 2001
From: Jamil <jamilbk@users.noreply.github.com>
Date: Tue, 1 Oct 2024 09:14:45 -0700
Subject: [PATCH] fix(portal): Minor UI consistency fixes for resource/group
 select (#6860)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- [x] Spacing consistency
- [x] Border radius consistency
- [x] Minor grammar
- [x] Dismiss select when item is selected
- [x] Add shadow to stand out from rest of form
- [x] Prevent from opening when disabled
- [x] Use `cursor-not-allowed` when disabled for consistency with other
form elements


Before


<img width="670" alt="Screenshot 2024-09-27 at 5 01 38 PM"
src="https://github.com/user-attachments/assets/79e3a4c6-4d23-4edd-93b2-149acc58c37b">



After


<img width="677" alt="Screenshot 2024-09-27 at 5 11 48 PM"
src="https://github.com/user-attachments/assets/e1453c05-fed7-4d87-a176-6f6ce1267488">

---------

Signed-off-by: Jamil <jamilbk@users.noreply.github.com>
Co-authored-by: Andrew Dryga <a@firezone.dev>
---
 .../form_components/select_with_groups.ex     | 47 +++++++++++--------
 elixir/apps/web/lib/web/live/policies/edit.ex |  4 +-
 elixir/apps/web/lib/web/live/policies/new.ex  |  4 +-
 3 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/elixir/apps/web/lib/web/components/form_components/select_with_groups.ex b/elixir/apps/web/lib/web/components/form_components/select_with_groups.ex
index 0f229e2e2..3d80c01dd 100644
--- a/elixir/apps/web/lib/web/components/form_components/select_with_groups.ex
+++ b/elixir/apps/web/lib/web/components/form_components/select_with_groups.ex
@@ -165,7 +165,7 @@ defmodule Web.Components.FormComponents.SelectWithGroups do
           autocomplete={false}
           class={[
             input_class(),
-            not @disabled && "cursor-pointer",
+            (@disabled && "cursor-not-allowed") || "cursor-pointer",
             @errors != [] && input_has_errors_class()
           ]}
           value={@value_name}
@@ -181,14 +181,16 @@ defmodule Web.Components.FormComponents.SelectWithGroups do
         <div
           class={[
             "absolute top-1/2 end-2 -translate-y-1/2",
-            not @disabled && "cursor-pointer"
+            (@disabled && "cursor-not-allowed") || "cursor-pointer"
           ]}
           phx-click={
-            JS.toggle_class("hidden",
-              to: "#select-#{@id}-dropdown"
-            )
-            |> JS.toggle_attribute({"aria-expanded", "true", "false"}, to: "##{@id}-input")
-            |> JS.focus(to: "#select-" <> @id <> "-search-input")
+            unless @disabled do
+              JS.toggle_class("hidden",
+                to: "#select-#{@id}-dropdown"
+              )
+              |> JS.toggle_attribute({"aria-expanded", "true", "false"}, to: "##{@id}-input")
+              |> JS.focus(to: "#select-" <> @id <> "-search-input")
+            end
           }
         >
           <.icon name="hero-chevron-up-down" class="w-5 h-5" />
@@ -202,7 +204,7 @@ defmodule Web.Components.FormComponents.SelectWithGroups do
             "mt-2 pb-1 px-1 space-y-0.5 z-20",
             "w-full bg-white",
             input_border_class(),
-            "border border-gray-200 rounded-lg",
+            "border border-gray-200 rounded shadow",
             "overflow-hidden"
           ]}
           role="listbox"
@@ -213,7 +215,7 @@ defmodule Web.Components.FormComponents.SelectWithGroups do
             "max-h-72",
             "overflow-y-auto overflow-x-hidden"
           ]}>
-            <div class="bg-white p-2 sticky top-0 z-40">
+            <div class="bg-white p-2 sticky top-1 z-40">
               <input
                 name={"search_query-#{@id}"}
                 id={"select-" <> @id <> "-search-input"}
@@ -232,7 +234,7 @@ defmodule Web.Components.FormComponents.SelectWithGroups do
             <div>
               <div class={[
                 "hidden only:block",
-                "py-2 px-4",
+                "py-2 px-2",
                 "text-sm text-neutral-400"
               ]}>
                 <%= if @no_search_results == [] do %>
@@ -261,7 +263,7 @@ defmodule Web.Components.FormComponents.SelectWithGroups do
                       "block",
                       "w-full py-2 px-4",
                       "text-sm text-neutral-800",
-                      "rounded-lg",
+                      "rounded",
                       "hover:bg-neutral-100",
                       "focus:outline-none focus:bg-neutral-100",
                       value != @value && "cursor-pointer",
@@ -276,14 +278,21 @@ defmodule Web.Components.FormComponents.SelectWithGroups do
                       checked={value == @value}
                       class="hidden"
                     />
-                    <div>
-                      <div class={["flex items center"]}>
-                        <div class={["text-gray-800"]}>
-                          <%= render_slot(@option, slot_assigns) %>
-                        </div>
-                        <div :if={value == @value} class="ml-auto">
-                          <.icon name="hero-check" class="w-4 h-4" />
-                        </div>
+                    <div
+                      phx-click={
+                        JS.toggle_class("hidden",
+                          to: "#select-#{@id}-dropdown"
+                        )
+                        |> JS.toggle_attribute({"aria-expanded", "true", "false"})
+                        |> JS.focus(to: "#select-" <> @id <> "-search-input")
+                      }
+                      class={["flex items-center"]}
+                    >
+                      <div class={["text-gray-800"]}>
+                        <%= render_slot(@option, slot_assigns) %>
+                      </div>
+                      <div :if={value == @value} class="ml-auto">
+                        <.icon name="hero-check" class="w-4 h-4" />
                       </div>
                     </div>
                   </label>
diff --git a/elixir/apps/web/lib/web/live/policies/edit.ex b/elixir/apps/web/lib/web/live/policies/edit.ex
index 25ae7df45..fef3f5838 100644
--- a/elixir/apps/web/lib/web/live/policies/edit.ex
+++ b/elixir/apps/web/lib/web/live/policies/edit.ex
@@ -124,7 +124,7 @@ defmodule Web.Policies.Edit do
                     <% end %>
 
                     <span :if={resource.gateway_groups == []} class="text-red-800">
-                      (not connected to any Sites)
+                      (not connected to any Site)
                     </span>
                     <span
                       :if={length(resource.gateway_groups) > 0}
@@ -146,7 +146,7 @@ defmodule Web.Policies.Edit do
                   </:no_options>
 
                   <:no_search_results>
-                    No resources found. Try a different search query or create a new one <.link
+                    No Resources found. Try a different search query or create a new one <.link
                       navigate={~p"/#{@account}/resources/new"}
                       class={link_style()}
                     >here</.link>.
diff --git a/elixir/apps/web/lib/web/live/policies/new.ex b/elixir/apps/web/lib/web/live/policies/new.ex
index 648ecc711..cc26ace44 100644
--- a/elixir/apps/web/lib/web/live/policies/new.ex
+++ b/elixir/apps/web/lib/web/live/policies/new.ex
@@ -113,7 +113,7 @@ defmodule Web.Policies.New do
                     <% end %>
 
                     <span :if={resource.gateway_groups == []} class="text-red-800">
-                      (not connected to any Sites)
+                      (not connected to any Site)
                     </span>
                     <span
                       :if={length(resource.gateway_groups) > 0}
@@ -135,7 +135,7 @@ defmodule Web.Policies.New do
                   </:no_options>
 
                   <:no_search_results>
-                    No resources found. Try a different search query or create a new one <.link
+                    No Resources found. Try a different search query or create a new one <.link
                       navigate={~p"/#{@account}/resources/new"}
                       class={link_style()}
                     >here</.link>.