@workos-inc/widgets 0.0.0-pre.0

package/src/lib/api/user.ts

@@ -0,0 +1,458 @@
+import {
+  keepPreviousData,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import {
+  useUsersManagementContext,
+  type UsersManagementContextType,
+} from "../users-management-context";
+import { parseErrorResponse } from "../utils";
+import { useWorkOsApiUrl } from "../widgets-context";
+import { API_ENDPOINTS } from "./config";
+import { USER_ROW_LIMIT, WIDGETS_API_VERSION } from "../constants";
+
+export interface PaginationData {
+  before?: string;
+  after?: string;
+}
+
+export type UserAction =
+  | "edit-role"
+  | "revoke-membership"
+  | "resend-invite"
+  | "revoke-invite";
+
+export type UserStatus =
+  | "Active"
+  | "Invited"
+  | "InviteExpired"
+  | "InviteRevoked";
+
+export interface UserRole {
+  slug: string;
+  name: string;
+}
+
+export interface User {
+  id: string;
+  email: string;
+  profilePictureUrl?: string | null;
+  firstName?: string | null;
+  lastName?: string | null;
+  emailVerified: boolean;
+  createdAt: string;
+  lastActivityAt?: string | null;
+  isLoggedInUser?: boolean;
+  roles: UserRole[];
+  actions: UserAction[];
+  status: UserStatus;
+}
+
+export type Paginated<T> = { data: T; pagination: PaginationData };
+
+type PaginatedUsers = Paginated<User[]>;
+
+class InviteUserError extends Error {
+  status: number;
+  constructor(args: { message: string; status: number }) {
+    super(args.message);
+    this.name = "InviteUserError";
+    this.status = args.status;
+  }
+}
+
+export const useUsers = (context?: UsersManagementContextType) => {
+  const {
+    authToken,
+    state: { pagination, role, searchQuery },
+  } = useUsersManagementContext(context);
+  const baseUrl = useWorkOsApiUrl();
+  const limit = USER_ROW_LIMIT;
+  const { before, after } = pagination || {};
+
+  return useQuery<PaginatedUsers>({
+    queryKey: [
+      "users",
+      { authToken, baseUrl, limit, before, after, role, searchQuery },
+    ],
+    queryFn: () =>
+      fetchUsers({
+        authToken,
+        baseUrl,
+        limit,
+        before,
+        after,
+        role,
+        searchQuery,
+      }),
+    enabled: !!authToken,
+    placeholderData: keepPreviousData,
+  });
+};
+
+export const useUser = (
+  userId: string,
+  initialContext?: UsersManagementContextType,
+) => {
+  const { authToken } = useUsersManagementContext(initialContext);
+  const baseUrl = useWorkOsApiUrl();
+  return useQuery<User>({
+    queryKey: ["user", userId],
+    queryFn: () => fetchUser(userId, { baseUrl, authToken }),
+    enabled: !!authToken,
+  });
+};
+
+export const useUpdateUserRole = (args?: {
+  onError?: (error: unknown) => void;
+}) => {
+  const { authToken } = useUsersManagementContext();
+  const queryClient = useQueryClient();
+  const baseUrl = useWorkOsApiUrl();
+  const { onError } = args || {};
+
+  return useMutation({
+    mutationFn: ({
+      id,
+      data: { roles },
+    }: {
+      id: string;
+      data: { roles: string[] };
+    }) => updateUserRole(id, { authToken, baseUrl, data: { roles } }),
+    onSuccess: (updatedUser) => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      queryClient.invalidateQueries({ queryKey: ["user", updatedUser.id] });
+    },
+    onError,
+  });
+};
+
+export interface InviteUserPayload {
+  email: string;
+  role: string;
+}
+
+export const useInviteUser = (args?: {
+  onError?: (error: unknown) => void;
+}) => {
+  const { authToken } = useUsersManagementContext();
+  const queryClient = useQueryClient();
+  const baseUrl = useWorkOsApiUrl();
+  const { onError } = args || {};
+
+  return useMutation({
+    mutationFn: (data: InviteUserPayload) =>
+      inviteUser({ authToken, baseUrl, ...data }),
+    onSuccess: (_newUser) => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+    },
+    onError,
+  });
+};
+
+export const useDeleteUser = (args?: {
+  onError?: (error: unknown) => void;
+}) => {
+  const { authToken } = useUsersManagementContext();
+  const queryClient = useQueryClient();
+  const baseUrl = useWorkOsApiUrl();
+  const { onError } = args || {};
+
+  return useMutation({
+    mutationFn: (id: string) => deleteUser(id, { authToken, baseUrl }),
+    onSuccess: (_, userId) => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      queryClient.removeQueries({ queryKey: ["user", userId] });
+    },
+    onError,
+  });
+};
+
+export const useRevokeUserInvite = (args?: {
+  onError?: (error: unknown) => void;
+}) => {
+  const { authToken } = useUsersManagementContext();
+  const queryClient = useQueryClient();
+  const baseUrl = useWorkOsApiUrl();
+  const { onError } = args || {};
+
+  return useMutation({
+    mutationFn: (id: string) => revokeUserInvite(id, { authToken, baseUrl }),
+    onSuccess: (_, userId) => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      queryClient.removeQueries({ queryKey: ["user", userId] });
+    },
+    onError,
+  });
+};
+
+export const useResendUserInvite = (args?: {
+  onError?: (error: unknown) => void;
+}) => {
+  const { authToken } = useUsersManagementContext();
+  const queryClient = useQueryClient();
+  const baseUrl = useWorkOsApiUrl();
+  const { onError } = args || {};
+
+  return useMutation({
+    mutationFn: (id: string) => resendUserInvite(id, { authToken, baseUrl }),
+    onSuccess: (_, userId) => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      queryClient.removeQueries({ queryKey: ["user", userId] });
+    },
+    onError,
+  });
+};
+
+/**
+ * Fetch functions
+ */
+async function fetchUsers({
+  baseUrl,
+  authToken,
+  limit,
+  role,
+  before,
+  after,
+  searchQuery,
+}: {
+  baseUrl: string;
+  authToken: string | null;
+  limit: number;
+  before: string | undefined;
+  after: string | undefined;
+  searchQuery: string | null;
+  role: string | null;
+}) {
+  if (!authToken) {
+    throw new Error("No auth token provided");
+  }
+  const url = new URL(`${baseUrl}/${API_ENDPOINTS.USERS}`);
+  url.searchParams.set("limit", limit.toString());
+  if (before) {
+    url.searchParams.set("before", before);
+  }
+  if (after) {
+    url.searchParams.set("after", after);
+  }
+  if (role) {
+    url.searchParams.set("role", role);
+  }
+  if (searchQuery) {
+    url.searchParams.set("search", searchQuery);
+  }
+  const response = await fetch(url, {
+    cache: "no-store",
+    headers: getAuthHeaders(authToken),
+  }).catch((error) => {
+    console.error(error);
+    // TODO: handle fetch errors
+    throw new Error("Failed to fetch users");
+  });
+
+  if (!response.ok) {
+    // TODO: handle this case
+    throw new Error("Failed to fetch users");
+  }
+  // TODO validate the response
+  const json = await response.json();
+  const { data, listMetadata: pagination } = json as {
+    data: User[];
+    listMetadata: PaginationData;
+  };
+  return { data, pagination };
+}
+
+const fetchUser = async (
+  userId: string,
+  { authToken, baseUrl }: { authToken: string | null; baseUrl: string },
+) => {
+  if (!authToken) {
+    throw new Error("No auth token provided");
+  }
+  const response = await fetch(`${baseUrl}/${API_ENDPOINTS.USERS}/${userId}`, {
+    headers: getAuthHeaders(authToken),
+    cache: "no-store",
+  }).catch((error) => {
+    console.error(error);
+    // TODO: handle fetch errors
+    throw new Error("Failed to fetch user");
+  });
+
+  if (!response.ok) {
+    // TODO: handle this case
+    throw new Error("Failed to fetch user");
+  }
+  // TODO validate the response
+  const json = await response.json();
+  return json.data as User;
+};
+
+const updateUserRole = async (
+  userId: string,
+  {
+    authToken,
+    baseUrl,
+    data,
+  }: { authToken: string | null; baseUrl: string; data: { roles: string[] } },
+) => {
+  if (!authToken) {
+    // TODO handle this case
+    throw new Error("No auth token");
+  }
+
+  const response = await fetch(`${baseUrl}/${API_ENDPOINTS.USERS}/${userId}`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      ...getAuthHeaders(authToken),
+    },
+    body: JSON.stringify(data),
+  }).catch((error) => {
+    console.error(error);
+    // TODO: handle fetch errors
+    throw new Error("Failed to update user");
+  });
+
+  if (!response.ok) {
+    throw new Error("Failed to update user");
+  }
+  // TODO validate the response
+  const json = await response.json();
+  return json as { id: string; success: boolean };
+};
+
+const inviteUser = async ({
+  authToken,
+  baseUrl,
+  ...data
+}: InviteUserPayload & { authToken: string | null; baseUrl: string }) => {
+  if (!authToken) {
+    // TODO handle this case
+    throw new Error("No auth token");
+  }
+  if (!data.role) {
+    throw new Error("Role required to invite user");
+  }
+  const response = await fetch(`${baseUrl}/${API_ENDPOINTS.USER_INVITE}`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      ...getAuthHeaders(authToken),
+    },
+    body: JSON.stringify({
+      email: data.email,
+      roles: [data.role],
+    }),
+  }).catch((error) => {
+    console.error(error);
+    // TODO: handle fetch errors
+    throw new Error("Failed to invite user");
+  });
+
+  if (!response.ok) {
+    const { message, status } = await parseErrorResponse(response);
+    throw new InviteUserError({
+      message,
+      status,
+    });
+  }
+  // TODO validate the response
+  const json = await response.json();
+  return json as unknown;
+};
+
+const deleteUser = async (
+  userId: string,
+  { authToken, baseUrl }: { authToken: string | null; baseUrl: string },
+) => {
+  if (!authToken) {
+    // TODO handle this case
+    throw new Error("No auth token");
+  }
+
+  const response = await fetch(`${baseUrl}/${API_ENDPOINTS.USERS}/${userId}`, {
+    method: "DELETE",
+    headers: getAuthHeaders(authToken),
+  }).catch((error) => {
+    console.error(error);
+    // TODO: handle fetch errors
+    throw new Error("Failed to delete user. Please try again.");
+  });
+
+  if (!response.ok) {
+    console.error(response);
+    // TODO: handle server errors
+    throw new Error("Failed to delete user. Please try again.");
+  }
+  // TODO validate the response
+  const json = await response.json();
+  return json as unknown;
+};
+
+const revokeUserInvite = async (
+  userId: string,
+  { authToken, baseUrl }: { authToken: string | null; baseUrl: string },
+) => {
+  if (!authToken) {
+    // TODO handle this case
+    throw new Error("No auth token");
+  }
+  const response = await fetch(
+    `${baseUrl}/${API_ENDPOINTS.USER_INVITES}/${userId}`,
+    {
+      method: "DELETE",
+      headers: getAuthHeaders(authToken),
+    },
+  ).catch((error) => {
+    console.error(error);
+    // TODO: handle fetch errors
+    throw new Error("Failed to resend user invite. Please try again.");
+  });
+
+  if (!response.ok) {
+    // TODO: handle server errors
+    throw new Error("Failed to resend user invite. Please try again.");
+  }
+  // TODO validate the response
+  const json = await response.json();
+  return json as unknown;
+};
+
+const resendUserInvite = async (
+  userId: string,
+  { authToken, baseUrl }: { authToken: string | null; baseUrl: string },
+) => {
+  if (!authToken) {
+    // TODO handle this case
+    throw new Error("No auth token");
+  }
+  const response = await fetch(
+    `${baseUrl}/${API_ENDPOINTS.USER_INVITES_RESEND(userId)}`,
+    {
+      method: "POST",
+      headers: getAuthHeaders(authToken),
+    },
+  ).catch((error) => {
+    console.error(error);
+    // TODO: handle fetch errors
+    throw new Error("Failed to resend user invite. Please try again.");
+  });
+
+  if (!response.ok) {
+    // TODO: handle server errors
+    throw new Error("Failed to resend user invite. Please try again.");
+  }
+  // TODO validate the response
+  const json = await response.json();
+  return json as unknown;
+};
+
+function getAuthHeaders(authToken: string): HeadersInit {
+  return {
+    Authorization: `Bearer ${authToken}`,
+    "WorkOS-Widgets-Version": WIDGETS_API_VERSION,
+  };
+}

package/src/lib/constants.ts

@@ -0,0 +1,2 @@
+export const USER_ROW_LIMIT = 10;
+export const WIDGETS_API_VERSION = "v1";

package/src/lib/delete-user-dialog.tsx

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