@workos-inc/widgets 1.1.4 → 1.2.0

package/src/lib/users-management.tsx

@@ -1,594 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  Box,
-  Flex,
-  Grid,
-  Select,
-  Separator,
-  Table,
-  Text,
-  type TextProps,
-  VisuallyHidden,
-} from "@radix-ui/themes";
-import {
-  Avatar,
-  Badge,
-  IconButton,
-  PrimaryButton,
-  SecondaryButton,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  Skeleton,
-  TextField,
-} from "./elements";
-import { InviteUserDialog } from "./invite-user-dialog";
-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";
-import clsx from "clsx";
-import { Member, MemberRole, MembersQueryResult } from "../api";
-import { GenericError } from "./generic-error";
-
-interface UsersManagementProps {
-  rolesData: MemberRole[];
-  userData: MembersQueryResult;
-  disableRolesFilter?: boolean;
-  // When the users list is loading new users
-  isPending: boolean;
-}
-
-export const UsersManagement = ({
-  userData,
-  rolesData,
-  isPending,
-  disableRolesFilter,
-}: UsersManagementProps) => {
-  const users = userData?.data ?? [];
-  const usersCount = users?.length ?? 0;
-  const isHydrated = useIsHydrated();
-  const { listMetadata: pagination = {} } = userData;
-  const { dispatch } = useUsersManagementContext();
-
-  // we only want to show the loading indicator for some buttons 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]);
-
-  const showPagination = !!(pagination.before || pagination.after);
-
-  return (
-    <SearchProvider>
-      <UsersManagementRoot>
-        <Grid columns="1fr auto" gap="2">
-          <Flex gap="2" align="center">
-            <Box flexBasis="380px" flexGrow="0" flexShrink="1">
-              <UsersSearch />
-            </Box>
-            <Box flexGrow="0" flexShrink="0">
-              <UsersFilter roles={rolesData} disabled={disableRolesFilter} />
-            </Box>
-          </Flex>
-          <Box flexGrow="0" flexShrink="0" style={{ placeSelf: "flex-end" }}>
-            <InviteUserDialog>
-              <PrimaryButton>Invite user</PrimaryButton>
-            </InviteUserDialog>
-          </Box>
-        </Grid>
-        <Table.Root variant="ghost" size="1">
-          <Table.Header>
-            <Table.Row>
-              <Table.ColumnHeaderCell width="260px">
-                User
-              </Table.ColumnHeaderCell>
-              <Table.ColumnHeaderCell width="100px">
-                Role
-              </Table.ColumnHeaderCell>
-              <Table.ColumnHeaderCell width="140px">
-                Last active
-              </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,
-            }}
-          >
-            {users.length > 0 ? (
-              users.map((user) => {
-                // TODO only support one role for now
-                const userRole = user?.roles?.at(0)?.name;
-                const userDisplayName = getBestName(user);
-                const dimText =
-                  user.status === "InviteRevoked" ||
-                  user.status === "InviteExpired";
-                return (
-                  <Table.Row key={user.id} align="center">
-                    <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} />
-                    </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>
-                );
-              })
-            ) : (
-              <Table.Row align="center">
-                <Table.Cell colSpan={4}>
-                  <UsersManagementEmptyState isPending={isPending} />
-                </Table.Cell>
-              </Table.Row>
-            )}
-          </Table.Body>
-        </Table.Root>
-
-        {showPagination ? (
-          <Flex gap="2" justify="end">
-            <SecondaryButton
-              size="1"
-              disabled={!pagination.after || isPending || undefined}
-              loading={deferredLoading}
-              onClick={() => {
-                if (pagination.after) {
-                  dispatch({
-                    type: "SET_PAGINATION",
-                    pagination: { after: pagination.after },
-                  });
-                }
-              }}
-            >
-              Previous
-            </SecondaryButton>
-            <SecondaryButton
-              size="1"
-              disabled={!pagination.before || isPending || undefined}
-              loading={deferredLoading}
-              onClick={() => {
-                if (pagination.before) {
-                  dispatch({
-                    type: "SET_PAGINATION",
-                    pagination: { before: pagination.before },
-                  });
-                }
-              }}
-            >
-              Next
-            </SecondaryButton>
-          </Flex>
-        ) : null}
-      </UsersManagementRoot>
-    </SearchProvider>
-  );
-};
-
-export function UsersManagementLoading() {
-  return (
-    <UsersManagementRoot>
-      <Grid columns="1fr auto" gap="2">
-        <Flex gap="2" align="center">
-          <Skeleton loading>
-            <Box flexBasis="380px" flexGrow="0" flexShrink="1">
-              <TextField />
-            </Box>
-          </Skeleton>
-          <Skeleton loading>
-            <Box flexGrow="0" flexShrink="0">
-              <Select.Root value="all" onValueChange={() => void 0}>
-                <SelectTrigger>All</SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">All</SelectItem>
-                </SelectContent>
-              </Select.Root>
-            </Box>
-          </Skeleton>
-        </Flex>
-        <Skeleton loading>
-          <Box flexGrow="0" flexShrink="0" style={{ placeSelf: "flex-end" }}>
-            <PrimaryButton>Invite user</PrimaryButton>
-          </Box>
-        </Skeleton>
-      </Grid>
-      <Table.Root variant="ghost" size="1">
-        <Table.Header>
-          <Table.Row>
-            <Table.ColumnHeaderCell width="260px">
-              <Skeleton loading>User</Skeleton>
-            </Table.ColumnHeaderCell>
-            <Table.ColumnHeaderCell width="100px">
-              <Skeleton>Role</Skeleton>
-            </Table.ColumnHeaderCell>
-            <Table.ColumnHeaderCell width="140px">
-              <Skeleton>Last active</Skeleton>
-            </Table.ColumnHeaderCell>
-            <Table.ColumnHeaderCell width="28px" />
-          </Table.Row>
-        </Table.Header>
-
-        <Table.Body>
-          {Array.from({ length: USER_ROW_LIMIT }, (_, index) => (
-            <Table.Row key={index} align="center">
-              <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>
-          ))}
-        </Table.Body>
-      </Table.Root>
-
-      <Flex gap="2" justify="end">
-        <Skeleton loading>
-          <SecondaryButton size="1">Previous</SecondaryButton>
-        </Skeleton>
-        <Skeleton loading>
-          <SecondaryButton size="1">Next</SecondaryButton>
-        </Skeleton>
-      </Flex>
-    </UsersManagementRoot>
-  );
-}
-
-export function UsersManagementError({ error }: { error: unknown }) {
-  return (
-    <UsersManagementRoot
-      direction="row"
-      justify="center"
-      align="center"
-      minHeight="676px"
-    >
-      <GenericError error={error} />
-    </UsersManagementRoot>
-  );
-}
-
-function UsersManagementRoot({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof Flex>) {
-  return (
-    <Flex
-      className={clsx("woswidgets-widget", className)}
-      data-woswidgets-widget-id="users-management"
-      direction="column"
-      gap="3"
-      {...props}
-    >
-      {children}
-    </Flex>
-  );
-}
-
-function UserBadge({ user }: { user: Member }) {
-  // 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: Member;
-  isHydrated: boolean;
-  dim?: boolean;
-}
-
-function LastActive(props: LastActiveProps) {
-  if (!props.user.lastActivityAt) {
-    return (
-      <>
-        <VisuallyHidden>
-          {props.user.status === "Active" ? "Never" : "Not active"}
-        </VisuallyHidden>
-        <Separator />
-      </>
-    );
-  }
-  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>
-        <Separator />
-      </>
-    );
-  }
-
-  return (
-    <TableCellText asChild dim={dim}>
-      <time dateTime={date} title={lastActiveDateTime}>
-        {lastActiveDisplay}
-      </time>
-    </TableCellText>
-  );
-}
-
-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 = ({ isPending }: { isPending: boolean }) => {
-  const { clearSearch } = useSearchContext();
-  const {
-    state: { searchQuery },
-  } = useUsersManagementContext();
-
-  // When the search query is cleared, the users query is re-fetched which sends
-  // us into a pending state. When this happens we want to keep a snapshot of
-  // the previous search query while the query is revalidated. We can use this
-  // to keep the 'No users found for query' UI in place until re-fetching is
-  // complete, otherwise the view flips to 'No users found' very quickly before
-  // the full table is shown again.
-  const [{ isClearing, lastSearchQuery }, setClearing] = React.useState({
-    isClearing: false,
-    lastSearchQuery: null as null | string,
-  });
-  const [wasPending, setWasPending] = React.useState(isPending);
-  if (wasPending !== isPending) {
-    setWasPending(isPending);
-    if (!isPending) {
-      setClearing((prev) =>
-        prev.isClearing ? { isClearing: false, lastSearchQuery: null } : prev,
-      );
-    }
-  }
-
-  if (searchQuery || isClearing) {
-    return (
-      <Flex align="center" justify="center" py="8" direction="column" gap="2">
-        <Text size="2">
-          No users found for query{" "}
-          <Text weight="medium">
-            “{isClearing ? lastSearchQuery : searchQuery}”
-          </Text>
-        </Text>
-
-        <SecondaryButton
-          size="1"
-          onClick={() => {
-            setClearing({ isClearing: true, lastSearchQuery: searchQuery });
-            clearSearch();
-          }}
-          loading={isPending}
-        >
-          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

@@ -1,73 +0,0 @@
-"use client";
-
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { Cross2Icon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import { IconButton } from "@radix-ui/themes";
-import cx from "clsx";
-import * as React from "react";
-import { useDebouncedCallback } from "use-debounce";
-import { TextField, TextFieldSlot } from "./elements";
-import { useSearchContext } from "./search-provider";
-import { useUsersManagementContext } from "./users-management-context";
-import { namespaceClassNames } from "./utils";
-
-type UsersSearchProps = React.ComponentPropsWithoutRef<typeof TextField>;
-
-export const UsersSearch = React.forwardRef<HTMLInputElement, UsersSearchProps>(
-  ({ className, ...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)}
-        className={cx(namespaceClassNames("users-search"), className)}
-        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>
-          )}
-        </TextFieldSlot>
-      </TextField>
-    );
-  },
-);