@workos-inc/widgets 0.0.0-pre.0

package/src/lib/pagination.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { Flex, Skeleton } from "@radix-ui/themes";
+import { SecondaryButton } from "./elements";
+import type { PaginationData } from "./api/user";
+import { useUsersManagementContext } from "./users-management-context";
+
+interface PaginationProps {
+  isPending?: boolean;
+  pagination?: PaginationData;
+}
+
+export const Pagination = ({ isPending, pagination }: PaginationProps) => {
+  const { dispatch } = useUsersManagementContext();
+
+  // we only want to show the loading indicator if the request is still pending
+  // after 500ms. If the request is fast enough the indicator is a bit jarring.
+  const [deferredLoading, setDeferredLoading] = React.useState(false);
+  React.useEffect(() => {
+    if (isPending) {
+      const timeoutId = window.setTimeout(() => {
+        setDeferredLoading(true);
+      }, 500);
+      return () => {
+        window.clearTimeout(timeoutId);
+      };
+    } else {
+      setDeferredLoading(false);
+    }
+  }, [isPending]);
+
+  return (
+    <Flex gap="2" justify="end">
+      <Skeleton loading={!pagination}>
+        <SecondaryButton
+          size="1"
+          disabled={!pagination?.after || isPending || undefined}
+          loading={deferredLoading}
+          onClick={() => {
+            if (pagination?.after) {
+              dispatch({
+                type: "SET_PAGINATION",
+                pagination: { after: pagination.after },
+              });
+            }
+          }}
+        >
+          Previous
+        </SecondaryButton>
+      </Skeleton>
+      <Skeleton loading={!pagination}>
+        <SecondaryButton
+          size="1"
+          disabled={!pagination?.before || isPending || undefined}
+          loading={deferredLoading}
+          onClick={() => {
+            if (pagination?.before) {
+              dispatch({
+                type: "SET_PAGINATION",
+                pagination: { before: pagination.before },
+              });
+            }
+          }}
+        >
+          Next
+        </SecondaryButton>
+      </Skeleton>
+    </Flex>
+  );
+};

package/src/lib/resend-invite-dialog.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import {
+  AlertDialog,
+  Callout,
+  Dialog,
+  Flex,
+  Text,
+  VisuallyHidden,
+} from "@radix-ui/themes";
+import * as React from "react";
+import { useResendUserInvite } from "./api/user";
+import type { User } from "./api/user";
+import { DestructiveButton, PrimaryButton, SecondaryButton } from "./elements";
+
+interface ResendInviteDialogProps extends AlertDialog.RootProps {
+  user: User;
+  children?: React.ReactNode;
+}
+
+export const ResendInviteDialog = ({
+  children,
+  user,
+  ...props
+}: ResendInviteDialogProps) => {
+  const resendInvite = useResendUserInvite();
+  const cancelButtonRef = React.useRef<HTMLButtonElement>(null);
+  const successButtonRef = React.useRef<HTMLButtonElement>(null);
+  const [successDialogIsOpen, setSuccessDialogIsOpen] = React.useState(false);
+
+  const onSubmitForm = () => {
+    resendInvite.mutate(user.id, {
+      onSuccess: () => {
+        setSuccessDialogIsOpen(true);
+      },
+    });
+  };
+
+  return (
+    <>
+      <AlertDialog.Root {...props}>
+        {children && <AlertDialog.Trigger>{children}</AlertDialog.Trigger>}
+
+        <AlertDialog.Content
+          maxWidth="480px"
+          onOpenAutoFocus={() => {
+            requestAnimationFrame(() => {
+              cancelButtonRef.current?.focus();
+            });
+          }}
+        >
+          <AlertDialog.Title>Resend invite?</AlertDialog.Title>
+          <Flex mb="4" direction="column" gap="3">
+            <AlertDialog.Description>
+              Are you sure you want to resend the invite to{" "}
+              <Text weight="bold">{user.email}</Text>?
+            </AlertDialog.Description>
+          </Flex>
+
+          {resendInvite.error ? (
+            <Callout.Root color="red" mt="4" mb="-2">
+              <Callout.Text>
+                {getMutationErrorMessage(resendInvite.error)}
+              </Callout.Text>
+            </Callout.Root>
+          ) : null}
+
+          <Flex gap="3" justify="end" mt="5" asChild>
+            <form
+              onSubmit={(event) => {
+                event.preventDefault();
+                onSubmitForm();
+              }}
+            >
+              <AlertDialog.Cancel>
+                <SecondaryButton
+                  ref={cancelButtonRef}
+                  disabled={resendInvite.isPending}
+                >
+                  Cancel
+                </SecondaryButton>
+              </AlertDialog.Cancel>
+              <DestructiveButton type="submit" loading={resendInvite.isPending}>
+                Resend
+              </DestructiveButton>
+            </form>
+          </Flex>
+        </AlertDialog.Content>
+
+        {/* mirror errors in a live region */}
+        <VisuallyHidden asChild>
+          <section aria-live="polite">
+            {getMutationErrorMessage(resendInvite.error)}
+          </section>
+        </VisuallyHidden>
+      </AlertDialog.Root>
+      <Dialog.Root
+        open={successDialogIsOpen}
+        onOpenChange={(isOpen) => {
+          if (!isOpen) {
+            props.onOpenChange?.(false);
+          }
+          setSuccessDialogIsOpen(isOpen);
+        }}
+      >
+        <Dialog.Content
+          maxWidth="360px"
+          onOpenAutoFocus={() => {
+            requestAnimationFrame(() => {
+              successButtonRef.current?.focus();
+            });
+          }}
+        >
+          <Dialog.Title>Invite sent</Dialog.Title>
+          <Dialog.Description>
+            The invite email has been resent to{" "}
+            <Text weight="bold">{user.email}</Text>
+          </Dialog.Description>
+          <Flex gap="3" justify="end" mt="5">
+            <Dialog.Close>
+              <PrimaryButton ref={successButtonRef}>Close</PrimaryButton>
+            </Dialog.Close>
+          </Flex>
+        </Dialog.Content>
+      </Dialog.Root>
+    </>
+  );
+};
+
+function getMutationErrorMessage(error: unknown) {
+  if (!error) {
+    return "";
+  }
+  // TODO Handle server errors
+  return "There was an error sending the invite. Please try again.";
+}

package/src/lib/revoke-invite-dialog.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import {
+  AlertDialog,
+  Callout,
+  Flex,
+  Text,
+  VisuallyHidden,
+} from "@radix-ui/themes";
+import { type ReactNode, useRef } from "react";
+import { useRevokeUserInvite } from "./api/user";
+import type { User } from "./api/user";
+import { DestructiveButton, SecondaryButton } from "./elements";
+
+interface RevokeInviteDialogProps extends AlertDialog.RootProps {
+  user: User;
+  children?: ReactNode;
+}
+
+export const RevokeInviteDialog = ({
+  children,
+  user,
+  ...props
+}: RevokeInviteDialogProps) => {
+  const revokeInvite = useRevokeUserInvite();
+  const cancelButtonRef = useRef<HTMLButtonElement>(null);
+
+  const onSubmitForm = () => {
+    revokeInvite.mutate(user.id, {
+      onSuccess: () => {
+        props.onOpenChange?.(false);
+      },
+    });
+  };
+
+  return (
+    <AlertDialog.Root {...props}>
+      {children && <AlertDialog.Trigger>{children}</AlertDialog.Trigger>}
+
+      <AlertDialog.Content
+        maxWidth="480px"
+        onOpenAutoFocus={() => {
+          requestAnimationFrame(() => {
+            cancelButtonRef.current?.focus();
+          });
+        }}
+      >
+        <AlertDialog.Title>Revoke invite?</AlertDialog.Title>
+        <Flex mb="4" direction="column" gap="3">
+          <AlertDialog.Description>
+            Are you sure you want to revoke the invite to{" "}
+            <Text weight="bold">{user.email}</Text>? This action is immediate
+            and cannot be undone.
+          </AlertDialog.Description>
+        </Flex>
+
+        {revokeInvite.error ? (
+          <Callout.Root color="red" mt="4" mb="-2">
+            <Callout.Text>
+              {getMutationErrorMessage(revokeInvite.error)}
+            </Callout.Text>
+          </Callout.Root>
+        ) : null}
+
+        <Flex gap="3" justify="end" mt="5" asChild>
+          <form
+            onSubmit={(event) => {
+              event.preventDefault();
+              onSubmitForm();
+            }}
+          >
+            <AlertDialog.Cancel>
+              <SecondaryButton
+                ref={cancelButtonRef}
+                disabled={revokeInvite.isPending}
+              >
+                Cancel
+              </SecondaryButton>
+            </AlertDialog.Cancel>
+
+            <DestructiveButton type="submit" loading={revokeInvite.isPending}>
+              Revoke
+            </DestructiveButton>
+          </form>
+        </Flex>
+      </AlertDialog.Content>
+
+      {/* mirror errors in a live region */}
+      <VisuallyHidden asChild>
+        <section aria-live="polite">
+          {getMutationErrorMessage(revokeInvite.error)}
+        </section>
+      </VisuallyHidden>
+    </AlertDialog.Root>
+  );
+};
+
+function getMutationErrorMessage(error: unknown) {
+  if (!error) {
+    return null;
+  }
+  // TODO Handle server errors
+  return "There was an error revoking the invite. Please try again.";
+}

package/src/lib/search-provider.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { flushSync } from "react-dom";
+import { useUsersManagementContext } from "./users-management-context";
+
+interface SearchContextType {
+  inputRef: React.RefObject<HTMLInputElement>;
+  clearSearch: () => void;
+  searchValue: string;
+  setSearchValue: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const SearchContext = React.createContext<SearchContextType | undefined>(
+  undefined,
+);
+SearchContext.displayName = "SearchContext";
+
+export const SearchProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const {
+    state: { searchQuery },
+    dispatch,
+  } = useUsersManagementContext();
+
+  const [searchValue, setSearchValue] = React.useState(searchQuery || "");
+
+  const clearSearch = React.useCallback(() => {
+    flushSync(() => {
+      setSearchValue("");
+      dispatch({ type: "FILTER_BY_SEARCH", searchQuery: "" });
+    });
+    inputRef.current?.focus();
+  }, [dispatch]);
+
+  return (
+    <SearchContext.Provider
+      value={{ inputRef, clearSearch, searchValue, setSearchValue }}
+    >
+      {children}
+    </SearchContext.Provider>
+  );
+};
+
+export const useSearchContext = () => {
+  const context = React.useContext(SearchContext);
+  if (!context) {
+    throw new Error("useSearchContext must be used within a SearchProvider");
+  }
+  return context;
+};

package/src/lib/use-is-hydrated.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+function subscribe() {
+  return () => {};
+}
+
+export function useIsHydrated() {
+  return React.useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false,
+  );
+}

package/src/lib/user-actions-dropdown.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import { DropdownMenu } from "@radix-ui/themes";
+import * as React from "react";
+import type { User } from "./api/user";
+import { DeleteUserDialog } from "./delete-user-dialog";
+import { EditUserDetailsDialog } from "./edit-user-details-dialog";
+import { DestructiveMenuItem, PrimaryMenuItem } from "./elements";
+import { ResendInviteDialog } from "./resend-invite-dialog";
+import { RevokeInviteDialog } from "./revoke-invite-dialog";
+import { useElement } from "./widgets-context";
+import { useRoles } from "./api/role";
+
+interface UserActionsDropdownProps {
+  user: User;
+  children: React.ReactNode;
+}
+
+type UserActionDialog =
+  | "revoke-membership"
+  | "revoke-invite"
+  | "resend-invite"
+  | "edit-role";
+
+export const UserActionsDropdown = ({
+  user,
+  children,
+}: UserActionsDropdownProps) => {
+  const rolesQuery = useRoles();
+  const [openDialog, setOpenDialog] = React.useState<UserActionDialog | null>(
+    null,
+  );
+  const dropdownProps = useElement("dropdown");
+
+  /**
+   * Assigns a key for each dialog based on its open state to ensure its
+   * internal state is cleared when it is closed.
+   */
+  function getDialogKey(dialog: UserActionDialog) {
+    return `${dialog}-${openDialog === dialog}-${user.id}`;
+  }
+
+  const { actions, items } = React.useMemo(() => {
+    const actions = new Set(user.actions);
+    const items: React.ReactElement[] = [];
+    if (actions.has("edit-role")) {
+      items.push(
+        <PrimaryMenuItem
+          key="edit-role"
+          onSelect={() => setOpenDialog("edit-role")}
+          disabled={
+            rolesQuery.isLoading ||
+            (rolesQuery.isSuccess && rolesQuery.data.length <= 1)
+          }
+          title={
+            rolesQuery.isSuccess && rolesQuery.data.length <= 1
+              ? "You cannot update the role for this user as there is only one role available."
+              : undefined
+          }
+        >
+          Edit role
+        </PrimaryMenuItem>,
+      );
+    }
+    if (actions.has("resend-invite")) {
+      items.push(
+        <PrimaryMenuItem
+          key="resend-invite"
+          onSelect={() => setOpenDialog("resend-invite")}
+        >
+          Resend invitation
+        </PrimaryMenuItem>,
+      );
+    }
+    if (actions.has("revoke-invite")) {
+      items.push(
+        <DestructiveMenuItem
+          key="revoke-invite"
+          onSelect={() => setOpenDialog("revoke-invite")}
+        >
+          Revoke invitation
+        </DestructiveMenuItem>,
+      );
+    }
+    if (actions.has("revoke-membership")) {
+      items.push(
+        <DestructiveMenuItem
+          key="revoke-membership"
+          onSelect={() => setOpenDialog("revoke-membership")}
+        >
+          Remove user
+        </DestructiveMenuItem>,
+      );
+    }
+    return {
+      actions,
+      items: items.map((item, index, array) => {
+        if (index !== array.length - 1) {
+          return (
+            <React.Fragment key={item.key}>
+              {item}
+              <DropdownMenu.Separator />
+            </React.Fragment>
+          );
+        }
+        return item;
+      }),
+    };
+  }, [rolesQuery, user.actions]);
+
+  if (user.isLoggedInUser || items.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>{children}</DropdownMenu.Trigger>
+        <DropdownMenu.Content size="2" align="end" {...dropdownProps}>
+          {items}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+
+      {actions.has("edit-role") && (
+        <EditUserDetailsDialog
+          key={getDialogKey("edit-role")}
+          user={user}
+          open={openDialog === "edit-role"}
+          onOpenChange={(open) => !open && setOpenDialog(null)}
+        />
+      )}
+
+      {actions.has("revoke-membership") && (
+        <DeleteUserDialog
+          key={getDialogKey("revoke-membership")}
+          user={user}
+          open={openDialog === "revoke-membership"}
+          onOpenChange={(open) => !open && setOpenDialog(null)}
+        />
+      )}
+
+      {actions.has("revoke-invite") && (
+        <RevokeInviteDialog
+          key={getDialogKey("revoke-invite")}
+          user={user}
+          open={openDialog === "revoke-invite"}
+          onOpenChange={(open) => !open && setOpenDialog(null)}
+        />
+      )}
+
+      {actions.has("resend-invite") && (
+        <ResendInviteDialog
+          key={getDialogKey("resend-invite")}
+          user={user}
+          open={openDialog === "resend-invite"}
+          onOpenChange={(open) => !open && setOpenDialog(null)}
+        />
+      )}
+    </>
+  );
+};

package/src/lib/users-filter.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import {
+  Checkbox,
+  DropdownMenu,
+  Flex,
+  IconButton,
+  Select,
+} from "@radix-ui/themes";
+import * as React from "react";
+import type { Role } from "./api/role";
+import { PrimaryMenuItem } from "./elements";
+import { useUsersManagementContext } from "./users-management-context";
+
+const ALL_ROLES_NAME = "All";
+const ALL_ROLES_VALUE = "null";
+
+type UsersFilterProps = React.ComponentPropsWithoutRef<typeof Select.Root> & {
+  roles: Role[] | undefined;
+};
+
+export const UsersFilter: React.FC<UsersFilterProps> = ({ roles }) => {
+  const {
+    dispatch,
+    state: { role },
+  } = useUsersManagementContext();
+
+  const setFilterParams = (value: string | null) => {
+    dispatch({ type: "FILTER_BY_ROLE", role: value });
+  };
+  const isValidRole = (value: unknown): value is string =>
+    roles ? roles.findIndex((role) => role.slug === value) !== -1 : false;
+  const filteredRole = isValidRole(role) ? role : ALL_ROLES_VALUE;
+  const roleName =
+    roles?.find((role) => role.slug === filteredRole)?.name || ALL_ROLES_NAME;
+
+  const onValueChange = (value: string) => {
+    if (value === ALL_ROLES_VALUE) {
+      setFilterParams(null);
+    } else {
+      if (isValidRole(value)) {
+        setFilterParams(value);
+      }
+    }
+  };
+
+  return (
+    <Select.Root
+      value={roles ? filteredRole : "null"}
+      onValueChange={onValueChange}
+    >
+      <Select.Trigger>{roles ? roleName : ALL_ROLES_NAME}</Select.Trigger>
+      <Select.Content>
+        <Select.Item value={ALL_ROLES_VALUE}>{ALL_ROLES_NAME}</Select.Item>
+        {roles?.map((role) => (
+          <React.Fragment key={role.slug}>
+            <Select.Item value={role.slug}>{role.name}</Select.Item>
+          </React.Fragment>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function FilterMenu() {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <IconButton
+          size="1"
+          color="gray"
+          variant="ghost"
+          radius="full"
+          aria-label="Filter users"
+          title="Filter users"
+        >
+          <FilterIcon aria-hidden="true" />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content size="2" align="end">
+        <PrimaryMenuItem>
+          <Flex gap="2" align="center">
+            <Checkbox variant="surface" />
+            One
+          </Flex>
+        </PrimaryMenuItem>
+        <PrimaryMenuItem>
+          <Flex gap="2" align="center">
+            <Checkbox />
+            Two
+          </Flex>
+        </PrimaryMenuItem>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+}
+
+const FilterIcon = React.forwardRef<
+  SVGSVGElement,
+  React.ComponentPropsWithRef<"svg">
+>(function FilterIcon({ children, ...props }, forwardedRef) {
+  return (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={forwardedRef}
+      {...props}
+    >
+      {children}
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.5 1C1.22386 1 1 1.22386 1 1.5V4.5C1 4.66316 1.07961 4.81605 1.21327 4.90962L6 8.26033V13.5C6 13.6733 6.08973 13.8342 6.23713 13.9253C6.38454 14.0164 6.56861 14.0247 6.72361 13.9472L8.72361 12.9472C8.893 12.8625 9 12.6894 9 12.5V8.26033L13.7867 4.90962C13.9204 4.81605 14 4.66316 14 4.5V1.5C14 1.22386 13.7761 1 13.5 1H1.5ZM2 4.23967V2H13V4.23967L8.21327 7.59038C8.07961 7.68395 8 7.83684 8 8V12.191L7 12.691V8C7 7.83684 6.92039 7.68395 6.78673 7.59038L2 4.23967ZM12 3H3V4H12V3Z"
+        fill="black"
+      />
+    </svg>
+  );
+});