@workos-inc/widgets 0.0.0-pre.0

package/src/lib/users-management.tsx

@@ -0,0 +1,461 @@
+"use client";
+
+import * as React from "react";
+import {
+  Box,
+  Flex,
+  Grid,
+  Skeleton,
+  Table,
+  Text,
+  type TextProps,
+  VisuallyHidden,
+} from "@radix-ui/themes";
+import type { Role } from "./api/role";
+import type { Paginated, User } from "./api/user";
+import {
+  Avatar,
+  Badge,
+  IconButton,
+  PrimaryButton,
+  SecondaryButton,
+} from "./elements";
+import { InviteUserDialog } from "./invite-user-dialog";
+import { Pagination } from "./pagination";
+import { SearchProvider, useSearchContext } from "./search-provider";
+import { useIsHydrated } from "./use-is-hydrated";
+import { UserActionsDropdown } from "./user-actions-dropdown";
+import { UsersFilter } from "./users-filter";
+import { UsersSearch } from "./users-search";
+import { getBestName, getComparativeReadableDate } from "./utils";
+import { USER_ROW_LIMIT } from "./constants";
+import { useUsersManagementContext } from "./users-management-context";
+
+interface UsersManagementProps {
+  rolesData: Role[] | undefined;
+  userData: Paginated<User[]> | undefined;
+
+  // Render the rows with an alternate background color
+  alternate?: boolean;
+  // When the users list is loading new users
+  isPending?: boolean;
+  // Show the skeleton UI
+  isInitialLoading?: boolean;
+}
+
+export const UsersManagement = ({
+  userData,
+  rolesData,
+  alternate,
+  isPending,
+  isInitialLoading,
+}: UsersManagementProps) => {
+  const users = userData?.data;
+  const usersCount = users?.length ?? 0;
+  const isHydrated = useIsHydrated();
+  return (
+    <SearchProvider>
+      <Flex direction="column" gap="3">
+        <Grid columns="1fr auto" gap="2">
+          <Flex gap="2" align="center">
+            <Skeleton loading={isInitialLoading}>
+              <Box flexBasis="380px" flexGrow="0" flexShrink="1">
+                <UsersSearch />
+              </Box>
+            </Skeleton>
+            <Skeleton loading={isInitialLoading}>
+              <Box flexGrow="0" flexShrink="0">
+                <UsersFilter roles={rolesData} />
+              </Box>
+            </Skeleton>
+          </Flex>
+
+          <Skeleton loading={isInitialLoading}>
+            <Box flexGrow="0" flexShrink="0" style={{ placeSelf: "flex-end" }}>
+              <InviteUserDialog>
+                <PrimaryButton>Invite user</PrimaryButton>
+              </InviteUserDialog>
+            </Box>
+          </Skeleton>
+        </Grid>
+        <Table.Root variant="ghost" size="1">
+          <Table.Header>
+            <Table.Row>
+              <Table.ColumnHeaderCell width="260px">
+                <Skeleton loading={isInitialLoading}>User</Skeleton>
+              </Table.ColumnHeaderCell>
+              <Table.ColumnHeaderCell width="100px">
+                <Skeleton loading={isInitialLoading}>Role</Skeleton>
+              </Table.ColumnHeaderCell>
+              <Table.ColumnHeaderCell width="140px">
+                <Skeleton loading={isInitialLoading}>Last active</Skeleton>
+              </Table.ColumnHeaderCell>
+              <Table.ColumnHeaderCell width="28px" />
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body
+            style={{
+              transition: `opacity 0.2s ease-out ${isPending ? "0.2s" : "0s"}`,
+              opacity: isPending && usersCount > 0 ? 0.5 : 1,
+            }}
+          >
+            {isInitialLoading && (
+              <SkeletonRows length={USER_ROW_LIMIT} alternate={alternate} />
+            )}
+            {users?.map((user, i) => {
+              // TODO only support one role for now
+              const userRole = user.roles[0]?.name;
+              const userDisplayName = getBestName(user);
+              const dimText =
+                user.status === "InviteRevoked" ||
+                user.status === "InviteExpired";
+              return (
+                <Table.Row
+                  key={user.id}
+                  align="center"
+                  style={{
+                    background:
+                      alternate && i % 2 === 1 ? "var(--gray-a1)" : undefined,
+                  }}
+                >
+                  <Table.RowHeaderCell>
+                    <Flex
+                      align="center"
+                      gap="3"
+                      overflow="hidden"
+                      height="var(--space-7)"
+                    >
+                      <Avatar
+                        size="2"
+                        fallback={<FallbackUserIcon />}
+                        src={user.profilePictureUrl ?? undefined}
+                        dim={dimText}
+                      />
+
+                      {userDisplayName ? (
+                        <Flex
+                          direction="column"
+                          align="start"
+                          height="var(--space-7)"
+                          justify="center"
+                          overflow="hidden"
+                        >
+                          <Flex gap="2" align="center" minWidth="0">
+                            <TableCellText dim={dimText}>
+                              {userDisplayName}
+                            </TableCellText>
+                            <UserBadge user={user} />
+                          </Flex>
+                          <TableCellText
+                            level="secondary"
+                            title={user.email}
+                            dim={dimText}
+                          >
+                            {user.email}
+                          </TableCellText>
+                        </Flex>
+                      ) : (
+                        <Flex gap="2" align="center" minWidth="0">
+                          <TableCellText dim={dimText} title={user.email}>
+                            {user.email}
+                          </TableCellText>
+                          <UserBadge user={user} />
+                        </Flex>
+                      )}
+                    </Flex>
+                  </Table.RowHeaderCell>
+                  <Table.Cell>
+                    <TableCellText dim={dimText}>
+                      {userRole || (
+                        <>
+                          <VisuallyHidden>No roles assigned</VisuallyHidden>
+                          <span aria-hidden style={{ userSelect: "none" }}>
+                            –
+                          </span>
+                        </>
+                      )}
+                    </TableCellText>
+                  </Table.Cell>
+                  <Table.Cell>
+                    <LastActive
+                      user={user}
+                      isHydrated={isHydrated}
+                      dim={dimText}
+                    />
+                  </Table.Cell>
+                  <Table.Cell justify="end">
+                    <UserActionsDropdown user={user}>
+                      <IconButton title="User actions">
+                        <VisuallyHidden>User actions</VisuallyHidden>
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          width="16"
+                          height="16"
+                          strokeWidth={1.5}
+                          stroke="currentColor"
+                          aria-hidden
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
+                          />
+                        </svg>
+                      </IconButton>
+                    </UserActionsDropdown>
+                  </Table.Cell>
+                </Table.Row>
+              );
+            })}
+
+            {users?.length === 0 && (
+              <Table.Row align="center">
+                <Table.Cell colSpan={4}>
+                  <UsersManagementEmptyState />
+                </Table.Cell>
+              </Table.Row>
+            )}
+          </Table.Body>
+        </Table.Root>
+
+        <Pagination isPending={isPending} pagination={userData?.pagination} />
+      </Flex>
+    </SearchProvider>
+  );
+};
+
+function UserBadge({ user }: { user: User }) {
+  // TODO: This is not yet available in the data. Update here after API is updated.
+  if (user.isLoggedInUser) {
+    return (
+      <Badge color="gray" style={{ userSelect: "none" }}>
+        You
+      </Badge>
+    );
+  }
+  if (user.status === "Invited") {
+    return (
+      <Badge color="amber" style={{ userSelect: "none" }}>
+        <VisuallyHidden>Status: </VisuallyHidden>Invited
+      </Badge>
+    );
+  }
+  if (user.status === "InviteExpired") {
+    return (
+      <Badge color="red" style={{ userSelect: "none" }}>
+        <VisuallyHidden>Status: Invite </VisuallyHidden>
+        Expired
+      </Badge>
+    );
+  }
+  if (user.status === "InviteRevoked") {
+    return (
+      <Badge color="red" style={{ userSelect: "none" }}>
+        <VisuallyHidden>Status: Invite </VisuallyHidden>
+        Revoked
+      </Badge>
+    );
+  }
+  return null;
+}
+
+interface LastActiveProps {
+  user: User;
+  isHydrated: boolean;
+  dim?: boolean;
+}
+
+function LastActive(props: LastActiveProps) {
+  if (!props.user.lastActivityAt) {
+    return (
+      <>
+        <VisuallyHidden>
+          {props.user.status === "Active" ? "Never" : "Not active"}
+        </VisuallyHidden>
+        <TableCellText
+          dim={props.dim}
+          aria-hidden
+          style={{ userSelect: "none" }}
+        >
+          –
+        </TableCellText>
+      </>
+    );
+  }
+  return <LastActiveImpl {...props} date={props.user.lastActivityAt} />;
+}
+
+function LastActiveImpl({
+  date,
+  isHydrated,
+  dim,
+}: LastActiveProps & { date: string }) {
+  const { lastActiveDateTime, lastActiveDisplay } = React.useMemo(() => {
+    const defaultTimeZone = "America/Los_Angeles";
+    const lastActiveDate = new Date(date);
+    const lastActiveDateTime = lastActiveDate.toLocaleTimeString("en-US", {
+      // hard-coded timezone before hydration to prevent server/client mismatch
+      timeZone: isHydrated ? undefined : defaultTimeZone,
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+    });
+
+    // Server and client may produce a different 'now' date, so only
+    // show comparative date if the component is hydrated to prevent a
+    // server/client mismatch
+    const lastActiveDisplay = isHydrated
+      ? getComparativeReadableDate(new Date(), lastActiveDate)
+      : lastActiveDate.toLocaleDateString("en-US", {
+          // hard-coded timezone to prevent server/client mismatch
+          timeZone: defaultTimeZone,
+          month: "long",
+          day: "numeric",
+          year: "numeric",
+        });
+
+    return { lastActiveDateTime, lastActiveDisplay };
+  }, [isHydrated, date]);
+
+  // handle cases where the DB might return an invalid date string
+  if (lastActiveDisplay === "Invalid Date") {
+    return (
+      <>
+        <VisuallyHidden>Unknown</VisuallyHidden>
+        <TableCellText dim={dim} aria-hidden style={{ userSelect: "none" }}>
+          –
+        </TableCellText>
+      </>
+    );
+  }
+
+  return (
+    <TableCellText asChild dim={dim}>
+      <time dateTime={date} title={lastActiveDateTime}>
+        {lastActiveDisplay}
+      </time>
+    </TableCellText>
+  );
+}
+
+const SkeletonRows = ({
+  length,
+  alternate = false,
+}: {
+  length: number;
+  alternate?: boolean;
+}) => {
+  return Array.from({ length }, (_, index) => {
+    return (
+      <Table.Row
+        key={index}
+        align="center"
+        style={{
+          background:
+            alternate && index % 2 === 1 ? "var(--gray-a1)" : undefined,
+        }}
+      >
+        <Table.RowHeaderCell>
+          <Flex align="center" gap="3">
+            <Skeleton>
+              <Avatar size="2" fallback="F" />
+            </Skeleton>
+
+            <Flex direction="column" height="var(--space-7)" justify="center">
+              <Skeleton width="180px" height="var(--space-4)" />
+              <Skeleton width="90px" height="var(--space-3)" mt="1" />
+            </Flex>
+          </Flex>
+        </Table.RowHeaderCell>
+        <Table.Cell>
+          <Flex wrap="wrap" gap="1">
+            <Skeleton width="75px" height="var(--space-4)" />
+          </Flex>
+        </Table.Cell>
+        <Table.Cell>
+          <Skeleton width="120px" height="var(--space-4)" />
+        </Table.Cell>
+        <Table.Cell justify="end" />
+      </Table.Row>
+    );
+  });
+};
+
+const TableCellText = React.forwardRef<HTMLSpanElement, TableCellTextProps>(
+  function TableCellText(
+    { children, dim, level = "primary", ...props },
+    forwardedRef,
+  ) {
+    return (
+      <Text
+        ref={forwardedRef}
+        color={level === "secondary" ? "gray" : undefined}
+        weight={level === "secondary" ? "regular" : "medium"}
+        size={level === "secondary" ? "1" : "2"}
+        truncate
+        {...props}
+        style={
+          dim
+            ? {
+                // TODO: use CSS var instead of hard-coded value for opacity
+                opacity: 0.6,
+                ...props.style,
+              }
+            : props.style
+        }
+      >
+        {children}
+      </Text>
+    );
+  },
+);
+
+type TableCellTextProps = TextProps & {
+  level?: "primary" | "secondary";
+  dim?: boolean;
+};
+
+const FallbackUserIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    fill="currentColor"
+    viewBox="0 0 256 256"
+  >
+    <title>User icon</title>
+    <path d="M229.19,213c-15.81-27.32-40.63-46.49-69.47-54.62a70,70,0,1,0-63.44,0C67.44,166.5,42.62,185.67,26.81,213a6,6,0,1,0,10.38,6C56.4,185.81,90.34,166,128,166s71.6,19.81,90.81,53a6,6,0,1,0,10.38-6ZM70,96a58,58,0,1,1,58,58A58.07,58.07,0,0,1,70,96Z" />
+  </svg>
+);
+
+const UsersManagementEmptyState = () => {
+  const { clearSearch } = useSearchContext();
+  const {
+    state: { searchQuery },
+  } = useUsersManagementContext();
+
+  if (searchQuery) {
+    return (
+      <Flex align="center" justify="center" py="8" direction="column" gap="2">
+        <Text size="2">
+          No users found for query <Text weight="medium">“{searchQuery}”</Text>
+        </Text>
+
+        <SecondaryButton size="1" onClick={clearSearch}>
+          Clear search
+        </SecondaryButton>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex align="center" justify="center" py="8" gap="2">
+      <Text size="2">No users found</Text>
+    </Flex>
+  );
+};

package/src/lib/users-search.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { Cross2Icon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { Checkbox, DropdownMenu, Flex, IconButton } from "@radix-ui/themes";
+import * as React from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { PrimaryMenuItem, TextField, TextFieldSlot } from "./elements";
+import { useSearchContext } from "./search-provider";
+import { useUsersManagementContext } from "./users-management-context";
+
+type UsersSearchProps = React.ComponentPropsWithoutRef<typeof TextField>;
+
+export const UsersSearch = React.forwardRef<HTMLInputElement, UsersSearchProps>(
+  (props, ref) => {
+    const { inputRef, clearSearch, searchValue, setSearchValue } =
+      useSearchContext();
+    const { dispatch } = useUsersManagementContext();
+
+    const filter = useDebouncedCallback((value) => {
+      dispatch({ type: "FILTER_BY_SEARCH", searchQuery: value });
+    }, 200);
+
+    const resetSearch = () => {
+      clearSearch();
+      filter.cancel();
+    };
+
+    return (
+      <TextField
+        ref={useComposedRefs(inputRef, ref)}
+        autoComplete="off"
+        placeholder="Search by name or e-mail"
+        value={searchValue}
+        onChange={(event) => {
+          const value = event.target.value;
+          setSearchValue(value);
+          filter(value);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === "Escape") {
+            event.preventDefault();
+            resetSearch();
+          }
+        }}
+        {...props}
+      >
+        <TextFieldSlot side="left">
+          <MagnifyingGlassIcon aria-hidden="true" height="16" width="16" />
+        </TextFieldSlot>
+
+        <TextFieldSlot side="right">
+          {searchValue && (
+            <IconButton
+              size="1"
+              color="gray"
+              variant="ghost"
+              radius="full"
+              onClick={resetSearch}
+              aria-label="Clear search"
+              title="Clear search"
+            >
+              <Cross2Icon aria-hidden="true" />
+            </IconButton>
+          )}
+          {/* <FilterMenu /> */}
+        </TextFieldSlot>
+      </TextField>
+    );
+  },
+);
+
+// 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>
+  );
+});

package/src/lib/utils.ts

@@ -0,0 +1,94 @@
+import type { User } from "./api/user";
+
+export const canUseDOM = !!(
+  typeof window !== "undefined" &&
+  window.document &&
+  window.document.createElement
+);
+
+export function getBestName({
+  firstName,
+  lastName,
+}: Pick<User, "firstName" | "lastName">) {
+  return [firstName, lastName].filter(Boolean).join(" ") || null;
+}
+
+export function getComparativeReadableDate(
+  now: Date,
+  then: Date,
+  options?: { timeZone?: string },
+): string {
+  const timeSince = now.getTime() - then.getTime();
+
+  // Has it been less than a minute?
+  if (timeSince < 60_000) {
+    return "Just now";
+  }
+
+  // Has it been less than an hour?
+  if (timeSince < 3_600_000) {
+    const timePassed = Math.floor(timeSince / 60_000);
+    return timePassed === 1 ? "1 minute ago" : `${timePassed} minutes ago`;
+  }
+
+  // Has it been less than a day?
+  if (timeSince < 86_400_000) {
+    const timePassed = Math.floor(timeSince / 3_600_000);
+    return timePassed === 1 ? "1 hour ago" : `${timePassed} hours ago`;
+  }
+
+  // Has it been less than a week?
+  if (timeSince < 604_800_000) {
+    const timePassed = Math.floor(timeSince / 86_400_000);
+    return timePassed === 1 ? "1 day ago" : `${timePassed} days ago`;
+  }
+
+  // Has it been less than a month?
+  if (timeSince < 2_592_000_000) {
+    const timePassed = Math.floor(timeSince / 604_800_000);
+    return timePassed === 1 ? "1 week ago" : `${timePassed} weeks ago`;
+  }
+
+  // Any later?
+  return then.toLocaleDateString("en-US", {
+    timeZone: options?.timeZone,
+    month: "long",
+    day: "numeric",
+    // omit year if it's the same as the current year
+    year: now.getFullYear() !== then.getFullYear() ? "numeric" : undefined,
+  });
+}
+
+export function isObjectLike(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+export function isErrorLike(
+  value: unknown,
+): value is Record<string, unknown> & { message: string } {
+  return isObjectLike(value) && typeof value.message === "string";
+}
+
+export async function parseErrorResponse(
+  response: Response,
+): Promise<{ message: string; status: number }> {
+  try {
+    const json = await response.json();
+    if (!isObjectLike(json) || typeof json.message !== "string") {
+      return {
+        status: response.status,
+        message: response.statusText,
+      };
+    }
+    return {
+      ...json,
+      status: response.status,
+      message: json.message || response.statusText,
+    };
+  } catch {
+    return {
+      status: response.status,
+      message: response.statusText,
+    };
+  }
+}