feat: add visible buttons with text for role CRUD operations

- Add text labels to Edit and Delete buttons in index page
- Change button size from btn-xs to btn-sm for better visibility
- Add Delete button to show page for non-system roles
- Implement handle_event for delete in show page
- Add format_error helper to show page

lib/mv_web/live/role_live/index.html.heex

@@ -55,8 +55,9 @@
       </div>
 
       <%= if can?(@current_user, :update, Mv.Authorization.Role) do %>
-        <.link navigate={~p"/admin/roles/#{role}/edit"} class="btn btn-ghost btn-xs">
+        <.link navigate={~p"/admin/roles/#{role}/edit"} class="btn btn-ghost btn-sm">
           <.icon name="hero-pencil" class="size-4" />
+          {gettext("Edit")}
         </.link>
       <% end %>
     </:action>
@@ -66,10 +67,10 @@
         <.link
           phx-click={JS.push("delete", value: %{id: role.id}) |> hide("#row-#{role.id}")}
           data-confirm={gettext("Are you sure?")}
-          class="btn btn-ghost btn-xs text-error"
+          class="btn btn-ghost btn-sm text-error"
-          aria-label={gettext("Delete role")}
         >
           <.icon name="hero-trash" class="size-4" />
+          {gettext("Delete")}
         </.link>
       <% else %>
         <div
@@ -78,11 +79,12 @@
           data-tip={gettext("System roles cannot be deleted")}
         >
           <button
-            class="btn btn-ghost btn-xs text-error opacity-50 cursor-not-allowed"
+            class="btn btn-ghost btn-sm text-error opacity-50 cursor-not-allowed"
             disabled={true}
             aria-label={gettext("Cannot delete system role")}
           >
             <.icon name="hero-trash" class="size-4" />
+            {gettext("Delete")}
           </button>
         </div>
       <% end %>

lib/mv_web/live/role_live/show.ex

@@ -39,6 +39,29 @@ defmodule MvWeb.RoleLive.Show do
      |> assign(:role, role)}
   end
 
+  @impl true
+  def handle_event("delete", %{"id" => id}, socket) do
+    {:ok, role} = Mv.Authorization.get_role(id)
+
+    case Mv.Authorization.destroy_role(role) do
+      :ok ->
+        {:noreply,
+         socket
+         |> put_flash(:info, gettext("Role deleted successfully."))
+         |> push_navigate(to: ~p"/admin/roles")}
+
+      {:error, error} ->
+        error_message = format_error(error)
+
+        {:noreply,
+         put_flash(
+           socket,
+           :error,
+           gettext("Failed to delete role: %{error}", error: error_message)
+         )}
+    end
+  end
+
   @impl true
   def render(assigns) do
     ~H"""
@@ -57,6 +80,15 @@ defmodule MvWeb.RoleLive.Show do
               <.icon name="hero-pencil-square" /> {gettext("Edit Role")}
             </.button>
           <% end %>
+          <%= if can?(@current_user, :destroy, Mv.Authorization.Role) and not @role.is_system_role do %>
+            <.link
+              phx-click={JS.push("delete", value: %{id: @role.id})}
+              data-confirm={gettext("Are you sure?")}
+              class="btn btn-error"
+            >
+              <.icon name="hero-trash" /> {gettext("Delete Role")}
+            </.link>
+          <% end %>
         </:actions>
       </.header>
 
@@ -86,6 +118,13 @@ defmodule MvWeb.RoleLive.Show do
     """
   end
 
+  defp format_error(%Ash.Error.Invalid{} = error) do
+    Enum.map_join(error.errors, ", ", fn e -> e.message end)
+  end
+
+  defp format_error(error) when is_binary(error), do: error
+  defp format_error(_error), do: gettext("An error occurred")
+
   defp permission_set_badge_class("own_data"), do: "badge badge-neutral badge-sm"
   defp permission_set_badge_class("read_only"), do: "badge badge-info badge-sm"
   defp permission_set_badge_class("normal_user"), do: "badge badge-success badge-sm"