From c0536f3b78ea2f02fff2ba45e6f2e9c9c7ffefc0 Mon Sep 17 00:00:00 2001
From: Uku Taht <uku.taht@gmail.com>
Date: Thu, 2 Jan 2025 16:53:54 +0200
Subject: [PATCH] Add disabled style to dropdown

---
 assets/tailwind.config.js                     |  1 +
 lib/plausible_web/components/generic.ex       | 25 +++++++++++++++----
 .../templates/site/settings_people.html.heex  |  4 ++-
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index 1f8213e67468..e1a029ef9bb5 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -55,5 +55,6 @@ module.exports = {
     plugin(({ addVariant }) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
     plugin(({ addVariant }) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
     plugin(({ addVariant }) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
+    plugin(({ addVariant }) => addVariant("ui-disabled", ["&[data-ui-state~=\"disabled\"]", ":where([data-ui-state~=\"disabled\"]) &"])),
   ]
 }
diff --git a/lib/plausible_web/components/generic.ex b/lib/plausible_web/components/generic.ex
index 098ff3c342f9..f0725cf99bde 100644
--- a/lib/plausible_web/components/generic.ex
+++ b/lib/plausible_web/components/generic.ex
@@ -269,17 +269,32 @@ defmodule PlausibleWeb.Components.Generic do
   attr(:href, :string)
   attr(:class, :string, default: "")
   attr(:new_tab, :boolean, default: false)
+  attr(:disabled, :boolean, default: false)
   attr(:rest, :global, include: ~w(method))
   slot(:inner_block, required: true)
 
-  @base_class "block rounded-lg text-sm/6 text-gray-700 dark:text-gray-300 px-3.5 py-1.5"
-  @clickable_class "hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
+  @base_class "block rounded-lg text-sm/6 text-gray-900 ui-disabled:text-gray-500 dark:text-gray-100 px-3.5 py-1.5"
+  @clickable_class "hover:bg-gray-100 dark:hover:bg-gray-700"
   def dropdown_item(assigns) do
-    if assigns[:href] do
+    assigns =
+      if assigns[:disabled] do
+        assign(assigns, :state, "disabled")
+      else
+        assign(assigns, :state, "")
+      end
+
+    if assigns[:href] && !assigns[:disabled] do
       assigns = assign(assigns, :class, [assigns[:class], @base_class, @clickable_class])
 
       ~H"""
-      <.unstyled_link class={@class} new_tab={@new_tab} href={@href} x-on:click="close()" {@rest}>
+      <.unstyled_link
+        class={@class}
+        new_tab={@new_tab}
+        href={@href}
+        x-on:click="close()"
+        data-ui-state={@state}
+        {@rest}
+      >
         <%= render_slot(@inner_block) %>
       </.unstyled_link>
       """
@@ -287,7 +302,7 @@ defmodule PlausibleWeb.Components.Generic do
       assigns = assign(assigns, :class, [assigns[:class], @base_class])
 
       ~H"""
-      <div class={@class}>
+      <div data-ui-state={@state} class={@class}>
         <%= render_slot(@inner_block) %>
       </div>
       """
diff --git a/lib/plausible_web/templates/site/settings_people.html.heex b/lib/plausible_web/templates/site/settings_people.html.heex
index 01e4af9995b2..09801630697a 100644
--- a/lib/plausible_web/templates/site/settings_people.html.heex
+++ b/lib/plausible_web/templates/site/settings_people.html.heex
@@ -49,7 +49,7 @@
                 </:button>
                 <:panel class="max-w-60">
                   <%= if membership.role == :owner do %>
-                    <.dropdown_item>
+                    <.dropdown_item disabled={true}>
                       <div>Owner</div>
                       <div class="text-gray-500 text-xs/5">
                         Site owner cannot be assigned to any other role
@@ -81,6 +81,7 @@
                         )
                       }
                       method="put"
+                      disabled={membership.role == "admin"}
                     >
                       <div>Admin</div>
                       <div class="text-gray-500 text-xs/5">View stats and edit site settings</div>
@@ -96,6 +97,7 @@
                         )
                       }
                       method="put"
+                      disabled={membership.role == "viewer"}
                     >
                       <div>Viewer</div>
                       <div class="text-gray-500 text-xs/5">View stats only</div>