@workos-inc/widgets 1.0.0 → 1.1.0

package/src/lib/users-management-context.tsx

@@ -1,14 +1,14 @@
 "use client";
 
 import * as React from "react";
-import type { PaginationData } from "./api/user";
 import {
   UsersManagementAction,
   UsersManagementState,
+  useUsersManagementState,
 } from "./users-management-state";
+import { ListMetadata } from "@repo/api";
 
 export interface UsersManagementContextType {
-  authToken: (() => Promise<string>) | null;
   state: UsersManagementState;
   dispatch: React.Dispatch<UsersManagementAction>;
 }
@@ -18,19 +18,34 @@ const UsersManagementContext = React.createContext<
 >(undefined);
 UsersManagementContext.displayName = "UsersManagementContext";
 
+const initialState: UsersManagementState = {
+  pagination: null,
+  role: null,
+  searchQuery: null,
+};
+
 export const UsersManagementContextProvider: React.FC<{
   children?: React.ReactNode;
-  value: UsersManagementContextType;
-}> = ({ children, value }) => {
+}> = ({ children }) => {
+  const [state, dispatch] = useUsersManagementState(initialState);
+
+  const context = React.useMemo<UsersManagementContextType>(
+    () => ({
+      state,
+      dispatch,
+    }),
+    [state, dispatch],
+  );
+
   return (
-    <UsersManagementContext.Provider value={value}>
+    <UsersManagementContext.Provider value={context}>
       {children}
     </UsersManagementContext.Provider>
   );
 };
 
 const NOOP = () => void 0;
-const EMPTY_PAGINATION: PaginationData = {};
+const EMPTY_PAGINATION: ListMetadata = {};
 
 /**
  * The context may be provided if it is instantiated in the tree above the user.
@@ -39,15 +54,6 @@ export function useUsersManagementContext(
   initialContext?: UsersManagementContextType | null,
 ): UsersManagementContextType {
   const context = React.useContext(UsersManagementContext);
-  const providedToken = initialContext?.authToken ?? null;
-  const hasContext = !!context;
-  React.useEffect(() => {
-    if (!providedToken && !hasContext) {
-      console.error(
-        "useUsersManagementContext was called from a component outside of the UsersManagementContext provider without providing an authToken directly. Resulting queries may not run as expected.",
-      );
-    }
-  }, [providedToken, hasContext]);
 
   if (context) {
     return context;
@@ -58,7 +64,6 @@ export function useUsersManagementContext(
   }
 
   return {
-    authToken: null,
     dispatch: NOOP,
     state: {
       pagination: EMPTY_PAGINATION,
@@ -67,23 +72,3 @@ export function useUsersManagementContext(
     },
   };
 }
-
-/**
- * The auth token may be provided if it is instantiated in the tree above the
- * user management context. Otherwise we'll use the context value if it exists.
- */
-export function useUsersManagementPagniatoin(
-  args: { authToken?: string | null } | undefined | null,
-) {
-  const context = React.useContext(UsersManagementContext);
-  const providedToken = args?.authToken;
-  const hasContext = !!context;
-  React.useEffect(() => {
-    if (!providedToken && !hasContext) {
-      console.error(
-        "useUsersManagementAuthToken was called from a component outside of the UsersManagementContext provider without providing an authToken directly. Resulting queries may not run as expected.",
-      );
-    }
-  }, [providedToken, hasContext]);
-  return providedToken || context?.authToken || null;
-}

package/src/lib/users-management-state.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { PaginationData } from "./api/user";
 import { canUseDOM } from "./utils";
+import { ListMetadata } from "@repo/api";
 
 export function useUsersManagementState(initialState: UsersManagementState) {
   const [[state, effects], dispatch] = React.useReducer(reducer, [
@@ -110,14 +110,14 @@ function reducer(
 export interface UsersManagementState {
   searchQuery: string | null;
   role: string | null;
-  pagination: PaginationData | null;
+  pagination: ListMetadata | null;
 }
 
 export type UsersManagementAction =
   | { type: "INIT"; params: URLSearchParams }
   | { type: "FILTER_BY_SEARCH"; searchQuery: string | null }
   | { type: "FILTER_BY_ROLE"; role: string | null }
-  | { type: "SET_PAGINATION"; pagination: PaginationData };
+  | { type: "SET_PAGINATION"; pagination: ListMetadata };
 
 type EffectFn = {
   (): void;

package/src/lib/users-management.tsx

@@ -5,15 +5,13 @@ import {
   Box,
   Flex,
   Grid,
-  Heading,
   Select,
+  Separator,
   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,
@@ -36,11 +34,12 @@ 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";
+import { Member, MemberRole, MembersQueryResult } from "@repo/api";
+import { GenericError } from "./generic-error";
 
 interface UsersManagementProps {
-  rolesData: Role[];
-  userData: Paginated<User[]>;
+  rolesData: MemberRole[];
+  userData: MembersQueryResult;
   disableRolesFilter?: boolean;
   // When the users list is loading new users
   isPending: boolean;
@@ -52,10 +51,10 @@ export const UsersManagement = ({
   isPending,
   disableRolesFilter,
 }: UsersManagementProps) => {
-  const users = userData?.data;
+  const users = userData?.data ?? [];
   const usersCount = users?.length ?? 0;
   const isHydrated = useIsHydrated();
-  const { pagination } = userData;
+  const { listMetadata: pagination = {} } = userData;
   const { dispatch } = useUsersManagementContext();
 
   // we only want to show the loading indicator for some buttons if the request
@@ -120,7 +119,7 @@ export const UsersManagement = ({
             {users.length > 0 ? (
               users.map((user) => {
                 // TODO only support one role for now
-                const userRole = user.roles[0]?.name;
+                const userRole = user?.roles?.at(0)?.name;
                 const userDisplayName = getBestName(user);
                 const dimText =
                   user.status === "InviteRevoked" ||
@@ -186,11 +185,7 @@ export const UsersManagement = ({
                       </TableCellText>
                     </Table.Cell>
                     <Table.Cell>
-                      <LastActive
-                        user={user}
-                        isHydrated={isHydrated}
-                        dim={dimText}
-                      />
+                      <LastActive user={user} isHydrated={isHydrated} />
                     </Table.Cell>
                     <Table.Cell justify="end">
                       <UserActionsDropdown user={user}>
@@ -356,59 +351,16 @@ export function UsersManagementLoading() {
 }
 
 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>
+  return (
+    <UsersManagementRoot
+      direction="row"
+      justify="center"
+      align="center"
+      minHeight="676px"
+    >
+      <GenericError error={error} />
     </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({
@@ -429,7 +381,7 @@ function UsersManagementRoot({
   );
 }
 
-function UserBadge({ user }: { user: User }) {
+function UserBadge({ user }: { user: Member }) {
   // TODO: This is not yet available in the data. Update here after API is updated.
   if (user.isLoggedInUser) {
     return (
@@ -465,7 +417,7 @@ function UserBadge({ user }: { user: User }) {
 }
 
 interface LastActiveProps {
-  user: User;
+  user: Member;
   isHydrated: boolean;
   dim?: boolean;
 }
@@ -477,13 +429,7 @@ function LastActive(props: LastActiveProps) {
         <VisuallyHidden>
           {props.user.status === "Active" ? "Never" : "Not active"}
         </VisuallyHidden>
-        <TableCellText
-          dim={props.dim}
-          aria-hidden
-          style={{ userSelect: "none" }}
-        >
-          –
-        </TableCellText>
+        <Separator />
       </>
     );
   }
@@ -529,9 +475,7 @@ function LastActiveImpl({
     return (
       <>
         <VisuallyHidden>Unknown</VisuallyHidden>
-        <TableCellText dim={dim} aria-hidden style={{ userSelect: "none" }}>
-          –
-        </TableCellText>
+        <Separator />
       </>
     );
   }

package/src/lib/utils.ts

@@ -1,4 +1,5 @@
-import type { User } from "./api/user";
+import { Member } from "@repo/api";
+import { UAParser } from "ua-parser-js";
 import { WIDGETS_CLASS_NAMESPACE } from "./constants";
 
 export const canUseDOM = !!(
@@ -10,7 +11,7 @@ export const canUseDOM = !!(
 export function getBestName({
   firstName,
   lastName,
-}: Pick<User, "firstName" | "lastName">) {
+}: Pick<Member, "firstName" | "lastName">) {
   return [firstName, lastName].filter(Boolean).join(" ") || null;
 }
 
@@ -101,3 +102,30 @@ export function namespaceClassNames(...classNames: string[]): string {
     .map((className) => `${WIDGETS_CLASS_NAMESPACE}-${className}`)
     .join(" ");
 }
+
+export function parseUserAgent(userAgent?: string | null) {
+  const { browser, device, os } = UAParser(userAgent ?? "");
+
+  const browserName = browser.name?.replace(/^Mobile\s*/i, "");
+  const pretty = [browserName, os.name].filter(Boolean).join(" on ");
+
+  return { pretty, isMobile: device.type === "mobile" };
+}
+
+export function getUserLocation(
+  location?: {
+    cityName: string;
+    countryISOCode: string;
+  } | null,
+  ipAddress?: string | null,
+) {
+  if (location) {
+    return `${location.cityName}, ${location.countryISOCode}`;
+  }
+
+  if (ipAddress) {
+    return ipAddress;
+  }
+
+  return "Unknown location";
+}

package/src/organization-switcher.client.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import {
+  ApiProvider,
+  AuthToken,
+  OrganizationInfo,
+  useOrganizations,
+} from "@repo/api";
+import * as React from "react";
+import { ErrorBoundary } from "./lib/error-boundary";
+import { useIsHydrated } from "./lib/use-is-hydrated";
+import {
+  OrganizationSwitcherError,
+  OrganizationSwitcherLoading,
+  OrganizationSwitcherPassthroughProps,
+  OrganizationSwitcher as OrganizationSwitcherPresentational,
+} from "./lib/organization-switcher";
+import { useWorkOsApiUrl } from "./lib/widgets-context";
+import { keepPreviousData } from "@tanstack/react-query";
+
+export interface OrganizationSwitcherProps
+  extends OrganizationSwitcherPassthroughProps {
+  authToken: AuthToken;
+}
+
+export const OrganizationSwitcher: React.FC<OrganizationSwitcherProps> = ({
+  authToken,
+  ...passthroughProps
+}) => {
+  const baseUrl = useWorkOsApiUrl();
+
+  return (
+    <ErrorBoundary FallbackComponent={OrganizationSwitcherError}>
+      <ApiProvider authToken={authToken} baseUrl={baseUrl}>
+        <OrganizationSwitcherContent {...passthroughProps} />
+      </ApiProvider>
+    </ErrorBoundary>
+  );
+};
+
+// Constant reference to avoid unnecessary prop changes
+const emptyOrganizations: OrganizationInfo[] = [];
+
+const OrganizationSwitcherContent = ({
+  variant,
+  ...rest
+}: OrganizationSwitcherPassthroughProps) => {
+  const isHydrated = useIsHydrated();
+  const organizationsQuery = useOrganizations({
+    query: {
+      placeholderData: keepPreviousData,
+    },
+  });
+
+  const organizations = organizationsQuery.data?.data ?? emptyOrganizations;
+
+  if (
+    organizationsQuery.isLoading ||
+    // render loading state on the server to prevent FOUC or hydration mismatch
+    !isHydrated
+  ) {
+    return <OrganizationSwitcherLoading organizations={organizations} />;
+  }
+
+  if (organizationsQuery.isError) {
+    return <OrganizationSwitcherError error={organizationsQuery.error} />;
+  }
+
+  return (
+    <ErrorBoundary FallbackComponent={OrganizationSwitcherError}>
+      <OrganizationSwitcherPresentational
+        organizations={organizations}
+        {...rest}
+      />
+    </ErrorBoundary>
+  );
+};

package/src/styles.css

@@ -0,0 +1,44 @@
+@import "./lib/card-list.css";
+@import "./lib/marker.css";
+@import "./lib/save-button.css";
+
+/**
+ * Dialog exit animation
+ */
+@keyframes woswidgets-dialog-out {
+  from {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(10px) scale(0.97);
+  }
+}
+
+@keyframes woswidgets-dialog-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .rt-BaseDialogContent[data-state="closed"] {
+    transition: none;
+    animation: woswidgets-dialog-out 150ms ease-out;
+  }
+
+  .rt-BaseDialogOverlay[data-state="closed"] {
+    transition: none;
+    animation: woswidgets-dialog-overlay-out 300ms ease-out;
+  }
+
+  .rt-BaseDialogOverlay:where([data-state="closed"])::before {
+    transition: none;
+    animation: none;
+    opacity: 1;
+  }
+}

package/src/user-profile.client.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import * as React from "react";
+import {
+  UserProfileError,
+  UserProfileLoading,
+  UserProfile as UserProfilePresentational,
+} from "./lib/user-profile";
+import { useIsHydrated } from "./lib/use-is-hydrated";
+import { ApiProvider, AuthToken, useMe } from "@repo/api";
+import { useWorkOsApiUrl } from "./lib/widgets-context";
+import { ErrorBoundary } from "./lib/error-boundary";
+
+export interface UserProfileProps {
+  authToken: AuthToken;
+}
+
+export const UserProfile: React.FC<UserProfileProps> = ({ authToken }) => {
+  const baseUrl = useWorkOsApiUrl();
+
+  return (
+    <ApiProvider authToken={authToken} baseUrl={baseUrl}>
+      <UserProfileContent />
+    </ApiProvider>
+  );
+};
+
+const UserProfileContent = () => {
+  const isHydrated = useIsHydrated();
+  const meQuery = useMe();
+
+  if (
+    // render loading state on the server to prevent FOUC or hydration mismatch
+    !isHydrated ||
+    meQuery.isLoading
+  ) {
+    return <UserProfileLoading />;
+  }
+
+  if (meQuery.isError) {
+    return <UserProfileError error={meQuery.error} />;
+  }
+
+  const user = meQuery.data!;
+
+  return (
+    <ErrorBoundary FallbackComponent={UserProfileError}>
+      <UserProfilePresentational userData={user} />
+    </ErrorBoundary>
+  );
+};

package/src/user-security.client.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import {
+  ApiProvider,
+  AuthToken,
+  useAuthenticationInformation,
+} from "@repo/api";
+import {
+  UserSecurityError,
+  UserSecurityLoading,
+  UserSecurity as UserSecurityPresentational,
+} from "./lib/user-security";
+import { useIsHydrated } from "./lib/use-is-hydrated";
+import { useWorkOsApiUrl } from "./lib/widgets-context";
+import { ErrorBoundary } from "./lib/error-boundary";
+
+export interface UserSecurityProps {
+  authToken: AuthToken;
+}
+
+export const UserSecurity: React.FC<UserSecurityProps> = ({ authToken }) => {
+  const baseUrl = useWorkOsApiUrl();
+
+  return (
+    <ApiProvider authToken={authToken} baseUrl={baseUrl}>
+      <UserSecurityContent />
+    </ApiProvider>
+  );
+};
+
+const UserSecurityContent = () => {
+  const isHydrated = useIsHydrated();
+  const {
+    data: settings,
+    isLoading,
+    isError,
+    isSuccess,
+    error,
+  } = useAuthenticationInformation();
+
+  if (!isHydrated || isLoading) {
+    return <UserSecurityLoading />;
+  }
+
+  if (isError || !isSuccess) {
+    return <UserSecurityError error={error} />;
+  }
+
+  return (
+    <ErrorBoundary FallbackComponent={UserSecurityError}>
+      <UserSecurityPresentational settings={settings.data} />
+    </ErrorBoundary>
+  );
+};

package/src/user-sessions.client.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import * as React from "react";
+import {
+  UserSessionsError,
+  UserSessionsLoading,
+  UserSessions as UserSessionsPresentational,
+} from "./lib/user-sessions";
+import { useIsHydrated } from "./lib/use-is-hydrated";
+import { ApiProvider, useApi, useSessions } from "@repo/api";
+import { useWorkOsApiUrl } from "./lib/widgets-context";
+import { ErrorBoundary } from "./lib/error-boundary";
+import { useQuery } from "@tanstack/react-query";
+
+type UserSessionsWithoutCurrentSessionIdProps = {
+  authToken: () => Promise<string>;
+};
+
+type UserSessionsWithCurrentSessionIdProps = {
+  authToken: string;
+  currentSessionId: string;
+};
+
+type UserSessionsProps =
+  | UserSessionsWithoutCurrentSessionIdProps
+  | UserSessionsWithCurrentSessionIdProps;
+
+export const UserSessions: React.FC<UserSessionsProps> = (props) => {
+  const baseUrl = useWorkOsApiUrl();
+
+  return (
+    <ApiProvider authToken={props.authToken} baseUrl={baseUrl}>
+      <UserSessionsContent
+        currentSessionId={
+          "currentSessionId" in props ? props.currentSessionId : undefined
+        }
+      />
+    </ApiProvider>
+  );
+};
+
+const UserSessionsContent = ({
+  currentSessionId,
+}: {
+  currentSessionId?: string;
+}) => {
+  const isHydrated = useIsHydrated();
+  const sessionsQuery = useSessions();
+  const currentSessionIdQuery = useCurrentSessionIdQuery(currentSessionId);
+
+  if (
+    !isHydrated ||
+    sessionsQuery.isLoading ||
+    currentSessionIdQuery.isLoading
+  ) {
+    return <UserSessionsLoading />;
+  }
+
+  if (sessionsQuery.isError || currentSessionIdQuery.isError) {
+    return (
+      <UserSessionsError
+        error={sessionsQuery.error || currentSessionIdQuery.error}
+      />
+    );
+  }
+
+  return (
+    <ErrorBoundary FallbackComponent={UserSessionsError}>
+      <UserSessionsPresentational
+        sessionsData={sessionsQuery.data?.data || []}
+        currentSessionId={currentSessionIdQuery.data ?? ""}
+      />
+    </ErrorBoundary>
+  );
+};
+
+function useCurrentSessionIdQuery(currentSessionId?: string) {
+  const { authToken } = useApi();
+
+  return useQuery({
+    queryKey: ["authToken"],
+    queryFn: async () => {
+      if (currentSessionId) {
+        return currentSessionId;
+      }
+
+      const res = await Promise.resolve(authToken);
+      const claims = getClaims(res);
+      return claims.sid;
+    },
+  });
+}
+
+function getClaims(accessToken: string) {
+  return JSON.parse(atob(accessToken.split(".")[1])) as { sid: string };
+}