Improve people list filters and invite state

Replace the cramped status checkboxes with a multi-select
dropdown (new DropdownCheckboxItem), and update the Relay
store to PENDING when an activation email is sent so the
row reflects the server-side state change immediately.

Signed-off-by: Émile Ré <emile@probo.com>

apps/console/src/pages/iam/organizations/people/_components/PeopleList.tsx

@@ -20,7 +20,10 @@
 
 import { getAssignableRoles, getMembershipRoles, peopleRoles } from "@probo/helpers";
 import {
-  Checkbox,
+  Button,
+  Dropdown,
+  DropdownCheckboxItem,
+  IconChevronDown,
   IconMagnifyingGlass,
   Input,
   Option,
@@ -192,15 +195,21 @@ export function PeopleList(props: {
     debouncedRefetchQuery(value);
   };
 
-  const handleStateFilterToggle = (state: ProfileState) => {
+  const handleStateFilterChange = (state: ProfileState, checked: boolean) => {
     debouncedRefetchQuery.cancel();
-    const newStates = statesFilter.includes(state)
-      ? statesFilter.filter(s => s !== state)
-      : [...statesFilter, state];
+    const newStates = checked
+      ? [...statesFilter, state]
+      : statesFilter.filter(s => s !== state);
     setStatesFilter(newStates);
     refetchPeople({ states: newStates });
   };
 
+  const statusFilterLabel = statesFilter.length === 0
+    ? t("peopleList.filters.allStatuses")
+    : statesFilter
+        .map(state => t(`peopleList.filters.${state.toLowerCase()}`))
+        .join(", ");
+
   const handleRoleFilterChange = (value: string) => {
     debouncedRefetchQuery.cancel();
     const newRole = value === "ALL" ? null : (value as MembershipRole);
@@ -234,18 +243,24 @@ export function PeopleList(props: {
           value={queryFilter ?? ""}
           onValueChange={handleQueryFilterChange}
         />
-        <div className="flex items-center gap-3">
-          <span className="text-sm text-txt-secondary">{t("peopleList.filters.status")}</span>
+        <Dropdown
+          toggle={(
+            <Button variant="secondary" className="min-w-40 justify-between gap-2">
+              <span className="truncate">{statusFilterLabel}</span>
+              <IconChevronDown size={12} className="shrink-0" />
+            </Button>
+          )}
+        >
           {PROFILE_STATES.map(state => (
-            <label key={state} className="flex items-center gap-2 text-sm cursor-pointer">
-              <Checkbox
-                checked={statesFilter.includes(state)}
-                onChange={() => handleStateFilterToggle(state)}
-              />
+            <DropdownCheckboxItem
+              key={state}
+              checked={statesFilter.includes(state)}
+              onCheckedChange={(checked: boolean) => handleStateFilterChange(state, checked)}
+            >
               {t(`peopleList.filters.${state.toLowerCase()}`)}
-            </label>
+            </DropdownCheckboxItem>
           ))}
-        </div>
+        </Dropdown>
         <Select
           value={roleFilter ?? "ALL"}
           onValueChange={handleRoleFilterChange}

apps/console/src/pages/iam/organizations/people/_components/PeopleListItem.tsx

@@ -191,6 +191,11 @@ export function PeopleListItem(props: {
             },
             connections: [profile.lastInvitation.__id],
           },
+          updater: (store) => {
+            // Inviting a deactivated user marks the profile pending server-side;
+            // the payload only returns the invitation edge, so update state here.
+            store.get(profile.id)?.setValue("PENDING", "state");
+          },
         });
       },
       {

packages/ui/src/Atoms/Dropdown/Dropdown.tsx

@@ -24,7 +24,7 @@ import type { ComponentProps, FC, PropsWithChildren, ReactNode } from "react";
 import { tv } from "tailwind-variants";
 
 import { Button } from "../Button/Button";
-import { IconDotGrid1x3Horizontal } from "../Icons";
+import { IconCheckmark1, IconDotGrid1x3Horizontal } from "../Icons";
 import type { IconProps } from "../Icons/type";
 
 type Props = PropsWithChildren<{
@@ -138,3 +138,40 @@ export function DropdownItem({
     </DropdownMenu.Item>
   );
 }
+
+type DropdownCheckboxItemProps = PropsWithChildren<{
+  className?: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  disabled?: boolean;
+}>;
+
+export function DropdownCheckboxItem({
+  className,
+  checked,
+  onCheckedChange,
+  disabled,
+  children,
+}: DropdownCheckboxItemProps) {
+  return (
+    <DropdownMenu.CheckboxItem
+      checked={checked}
+      onCheckedChange={value => onCheckedChange(value === true)}
+      disabled={disabled}
+      className={clsx(dropdownItem(), "rounded-lg outline-none", className)}
+    >
+      <span
+        className={clsx(
+          "size-4 border border-border-mid relative rounded-sm flex items-center justify-center flex-none",
+          checked && "bg-accent text-invert",
+          disabled && "opacity-50",
+        )}
+      >
+        <DropdownMenu.ItemIndicator>
+          <IconCheckmark1 size={12} />
+        </DropdownMenu.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenu.CheckboxItem>
+  );
+}

packages/ui/src/index.ts

@@ -43,6 +43,7 @@ export { Spinner } from "./Atoms/Spinner/Spinner";
 export {
   ActionDropdown,
   Dropdown,
+  DropdownCheckboxItem,
   DropdownItem,
   DropdownSeparator,
 } from "./Atoms/Dropdown/Dropdown";