synapse-react-client 4.0.19 → 4.0.21

package/dist/components/UserOrTeamBadge/useUserOrTeam.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUserOrTeam.js","names":[],"sources":["../../../src/components/UserOrTeamBadge/useUserOrTeam.tsx"],"sourcesContent":["import {\n  useGetProfileImage,\n  useGetStablePresignedUrl,\n} from '@/synapse-queries/file/useFiles'\nimport { useGetUserGroupHeader } from '@/synapse-queries/user/useUserGroupHeader'\nimport { useGetRealmPrincipals } from '@/synapse-queries/realm/useRealmPrincipals'\nimport { useGetTeam } from '@/synapse-queries/team/useTeam'\nimport { useCreateUrlForData } from '@/utils/hooks/usePreFetchResource'\nimport {\n  FileHandleAssociateType,\n  UserGroupHeader,\n  UserProfile,\n} from '@sage-bionetworks/synapse-types'\nimport { Avatar as MUIAvatar } from '@mui/material'\nimport React, { useMemo } from 'react'\nimport { Avatar, AvatarSize } from '../UserCard/Avatar'\nimport IconSvg from '../IconSvg/IconSvg'\n\nexport type UseUserOrTeamResult = {\n  /** The lightweight header for the resolved principal (user or team). Undefined while loading. */\n  userGroupHeader: UserGroupHeader | undefined\n  /** True while the `userGroupHeader` is being fetched. */\n  isLoading: boolean\n  /**\n   * A stable React component that renders the icon for the resolved principal.\n   *\n   * - **Individual user**: renders an `Avatar` with the user's profile image, falling back to\n   *   colored initials when no image is available.\n   * - **Regular team**: renders a team icon (`IconSvg icon=\"team\"`), or the team's custom image\n   *   when `Team.icon` (a file-handle ID) is set.\n   * - **Public / authenticated-users group**: renders a globe icon (`IconSvg icon=\"public\"`).\n   *\n   * Accepts an optional `avatarSize` prop (`'SMALL' | 'MEDIUM' | 'LARGE'`, default `'SMALL'`)\n   * for caller-controlled sizing. Returns `null` while the principal's identity has not yet\n   * been resolved (i.e., while `isLoading` is true).\n   */\n  IconComponent: React.ComponentType<{ avatarSize?: AvatarSize }>\n  /**\n   * Identifies Synapse realm special groups.\n   *\n   * - `'authenticatedUsers'` — the principal is the \"All registered Synapse users\" group.\n   * - `'publicGroup'` — the principal is the \"Anyone on the web\" group.\n   * - `null` — the principal is an individual user, a regular team, or realm data is still loading.\n   */\n  specialGroupType: 'authenticatedUsers' | 'publicGroup' | null\n}\n\nfunction UserAvatarIcon({\n  ownerId,\n  syntheticProfile,\n  avatarSize = 'SMALL',\n}: {\n  ownerId: string\n  syntheticProfile: UserProfile\n  avatarSize?: AvatarSize\n}) {\n  const { data: blob, isLoading } = useGetProfileImage(ownerId)\n  const imageURL = useCreateUrlForData(blob)\n  return (\n    <Avatar\n      userProfile={syntheticProfile}\n      imageURL={imageURL}\n      avatarSize={avatarSize}\n      showCardOnHover={false}\n      isLoadingAvatar={isLoading}\n    />\n  )\n}\n\nconst avatarSizePx: Record<AvatarSize, number> = {\n  SMALL: 20,\n  MEDIUM: 30,\n  LARGE: 80,\n}\n\nfunction TeamAvatarIcon({\n  ownerId,\n  isPublicGroup,\n  avatarSize = 'SMALL',\n}: {\n  ownerId: string\n  isPublicGroup: boolean\n  avatarSize?: AvatarSize\n}) {\n  const { data: team } = useGetTeam(ownerId, { enabled: !isPublicGroup })\n\n  const { dataUrl: teamIconUrl } =\n    useGetStablePresignedUrl(\n      {\n        fileHandleId: team?.icon ?? '',\n        associateObjectId: ownerId,\n        associateObjectType: FileHandleAssociateType.TeamAttachment,\n      },\n      false,\n      { enabled: !isPublicGroup && !!team?.icon },\n    ) ?? {}\n\n  const size = avatarSizePx[avatarSize]\n\n  if (isPublicGroup) {\n    return <IconSvg icon=\"public\" wrap={false} sx={{ fontSize: size }} />\n  }\n\n  if (teamIconUrl) {\n    return (\n      <MUIAvatar\n        src={teamIconUrl}\n        sx={{ width: size, height: size, bgcolor: 'background.default' }}\n      />\n    )\n  }\n\n  return <IconSvg icon=\"team\" wrap={false} sx={{ fontSize: size }} />\n}\n\n/**\n * Resolves a Synapse principal (user or team) by ID and returns display data plus a\n * ready-to-render icon component.\n *\n * @param principalId - The numeric or string Synapse principal ID. If omitted, falls back to\n *   `providedUserGroupHeader.ownerId`. Pass `undefined` when the ID is not yet known — the\n *   hook will return `isLoading: false` with all fields undefined/null until an ID is provided.\n * @param providedUserGroupHeader - An already-fetched `UserGroupHeader`. When supplied, the\n *   network fetch for the header is skipped entirely and this value is used directly. Useful\n *   when the caller already has header data (e.g., from a list response).\n */\nexport function useUserOrTeam(\n  principalId?: string | number,\n  providedUserGroupHeader?: UserGroupHeader,\n): UseUserOrTeamResult {\n  const resolvedPrincipalId = (\n    principalId ??\n    providedUserGroupHeader?.ownerId ??\n    ''\n  ).toString()\n\n  const { data: fetchedUserGroupHeader, isLoading } = useGetUserGroupHeader(\n    resolvedPrincipalId,\n    { enabled: !providedUserGroupHeader && !!resolvedPrincipalId },\n  )\n\n  const userGroupHeader = providedUserGroupHeader ?? fetchedUserGroupHeader\n\n  const ownerId = userGroupHeader?.ownerId\n  const isIndividual = userGroupHeader?.isIndividual\n  const userName = userGroupHeader?.userName\n  const firstName = userGroupHeader?.firstName\n\n  const { data: realmPrincipals } = useGetRealmPrincipals()\n\n  const specialGroupType: 'authenticatedUsers' | 'publicGroup' | null =\n    isIndividual === false\n      ? realmPrincipals?.authenticatedUsers === resolvedPrincipalId\n        ? 'authenticatedUsers'\n        : realmPrincipals?.publicGroup === resolvedPrincipalId\n          ? 'publicGroup'\n          : null\n      : null\n\n  const isPublicGroup = specialGroupType !== null\n\n  const IconComponent = useMemo<\n    React.ComponentType<{\n      avatarSize?: AvatarSize\n    }>\n  >(() => {\n    if (ownerId == null || isIndividual == null) return () => null\n\n    if (isIndividual) {\n      const syntheticProfile = {\n        ownerId,\n        userName,\n        firstName,\n      } as unknown as UserProfile\n      return ({ avatarSize }: { avatarSize?: AvatarSize }) => (\n        <UserAvatarIcon\n          ownerId={ownerId}\n          syntheticProfile={syntheticProfile}\n          avatarSize={avatarSize}\n        />\n      )\n    } else {\n      return ({ avatarSize }: { avatarSize?: AvatarSize }) => (\n        <TeamAvatarIcon\n          ownerId={ownerId}\n          isPublicGroup={isPublicGroup}\n          avatarSize={avatarSize}\n        />\n      )\n    }\n  }, [ownerId, isIndividual, userName, firstName, isPublicGroup])\n\n  return { userGroupHeader, isLoading, IconComponent, specialGroupType }\n}\n"],"mappings":";;;;;;;;;;;;AA+CA,SAAS,EAAe,EACtB,YACA,qBACA,gBAAa,WAKZ;CACD,IAAM,EAAE,MAAM,GAAM,iBAAc,EAAmB,EAAQ;AAE7D,QACE,kBAAC,GAAD;EACE,aAAa;EACH,UAJG,EAAoB,EAIvB;EACE;EACZ,iBAAiB;EACjB,iBAAiB;EACjB,CAAA;;AAIN,IAAM,IAA2C;CAC/C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,SAAS,EAAe,EACtB,YACA,kBACA,gBAAa,WAKZ;CACD,IAAM,EAAE,MAAM,MAAS,EAAW,GAAS,EAAE,SAAS,CAAC,GAAe,CAAC,EAEjE,EAAE,SAAS,MACf,EACE;EACE,cAAc,GAAM,QAAQ;EAC5B,mBAAmB;EACnB,qBAAqB,EAAwB;EAC9C,EACD,IACA,EAAE,SAAS,CAAC,KAAiB,CAAC,CAAC,GAAM,MAAM,CAC5C,IAAI,EAAE,EAEH,IAAO,EAAa;AAe1B,QAbI,IACK,kBAAC,GAAD;EAAS,MAAK;EAAS,MAAM;EAAO,IAAI,EAAE,UAAU,GAAM;EAAI,CAAA,GAGnE,IAEA,kBAAC,GAAD;EACE,KAAK;EACL,IAAI;GAAE,OAAO;GAAM,QAAQ;GAAM,SAAS;GAAsB;EAChE,CAAA,GAIC,kBAAC,GAAD;EAAS,MAAK;EAAO,MAAM;EAAO,IAAI,EAAE,UAAU,GAAM;EAAI,CAAA;;AAcrE,SAAgB,EACd,GACA,GACqB;CACrB,IAAM,KACJ,KACA,GAAyB,WACzB,IACA,UAAU,EAEN,EAAE,MAAM,GAAwB,iBAAc,EAClD,GACA,EAAE,SAAS,CAAC,KAA2B,CAAC,CAAC,GAAqB,CAC/D,EAEK,IAAkB,KAA2B,GAE7C,IAAU,GAAiB,SAC3B,IAAe,GAAiB,cAChC,IAAW,GAAiB,UAC5B,IAAY,GAAiB,WAE7B,EAAE,MAAM,MAAoB,GAAuB,EAEnD,IACJ,MAAiB,KACb,GAAiB,uBAAuB,IACtC,uBACA,GAAiB,gBAAgB,IAC/B,gBACA,OACJ,MAEA,IAAgB,MAAqB;AAiC3C,QAAO;EAAE;EAAiB;EAAW,eA/Bf,QAId;AACN,OAAI,KAAW,QAAQ,KAAgB,KAAM,cAAa;AAE1D,OAAI,GAAc;IAChB,IAAM,IAAmB;KACvB;KACA;KACA;KACD;AACD,YAAQ,EAAE,oBACR,kBAAC,GAAD;KACW;KACS;KACN;KACZ,CAAA;SAGJ,SAAQ,EAAE,oBACR,kBAAC,GAAD;IACW;IACM;IACH;IACZ,CAAA;KAGL;GAAC;GAAS;GAAc;GAAU;GAAW;GAAc,CAEzB;EAAe;EAAkB"}
+{"version":3,"file":"useUserOrTeam.js","names":[],"sources":["../../../src/components/UserOrTeamBadge/useUserOrTeam.tsx"],"sourcesContent":["import {\n  useGetProfileImage,\n  useGetStablePresignedUrl,\n} from '@/synapse-queries/file/useFiles'\nimport { useGetUserGroupHeader } from '@/synapse-queries/user/useUserGroupHeader'\nimport { useGetRealmPrincipals } from '@/synapse-queries/realm/useRealmPrincipals'\nimport { useGetTeam } from '@/synapse-queries/team/useTeam'\nimport { useCreateUrlForData } from '@/utils/hooks/usePreFetchResource'\nimport {\n  FileHandleAssociateType,\n  UserGroupHeader,\n  UserProfile,\n} from '@sage-bionetworks/synapse-types'\nimport { Avatar as MUIAvatar } from '@mui/material'\nimport React, { useMemo } from 'react'\nimport { Avatar, AvatarSize } from '../UserCard/Avatar'\nimport IconSvg from '../IconSvg/IconSvg'\n\nexport type UseUserOrTeamResult = {\n  /** The lightweight header for the resolved principal (user or team). Undefined while loading. */\n  userGroupHeader: UserGroupHeader | undefined\n  /** True while the `userGroupHeader` is being fetched. */\n  isLoading: boolean\n  /**\n   * A stable React component that renders the icon for the resolved principal.\n   *\n   * - **Individual user**: renders an `Avatar` with the user's profile image, falling back to\n   *   colored initials when no image is available.\n   * - **Regular team**: renders a team icon (`IconSvg icon=\"team\"`), or the team's custom image\n   *   when `Team.icon` (a file-handle ID) is set.\n   * - **Public / authenticated-users group**: renders a globe icon (`IconSvg icon=\"public\"`).\n   *\n   * Accepts an optional `avatarSize` prop (`'SMALL' | 'MEDIUM' | 'LARGE'`, default `'SMALL'`)\n   * for caller-controlled sizing. Returns `null` while the principal's identity has not yet\n   * been resolved (i.e., while `isLoading` is true).\n   */\n  IconComponent: React.ComponentType<{ avatarSize?: AvatarSize }>\n  /**\n   * Identifies Synapse realm special groups.\n   *\n   * - `'authenticatedUsers'` — the principal is the \"All registered Synapse users\" group.\n   * - `'publicGroup'` — the principal is the \"Anyone on the web\" group.\n   * - `null` — the principal is an individual user, a regular team, or realm data is still loading.\n   */\n  specialGroupType: 'authenticatedUsers' | 'publicGroup' | null\n}\n\nfunction UserAvatarIcon({\n  ownerId,\n  syntheticProfile,\n  avatarSize = 'SMALL',\n}: {\n  ownerId: string\n  syntheticProfile: UserProfile\n  avatarSize?: AvatarSize\n}) {\n  const { data: blob, isLoading } = useGetProfileImage(ownerId)\n  const imageURL = useCreateUrlForData(blob)\n  return (\n    <Avatar\n      userProfile={syntheticProfile}\n      imageURL={imageURL}\n      avatarSize={avatarSize}\n      showCardOnHover={false}\n      isLoadingAvatar={isLoading}\n    />\n  )\n}\n\nconst avatarSizePx: Record<AvatarSize, number> = {\n  SMALL: 20,\n  MEDIUM: 30,\n  LARGE: 80,\n}\n\nfunction TeamAvatarIcon({\n  ownerId,\n  isPublicGroup,\n  avatarSize = 'SMALL',\n}: {\n  ownerId: string\n  isPublicGroup: boolean\n  avatarSize?: AvatarSize\n}) {\n  const { data: team } = useGetTeam(ownerId, { enabled: !isPublicGroup })\n\n  const { dataUrl: teamIconUrl } =\n    useGetStablePresignedUrl(\n      {\n        fileHandleId: team?.icon ?? '',\n        associateObjectId: ownerId,\n        associateObjectType: FileHandleAssociateType.TeamAttachment,\n      },\n      false,\n      { enabled: !isPublicGroup && !!team?.icon },\n    ) ?? {}\n\n  const size = avatarSizePx[avatarSize]\n\n  if (isPublicGroup) {\n    return <IconSvg icon=\"public\" wrap={false} sx={{ fontSize: size }} />\n  }\n\n  if (teamIconUrl) {\n    return (\n      <MUIAvatar\n        src={teamIconUrl}\n        sx={{ width: size, height: size, bgcolor: 'background.default' }}\n      />\n    )\n  }\n\n  return <IconSvg icon=\"team\" wrap={false} sx={{ fontSize: size }} />\n}\n\n/**\n * Resolves a Synapse principal (user or team) by ID and returns display data plus a\n * ready-to-render icon component.\n *\n * @param principalId - The numeric or string Synapse principal ID. If omitted, falls back to\n *   `providedUserGroupHeader.ownerId`. Pass `undefined` when the ID is not yet known — the\n *   hook will return `isLoading: false` with all fields undefined/null until an ID is provided.\n * @param providedUserGroupHeader - An already-fetched `UserGroupHeader`. When supplied, the\n *   network fetch for the header is skipped entirely and this value is used directly. Useful\n *   when the caller already has header data (e.g., from a list response).\n */\nexport function useUserOrTeam(\n  principalId?: string | number,\n  providedUserGroupHeader?: UserGroupHeader,\n): UseUserOrTeamResult {\n  const resolvedPrincipalId = (\n    principalId ??\n    providedUserGroupHeader?.ownerId ??\n    ''\n  ).toString()\n\n  const { data: fetchedUserGroupHeader, isLoading } = useGetUserGroupHeader(\n    resolvedPrincipalId,\n    { enabled: !providedUserGroupHeader && !!resolvedPrincipalId },\n  )\n\n  const userGroupHeader = providedUserGroupHeader ?? fetchedUserGroupHeader\n\n  const ownerId = userGroupHeader?.ownerId\n  const isIndividual = userGroupHeader?.isIndividual\n  const userName = userGroupHeader?.userName\n  const firstName = userGroupHeader?.firstName\n\n  const { data: realmPrincipals } = useGetRealmPrincipals()\n\n  const specialGroupType: 'authenticatedUsers' | 'publicGroup' | null =\n    isIndividual === false\n      ? realmPrincipals?.authenticatedUsers === resolvedPrincipalId\n        ? 'authenticatedUsers'\n        : realmPrincipals?.publicGroup === resolvedPrincipalId\n          ? 'publicGroup'\n          : null\n      : null\n\n  const isPublicGroup = specialGroupType !== null\n\n  const IconComponent = useMemo<\n    React.ComponentType<{\n      avatarSize?: AvatarSize\n    }>\n  >(() => {\n    if (ownerId == null || isIndividual == null) return () => null\n\n    if (isIndividual) {\n      const syntheticProfile = {\n        ownerId,\n        userName,\n        firstName,\n      } as unknown as UserProfile\n      return ({ avatarSize }: { avatarSize?: AvatarSize }) => (\n        <UserAvatarIcon\n          ownerId={ownerId}\n          syntheticProfile={syntheticProfile}\n          avatarSize={avatarSize}\n        />\n      )\n    } else {\n      return ({ avatarSize }: { avatarSize?: AvatarSize }) => (\n        <TeamAvatarIcon\n          ownerId={ownerId}\n          isPublicGroup={isPublicGroup}\n          avatarSize={avatarSize}\n        />\n      )\n    }\n  }, [ownerId, isIndividual, userName, firstName, isPublicGroup])\n\n  return { userGroupHeader, isLoading, IconComponent, specialGroupType }\n}\n"],"mappings":";;;;;;;;;;;;AA+CA,SAAS,EAAe,EACtB,YACA,qBACA,gBAAa,WAKZ;CACD,IAAM,EAAE,MAAM,GAAM,iBAAc,EAAmB,CAAO;CAE5D,OACE,kBAAC,GAAD;EACE,aAAa;EACH,UAJG,EAAoB,CAIvB;EACE;EACZ,iBAAiB;EACjB,iBAAiB;CAClB,CAAA;AAEL;AAEA,IAAM,IAA2C;CAC/C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,SAAS,EAAe,EACtB,YACA,kBACA,gBAAa,WAKZ;CACD,IAAM,EAAE,MAAM,MAAS,EAAW,GAAS,EAAE,SAAS,CAAC,EAAc,CAAC,GAEhE,EAAE,SAAS,MACf,EACE;EACE,cAAc,GAAM,QAAQ;EAC5B,mBAAmB;EACnB,qBAAqB,EAAwB;CAC/C,GACA,IACA,EAAE,SAAS,CAAC,KAAiB,CAAC,CAAC,GAAM,KAAK,CAC5C,KAAK,CAAC,GAEF,IAAO,EAAa;CAe1B,OAbI,IACK,kBAAC,GAAD;EAAS,MAAK;EAAS,MAAM;EAAO,IAAI,EAAE,UAAU,EAAK;CAAI,CAAA,IAGlE,IAEA,kBAAC,GAAD;EACE,KAAK;EACL,IAAI;GAAE,OAAO;GAAM,QAAQ;GAAM,SAAS;EAAqB;CAChE,CAAA,IAIE,kBAAC,GAAD;EAAS,MAAK;EAAO,MAAM;EAAO,IAAI,EAAE,UAAU,EAAK;CAAI,CAAA;AACpE;AAaA,SAAgB,EACd,GACA,GACqB;CACrB,IAAM,KACJ,KACA,GAAyB,WACzB,IACA,SAAS,GAEL,EAAE,MAAM,GAAwB,iBAAc,EAClD,GACA,EAAE,SAAS,CAAC,KAA2B,CAAC,CAAC,EAAoB,CAC/D,GAEM,IAAkB,KAA2B,GAE7C,IAAU,GAAiB,SAC3B,IAAe,GAAiB,cAChC,IAAW,GAAiB,UAC5B,IAAY,GAAiB,WAE7B,EAAE,MAAM,MAAoB,EAAsB,GAElD,IACJ,MAAiB,KACb,GAAiB,uBAAuB,IACtC,uBACA,GAAiB,gBAAgB,IAC/B,gBACA,OACJ,MAEA,IAAgB,MAAqB;CAiC3C,OAAO;EAAE;EAAiB;EAAW,eA/Bf,QAId;GACN,IAAI,KAAW,QAAQ,KAAgB,MAAM,aAAa;GAE1D,IAAI,GAAc;IAChB,IAAM,IAAmB;KACvB;KACA;KACA;IACF;IACA,QAAQ,EAAE,oBACR,kBAAC,GAAD;KACW;KACS;KACN;IACb,CAAA;GAEL,OACE,QAAQ,EAAE,oBACR,kBAAC,GAAD;IACW;IACM;IACH;GACb,CAAA;EAGP,GAAG;GAAC;GAAS;GAAc;GAAU;GAAW;EAAa,CAExB;EAAe;CAAiB;AACvE"}

package/dist/components/UserProfileLinks/UserChallenges.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserChallenges.js","names":[],"sources":["../../../src/components/UserProfileLinks/UserChallenges.tsx"],"sourcesContent":["import { useGetUserChallengesInfinite } from '@/synapse-queries/user/useGetUserChallenges'\nimport { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport { ChallengeWithProjectHeader } from '@sage-bionetworks/synapse-types'\nimport { useEffect } from 'react'\nimport { useErrorHandler } from 'react-error-boundary'\nimport { useInView } from 'react-intersection-observer'\nimport { SkeletonTable } from '../Skeleton/SkeletonTable'\n\nexport type UserChallengesProps = {\n  userId: string\n}\n\nexport default function UserChallenges({ userId }: UserChallengesProps) {\n  const handleError = useErrorHandler()\n  // Load the next page when this ref comes into view.\n  const { ref, inView } = useInView()\n  const {\n    data,\n    status,\n    isFetching,\n    isLoading,\n    hasNextPage,\n    fetchNextPage,\n    isError,\n    error: newError,\n  } = useGetUserChallengesInfinite(userId)\n\n  useEffect(() => {\n    if (isError && newError) {\n      handleError(newError)\n    }\n  }, [isError, newError, handleError])\n\n  useEffect(() => {\n    if (\n      status === 'success' &&\n      !isFetching &&\n      hasNextPage &&\n      fetchNextPage &&\n      inView\n    ) {\n      fetchNextPage()\n    }\n  }, [status, isFetching, hasNextPage, fetchNextPage, inView])\n\n  const allRows = data?.pages.flatMap(page => page.results) ?? []\n\n  return (\n    <>\n      {allRows.length > 0 && (\n        <>\n          {allRows.map((item: ChallengeWithProjectHeader) => {\n            if (item && item.challenge && item.projectHeader) {\n              // another option may be to use an EntityLink\n              return (\n                <p key={`user-challenge-list-item-${item.challenge.projectId}`}>\n                  <a\n                    target=\"_self\"\n                    rel=\"noopener noreferrer\"\n                    href={`${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Synapse:${item.challenge.projectId}/challenge`}\n                  >\n                    {item.projectHeader.name}\n                  </a>\n                </p>\n              )\n            } else return false\n          })}\n          {/* To trigger loading the next page */}\n          <div ref={ref} />\n        </>\n      )}\n      {!isFetching && allRows.length == 0 && <div>Empty</div>}\n      {isLoading && <SkeletonTable numRows={5} numCols={1} />}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAYA,SAAwB,EAAe,EAAE,aAA+B;CACtE,IAAM,IAAc,GAAiB,EAE/B,EAAE,QAAK,cAAW,GAAW,EAC7B,EACJ,SACA,WACA,eACA,cACA,gBACA,kBACA,YACA,OAAO,MACL,EAA6B,EAAO;AAQxC,CANA,QAAgB;AACd,EAAI,KAAW,KACb,EAAY,EAAS;IAEtB;EAAC;EAAS;EAAU;EAAY,CAAC,EAEpC,QAAgB;AACd,EACE,MAAW,aACX,CAAC,KACD,KACA,KACA,KAEA,GAAe;IAEhB;EAAC;EAAQ;EAAY;EAAa;EAAe;EAAO,CAAC;CAE5D,IAAM,IAAU,GAAM,MAAM,SAAQ,MAAQ,EAAK,QAAQ,IAAI,EAAE;AAE/D,QACE,kBAAA,GAAA,EAAA,UAAA;EACG,EAAQ,SAAS,KAChB,kBAAA,GAAA,EAAA,UAAA,CACG,EAAQ,KAAK,MACR,KAAQ,EAAK,aAAa,EAAK,gBAG/B,kBAAC,KAAD,EAAA,UACE,kBAAC,KAAD;GACE,QAAO;GACP,KAAI;GACJ,MAAM,GAAG,EAA2B,OAAO,UAAU,EAAK,UAAU,UAAU;aAE7E,EAAK,cAAc;GAClB,CAAA,EACF,EARI,4BAA4B,EAAK,UAAU,YAQ/C,GAEM,GACd,EAEF,kBAAC,OAAD,EAAU,QAAO,CAAA,CAChB,EAAA,CAAA;EAEJ,CAAC,KAAc,EAAQ,UAAU,KAAK,kBAAC,OAAD,EAAA,UAAK,SAAW,CAAA;EACtD,KAAa,kBAAC,GAAD;GAAe,SAAS;GAAG,SAAS;GAAK,CAAA;EACtD,EAAA,CAAA"}
+{"version":3,"file":"UserChallenges.js","names":[],"sources":["../../../src/components/UserProfileLinks/UserChallenges.tsx"],"sourcesContent":["import { useGetUserChallengesInfinite } from '@/synapse-queries/user/useGetUserChallenges'\nimport { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport { ChallengeWithProjectHeader } from '@sage-bionetworks/synapse-types'\nimport { useEffect } from 'react'\nimport { useErrorHandler } from 'react-error-boundary'\nimport { useInView } from 'react-intersection-observer'\nimport { SkeletonTable } from '../Skeleton/SkeletonTable'\n\nexport type UserChallengesProps = {\n  userId: string\n}\n\nexport default function UserChallenges({ userId }: UserChallengesProps) {\n  const handleError = useErrorHandler()\n  // Load the next page when this ref comes into view.\n  const { ref, inView } = useInView()\n  const {\n    data,\n    status,\n    isFetching,\n    isLoading,\n    hasNextPage,\n    fetchNextPage,\n    isError,\n    error: newError,\n  } = useGetUserChallengesInfinite(userId)\n\n  useEffect(() => {\n    if (isError && newError) {\n      handleError(newError)\n    }\n  }, [isError, newError, handleError])\n\n  useEffect(() => {\n    if (\n      status === 'success' &&\n      !isFetching &&\n      hasNextPage &&\n      fetchNextPage &&\n      inView\n    ) {\n      fetchNextPage()\n    }\n  }, [status, isFetching, hasNextPage, fetchNextPage, inView])\n\n  const allRows = data?.pages.flatMap(page => page.results) ?? []\n\n  return (\n    <>\n      {allRows.length > 0 && (\n        <>\n          {allRows.map((item: ChallengeWithProjectHeader) => {\n            if (item && item.challenge && item.projectHeader) {\n              // another option may be to use an EntityLink\n              return (\n                <p key={`user-challenge-list-item-${item.challenge.projectId}`}>\n                  <a\n                    target=\"_self\"\n                    rel=\"noopener noreferrer\"\n                    href={`${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Synapse:${item.challenge.projectId}/challenge`}\n                  >\n                    {item.projectHeader.name}\n                  </a>\n                </p>\n              )\n            } else return false\n          })}\n          {/* To trigger loading the next page */}\n          <div ref={ref} />\n        </>\n      )}\n      {!isFetching && allRows.length == 0 && <div>Empty</div>}\n      {isLoading && <SkeletonTable numRows={5} numCols={1} />}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAYA,SAAwB,EAAe,EAAE,aAA+B;CACtE,IAAM,IAAc,EAAgB,GAE9B,EAAE,QAAK,cAAW,EAAU,GAC5B,EACJ,SACA,WACA,eACA,cACA,gBACA,kBACA,YACA,OAAO,MACL,EAA6B,CAAM;CAQvC,AANA,QAAgB;EACd,AAAI,KAAW,KACb,EAAY,CAAQ;CAExB,GAAG;EAAC;EAAS;EAAU;CAAW,CAAC,GAEnC,QAAgB;EACd,AACE,MAAW,aACX,CAAC,KACD,KACA,KACA,KAEA,EAAc;CAElB,GAAG;EAAC;EAAQ;EAAY;EAAa;EAAe;CAAM,CAAC;CAE3D,IAAM,IAAU,GAAM,MAAM,SAAQ,MAAQ,EAAK,OAAO,KAAK,CAAC;CAE9D,OACE,kBAAA,GAAA,EAAA,UAAA;EACG,EAAQ,SAAS,KAChB,kBAAA,GAAA,EAAA,UAAA,CACG,EAAQ,KAAK,MACR,KAAQ,EAAK,aAAa,EAAK,gBAG/B,kBAAC,KAAD,EAAA,UACE,kBAAC,KAAD;GACE,QAAO;GACP,KAAI;GACJ,MAAM,GAAG,EAA2B,OAAO,UAAU,EAAK,UAAU,UAAU;aAE7E,EAAK,cAAc;EACnB,CAAA,EACF,GARK,4BAA4B,EAAK,UAAU,WAQhD,IAEO,EACf,GAED,kBAAC,OAAD,EAAU,OAAM,CAAA,CAChB,EAAA,CAAA;EAEH,CAAC,KAAc,EAAQ,UAAU,KAAK,kBAAC,OAAD,EAAA,UAAK,QAAU,CAAA;EACrD,KAAa,kBAAC,GAAD;GAAe,SAAS;GAAG,SAAS;EAAI,CAAA;CACtD,EAAA,CAAA;AAEN"}

package/dist/components/UserProfileLinks/UserProfileLinks.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserProfileLinks.js","names":[],"sources":["../../../src/components/UserProfileLinks/UserProfileLinks.tsx"],"sourcesContent":["import { useGetUserProfile } from '@/synapse-queries'\nimport Skeleton from '@mui/material/Skeleton'\nimport Typography from '@mui/material/Typography'\nimport { Box } from '@mui/system'\nimport { ReactNode, useMemo, useState } from 'react'\nimport { SynapseErrorBoundary } from '../error/ErrorBanner'\nimport IconSvg, { IconName } from '../IconSvg/IconSvg'\nimport UserChallenges from './UserChallenges'\nimport UserProjects from './UserProjects'\nimport UserTeams from './UserTeams'\n\ntype UserProfileLinkConfig = {\n  name: 'Projects' | 'Teams' | 'Challenges'\n  iconName: IconName\n  render: ReactNode\n}\n\nexport type UserProfileLinksProps = {\n  userId: string\n}\n\nexport function UserProfileLinks({ userId }: UserProfileLinksProps) {\n  const [currentTab, setCurrentTab] =\n    useState<UserProfileLinkConfig['name']>('Projects')\n  const { data: userProfile } = useGetUserProfile(userId)\n\n  const userProfileLinksConfig: UserProfileLinkConfig[] = useMemo(\n    () => [\n      {\n        name: 'Projects',\n        iconName: 'dashboard',\n        render: <UserProjects userId={userId} />,\n      },\n      {\n        name: 'Teams',\n        iconName: 'peopleTwoTone',\n        render: <UserTeams userId={userId} />,\n      },\n      {\n        name: 'Challenges',\n        iconName: 'challengesTwoTone',\n        render: <UserChallenges userId={userId} />,\n      },\n    ],\n    [userId],\n  )\n\n  return (\n    <div className=\"UserProfileLinks\">\n      <Typography variant=\"headline2\" className=\"title\">\n        {userProfile && <>{userProfile?.userName}&apos;s Items</>}\n        {!userProfile && <Skeleton width=\"75%\" />}\n      </Typography>\n      <Box\n        className=\"Tabs\"\n        sx={theme => ({\n          [theme.breakpoints.down('sm')]: {\n            flexDirection: 'column',\n            gap: '8px',\n          },\n        })}\n      >\n        {userProfileLinksConfig.map(config => {\n          return (\n            <Box\n              className=\"Tab\"\n              role=\"tab\"\n              sx={theme => ({\n                [theme.breakpoints.down('sm')]: {\n                  minHeight: '45px',\n                },\n              })}\n              key={config.name}\n              onClick={e => {\n                e.stopPropagation()\n                setCurrentTab(config.name)\n              }}\n              aria-selected={currentTab === config.name}\n            >\n              <Typography variant=\"buttonLink\">\n                <IconSvg icon={config.iconName} /> {config.name}\n              </Typography>\n            </Box>\n          )\n        })}\n      </Box>\n      <div className=\"TabContent\">\n        <SynapseErrorBoundary>\n          {\n            userProfileLinksConfig.find(config => currentTab === config.name)\n              ?.render\n          }\n        </SynapseErrorBoundary>\n      </div>\n    </div>\n  )\n}\n\nexport default UserProfileLinks\n"],"mappings":";;;;;;;;;;;;;AAqBA,SAAgB,EAAiB,EAAE,aAAiC;CAClE,IAAM,CAAC,GAAY,KACjB,EAAwC,WAAW,EAC/C,EAAE,MAAM,MAAgB,EAAkB,EAAO,EAEjD,IAAkD,QAChD;EACJ;GACE,MAAM;GACN,UAAU;GACV,QAAQ,kBAAC,GAAD,EAAsB,WAAU,CAAA;GACzC;EACD;GACE,MAAM;GACN,UAAU;GACV,QAAQ,kBAAC,GAAD,EAAmB,WAAU,CAAA;GACtC;EACD;GACE,MAAM;GACN,UAAU;GACV,QAAQ,kBAAC,GAAD,EAAwB,WAAU,CAAA;GAC3C;EACF,EACD,CAAC,EAAO,CACT;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IAAY,SAAQ;IAAY,WAAU;cAA1C,CACG,KAAe,kBAAA,GAAA,EAAA,UAAA,CAAG,GAAa,UAAS,WAAgB,EAAA,CAAA,EACxD,CAAC,KAAe,kBAAC,GAAD,EAAU,OAAM,OAAQ,CAAA,CAC9B;;GACb,kBAAC,GAAD;IACE,WAAU;IACV,KAAI,OAAU,GACX,EAAM,YAAY,KAAK,KAAK,GAAG;KAC9B,eAAe;KACf,KAAK;KACN,EACF;cAEA,EAAuB,KAAI,MAExB,kBAAC,GAAD;KACE,WAAU;KACV,MAAK;KACL,KAAI,OAAU,GACX,EAAM,YAAY,KAAK,KAAK,GAAG,EAC9B,WAAW,QACZ,EACF;KAED,UAAS,MAAK;AAEZ,MADA,EAAE,iBAAiB,EACnB,EAAc,EAAO,KAAK;;KAE5B,iBAAe,MAAe,EAAO;eAErC,kBAAC,GAAD;MAAY,SAAQ;gBAApB;OACE,kBAAC,GAAD,EAAS,MAAM,EAAO,UAAY,CAAA;;OAAE,EAAO;OAChC;;KACT,EAVC,EAAO,KAUR,CAER;IACE,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAA,UAEI,EAAuB,MAAK,MAAU,MAAe,EAAO,KAAK,EAC7D,QAEe,CAAA;IACnB,CAAA;GACF"}
+{"version":3,"file":"UserProfileLinks.js","names":[],"sources":["../../../src/components/UserProfileLinks/UserProfileLinks.tsx"],"sourcesContent":["import { useGetUserProfile } from '@/synapse-queries'\nimport Skeleton from '@mui/material/Skeleton'\nimport Typography from '@mui/material/Typography'\nimport { Box } from '@mui/system'\nimport { ReactNode, useMemo, useState } from 'react'\nimport { SynapseErrorBoundary } from '../error/ErrorBanner'\nimport IconSvg, { IconName } from '../IconSvg/IconSvg'\nimport UserChallenges from './UserChallenges'\nimport UserProjects from './UserProjects'\nimport UserTeams from './UserTeams'\n\ntype UserProfileLinkConfig = {\n  name: 'Projects' | 'Teams' | 'Challenges'\n  iconName: IconName\n  render: ReactNode\n}\n\nexport type UserProfileLinksProps = {\n  userId: string\n}\n\nexport function UserProfileLinks({ userId }: UserProfileLinksProps) {\n  const [currentTab, setCurrentTab] =\n    useState<UserProfileLinkConfig['name']>('Projects')\n  const { data: userProfile } = useGetUserProfile(userId)\n\n  const userProfileLinksConfig: UserProfileLinkConfig[] = useMemo(\n    () => [\n      {\n        name: 'Projects',\n        iconName: 'dashboard',\n        render: <UserProjects userId={userId} />,\n      },\n      {\n        name: 'Teams',\n        iconName: 'peopleTwoTone',\n        render: <UserTeams userId={userId} />,\n      },\n      {\n        name: 'Challenges',\n        iconName: 'challengesTwoTone',\n        render: <UserChallenges userId={userId} />,\n      },\n    ],\n    [userId],\n  )\n\n  return (\n    <div className=\"UserProfileLinks\">\n      <Typography variant=\"headline2\" className=\"title\">\n        {userProfile && <>{userProfile?.userName}&apos;s Items</>}\n        {!userProfile && <Skeleton width=\"75%\" />}\n      </Typography>\n      <Box\n        className=\"Tabs\"\n        sx={theme => ({\n          [theme.breakpoints.down('sm')]: {\n            flexDirection: 'column',\n            gap: '8px',\n          },\n        })}\n      >\n        {userProfileLinksConfig.map(config => {\n          return (\n            <Box\n              className=\"Tab\"\n              role=\"tab\"\n              sx={theme => ({\n                [theme.breakpoints.down('sm')]: {\n                  minHeight: '45px',\n                },\n              })}\n              key={config.name}\n              onClick={e => {\n                e.stopPropagation()\n                setCurrentTab(config.name)\n              }}\n              aria-selected={currentTab === config.name}\n            >\n              <Typography variant=\"buttonLink\">\n                <IconSvg icon={config.iconName} /> {config.name}\n              </Typography>\n            </Box>\n          )\n        })}\n      </Box>\n      <div className=\"TabContent\">\n        <SynapseErrorBoundary>\n          {\n            userProfileLinksConfig.find(config => currentTab === config.name)\n              ?.render\n          }\n        </SynapseErrorBoundary>\n      </div>\n    </div>\n  )\n}\n\nexport default UserProfileLinks\n"],"mappings":";;;;;;;;;;;;;AAqBA,SAAgB,EAAiB,EAAE,aAAiC;CAClE,IAAM,CAAC,GAAY,KACjB,EAAwC,UAAU,GAC9C,EAAE,MAAM,MAAgB,EAAkB,CAAM,GAEhD,IAAkD,QAChD;EACJ;GACE,MAAM;GACN,UAAU;GACV,QAAQ,kBAAC,GAAD,EAAsB,UAAS,CAAA;EACzC;EACA;GACE,MAAM;GACN,UAAU;GACV,QAAQ,kBAAC,GAAD,EAAmB,UAAS,CAAA;EACtC;EACA;GACE,MAAM;GACN,UAAU;GACV,QAAQ,kBAAC,GAAD,EAAwB,UAAS,CAAA;EAC3C;CACF,GACA,CAAC,CAAM,CACT;CAEA,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IAAY,SAAQ;IAAY,WAAU;cAA1C,CACG,KAAe,kBAAA,GAAA,EAAA,UAAA,CAAG,GAAa,UAAS,UAAe,EAAA,CAAA,GACvD,CAAC,KAAe,kBAAC,GAAD,EAAU,OAAM,MAAO,CAAA,CAC9B;;GACZ,kBAAC,GAAD;IACE,WAAU;IACV,KAAI,OAAU,GACX,EAAM,YAAY,KAAK,IAAI,IAAI;KAC9B,eAAe;KACf,KAAK;IACP,EACF;cAEC,EAAuB,KAAI,MAExB,kBAAC,GAAD;KACE,WAAU;KACV,MAAK;KACL,KAAI,OAAU,GACX,EAAM,YAAY,KAAK,IAAI,IAAI,EAC9B,WAAW,OACb,EACF;KAEA,UAAS,MAAK;MAEZ,AADA,EAAE,gBAAgB,GAClB,EAAc,EAAO,IAAI;KAC3B;KACA,iBAAe,MAAe,EAAO;eAErC,kBAAC,GAAD;MAAY,SAAQ;gBAApB;OACE,kBAAC,GAAD,EAAS,MAAM,EAAO,SAAW,CAAA;OAAC;OAAE,EAAO;MACjC;;IACT,GAVE,EAAO,IAUT,CAER;GACE,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAA,UAEI,EAAuB,MAAK,MAAU,MAAe,EAAO,IAAI,GAC5D,OAEc,CAAA;GACnB,CAAA;EACF;;AAET"}

package/dist/components/UserProfileLinks/UserProjects.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserProjects.js","names":[],"sources":["../../../src/components/UserProfileLinks/UserProjects.tsx"],"sourcesContent":["import { useGetUserProjectsInfinite } from '@/synapse-queries/user/useGetUserProjects'\nimport { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport {\n  GetProjectsParameters,\n  ProjectHeader,\n} from '@sage-bionetworks/synapse-types'\nimport { useEffect } from 'react'\nimport { useErrorHandler } from 'react-error-boundary'\nimport { useInView } from 'react-intersection-observer'\nimport { SkeletonTable } from '../Skeleton/SkeletonTable'\n\nexport type UserProjectsProps = {\n  userId: string\n}\n\nexport default function UserProjects({ userId }: UserProjectsProps) {\n  const handleError = useErrorHandler()\n  // Load the next page when this ref comes into view.\n  const { ref, inView } = useInView()\n  const getProjectsParameters: GetProjectsParameters = {}\n  const {\n    data,\n    status,\n    isFetching,\n    isLoading,\n    hasNextPage,\n    fetchNextPage,\n    isError,\n    error: newError,\n  } = useGetUserProjectsInfinite(userId, getProjectsParameters)\n\n  useEffect(() => {\n    if (isError && newError) {\n      handleError(newError)\n    }\n  }, [isError, newError, handleError])\n\n  useEffect(() => {\n    if (\n      status === 'success' &&\n      !isFetching &&\n      hasNextPage &&\n      fetchNextPage &&\n      inView\n    ) {\n      fetchNextPage()\n    }\n  }, [status, isFetching, hasNextPage, fetchNextPage, inView])\n\n  const allRows = data?.pages.flatMap(page => page.results) ?? []\n\n  return (\n    <>\n      {allRows.length > 0 && (\n        <>\n          {allRows.map((item: ProjectHeader) => {\n            if (item) {\n              // another option would be to use an EntityLink\n              return (\n                <p key={`user-project-list-item-${item.id}`}>\n                  <a\n                    target=\"_self\"\n                    rel=\"noopener noreferrer\"\n                    href={`${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Synapse:${item.id}`}\n                  >\n                    {item.name}\n                  </a>\n                </p>\n              )\n            } else return false\n          })}\n          {/* To trigger loading the next page */}\n          <div ref={ref} />\n        </>\n      )}\n      {!isFetching && allRows.length == 0 && <div>Empty</div>}\n      {isLoading && <SkeletonTable numRows={5} numCols={1} />}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAeA,SAAwB,EAAa,EAAE,aAA6B;CAClE,IAAM,IAAc,GAAiB,EAE/B,EAAE,QAAK,cAAW,GAAW,EAE7B,EACJ,SACA,WACA,eACA,cACA,gBACA,kBACA,YACA,OAAO,MACL,EAA2B,GAAQ,EAAA,CAAsB;AAQ7D,CANA,QAAgB;AACd,EAAI,KAAW,KACb,EAAY,EAAS;IAEtB;EAAC;EAAS;EAAU;EAAY,CAAC,EAEpC,QAAgB;AACd,EACE,MAAW,aACX,CAAC,KACD,KACA,KACA,KAEA,GAAe;IAEhB;EAAC;EAAQ;EAAY;EAAa;EAAe;EAAO,CAAC;CAE5D,IAAM,IAAU,GAAM,MAAM,SAAQ,MAAQ,EAAK,QAAQ,IAAI,EAAE;AAE/D,QACE,kBAAA,GAAA,EAAA,UAAA;EACG,EAAQ,SAAS,KAChB,kBAAA,GAAA,EAAA,UAAA,CACG,EAAQ,KAAK,MACR,IAGA,kBAAC,KAAD,EAAA,UACE,kBAAC,KAAD;GACE,QAAO;GACP,KAAI;GACJ,MAAM,GAAG,EAA2B,OAAO,UAAU,EAAK;aAEzD,EAAK;GACJ,CAAA,EACF,EARI,0BAA0B,EAAK,KAQnC,GAEM,GACd,EAEF,kBAAC,OAAD,EAAU,QAAO,CAAA,CAChB,EAAA,CAAA;EAEJ,CAAC,KAAc,EAAQ,UAAU,KAAK,kBAAC,OAAD,EAAA,UAAK,SAAW,CAAA;EACtD,KAAa,kBAAC,GAAD;GAAe,SAAS;GAAG,SAAS;GAAK,CAAA;EACtD,EAAA,CAAA"}
+{"version":3,"file":"UserProjects.js","names":[],"sources":["../../../src/components/UserProfileLinks/UserProjects.tsx"],"sourcesContent":["import { useGetUserProjectsInfinite } from '@/synapse-queries/user/useGetUserProjects'\nimport { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport {\n  GetProjectsParameters,\n  ProjectHeader,\n} from '@sage-bionetworks/synapse-types'\nimport { useEffect } from 'react'\nimport { useErrorHandler } from 'react-error-boundary'\nimport { useInView } from 'react-intersection-observer'\nimport { SkeletonTable } from '../Skeleton/SkeletonTable'\n\nexport type UserProjectsProps = {\n  userId: string\n}\n\nexport default function UserProjects({ userId }: UserProjectsProps) {\n  const handleError = useErrorHandler()\n  // Load the next page when this ref comes into view.\n  const { ref, inView } = useInView()\n  const getProjectsParameters: GetProjectsParameters = {}\n  const {\n    data,\n    status,\n    isFetching,\n    isLoading,\n    hasNextPage,\n    fetchNextPage,\n    isError,\n    error: newError,\n  } = useGetUserProjectsInfinite(userId, getProjectsParameters)\n\n  useEffect(() => {\n    if (isError && newError) {\n      handleError(newError)\n    }\n  }, [isError, newError, handleError])\n\n  useEffect(() => {\n    if (\n      status === 'success' &&\n      !isFetching &&\n      hasNextPage &&\n      fetchNextPage &&\n      inView\n    ) {\n      fetchNextPage()\n    }\n  }, [status, isFetching, hasNextPage, fetchNextPage, inView])\n\n  const allRows = data?.pages.flatMap(page => page.results) ?? []\n\n  return (\n    <>\n      {allRows.length > 0 && (\n        <>\n          {allRows.map((item: ProjectHeader) => {\n            if (item) {\n              // another option would be to use an EntityLink\n              return (\n                <p key={`user-project-list-item-${item.id}`}>\n                  <a\n                    target=\"_self\"\n                    rel=\"noopener noreferrer\"\n                    href={`${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Synapse:${item.id}`}\n                  >\n                    {item.name}\n                  </a>\n                </p>\n              )\n            } else return false\n          })}\n          {/* To trigger loading the next page */}\n          <div ref={ref} />\n        </>\n      )}\n      {!isFetching && allRows.length == 0 && <div>Empty</div>}\n      {isLoading && <SkeletonTable numRows={5} numCols={1} />}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAeA,SAAwB,EAAa,EAAE,aAA6B;CAClE,IAAM,IAAc,EAAgB,GAE9B,EAAE,QAAK,cAAW,EAAU,GAE5B,EACJ,SACA,WACA,eACA,cACA,gBACA,kBACA,YACA,OAAO,MACL,EAA2B,GAAQ,CAAA,CAAqB;CAQ5D,AANA,QAAgB;EACd,AAAI,KAAW,KACb,EAAY,CAAQ;CAExB,GAAG;EAAC;EAAS;EAAU;CAAW,CAAC,GAEnC,QAAgB;EACd,AACE,MAAW,aACX,CAAC,KACD,KACA,KACA,KAEA,EAAc;CAElB,GAAG;EAAC;EAAQ;EAAY;EAAa;EAAe;CAAM,CAAC;CAE3D,IAAM,IAAU,GAAM,MAAM,SAAQ,MAAQ,EAAK,OAAO,KAAK,CAAC;CAE9D,OACE,kBAAA,GAAA,EAAA,UAAA;EACG,EAAQ,SAAS,KAChB,kBAAA,GAAA,EAAA,UAAA,CACG,EAAQ,KAAK,MACR,IAGA,kBAAC,KAAD,EAAA,UACE,kBAAC,KAAD;GACE,QAAO;GACP,KAAI;GACJ,MAAM,GAAG,EAA2B,OAAO,UAAU,EAAK;aAEzD,EAAK;EACL,CAAA,EACF,GARK,0BAA0B,EAAK,IAQpC,IAEO,EACf,GAED,kBAAC,OAAD,EAAU,OAAM,CAAA,CAChB,EAAA,CAAA;EAEH,CAAC,KAAc,EAAQ,UAAU,KAAK,kBAAC,OAAD,EAAA,UAAK,QAAU,CAAA;EACrD,KAAa,kBAAC,GAAD;GAAe,SAAS;GAAG,SAAS;EAAI,CAAA;CACtD,EAAA,CAAA;AAEN"}

package/dist/components/UserProfileLinks/UserTeams.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserTeams.js","names":[],"sources":["../../../src/components/UserProfileLinks/UserTeams.tsx"],"sourcesContent":["import { useGetUserTeamsInfinite } from '@/synapse-queries/user/useGetUserTeams'\nimport { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport { Team } from '@sage-bionetworks/synapse-types'\nimport { useEffect } from 'react'\nimport { useErrorHandler } from 'react-error-boundary'\nimport { useInView } from 'react-intersection-observer'\nimport { SkeletonTable } from '../Skeleton/SkeletonTable'\n\nexport type UserTeamsProps = {\n  userId: string\n}\n\nexport default function UserTeams({ userId }: UserTeamsProps) {\n  const handleError = useErrorHandler()\n  // Load the next page when this ref comes into view.\n  const { ref, inView } = useInView()\n  const {\n    data,\n    status,\n    isFetching,\n    isLoading,\n    hasNextPage,\n    fetchNextPage,\n    isError,\n    error: newError,\n  } = useGetUserTeamsInfinite(userId)\n\n  useEffect(() => {\n    if (isError && newError) {\n      handleError(newError)\n    }\n  }, [isError, newError, handleError])\n\n  useEffect(() => {\n    if (\n      status === 'success' &&\n      !isFetching &&\n      hasNextPage &&\n      fetchNextPage &&\n      inView\n    ) {\n      fetchNextPage()\n    }\n  }, [status, isFetching, hasNextPage, fetchNextPage, inView])\n\n  const allRows = data?.pages.flatMap(page => page.results) ?? []\n\n  return (\n    <>\n      {allRows.length > 0 && (\n        <>\n          {allRows.map((item: Team) => {\n            if (item) {\n              // another option would be to use an EntityLink\n              return (\n                <p key={`user-team-list-item-${item.id}`}>\n                  <a\n                    target=\"_self\"\n                    rel=\"noopener noreferrer\"\n                    href={`${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Team:${item.id}`}\n                  >\n                    {item.name}\n                  </a>\n                </p>\n              )\n            } else return false\n          })}\n          {/* To trigger loading the next page */}\n          <div ref={ref} />\n        </>\n      )}\n      {!isFetching && allRows.length == 0 && <div>Empty</div>}\n      {isLoading && <SkeletonTable numRows={5} numCols={1} />}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAYA,SAAwB,EAAU,EAAE,aAA0B;CAC5D,IAAM,IAAc,GAAiB,EAE/B,EAAE,QAAK,cAAW,GAAW,EAC7B,EACJ,SACA,WACA,eACA,cACA,gBACA,kBACA,YACA,OAAO,MACL,EAAwB,EAAO;AAQnC,CANA,QAAgB;AACd,EAAI,KAAW,KACb,EAAY,EAAS;IAEtB;EAAC;EAAS;EAAU;EAAY,CAAC,EAEpC,QAAgB;AACd,EACE,MAAW,aACX,CAAC,KACD,KACA,KACA,KAEA,GAAe;IAEhB;EAAC;EAAQ;EAAY;EAAa;EAAe;EAAO,CAAC;CAE5D,IAAM,IAAU,GAAM,MAAM,SAAQ,MAAQ,EAAK,QAAQ,IAAI,EAAE;AAE/D,QACE,kBAAA,GAAA,EAAA,UAAA;EACG,EAAQ,SAAS,KAChB,kBAAA,GAAA,EAAA,UAAA,CACG,EAAQ,KAAK,MACR,IAGA,kBAAC,KAAD,EAAA,UACE,kBAAC,KAAD;GACE,QAAO;GACP,KAAI;GACJ,MAAM,GAAG,EAA2B,OAAO,OAAO,EAAK;aAEtD,EAAK;GACJ,CAAA,EACF,EARI,uBAAuB,EAAK,KAQhC,GAEM,GACd,EAEF,kBAAC,OAAD,EAAU,QAAO,CAAA,CAChB,EAAA,CAAA;EAEJ,CAAC,KAAc,EAAQ,UAAU,KAAK,kBAAC,OAAD,EAAA,UAAK,SAAW,CAAA;EACtD,KAAa,kBAAC,GAAD;GAAe,SAAS;GAAG,SAAS;GAAK,CAAA;EACtD,EAAA,CAAA"}
+{"version":3,"file":"UserTeams.js","names":[],"sources":["../../../src/components/UserProfileLinks/UserTeams.tsx"],"sourcesContent":["import { useGetUserTeamsInfinite } from '@/synapse-queries/user/useGetUserTeams'\nimport { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport { Team } from '@sage-bionetworks/synapse-types'\nimport { useEffect } from 'react'\nimport { useErrorHandler } from 'react-error-boundary'\nimport { useInView } from 'react-intersection-observer'\nimport { SkeletonTable } from '../Skeleton/SkeletonTable'\n\nexport type UserTeamsProps = {\n  userId: string\n}\n\nexport default function UserTeams({ userId }: UserTeamsProps) {\n  const handleError = useErrorHandler()\n  // Load the next page when this ref comes into view.\n  const { ref, inView } = useInView()\n  const {\n    data,\n    status,\n    isFetching,\n    isLoading,\n    hasNextPage,\n    fetchNextPage,\n    isError,\n    error: newError,\n  } = useGetUserTeamsInfinite(userId)\n\n  useEffect(() => {\n    if (isError && newError) {\n      handleError(newError)\n    }\n  }, [isError, newError, handleError])\n\n  useEffect(() => {\n    if (\n      status === 'success' &&\n      !isFetching &&\n      hasNextPage &&\n      fetchNextPage &&\n      inView\n    ) {\n      fetchNextPage()\n    }\n  }, [status, isFetching, hasNextPage, fetchNextPage, inView])\n\n  const allRows = data?.pages.flatMap(page => page.results) ?? []\n\n  return (\n    <>\n      {allRows.length > 0 && (\n        <>\n          {allRows.map((item: Team) => {\n            if (item) {\n              // another option would be to use an EntityLink\n              return (\n                <p key={`user-team-list-item-${item.id}`}>\n                  <a\n                    target=\"_self\"\n                    rel=\"noopener noreferrer\"\n                    href={`${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Team:${item.id}`}\n                  >\n                    {item.name}\n                  </a>\n                </p>\n              )\n            } else return false\n          })}\n          {/* To trigger loading the next page */}\n          <div ref={ref} />\n        </>\n      )}\n      {!isFetching && allRows.length == 0 && <div>Empty</div>}\n      {isLoading && <SkeletonTable numRows={5} numCols={1} />}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAYA,SAAwB,EAAU,EAAE,aAA0B;CAC5D,IAAM,IAAc,EAAgB,GAE9B,EAAE,QAAK,cAAW,EAAU,GAC5B,EACJ,SACA,WACA,eACA,cACA,gBACA,kBACA,YACA,OAAO,MACL,EAAwB,CAAM;CAQlC,AANA,QAAgB;EACd,AAAI,KAAW,KACb,EAAY,CAAQ;CAExB,GAAG;EAAC;EAAS;EAAU;CAAW,CAAC,GAEnC,QAAgB;EACd,AACE,MAAW,aACX,CAAC,KACD,KACA,KACA,KAEA,EAAc;CAElB,GAAG;EAAC;EAAQ;EAAY;EAAa;EAAe;CAAM,CAAC;CAE3D,IAAM,IAAU,GAAM,MAAM,SAAQ,MAAQ,EAAK,OAAO,KAAK,CAAC;CAE9D,OACE,kBAAA,GAAA,EAAA,UAAA;EACG,EAAQ,SAAS,KAChB,kBAAA,GAAA,EAAA,UAAA,CACG,EAAQ,KAAK,MACR,IAGA,kBAAC,KAAD,EAAA,UACE,kBAAC,KAAD;GACE,QAAO;GACP,KAAI;GACJ,MAAM,GAAG,EAA2B,OAAO,OAAO,EAAK;aAEtD,EAAK;EACL,CAAA,EACF,GARK,uBAAuB,EAAK,IAQjC,IAEO,EACf,GAED,kBAAC,OAAD,EAAU,OAAM,CAAA,CAChB,EAAA,CAAA;EAEH,CAAC,KAAc,EAAQ,UAAU,KAAK,kBAAC,OAAD,EAAA,UAAK,QAAU,CAAA;EACrD,KAAa,kBAAC,GAAD;GAAe,SAAS;GAAG,SAAS;EAAI,CAAA;CACtD,EAAA,CAAA;AAEN"}

package/dist/components/UserSearchBox/UserSearchBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserSearchBox.js","names":[],"sources":["../../../src/components/UserSearchBox/UserSearchBox.tsx"],"sourcesContent":["import {\n  useGetUserGroupHeader,\n  useSearchUserGroupHeaders,\n} from '@/synapse-queries'\nimport { useDebouncedEffect } from '@/utils/hooks/useDebouncedEffect'\nimport { Autocomplete, Box, Skeleton, TextField } from '@mui/material'\nimport { TYPE_FILTER, UserGroupHeader } from '@sage-bionetworks/synapse-types'\nimport { useMemo, useState } from 'react'\nimport UserOrTeamBadge from '../UserOrTeamBadge/UserOrTeamBadge'\n\nexport type UserSearchBoxProps = {\n  /* id for the input element, for associating with a <label> */\n  inputId?: string\n  /* The initial principal ID (uncontrolled). Ignored if `value` is provided. */\n  defaultValue?: string\n  onChange?: (\n    principalId: string | null,\n    header: UserGroupHeader | null,\n  ) => void\n  typeFilter?: TYPE_FILTER\n  filterPredicate?: (item: UserGroupHeader) => boolean\n  placeholder?: string\n  autoFocus?: boolean\n  /**\n   * The principal ID of the currently selected user or team.\n   * - `undefined`: uncontrolled — the component manages its own selection state\n   * - `null`: controlled with no selection (clears the field)\n   * - string: controlled with the given principal ID selected\n   */\n  value?: string | null\n}\n\n/**\n * Autocomplete component used to search for and select a user or team.\n */\nfunction UserSearchBox(props: UserSearchBoxProps) {\n  const {\n    inputId,\n    defaultValue = null,\n    onChange,\n    filterPredicate,\n    typeFilter,\n    placeholder,\n    autoFocus = false,\n    value: valueProp,\n  } = props\n\n  const isControlled = valueProp !== undefined\n\n  const [inputValue, setInputValue] = useState('')\n  const [debouncedInput, setDebouncedInput] = useState('')\n  useDebouncedEffect(\n    () => {\n      setDebouncedInput(inputValue)\n    },\n    [inputValue],\n    500,\n  )\n\n  // Tracks whether the dropdown is open, used to toggle between badge display\n  // and text-input search mode.\n  const [isSearching, setIsSearching] = useState(false)\n\n  // Resolve defaultValue principalId → UserGroupHeader for the initial uncontrolled state\n  const { data: defaultUserGroupHeader, isLoading: isLoadingDefaultValue } =\n    useGetUserGroupHeader(defaultValue ?? '', {\n      enabled: !!defaultValue && !isControlled,\n    })\n\n  // Resolve controlled string principalId → UserGroupHeader\n  const controlledPrincipalId =\n    isControlled && typeof valueProp === 'string' ? valueProp : null\n\n  const {\n    data: resolvedControlledHeader,\n    isLoading: isLoadingControlledValue,\n  } = useGetUserGroupHeader(controlledPrincipalId ?? '', {\n    enabled: !!controlledPrincipalId,\n  })\n\n  // Internal state for uncontrolled mode.\n  // undefined = user hasn't interacted yet → falls back to defaultUserGroupHeader\n  // null      = user explicitly cleared the selection\n  // header    = user's current selection\n  const [internalValue, setInternalValue] = useState<\n    UserGroupHeader | null | undefined\n  >(undefined)\n\n  const controlledValue =\n    typeof valueProp === 'string' ? (resolvedControlledHeader ?? null) : null\n  const uncontrolledValue =\n    internalValue !== undefined\n      ? internalValue\n      : (defaultUserGroupHeader ?? null)\n  const resolvedValue: UserGroupHeader | null = isControlled\n    ? controlledValue\n    : uncontrolledValue\n\n  // Show the badge in the input field when a value is selected and the user\n  // is not actively searching.\n  const showBadge = resolvedValue !== null && !isSearching\n\n  const isSearchEnabled = !!debouncedInput\n  const { data, isLoading } = useSearchUserGroupHeaders(\n    debouncedInput,\n    typeFilter,\n    {\n      enabled: isSearchEnabled,\n    },\n  )\n\n  const options = useMemo(\n    () => (data ?? []).filter(filterPredicate ?? (() => true)),\n    [data, filterPredicate],\n  )\n\n  const placeholderText = useMemo(() => {\n    if (placeholder !== undefined) {\n      return placeholder\n    } else if (typeFilter == TYPE_FILTER.USERS_ONLY) {\n      return 'Name (first and last)'\n    } else if (typeFilter == TYPE_FILTER.TEAMS_ONLY) {\n      return 'Team name'\n    } else {\n      return 'Name (first and last) or team name'\n    }\n  }, [placeholder, typeFilter])\n\n  if (isLoadingDefaultValue || isLoadingControlledValue) {\n    return <Skeleton width=\"100%\" />\n  }\n\n  return (\n    <Autocomplete<UserGroupHeader, false, false, false>\n      id={inputId}\n      value={resolvedValue}\n      inputValue={inputValue}\n      onInputChange={(_event, newInputValue, reason) => {\n        if (reason === 'selectOption' || reason === 'reset') {\n          // After an option is selected/removed, clear the input text so it's ready for the next search.\n          setInputValue('')\n        } else {\n          setInputValue(newInputValue)\n        }\n      }}\n      // When a value is selected, clicking the badge area should re-open the search.\n      openOnFocus={resolvedValue !== null}\n      onOpen={() => {\n        setIsSearching(true)\n      }}\n      onClose={() => setIsSearching(false)}\n      options={options}\n      filterOptions={x => x}\n      loading={isLoading || inputValue !== debouncedInput}\n      isOptionEqualToValue={(option, val) => option.ownerId === val.ownerId}\n      getOptionLabel={option => option.userName}\n      renderOption={(optionProps, option) => (\n        <li {...optionProps} key={option.ownerId}>\n          <UserOrTeamBadge\n            userGroupHeader={option}\n            disableHref\n            showFullName\n            showCardOnHover={false}\n          />\n        </li>\n      )}\n      renderInput={({\n        inputProps: inputPropsFromParams,\n        InputProps: InputPropsFromParams,\n        ...params\n      }) => (\n        <TextField\n          {...params}\n          placeholder={showBadge ? undefined : placeholderText}\n          autoFocus={autoFocus}\n          slotProps={{\n            htmlInput: {\n              ...inputPropsFromParams,\n              // While the badge is displayed, hide the underlying input text and cursor.\n              // Merge custom styles with parent styles to preserve mouse selection and other behaviors.\n              style: {\n                ...inputPropsFromParams.style,\n                ...(showBadge ? { color: 'transparent' } : {}),\n              },\n            },\n            input: {\n              ...InputPropsFromParams,\n              startAdornment: showBadge ? (\n                <Box sx={{ ml: 1 }}>\n                  <UserOrTeamBadge\n                    userGroupHeader={resolvedValue}\n                    disableHref\n                    showFullName\n                    showCardOnHover={false}\n                  />\n                </Box>\n              ) : undefined,\n            },\n          }}\n        />\n      )}\n      onChange={(_event, newValue) => {\n        if (!isControlled) {\n          setInternalValue(newValue)\n        }\n        onChange?.(\n          newValue?.ownerId != null ? newValue.ownerId.toString() : null,\n          newValue ?? null,\n        )\n      }}\n      noOptionsText={\n        isLoading || inputValue !== debouncedInput ? 'Loading…' : 'No options'\n      }\n      clearOnEscape\n    />\n  )\n}\n\nexport default UserSearchBox\n"],"mappings":";;;;;;;;;AAmCA,SAAS,EAAc,GAA2B;CAChD,IAAM,EACJ,YACA,kBAAe,MACf,aACA,oBACA,eACA,gBACA,eAAY,IACZ,OAAO,MACL,GAEE,IAAe,MAAc,KAAA,GAE7B,CAAC,GAAY,KAAiB,EAAS,GAAG,EAC1C,CAAC,GAAgB,KAAqB,EAAS,GAAG;AACxD,SACQ;AACJ,IAAkB,EAAW;IAE/B,CAAC,EAAW,EACZ,IACD;CAID,IAAM,CAAC,GAAa,KAAkB,EAAS,GAAM,EAG/C,EAAE,MAAM,GAAwB,WAAW,MAC/C,EAAsB,KAAgB,IAAI,EACxC,SAAS,CAAC,CAAC,KAAgB,CAAC,GAC7B,CAAC,EAGE,IACJ,KAAgB,OAAO,KAAc,WAAW,IAAY,MAExD,EACJ,MAAM,GACN,WAAW,MACT,EAAsB,KAAyB,IAAI,EACrD,SAAS,CAAC,CAAC,GACZ,CAAC,EAMI,CAAC,GAAe,KAAoB,EAExC,KAAA,EAAU,EAQN,IAAwC,IAL5C,OAAO,KAAc,WAAY,KAA4B,OAAQ,OAErE,MAAkB,KAAA,IAEb,KAA0B,OAD3B,GAQA,IAAY,MAAkB,QAAQ,CAAC,GAGvC,EAAE,SAAM,iBAAc,EAC1B,GACA,GACA,EACE,SAAS,CALY,CAAC,GAMvB,CACF,EAEK,IAAU,SACP,KAAQ,EAAE,EAAE,OAAO,YAA0B,IAAM,EAC1D,CAAC,GAAM,EAAgB,CACxB,EAEK,IAAkB,QAClB,MAAgB,KAAA,IAET,KAAc,EAAY,aAC5B,0BACE,KAAc,EAAY,aAC5B,cAEA,uCANA,GAQR,CAAC,GAAa,EAAW,CAAC;AAM7B,QAJI,KAAyB,IACpB,kBAAC,GAAD,EAAU,OAAM,QAAS,CAAA,GAIhC,kBAAC,GAAD;EACE,IAAI;EACJ,OAAO;EACK;EACZ,gBAAgB,GAAQ,GAAe,MAAW;AAChD,GAEE,EAFE,MAAW,kBAAkB,MAAW,UAE5B,KAEA,EAAc;;EAIhC,aAAa,MAAkB;EAC/B,cAAc;AACZ,KAAe,GAAK;;EAEtB,eAAe,EAAe,GAAM;EAC3B;EACT,gBAAe,MAAK;EACpB,SAAS,KAAa,MAAe;EACrC,uBAAuB,GAAQ,MAAQ,EAAO,YAAY,EAAI;EAC9D,iBAAgB,MAAU,EAAO;EACjC,eAAe,GAAa,MAC1B,kBAAC,MAAD;GAAI,GAAI;GAAa,KAAK,EAAO;GAO5B,EANH,kBAAC,GAAD;GACE,iBAAiB;GACjB,aAAA;GACA,cAAA;GACA,iBAAiB;GACjB,CAAA,CACC;EAEP,cAAc,EACZ,YAAY,GACZ,YAAY,GACZ,GAAG,QAEH,kBAAC,GAAD;GACE,GAAI;GACJ,aAAa,IAAY,KAAA,IAAY;GAC1B;GACX,WAAW;IACT,WAAW;KACT,GAAG;KAGH,OAAO;MACL,GAAG,EAAqB;MACxB,GAAI,IAAY,EAAE,OAAO,eAAe,GAAG,EAAE;MAC9C;KACF;IACD,OAAO;KACL,GAAG;KACH,gBAAgB,IACd,kBAAC,GAAD;MAAK,IAAI,EAAE,IAAI,GAAG;gBAChB,kBAAC,GAAD;OACE,iBAAiB;OACjB,aAAA;OACA,cAAA;OACA,iBAAiB;OACjB,CAAA;MACE,CAAA,GACJ,KAAA;KACL;IACF;GACD,CAAA;EAEJ,WAAW,GAAQ,MAAa;AAI9B,GAHK,KACH,EAAiB,EAAS,EAE5B,IACE,GAAU,WAAW,OAAqC,OAA9B,EAAS,QAAQ,UAAU,EACvD,KAAY,KACb;;EAEH,eACE,KAAa,MAAe,IAAiB,aAAa;EAE5D,eAAA;EACA,CAAA"}
+{"version":3,"file":"UserSearchBox.js","names":[],"sources":["../../../src/components/UserSearchBox/UserSearchBox.tsx"],"sourcesContent":["import {\n  useGetUserGroupHeader,\n  useSearchUserGroupHeaders,\n} from '@/synapse-queries'\nimport { useDebouncedEffect } from '@/utils/hooks/useDebouncedEffect'\nimport { Autocomplete, Box, Skeleton, TextField } from '@mui/material'\nimport { TYPE_FILTER, UserGroupHeader } from '@sage-bionetworks/synapse-types'\nimport { useMemo, useState } from 'react'\nimport UserOrTeamBadge from '../UserOrTeamBadge/UserOrTeamBadge'\n\nexport type UserSearchBoxProps = {\n  /* id for the input element, for associating with a <label> */\n  inputId?: string\n  /* The initial principal ID (uncontrolled). Ignored if `value` is provided. */\n  defaultValue?: string\n  onChange?: (\n    principalId: string | null,\n    header: UserGroupHeader | null,\n  ) => void\n  typeFilter?: TYPE_FILTER\n  filterPredicate?: (item: UserGroupHeader) => boolean\n  placeholder?: string\n  autoFocus?: boolean\n  /**\n   * The principal ID of the currently selected user or team.\n   * - `undefined`: uncontrolled — the component manages its own selection state\n   * - `null`: controlled with no selection (clears the field)\n   * - string: controlled with the given principal ID selected\n   */\n  value?: string | null\n}\n\n/**\n * Autocomplete component used to search for and select a user or team.\n */\nfunction UserSearchBox(props: UserSearchBoxProps) {\n  const {\n    inputId,\n    defaultValue = null,\n    onChange,\n    filterPredicate,\n    typeFilter,\n    placeholder,\n    autoFocus = false,\n    value: valueProp,\n  } = props\n\n  const isControlled = valueProp !== undefined\n\n  const [inputValue, setInputValue] = useState('')\n  const [debouncedInput, setDebouncedInput] = useState('')\n  useDebouncedEffect(\n    () => {\n      setDebouncedInput(inputValue)\n    },\n    [inputValue],\n    500,\n  )\n\n  // Tracks whether the dropdown is open, used to toggle between badge display\n  // and text-input search mode.\n  const [isSearching, setIsSearching] = useState(false)\n\n  // Resolve defaultValue principalId → UserGroupHeader for the initial uncontrolled state\n  const { data: defaultUserGroupHeader, isLoading: isLoadingDefaultValue } =\n    useGetUserGroupHeader(defaultValue ?? '', {\n      enabled: !!defaultValue && !isControlled,\n    })\n\n  // Resolve controlled string principalId → UserGroupHeader\n  const controlledPrincipalId =\n    isControlled && typeof valueProp === 'string' ? valueProp : null\n\n  const {\n    data: resolvedControlledHeader,\n    isLoading: isLoadingControlledValue,\n  } = useGetUserGroupHeader(controlledPrincipalId ?? '', {\n    enabled: !!controlledPrincipalId,\n  })\n\n  // Internal state for uncontrolled mode.\n  // undefined = user hasn't interacted yet → falls back to defaultUserGroupHeader\n  // null      = user explicitly cleared the selection\n  // header    = user's current selection\n  const [internalValue, setInternalValue] = useState<\n    UserGroupHeader | null | undefined\n  >(undefined)\n\n  const controlledValue =\n    typeof valueProp === 'string' ? (resolvedControlledHeader ?? null) : null\n  const uncontrolledValue =\n    internalValue !== undefined\n      ? internalValue\n      : (defaultUserGroupHeader ?? null)\n  const resolvedValue: UserGroupHeader | null = isControlled\n    ? controlledValue\n    : uncontrolledValue\n\n  // Show the badge in the input field when a value is selected and the user\n  // is not actively searching.\n  const showBadge = resolvedValue !== null && !isSearching\n\n  const isSearchEnabled = !!debouncedInput\n  const { data, isLoading } = useSearchUserGroupHeaders(\n    debouncedInput,\n    typeFilter,\n    {\n      enabled: isSearchEnabled,\n    },\n  )\n\n  const options = useMemo(\n    () => (data ?? []).filter(filterPredicate ?? (() => true)),\n    [data, filterPredicate],\n  )\n\n  const placeholderText = useMemo(() => {\n    if (placeholder !== undefined) {\n      return placeholder\n    } else if (typeFilter == TYPE_FILTER.USERS_ONLY) {\n      return 'Name (first and last)'\n    } else if (typeFilter == TYPE_FILTER.TEAMS_ONLY) {\n      return 'Team name'\n    } else {\n      return 'Name (first and last) or team name'\n    }\n  }, [placeholder, typeFilter])\n\n  if (isLoadingDefaultValue || isLoadingControlledValue) {\n    return <Skeleton width=\"100%\" />\n  }\n\n  return (\n    <Autocomplete<UserGroupHeader, false, false, false>\n      id={inputId}\n      value={resolvedValue}\n      inputValue={inputValue}\n      onInputChange={(_event, newInputValue, reason) => {\n        if (reason === 'selectOption' || reason === 'reset') {\n          // After an option is selected/removed, clear the input text so it's ready for the next search.\n          setInputValue('')\n        } else {\n          setInputValue(newInputValue)\n        }\n      }}\n      // When a value is selected, clicking the badge area should re-open the search.\n      openOnFocus={resolvedValue !== null}\n      onOpen={() => {\n        setIsSearching(true)\n      }}\n      onClose={() => setIsSearching(false)}\n      options={options}\n      filterOptions={x => x}\n      loading={isLoading || inputValue !== debouncedInput}\n      isOptionEqualToValue={(option, val) => option.ownerId === val.ownerId}\n      getOptionLabel={option => option.userName}\n      renderOption={(optionProps, option) => (\n        <li {...optionProps} key={option.ownerId}>\n          <UserOrTeamBadge\n            userGroupHeader={option}\n            disableHref\n            showFullName\n            showCardOnHover={false}\n          />\n        </li>\n      )}\n      renderInput={({\n        inputProps: inputPropsFromParams,\n        InputProps: InputPropsFromParams,\n        ...params\n      }) => (\n        <TextField\n          {...params}\n          placeholder={showBadge ? undefined : placeholderText}\n          autoFocus={autoFocus}\n          slotProps={{\n            htmlInput: {\n              ...inputPropsFromParams,\n              // While the badge is displayed, hide the underlying input text and cursor.\n              // Merge custom styles with parent styles to preserve mouse selection and other behaviors.\n              style: {\n                ...inputPropsFromParams.style,\n                ...(showBadge ? { color: 'transparent' } : {}),\n              },\n            },\n            input: {\n              ...InputPropsFromParams,\n              startAdornment: showBadge ? (\n                <Box sx={{ ml: 1 }}>\n                  <UserOrTeamBadge\n                    userGroupHeader={resolvedValue}\n                    disableHref\n                    showFullName\n                    showCardOnHover={false}\n                  />\n                </Box>\n              ) : undefined,\n            },\n          }}\n        />\n      )}\n      onChange={(_event, newValue) => {\n        if (!isControlled) {\n          setInternalValue(newValue)\n        }\n        onChange?.(\n          newValue?.ownerId != null ? newValue.ownerId.toString() : null,\n          newValue ?? null,\n        )\n      }}\n      noOptionsText={\n        isLoading || inputValue !== debouncedInput ? 'Loading…' : 'No options'\n      }\n      clearOnEscape\n    />\n  )\n}\n\nexport default UserSearchBox\n"],"mappings":";;;;;;;;;AAmCA,SAAS,EAAc,GAA2B;CAChD,IAAM,EACJ,YACA,kBAAe,MACf,aACA,oBACA,eACA,gBACA,eAAY,IACZ,OAAO,MACL,GAEE,IAAe,MAAc,KAAA,GAE7B,CAAC,GAAY,KAAiB,EAAS,EAAE,GACzC,CAAC,GAAgB,KAAqB,EAAS,EAAE;CACvD,QACQ;EACJ,EAAkB,CAAU;CAC9B,GACA,CAAC,CAAU,GACX,GACF;CAIA,IAAM,CAAC,GAAa,KAAkB,EAAS,EAAK,GAG9C,EAAE,MAAM,GAAwB,WAAW,MAC/C,EAAsB,KAAgB,IAAI,EACxC,SAAS,CAAC,CAAC,KAAgB,CAAC,EAC9B,CAAC,GAGG,IACJ,KAAgB,OAAO,KAAc,WAAW,IAAY,MAExD,EACJ,MAAM,GACN,WAAW,MACT,EAAsB,KAAyB,IAAI,EACrD,SAAS,CAAC,CAAC,EACb,CAAC,GAMK,CAAC,GAAe,KAAoB,EAExC,KAAA,CAAS,GAQL,IAAwC,IAL5C,OAAO,KAAc,WAAY,KAA4B,OAAQ,OAErE,MAAkB,KAAA,IAEb,KAA0B,OAD3B,GAQA,IAAY,MAAkB,QAAQ,CAAC,GAGvC,EAAE,SAAM,iBAAc,EAC1B,GACA,GACA,EACE,SAAS,CALY,CAAC,EAMxB,CACF,GAEM,IAAU,SACP,KAAQ,CAAC,GAAG,OAAO,YAA0B,GAAK,GACzD,CAAC,GAAM,CAAe,CACxB,GAEM,IAAkB,QAClB,MAAgB,KAAA,IAET,KAAc,EAAY,aAC5B,0BACE,KAAc,EAAY,aAC5B,cAEA,uCANA,GAQR,CAAC,GAAa,CAAU,CAAC;CAM5B,OAJI,KAAyB,IACpB,kBAAC,GAAD,EAAU,OAAM,OAAQ,CAAA,IAI/B,kBAAC,GAAD;EACE,IAAI;EACJ,OAAO;EACK;EACZ,gBAAgB,GAAQ,GAAe,MAAW;GAChD,AAEE,EAFE,MAAW,kBAAkB,MAAW,UAE5B,KAEA,CAAa;EAE/B;EAEA,aAAa,MAAkB;EAC/B,cAAc;GACZ,EAAe,EAAI;EACrB;EACA,eAAe,EAAe,EAAK;EAC1B;EACT,gBAAe,MAAK;EACpB,SAAS,KAAa,MAAe;EACrC,uBAAuB,GAAQ,MAAQ,EAAO,YAAY,EAAI;EAC9D,iBAAgB,MAAU,EAAO;EACjC,eAAe,GAAa,MAC1B,kBAAC,MAAD;GAAI,GAAI;GAAa,KAAK,EAAO;EAO7B,GANF,kBAAC,GAAD;GACE,iBAAiB;GACjB,aAAA;GACA,cAAA;GACA,iBAAiB;EAClB,CAAA,CACC;EAEN,cAAc,EACZ,YAAY,GACZ,YAAY,GACZ,GAAG,QAEH,kBAAC,GAAD;GACE,GAAI;GACJ,aAAa,IAAY,KAAA,IAAY;GAC1B;GACX,WAAW;IACT,WAAW;KACT,GAAG;KAGH,OAAO;MACL,GAAG,EAAqB;MACxB,GAAI,IAAY,EAAE,OAAO,cAAc,IAAI,CAAC;KAC9C;IACF;IACA,OAAO;KACL,GAAG;KACH,gBAAgB,IACd,kBAAC,GAAD;MAAK,IAAI,EAAE,IAAI,EAAE;gBACf,kBAAC,GAAD;OACE,iBAAiB;OACjB,aAAA;OACA,cAAA;OACA,iBAAiB;MAClB,CAAA;KACE,CAAA,IACH,KAAA;IACN;GACF;EACD,CAAA;EAEH,WAAW,GAAQ,MAAa;GAI9B,AAHK,KACH,EAAiB,CAAQ,GAE3B,IACE,GAAU,WAAW,OAAqC,OAA9B,EAAS,QAAQ,SAAS,GACtD,KAAY,IACd;EACF;EACA,eACE,KAAa,MAAe,IAAiB,aAAa;EAE5D,eAAA;CACD,CAAA;AAEL"}

package/dist/components/Webhook/CreateWebhookModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreateWebhookModal.js","names":[],"sources":["../../../src/components/Webhook/CreateWebhookModal.tsx"],"sourcesContent":["import {\n  useCreateWebhook,\n  useDeleteWebhook,\n  useUpdateWebhook,\n} from '@/synapse-queries/webhook/useWebhook'\nimport DeleteTwoToneIcon from '@mui/icons-material/DeleteTwoTone'\nimport SearchOutlined from '@mui/icons-material/SearchOutlined'\nimport {\n  Alert,\n  Box,\n  Button,\n  Checkbox,\n  FormControlLabel,\n  FormGroup,\n  Grid,\n  IconButton,\n  InputLabel,\n  Link,\n  Switch,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport {\n  ErrorResponseCode,\n  SynapseEventType,\n  SynapseObjectType,\n  Webhook,\n  WebhookVerificationStatus,\n} from '@sage-bionetworks/synapse-client'\nimport { upperFirst } from 'lodash-es'\nimport { Fragment, PropsWithChildren, useEffect, useState } from 'react'\nimport { ConfirmationDialog } from '../ConfirmationDialog/ConfirmationDialog'\nimport { EntityFinderModal } from '../EntityFinder/EntityFinderModal'\nimport { FinderScope } from '../EntityFinder/tree/EntityTree'\nimport { VersionSelectionType } from '../EntityFinder/VersionSelectionType'\nimport { HelpPopover } from '../HelpPopover/HelpPopover'\nimport { displayToast } from '../ToastMessage/ToastMessage'\n\ntype CreateWebhookModalProps = {\n  initialData?: Webhook\n  open: boolean\n  onClose: () => void\n}\n\nconst NEW_ENDPOINT_DOMAIN_REQUEST_TITLE = encodeURIComponent(\n  'Request to add new domain for webhook verification',\n)\nconst NEW_ENDPOINT_DOMAIN_REQUEST_SUMMARY = encodeURIComponent(\n  '<Please provide the domain(s) you wish to use and any additional details related to your request.>',\n)\nconst NEW_ENDPOINT_CONTACT_FORM_URL = `https://sagebionetworks.jira.com/servicedesk/customer/portal/9/group/16/create/85?summary=${NEW_ENDPOINT_DOMAIN_REQUEST_TITLE}&description=${NEW_ENDPOINT_DOMAIN_REQUEST_SUMMARY}`\n\nfunction UpdateWarningWrapper(props: PropsWithChildren) {\n  return (\n    <Box\n      sx={{\n        mt: '10px',\n        py: 2,\n        px: 4,\n        backgroundColor: 'rgb(178, 36, 42, 0.03)',\n      }}\n    >\n      <Typography sx={{ my: 1 }} color=\"error\" variant=\"headline3\" gutterBottom>\n        DANGER ZONE\n      </Typography>\n      <Typography variant=\"body1\" gutterBottom>\n        Editing the following information will require you to re-verify the\n        webhook.\n      </Typography>\n      {props.children}\n    </Box>\n  )\n}\n\nexport default function CreateWebhookModal(props: CreateWebhookModalProps) {\n  const { initialData, open, onClose } = props\n\n  // Form state\n  const objectType: SynapseObjectType = SynapseObjectType.ENTITY // Currently only entities can be selected\n  const [objectId, setObjectId] = useState<string>('')\n  const [eventTypes, setEventTypes] = useState<Set<SynapseEventType>>(new Set())\n  const [invokeEndpoint, setInvokeEndpoint] = useState<string>('')\n  const [enabled, setEnabled] = useState(true)\n\n  useEffect(() => {\n    setObjectId(initialData?.objectId || '')\n    setEventTypes(\n      new Set(initialData?.eventTypes || []) as Set<SynapseEventType>,\n    )\n    setInvokeEndpoint(initialData?.invokeEndpoint || '')\n    setEnabled(initialData?.isEnabled ?? true)\n  }, [initialData])\n\n  const [showEntityFinder, setShowEntityFinder] = useState(false)\n  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false)\n\n  const {\n    mutate: createWebhook,\n    isPending: isCreatePending,\n    error: createError,\n  } = useCreateWebhook({\n    onSuccess: () => {\n      displayToast('Webhook created', 'success')\n      onClose()\n    },\n  })\n\n  const {\n    mutate: updateWebhook,\n    isPending: isUpdatePending,\n    error: updateError,\n  } = useUpdateWebhook({\n    onSuccess: () => {\n      displayToast('Webhook updated', 'success')\n      onClose()\n    },\n  })\n\n  const {\n    mutate: deleteWebhook,\n    isPending: isDeletePending,\n    error: deleteError,\n  } = useDeleteWebhook({\n    onSuccess: () => {\n      displayToast('Webhook deleted', 'info')\n      setShowDeleteConfirmation(false)\n      onClose()\n    },\n  })\n\n  const isPending = isCreatePending || isUpdatePending\n  const error = createError || updateError\n\n  function handleConfirm() {\n    if (initialData) {\n      updateWebhook({\n        webhookId: initialData.id!,\n        createOrUpdateWebhookRequest: {\n          objectType,\n          objectId,\n          eventTypes,\n          invokeEndpoint,\n          isEnabled: enabled,\n        },\n      })\n    } else {\n      createWebhook({\n        objectType,\n        objectId,\n        eventTypes,\n        invokeEndpoint,\n        isEnabled: enabled,\n      })\n    }\n  }\n\n  function handleDelete() {\n    if (initialData) {\n      deleteWebhook(initialData.id!)\n    }\n  }\n\n  // If the user attempts to use a domain that has not been added to the allowlist, link to a form to create a request.\n  const showRequestDomainForm =\n    error &&\n    error.errorResponse &&\n    'errorCode' in error.errorResponse &&\n    error.errorResponse.errorCode ===\n      ErrorResponseCode.UNSUPPORTED_WEBHOOK_DOMAIN\n\n  // Wrap certain fields in a wrapper if they will require re-verifying the webhook\n  const RevalidationFieldsWrapper =\n    initialData &&\n    initialData.verificationStatus === WebhookVerificationStatus.VERIFIED\n      ? UpdateWarningWrapper\n      : Fragment\n\n  return (\n    <ConfirmationDialog\n      open={open}\n      title={'Create New Webhook'}\n      maxWidth={'md'}\n      onCancel={onClose}\n      onConfirm={() => {\n        handleConfirm()\n      }}\n      confirmButtonProps={{\n        children: `${initialData ? 'Update' : 'Create'} Webhook`,\n        disabled: isPending,\n      }}\n      cancelButtonProps={{\n        disabled: isPending,\n      }}\n      content={\n        <>\n          <Grid container spacing={2}>\n            <Grid size={12}>\n              <Typography variant={'body1'} gutterBottom>\n                Specify the ID of the entity and the types of events you would\n                like to receive. Once you complete this step, Synapse will send\n                a verification code to the endpoint you specify. After you\n                verify your webhook, Synapse will send your chosen events to the\n                verified endpoint.\n              </Typography>\n            </Grid>\n            <Grid\n              size={{\n                xs: 12,\n                md: 6,\n              }}\n            >\n              <EntityFinderModal\n                configuration={{\n                  initialScope: FinderScope.ALL_PROJECTS,\n                  initialContainer: 'root',\n                  selectMultiple: false,\n                  treeOnly: false,\n                  versionSelection: VersionSelectionType.DISALLOWED,\n                }}\n                show={showEntityFinder}\n                onCancel={() => {\n                  setShowEntityFinder(false)\n                }}\n                title={'Select item for Webhook'}\n                promptCopy={\n                  'Select an item to associate with the webhook. The webhook can be used to receive programmatic alerts when the item is updated.'\n                }\n                onConfirm={selected => {\n                  setObjectId(selected[0].targetId)\n                  setShowEntityFinder(false)\n                }}\n                confirmButtonCopy={'Select'}\n              />\n              <TextField\n                required\n                label={\n                  <>\n                    Entity ID\n                    <HelpPopover\n                      containerSx={{\n                        position: 'fixed',\n                        ml: '15px',\n                        fontSize: '12px',\n                      }}\n                      markdownText={\n                        'The ID of a Synapse entity for which to receive events. For folders and projects, matching events are published to the webhook endpoint for any entity in their hierarchy.'\n                      }\n                    />\n                  </>\n                }\n                type=\"text\"\n                fullWidth\n                value={objectId}\n                onChange={e => {\n                  setObjectId(e.target.value)\n                }}\n                slotProps={{\n                  input: {\n                    endAdornment: (\n                      <IconButton onClick={() => setShowEntityFinder(true)}>\n                        <SearchOutlined />\n                      </IconButton>\n                    ),\n                  },\n                }}\n              />\n            </Grid>\n            <Grid size={6}>\n              <FormControlLabel\n                control={<Switch />}\n                labelPlacement={'top'}\n                label={<InputLabel>Enabled</InputLabel>}\n                checked={enabled}\n                onChange={(_e, checked) => {\n                  setEnabled(checked)\n                }}\n              />\n            </Grid>\n            <Grid\n              size={{\n                xs: 12,\n                md: 6,\n              }}\n            >\n              <FormGroup>\n                <InputLabel required>Events</InputLabel>\n                {Object.values(SynapseEventType).map(eventType => (\n                  <FormControlLabel\n                    control={<Checkbox />}\n                    label={upperFirst(eventType.toLowerCase())}\n                    key={eventType}\n                    checked={eventTypes.has(eventType)}\n                    onChange={(_e, checked) => {\n                      setEventTypes(curr => {\n                        if (checked) {\n                          const newSet = new Set(curr)\n                          newSet.add(eventType)\n                          return newSet\n                        } else {\n                          curr.delete(eventType)\n                          return new Set<SynapseEventType>(curr)\n                        }\n                      })\n                    }}\n                  />\n                ))}\n              </FormGroup>\n            </Grid>\n            <Grid size={12}>\n              <RevalidationFieldsWrapper>\n                <TextField\n                  label={'Endpoint'}\n                  fullWidth\n                  value={invokeEndpoint}\n                  onChange={e => setInvokeEndpoint(e.target.value)}\n                  required\n                  placeholder={'https://'}\n                />\n                {initialData && (\n                  <>\n                    <Button\n                      onClick={() => {\n                        setShowDeleteConfirmation(true)\n                      }}\n                      color=\"error\"\n                      variant={'outlined'}\n                      startIcon={<DeleteTwoToneIcon />}\n                      sx={{ my: 2 }}\n                    >\n                      Delete Webhook\n                    </Button>\n                    <ConfirmationDialog\n                      title={'Confirm Delete Webhook?'}\n                      onCancel={() => setShowDeleteConfirmation(false)}\n                      open={showDeleteConfirmation}\n                      content={\n                        <>\n                          <Typography variant={'body1'}>\n                            Are you sure you want to delete this webhook? This\n                            action cannot be undone.\n                          </Typography>\n                          {deleteError && (\n                            <Alert severity=\"error\" sx={{ mt: 2 }}>\n                              {deleteError.reason}\n                            </Alert>\n                          )}\n                        </>\n                      }\n                      onConfirm={() => {\n                        handleDelete()\n                      }}\n                      confirmButtonProps={{\n                        children: 'Delete',\n                        color: 'error',\n                        disabled: isDeletePending,\n                      }}\n                      cancelButtonProps={{ disabled: isDeletePending }}\n                    />\n                  </>\n                )}\n              </RevalidationFieldsWrapper>\n            </Grid>\n          </Grid>\n\n          {error && (\n            <Alert severity=\"error\" sx={{ my: 2 }}>\n              {showRequestDomainForm && (\n                <>\n                  Synapse only permits configuring webhooks on verified domains,\n                  which are specified in the{' '}\n                  <Link\n                    href={\n                      'https://rest-docs.synapse.org/rest/index.html#org.sagebionetworks.repo.web.controller.WebhookController'\n                    }\n                    target={'_blank'}\n                  >\n                    REST documentation\n                  </Link>\n                  . You have entered a domain that has not been verified.{' '}\n                  <Link href={NEW_ENDPOINT_CONTACT_FORM_URL} target={'_blank'}>\n                    Please fill out this form to request verification for your\n                    webhook domain\n                  </Link>\n                  .\n                </>\n              )}\n              {!showRequestDomainForm && error.reason}\n            </Alert>\n          )}\n        </>\n      }\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"CreateWebhookModal.js","names":[],"sources":["../../../src/components/Webhook/CreateWebhookModal.tsx"],"sourcesContent":["import {\n  useCreateWebhook,\n  useDeleteWebhook,\n  useUpdateWebhook,\n} from '@/synapse-queries/webhook/useWebhook'\nimport DeleteTwoToneIcon from '@mui/icons-material/DeleteTwoTone'\nimport SearchOutlined from '@mui/icons-material/SearchOutlined'\nimport {\n  Alert,\n  Box,\n  Button,\n  Checkbox,\n  FormControlLabel,\n  FormGroup,\n  Grid,\n  IconButton,\n  InputLabel,\n  Link,\n  Switch,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport {\n  ErrorResponseCode,\n  SynapseEventType,\n  SynapseObjectType,\n  Webhook,\n  WebhookVerificationStatus,\n} from '@sage-bionetworks/synapse-client'\nimport { upperFirst } from 'lodash-es'\nimport { Fragment, PropsWithChildren, useEffect, useState } from 'react'\nimport { ConfirmationDialog } from '../ConfirmationDialog/ConfirmationDialog'\nimport { EntityFinderModal } from '../EntityFinder/EntityFinderModal'\nimport { FinderScope } from '../EntityFinder/tree/EntityTree'\nimport { VersionSelectionType } from '../EntityFinder/VersionSelectionType'\nimport { HelpPopover } from '../HelpPopover/HelpPopover'\nimport { displayToast } from '../ToastMessage/ToastMessage'\n\ntype CreateWebhookModalProps = {\n  initialData?: Webhook\n  open: boolean\n  onClose: () => void\n}\n\nconst NEW_ENDPOINT_DOMAIN_REQUEST_TITLE = encodeURIComponent(\n  'Request to add new domain for webhook verification',\n)\nconst NEW_ENDPOINT_DOMAIN_REQUEST_SUMMARY = encodeURIComponent(\n  '<Please provide the domain(s) you wish to use and any additional details related to your request.>',\n)\nconst NEW_ENDPOINT_CONTACT_FORM_URL = `https://sagebionetworks.jira.com/servicedesk/customer/portal/9/group/16/create/85?summary=${NEW_ENDPOINT_DOMAIN_REQUEST_TITLE}&description=${NEW_ENDPOINT_DOMAIN_REQUEST_SUMMARY}`\n\nfunction UpdateWarningWrapper(props: PropsWithChildren) {\n  return (\n    <Box\n      sx={{\n        mt: '10px',\n        py: 2,\n        px: 4,\n        backgroundColor: 'rgb(178, 36, 42, 0.03)',\n      }}\n    >\n      <Typography sx={{ my: 1 }} color=\"error\" variant=\"headline3\" gutterBottom>\n        DANGER ZONE\n      </Typography>\n      <Typography variant=\"body1\" gutterBottom>\n        Editing the following information will require you to re-verify the\n        webhook.\n      </Typography>\n      {props.children}\n    </Box>\n  )\n}\n\nexport default function CreateWebhookModal(props: CreateWebhookModalProps) {\n  const { initialData, open, onClose } = props\n\n  // Form state\n  const objectType: SynapseObjectType = SynapseObjectType.ENTITY // Currently only entities can be selected\n  const [objectId, setObjectId] = useState<string>('')\n  const [eventTypes, setEventTypes] = useState<Set<SynapseEventType>>(new Set())\n  const [invokeEndpoint, setInvokeEndpoint] = useState<string>('')\n  const [enabled, setEnabled] = useState(true)\n\n  useEffect(() => {\n    setObjectId(initialData?.objectId || '')\n    setEventTypes(\n      new Set(initialData?.eventTypes || []) as Set<SynapseEventType>,\n    )\n    setInvokeEndpoint(initialData?.invokeEndpoint || '')\n    setEnabled(initialData?.isEnabled ?? true)\n  }, [initialData])\n\n  const [showEntityFinder, setShowEntityFinder] = useState(false)\n  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false)\n\n  const {\n    mutate: createWebhook,\n    isPending: isCreatePending,\n    error: createError,\n  } = useCreateWebhook({\n    onSuccess: () => {\n      displayToast('Webhook created', 'success')\n      onClose()\n    },\n  })\n\n  const {\n    mutate: updateWebhook,\n    isPending: isUpdatePending,\n    error: updateError,\n  } = useUpdateWebhook({\n    onSuccess: () => {\n      displayToast('Webhook updated', 'success')\n      onClose()\n    },\n  })\n\n  const {\n    mutate: deleteWebhook,\n    isPending: isDeletePending,\n    error: deleteError,\n  } = useDeleteWebhook({\n    onSuccess: () => {\n      displayToast('Webhook deleted', 'info')\n      setShowDeleteConfirmation(false)\n      onClose()\n    },\n  })\n\n  const isPending = isCreatePending || isUpdatePending\n  const error = createError || updateError\n\n  function handleConfirm() {\n    if (initialData) {\n      updateWebhook({\n        webhookId: initialData.id!,\n        createOrUpdateWebhookRequest: {\n          objectType,\n          objectId,\n          eventTypes,\n          invokeEndpoint,\n          isEnabled: enabled,\n        },\n      })\n    } else {\n      createWebhook({\n        objectType,\n        objectId,\n        eventTypes,\n        invokeEndpoint,\n        isEnabled: enabled,\n      })\n    }\n  }\n\n  function handleDelete() {\n    if (initialData) {\n      deleteWebhook(initialData.id!)\n    }\n  }\n\n  // If the user attempts to use a domain that has not been added to the allowlist, link to a form to create a request.\n  const showRequestDomainForm =\n    error &&\n    error.errorResponse &&\n    'errorCode' in error.errorResponse &&\n    error.errorResponse.errorCode ===\n      ErrorResponseCode.UNSUPPORTED_WEBHOOK_DOMAIN\n\n  // Wrap certain fields in a wrapper if they will require re-verifying the webhook\n  const RevalidationFieldsWrapper =\n    initialData &&\n    initialData.verificationStatus === WebhookVerificationStatus.VERIFIED\n      ? UpdateWarningWrapper\n      : Fragment\n\n  return (\n    <ConfirmationDialog\n      open={open}\n      title={'Create New Webhook'}\n      maxWidth={'md'}\n      onCancel={onClose}\n      onConfirm={() => {\n        handleConfirm()\n      }}\n      confirmButtonProps={{\n        children: `${initialData ? 'Update' : 'Create'} Webhook`,\n        disabled: isPending,\n      }}\n      cancelButtonProps={{\n        disabled: isPending,\n      }}\n      content={\n        <>\n          <Grid container spacing={2}>\n            <Grid size={12}>\n              <Typography variant={'body1'} gutterBottom>\n                Specify the ID of the entity and the types of events you would\n                like to receive. Once you complete this step, Synapse will send\n                a verification code to the endpoint you specify. After you\n                verify your webhook, Synapse will send your chosen events to the\n                verified endpoint.\n              </Typography>\n            </Grid>\n            <Grid\n              size={{\n                xs: 12,\n                md: 6,\n              }}\n            >\n              <EntityFinderModal\n                configuration={{\n                  initialScope: FinderScope.ALL_PROJECTS,\n                  initialContainer: 'root',\n                  selectMultiple: false,\n                  treeOnly: false,\n                  versionSelection: VersionSelectionType.DISALLOWED,\n                }}\n                show={showEntityFinder}\n                onCancel={() => {\n                  setShowEntityFinder(false)\n                }}\n                title={'Select item for Webhook'}\n                promptCopy={\n                  'Select an item to associate with the webhook. The webhook can be used to receive programmatic alerts when the item is updated.'\n                }\n                onConfirm={selected => {\n                  setObjectId(selected[0].targetId)\n                  setShowEntityFinder(false)\n                }}\n                confirmButtonCopy={'Select'}\n              />\n              <TextField\n                required\n                label={\n                  <>\n                    Entity ID\n                    <HelpPopover\n                      containerSx={{\n                        position: 'fixed',\n                        ml: '15px',\n                        fontSize: '12px',\n                      }}\n                      markdownText={\n                        'The ID of a Synapse entity for which to receive events. For folders and projects, matching events are published to the webhook endpoint for any entity in their hierarchy.'\n                      }\n                    />\n                  </>\n                }\n                type=\"text\"\n                fullWidth\n                value={objectId}\n                onChange={e => {\n                  setObjectId(e.target.value)\n                }}\n                slotProps={{\n                  input: {\n                    endAdornment: (\n                      <IconButton onClick={() => setShowEntityFinder(true)}>\n                        <SearchOutlined />\n                      </IconButton>\n                    ),\n                  },\n                }}\n              />\n            </Grid>\n            <Grid size={6}>\n              <FormControlLabel\n                control={<Switch />}\n                labelPlacement={'top'}\n                label={<InputLabel>Enabled</InputLabel>}\n                checked={enabled}\n                onChange={(_e, checked) => {\n                  setEnabled(checked)\n                }}\n              />\n            </Grid>\n            <Grid\n              size={{\n                xs: 12,\n                md: 6,\n              }}\n            >\n              <FormGroup>\n                <InputLabel required>Events</InputLabel>\n                {Object.values(SynapseEventType).map(eventType => (\n                  <FormControlLabel\n                    control={<Checkbox />}\n                    label={upperFirst(eventType.toLowerCase())}\n                    key={eventType}\n                    checked={eventTypes.has(eventType)}\n                    onChange={(_e, checked) => {\n                      setEventTypes(curr => {\n                        if (checked) {\n                          const newSet = new Set(curr)\n                          newSet.add(eventType)\n                          return newSet\n                        } else {\n                          curr.delete(eventType)\n                          return new Set<SynapseEventType>(curr)\n                        }\n                      })\n                    }}\n                  />\n                ))}\n              </FormGroup>\n            </Grid>\n            <Grid size={12}>\n              <RevalidationFieldsWrapper>\n                <TextField\n                  label={'Endpoint'}\n                  fullWidth\n                  value={invokeEndpoint}\n                  onChange={e => setInvokeEndpoint(e.target.value)}\n                  required\n                  placeholder={'https://'}\n                />\n                {initialData && (\n                  <>\n                    <Button\n                      onClick={() => {\n                        setShowDeleteConfirmation(true)\n                      }}\n                      color=\"error\"\n                      variant={'outlined'}\n                      startIcon={<DeleteTwoToneIcon />}\n                      sx={{ my: 2 }}\n                    >\n                      Delete Webhook\n                    </Button>\n                    <ConfirmationDialog\n                      title={'Confirm Delete Webhook?'}\n                      onCancel={() => setShowDeleteConfirmation(false)}\n                      open={showDeleteConfirmation}\n                      content={\n                        <>\n                          <Typography variant={'body1'}>\n                            Are you sure you want to delete this webhook? This\n                            action cannot be undone.\n                          </Typography>\n                          {deleteError && (\n                            <Alert severity=\"error\" sx={{ mt: 2 }}>\n                              {deleteError.reason}\n                            </Alert>\n                          )}\n                        </>\n                      }\n                      onConfirm={() => {\n                        handleDelete()\n                      }}\n                      confirmButtonProps={{\n                        children: 'Delete',\n                        color: 'error',\n                        disabled: isDeletePending,\n                      }}\n                      cancelButtonProps={{ disabled: isDeletePending }}\n                    />\n                  </>\n                )}\n              </RevalidationFieldsWrapper>\n            </Grid>\n          </Grid>\n\n          {error && (\n            <Alert severity=\"error\" sx={{ my: 2 }}>\n              {showRequestDomainForm && (\n                <>\n                  Synapse only permits configuring webhooks on verified domains,\n                  which are specified in the{' '}\n                  <Link\n                    href={\n                      'https://rest-docs.synapse.org/rest/index.html#org.sagebionetworks.repo.web.controller.WebhookController'\n                    }\n                    target={'_blank'}\n                  >\n                    REST documentation\n                  </Link>\n                  . You have entered a domain that has not been verified.{' '}\n                  <Link href={NEW_ENDPOINT_CONTACT_FORM_URL} target={'_blank'}>\n                    Please fill out this form to request verification for your\n                    webhook domain\n                  </Link>\n                  .\n                </>\n              )}\n              {!showRequestDomainForm && error.reason}\n            </Alert>\n          )}\n        </>\n      }\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/components/Webhook/WebhookDashboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"WebhookDashboard.js","names":[],"sources":["../../../src/components/Webhook/WebhookDashboard.tsx"],"sourcesContent":["import InfiniteTableLayout from '@/components/layout/InfiniteTableLayout'\nimport {\n  useGetWebhooksInfinite,\n  useResendVerificationCode,\n} from '@/synapse-queries/webhook/useWebhook'\nimport { formatDate } from '@/utils/functions/DateFormatter'\nimport { AddCircleTwoTone } from '@mui/icons-material'\nimport {\n  Box,\n  Button,\n  Link,\n  Stack,\n  Typography,\n  useMediaQuery,\n  useTheme,\n} from '@mui/material'\nimport {\n  SynapseObjectType,\n  Webhook,\n  WebhookVerificationStatus,\n} from '@sage-bionetworks/synapse-client'\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  useReactTable,\n} from '@tanstack/react-table'\nimport dayjs from 'dayjs'\nimport { upperFirst } from 'lodash-es'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { EntityLink } from '../EntityLink'\nimport { HelpPopover } from '../HelpPopover/HelpPopover'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\nimport CreateWebhookModal from './CreateWebhookModal'\nimport { WebhookVerificationDialog } from './WebhookVerificationDialog'\n\nconst WEBHOOK_CAN_RESEND_CODE_STATES: WebhookVerificationStatus[] = [\n  WebhookVerificationStatus.FAILED,\n  WebhookVerificationStatus.REVOKED,\n]\n\nconst columnHelper = createColumnHelper<Webhook>()\n\nfunction getWebhookTableColumns(\n  onClickVerifyWebhook: (webhook: Webhook) => void,\n  onClickResendVerificationCode: (webhook: Webhook) => void,\n  onClickEditWebhook: (webhook: Webhook) => void,\n) {\n  return [\n    columnHelper.accessor('id', {\n      header: 'ID',\n      size: 75,\n      cell: ctx => ctx.cell.getValue(),\n    }),\n    columnHelper.display({\n      header: 'Object',\n      cell: ctx => {\n        if (ctx.row.original.objectType === SynapseObjectType.ENTITY) {\n          return (\n            <>\n              <EntityLink entity={ctx.row.original.objectId!} /> (syn\n              {ctx.row.original.objectId})\n            </>\n          )\n        }\n        return `${ctx.row.original.objectType}: ${ctx.row.original.objectId}`\n      },\n    }),\n    columnHelper.accessor('eventTypes', {\n      header: 'Event Type(s)',\n      cell: ctx => (\n        <Stack>\n          {Array.from<string>(ctx.cell.getValue()!)\n            .map(s => s.toLowerCase())\n            .map(upperFirst)\n            .map(val => (\n              <span key={val}>{val}</span>\n            ))}\n        </Stack>\n      ),\n    }),\n    columnHelper.accessor('isEnabled', {\n      header: 'Enabled',\n      size: 10,\n      cell: ctx => (ctx.cell.getValue() ? 'Yes' : 'No'),\n    }),\n    columnHelper.accessor('createdOn', {\n      header: 'Created On',\n      cell: ({ getValue }) => formatDate(dayjs(getValue())),\n    }),\n    columnHelper.accessor('modifiedOn', {\n      header: 'Modified On',\n      cell: ({ getValue }) => formatDate(dayjs(getValue())),\n    }),\n    columnHelper.accessor('verificationStatus', {\n      header: 'Verification Status',\n      cell: ctx => (\n        <Stack\n          sx={{\n            flexDirection: 'row',\n            alignItems: 'center',\n            gap: 1,\n          }}\n        >\n          {ctx.row.original.verificationStatus === 'PENDING' && (\n            // useEffect above will trigger a refetch until this resolves\n            <SynapseSpinner size={20} />\n          )}\n          {ctx.row.original.verificationStatus !==\n            WebhookVerificationStatus.PENDING &&\n            upperFirst(\n              (ctx.row.original.verificationStatus || '')\n                .toLowerCase()\n                .replaceAll('_', ' '),\n            )}\n          {ctx.row.original.verificationMsg && (\n            <HelpPopover markdownText={ctx.row.original.verificationMsg} />\n          )}\n        </Stack>\n      ),\n    }),\n    columnHelper.display({\n      id: 'actions',\n      header: 'Actions',\n      size: 10,\n      meta: {\n        textAlign: 'right',\n      },\n      cell: ctx => (\n        <Stack\n          sx={{\n            flexDirection: 'row',\n            justifyContent: 'flex-end',\n            alignItems: 'center',\n            gap: 2,\n          }}\n        >\n          {ctx.row.original.verificationStatus ===\n            WebhookVerificationStatus.CODE_SENT && (\n            <Button\n              variant={'outlined'}\n              onClick={() => {\n                onClickVerifyWebhook(ctx.row.original)\n              }}\n            >\n              Verify code\n            </Button>\n          )}\n\n          {WEBHOOK_CAN_RESEND_CODE_STATES.includes(\n            ctx.row.original.verificationStatus as WebhookVerificationStatus,\n          ) && (\n            <Button\n              variant={'outlined'}\n              onClick={() => {\n                onClickResendVerificationCode(ctx.row.original)\n              }}\n            >\n              Resend code\n            </Button>\n          )}\n          <Button\n            size=\"small\"\n            variant=\"contained\"\n            onClick={() => {\n              onClickEditWebhook(ctx.row.original)\n            }}\n          >\n            Edit\n          </Button>\n        </Stack>\n      ),\n    }),\n  ]\n}\n\nexport default function WebhookDashboard() {\n  const [showCreateModal, setShowCreateModal] = useState(false)\n  const [showVerificationDialog, setShowVerificationDialog] = useState(false)\n  const [webhookToUpdate, setWebhookToUpdate] = useState<Webhook | undefined>(\n    undefined,\n  )\n\n  const theme = useTheme()\n  const hideOptionalColumns = useMediaQuery(theme.breakpoints.down('md'))\n\n  const {\n    data: infiniteData,\n    refetch,\n    hasNextPage,\n    fetchNextPage,\n    isFetchingNextPage,\n    isLoading,\n  } = useGetWebhooksInfinite()\n  const webhooks = useMemo(\n    () => infiniteData?.pages.flatMap(page => page.page!) ?? [],\n    [infiniteData],\n  )\n\n  // If the Webhook verification status is PENDING, Synapse may not have sent the verification code, or may have not reported a response.\n  // Refetch on an interval to check if the verification status has changed.\n  useEffect(() => {\n    let intervalId: NodeJS.Timeout\n    if (webhooks.some(webhook => webhook.verificationStatus === 'PENDING')) {\n      intervalId = setInterval(() => {\n        void refetch()\n      }, 2500)\n    }\n    return () => clearInterval(intervalId)\n  }, [refetch, webhooks])\n\n  const { mutate: resendVerificationCode } = useResendVerificationCode()\n\n  const onClickVerifyWebhook = useCallback((webhook: Webhook) => {\n    setWebhookToUpdate(webhook)\n    setShowVerificationDialog(true)\n  }, [])\n  const onClickEditWebhook = useCallback((webhook: Webhook) => {\n    setWebhookToUpdate(webhook)\n    setShowCreateModal(true)\n  }, [])\n  const onClickResendVerificationCode = useCallback(\n    (webhook: Webhook) => {\n      resendVerificationCode(webhook.id!)\n    },\n    [resendVerificationCode],\n  )\n\n  const columns = useMemo(\n    () =>\n      getWebhookTableColumns(\n        onClickVerifyWebhook,\n        onClickResendVerificationCode,\n        onClickEditWebhook,\n      ),\n    [onClickEditWebhook, onClickResendVerificationCode, onClickVerifyWebhook],\n  )\n\n  const webhookTable = useReactTable<Webhook>({\n    data: webhooks,\n    columns: columns,\n    state: {\n      columnVisibility: {\n        createdOn: !hideOptionalColumns,\n        modifiedOn: !hideOptionalColumns,\n      },\n    },\n    getCoreRowModel: getCoreRowModel(),\n  })\n\n  const isEmpty = !isLoading && webhookTable.getRowModel().rows.length === 0\n\n  return (\n    <div>\n      <WebhookVerificationDialog\n        key={webhookToUpdate?.id}\n        open={showVerificationDialog}\n        onClose={() => setShowVerificationDialog(false)}\n        webhookId={webhookToUpdate?.id!}\n      />\n      <Typography variant={'headline3'}>Webhook Dashboard</Typography>\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'row',\n          my: 2,\n          gap: 3,\n          justifyContent: 'space-between',\n          alignItems: 'flex-start',\n        }}\n      >\n        <div>\n          <Typography variant={'body1'} gutterBottom>\n            Webhooks can be used to programmatically receive alerts that are\n            triggered by events in Synapse. A webhook can specify a Synapse\n            entity to receive events related to that entity. For entities that\n            represent a container (folder and project), matching events are\n            published to the webhook endpoint for any entity in its hierarchy.\n          </Typography>\n          <Typography variant={'body1'} gutterBottom>\n            For more information, see the{' '}\n            <Link\n              href={\n                'http://dev.release.rest.doc.sagebase.org.s3-website-us-east-1.amazonaws.com/index.html#org.sagebionetworks.repo.web.controller.WebhookController'\n              }\n              target={'blank'}\n            >\n              Synapse API REST Docs section on Webhooks\n            </Link>\n            .\n          </Typography>\n        </div>\n        <Button\n          size=\"large\"\n          variant=\"contained\"\n          startIcon={<AddCircleTwoTone />}\n          onClick={() => {\n            setWebhookToUpdate(undefined)\n            setShowCreateModal(true)\n          }}\n          sx={{ flexShrink: 0 }}\n        >\n          Create Webhook\n        </Button>\n        <CreateWebhookModal\n          initialData={webhookToUpdate}\n          open={showCreateModal}\n          onClose={() => setShowCreateModal(false)}\n        />\n      </Box>\n      <InfiniteTableLayout\n        table={<StyledTanStackTable table={webhookTable} />}\n        isLoading={isLoading}\n        noResults={\n          <Typography variant=\"body1\">\n            You have not created any webhooks. Click &quot;Create Webhook&quot;\n            above to begin.\n          </Typography>\n        }\n        isEmpty={isEmpty}\n        hasNextPage={hasNextPage}\n        onFetchNextPageClicked={() => {\n          void fetchNextPage()\n        }}\n        isFetchingNextPage={isFetchingNextPage}\n      />\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"WebhookDashboard.js","names":[],"sources":["../../../src/components/Webhook/WebhookDashboard.tsx"],"sourcesContent":["import InfiniteTableLayout from '@/components/layout/InfiniteTableLayout'\nimport {\n  useGetWebhooksInfinite,\n  useResendVerificationCode,\n} from '@/synapse-queries/webhook/useWebhook'\nimport { formatDate } from '@/utils/functions/DateFormatter'\nimport { AddCircleTwoTone } from '@mui/icons-material'\nimport {\n  Box,\n  Button,\n  Link,\n  Stack,\n  Typography,\n  useMediaQuery,\n  useTheme,\n} from '@mui/material'\nimport {\n  SynapseObjectType,\n  Webhook,\n  WebhookVerificationStatus,\n} from '@sage-bionetworks/synapse-client'\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  useReactTable,\n} from '@tanstack/react-table'\nimport dayjs from 'dayjs'\nimport { upperFirst } from 'lodash-es'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { EntityLink } from '../EntityLink'\nimport { HelpPopover } from '../HelpPopover/HelpPopover'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\nimport CreateWebhookModal from './CreateWebhookModal'\nimport { WebhookVerificationDialog } from './WebhookVerificationDialog'\n\nconst WEBHOOK_CAN_RESEND_CODE_STATES: WebhookVerificationStatus[] = [\n  WebhookVerificationStatus.FAILED,\n  WebhookVerificationStatus.REVOKED,\n]\n\nconst columnHelper = createColumnHelper<Webhook>()\n\nfunction getWebhookTableColumns(\n  onClickVerifyWebhook: (webhook: Webhook) => void,\n  onClickResendVerificationCode: (webhook: Webhook) => void,\n  onClickEditWebhook: (webhook: Webhook) => void,\n) {\n  return [\n    columnHelper.accessor('id', {\n      header: 'ID',\n      size: 75,\n      cell: ctx => ctx.cell.getValue(),\n    }),\n    columnHelper.display({\n      header: 'Object',\n      cell: ctx => {\n        if (ctx.row.original.objectType === SynapseObjectType.ENTITY) {\n          return (\n            <>\n              <EntityLink entity={ctx.row.original.objectId!} /> (syn\n              {ctx.row.original.objectId})\n            </>\n          )\n        }\n        return `${ctx.row.original.objectType}: ${ctx.row.original.objectId}`\n      },\n    }),\n    columnHelper.accessor('eventTypes', {\n      header: 'Event Type(s)',\n      cell: ctx => (\n        <Stack>\n          {Array.from<string>(ctx.cell.getValue()!)\n            .map(s => s.toLowerCase())\n            .map(upperFirst)\n            .map(val => (\n              <span key={val}>{val}</span>\n            ))}\n        </Stack>\n      ),\n    }),\n    columnHelper.accessor('isEnabled', {\n      header: 'Enabled',\n      size: 10,\n      cell: ctx => (ctx.cell.getValue() ? 'Yes' : 'No'),\n    }),\n    columnHelper.accessor('createdOn', {\n      header: 'Created On',\n      cell: ({ getValue }) => formatDate(dayjs(getValue())),\n    }),\n    columnHelper.accessor('modifiedOn', {\n      header: 'Modified On',\n      cell: ({ getValue }) => formatDate(dayjs(getValue())),\n    }),\n    columnHelper.accessor('verificationStatus', {\n      header: 'Verification Status',\n      cell: ctx => (\n        <Stack\n          sx={{\n            flexDirection: 'row',\n            alignItems: 'center',\n            gap: 1,\n          }}\n        >\n          {ctx.row.original.verificationStatus === 'PENDING' && (\n            // useEffect above will trigger a refetch until this resolves\n            <SynapseSpinner size={20} />\n          )}\n          {ctx.row.original.verificationStatus !==\n            WebhookVerificationStatus.PENDING &&\n            upperFirst(\n              (ctx.row.original.verificationStatus || '')\n                .toLowerCase()\n                .replaceAll('_', ' '),\n            )}\n          {ctx.row.original.verificationMsg && (\n            <HelpPopover markdownText={ctx.row.original.verificationMsg} />\n          )}\n        </Stack>\n      ),\n    }),\n    columnHelper.display({\n      id: 'actions',\n      header: 'Actions',\n      size: 10,\n      meta: {\n        textAlign: 'right',\n      },\n      cell: ctx => (\n        <Stack\n          sx={{\n            flexDirection: 'row',\n            justifyContent: 'flex-end',\n            alignItems: 'center',\n            gap: 2,\n          }}\n        >\n          {ctx.row.original.verificationStatus ===\n            WebhookVerificationStatus.CODE_SENT && (\n            <Button\n              variant={'outlined'}\n              onClick={() => {\n                onClickVerifyWebhook(ctx.row.original)\n              }}\n            >\n              Verify code\n            </Button>\n          )}\n\n          {WEBHOOK_CAN_RESEND_CODE_STATES.includes(\n            ctx.row.original.verificationStatus as WebhookVerificationStatus,\n          ) && (\n            <Button\n              variant={'outlined'}\n              onClick={() => {\n                onClickResendVerificationCode(ctx.row.original)\n              }}\n            >\n              Resend code\n            </Button>\n          )}\n          <Button\n            size=\"small\"\n            variant=\"contained\"\n            onClick={() => {\n              onClickEditWebhook(ctx.row.original)\n            }}\n          >\n            Edit\n          </Button>\n        </Stack>\n      ),\n    }),\n  ]\n}\n\nexport default function WebhookDashboard() {\n  const [showCreateModal, setShowCreateModal] = useState(false)\n  const [showVerificationDialog, setShowVerificationDialog] = useState(false)\n  const [webhookToUpdate, setWebhookToUpdate] = useState<Webhook | undefined>(\n    undefined,\n  )\n\n  const theme = useTheme()\n  const hideOptionalColumns = useMediaQuery(theme.breakpoints.down('md'))\n\n  const {\n    data: infiniteData,\n    refetch,\n    hasNextPage,\n    fetchNextPage,\n    isFetchingNextPage,\n    isLoading,\n  } = useGetWebhooksInfinite()\n  const webhooks = useMemo(\n    () => infiniteData?.pages.flatMap(page => page.page!) ?? [],\n    [infiniteData],\n  )\n\n  // If the Webhook verification status is PENDING, Synapse may not have sent the verification code, or may have not reported a response.\n  // Refetch on an interval to check if the verification status has changed.\n  useEffect(() => {\n    let intervalId: NodeJS.Timeout\n    if (webhooks.some(webhook => webhook.verificationStatus === 'PENDING')) {\n      intervalId = setInterval(() => {\n        void refetch()\n      }, 2500)\n    }\n    return () => clearInterval(intervalId)\n  }, [refetch, webhooks])\n\n  const { mutate: resendVerificationCode } = useResendVerificationCode()\n\n  const onClickVerifyWebhook = useCallback((webhook: Webhook) => {\n    setWebhookToUpdate(webhook)\n    setShowVerificationDialog(true)\n  }, [])\n  const onClickEditWebhook = useCallback((webhook: Webhook) => {\n    setWebhookToUpdate(webhook)\n    setShowCreateModal(true)\n  }, [])\n  const onClickResendVerificationCode = useCallback(\n    (webhook: Webhook) => {\n      resendVerificationCode(webhook.id!)\n    },\n    [resendVerificationCode],\n  )\n\n  const columns = useMemo(\n    () =>\n      getWebhookTableColumns(\n        onClickVerifyWebhook,\n        onClickResendVerificationCode,\n        onClickEditWebhook,\n      ),\n    [onClickEditWebhook, onClickResendVerificationCode, onClickVerifyWebhook],\n  )\n\n  const webhookTable = useReactTable<Webhook>({\n    data: webhooks,\n    columns: columns,\n    state: {\n      columnVisibility: {\n        createdOn: !hideOptionalColumns,\n        modifiedOn: !hideOptionalColumns,\n      },\n    },\n    getCoreRowModel: getCoreRowModel(),\n  })\n\n  const isEmpty = !isLoading && webhookTable.getRowModel().rows.length === 0\n\n  return (\n    <div>\n      <WebhookVerificationDialog\n        key={webhookToUpdate?.id}\n        open={showVerificationDialog}\n        onClose={() => setShowVerificationDialog(false)}\n        webhookId={webhookToUpdate?.id!}\n      />\n      <Typography variant={'headline3'}>Webhook Dashboard</Typography>\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'row',\n          my: 2,\n          gap: 3,\n          justifyContent: 'space-between',\n          alignItems: 'flex-start',\n        }}\n      >\n        <div>\n          <Typography variant={'body1'} gutterBottom>\n            Webhooks can be used to programmatically receive alerts that are\n            triggered by events in Synapse. A webhook can specify a Synapse\n            entity to receive events related to that entity. For entities that\n            represent a container (folder and project), matching events are\n            published to the webhook endpoint for any entity in its hierarchy.\n          </Typography>\n          <Typography variant={'body1'} gutterBottom>\n            For more information, see the{' '}\n            <Link\n              href={\n                'http://dev.release.rest.doc.sagebase.org.s3-website-us-east-1.amazonaws.com/index.html#org.sagebionetworks.repo.web.controller.WebhookController'\n              }\n              target={'blank'}\n            >\n              Synapse API REST Docs section on Webhooks\n            </Link>\n            .\n          </Typography>\n        </div>\n        <Button\n          size=\"large\"\n          variant=\"contained\"\n          startIcon={<AddCircleTwoTone />}\n          onClick={() => {\n            setWebhookToUpdate(undefined)\n            setShowCreateModal(true)\n          }}\n          sx={{ flexShrink: 0 }}\n        >\n          Create Webhook\n        </Button>\n        <CreateWebhookModal\n          initialData={webhookToUpdate}\n          open={showCreateModal}\n          onClose={() => setShowCreateModal(false)}\n        />\n      </Box>\n      <InfiniteTableLayout\n        table={<StyledTanStackTable table={webhookTable} />}\n        isLoading={isLoading}\n        noResults={\n          <Typography variant=\"body1\">\n            You have not created any webhooks. Click &quot;Create Webhook&quot;\n            above to begin.\n          </Typography>\n        }\n        isEmpty={isEmpty}\n        hasNextPage={hasNextPage}\n        onFetchNextPageClicked={() => {\n          void fetchNextPage()\n        }}\n        isFetchingNextPage={isFetchingNextPage}\n      />\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/Webhook/WebhookVerificationDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"WebhookVerificationDialog.js","names":[],"sources":["../../../src/components/Webhook/WebhookVerificationDialog.tsx"],"sourcesContent":["import { useVerifyWebhook } from '@/synapse-queries/webhook/useWebhook'\nimport { Alert, TextField, Typography } from '@mui/material'\nimport { useState } from 'react'\nimport { ConfirmationDialog } from '../ConfirmationDialog/ConfirmationDialog'\nimport { displayToast } from '../ToastMessage'\n\ntype WebhookVerificationDialogProps = {\n  open: boolean\n  onClose: () => void\n  webhookId: string\n}\n\nexport function WebhookVerificationDialog(\n  props: WebhookVerificationDialogProps,\n) {\n  const { open, onClose } = props\n  const [verificationCode, setVerificationCode] = useState('')\n\n  const { mutate, isPending, error } = useVerifyWebhook({\n    onSuccess: response => {\n      if (response.isValid) {\n        displayToast('Webhook verified', 'success')\n      } else {\n        displayToast(\n          `Webhook was not verified: ${response.invalidReason}`,\n          'danger',\n        )\n      }\n      onClose()\n    },\n  })\n\n  return (\n    <ConfirmationDialog\n      title={'Verify Webhook'}\n      onCancel={() => {\n        if (!isPending) {\n          onClose()\n        }\n      }}\n      open={open}\n      content={\n        <>\n          <Typography variant=\"body1\" gutterBottom>\n            Enter the code sent to your webhook to verify it. Once the webhook\n            has been verified, Synapse will start sending the events you chose\n            to your webhook endpoint.\n          </Typography>\n          <TextField\n            label={'Verification code'}\n            value={verificationCode}\n            onChange={e => setVerificationCode(e.target.value)}\n            sx={{ mt: 1 }}\n          />\n          {error && (\n            <Alert severity=\"error\" sx={{ mt: 2 }}>\n              {error.reason}\n            </Alert>\n          )}\n        </>\n      }\n      onConfirm={() => {\n        mutate({\n          webhookId: props.webhookId,\n          verifyWebhookRequest: { verificationCode },\n        })\n      }}\n      confirmButtonProps={{\n        children: 'Verify',\n        disabled: isPending,\n      }}\n      cancelButtonProps={{\n        disabled: isPending,\n      }}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,EACd,GACA;CACA,IAAM,EAAE,SAAM,eAAY,GACpB,CAAC,GAAkB,KAAuB,EAAS,GAAG,EAEtD,EAAE,WAAQ,cAAW,aAAU,EAAiB,EACpD,YAAW,MAAY;AASrB,EARI,EAAS,UACX,EAAa,oBAAoB,UAAU,GAE3C,EACE,6BAA6B,EAAS,iBACtC,SACD,EAEH,GAAS;IAEZ,CAAC;AAEF,QACE,kBAAC,GAAD;EACE,OAAO;EACP,gBAAgB;AACd,GAAK,KACH,GAAS;;EAGP;EACN,SACE,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,GAAD;IAAY,SAAQ;IAAQ,cAAA;cAAa;IAI5B,CAAA;GACb,kBAAC,GAAD;IACE,OAAO;IACP,OAAO;IACP,WAAU,MAAK,EAAoB,EAAE,OAAO,MAAM;IAClD,IAAI,EAAE,IAAI,GAAG;IACb,CAAA;GACD,KACC,kBAAC,GAAD;IAAO,UAAS;IAAQ,IAAI,EAAE,IAAI,GAAG;cAClC,EAAM;IACD,CAAA;GAET,EAAA,CAAA;EAEL,iBAAiB;AACf,KAAO;IACL,WAAW,EAAM;IACjB,sBAAsB,EAAE,qBAAkB;IAC3C,CAAC;;EAEJ,oBAAoB;GAClB,UAAU;GACV,UAAU;GACX;EACD,mBAAmB,EACjB,UAAU,GACX;EACD,CAAA"}
+{"version":3,"file":"WebhookVerificationDialog.js","names":[],"sources":["../../../src/components/Webhook/WebhookVerificationDialog.tsx"],"sourcesContent":["import { useVerifyWebhook } from '@/synapse-queries/webhook/useWebhook'\nimport { Alert, TextField, Typography } from '@mui/material'\nimport { useState } from 'react'\nimport { ConfirmationDialog } from '../ConfirmationDialog/ConfirmationDialog'\nimport { displayToast } from '../ToastMessage'\n\ntype WebhookVerificationDialogProps = {\n  open: boolean\n  onClose: () => void\n  webhookId: string\n}\n\nexport function WebhookVerificationDialog(\n  props: WebhookVerificationDialogProps,\n) {\n  const { open, onClose } = props\n  const [verificationCode, setVerificationCode] = useState('')\n\n  const { mutate, isPending, error } = useVerifyWebhook({\n    onSuccess: response => {\n      if (response.isValid) {\n        displayToast('Webhook verified', 'success')\n      } else {\n        displayToast(\n          `Webhook was not verified: ${response.invalidReason}`,\n          'danger',\n        )\n      }\n      onClose()\n    },\n  })\n\n  return (\n    <ConfirmationDialog\n      title={'Verify Webhook'}\n      onCancel={() => {\n        if (!isPending) {\n          onClose()\n        }\n      }}\n      open={open}\n      content={\n        <>\n          <Typography variant=\"body1\" gutterBottom>\n            Enter the code sent to your webhook to verify it. Once the webhook\n            has been verified, Synapse will start sending the events you chose\n            to your webhook endpoint.\n          </Typography>\n          <TextField\n            label={'Verification code'}\n            value={verificationCode}\n            onChange={e => setVerificationCode(e.target.value)}\n            sx={{ mt: 1 }}\n          />\n          {error && (\n            <Alert severity=\"error\" sx={{ mt: 2 }}>\n              {error.reason}\n            </Alert>\n          )}\n        </>\n      }\n      onConfirm={() => {\n        mutate({\n          webhookId: props.webhookId,\n          verifyWebhookRequest: { verificationCode },\n        })\n      }}\n      confirmButtonProps={{\n        children: 'Verify',\n        disabled: isPending,\n      }}\n      cancelButtonProps={{\n        disabled: isPending,\n      }}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,EACd,GACA;CACA,IAAM,EAAE,SAAM,eAAY,GACpB,CAAC,GAAkB,KAAuB,EAAS,EAAE,GAErD,EAAE,WAAQ,cAAW,aAAU,EAAiB,EACpD,YAAW,MAAY;EASrB,AARI,EAAS,UACX,EAAa,oBAAoB,SAAS,IAE1C,EACE,6BAA6B,EAAS,iBACtC,QACF,GAEF,EAAQ;CACV,EACF,CAAC;CAED,OACE,kBAAC,GAAD;EACE,OAAO;EACP,gBAAgB;GACd,AAAK,KACH,EAAQ;EAEZ;EACM;EACN,SACE,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,GAAD;IAAY,SAAQ;IAAQ,cAAA;cAAa;GAI7B,CAAA;GACZ,kBAAC,GAAD;IACE,OAAO;IACP,OAAO;IACP,WAAU,MAAK,EAAoB,EAAE,OAAO,KAAK;IACjD,IAAI,EAAE,IAAI,EAAE;GACb,CAAA;GACA,KACC,kBAAC,GAAD;IAAO,UAAS;IAAQ,IAAI,EAAE,IAAI,EAAE;cACjC,EAAM;GACF,CAAA;EAET,EAAA,CAAA;EAEJ,iBAAiB;GACf,EAAO;IACL,WAAW,EAAM;IACjB,sBAAsB,EAAE,oBAAiB;GAC3C,CAAC;EACH;EACA,oBAAoB;GAClB,UAAU;GACV,UAAU;EACZ;EACA,mBAAmB,EACjB,UAAU,EACZ;CACD,CAAA;AAEL"}

package/dist/components/WikiMarkdownEditor/WikiMarkdownEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"WikiMarkdownEditor.js","names":[],"sources":["../../../src/components/WikiMarkdownEditor/WikiMarkdownEditor.tsx"],"sourcesContent":["import { UpdateWikiPageInput, useUpdateWikiPage } from '@/synapse-queries'\nimport { Alert, Box, Button, TextField } from '@mui/material'\nimport { ObjectType, WikiPage } from '@sage-bionetworks/synapse-types'\nimport { noop } from 'lodash-es'\nimport { useState } from 'react'\nimport ConfirmationDialog from '../ConfirmationDialog'\nimport { DialogBase } from '../DialogBase'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport { MarkdownEditor } from '../Markdown/MarkdownEditor'\n\nexport const UNSAVED_CHANGES = 'Unsaved Changes'\nexport const NAVIGATE_AWAY_CONFIRMATION_MESSAGE =\n  'Any unsaved changes may be lost. Are you sure that you would like to navigate away from this editor?'\nexport const ERROR_SAVING_WIKI =\n  'Could not save your changes. It is recommended that you copy your version of the wiki text so that it is not lost. '\n\nexport type WikiMarkdownEditorProps = {\n  open: boolean\n  ownerObjectType: ObjectType\n  ownerObjectId: string\n  wikiPage: WikiPage\n  onCancel?: () => void\n  onSave?: () => void\n  // TODO: SWC-6774 - expose delete prop\n  // showDeleteButton: boolean\n}\n\nexport function WikiMarkdownEditor(props: WikiMarkdownEditorProps) {\n  // TODO: SWC-6774 - get showDeleteButton from props\n  const showDeleteButton = false\n  const {\n    open,\n    ownerObjectId,\n    ownerObjectType,\n    wikiPage,\n    onCancel = noop,\n    onSave = noop,\n  } = props\n\n  const [title, setTitle] = useState<string>(wikiPage.title)\n  const [markdown, setMarkdown] = useState<string>(wikiPage.markdown)\n  const [showConfirmCancelDialog, setShowConfirmDialog] =\n    useState<boolean>(false)\n\n  const handleCancel = () => {\n    if (wikiPage && wikiPage.markdown !== markdown) {\n      setShowConfirmDialog(true)\n    } else {\n      onCancel()\n    }\n  }\n\n  const {\n    mutate: updateWikiPage,\n    isPending: isUpdatingWikiPage,\n    error: errorUpdatingWikiPage,\n  } = useUpdateWikiPage({\n    onSuccess: () => onSave(),\n  })\n\n  return (\n    <DialogBase\n      open={open}\n      onCancel={handleCancel}\n      maxWidth={'xl'}\n      fullWidth={true}\n      title=\"Edit Wiki Markdown\"\n      content={\n        <>\n          {isUpdatingWikiPage && <SynapseSpinner />}\n          {wikiPage && (\n            <>\n              {wikiPage.parentWikiId && (\n                <TextField\n                  label=\"Title\"\n                  placeholder=\"Title\"\n                  fullWidth\n                  sx={{ mb: 2 }}\n                  value={title}\n                  onChange={e => setTitle(e.target.value)}\n                />\n              )}\n              <MarkdownEditor text={markdown} setText={setMarkdown} />\n              <ConfirmationDialog\n                open={showConfirmCancelDialog}\n                title={UNSAVED_CHANGES}\n                content={NAVIGATE_AWAY_CONFIRMATION_MESSAGE}\n                onCancel={() => setShowConfirmDialog(false)}\n                onConfirm={() => {\n                  setShowConfirmDialog(false)\n                  onCancel()\n                }}\n              />\n            </>\n          )}\n          {errorUpdatingWikiPage && (\n            <Alert severity=\"error\">\n              {ERROR_SAVING_WIKI + errorUpdatingWikiPage.reason}\n            </Alert>\n          )}\n        </>\n      }\n      actions={\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'row-reverse',\n            justifyContent: 'space-between',\n            width: '100%',\n          }}\n        >\n          <Box\n            sx={{\n              display: 'flex',\n              gap: 1,\n            }}\n          >\n            <Button\n              variant=\"outlined\"\n              disabled={isUpdatingWikiPage}\n              onClick={handleCancel}\n            >\n              Cancel\n            </Button>\n            <Button\n              variant=\"contained\"\n              color=\"primary\"\n              disabled={isUpdatingWikiPage}\n              onClick={() => {\n                if (wikiPage) {\n                  const input: UpdateWikiPageInput = {\n                    ownerObjectId,\n                    ownerObjectType,\n                    wikiPage: { ...wikiPage, title: title, markdown: markdown },\n                  }\n                  updateWikiPage(input)\n                }\n              }}\n            >\n              {isUpdatingWikiPage ? 'Saving...' : 'Save'}\n            </Button>\n          </Box>\n          {showDeleteButton && (\n            <Button\n              variant=\"contained\"\n              color=\"error\"\n              disabled={isUpdatingWikiPage}\n              onClick={() => {\n                // TODO: SWC-6774 - implement delete functionality\n              }}\n            >\n              Delete Page\n            </Button>\n          )}\n        </Box>\n      }\n    />\n  )\n}\n\nexport default WikiMarkdownEditor\n"],"mappings":";;;;;;;;;;;AAUA,IAAa,IAAkB,mBAClB,IACX,wGACW,IACX;AAaF,SAAgB,EAAmB,GAAgC;CAEjE,IACM,EACJ,SACA,kBACA,oBACA,aACA,cAAW,GACX,YAAS,MACP,GAEE,CAAC,GAAO,KAAY,EAAiB,EAAS,MAAM,EACpD,CAAC,GAAU,KAAe,EAAiB,EAAS,SAAS,EAC7D,CAAC,GAAyB,KAC9B,EAAkB,GAAM,EAEpB,UAAqB;AACzB,EAAI,KAAY,EAAS,aAAa,IACpC,EAAqB,GAAK,GAE1B,GAAU;IAIR,EACJ,QAAQ,GACR,WAAW,GACX,OAAO,MACL,EAAkB,EACpB,iBAAiB,GAAQ,EAC1B,CAAC;AAEF,QACE,kBAAC,GAAD;EACQ;EACN,UAAU;EACV,UAAU;EACV,WAAW;EACX,OAAM;EACN,SACE,kBAAA,GAAA,EAAA,UAAA;GACG,KAAsB,kBAAC,GAAD,EAAkB,CAAA;GACxC,KACC,kBAAA,GAAA,EAAA,UAAA;IACG,EAAS,gBACR,kBAAC,GAAD;KACE,OAAM;KACN,aAAY;KACZ,WAAA;KACA,IAAI,EAAE,IAAI,GAAG;KACb,OAAO;KACP,WAAU,MAAK,EAAS,EAAE,OAAO,MAAM;KACvC,CAAA;IAEJ,kBAAC,GAAD;KAAgB,MAAM;KAAU,SAAS;KAAe,CAAA;IACxD,kBAAC,GAAD;KACE,MAAM;KACN,OAAA;KACA,SAAA;KACA,gBAAgB,EAAqB,GAAM;KAC3C,iBAAiB;AAEf,MADA,EAAqB,GAAM,EAC3B,GAAU;;KAEZ,CAAA;IACD,EAAA,CAAA;GAEJ,KACC,kBAAC,GAAD;IAAO,UAAS;sIACO,EAAsB;IACrC,CAAA;GAET,EAAA,CAAA;EAEL,SACE,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT,eAAe;IACf,gBAAgB;IAChB,OAAO;IACR;aANH,CAQE,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,KAAK;KACN;cAJH,CAME,kBAAC,GAAD;KACE,SAAQ;KACR,UAAU;KACV,SAAS;eACV;KAEQ,CAAA,EACT,kBAAC,GAAD;KACE,SAAQ;KACR,OAAM;KACN,UAAU;KACV,eAAe;AACb,MAAI,KAMF,EAAe;OAJb;OACA;OACA,UAAU;QAAE,GAAG;QAAiB;QAAiB;QAAU;OAE9C,CAAM;;eAIxB,IAAqB,cAAc;KAC7B,CAAA,CACL;OACL,GAYG;;EAER,CAAA"}
+{"version":3,"file":"WikiMarkdownEditor.js","names":[],"sources":["../../../src/components/WikiMarkdownEditor/WikiMarkdownEditor.tsx"],"sourcesContent":["import { UpdateWikiPageInput, useUpdateWikiPage } from '@/synapse-queries'\nimport { Alert, Box, Button, TextField } from '@mui/material'\nimport { ObjectType, WikiPage } from '@sage-bionetworks/synapse-types'\nimport { noop } from 'lodash-es'\nimport { useState } from 'react'\nimport ConfirmationDialog from '../ConfirmationDialog'\nimport { DialogBase } from '../DialogBase'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport { MarkdownEditor } from '../Markdown/MarkdownEditor'\n\nexport const UNSAVED_CHANGES = 'Unsaved Changes'\nexport const NAVIGATE_AWAY_CONFIRMATION_MESSAGE =\n  'Any unsaved changes may be lost. Are you sure that you would like to navigate away from this editor?'\nexport const ERROR_SAVING_WIKI =\n  'Could not save your changes. It is recommended that you copy your version of the wiki text so that it is not lost. '\n\nexport type WikiMarkdownEditorProps = {\n  open: boolean\n  ownerObjectType: ObjectType\n  ownerObjectId: string\n  wikiPage: WikiPage\n  onCancel?: () => void\n  onSave?: () => void\n  // TODO: SWC-6774 - expose delete prop\n  // showDeleteButton: boolean\n}\n\nexport function WikiMarkdownEditor(props: WikiMarkdownEditorProps) {\n  // TODO: SWC-6774 - get showDeleteButton from props\n  const showDeleteButton = false\n  const {\n    open,\n    ownerObjectId,\n    ownerObjectType,\n    wikiPage,\n    onCancel = noop,\n    onSave = noop,\n  } = props\n\n  const [title, setTitle] = useState<string>(wikiPage.title)\n  const [markdown, setMarkdown] = useState<string>(wikiPage.markdown)\n  const [showConfirmCancelDialog, setShowConfirmDialog] =\n    useState<boolean>(false)\n\n  const handleCancel = () => {\n    if (wikiPage && wikiPage.markdown !== markdown) {\n      setShowConfirmDialog(true)\n    } else {\n      onCancel()\n    }\n  }\n\n  const {\n    mutate: updateWikiPage,\n    isPending: isUpdatingWikiPage,\n    error: errorUpdatingWikiPage,\n  } = useUpdateWikiPage({\n    onSuccess: () => onSave(),\n  })\n\n  return (\n    <DialogBase\n      open={open}\n      onCancel={handleCancel}\n      maxWidth={'xl'}\n      fullWidth={true}\n      title=\"Edit Wiki Markdown\"\n      content={\n        <>\n          {isUpdatingWikiPage && <SynapseSpinner />}\n          {wikiPage && (\n            <>\n              {wikiPage.parentWikiId && (\n                <TextField\n                  label=\"Title\"\n                  placeholder=\"Title\"\n                  fullWidth\n                  sx={{ mb: 2 }}\n                  value={title}\n                  onChange={e => setTitle(e.target.value)}\n                />\n              )}\n              <MarkdownEditor text={markdown} setText={setMarkdown} />\n              <ConfirmationDialog\n                open={showConfirmCancelDialog}\n                title={UNSAVED_CHANGES}\n                content={NAVIGATE_AWAY_CONFIRMATION_MESSAGE}\n                onCancel={() => setShowConfirmDialog(false)}\n                onConfirm={() => {\n                  setShowConfirmDialog(false)\n                  onCancel()\n                }}\n              />\n            </>\n          )}\n          {errorUpdatingWikiPage && (\n            <Alert severity=\"error\">\n              {ERROR_SAVING_WIKI + errorUpdatingWikiPage.reason}\n            </Alert>\n          )}\n        </>\n      }\n      actions={\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'row-reverse',\n            justifyContent: 'space-between',\n            width: '100%',\n          }}\n        >\n          <Box\n            sx={{\n              display: 'flex',\n              gap: 1,\n            }}\n          >\n            <Button\n              variant=\"outlined\"\n              disabled={isUpdatingWikiPage}\n              onClick={handleCancel}\n            >\n              Cancel\n            </Button>\n            <Button\n              variant=\"contained\"\n              color=\"primary\"\n              disabled={isUpdatingWikiPage}\n              onClick={() => {\n                if (wikiPage) {\n                  const input: UpdateWikiPageInput = {\n                    ownerObjectId,\n                    ownerObjectType,\n                    wikiPage: { ...wikiPage, title: title, markdown: markdown },\n                  }\n                  updateWikiPage(input)\n                }\n              }}\n            >\n              {isUpdatingWikiPage ? 'Saving...' : 'Save'}\n            </Button>\n          </Box>\n          {showDeleteButton && (\n            <Button\n              variant=\"contained\"\n              color=\"error\"\n              disabled={isUpdatingWikiPage}\n              onClick={() => {\n                // TODO: SWC-6774 - implement delete functionality\n              }}\n            >\n              Delete Page\n            </Button>\n          )}\n        </Box>\n      }\n    />\n  )\n}\n\nexport default WikiMarkdownEditor\n"],"mappings":";;;;;;;;;;;AAUA,IAAa,IAAkB,mBAClB,IACX,wGACW,IACX;AAaF,SAAgB,EAAmB,GAAgC;CAEjE,IACM,EACJ,SACA,kBACA,oBACA,aACA,cAAW,GACX,YAAS,MACP,GAEE,CAAC,GAAO,KAAY,EAAiB,EAAS,KAAK,GACnD,CAAC,GAAU,KAAe,EAAiB,EAAS,QAAQ,GAC5D,CAAC,GAAyB,KAC9B,EAAkB,EAAK,GAEnB,UAAqB;EACzB,AAAI,KAAY,EAAS,aAAa,IACpC,EAAqB,EAAI,IAEzB,EAAS;CAEb,GAEM,EACJ,QAAQ,GACR,WAAW,GACX,OAAO,MACL,EAAkB,EACpB,iBAAiB,EAAO,EAC1B,CAAC;CAED,OACE,kBAAC,GAAD;EACQ;EACN,UAAU;EACV,UAAU;EACV,WAAW;EACX,OAAM;EACN,SACE,kBAAA,GAAA,EAAA,UAAA;GACG,KAAsB,kBAAC,GAAD,CAAiB,CAAA;GACvC,KACC,kBAAA,GAAA,EAAA,UAAA;IACG,EAAS,gBACR,kBAAC,GAAD;KACE,OAAM;KACN,aAAY;KACZ,WAAA;KACA,IAAI,EAAE,IAAI,EAAE;KACZ,OAAO;KACP,WAAU,MAAK,EAAS,EAAE,OAAO,KAAK;IACvC,CAAA;IAEH,kBAAC,GAAD;KAAgB,MAAM;KAAU,SAAS;IAAc,CAAA;IACvD,kBAAC,GAAD;KACE,MAAM;KACN,OAAA;KACA,SAAA;KACA,gBAAgB,EAAqB,EAAK;KAC1C,iBAAiB;MAEf,AADA,EAAqB,EAAK,GAC1B,EAAS;KACX;IACD,CAAA;GACD,EAAA,CAAA;GAEH,KACC,kBAAC,GAAD;IAAO,UAAS;sIACO,EAAsB;GACtC,CAAA;EAET,EAAA,CAAA;EAEJ,SACE,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT,eAAe;IACf,gBAAgB;IAChB,OAAO;GACT;aANF,CAQE,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,KAAK;IACP;cAJF,CAME,kBAAC,GAAD;KACE,SAAQ;KACR,UAAU;KACV,SAAS;eACV;IAEO,CAAA,GACR,kBAAC,GAAD;KACE,SAAQ;KACR,OAAM;KACN,UAAU;KACV,eAAe;MACb,AAAI,KAMF,EAAe;OAJb;OACA;OACA,UAAU;QAAE,GAAG;QAAiB;QAAiB;OAAS;MAE7C,CAAK;KAExB;eAEC,IAAqB,cAAc;IAC9B,CAAA,CACL;OACJ,EAYE;;CAER,CAAA;AAEL"}

package/dist/components/WikiMarkdownEditorButton/WikiMarkdownEditorButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"WikiMarkdownEditorButton.js","names":[],"sources":["../../../src/components/WikiMarkdownEditorButton/WikiMarkdownEditorButton.tsx"],"sourcesContent":["import {\n  CreateWikiPageInput,\n  useCreateWikiPage,\n  useGetRootWikiPageKey,\n  useGetWikiPage,\n} from '@/synapse-queries'\nimport { Alert, Box, Button, ButtonProps } from '@mui/material'\nimport { ObjectType, WikiPageKey } from '@sage-bionetworks/synapse-types'\nimport { defaults } from 'lodash-es'\nimport { useMemo, useState } from 'react'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport MarkdownSynapse, {\n  MarkdownSynapseProps,\n} from '../Markdown/MarkdownSynapse'\nimport WikiMarkdownEditor from '../WikiMarkdownEditor/WikiMarkdownEditor'\n\nexport const ERROR_LOADING_WIKI_FAILED = 'Failed to load the wiki page: '\nexport const DEFAULT_BUTTON_TEXT = 'Edit Wiki Page'\nconst DEFAULT_BUTTON_PROPS: Omit<ButtonProps, 'onClick'> = {\n  children: DEFAULT_BUTTON_TEXT,\n  color: 'primary',\n  variant: 'contained',\n}\n\nexport type WikiMarkdownEditorButtonProps = {\n  ownerObjectType: ObjectType\n  ownerObjectId: string\n  // if wikiPageId is undefined, will get (or create) the root WikiPage for this ownerObject\n  // otherwise, will get the WikiPage with the specified wikiPageId\n  wikiPageId?: string\n  buttonProps?: Omit<ButtonProps, 'onClick' | 'disabled'>\n  displayWikiMarkdown?: boolean\n}\n\nexport function WikiMarkdownEditorButton(props: WikiMarkdownEditorButtonProps) {\n  const {\n    ownerObjectType,\n    ownerObjectId,\n    wikiPageId: initialWikiPageId,\n    displayWikiMarkdown = false,\n  } = props\n\n  const buttonProps: Omit<ButtonProps, 'onClick' | 'disabled'> = defaults(\n    {},\n    props.buttonProps,\n    DEFAULT_BUTTON_PROPS,\n  )\n\n  const [open, setOpen] = useState<boolean>(false)\n\n  const {\n    data: rootWikiPageKey,\n    isLoading: isLoadingRootWikiPageKey,\n    error: errorLoadingRootWikiPageKey,\n  } = useGetRootWikiPageKey(ownerObjectType, ownerObjectId, {\n    enabled: initialWikiPageId === undefined,\n  })\n\n  const {\n    mutate: createWikiPage,\n    isPending: isCreatingWikiPage,\n    error: errorCreatingWikiPage,\n  } = useCreateWikiPage({\n    onSuccess: () => setOpen(true),\n  })\n\n  const wikiPageKey = useMemo(() => {\n    const wikiPageId = initialWikiPageId || rootWikiPageKey?.wikiPageId || ''\n    const wikiPageKey: WikiPageKey = {\n      ownerObjectType,\n      ownerObjectId,\n      wikiPageId: wikiPageId,\n    }\n    return wikiPageKey\n  }, [initialWikiPageId, rootWikiPageKey, ownerObjectId, ownerObjectType])\n\n  const {\n    data: wikiPage,\n    isLoading: isLoadingWikiPage,\n    error: errorLoadingWikiPage,\n  } = useGetWikiPage(wikiPageKey, {\n    enabled: wikiPageKey.wikiPageId !== '',\n    // Set staleTime to infinity to prevent re-fetching while editing\n    staleTime: Infinity,\n  })\n\n  const error = useMemo(() => {\n    if (errorLoadingRootWikiPageKey) {\n      return ERROR_LOADING_WIKI_FAILED + errorLoadingRootWikiPageKey.reason\n    }\n    if (errorLoadingWikiPage) {\n      return ERROR_LOADING_WIKI_FAILED + errorLoadingWikiPage.reason\n    }\n    if (errorCreatingWikiPage) {\n      return errorCreatingWikiPage.reason\n    }\n    return null\n  }, [errorLoadingRootWikiPageKey, errorLoadingWikiPage, errorCreatingWikiPage])\n\n  const handleClick = () => {\n    if (wikiPage) {\n      setOpen(true)\n    } else if (rootWikiPageKey === null) {\n      // root WikiPageKey was not found,\n      // then create a root WikiPage for this ownerObject\n      const rootWikiPage: CreateWikiPageInput['wikiPage'] = {\n        parentWikiId: undefined,\n        title: '',\n        markdown: '',\n        attachmentFileHandleIds: [],\n      }\n      const input: CreateWikiPageInput = {\n        ownerObjectId,\n        ownerObjectType,\n        wikiPage: rootWikiPage,\n      }\n      createWikiPage(input)\n    } else {\n      // Should only reach this block if there was:\n      //  - a non-404 error fetching the root WikiPageKey\n      //  - an error fetching a specific wikiPage\n      // Otherwise the button should be disabled.\n      console.warn(\n        'There was an error fetching the root WikiPageKey or WikiPage - address that error first.',\n      )\n    }\n  }\n\n  /* TODO - pass ownerId, objectType, wikiId directly to MarkdownSynapse after\n  MarkdownSynapse is updated to fetch root WikiPages for ACCESS_REQUIREMENT object types.\n  See https://sagebionetworks.jira.com/browse/SWC-6791. */\n  const markdownSynapseProps = useMemo(() => {\n    const markdownSynapseProps: MarkdownSynapseProps = {\n      showPlaceholderIfNoWikiContent: true,\n    }\n    if (wikiPage) {\n      return {\n        ...markdownSynapseProps,\n        ownerId: ownerObjectId,\n        objectType: ownerObjectType,\n        wikiId: wikiPage.id,\n      }\n    } else {\n      // use a placeholder value for markdown so that MarkdownSynapse\n      // displays no content placeholder for owners without root wiki pages\n      return { ...markdownSynapseProps, markdown: '' }\n    }\n  }, [ownerObjectId, ownerObjectType, wikiPage])\n\n  return (\n    <>\n      {displayWikiMarkdown && (\n        <Box\n          sx={{\n            mb: 1,\n          }}\n        >\n          {isLoadingWikiPage || isLoadingRootWikiPageKey ? (\n            <SynapseSpinner />\n          ) : (\n            // TODO - remove key once MarkdownSynapse uses tanstack-query\n            <MarkdownSynapse\n              key={wikiPage?.markdown}\n              {...markdownSynapseProps}\n            />\n          )}\n        </Box>\n      )}\n      <Button\n        onClick={handleClick}\n        disabled={\n          isLoadingWikiPage || isLoadingRootWikiPageKey || isCreatingWikiPage\n        }\n        {...buttonProps}\n      />\n      {error && (\n        <Alert severity=\"error\" sx={{ marginTop: 2 }}>\n          {error}\n        </Alert>\n      )}\n      {wikiPage && (\n        <WikiMarkdownEditor\n          // Specify a key so that uncommitted changes in WikiMarkdownEditor\n          // are not displayed when editor is re-opened\n          key={open.toString()}\n          open={open}\n          ownerObjectType={ownerObjectType}\n          ownerObjectId={ownerObjectId}\n          wikiPage={wikiPage}\n          onSave={() => setOpen(false)}\n          onCancel={() => setOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nexport default WikiMarkdownEditorButton\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,IAA4B,kCAC5B,IAAsB,kBAC7B,IAAqD;CACzD,UAAU;CACV,OAAO;CACP,SAAS;CACV;AAYD,SAAgB,EAAyB,GAAsC;CAC7E,IAAM,EACJ,oBACA,kBACA,YAAY,GACZ,yBAAsB,OACpB,GAEE,IAAyD,EAC7D,EAAE,EACF,EAAM,aACN,EACD,EAEK,CAAC,GAAM,KAAW,EAAkB,GAAM,EAE1C,EACJ,MAAM,GACN,WAAW,GACX,OAAO,MACL,EAAsB,GAAiB,GAAe,EACxD,SAAS,MAAsB,KAAA,GAChC,CAAC,EAEI,EACJ,QAAQ,GACR,WAAW,GACX,OAAO,MACL,EAAkB,EACpB,iBAAiB,EAAQ,GAAK,EAC/B,CAAC,EAEI,IAAc,SAOX;EAJL;EACA;EACY,YAJK,KAAqB,GAAiB,cAAc;EAMhE,GACN;EAAC;EAAmB;EAAiB;EAAe;EAAgB,CAAC,EAElE,EACJ,MAAM,GACN,WAAW,GACX,OAAO,MACL,EAAe,GAAa;EAC9B,SAAS,EAAY,eAAe;EAEpC,WAAW;EACZ,CAAC,EAEI,IAAQ,QACR,IACK,IAA4B,EAA4B,SAE7D,IACK,IAA4B,EAAqB,SAEtD,IACK,EAAsB,SAExB,MACN;EAAC;EAA6B;EAAsB;EAAsB,CAAC,EAExE,UAAoB;AACxB,EAAI,IACF,EAAQ,GAAK,GACJ,MAAoB,OAc7B,EAAe;GAJb;GACA;GACA,UAAU;IARV,cAAc,KAAA;IACd,OAAO;IACP,UAAU;IACV,yBAAyB,EAAE;IAKjB;GAEG,CAAM,GAMrB,QAAQ,KACN,2FACD;IAOC,IAAuB,QAAc;EACzC,IAAM,IAA6C,EACjD,gCAAgC,IACjC;AAWC,SAVE,IACK;GACL,GAAG;GACH,SAAS;GACT,YAAY;GACZ,QAAQ,EAAS;GAClB,GAIM;GAAE,GAAG;GAAsB,UAAU;GAAI;IAEjD;EAAC;EAAe;EAAiB;EAAS,CAAC;AAE9C,QACE,kBAAA,GAAA,EAAA,UAAA;EACG,KACC,kBAAC,GAAD;GACE,IAAI,EACF,IAAI,GACL;aAEA,KAAqB,IACpB,kBAAC,GAAD,EAAkB,CAAA,GAGlB,kBAAC,GAAD,EAEE,GAAI,GACJ,EAFK,GAAU,SAEf;GAEA,CAAA;EAER,kBAAC,GAAD;GACE,SAAS;GACT,UACE,KAAqB,KAA4B;GAEnD,GAAI;GACJ,CAAA;EACD,KACC,kBAAC,GAAD;GAAO,UAAS;GAAQ,IAAI,EAAE,WAAW,GAAG;aACzC;GACK,CAAA;EAET,KACC,kBAAC,GAAD;GAIQ;GACW;GACF;GACL;GACV,cAAc,EAAQ,GAAM;GAC5B,gBAAgB,EAAQ,GAAM;GAC9B,EAPK,EAAK,UAAU,CAOpB;EAEH,EAAA,CAAA"}
+{"version":3,"file":"WikiMarkdownEditorButton.js","names":[],"sources":["../../../src/components/WikiMarkdownEditorButton/WikiMarkdownEditorButton.tsx"],"sourcesContent":["import {\n  CreateWikiPageInput,\n  useCreateWikiPage,\n  useGetRootWikiPageKey,\n  useGetWikiPage,\n} from '@/synapse-queries'\nimport { Alert, Box, Button, ButtonProps } from '@mui/material'\nimport { ObjectType, WikiPageKey } from '@sage-bionetworks/synapse-types'\nimport { defaults } from 'lodash-es'\nimport { useMemo, useState } from 'react'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport MarkdownSynapse, {\n  MarkdownSynapseProps,\n} from '../Markdown/MarkdownSynapse'\nimport WikiMarkdownEditor from '../WikiMarkdownEditor/WikiMarkdownEditor'\n\nexport const ERROR_LOADING_WIKI_FAILED = 'Failed to load the wiki page: '\nexport const DEFAULT_BUTTON_TEXT = 'Edit Wiki Page'\nconst DEFAULT_BUTTON_PROPS: Omit<ButtonProps, 'onClick'> = {\n  children: DEFAULT_BUTTON_TEXT,\n  color: 'primary',\n  variant: 'contained',\n}\n\nexport type WikiMarkdownEditorButtonProps = {\n  ownerObjectType: ObjectType\n  ownerObjectId: string\n  // if wikiPageId is undefined, will get (or create) the root WikiPage for this ownerObject\n  // otherwise, will get the WikiPage with the specified wikiPageId\n  wikiPageId?: string\n  buttonProps?: Omit<ButtonProps, 'onClick' | 'disabled'>\n  displayWikiMarkdown?: boolean\n}\n\nexport function WikiMarkdownEditorButton(props: WikiMarkdownEditorButtonProps) {\n  const {\n    ownerObjectType,\n    ownerObjectId,\n    wikiPageId: initialWikiPageId,\n    displayWikiMarkdown = false,\n  } = props\n\n  const buttonProps: Omit<ButtonProps, 'onClick' | 'disabled'> = defaults(\n    {},\n    props.buttonProps,\n    DEFAULT_BUTTON_PROPS,\n  )\n\n  const [open, setOpen] = useState<boolean>(false)\n\n  const {\n    data: rootWikiPageKey,\n    isLoading: isLoadingRootWikiPageKey,\n    error: errorLoadingRootWikiPageKey,\n  } = useGetRootWikiPageKey(ownerObjectType, ownerObjectId, {\n    enabled: initialWikiPageId === undefined,\n  })\n\n  const {\n    mutate: createWikiPage,\n    isPending: isCreatingWikiPage,\n    error: errorCreatingWikiPage,\n  } = useCreateWikiPage({\n    onSuccess: () => setOpen(true),\n  })\n\n  const wikiPageKey = useMemo(() => {\n    const wikiPageId = initialWikiPageId || rootWikiPageKey?.wikiPageId || ''\n    const wikiPageKey: WikiPageKey = {\n      ownerObjectType,\n      ownerObjectId,\n      wikiPageId: wikiPageId,\n    }\n    return wikiPageKey\n  }, [initialWikiPageId, rootWikiPageKey, ownerObjectId, ownerObjectType])\n\n  const {\n    data: wikiPage,\n    isLoading: isLoadingWikiPage,\n    error: errorLoadingWikiPage,\n  } = useGetWikiPage(wikiPageKey, {\n    enabled: wikiPageKey.wikiPageId !== '',\n    // Set staleTime to infinity to prevent re-fetching while editing\n    staleTime: Infinity,\n  })\n\n  const error = useMemo(() => {\n    if (errorLoadingRootWikiPageKey) {\n      return ERROR_LOADING_WIKI_FAILED + errorLoadingRootWikiPageKey.reason\n    }\n    if (errorLoadingWikiPage) {\n      return ERROR_LOADING_WIKI_FAILED + errorLoadingWikiPage.reason\n    }\n    if (errorCreatingWikiPage) {\n      return errorCreatingWikiPage.reason\n    }\n    return null\n  }, [errorLoadingRootWikiPageKey, errorLoadingWikiPage, errorCreatingWikiPage])\n\n  const handleClick = () => {\n    if (wikiPage) {\n      setOpen(true)\n    } else if (rootWikiPageKey === null) {\n      // root WikiPageKey was not found,\n      // then create a root WikiPage for this ownerObject\n      const rootWikiPage: CreateWikiPageInput['wikiPage'] = {\n        parentWikiId: undefined,\n        title: '',\n        markdown: '',\n        attachmentFileHandleIds: [],\n      }\n      const input: CreateWikiPageInput = {\n        ownerObjectId,\n        ownerObjectType,\n        wikiPage: rootWikiPage,\n      }\n      createWikiPage(input)\n    } else {\n      // Should only reach this block if there was:\n      //  - a non-404 error fetching the root WikiPageKey\n      //  - an error fetching a specific wikiPage\n      // Otherwise the button should be disabled.\n      console.warn(\n        'There was an error fetching the root WikiPageKey or WikiPage - address that error first.',\n      )\n    }\n  }\n\n  /* TODO - pass ownerId, objectType, wikiId directly to MarkdownSynapse after\n  MarkdownSynapse is updated to fetch root WikiPages for ACCESS_REQUIREMENT object types.\n  See https://sagebionetworks.jira.com/browse/SWC-6791. */\n  const markdownSynapseProps = useMemo(() => {\n    const markdownSynapseProps: MarkdownSynapseProps = {\n      showPlaceholderIfNoWikiContent: true,\n    }\n    if (wikiPage) {\n      return {\n        ...markdownSynapseProps,\n        ownerId: ownerObjectId,\n        objectType: ownerObjectType,\n        wikiId: wikiPage.id,\n      }\n    } else {\n      // use a placeholder value for markdown so that MarkdownSynapse\n      // displays no content placeholder for owners without root wiki pages\n      return { ...markdownSynapseProps, markdown: '' }\n    }\n  }, [ownerObjectId, ownerObjectType, wikiPage])\n\n  return (\n    <>\n      {displayWikiMarkdown && (\n        <Box\n          sx={{\n            mb: 1,\n          }}\n        >\n          {isLoadingWikiPage || isLoadingRootWikiPageKey ? (\n            <SynapseSpinner />\n          ) : (\n            // TODO - remove key once MarkdownSynapse uses tanstack-query\n            <MarkdownSynapse\n              key={wikiPage?.markdown}\n              {...markdownSynapseProps}\n            />\n          )}\n        </Box>\n      )}\n      <Button\n        onClick={handleClick}\n        disabled={\n          isLoadingWikiPage || isLoadingRootWikiPageKey || isCreatingWikiPage\n        }\n        {...buttonProps}\n      />\n      {error && (\n        <Alert severity=\"error\" sx={{ marginTop: 2 }}>\n          {error}\n        </Alert>\n      )}\n      {wikiPage && (\n        <WikiMarkdownEditor\n          // Specify a key so that uncommitted changes in WikiMarkdownEditor\n          // are not displayed when editor is re-opened\n          key={open.toString()}\n          open={open}\n          ownerObjectType={ownerObjectType}\n          ownerObjectId={ownerObjectId}\n          wikiPage={wikiPage}\n          onSave={() => setOpen(false)}\n          onCancel={() => setOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nexport default WikiMarkdownEditorButton\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,IAA4B,kCAC5B,IAAsB,kBAC7B,IAAqD;CACzD,UAAU;CACV,OAAO;CACP,SAAS;AACX;AAYA,SAAgB,EAAyB,GAAsC;CAC7E,IAAM,EACJ,oBACA,kBACA,YAAY,GACZ,yBAAsB,OACpB,GAEE,IAAyD,EAC7D,CAAC,GACD,EAAM,aACN,CACF,GAEM,CAAC,GAAM,KAAW,EAAkB,EAAK,GAEzC,EACJ,MAAM,GACN,WAAW,GACX,OAAO,MACL,EAAsB,GAAiB,GAAe,EACxD,SAAS,MAAsB,KAAA,EACjC,CAAC,GAEK,EACJ,QAAQ,GACR,WAAW,GACX,OAAO,MACL,EAAkB,EACpB,iBAAiB,EAAQ,EAAI,EAC/B,CAAC,GAEK,IAAc,SAOX;EAJL;EACA;EACY,YAJK,KAAqB,GAAiB,cAAc;CAMhE,IACN;EAAC;EAAmB;EAAiB;EAAe;CAAe,CAAC,GAEjE,EACJ,MAAM,GACN,WAAW,GACX,OAAO,MACL,EAAe,GAAa;EAC9B,SAAS,EAAY,eAAe;EAEpC,WAAW;CACb,CAAC,GAEK,IAAQ,QACR,IACK,IAA4B,EAA4B,SAE7D,IACK,IAA4B,EAAqB,SAEtD,IACK,EAAsB,SAExB,MACN;EAAC;EAA6B;EAAsB;CAAqB,CAAC,GAEvE,UAAoB;EACxB,AAAI,IACF,EAAQ,EAAI,IACH,MAAoB,OAc7B,EAAe;GAJb;GACA;GACA,UAAU;IARV,cAAc,KAAA;IACd,OAAO;IACP,UAAU;IACV,yBAAyB,CAAC;GAKhB;EAEG,CAAK,IAMpB,QAAQ,KACN,0FACF;CAEJ,GAKM,IAAuB,QAAc;EACzC,IAAM,IAA6C,EACjD,gCAAgC,GAClC;EAWE,OAVE,IACK;GACL,GAAG;GACH,SAAS;GACT,YAAY;GACZ,QAAQ,EAAS;EACnB,IAIO;GAAE,GAAG;GAAsB,UAAU;EAAG;CAEnD,GAAG;EAAC;EAAe;EAAiB;CAAQ,CAAC;CAE7C,OACE,kBAAA,GAAA,EAAA,UAAA;EACG,KACC,kBAAC,GAAD;GACE,IAAI,EACF,IAAI,EACN;aAEC,KAAqB,IACpB,kBAAC,GAAD,CAAiB,CAAA,IAGjB,kBAAC,GAAD,EAEE,GAAI,EACL,GAFM,GAAU,QAEhB;EAEA,CAAA;EAEP,kBAAC,GAAD;GACE,SAAS;GACT,UACE,KAAqB,KAA4B;GAEnD,GAAI;EACL,CAAA;EACA,KACC,kBAAC,GAAD;GAAO,UAAS;GAAQ,IAAI,EAAE,WAAW,EAAE;aACxC;EACI,CAAA;EAER,KACC,kBAAC,GAAD;GAIQ;GACW;GACF;GACL;GACV,cAAc,EAAQ,EAAK;GAC3B,gBAAgB,EAAQ,EAAK;EAC9B,GAPM,EAAK,SAAS,CAOpB;CAEH,EAAA,CAAA;AAEN"}

package/dist/components/WizardChoiceButton/WizardChoiceButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardChoiceButton.js","names":[],"sources":["../../../src/components/WizardChoiceButton/WizardChoiceButton.tsx"],"sourcesContent":["import { StyledComponent } from '@emotion/styled'\nimport { Box, BoxProps, styled, Typography } from '@mui/material'\nimport { ReactNode } from 'react'\nimport IconSvg from '../IconSvg'\nimport WizardChoiceButtonDescription from './WizardChoiceButtonDescription'\n\nexport type WizardMenuItemProps = BoxProps & {\n  selected?: boolean\n}\n\nexport const WizardMenuItem: StyledComponent<WizardMenuItemProps> = styled(\n  Box,\n  {\n    shouldForwardProp: prop => prop !== 'selected',\n  },\n)<WizardMenuItemProps>(({ theme, selected = false }) => ({\n  backgroundColor: selected\n    ? theme.palette.grey[300]\n    : theme.palette.background.paper,\n  width: '100%',\n  border: '1px solid',\n  borderColor: theme.palette.grey[200],\n  borderRadius: '5px',\n  '&:hover': {\n    backgroundColor: selected\n      ? theme.palette.grey[200]\n      : theme.palette.grey[100],\n  },\n  [theme.breakpoints.down('sm')]: {\n    flexDirection: 'column',\n  },\n}))\n\nexport default function WizardChoiceButton(props: {\n  title: string\n  description?: ReactNode\n  icon?: ReactNode\n  onClick?: () => void\n  selected?: boolean\n}) {\n  const { title, description, icon, onClick, selected } = props\n\n  const descriptionNode =\n    typeof description === 'string' ? (\n      <WizardChoiceButtonDescription>\n        {description}\n      </WizardChoiceButtonDescription>\n    ) : (\n      description\n    )\n  return (\n    <WizardMenuItem\n      component={'button'}\n      role={'menuitem'}\n      aria-label={title}\n      display={'flex'}\n      p={'20px'}\n      onClick={onClick}\n      alignItems={'center'}\n      gap={'10px'}\n      selected={selected}\n    >\n      {icon && (\n        <Box\n          sx={theme => ({\n            p: 3,\n            [theme.breakpoints.down('sm')]: {\n              p: 0,\n              alignSelf: 'flex-start',\n            },\n          })}\n        >\n          {icon}\n        </Box>\n      )}\n      <Box sx={{ flexGrow: 1, textAlign: 'left' }}>\n        <Typography\n          variant={'headline2'}\n          sx={{\n            mb: '10px',\n          }}\n        >\n          {title}\n        </Typography>\n        {descriptionNode}\n      </Box>\n      <Box\n        sx={theme => ({\n          flexShrink: 0,\n          [theme.breakpoints.down('sm')]: { alignSelf: 'flex-end' },\n        })}\n      >\n        <IconSvg\n          icon={'chevronRight'}\n          fontSize={'large'}\n          sx={{\n            color: 'primary.light',\n          }}\n        />\n      </Box>\n    </WizardMenuItem>\n  )\n}\n"],"mappings":";;;;;AAUA,IAAa,IAAuD,EAClE,GACA,EACE,oBAAmB,MAAQ,MAAS,YACrC,CACF,EAAuB,EAAE,UAAO,cAAW,UAAa;CACvD,iBAAiB,IACb,EAAM,QAAQ,KAAK,OACnB,EAAM,QAAQ,WAAW;CAC7B,OAAO;CACP,QAAQ;CACR,aAAa,EAAM,QAAQ,KAAK;CAChC,cAAc;CACd,WAAW,EACT,iBAAiB,IACb,EAAM,QAAQ,KAAK,OACnB,EAAM,QAAQ,KAAK,MACxB;EACA,EAAM,YAAY,KAAK,KAAK,GAAG,EAC9B,eAAe,UAChB;CACF,EAAE;AAEH,SAAwB,EAAmB,GAMxC;CACD,IAAM,EAAE,UAAO,gBAAa,SAAM,YAAS,gBAAa;AAUxD,QACE,kBAAC,GAAD;EACE,WAAW;EACX,MAAM;EACN,cAAY;EACZ,SAAS;EACT,GAAG;EACM;EACT,YAAY;EACZ,KAAK;EACK;YATZ;GAWG,KACC,kBAAC,GAAD;IACE,KAAI,OAAU;KACZ,GAAG;MACF,EAAM,YAAY,KAAK,KAAK,GAAG;MAC9B,GAAG;MACH,WAAW;MACZ;KACF;cAEA;IACG,CAAA;GAER,kBAAC,GAAD;IAAK,IAAI;KAAE,UAAU;KAAG,WAAW;KAAQ;cAA3C,CACE,kBAAC,GAAD;KACE,SAAS;KACT,IAAI,EACF,IAAI,QACL;eAEA;KACU,CAAA,EAxCjB,OAAO,KAAgB,WACrB,kBAAC,GAAD,EAAA,UACG,GAC6B,CAAA,GAEhC,EAqCM;;GACN,kBAAC,GAAD;IACE,KAAI,OAAU;KACZ,YAAY;MACX,EAAM,YAAY,KAAK,KAAK,GAAG,EAAE,WAAW,YAAY;KAC1D;cAED,kBAAC,GAAD;KACE,MAAM;KACN,UAAU;KACV,IAAI,EACF,OAAO,iBACR;KACD,CAAA;IACE,CAAA;GACS"}
+{"version":3,"file":"WizardChoiceButton.js","names":[],"sources":["../../../src/components/WizardChoiceButton/WizardChoiceButton.tsx"],"sourcesContent":["import { StyledComponent } from '@emotion/styled'\nimport { Box, BoxProps, styled, Typography } from '@mui/material'\nimport { ReactNode } from 'react'\nimport IconSvg from '../IconSvg'\nimport WizardChoiceButtonDescription from './WizardChoiceButtonDescription'\n\nexport type WizardMenuItemProps = BoxProps & {\n  selected?: boolean\n}\n\nexport const WizardMenuItem: StyledComponent<WizardMenuItemProps> = styled(\n  Box,\n  {\n    shouldForwardProp: prop => prop !== 'selected',\n  },\n)<WizardMenuItemProps>(({ theme, selected = false }) => ({\n  backgroundColor: selected\n    ? theme.palette.grey[300]\n    : theme.palette.background.paper,\n  width: '100%',\n  border: '1px solid',\n  borderColor: theme.palette.grey[200],\n  borderRadius: '5px',\n  '&:hover': {\n    backgroundColor: selected\n      ? theme.palette.grey[200]\n      : theme.palette.grey[100],\n  },\n  [theme.breakpoints.down('sm')]: {\n    flexDirection: 'column',\n  },\n}))\n\nexport default function WizardChoiceButton(props: {\n  title: string\n  description?: ReactNode\n  icon?: ReactNode\n  onClick?: () => void\n  selected?: boolean\n}) {\n  const { title, description, icon, onClick, selected } = props\n\n  const descriptionNode =\n    typeof description === 'string' ? (\n      <WizardChoiceButtonDescription>\n        {description}\n      </WizardChoiceButtonDescription>\n    ) : (\n      description\n    )\n  return (\n    <WizardMenuItem\n      component={'button'}\n      role={'menuitem'}\n      aria-label={title}\n      display={'flex'}\n      p={'20px'}\n      onClick={onClick}\n      alignItems={'center'}\n      gap={'10px'}\n      selected={selected}\n    >\n      {icon && (\n        <Box\n          sx={theme => ({\n            p: 3,\n            [theme.breakpoints.down('sm')]: {\n              p: 0,\n              alignSelf: 'flex-start',\n            },\n          })}\n        >\n          {icon}\n        </Box>\n      )}\n      <Box sx={{ flexGrow: 1, textAlign: 'left' }}>\n        <Typography\n          variant={'headline2'}\n          sx={{\n            mb: '10px',\n          }}\n        >\n          {title}\n        </Typography>\n        {descriptionNode}\n      </Box>\n      <Box\n        sx={theme => ({\n          flexShrink: 0,\n          [theme.breakpoints.down('sm')]: { alignSelf: 'flex-end' },\n        })}\n      >\n        <IconSvg\n          icon={'chevronRight'}\n          fontSize={'large'}\n          sx={{\n            color: 'primary.light',\n          }}\n        />\n      </Box>\n    </WizardMenuItem>\n  )\n}\n"],"mappings":";;;;;AAUA,IAAa,IAAuD,EAClE,GACA,EACE,oBAAmB,MAAQ,MAAS,WACtC,CACF,GAAwB,EAAE,UAAO,cAAW,UAAa;CACvD,iBAAiB,IACb,EAAM,QAAQ,KAAK,OACnB,EAAM,QAAQ,WAAW;CAC7B,OAAO;CACP,QAAQ;CACR,aAAa,EAAM,QAAQ,KAAK;CAChC,cAAc;CACd,WAAW,EACT,iBAAiB,IACb,EAAM,QAAQ,KAAK,OACnB,EAAM,QAAQ,KAAK,KACzB;EACC,EAAM,YAAY,KAAK,IAAI,IAAI,EAC9B,eAAe,SACjB;AACF,EAAE;AAEF,SAAwB,EAAmB,GAMxC;CACD,IAAM,EAAE,UAAO,gBAAa,SAAM,YAAS,gBAAa;CAUxD,OACE,kBAAC,GAAD;EACE,WAAW;EACX,MAAM;EACN,cAAY;EACZ,SAAS;EACT,GAAG;EACM;EACT,YAAY;EACZ,KAAK;EACK;YATZ;GAWG,KACC,kBAAC,GAAD;IACE,KAAI,OAAU;KACZ,GAAG;MACF,EAAM,YAAY,KAAK,IAAI,IAAI;MAC9B,GAAG;MACH,WAAW;KACb;IACF;cAEC;GACE,CAAA;GAEP,kBAAC,GAAD;IAAK,IAAI;KAAE,UAAU;KAAG,WAAW;IAAO;cAA1C,CACE,kBAAC,GAAD;KACE,SAAS;KACT,IAAI,EACF,IAAI,OACN;eAEC;IACS,CAAA,GAxChB,OAAO,KAAgB,WACrB,kBAAC,GAAD,EAAA,UACG,EAC4B,CAAA,IAE/B,CAqCK;;GACL,kBAAC,GAAD;IACE,KAAI,OAAU;KACZ,YAAY;MACX,EAAM,YAAY,KAAK,IAAI,IAAI,EAAE,WAAW,WAAW;IAC1D;cAEA,kBAAC,GAAD;KACE,MAAM;KACN,UAAU;KACV,IAAI,EACF,OAAO,gBACT;IACD,CAAA;GACE,CAAA;EACS;;AAEpB"}

package/dist/components/WizardChoiceButton/WizardChoiceButtonDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardChoiceButtonDescription.js","names":[],"sources":["../../../src/components/WizardChoiceButton/WizardChoiceButtonDescription.tsx"],"sourcesContent":["import { spreadSx } from '@/theme/spreadSx'\nimport { Typography, TypographyProps } from '@mui/material'\n\nexport default function WizardChoiceButtonDescription(\n  props: Omit<TypographyProps, 'variant'>,\n) {\n  return (\n    <Typography\n      variant={'body1'}\n      {...props}\n      sx={spreadSx(\n        {\n          color: 'grey.700',\n          my: 1.25,\n        },\n        props.sx,\n      )}\n    />\n  )\n}\n"],"mappings":";;;;AAGA,SAAwB,EACtB,GACA;AACA,QACE,kBAAC,GAAD;EACE,SAAS;EACT,GAAI;EACJ,IAAI,EACF;GACE,OAAO;GACP,IAAI;GACL,EACD,EAAM,GACP;EACD,CAAA"}
+{"version":3,"file":"WizardChoiceButtonDescription.js","names":[],"sources":["../../../src/components/WizardChoiceButton/WizardChoiceButtonDescription.tsx"],"sourcesContent":["import { spreadSx } from '@/theme/spreadSx'\nimport { Typography, TypographyProps } from '@mui/material'\n\nexport default function WizardChoiceButtonDescription(\n  props: Omit<TypographyProps, 'variant'>,\n) {\n  return (\n    <Typography\n      variant={'body1'}\n      {...props}\n      sx={spreadSx(\n        {\n          color: 'grey.700',\n          my: 1.25,\n        },\n        props.sx,\n      )}\n    />\n  )\n}\n"],"mappings":";;;;AAGA,SAAwB,EACtB,GACA;CACA,OACE,kBAAC,GAAD;EACE,SAAS;EACT,GAAI;EACJ,IAAI,EACF;GACE,OAAO;GACP,IAAI;EACN,GACA,EAAM,EACR;CACD,CAAA;AAEL"}

package/dist/components/WizardChoiceButton/WizardChoiceButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardChoiceButtonGroup.js","names":[],"sources":["../../../src/components/WizardChoiceButton/WizardChoiceButtonGroup.tsx"],"sourcesContent":["import { Box, BoxProps } from '@mui/material'\n\nexport default function WizardChoiceButtonGroup(props: BoxProps) {\n  const { sx } = props\n  return (\n    <Box\n      role={'menu'}\n      {...props}\n      sx={{\n        '& > button': {\n          '&:first-of-type': {\n            borderBottomLeftRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n          '&:not(:first-of-type):not(:last-child)': {\n            borderRadius: 0,\n            borderTop: 'none',\n          },\n          '&:last-child': {\n            borderTopLeftRadius: 0,\n            borderTopRightRadius: 0,\n            borderTop: 'none',\n          },\n        },\n        ...(Array.isArray(sx) ? sx : [sx]),\n      }}\n    />\n  )\n}\n"],"mappings":";;;AAEA,SAAwB,EAAwB,GAAiB;CAC/D,IAAM,EAAE,UAAO;AACf,QACE,kBAAC,GAAD;EACE,MAAM;EACN,GAAI;EACJ,IAAI;GACF,cAAc;IACZ,mBAAmB;KACjB,wBAAwB;KACxB,yBAAyB;KAC1B;IACD,0CAA0C;KACxC,cAAc;KACd,WAAW;KACZ;IACD,gBAAgB;KACd,qBAAqB;KACrB,sBAAsB;KACtB,WAAW;KACZ;IACF;GACD,GAAI,MAAM,QAAQ,EAAG,GAAG,IAAK,CAAC,EAAG;GAClC;EACD,CAAA"}
+{"version":3,"file":"WizardChoiceButtonGroup.js","names":[],"sources":["../../../src/components/WizardChoiceButton/WizardChoiceButtonGroup.tsx"],"sourcesContent":["import { Box, BoxProps } from '@mui/material'\n\nexport default function WizardChoiceButtonGroup(props: BoxProps) {\n  const { sx } = props\n  return (\n    <Box\n      role={'menu'}\n      {...props}\n      sx={{\n        '& > button': {\n          '&:first-of-type': {\n            borderBottomLeftRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n          '&:not(:first-of-type):not(:last-child)': {\n            borderRadius: 0,\n            borderTop: 'none',\n          },\n          '&:last-child': {\n            borderTopLeftRadius: 0,\n            borderTopRightRadius: 0,\n            borderTop: 'none',\n          },\n        },\n        ...(Array.isArray(sx) ? sx : [sx]),\n      }}\n    />\n  )\n}\n"],"mappings":";;;AAEA,SAAwB,EAAwB,GAAiB;CAC/D,IAAM,EAAE,UAAO;CACf,OACE,kBAAC,GAAD;EACE,MAAM;EACN,GAAI;EACJ,IAAI;GACF,cAAc;IACZ,mBAAmB;KACjB,wBAAwB;KACxB,yBAAyB;IAC3B;IACA,0CAA0C;KACxC,cAAc;KACd,WAAW;IACb;IACA,gBAAgB;KACd,qBAAqB;KACrB,sBAAsB;KACtB,WAAW;IACb;GACF;GACA,GAAI,MAAM,QAAQ,CAAE,IAAI,IAAK,CAAC,CAAE;EAClC;CACD,CAAA;AAEL"}

package/dist/components/WordPress/WordPressLatestPostChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"WordPressLatestPostChip.js","names":[],"sources":["../../../src/components/WordPress/WordPressLatestPostChip.tsx"],"sourcesContent":["import { Button, Chip } from '@mui/material'\nimport ArrowForwardIcon from '@mui/icons-material/ArrowForward'\nimport { useWordPressCategories } from './useWordPressCategories'\nimport { useWordPressPosts } from './useWordPressPosts'\nimport styles from './WordPressLatestPostChip.module.scss'\n\nexport type WordPressLatestPostChipProps = {\n  wordpressSiteUrl: string\n}\n\nexport function WordPressLatestPostChip({\n  wordpressSiteUrl,\n}: WordPressLatestPostChipProps) {\n  const { data: posts } = useWordPressPosts(wordpressSiteUrl, 1)\n  const { data: categories } = useWordPressCategories(wordpressSiteUrl)\n\n  const post = posts?.[0]\n  if (!post) return null\n\n  const categoryName = categories?.find(c => c.id === post.categories[0])?.name\n\n  return (\n    <Button\n      component=\"a\"\n      href={post.link}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={styles.chip}\n      endIcon={<ArrowForwardIcon />}\n    >\n      <Chip label={categoryName} size=\"small\" className={styles.categoryChip} />\n      <span dangerouslySetInnerHTML={{ __html: post.title.rendered }} />\n    </Button>\n  )\n}\n"],"mappings":";;;;;;;AAUA,SAAgB,EAAwB,EACtC,uBAC+B;CAC/B,IAAM,EAAE,MAAM,MAAU,EAAkB,GAAkB,EAAE,EACxD,EAAE,MAAM,MAAe,EAAuB,EAAiB,EAE/D,IAAO,IAAQ;AACrB,KAAI,CAAC,EAAM,QAAO;CAElB,IAAM,IAAe,GAAY,MAAK,MAAK,EAAE,OAAO,EAAK,WAAW,GAAG,EAAE;AAEzE,QACE,kBAAC,GAAD;EACE,WAAU;EACV,MAAM,EAAK;EACX,QAAO;EACP,KAAI;EACJ,WAAW,EAAO;EAClB,SAAS,kBAAC,GAAD,EAAoB,CAAA;YAN/B,CAQE,kBAAC,GAAD;GAAM,OAAO;GAAc,MAAK;GAAQ,WAAW,EAAO;GAAgB,CAAA,EAC1E,kBAAC,QAAD,EAAM,yBAAyB,EAAE,QAAQ,EAAK,MAAM,UAAU,EAAI,CAAA,CAC3D"}
+{"version":3,"file":"WordPressLatestPostChip.js","names":[],"sources":["../../../src/components/WordPress/WordPressLatestPostChip.tsx"],"sourcesContent":["import { Button, Chip } from '@mui/material'\nimport ArrowForwardIcon from '@mui/icons-material/ArrowForward'\nimport { useWordPressCategories } from './useWordPressCategories'\nimport { useWordPressPosts } from './useWordPressPosts'\nimport styles from './WordPressLatestPostChip.module.scss'\n\nexport type WordPressLatestPostChipProps = {\n  wordpressSiteUrl: string\n}\n\nexport function WordPressLatestPostChip({\n  wordpressSiteUrl,\n}: WordPressLatestPostChipProps) {\n  const { data: posts } = useWordPressPosts(wordpressSiteUrl, 1)\n  const { data: categories } = useWordPressCategories(wordpressSiteUrl)\n\n  const post = posts?.[0]\n  if (!post) return null\n\n  const categoryName = categories?.find(c => c.id === post.categories[0])?.name\n\n  return (\n    <Button\n      component=\"a\"\n      href={post.link}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={styles.chip}\n      endIcon={<ArrowForwardIcon />}\n    >\n      <Chip label={categoryName} size=\"small\" className={styles.categoryChip} />\n      <span dangerouslySetInnerHTML={{ __html: post.title.rendered }} />\n    </Button>\n  )\n}\n"],"mappings":";;;;;;;AAUA,SAAgB,EAAwB,EACtC,uBAC+B;CAC/B,IAAM,EAAE,MAAM,MAAU,EAAkB,GAAkB,CAAC,GACvD,EAAE,MAAM,MAAe,EAAuB,CAAgB,GAE9D,IAAO,IAAQ;CACrB,IAAI,CAAC,GAAM,OAAO;CAElB,IAAM,IAAe,GAAY,MAAK,MAAK,EAAE,OAAO,EAAK,WAAW,EAAE,GAAG;CAEzE,OACE,kBAAC,GAAD;EACE,WAAU;EACV,MAAM,EAAK;EACX,QAAO;EACP,KAAI;EACJ,WAAW,EAAO;EAClB,SAAS,kBAAC,GAAD,CAAmB,CAAA;YAN9B,CAQE,kBAAC,GAAD;GAAM,OAAO;GAAc,MAAK;GAAQ,WAAW,EAAO;EAAe,CAAA,GACzE,kBAAC,QAAD,EAAM,yBAAyB,EAAE,QAAQ,EAAK,MAAM,SAAS,EAAI,CAAA,CAC3D;;AAEZ"}

package/dist/components/WordPress/useWordPressCategories.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWordPressCategories.js","names":[],"sources":["../../../src/components/WordPress/useWordPressCategories.ts"],"sourcesContent":["import { useQuery } from '@tanstack/react-query'\nimport { WordPressCategory } from '../SynapseHomepageV2/WordPressNewsItem'\n\nasync function fetchWordPressCategories(\n  wordpressSiteUrl: string,\n): Promise<WordPressCategory[]> {\n  const url = new URL(`${wordpressSiteUrl}/wp-json/wp/v2/categories`)\n  url.searchParams.set('_fields', 'id,name,slug')\n  const response = await fetch(url.toString())\n  if (!response.ok) {\n    throw new Error(\n      `Failed to fetch WordPress categories: ${response.statusText}`,\n    )\n  }\n  return response.json() as Promise<WordPressCategory[]>\n}\n\nexport function useWordPressCategories(wordpressSiteUrl: string) {\n  return useQuery({\n    queryKey: ['wordpressCategories', wordpressSiteUrl],\n    queryFn: () => fetchWordPressCategories(wordpressSiteUrl),\n  })\n}\n"],"mappings":";;AAGA,eAAe,EACb,GAC8B;CAC9B,IAAM,IAAM,IAAI,IAAI,GAAG,EAAiB,2BAA2B;AACnE,GAAI,aAAa,IAAI,WAAW,eAAe;CAC/C,IAAM,IAAW,MAAM,MAAM,EAAI,UAAU,CAAC;AAC5C,KAAI,CAAC,EAAS,GACZ,OAAU,MACR,yCAAyC,EAAS,aACnD;AAEH,QAAO,EAAS,MAAM;;AAGxB,SAAgB,EAAuB,GAA0B;AAC/D,QAAO,EAAS;EACd,UAAU,CAAC,uBAAuB,EAAiB;EACnD,eAAe,EAAyB,EAAiB;EAC1D,CAAC"}
+{"version":3,"file":"useWordPressCategories.js","names":[],"sources":["../../../src/components/WordPress/useWordPressCategories.ts"],"sourcesContent":["import { useQuery } from '@tanstack/react-query'\nimport { WordPressCategory } from '../SynapseHomepageV2/WordPressNewsItem'\n\nasync function fetchWordPressCategories(\n  wordpressSiteUrl: string,\n): Promise<WordPressCategory[]> {\n  const url = new URL(`${wordpressSiteUrl}/wp-json/wp/v2/categories`)\n  url.searchParams.set('_fields', 'id,name,slug')\n  const response = await fetch(url.toString())\n  if (!response.ok) {\n    throw new Error(\n      `Failed to fetch WordPress categories: ${response.statusText}`,\n    )\n  }\n  return response.json() as Promise<WordPressCategory[]>\n}\n\nexport function useWordPressCategories(wordpressSiteUrl: string) {\n  return useQuery({\n    queryKey: ['wordpressCategories', wordpressSiteUrl],\n    queryFn: () => fetchWordPressCategories(wordpressSiteUrl),\n  })\n}\n"],"mappings":";;AAGA,eAAe,EACb,GAC8B;CAC9B,IAAM,IAAM,IAAI,IAAI,GAAG,EAAiB,0BAA0B;CAClE,EAAI,aAAa,IAAI,WAAW,cAAc;CAC9C,IAAM,IAAW,MAAM,MAAM,EAAI,SAAS,CAAC;CAC3C,IAAI,CAAC,EAAS,IACZ,MAAU,MACR,yCAAyC,EAAS,YACpD;CAEF,OAAO,EAAS,KAAK;AACvB;AAEA,SAAgB,EAAuB,GAA0B;CAC/D,OAAO,EAAS;EACd,UAAU,CAAC,uBAAuB,CAAgB;EAClD,eAAe,EAAyB,CAAgB;CAC1D,CAAC;AACH"}

package/dist/components/WordPress/useWordPressPosts.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWordPressPosts.js","names":[],"sources":["../../../src/components/WordPress/useWordPressPosts.ts"],"sourcesContent":["import { useQuery } from '@tanstack/react-query'\nimport { WordPressPost } from '../SynapseHomepageV2/WordPressNewsItem'\n\nasync function fetchWordPressPosts(\n  wordpressSiteUrl: string,\n  postCount: number,\n): Promise<WordPressPost[]> {\n  const url = new URL(`${wordpressSiteUrl}/wp-json/wp/v2/posts`)\n  url.searchParams.set('per_page', String(postCount))\n  url.searchParams.set('orderby', 'date')\n  url.searchParams.set('order', 'desc')\n  url.searchParams.set('_fields', 'id,date,link,title,categories')\n  const response = await fetch(url.toString())\n  if (!response.ok) {\n    throw new Error(`Failed to fetch WordPress posts: ${response.statusText}`)\n  }\n  return response.json() as Promise<WordPressPost[]>\n}\n\nexport function useWordPressPosts(wordpressSiteUrl: string, postCount: number) {\n  return useQuery({\n    queryKey: ['wordpressPosts', wordpressSiteUrl, postCount],\n    queryFn: () => fetchWordPressPosts(wordpressSiteUrl, postCount),\n  })\n}\n"],"mappings":";;AAGA,eAAe,EACb,GACA,GAC0B;CAC1B,IAAM,IAAM,IAAI,IAAI,GAAG,EAAiB,sBAAsB;AAI9D,CAHA,EAAI,aAAa,IAAI,YAAY,OAAO,EAAU,CAAC,EACnD,EAAI,aAAa,IAAI,WAAW,OAAO,EACvC,EAAI,aAAa,IAAI,SAAS,OAAO,EACrC,EAAI,aAAa,IAAI,WAAW,gCAAgC;CAChE,IAAM,IAAW,MAAM,MAAM,EAAI,UAAU,CAAC;AAC5C,KAAI,CAAC,EAAS,GACZ,OAAU,MAAM,oCAAoC,EAAS,aAAa;AAE5E,QAAO,EAAS,MAAM;;AAGxB,SAAgB,EAAkB,GAA0B,GAAmB;AAC7E,QAAO,EAAS;EACd,UAAU;GAAC;GAAkB;GAAkB;GAAU;EACzD,eAAe,EAAoB,GAAkB,EAAU;EAChE,CAAC"}
+{"version":3,"file":"useWordPressPosts.js","names":[],"sources":["../../../src/components/WordPress/useWordPressPosts.ts"],"sourcesContent":["import { useQuery } from '@tanstack/react-query'\nimport { WordPressPost } from '../SynapseHomepageV2/WordPressNewsItem'\n\nasync function fetchWordPressPosts(\n  wordpressSiteUrl: string,\n  postCount: number,\n): Promise<WordPressPost[]> {\n  const url = new URL(`${wordpressSiteUrl}/wp-json/wp/v2/posts`)\n  url.searchParams.set('per_page', String(postCount))\n  url.searchParams.set('orderby', 'date')\n  url.searchParams.set('order', 'desc')\n  url.searchParams.set('_fields', 'id,date,link,title,categories')\n  const response = await fetch(url.toString())\n  if (!response.ok) {\n    throw new Error(`Failed to fetch WordPress posts: ${response.statusText}`)\n  }\n  return response.json() as Promise<WordPressPost[]>\n}\n\nexport function useWordPressPosts(wordpressSiteUrl: string, postCount: number) {\n  return useQuery({\n    queryKey: ['wordpressPosts', wordpressSiteUrl, postCount],\n    queryFn: () => fetchWordPressPosts(wordpressSiteUrl, postCount),\n  })\n}\n"],"mappings":";;AAGA,eAAe,EACb,GACA,GAC0B;CAC1B,IAAM,IAAM,IAAI,IAAI,GAAG,EAAiB,qBAAqB;CAI7D,AAHA,EAAI,aAAa,IAAI,YAAY,OAAO,CAAS,CAAC,GAClD,EAAI,aAAa,IAAI,WAAW,MAAM,GACtC,EAAI,aAAa,IAAI,SAAS,MAAM,GACpC,EAAI,aAAa,IAAI,WAAW,+BAA+B;CAC/D,IAAM,IAAW,MAAM,MAAM,EAAI,SAAS,CAAC;CAC3C,IAAI,CAAC,EAAS,IACZ,MAAU,MAAM,oCAAoC,EAAS,YAAY;CAE3E,OAAO,EAAS,KAAK;AACvB;AAEA,SAAgB,EAAkB,GAA0B,GAAmB;CAC7E,OAAO,EAAS;EACd,UAAU;GAAC;GAAkB;GAAkB;EAAS;EACxD,eAAe,EAAoB,GAAkB,CAAS;CAChE,CAAC;AACH"}