feat(roles): redesign org roles page and better perm multiselect

frontend/src/components/v3/platform/PermissionActionSelect.tsx

@@ -0,0 +1,93 @@
+import {
+  components,
+  GroupBase,
+  MultiValueProps,
+  MultiValueRemoveProps,
+  OptionProps,
+  Props
+} from "react-select";
+import { CheckIcon } from "lucide-react";
+
+import { FilterableSelect } from "../generic/ReactSelect";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../generic/Tooltip";
+
+export type PermissionActionOption = {
+  label: string;
+  value: string;
+  description?: string;
+};
+
+const OptionWithDescription = <T extends PermissionActionOption>(props: OptionProps<T>) => {
+  const { data, children, isSelected } = props;
+  return (
+    <components.Option {...props}>
+      <div className="flex flex-row items-center justify-between">
+        <div className="min-w-0 flex-1">
+          <p className="truncate">{children}</p>
+          {data.description && (
+            <p className="truncate text-xs leading-4 text-muted">{data.description}</p>
+          )}
+        </div>
+        {isSelected && <CheckIcon className="ml-2 size-4 shrink-0" />}
+      </div>
+    </components.Option>
+  );
+};
+
+const PermissionActionMultiValueRemove = ({ selectProps, ...props }: MultiValueRemoveProps) => {
+  if (selectProps?.isDisabled) return null;
+  return <components.MultiValueRemove selectProps={selectProps} {...props} />;
+};
+
+const MultiValueWithTooltip = <T extends PermissionActionOption>(props: MultiValueProps<T>) => {
+  const { data } = props;
+  if (!data.description) return <components.MultiValue {...props} />;
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div>
+          <components.MultiValue {...props} />
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>{data.description}</TooltipContent>
+    </Tooltip>
+  );
+};
+
+type PermissionActionSelectProps<T extends PermissionActionOption> = Omit<
+  Props<T, boolean, GroupBase<T>>,
+  "isMulti"
+> & {
+  groupBy?: string | null;
+  getGroupHeaderLabel?: ((groupValue: unknown) => string) | null;
+  isError?: boolean;
+};
+
+export const PermissionActionSelect = <T extends PermissionActionOption>({
+  components: customComponents,
+  ...props
+}: PermissionActionSelectProps<T>) => {
+  return (
+    <FilterableSelect<T>
+      isMulti
+      filterOption={(option, inputValue) => {
+        if (!inputValue) return true;
+        const lowerInput = inputValue.toLowerCase();
+        const data = option.data as T;
+        return (
+          option.label.toLowerCase().includes(lowerInput) ||
+          Boolean(data.description?.toLowerCase().includes(lowerInput))
+        );
+      }}
+      components={
+        {
+          Option: OptionWithDescription,
+          MultiValueRemove: PermissionActionMultiValueRemove,
+          MultiValue: MultiValueWithTooltip,
+          ...customComponents
+        } as any
+      }
+      {...props}
+    />
+  );
+};

frontend/src/components/v3/platform/index.ts

@@ -1,2 +1,3 @@
 export * from "./DocumentationLinkBadge";
+export * from "./PermissionActionSelect";
 export * from "./ScopeIcons";

frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx

@@ -1,20 +1,19 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
-import { faChevronLeft, faCopy, faEllipsisV } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, useNavigate, useParams } from "@tanstack/react-router";
+import { ChevronLeftIcon, CopyIcon, EllipsisIcon, PencilIcon, TrashIcon } from "lucide-react";
+import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
+import { DeleteActionModal, PageHeader } from "@app/components/v2";
 import {
   Button,
-  DeleteActionModal,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger,
-  PageHeader
-} from "@app/components/v2";
+  DropdownMenuTrigger
+} from "@app/components/v3";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useDeleteOrgRole, useGetOrgRole } from "@app/hooks/api";
@@ -76,9 +75,9 @@ export const Page = () => {
             search={{
               selectedTab: OrgAccessControlTabSections.Roles
             }}
-            className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
+            className="mb-4 flex items-center gap-x-2 text-sm text-muted"
           >
-            <FontAwesomeIcon icon={faChevronLeft} />
+            <ChevronLeftIcon className="size-4" />
             Roles
           </Link>
           <PageHeader
@@ -93,14 +92,12 @@ export const Page = () => {
             {isCustomRole && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button
-                    colorSchema="secondary"
-                    rightIcon={<FontAwesomeIcon icon={faEllipsisV} className="ml-2" />}
-                  >
+                  <Button variant="outline">
                     Options
+                    <EllipsisIcon />
                   </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" sideOffset={2} className="p-1">
+                <DropdownMenuContent align="end">
                   <DropdownMenuItem
                     onClick={() => {
                       navigator.clipboard.writeText(data.id);
@@ -110,8 +107,8 @@ export const Page = () => {
                         type: "info"
                       });
                     }}
-                    icon={<FontAwesomeIcon icon={faCopy} />}
                   >
+                    <CopyIcon />
                     Copy ID
                   </DropdownMenuItem>
                   <DropdownMenuItem
@@ -123,44 +120,54 @@ export const Page = () => {
                         type: "info"
                       });
                     }}
-                    icon={<FontAwesomeIcon icon={faCopy} />}
                   >
+                    <CopyIcon />
                     Copy Slug
                   </DropdownMenuItem>
                   <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Role}>
                     {(isAllowed) => (
                       <DropdownMenuItem
+                        className={twMerge(
+                          !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                        )}
                         onClick={() => {
                           handlePopUpOpen("role", {
                             roleId
                           });
                         }}
                         isDisabled={!isAllowed}
                       >
+                        <PencilIcon />
                         Edit Role
                       </DropdownMenuItem>
                     )}
                   </OrgPermissionCan>
                   <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Role}>
                     {(isAllowed) => (
                       <DropdownMenuItem
+                        className={twMerge(
+                          !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                        )}
                         onClick={() => {
                           handlePopUpOpen("duplicateRole");
                         }}
                         isDisabled={!isAllowed}
                       >
+                        <CopyIcon />
                         Duplicate Role
                       </DropdownMenuItem>
                     )}
                   </OrgPermissionCan>
                   <OrgPermissionCan I={OrgPermissionActions.Delete} a={OrgPermissionSubjects.Role}>
                     {(isAllowed) => (
                       <DropdownMenuItem
+                        variant="danger"
                         onClick={() => {
                           handlePopUpOpen("deleteOrgRole");
                         }}
                         isDisabled={!isAllowed}
                       >
+                        <TrashIcon />
                         Delete Role
                       </DropdownMenuItem>
                     )}