@workos-inc/widgets 1.1.4 → 1.2.0

package/src/lib/user-sessions.tsx

@@ -1,204 +0,0 @@
-"use client";
-
-import { Box, Button, Card, Flex, Text } from "@radix-ui/themes";
-import clsx from "clsx";
-import { Badge, SecondaryButton, Skeleton } from "./elements";
-import {
-  getComparativeReadableDate,
-  getUserLocation,
-  parseUserAgent,
-} from "./utils";
-import { LogoutDialog } from "./logout-dialog";
-import { LogoutAllSessionsDialog } from "./logout-all-sessions-dialog";
-import { ActiveSession } from "../api";
-import * as CardList from "../card-list";
-import { IconPanel } from "./icon-panel";
-import { useState } from "react";
-import { GenericError } from "./generic-error";
-import { LaptopIcon, MobileIcon } from "@radix-ui/react-icons";
-
-interface UserSessionsProps {
-  sessionsData: ActiveSession[];
-  currentSessionId: string;
-}
-
-export const UserSessions = ({
-  sessionsData: sessions,
-  currentSessionId,
-}: UserSessionsProps) => {
-  const currentSession = sessions.find(
-    (session) => session.id === currentSessionId,
-  );
-  const otherSessions = sessions.filter(
-    (session) => session.id !== currentSessionId,
-  );
-  const [openLogoutDialog, setOpenLogoutDialog] = useState(false);
-  const [sessionToSignOut, setSessionToSignOut] =
-    useState<ActiveSession | null>(null);
-  const [openLogoutAllSessionsDialog, setOpenLogoutAllSessionsDialog] =
-    useState(false);
-
-  return (
-    <Flex
-      direction="column"
-      gap="4"
-      className={clsx("woswidgets-widget")}
-      data-woswidgets-widget-id="user-sessions"
-    >
-      <CardList.Root>
-        {currentSession && (
-          <CardList.Item>
-            <UserSession session={currentSession} isCurrentSession />
-          </CardList.Item>
-        )}
-
-        {otherSessions.map((session) => (
-          <CardList.Item key={session.id}>
-            <UserSession
-              session={session}
-              onSignOut={() => {
-                setSessionToSignOut(session);
-                setOpenLogoutDialog(true);
-              }}
-            />
-          </CardList.Item>
-        ))}
-      </CardList.Root>
-
-      {sessions.length > 1 && (
-        <Card size="2">
-          <Flex gap="2" justify="between" align="center">
-            <Box>
-              <Text size="2" highContrast weight="bold" as="p">
-                Sign out of all other devices
-              </Text>
-              <Text size="2" color="gray" as="p">
-                Remove access from all devices except this one
-              </Text>
-            </Box>
-
-            <SecondaryButton
-              onClick={() => {
-                setOpenLogoutAllSessionsDialog(true);
-              }}
-            >
-              Sign out
-            </SecondaryButton>
-          </Flex>
-        </Card>
-      )}
-
-      {sessionToSignOut && (
-        <LogoutDialog
-          session={sessionToSignOut}
-          open={openLogoutDialog}
-          onOpenChange={setOpenLogoutDialog}
-        />
-      )}
-
-      <LogoutAllSessionsDialog
-        currentSessionId={currentSessionId}
-        open={openLogoutAllSessionsDialog}
-        onOpenChange={setOpenLogoutAllSessionsDialog}
-      />
-    </Flex>
-  );
-};
-
-export function UserSessionsLoading() {
-  return (
-    <Card size="2">
-      <Flex gap="4" align="center">
-        <Skeleton>
-          <IconPanel />
-        </Skeleton>
-
-        <Flex direction="column">
-          <Text size="2" highContrast weight="bold" as="p" mb="-2px">
-            <Skeleton>The location</Skeleton>
-          </Text>
-
-          <Text size="2" color="gray" as="p">
-            <Skeleton>The location</Skeleton>
-          </Text>
-        </Flex>
-      </Flex>
-    </Card>
-  );
-}
-
-export function UserSessionsError({ error }: { error: unknown }) {
-  return (
-    <Card size="2">
-      <GenericError error={error} />
-    </Card>
-  );
-}
-
-interface UserSessionProps {
-  session: ActiveSession;
-  isCurrentSession?: boolean;
-  onSignOut?: (session: ActiveSession) => void;
-}
-
-const UserSession = ({
-  session,
-  isCurrentSession = false,
-  onSignOut,
-}: UserSessionProps) => {
-  const userAgent = parseUserAgent(session.userAgent);
-  const userLocation = getUserLocation(
-    session.currentLocation,
-    session.ipAddress,
-  );
-
-  return (
-    <Flex gap="4" align="center">
-      <IconPanel>
-        {userAgent.isMobile ? <MobileIcon /> : <LaptopIcon />}
-      </IconPanel>
-
-      <Flex direction="column">
-        <Text size="2" highContrast weight="bold" as="p" mb="-2px">
-          {userAgent.pretty}
-        </Text>
-
-        <Flex gap="1" align="center">
-          <Text size="2" color="gray" as="p">
-            {userLocation}
-          </Text>
-
-          {isCurrentSession && <Badge ml="2">This device</Badge>}
-
-          {!isCurrentSession && session.lastActivityAt && (
-            <>
-              <Text size="2" color="gray">
-                ∙
-              </Text>
-              <Text size="2" color="gray">
-                Last seen{" "}
-                {getComparativeReadableDate(
-                  new Date(),
-                  new Date(session.lastActivityAt),
-                )}
-              </Text>
-            </>
-          )}
-        </Flex>
-      </Flex>
-
-      {!isCurrentSession && (
-        <Flex ml="auto" mr="2">
-          <Button
-            variant="ghost"
-            onClick={() => {
-              onSignOut?.(session);
-            }}
-          >
-            Sign out
-          </Button>
-        </Flex>
-      )}
-    </Flex>
-  );
-};

package/src/lib/users-filter.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import { Select } from "@radix-ui/themes";
-import * as React from "react";
-import { SelectContent, SelectItem, SelectTrigger } from "./elements";
-import { useUsersManagementContext } from "./users-management-context";
-import { MemberRole } from "../api";
-
-const ALL_ROLES_NAME = "All";
-const ALL_ROLES_VALUE = "null";
-
-type UsersFilterProps = React.ComponentPropsWithoutRef<typeof Select.Root> & {
-  roles: MemberRole[] | undefined;
-  disabled?: boolean;
-};
-
-export const UsersFilter: React.FC<UsersFilterProps> = ({
-  roles,
-  disabled,
-}) => {
-  const {
-    dispatch,
-    state: { role },
-  } = useUsersManagementContext();
-
-  const setFilterParams = (value: string | null) => {
-    dispatch({ type: "FILTER_BY_ROLE", role: value });
-  };
-  const isValidRole = (value: unknown): value is string =>
-    roles ? roles.findIndex((role) => role.slug === value) !== -1 : false;
-  const filteredRole = isValidRole(role) ? role : ALL_ROLES_VALUE;
-  const roleName =
-    roles?.find((role) => role.slug === filteredRole)?.name || ALL_ROLES_NAME;
-
-  const onValueChange = (value: string) => {
-    if (value === ALL_ROLES_VALUE) {
-      setFilterParams(null);
-    } else {
-      if (isValidRole(value)) {
-        setFilterParams(value);
-      }
-    }
-  };
-
-  return (
-    <Select.Root
-      value={roles ? filteredRole : "null"}
-      onValueChange={onValueChange}
-      disabled={disabled}
-    >
-      <SelectTrigger>{roles ? roleName : ALL_ROLES_NAME}</SelectTrigger>
-      <SelectContent>
-        <SelectItem value={ALL_ROLES_VALUE}>{ALL_ROLES_NAME}</SelectItem>
-        {roles?.map((role) => (
-          <React.Fragment key={role.slug}>
-            <SelectItem value={role.slug}>{role.name}</SelectItem>
-          </React.Fragment>
-        ))}
-      </SelectContent>
-    </Select.Root>
-  );
-};

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

@@ -1,74 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  UsersManagementAction,
-  UsersManagementState,
-  useUsersManagementState,
-} from "./users-management-state";
-import { ListMetadata } from "../api";
-
-export interface UsersManagementContextType {
-  state: UsersManagementState;
-  dispatch: React.Dispatch<UsersManagementAction>;
-}
-
-const UsersManagementContext = React.createContext<
-  UsersManagementContextType | undefined
->(undefined);
-UsersManagementContext.displayName = "UsersManagementContext";
-
-const initialState: UsersManagementState = {
-  pagination: null,
-  role: null,
-  searchQuery: null,
-};
-
-export const UsersManagementContextProvider: React.FC<{
-  children?: React.ReactNode;
-}> = ({ children }) => {
-  const [state, dispatch] = useUsersManagementState(initialState);
-
-  const context = React.useMemo<UsersManagementContextType>(
-    () => ({
-      state,
-      dispatch,
-    }),
-    [state, dispatch],
-  );
-
-  return (
-    <UsersManagementContext.Provider value={context}>
-      {children}
-    </UsersManagementContext.Provider>
-  );
-};
-
-const NOOP = () => void 0;
-const EMPTY_PAGINATION: ListMetadata = {};
-
-/**
- * The context may be provided if it is instantiated in the tree above the user.
- */
-export function useUsersManagementContext(
-  initialContext?: UsersManagementContextType | null,
-): UsersManagementContextType {
-  const context = React.useContext(UsersManagementContext);
-
-  if (context) {
-    return context;
-  }
-
-  if (initialContext) {
-    return initialContext;
-  }
-
-  return {
-    dispatch: NOOP,
-    state: {
-      pagination: EMPTY_PAGINATION,
-      role: null,
-      searchQuery: null,
-    },
-  };
-}

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

@@ -1,165 +0,0 @@
-import * as React from "react";
-import { canUseDOM } from "./utils";
-import { ListMetadata } from "../api";
-
-export function useUsersManagementState(initialState: UsersManagementState) {
-  const [[state, effects], dispatch] = React.useReducer(reducer, [
-    initialState,
-    [],
-  ]);
-
-  React.useEffect(() => {
-    if (window !== window.top) {
-      // do not use query params if widget is rendered in an iframe
-      return;
-    }
-    const params = new URLSearchParams(window.location.search);
-    dispatch({ type: "INIT", params });
-  }, []);
-
-  React.useEffect(() => {
-    for (const effect of effects) {
-      effect();
-    }
-  }, [effects]);
-
-  return [state, dispatch] as const;
-}
-
-function reducer(
-  current: StateWithEffects<UsersManagementState>,
-  action: UsersManagementAction,
-): StateWithEffects<UsersManagementState> {
-  const effects: EffectFn[] = [];
-  const exec = (fn: () => void) => {
-    const effect = () => {
-      if (!effect.disposed) {
-        effect.disposed = true;
-        fn();
-      }
-    };
-    effect.disposed = false;
-    effects.push(effect);
-  };
-
-  const [currentState] = current;
-  switch (action.type) {
-    case "INIT": {
-      const { params } = action;
-      let role, searchQuery;
-      if ((role = params.get("ak_role"))) {
-        return [{ ...currentState, searchQuery: null, role }, effects];
-      }
-      if ((searchQuery = params.get("ak_q"))) {
-        return [{ ...currentState, searchQuery, role: null }, effects];
-      }
-      return current;
-    }
-    case "SET_PAGINATION": {
-      const { pagination } = action;
-      if (
-        (pagination.after &&
-          pagination.after === currentState.pagination?.after) ||
-        (pagination.before &&
-          pagination.before === currentState.pagination?.before)
-      ) {
-        return current;
-      }
-
-      return [{ ...currentState, pagination }, effects];
-    }
-    case "FILTER_BY_ROLE": {
-      if (action.role === currentState.role) {
-        return current;
-      }
-      const { role } = action;
-      exec(() =>
-        updateQueryParams(
-          { ak_role: role, ak_q: null },
-          { replaceState: true },
-        ),
-      );
-      return [
-        { ...currentState, pagination: null, role, searchQuery: null },
-        effects,
-      ];
-    }
-    case "FILTER_BY_SEARCH": {
-      if (action.searchQuery === currentState.searchQuery) {
-        return current;
-      }
-      const { searchQuery } = action;
-      exec(() =>
-        updateQueryParams(
-          { ak_role: null, ak_q: searchQuery },
-          { replaceState: true },
-        ),
-      );
-      return [
-        { ...currentState, pagination: null, role: null, searchQuery },
-        effects,
-      ];
-      //
-      break;
-    }
-    default:
-      return current;
-  }
-}
-
-export interface UsersManagementState {
-  searchQuery: string | null;
-  role: string | 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: ListMetadata };
-
-type EffectFn = {
-  (): void;
-  disposed: boolean;
-};
-
-type StateWithEffects<State> = [State, EffectFn[]];
-
-function updateQueryParams(
-  newParams: { [key: string]: { toString(): string } | null },
-  args: { replaceState?: boolean } = {},
-) {
-  if (!canUseDOM) {
-    throw new Error("Cannot update query params on the server");
-  }
-
-  if (window !== window.top) {
-    // do not update query params if widget is rendered in an iframe
-    return;
-  }
-
-  const initialSearch = window.location.search;
-  const params = new URLSearchParams(initialSearch);
-  Object.entries(newParams).forEach(([key, value]) => {
-    if (value != null && value !== "") {
-      params.set(key, String(value));
-    } else {
-      params.delete(key);
-    }
-  });
-
-  if (initialSearch === `?${params.toString()}`) {
-    return;
-  }
-
-  const newUrl = params.toString()
-    ? `${window.location.pathname}?${params}`
-    : window.location.pathname;
-
-  if (args.replaceState) {
-    window.history.replaceState({}, "", newUrl);
-  } else {
-    window.history.pushState({}, "", newUrl);
-  }
-}