@workos-inc/widgets 0.0.0-pre.1 → 0.0.0-pre.3

package/src/lib/users-management.tsx

@@ -5,6 +5,8 @@ import {
   Box,
   Flex,
   Grid,
+  Heading,
+  Select,
   Skeleton,
   Table,
   Text,
@@ -19,9 +21,12 @@ import {
   IconButton,
   PrimaryButton,
   SecondaryButton,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  TextField,
 } 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";
@@ -30,65 +35,75 @@ 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 { ApiError, FetchError, NoAuthTokenError } from "./errors";
 
 interface UsersManagementProps {
-  rolesData: Role[] | undefined;
-  userData: Paginated<User[]> | undefined;
-
-  // Render the rows with an alternate background color
-  alternate?: boolean;
+  rolesData: Role[];
+  userData: Paginated<User[]>;
+  disableRolesFilter?: boolean;
   // When the users list is loading new users
-  isPending?: boolean;
-  // Show the skeleton UI
-  isInitialLoading?: boolean;
+  isPending: boolean | undefined;
 }
 
 export const UsersManagement = ({
   userData,
   rolesData,
-  alternate,
   isPending,
-  isInitialLoading,
+  disableRolesFilter,
 }: UsersManagementProps) => {
   const users = userData?.data;
   const usersCount = users?.length ?? 0;
   const isHydrated = useIsHydrated();
+  const pagination = userData?.pagination;
+  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]);
+
   return (
     <SearchProvider>
-      <Flex direction="column" gap="3">
+      <UsersManagementRoot>
         <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 flexBasis="380px" flexGrow="0" flexShrink="1">
+              <UsersSearch />
             </Box>
-          </Skeleton>
+            <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">
-                <Skeleton loading={isInitialLoading}>User</Skeleton>
+                User
               </Table.ColumnHeaderCell>
               <Table.ColumnHeaderCell width="100px">
-                <Skeleton loading={isInitialLoading}>Role</Skeleton>
+                Role
               </Table.ColumnHeaderCell>
               <Table.ColumnHeaderCell width="140px">
-                <Skeleton loading={isInitialLoading}>Last active</Skeleton>
+                Last active
               </Table.ColumnHeaderCell>
               <Table.ColumnHeaderCell width="28px" />
             </Table.Row>
@@ -100,118 +115,108 @@ export const UsersManagement = ({
               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}
-                      />
+            {users.length > 0 ? (
+              users.map((user) => {
+                // 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">
+                    <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"
-                        >
+                        {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}>
-                              {userDisplayName}
+                            <TableCellText dim={dimText} title={user.email}>
+                              {user.email}
                             </TableCellText>
                             <UserBadge user={user} />
                           </Flex>
-                          <TableCellText
-                            level="secondary"
-                            title={user.email}
-                            dim={dimText}
+                        )}
+                      </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
                           >
-                            {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 && (
+                            <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 />
@@ -221,12 +226,205 @@ export const UsersManagement = ({
           </Table.Body>
         </Table.Root>
 
-        <Pagination isPending={isPending} pagination={userData?.pagination} />
-      </Flex>
+        <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>
+      </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 }) {
+  React.useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  const render = (heading: string, message: React.ReactNode) => (
+    <UsersManagementRoot justify="center" align="center" minHeight="676px">
+      <Flex
+        p="8"
+        justify="center"
+        align="center"
+        direction="column"
+        maxWidth="520px"
+      >
+        <Heading size="5" align="center" mb="1" wrap="balance" asChild>
+          <h3>{heading}</h3>
+        </Heading>
+        <Text align="center" wrap="balance">
+          {message}
+        </Text>
+      </Flex>
+    </UsersManagementRoot>
+  );
+
+  if (error instanceof FetchError) {
+    return render(
+      "Error fetching data",
+      "An error occurred. You may need to configure CORS in the WorkOS Dashboard. " +
+        "Contact your organization admin for support.",
+    );
+  }
+
+  if (error instanceof NoAuthTokenError) {
+    return render(
+      "Error fetching data",
+      "Authorization error. You likely forgot to provide an authorization " +
+        "token to the Users Management Widget.",
+    );
+  }
+
+  if (error instanceof ApiError && error.status === 404) {
+    // The widgets API treats all authorization errors as 404s. If there is a
+    // legitimate 404, it's a bug on our end but there's currently no way to
+    // distinguish between the two.
+    return render(
+      "Error fetching data",
+      "Authorization error. Contact your organization admin for support.",
+    );
+  }
+
+  return render(
+    "Error fetching data",
+    "Unknown error. Contact your organization admin for support.",
+  );
+}
+
+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: User }) {
   // TODO: This is not yet available in the data. Update here after API is updated.
   if (user.isLoggedInUser) {
@@ -343,49 +541,6 @@ function LastActiveImpl({
   );
 }
 
-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 },