synapse-react-client 4.0.18 → 4.0.20

package/dist/components/UserCard/UserCardMedium.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserCardMedium.js","names":[],"sources":["../../../src/components/UserCard/UserCardMedium.tsx"],"sourcesContent":["import IconCopy from '@/assets/icons/IconCopy'\nimport ValidatedProfileIcon from '@/assets/icons/ValidatedProfile'\nimport { useGetUserBundle } from '@/synapse-queries/user/useUserBundle'\nimport { SynapseConstants } from '@/utils'\nimport { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport { Card, IconButton, Skeleton, Tooltip } from '@mui/material'\nimport { UserProfile } from '@sage-bionetworks/synapse-types'\nimport {\n  MouseEvent,\n  MutableRefObject,\n  SyntheticEvent,\n  useRef,\n  useState,\n} from 'react'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { SkeletonTable } from '../Skeleton/SkeletonTable'\nimport { ToastMessage } from '../ToastMessage/ToastMessage'\nimport { Avatar } from './Avatar'\nimport UserCardContextMenu, { MenuAction } from './UserCardContextMenu'\nimport { UserCardLarge } from './UserCardLarge'\nimport { copyStringToClipboard } from '@/utils/functions/StringUtils'\n\nexport type UserCardMediumProps = {\n  userProfile: UserProfile\n  menuActions?: MenuAction[]\n  imageURL?: string\n  hideEmail?: boolean\n  isLarge?: boolean\n  link?: string\n  openLinkInNewTab?: boolean\n  disableLink?: boolean\n  isCertified?: boolean\n  isValidated?: boolean\n  isLoadingAvatar?: boolean\n}\n\n/**\n * Function handles copying to clipboard the user's email address\n *\n * @param {string} value the email address of the user\n * @returns\n */\nconst copyToClipboard =\n  (\n    ref: MutableRefObject<HTMLElement | null>,\n    value: string,\n    onCopy: () => void,\n  ) =>\n  (event: SyntheticEvent) => {\n    event.preventDefault()\n\n    copyStringToClipboard(value).then(() => {\n      onCopy()\n    })\n  }\n\nexport function UserCardMedium({\n  userProfile,\n  menuActions,\n  isLarge = false,\n  imageURL,\n  hideEmail = false,\n  disableLink = false,\n  link,\n  openLinkInNewTab = false,\n  isValidated,\n  isCertified,\n  isLoadingAvatar,\n}: UserCardMediumProps) {\n  const [menuAnchorEl, setMenuAnchorEl] = useState<null | HTMLElement>(null)\n  const isContextMenuOpen = Boolean(menuAnchorEl)\n  const handleMenuClick = (event: MouseEvent<HTMLButtonElement>) => {\n    setMenuAnchorEl(event.currentTarget)\n  }\n  const handleMenuClose = () => {\n    setMenuAnchorEl(null)\n  }\n  const [showModal, setShowModal] = useState(false)\n\n  const copyToClipboardRef = useRef<HTMLParagraphElement>(null)\n\n  const onCopyToClipboard = () => {\n    // show modal and hide after 4 seconds, the timing is per Material Design\n    setShowModal(true)\n    // hide after 4 seconds\n    setTimeout(() => {\n      setShowModal(false)\n    }, 4000)\n  }\n\n  const { ownerId } = userProfile\n  const { displayName, userName, firstName, lastName, position, company } =\n    userProfile\n\n  const { data: userBundle } = useGetUserBundle(\n    ownerId,\n    SynapseConstants.USER_BUNDLE_MASK_ORCID,\n  )\n\n  const ORCID = userBundle?.ORCID\n\n  let name = ''\n  const linkLocation = link\n    ? link\n    : `${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Profile:${ownerId}`\n  // linkLocation is overriden by custom click handler\n  const email = userName ? `${userName}@synapse.org` : undefined\n  if (displayName) {\n    name = displayName\n  } else if (firstName && lastName) {\n    name = `${firstName} ${lastName}`\n  } else if (userName) {\n    name = userName\n  }\n  const avatar = (\n    <Avatar\n      userProfile={userProfile}\n      imageURL={imageURL}\n      avatarSize={'LARGE'}\n      isLoadingAvatar={isLoadingAvatar}\n    />\n  )\n  const mediumCard = (\n    <>\n      {!hideEmail && (\n        <ToastMessage\n          show={showModal}\n          text=\"Email address copied to clipboard\"\n          autohide={true}\n        ></ToastMessage>\n      )}\n      {disableLink && avatar}\n      {!disableLink && (\n        <a\n          href={linkLocation}\n          target={openLinkInNewTab ? '_blank' : ''}\n          rel={openLinkInNewTab ? 'noreferrer' : ''}\n          className={`SRC-no-border-bottom-imp ${\n            isLarge ? 'SRC-isLargeCard' : ''\n          }`}\n        >\n          {avatar}\n        </a>\n      )}\n      <div className=\"SRC-cardContent\">\n        <p className=\"SRC-eqHeightRow SRC-userCardName\">\n          {/*\n              make the header clickable for all cards\n              consolidate click events\n          */}\n          <a\n            href={linkLocation}\n            target={openLinkInNewTab ? '_blank' : ''}\n            rel={openLinkInNewTab ? 'noreferrer' : ''}\n            tabIndex={0}\n            className={'SRC-hand-cursor'}\n          >\n            {name}\n          </a>\n          {isValidated && (\n            <Tooltip\n              title=\"This user profile has been validated.\"\n              placement=\"bottom\"\n              enterNextDelay={300}\n            >\n              <span>{ValidatedProfileIcon}</span>\n            </Tooltip>\n          )}\n        </p>\n        {(position || company) && (\n          <p>\n            {position} {position ? ' / ' : ''} {company}\n          </p>\n        )}\n        {!hideEmail && !!email && (\n          <p\n            ref={copyToClipboardRef}\n            className={`SRC-hand-cursor SRC-eqHeightRow SRC-inlineFlex SRC-emailText SRC-cardSvg`}\n            onClick={copyToClipboard(\n              copyToClipboardRef,\n              email,\n              onCopyToClipboard,\n            )}\n            onKeyPress={copyToClipboard(\n              copyToClipboardRef,\n              email,\n              onCopyToClipboard,\n            )}\n            tabIndex={0}\n          >\n            <span style={{ paddingRight: '5px', paddingBottom: '2px' }}>\n              <a className={`link`}>{`${userName}@synapse.org`}</a>\n            </span>\n            <IconCopy />\n          </p>\n        )}\n        {ORCID && (\n          <a\n            href={ORCID}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            style={{ width: 'fit-content' }}\n            tabIndex={0}\n          >\n            View ORCID\n          </a>\n        )}\n      </div>\n      {/* conditionally render menu actions, if there are no actions then we don't show the button */}\n      {menuActions && menuActions.length > 0 && (\n        <>\n          <IconButton\n            role=\"menu\"\n            tabIndex={0}\n            onClick={handleMenuClick}\n            sx={{ mx: 1 }}\n          >\n            <IconSvg icon=\"verticalEllipsis\" wrap={false} />\n          </IconButton>\n          <UserCardContextMenu\n            menuActions={menuActions}\n            userProfile={userProfile}\n            anchorEl={menuAnchorEl}\n            onClose={handleMenuClose}\n            open={isContextMenuOpen}\n          />\n        </>\n      )}\n    </>\n  )\n\n  if (!isLarge) {\n    return (\n      <Card\n        className={`SRC-userCard SRC-userCardMediumUp`}\n        sx={theme => ({\n          [theme.breakpoints.down('sm')]: {\n            '&.SRC-userCard': {\n              minWidth: 'unset',\n              padding: '0 16px',\n              width: '100%',\n            },\n          },\n        })}\n      >\n        {mediumCard}\n      </Card>\n    )\n  }\n  // else return medium card inside large component\n  // when the component is large we have to set the click handler to wrap both the top and bottom portion\n  return (\n    <Card>\n      <div className={`SRC-userCard SRC-userCardMediumUp`}>{mediumCard}</div>\n      {isLarge && (\n        <UserCardLarge userProfile={userProfile} isCertified={isCertified} />\n      )}\n    </Card>\n  )\n}\n\nexport function LoadingUserCardMedium() {\n  return (\n    <Card\n      className=\"SRC-userCard SRC-userCardMediumUp\"\n      style={{ width: '380px' }}\n    >\n      <Skeleton variant=\"circular\" width=\"80px\" height=\"80px\" />\n      <div style={{ width: '250px' }}>\n        <SkeletonTable numCols={1} numRows={2} />\n      </div>\n    </Card>\n  )\n}\n\nexport default UserCardMedium\n"],"mappings":";;;;;;;;;;;;;;;;;AA0CA,IAAM,KAEF,GACA,GACA,OAED,MAA0B;AAGzB,CAFA,EAAM,gBAAgB,EAEtB,EAAsB,EAAM,CAAC,WAAW;AACtC,KAAQ;GACR;;AAGN,SAAgB,EAAe,EAC7B,gBACA,gBACA,aAAU,IACV,aACA,eAAY,IACZ,iBAAc,IACd,SACA,sBAAmB,IACnB,gBACA,gBACA,sBACsB;CACtB,IAAM,CAAC,GAAc,KAAmB,EAA6B,KAAK,EACpE,IAAoB,EAAQ,GAC5B,KAAmB,MAAyC;AAChE,IAAgB,EAAM,cAAc;IAEhC,UAAwB;AAC5B,IAAgB,KAAK;IAEjB,CAAC,GAAW,KAAgB,EAAS,GAAM,EAE3C,IAAqB,EAA6B,KAAK,EAEvD,UAA0B;AAI9B,EAFA,EAAa,GAAK,EAElB,iBAAiB;AACf,KAAa,GAAM;KAClB,IAAK;IAGJ,EAAE,eAAY,GACd,EAAE,gBAAa,aAAU,cAAW,aAAU,aAAU,eAC5D,GAEI,EAAE,MAAM,MAAe,EAC3B,GACA,EACD,EAEK,IAAQ,GAAY,OAEtB,IAAO,IACL,IAAe,KAEjB,GAAG,EAA2B,OAAO,UAAU,KAE7C,IAAQ,IAAW,GAAG,EAAS,gBAAgB,KAAA;AACrD,CAAI,IACF,IAAO,IACE,KAAa,IACtB,IAAO,GAAG,EAAU,GAAG,MACd,MACT,IAAO;CAET,IAAM,IACJ,kBAAC,GAAD;EACe;EACH;EACV,YAAY;EACK;EACjB,CAAA,EAEE,IACJ,kBAAA,GAAA,EAAA,UAAA;EACG,CAAC,KACA,kBAAC,GAAD;GACE,MAAM;GACN,MAAK;GACL,UAAU;GACI,CAAA;EAEjB,KAAe;EACf,CAAC,KACA,kBAAC,KAAD;GACE,MAAM;GACN,QAAQ,IAAmB,WAAW;GACtC,KAAK,IAAmB,eAAe;GACvC,WAAW,4BACT,IAAU,oBAAoB;aAG/B;GACC,CAAA;EAEN,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,KAAD;KAAG,WAAU;eAAb,CAKE,kBAAC,KAAD;MACE,MAAM;MACN,QAAQ,IAAmB,WAAW;MACtC,KAAK,IAAmB,eAAe;MACvC,UAAU;MACV,WAAW;gBAEV;MACC,CAAA,EACH,KACC,kBAAC,GAAD;MACE,OAAM;MACN,WAAU;MACV,gBAAgB;gBAEhB,kBAAC,QAAD,EAAA,UAAO,GAA4B,CAAA;MAC3B,CAAA,CAEV;;KACF,KAAY,MACZ,kBAAC,KAAD,EAAA,UAAA;KACG;KAAS;KAAE,IAAW,QAAQ;KAAG;KAAE;KAClC,EAAA,CAAA;IAEL,CAAC,KAAa,CAAC,CAAC,KACf,kBAAC,KAAD;KACE,KAAK;KACL,WAAW;KACX,SAAS,EACP,GACA,GACA,EACD;KACD,YAAY,EACV,GACA,GACA,EACD;KACD,UAAU;eAbZ,CAeE,kBAAC,QAAD;MAAM,OAAO;OAAE,cAAc;OAAO,eAAe;OAAO;gBACxD,kBAAC,KAAD;OAAG,WAAW;iBAAS,GAAG,EAAS;OAAkB,CAAA;MAChD,CAAA,EACP,kBAAC,GAAD,EAAY,CAAA,CACV;;IAEL,KACC,kBAAC,KAAD;KACE,MAAM;KACN,QAAO;KACP,KAAI;KACJ,OAAO,EAAE,OAAO,eAAe;KAC/B,UAAU;eACX;KAEG,CAAA;IAEF;;EAEL,KAAe,EAAY,SAAS,KACnC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,MAAK;GACL,UAAU;GACV,SAAS;GACT,IAAI,EAAE,IAAI,GAAG;aAEb,kBAAC,GAAD;IAAS,MAAK;IAAmB,MAAM;IAAS,CAAA;GACrC,CAAA,EACb,kBAAC,GAAD;GACe;GACA;GACb,UAAU;GACV,SAAS;GACT,MAAM;GACN,CAAA,CACD,EAAA,CAAA;EAEJ,EAAA,CAAA;AAuBL,QApBK,IAqBH,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,OAAD;EAAK,WAAW;YAAsC;EAAiB,CAAA,EACtE,KACC,kBAAC,GAAD;EAA4B;EAA0B;EAAe,CAAA,CAElE,EAAA,CAAA,GAxBL,kBAAC,GAAD;EACE,WAAW;EACX,KAAI,OAAU,GACX,EAAM,YAAY,KAAK,KAAK,GAAG,EAC9B,kBAAkB;GAChB,UAAU;GACV,SAAS;GACT,OAAO;GACR,EACF,EACF;YAEA;EACI,CAAA;;AAeb,SAAgB,IAAwB;AACtC,QACE,kBAAC,GAAD;EACE,WAAU;EACV,OAAO,EAAE,OAAO,SAAS;YAF3B,CAIE,kBAAC,GAAD;GAAU,SAAQ;GAAW,OAAM;GAAO,QAAO;GAAS,CAAA,EAC1D,kBAAC,OAAD;GAAK,OAAO,EAAE,OAAO,SAAS;aAC5B,kBAAC,GAAD;IAAe,SAAS;IAAG,SAAS;IAAK,CAAA;GACrC,CAAA,CACD"}
+{"version":3,"file":"UserCardMedium.js","names":[],"sources":["../../../src/components/UserCard/UserCardMedium.tsx"],"sourcesContent":["import IconCopy from '@/assets/icons/IconCopy'\nimport ValidatedProfileIcon from '@/assets/icons/ValidatedProfile'\nimport { useGetUserBundle } from '@/synapse-queries/user/useUserBundle'\nimport { SynapseConstants } from '@/utils'\nimport { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport { Card, IconButton, Skeleton, Tooltip } from '@mui/material'\nimport { UserProfile } from '@sage-bionetworks/synapse-types'\nimport {\n  MouseEvent,\n  MutableRefObject,\n  SyntheticEvent,\n  useRef,\n  useState,\n} from 'react'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { SkeletonTable } from '../Skeleton/SkeletonTable'\nimport { ToastMessage } from '../ToastMessage/ToastMessage'\nimport { Avatar } from './Avatar'\nimport UserCardContextMenu, { MenuAction } from './UserCardContextMenu'\nimport { UserCardLarge } from './UserCardLarge'\nimport { copyStringToClipboard } from '@/utils/functions/StringUtils'\n\nexport type UserCardMediumProps = {\n  userProfile: UserProfile\n  menuActions?: MenuAction[]\n  imageURL?: string\n  hideEmail?: boolean\n  isLarge?: boolean\n  link?: string\n  openLinkInNewTab?: boolean\n  disableLink?: boolean\n  isCertified?: boolean\n  isValidated?: boolean\n  isLoadingAvatar?: boolean\n}\n\n/**\n * Function handles copying to clipboard the user's email address\n *\n * @param {string} value the email address of the user\n * @returns\n */\nconst copyToClipboard =\n  (\n    ref: MutableRefObject<HTMLElement | null>,\n    value: string,\n    onCopy: () => void,\n  ) =>\n  (event: SyntheticEvent) => {\n    event.preventDefault()\n\n    copyStringToClipboard(value).then(() => {\n      onCopy()\n    })\n  }\n\nexport function UserCardMedium({\n  userProfile,\n  menuActions,\n  isLarge = false,\n  imageURL,\n  hideEmail = false,\n  disableLink = false,\n  link,\n  openLinkInNewTab = false,\n  isValidated,\n  isCertified,\n  isLoadingAvatar,\n}: UserCardMediumProps) {\n  const [menuAnchorEl, setMenuAnchorEl] = useState<null | HTMLElement>(null)\n  const isContextMenuOpen = Boolean(menuAnchorEl)\n  const handleMenuClick = (event: MouseEvent<HTMLButtonElement>) => {\n    setMenuAnchorEl(event.currentTarget)\n  }\n  const handleMenuClose = () => {\n    setMenuAnchorEl(null)\n  }\n  const [showModal, setShowModal] = useState(false)\n\n  const copyToClipboardRef = useRef<HTMLParagraphElement>(null)\n\n  const onCopyToClipboard = () => {\n    // show modal and hide after 4 seconds, the timing is per Material Design\n    setShowModal(true)\n    // hide after 4 seconds\n    setTimeout(() => {\n      setShowModal(false)\n    }, 4000)\n  }\n\n  const { ownerId } = userProfile\n  const { displayName, userName, firstName, lastName, position, company } =\n    userProfile\n\n  const { data: userBundle } = useGetUserBundle(\n    ownerId,\n    SynapseConstants.USER_BUNDLE_MASK_ORCID,\n  )\n\n  const ORCID = userBundle?.ORCID\n\n  let name = ''\n  const linkLocation = link\n    ? link\n    : `${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Profile:${ownerId}`\n  // linkLocation is overriden by custom click handler\n  const email = userName ? `${userName}@synapse.org` : undefined\n  if (displayName) {\n    name = displayName\n  } else if (firstName && lastName) {\n    name = `${firstName} ${lastName}`\n  } else if (userName) {\n    name = userName\n  }\n  const avatar = (\n    <Avatar\n      userProfile={userProfile}\n      imageURL={imageURL}\n      avatarSize={'LARGE'}\n      isLoadingAvatar={isLoadingAvatar}\n    />\n  )\n  const mediumCard = (\n    <>\n      {!hideEmail && (\n        <ToastMessage\n          show={showModal}\n          text=\"Email address copied to clipboard\"\n          autohide={true}\n        ></ToastMessage>\n      )}\n      {disableLink && avatar}\n      {!disableLink && (\n        <a\n          href={linkLocation}\n          target={openLinkInNewTab ? '_blank' : ''}\n          rel={openLinkInNewTab ? 'noreferrer' : ''}\n          className={`SRC-no-border-bottom-imp ${\n            isLarge ? 'SRC-isLargeCard' : ''\n          }`}\n        >\n          {avatar}\n        </a>\n      )}\n      <div className=\"SRC-cardContent\">\n        <p className=\"SRC-eqHeightRow SRC-userCardName\">\n          {/*\n              make the header clickable for all cards\n              consolidate click events\n          */}\n          <a\n            href={linkLocation}\n            target={openLinkInNewTab ? '_blank' : ''}\n            rel={openLinkInNewTab ? 'noreferrer' : ''}\n            tabIndex={0}\n            className={'SRC-hand-cursor'}\n          >\n            {name}\n          </a>\n          {isValidated && (\n            <Tooltip\n              title=\"This user profile has been validated.\"\n              placement=\"bottom\"\n              enterNextDelay={300}\n            >\n              <span>{ValidatedProfileIcon}</span>\n            </Tooltip>\n          )}\n        </p>\n        {(position || company) && (\n          <p>\n            {position} {position ? ' / ' : ''} {company}\n          </p>\n        )}\n        {!hideEmail && !!email && (\n          <p\n            ref={copyToClipboardRef}\n            className={`SRC-hand-cursor SRC-eqHeightRow SRC-inlineFlex SRC-emailText SRC-cardSvg`}\n            onClick={copyToClipboard(\n              copyToClipboardRef,\n              email,\n              onCopyToClipboard,\n            )}\n            onKeyPress={copyToClipboard(\n              copyToClipboardRef,\n              email,\n              onCopyToClipboard,\n            )}\n            tabIndex={0}\n          >\n            <span style={{ paddingRight: '5px', paddingBottom: '2px' }}>\n              <a className={`link`}>{`${userName}@synapse.org`}</a>\n            </span>\n            <IconCopy />\n          </p>\n        )}\n        {ORCID && (\n          <a\n            href={ORCID}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            style={{ width: 'fit-content' }}\n            tabIndex={0}\n          >\n            View ORCID\n          </a>\n        )}\n      </div>\n      {/* conditionally render menu actions, if there are no actions then we don't show the button */}\n      {menuActions && menuActions.length > 0 && (\n        <>\n          <IconButton\n            role=\"menu\"\n            tabIndex={0}\n            onClick={handleMenuClick}\n            sx={{ mx: 1 }}\n          >\n            <IconSvg icon=\"verticalEllipsis\" wrap={false} />\n          </IconButton>\n          <UserCardContextMenu\n            menuActions={menuActions}\n            userProfile={userProfile}\n            anchorEl={menuAnchorEl}\n            onClose={handleMenuClose}\n            open={isContextMenuOpen}\n          />\n        </>\n      )}\n    </>\n  )\n\n  if (!isLarge) {\n    return (\n      <Card\n        className={`SRC-userCard SRC-userCardMediumUp`}\n        sx={theme => ({\n          [theme.breakpoints.down('sm')]: {\n            '&.SRC-userCard': {\n              minWidth: 'unset',\n              padding: '0 16px',\n              width: '100%',\n            },\n          },\n        })}\n      >\n        {mediumCard}\n      </Card>\n    )\n  }\n  // else return medium card inside large component\n  // when the component is large we have to set the click handler to wrap both the top and bottom portion\n  return (\n    <Card>\n      <div className={`SRC-userCard SRC-userCardMediumUp`}>{mediumCard}</div>\n      {isLarge && (\n        <UserCardLarge userProfile={userProfile} isCertified={isCertified} />\n      )}\n    </Card>\n  )\n}\n\nexport function LoadingUserCardMedium() {\n  return (\n    <Card\n      className=\"SRC-userCard SRC-userCardMediumUp\"\n      style={{ width: '380px' }}\n    >\n      <Skeleton variant=\"circular\" width=\"80px\" height=\"80px\" />\n      <div style={{ width: '250px' }}>\n        <SkeletonTable numCols={1} numRows={2} />\n      </div>\n    </Card>\n  )\n}\n\nexport default UserCardMedium\n"],"mappings":"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"}

package/dist/components/UserCardList/UserCardList.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserCardList.js","names":[],"sources":["../../../src/components/UserCardList/UserCardList.tsx"],"sourcesContent":["import { UserProfileList } from '@/synapse-client/SynapseClient'\nimport { getUserProfileWithProfilePicAttached } from '@/utils/functions/getUserData'\nimport { MEDIUM_USER_CARD, UserCardSize } from '@/utils/SynapseConstants'\nimport {\n  ColumnTypeEnum,\n  RowSet,\n  UserProfile,\n} from '@sage-bionetworks/synapse-types'\nimport { without } from 'lodash-es'\nimport { Component } from 'react'\nimport UserCard from '../UserCard/UserCard'\n\nexport type UserCardListProps = {\n  /* The list of user IDs or null values to render. For null values, the card will be rendered with table data supplied by `firstName`, `lastName`, and `institution` columns supplied by the data prop.  */\n  list: (string | null)[]\n  size?: UserCardSize\n  // Data should not be needed, however, it gives the option to fill in a user profile with other column\n  // fields. This is required specifically by AMP-AD Explore/People page\n  rowSet?: RowSet\n}\n\nexport type UserCardListState = {\n  userProfileMap: Record<string, UserProfile>\n}\nexport class UserCardList extends Component<\n  UserCardListProps,\n  UserCardListState\n> {\n  constructor(props: UserCardListProps) {\n    super(props)\n    this.state = {\n      userProfileMap: {},\n    }\n    this.update = this.update.bind(this)\n  }\n\n  componentDidMount() {\n    const { list } = this.props\n    this.update(list)\n  }\n\n  componentDidUpdate(prevProps: UserCardListProps) {\n    const priorListOfIds = prevProps.list\n    const newValues = without(\n      this.props.list.filter(el => el),\n      ...priorListOfIds,\n    )\n    // check that the props have changed by seeing that at least one element is different\n    if (newValues.length > 0) {\n      this.update(newValues)\n    }\n  }\n\n  update(list: (string | null)[]) {\n    getUserProfileWithProfilePicAttached(\n      list.filter((el): el is string => !!el),\n    )\n      .then((data: UserProfileList) => {\n        const newEntries: Record<string, UserProfile> = {}\n        data.list.forEach(el => {\n          const { ownerId } = el\n          newEntries[ownerId] = el\n        })\n        this.setState({\n          userProfileMap: { ...this.state.userProfileMap, ...newEntries },\n        })\n      })\n      .catch((err: string) => {\n        console.error('Error on batch call =', err)\n      })\n  }\n\n  /**\n   * Given data this will find rows where there is no userId columnType and create faux user profiles\n   * using firstName, lastName, and institution (company in UserProfile object).\n   * @param {RowSet} rowSet\n   * @returns list of UserProfiles with firstName, lastName, company, userName (first letter of firstName) filled out.\n   * @memberof UserCardList\n   */\n  manuallyExtractData(rowSet: RowSet) {\n    const firstNameIndex = rowSet.headers.findIndex(\n      el => el.name === 'firstName',\n    )\n    const lastNameIndex = rowSet.headers.findIndex(el => el.name === 'lastName')\n    const institutionIndex = rowSet.headers.findIndex(\n      el => el.name === 'institution',\n    )\n    const ownerId = rowSet.headers.findIndex(\n      el => el.columnType === ColumnTypeEnum.USERID,\n    )\n    const nullOwnerIdsRows = rowSet.rows.filter(el => !el.values[ownerId])\n    return nullOwnerIdsRows.map<Omit<UserProfile, 'ownerId'>>(el => {\n      const values = el.values\n      return {\n        firstName: values[firstNameIndex] ?? '',\n        lastName: values[lastNameIndex] ?? '',\n        company: values[institutionIndex] ?? undefined,\n        ownerId: null,\n        userName: values[firstNameIndex]\n          ? (values[firstNameIndex][0] ?? '')\n          : '',\n      }\n    })\n  }\n\n  render() {\n    const { size = MEDIUM_USER_CARD, rowSet, list } = this.props\n    const { userProfileMap = {} } = this.state\n    const fauxUserProfilesList = rowSet && this.manuallyExtractData(rowSet)\n    let fauxUserProfileIndex = 0\n    return (\n      <div className=\"SRC-card-grid-row\">\n        {\n          // we loop through the list from the props because thats the 'active set of data' whereas the data stored in state could be stale\n          list.map(ownerId => {\n            const userProfile = ownerId != null ? userProfileMap[ownerId] : null\n            if (userProfile) {\n              return (\n                <div\n                  key={JSON.stringify(userProfile)}\n                  className=\"SRC-grid-item SRC-narrow-grid-item\"\n                >\n                  <UserCard\n                    size={size}\n                    preSignedURL={userProfile.clientPreSignedURL}\n                    userProfile={userProfile}\n                  />\n                </div>\n              )\n            }\n            const fauxUserProfile =\n              fauxUserProfilesList && fauxUserProfilesList[fauxUserProfileIndex]\n            if (!fauxUserProfile) {\n              // This could happen in one of two cases:\n              // - The props just updated with a new userlist where the data is being gathered for this particular user\n              //   OR there is no mapping for this user\n              return false\n            }\n            fauxUserProfileIndex += 1\n            return (\n              <div\n                key={JSON.stringify(fauxUserProfile)}\n                className=\"SRC-grid-item SRC-narrow-grid-item\"\n              >\n                <UserCard\n                  disableLink={true}\n                  hideEmail={true}\n                  size={size}\n                  // TODO: Modify UserCard to accept a fake profile with no ownerId field, and remove this cast.\n                  userProfile={fauxUserProfile as UserProfile}\n                />\n              </div>\n            )\n          })\n        }\n      </div>\n    )\n  }\n}\nexport default UserCardList\n"],"mappings":";;;;;;;;AAwBA,IAAa,IAAb,cAAkC,EAGhC;CACA,YAAY,GAA0B;AAKpC,EAJA,MAAM,EAAM,EACZ,KAAK,QAAQ,EACX,gBAAgB,EAAE,EACnB,EACD,KAAK,SAAS,KAAK,OAAO,KAAK,KAAK;;CAGtC,oBAAoB;EAClB,IAAM,EAAE,YAAS,KAAK;AACtB,OAAK,OAAO,EAAK;;CAGnB,mBAAmB,GAA8B;EAC/C,IAAM,IAAiB,EAAU,MAC3B,IAAY,EAChB,KAAK,MAAM,KAAK,QAAO,MAAM,EAAG,EAChC,GAAG,EACJ;AAED,EAAI,EAAU,SAAS,KACrB,KAAK,OAAO,EAAU;;CAI1B,OAAO,GAAyB;AAC9B,IACE,EAAK,QAAQ,MAAqB,CAAC,CAAC,EAAG,CACxC,CACE,MAAM,MAA0B;GAC/B,IAAM,IAA0C,EAAE;AAKlD,GAJA,EAAK,KAAK,SAAQ,MAAM;IACtB,IAAM,EAAE,eAAY;AACpB,MAAW,KAAW;KACtB,EACF,KAAK,SAAS,EACZ,gBAAgB;IAAE,GAAG,KAAK,MAAM;IAAgB,GAAG;IAAY,EAChE,CAAC;IACF,CACD,OAAO,MAAgB;AACtB,WAAQ,MAAM,yBAAyB,EAAI;IAC3C;;CAUN,oBAAoB,GAAgB;EAClC,IAAM,IAAiB,EAAO,QAAQ,WACpC,MAAM,EAAG,SAAS,YACnB,EACK,IAAgB,EAAO,QAAQ,WAAU,MAAM,EAAG,SAAS,WAAW,EACtE,IAAmB,EAAO,QAAQ,WACtC,MAAM,EAAG,SAAS,cACnB,EACK,IAAU,EAAO,QAAQ,WAC7B,MAAM,EAAG,eAAe,EAAe,OACxC;AAED,SADyB,EAAO,KAAK,QAAO,MAAM,CAAC,EAAG,OAAO,GACtD,CAAiB,KAAkC,MAAM;GAC9D,IAAM,IAAS,EAAG;AAClB,UAAO;IACL,WAAW,EAAO,MAAmB;IACrC,UAAU,EAAO,MAAkB;IACnC,SAAS,EAAO,MAAqB,KAAA;IACrC,SAAS;IACT,UAAU,EAAO,KACZ,EAAO,GAAgB,MAAM,KAC9B;IACL;IACD;;CAGJ,SAAS;EACP,IAAM,EAAE,UAAO,GAAkB,WAAQ,YAAS,KAAK,OACjD,EAAE,oBAAiB,EAAE,KAAK,KAAK,OAC/B,IAAuB,KAAU,KAAK,oBAAoB,EAAO,EACnE,IAAuB;AAC3B,SACE,kBAAC,OAAD;GAAK,WAAU;aAGX,EAAK,KAAI,MAAW;IAClB,IAAM,IAAc,KAAW,OAAiC,OAA1B,EAAe;AACrD,QAAI,EACF,QACE,kBAAC,OAAD;KAEE,WAAU;eAEV,kBAAC,GAAD;MACQ;MACN,cAAc,EAAY;MACb;MACb,CAAA;KACE,EARC,KAAK,UAAU,EAAY,CAQ5B;IAGV,IAAM,IACJ,KAAwB,EAAqB;AAQ/C,WAPK,KAML,KAAwB,GAEtB,kBAAC,OAAD;KAEE,WAAU;eAEV,kBAAC,GAAD;MACE,aAAa;MACb,WAAW;MACL;MAEN,aAAa;MACb,CAAA;KACE,EAVC,KAAK,UAAU,EAAgB,CAUhC,IAfC;KAiBT;GAEA,CAAA"}
+{"version":3,"file":"UserCardList.js","names":[],"sources":["../../../src/components/UserCardList/UserCardList.tsx"],"sourcesContent":["import { UserProfileList } from '@/synapse-client/SynapseClient'\nimport { getUserProfileWithProfilePicAttached } from '@/utils/functions/getUserData'\nimport { MEDIUM_USER_CARD, UserCardSize } from '@/utils/SynapseConstants'\nimport {\n  ColumnTypeEnum,\n  RowSet,\n  UserProfile,\n} from '@sage-bionetworks/synapse-types'\nimport { without } from 'lodash-es'\nimport { Component } from 'react'\nimport UserCard from '../UserCard/UserCard'\n\nexport type UserCardListProps = {\n  /* The list of user IDs or null values to render. For null values, the card will be rendered with table data supplied by `firstName`, `lastName`, and `institution` columns supplied by the data prop.  */\n  list: (string | null)[]\n  size?: UserCardSize\n  // Data should not be needed, however, it gives the option to fill in a user profile with other column\n  // fields. This is required specifically by AMP-AD Explore/People page\n  rowSet?: RowSet\n}\n\nexport type UserCardListState = {\n  userProfileMap: Record<string, UserProfile>\n}\nexport class UserCardList extends Component<\n  UserCardListProps,\n  UserCardListState\n> {\n  constructor(props: UserCardListProps) {\n    super(props)\n    this.state = {\n      userProfileMap: {},\n    }\n    this.update = this.update.bind(this)\n  }\n\n  componentDidMount() {\n    const { list } = this.props\n    this.update(list)\n  }\n\n  componentDidUpdate(prevProps: UserCardListProps) {\n    const priorListOfIds = prevProps.list\n    const newValues = without(\n      this.props.list.filter(el => el),\n      ...priorListOfIds,\n    )\n    // check that the props have changed by seeing that at least one element is different\n    if (newValues.length > 0) {\n      this.update(newValues)\n    }\n  }\n\n  update(list: (string | null)[]) {\n    getUserProfileWithProfilePicAttached(\n      list.filter((el): el is string => !!el),\n    )\n      .then((data: UserProfileList) => {\n        const newEntries: Record<string, UserProfile> = {}\n        data.list.forEach(el => {\n          const { ownerId } = el\n          newEntries[ownerId] = el\n        })\n        this.setState({\n          userProfileMap: { ...this.state.userProfileMap, ...newEntries },\n        })\n      })\n      .catch((err: string) => {\n        console.error('Error on batch call =', err)\n      })\n  }\n\n  /**\n   * Given data this will find rows where there is no userId columnType and create faux user profiles\n   * using firstName, lastName, and institution (company in UserProfile object).\n   * @param {RowSet} rowSet\n   * @returns list of UserProfiles with firstName, lastName, company, userName (first letter of firstName) filled out.\n   * @memberof UserCardList\n   */\n  manuallyExtractData(rowSet: RowSet) {\n    const firstNameIndex = rowSet.headers.findIndex(\n      el => el.name === 'firstName',\n    )\n    const lastNameIndex = rowSet.headers.findIndex(el => el.name === 'lastName')\n    const institutionIndex = rowSet.headers.findIndex(\n      el => el.name === 'institution',\n    )\n    const ownerId = rowSet.headers.findIndex(\n      el => el.columnType === ColumnTypeEnum.USERID,\n    )\n    const nullOwnerIdsRows = rowSet.rows.filter(el => !el.values[ownerId])\n    return nullOwnerIdsRows.map<Omit<UserProfile, 'ownerId'>>(el => {\n      const values = el.values\n      return {\n        firstName: values[firstNameIndex] ?? '',\n        lastName: values[lastNameIndex] ?? '',\n        company: values[institutionIndex] ?? undefined,\n        ownerId: null,\n        userName: values[firstNameIndex]\n          ? (values[firstNameIndex][0] ?? '')\n          : '',\n      }\n    })\n  }\n\n  render() {\n    const { size = MEDIUM_USER_CARD, rowSet, list } = this.props\n    const { userProfileMap = {} } = this.state\n    const fauxUserProfilesList = rowSet && this.manuallyExtractData(rowSet)\n    let fauxUserProfileIndex = 0\n    return (\n      <div className=\"SRC-card-grid-row\">\n        {\n          // we loop through the list from the props because thats the 'active set of data' whereas the data stored in state could be stale\n          list.map(ownerId => {\n            const userProfile = ownerId != null ? userProfileMap[ownerId] : null\n            if (userProfile) {\n              return (\n                <div\n                  key={JSON.stringify(userProfile)}\n                  className=\"SRC-grid-item SRC-narrow-grid-item\"\n                >\n                  <UserCard\n                    size={size}\n                    preSignedURL={userProfile.clientPreSignedURL}\n                    userProfile={userProfile}\n                  />\n                </div>\n              )\n            }\n            const fauxUserProfile =\n              fauxUserProfilesList && fauxUserProfilesList[fauxUserProfileIndex]\n            if (!fauxUserProfile) {\n              // This could happen in one of two cases:\n              // - The props just updated with a new userlist where the data is being gathered for this particular user\n              //   OR there is no mapping for this user\n              return false\n            }\n            fauxUserProfileIndex += 1\n            return (\n              <div\n                key={JSON.stringify(fauxUserProfile)}\n                className=\"SRC-grid-item SRC-narrow-grid-item\"\n              >\n                <UserCard\n                  disableLink={true}\n                  hideEmail={true}\n                  size={size}\n                  // TODO: Modify UserCard to accept a fake profile with no ownerId field, and remove this cast.\n                  userProfile={fauxUserProfile as UserProfile}\n                />\n              </div>\n            )\n          })\n        }\n      </div>\n    )\n  }\n}\nexport default UserCardList\n"],"mappings":";;;;;;;;AAwBA,IAAa,IAAb,cAAkC,EAGhC;CACA,YAAY,GAA0B;EAKpC,AAJA,MAAM,CAAK,GACX,KAAK,QAAQ,EACX,gBAAgB,CAAC,EACnB,GACA,KAAK,SAAS,KAAK,OAAO,KAAK,IAAI;CACrC;CAEA,oBAAoB;EAClB,IAAM,EAAE,YAAS,KAAK;EACtB,KAAK,OAAO,CAAI;CAClB;CAEA,mBAAmB,GAA8B;EAC/C,IAAM,IAAiB,EAAU,MAC3B,IAAY,EAChB,KAAK,MAAM,KAAK,QAAO,MAAM,CAAE,GAC/B,GAAG,CACL;EAEA,AAAI,EAAU,SAAS,KACrB,KAAK,OAAO,CAAS;CAEzB;CAEA,OAAO,GAAyB;EAC9B,EACE,EAAK,QAAQ,MAAqB,CAAC,CAAC,CAAE,CACxC,EACG,MAAM,MAA0B;GAC/B,IAAM,IAA0C,CAAC;GAKjD,AAJA,EAAK,KAAK,SAAQ,MAAM;IACtB,IAAM,EAAE,eAAY;IACpB,EAAW,KAAW;GACxB,CAAC,GACD,KAAK,SAAS,EACZ,gBAAgB;IAAE,GAAG,KAAK,MAAM;IAAgB,GAAG;GAAW,EAChE,CAAC;EACH,CAAC,EACA,OAAO,MAAgB;GACtB,QAAQ,MAAM,yBAAyB,CAAG;EAC5C,CAAC;CACL;CASA,oBAAoB,GAAgB;EAClC,IAAM,IAAiB,EAAO,QAAQ,WACpC,MAAM,EAAG,SAAS,WACpB,GACM,IAAgB,EAAO,QAAQ,WAAU,MAAM,EAAG,SAAS,UAAU,GACrE,IAAmB,EAAO,QAAQ,WACtC,MAAM,EAAG,SAAS,aACpB,GACM,IAAU,EAAO,QAAQ,WAC7B,MAAM,EAAG,eAAe,EAAe,MACzC;EAEA,OADyB,EAAO,KAAK,QAAO,MAAM,CAAC,EAAG,OAAO,EACtD,EAAiB,KAAkC,MAAM;GAC9D,IAAM,IAAS,EAAG;GAClB,OAAO;IACL,WAAW,EAAO,MAAmB;IACrC,UAAU,EAAO,MAAkB;IACnC,SAAS,EAAO,MAAqB,KAAA;IACrC,SAAS;IACT,UAAU,EAAO,KACZ,EAAO,GAAgB,MAAM,KAC9B;GACN;EACF,CAAC;CACH;CAEA,SAAS;EACP,IAAM,EAAE,UAAO,GAAkB,WAAQ,YAAS,KAAK,OACjD,EAAE,oBAAiB,CAAC,MAAM,KAAK,OAC/B,IAAuB,KAAU,KAAK,oBAAoB,CAAM,GAClE,IAAuB;EAC3B,OACE,kBAAC,OAAD;GAAK,WAAU;aAGX,EAAK,KAAI,MAAW;IAClB,IAAM,IAAc,KAAW,OAAiC,OAA1B,EAAe;IACrD,IAAI,GACF,OACE,kBAAC,OAAD;KAEE,WAAU;eAEV,kBAAC,GAAD;MACQ;MACN,cAAc,EAAY;MACb;KACd,CAAA;IACE,GARE,KAAK,UAAU,CAAW,CAQ5B;IAGT,IAAM,IACJ,KAAwB,EAAqB;IAQ/C,OAPK,KAML,KAAwB,GAEtB,kBAAC,OAAD;KAEE,WAAU;eAEV,kBAAC,GAAD;MACE,aAAa;MACb,WAAW;MACL;MAEN,aAAa;KACd,CAAA;IACE,GAVE,KAAK,UAAU,CAAe,CAUhC,KAfE;GAiBX,CAAC;EAEA,CAAA;CAET;AACF"}

package/dist/components/UserCardList/UserCardListGroups/UserCardListGroups.Desktop.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserCardListGroups.Desktop.js","names":[],"sources":["../../../../src/components/UserCardList/UserCardListGroups/UserCardListGroups.Desktop.tsx"],"sourcesContent":["import { useState } from 'react'\nimport UserCardListRotate from '../UserCardListRotate'\nimport { FacetColumnValuesRequest } from '@sage-bionetworks/synapse-types'\nimport { UserCardListGroupsProps } from './UserCardListGroups'\n\nexport default function UserCardListGroupsDesktop(\n  props: UserCardListGroupsProps,\n) {\n  const [selectedGroupIndex, setSelectedGroupIndex] = useState<number>(0)\n  const { columnName, facetValues, ...rest } = props\n  const selectedFacet: FacetColumnValuesRequest = {\n    columnName,\n    facetValues: [facetValues[selectedGroupIndex]],\n    concreteType:\n      'org.sagebionetworks.repo.model.table.FacetColumnValuesRequest',\n  }\n  return (\n    <div className=\"control-container\">\n      <div className=\"button-container\">\n        {facetValues?.map((el, curIndex) => {\n          return (\n            <button\n              className={selectedGroupIndex === curIndex ? 'isSelected' : ''}\n              onClick={() => setSelectedGroupIndex(curIndex)}\n              key={el}\n            >\n              {el}\n            </button>\n          )\n        })}\n        {/*\n              This button keeps the border line in the button container running from top to bottom,\n              it doesn't have any functionality.\n            */}\n        <button className=\"gap-fill\" />\n      </div>\n      <div className=\"content-container\">\n        <UserCardListRotate\n          key={`UserCardListGroup-${selectedGroupIndex}`}\n          {...rest}\n          selectedFacets={[selectedFacet]}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;AAKA,SAAwB,EACtB,GACA;CACA,IAAM,CAAC,GAAoB,KAAyB,EAAiB,EAAE,EACjE,EAAE,eAAY,gBAAa,GAAG,MAAS,GACvC,IAA0C;EAC9C;EACA,aAAa,CAAC,EAAY,GAAoB;EAC9C,cACE;EACH;AACD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,GAAa,KAAK,GAAI,MAEnB,kBAAC,UAAD;IACE,WAAW,MAAuB,IAAW,eAAe;IAC5D,eAAe,EAAsB,EAAS;cAG7C;IACM,EAHF,EAGE,CAEX,EAKF,kBAAC,UAAD,EAAQ,WAAU,YAAa,CAAA,CAC3B;MACN,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IAEE,GAAI;IACJ,gBAAgB,CAAC,EAAc;IAC/B,EAHK,qBAAqB,IAG1B;GACE,CAAA,CACF"}
+{"version":3,"file":"UserCardListGroups.Desktop.js","names":[],"sources":["../../../../src/components/UserCardList/UserCardListGroups/UserCardListGroups.Desktop.tsx"],"sourcesContent":["import { useState } from 'react'\nimport UserCardListRotate from '../UserCardListRotate'\nimport { FacetColumnValuesRequest } from '@sage-bionetworks/synapse-types'\nimport { UserCardListGroupsProps } from './UserCardListGroups'\n\nexport default function UserCardListGroupsDesktop(\n  props: UserCardListGroupsProps,\n) {\n  const [selectedGroupIndex, setSelectedGroupIndex] = useState<number>(0)\n  const { columnName, facetValues, ...rest } = props\n  const selectedFacet: FacetColumnValuesRequest = {\n    columnName,\n    facetValues: [facetValues[selectedGroupIndex]],\n    concreteType:\n      'org.sagebionetworks.repo.model.table.FacetColumnValuesRequest',\n  }\n  return (\n    <div className=\"control-container\">\n      <div className=\"button-container\">\n        {facetValues?.map((el, curIndex) => {\n          return (\n            <button\n              className={selectedGroupIndex === curIndex ? 'isSelected' : ''}\n              onClick={() => setSelectedGroupIndex(curIndex)}\n              key={el}\n            >\n              {el}\n            </button>\n          )\n        })}\n        {/*\n              This button keeps the border line in the button container running from top to bottom,\n              it doesn't have any functionality.\n            */}\n        <button className=\"gap-fill\" />\n      </div>\n      <div className=\"content-container\">\n        <UserCardListRotate\n          key={`UserCardListGroup-${selectedGroupIndex}`}\n          {...rest}\n          selectedFacets={[selectedFacet]}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;AAKA,SAAwB,EACtB,GACA;CACA,IAAM,CAAC,GAAoB,KAAyB,EAAiB,CAAC,GAChE,EAAE,eAAY,gBAAa,GAAG,MAAS,GACvC,IAA0C;EAC9C;EACA,aAAa,CAAC,EAAY,EAAmB;EAC7C,cACE;CACJ;CACA,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,GAAa,KAAK,GAAI,MAEnB,kBAAC,UAAD;IACE,WAAW,MAAuB,IAAW,eAAe;IAC5D,eAAe,EAAsB,CAAQ;cAG5C;GACK,GAHD,CAGC,CAEX,GAKD,kBAAC,UAAD,EAAQ,WAAU,WAAY,CAAA,CAC3B;MACL,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IAEE,GAAI;IACJ,gBAAgB,CAAC,CAAa;GAC/B,GAHM,qBAAqB,GAG3B;EACE,CAAA,CACF;;AAET"}

package/dist/components/UserCardList/UserCardListGroups/UserCardListGroups.Mobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserCardListGroups.Mobile.js","names":[],"sources":["../../../../src/components/UserCardList/UserCardListGroups/UserCardListGroups.Mobile.tsx"],"sourcesContent":["import UserCardListRotate from '../UserCardListRotate'\nimport { FacetColumnValuesRequest } from '@sage-bionetworks/synapse-types'\nimport ExpandableContent from '../../home_page/ExpandableContent'\nimport { UserCardListGroupsProps } from './UserCardListGroups'\n\nexport default function UserCardListGroupsMobile(\n  props: UserCardListGroupsProps,\n) {\n  const { columnName, facetValues, ...rest } = props\n  return (\n    <div>\n      {facetValues?.map((el, curIndex) => {\n        const facetValue = facetValues[curIndex]\n        const selectedFacet: FacetColumnValuesRequest = {\n          columnName,\n          facetValues: [facetValue],\n          concreteType:\n            'org.sagebionetworks.repo.model.table.FacetColumnValuesRequest',\n        }\n        const content = (\n          <UserCardListRotate {...rest} selectedFacets={[selectedFacet]} />\n        )\n        const title = <> {facetValue} </>\n        return (\n          <ExpandableContent\n            key={`UserCardListGroup-Mobile-${curIndex}`}\n            title={title}\n            content={content}\n          />\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;AAKA,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,eAAY,gBAAa,GAAG,MAAS;AAC7C,QACE,kBAAC,OAAD,EAAA,UACG,GAAa,KAAK,GAAI,MAAa;EAClC,IAAM,IAAa,EAAY,IACzB,IAA0C;GAC9C;GACA,aAAa,CAAC,EAAW;GACzB,cACE;GACH,EACK,IACJ,kBAAC,GAAD;GAAoB,GAAI;GAAM,gBAAgB,CAAC,EAAc;GAAI,CAAA;AAGnE,SACE,kBAAC,GAAD;GAES,OAJG,kBAAA,GAAA,EAAA,UAAA;IAAE;IAAE;IAAW;IAAI,EAAA,CAItB;GACE;GACT,EAHK,4BAA4B,IAGjC;GAEJ,EACE,CAAA"}
+{"version":3,"file":"UserCardListGroups.Mobile.js","names":[],"sources":["../../../../src/components/UserCardList/UserCardListGroups/UserCardListGroups.Mobile.tsx"],"sourcesContent":["import UserCardListRotate from '../UserCardListRotate'\nimport { FacetColumnValuesRequest } from '@sage-bionetworks/synapse-types'\nimport ExpandableContent from '../../home_page/ExpandableContent'\nimport { UserCardListGroupsProps } from './UserCardListGroups'\n\nexport default function UserCardListGroupsMobile(\n  props: UserCardListGroupsProps,\n) {\n  const { columnName, facetValues, ...rest } = props\n  return (\n    <div>\n      {facetValues?.map((el, curIndex) => {\n        const facetValue = facetValues[curIndex]\n        const selectedFacet: FacetColumnValuesRequest = {\n          columnName,\n          facetValues: [facetValue],\n          concreteType:\n            'org.sagebionetworks.repo.model.table.FacetColumnValuesRequest',\n        }\n        const content = (\n          <UserCardListRotate {...rest} selectedFacets={[selectedFacet]} />\n        )\n        const title = <> {facetValue} </>\n        return (\n          <ExpandableContent\n            key={`UserCardListGroup-Mobile-${curIndex}`}\n            title={title}\n            content={content}\n          />\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;AAKA,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,eAAY,gBAAa,GAAG,MAAS;CAC7C,OACE,kBAAC,OAAD,EAAA,UACG,GAAa,KAAK,GAAI,MAAa;EAClC,IAAM,IAAa,EAAY,IACzB,IAA0C;GAC9C;GACA,aAAa,CAAC,CAAU;GACxB,cACE;EACJ,GACM,IACJ,kBAAC,GAAD;GAAoB,GAAI;GAAM,gBAAgB,CAAC,CAAa;EAAI,CAAA;EAGlE,OACE,kBAAC,GAAD;GAES,OAJG,kBAAA,GAAA,EAAA,UAAA;IAAE;IAAE;IAAW;GAAG,EAAA,CAIrB;GACE;EACV,GAHM,4BAA4B,GAGlC;CAEL,CAAC,EACE,CAAA;AAET"}

package/dist/components/UserCardList/UserCardListGroups/UserCardListGroups.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserCardListGroups.js","names":[],"sources":["../../../../src/components/UserCardList/UserCardListGroups/UserCardListGroups.tsx"],"sourcesContent":["import LargeButton from '@/components/styled/LargeButton'\nimport useShowDesktop from '@/utils/hooks/useShowDesktop'\nimport { UserCardSize } from '@/utils/SynapseConstants'\nimport UserCardListGroupsDesktop from './UserCardListGroups.Desktop'\nimport UserCardListGroupsMobile from './UserCardListGroups.Mobile'\n\nexport type UserCardListGroupsProps = {\n  sql: string\n  columnName: string\n  facetValues: string[]\n  size: UserCardSize\n  summaryLink?: string\n  summaryLinkText?: string\n  count: number\n  useQueryResultUserData?: boolean\n}\n\nexport default function UserCardListGroups(props: UserCardListGroupsProps) {\n  const { summaryLink, summaryLinkText, ...rest } = props\n  const showDesktop = useShowDesktop()\n  return (\n    <div className={`UserCardListGroups${showDesktop ? '__Desktop' : ''}`}>\n      <div>\n        {showDesktop ? (\n          <UserCardListGroupsDesktop {...rest} />\n        ) : (\n          <UserCardListGroupsMobile {...rest} />\n        )}\n        {summaryLink && summaryLinkText && (\n          <div className=\"UserCardListGroups__summary\">\n            <LargeButton\n              color=\"secondary\"\n              variant=\"contained\"\n              href={summaryLink}\n            >\n              {summaryLinkText}\n            </LargeButton>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAiBA,SAAwB,EAAmB,GAAgC;CACzE,IAAM,EAAE,gBAAa,oBAAiB,GAAG,MAAS,GAC5C,IAAc,GAAgB;AACpC,QACE,kBAAC,OAAD;EAAK,WAAW,qBAAqB,IAAc,cAAc;YAC/D,kBAAC,OAAD,EAAA,UAAA,CAEI,EADD,IACE,IAEA,GAFD,EAA2B,GAAI,GAAQ,CAED,EAEvC,KAAe,KACd,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IACE,OAAM;IACN,SAAQ;IACR,MAAM;cAEL;IACW,CAAA;GACV,CAAA,CAEJ,EAAA,CAAA;EACF,CAAA"}
+{"version":3,"file":"UserCardListGroups.js","names":[],"sources":["../../../../src/components/UserCardList/UserCardListGroups/UserCardListGroups.tsx"],"sourcesContent":["import LargeButton from '@/components/styled/LargeButton'\nimport useShowDesktop from '@/utils/hooks/useShowDesktop'\nimport { UserCardSize } from '@/utils/SynapseConstants'\nimport UserCardListGroupsDesktop from './UserCardListGroups.Desktop'\nimport UserCardListGroupsMobile from './UserCardListGroups.Mobile'\n\nexport type UserCardListGroupsProps = {\n  sql: string\n  columnName: string\n  facetValues: string[]\n  size: UserCardSize\n  summaryLink?: string\n  summaryLinkText?: string\n  count: number\n  useQueryResultUserData?: boolean\n}\n\nexport default function UserCardListGroups(props: UserCardListGroupsProps) {\n  const { summaryLink, summaryLinkText, ...rest } = props\n  const showDesktop = useShowDesktop()\n  return (\n    <div className={`UserCardListGroups${showDesktop ? '__Desktop' : ''}`}>\n      <div>\n        {showDesktop ? (\n          <UserCardListGroupsDesktop {...rest} />\n        ) : (\n          <UserCardListGroupsMobile {...rest} />\n        )}\n        {summaryLink && summaryLinkText && (\n          <div className=\"UserCardListGroups__summary\">\n            <LargeButton\n              color=\"secondary\"\n              variant=\"contained\"\n              href={summaryLink}\n            >\n              {summaryLinkText}\n            </LargeButton>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAiBA,SAAwB,EAAmB,GAAgC;CACzE,IAAM,EAAE,gBAAa,oBAAiB,GAAG,MAAS,GAC5C,IAAc,EAAe;CACnC,OACE,kBAAC,OAAD;EAAK,WAAW,qBAAqB,IAAc,cAAc;YAC/D,kBAAC,OAAD,EAAA,UAAA,CAEI,EADD,IACE,IAEA,GAFD,EAA2B,GAAI,EAAO,CAED,GAEtC,KAAe,KACd,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IACE,OAAM;IACN,SAAQ;IACR,MAAM;cAEL;GACU,CAAA;EACV,CAAA,CAEJ,EAAA,CAAA;CACF,CAAA;AAET"}

package/dist/components/UserCardList/UserCardListRotate.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserCardListRotate.js","names":[],"sources":["../../../src/components/UserCardList/UserCardListRotate.tsx"],"sourcesContent":["import LargeButton from '@/components/styled/LargeButton'\nimport SynapseClient from '@/synapse-client'\nimport { SynapseConstants } from '@/utils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n  getAdditionalFilters,\n  parseEntityIdFromSqlStatement,\n  SQLOperator,\n} from '@/utils/functions/SqlFunctions'\nimport { LARGE_USER_CARD, UserCardSize } from '@/utils/SynapseConstants'\nimport {\n  ColumnTypeEnum,\n  FacetColumnRequest,\n  QueryBundleRequest,\n  QueryResultBundle,\n} from '@sage-bionetworks/synapse-types'\nimport { useState } from 'react'\nimport { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect'\nimport { LoadingUserCardMedium } from '../UserCard/UserCardMedium'\nimport UserCardList from './UserCardList'\n\nconst STORED_UID_KEY = 'sage_rotate_uids'\nconst DEFAULT_DISPLAY_COUNT = 3\n\nexport type UserCardListRotateProps = {\n  sql: string\n  count: number\n  useQueryResultUserData?: boolean\n  size?: UserCardSize\n  summaryLink?: string\n  summaryLinkText?: string\n  selectedFacets?: FacetColumnRequest[]\n  sqlOperator?: SQLOperator\n  searchParams?: Record<string, string>\n  additionalFiltersSessionStorageKey?: string\n}\n\nexport const getDisplayIds = (\n  ids: string[] = [],\n  count: number = DEFAULT_DISPLAY_COUNT,\n  storageUidKey: string,\n) => {\n  let storedIds: string[] = []\n  let newIds: string[] = []\n  const storedIdsStr = localStorage.getItem(storageUidKey)\n  if (storedIdsStr != null) {\n    storedIds = JSON.parse(storedIdsStr)\n  }\n  if (!storedIds.length) {\n    // no stuff in storage\n    newIds = ids.slice(0, count)\n    localStorage.setItem(storageUidKey, JSON.stringify(newIds))\n    return newIds\n  } else {\n    // has stuff in storage\n    const filtered = ids.filter(item => !storedIds.includes(item))\n    if (filtered.length >= count) {\n      newIds = filtered.slice(0, count)\n      localStorage.setItem(\n        storageUidKey,\n        JSON.stringify(storedIds.concat(newIds)),\n      )\n      return newIds\n    } else {\n      localStorage.removeItem(storageUidKey)\n      const part = ids.slice(0, count - filtered.length)\n      localStorage.setItem(storageUidKey, JSON.stringify(part))\n      return filtered.concat(part)\n    }\n  }\n}\n\nexport function UserCardListRotate({\n  sql,\n  count,\n  useQueryResultUserData = false,\n  size = LARGE_USER_CARD,\n  summaryLink,\n  summaryLinkText,\n  selectedFacets,\n  searchParams,\n  sqlOperator,\n  additionalFiltersSessionStorageKey,\n}: UserCardListRotateProps) {\n  const { accessToken } = useSynapseContext()\n  const [userIds, setUserIds] = useState<string[]>([])\n  const [queryData, setQueryData] = useState<QueryResultBundle>()\n  const [isLoading, setIsLoading] = useState<boolean>()\n  let mounted = true\n  const storageUidKey = `${STORED_UID_KEY}-${sql}-${JSON.stringify(\n    selectedFacets,\n  )}`\n  useDeepCompareEffectNoCheck(() => {\n    const fetchData = async function () {\n      setIsLoading(true)\n      const entityId = parseEntityIdFromSqlStatement(sql)\n      const additionalFilters = getAdditionalFilters(\n        searchParams,\n        sqlOperator,\n        additionalFiltersSessionStorageKey,\n      )\n      const partMask = SynapseConstants.BUNDLE_MASK_QUERY_RESULTS\n      const request: QueryBundleRequest = {\n        partMask,\n        concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n        entityId,\n        query: {\n          sql,\n          additionalFilters,\n          selectedFacets,\n        },\n      }\n\n      const queryResultBundle = await SynapseClient.getFullQueryTableResults(\n        request,\n        accessToken,\n      )\n      const { queryResult } = queryResultBundle\n      if (queryResult?.queryResults.rows) {\n        // find the column that has the USER_ID in it.\n        const ownerIdColumnIndex = queryResult.queryResults.headers.findIndex(\n          el => el.columnType === ColumnTypeEnum.USERID,\n        )\n        const ids: string[] = queryResult.queryResults.rows\n          .map(d => d.values[ownerIdColumnIndex])\n          .filter((id): id is string => id !== null)\n        if (mounted) {\n          const newIds = getDisplayIds(ids, count, storageUidKey)\n          setUserIds(newIds)\n          if (useQueryResultUserData) {\n            setQueryData(queryResultBundle)\n          }\n          setIsLoading(false)\n        }\n      } else {\n        console.log('UserCardListRotate: Error getting data')\n      }\n    }\n    fetchData()\n\n    return () => {\n      mounted = false\n    }\n  }, [sql, selectedFacets, count, accessToken, searchParams, sqlOperator])\n\n  return (\n    <div className=\"UserCardListRotate\">\n      {isLoading && <LoadingUserCardMedium />}\n      {!isLoading && userIds.length === 0 && (\n        <p className=\"font-italic\">No one was found.</p>\n      )}\n      {!isLoading && userIds.length > 0 && (\n        <UserCardList\n          list={userIds}\n          size={size}\n          rowSet={queryData?.queryResult?.queryResults}\n        />\n      )}\n      {summaryLink && summaryLinkText && (\n        <div className=\"UserCardListRotate__summary\">\n          <LargeButton color=\"secondary\" variant=\"contained\" href={summaryLink}>\n            {summaryLinkText}\n          </LargeButton>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default UserCardListRotate\n"],"mappings":";;;;;;;;;;;;;AAqBA,IAAM,IAAiB,oBACjB,IAAwB,GAejB,KACX,IAAgB,EAAE,EAClB,IAAgB,GAChB,MACG;CACH,IAAI,IAAsB,EAAE,EACxB,IAAmB,EAAE,EACnB,IAAe,aAAa,QAAQ,EAAc;AAIxD,KAHI,KAAgB,SAClB,IAAY,KAAK,MAAM,EAAa,GAEjC,EAAU,QAKR;EAEL,IAAM,IAAW,EAAI,QAAO,MAAQ,CAAC,EAAU,SAAS,EAAK,CAAC;AAC9D,MAAI,EAAS,UAAU,EAMrB,QALA,IAAS,EAAS,MAAM,GAAG,EAAM,EACjC,aAAa,QACX,GACA,KAAK,UAAU,EAAU,OAAO,EAAO,CAAC,CACzC,EACM;EACF;AACL,gBAAa,WAAW,EAAc;GACtC,IAAM,IAAO,EAAI,MAAM,GAAG,IAAQ,EAAS,OAAO;AAElD,UADA,aAAa,QAAQ,GAAe,KAAK,UAAU,EAAK,CAAC,EAClD,EAAS,OAAO,EAAK;;OAf9B,QAFA,IAAS,EAAI,MAAM,GAAG,EAAM,EAC5B,aAAa,QAAQ,GAAe,KAAK,UAAU,EAAO,CAAC,EACpD;;AAoBX,SAAgB,EAAmB,EACjC,QACA,UACA,4BAAyB,IACzB,UAAO,GACP,gBACA,oBACA,mBACA,iBACA,gBACA,yCAC0B;CAC1B,IAAM,EAAE,mBAAgB,GAAmB,EACrC,CAAC,GAAS,KAAc,EAAmB,EAAE,CAAC,EAC9C,CAAC,GAAW,KAAgB,GAA6B,EACzD,CAAC,GAAW,KAAgB,GAAmB,EACjD,IAAU,IACR,IAAgB,GAAG,EAAe,GAAG,EAAI,GAAG,KAAK,UACrD,EACD;AAsDD,QArDA,SA8CE,iBA7CoC;AAClC,IAAa,GAAK;EAQlB,IAAM,IAA8B;GAClC,UAAA;GACA,cAAc;GACd,UAVe,EAA8B,EAU7C;GACA,OAAO;IACL;IACA,mBAZsB,EACxB,GACA,GACA,EASE;IACA;IACD;GACF,EAEK,IAAoB,MAAM,EAAc,yBAC5C,GACA,EACD,EACK,EAAE,mBAAgB;AACxB,MAAI,GAAa,aAAa,MAAM;GAElC,IAAM,IAAqB,EAAY,aAAa,QAAQ,WAC1D,MAAM,EAAG,eAAe,EAAe,OACxC,EACK,IAAgB,EAAY,aAAa,KAC5C,KAAI,MAAK,EAAE,OAAO,GAAoB,CACtC,QAAQ,MAAqB,MAAO,KAAK;AAC5C,GAAI,MAEF,EADe,EAAc,GAAK,GAAO,EAC9B,CAAO,EACd,KACF,EAAa,EAAkB,EAEjC,EAAa,GAAM;QAGrB,SAAQ,IAAI,yCAAyC;IAG9C,QAEE;AACX,MAAU;KAEX;EAAC;EAAK;EAAgB;EAAO;EAAa;EAAc;EAAY,CAAC,EAGtE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACG,KAAa,kBAAC,GAAD,EAAyB,CAAA;GACtC,CAAC,KAAa,EAAQ,WAAW,KAChC,kBAAC,KAAD;IAAG,WAAU;cAAc;IAAqB,CAAA;GAEjD,CAAC,KAAa,EAAQ,SAAS,KAC9B,kBAAC,GAAD;IACE,MAAM;IACA;IACN,QAAQ,GAAW,aAAa;IAChC,CAAA;GAEH,KAAe,KACd,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KAAa,OAAM;KAAY,SAAQ;KAAY,MAAM;eACtD;KACW,CAAA;IACV,CAAA;GAEJ"}
+{"version":3,"file":"UserCardListRotate.js","names":[],"sources":["../../../src/components/UserCardList/UserCardListRotate.tsx"],"sourcesContent":["import LargeButton from '@/components/styled/LargeButton'\nimport SynapseClient from '@/synapse-client'\nimport { SynapseConstants } from '@/utils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n  getAdditionalFilters,\n  parseEntityIdFromSqlStatement,\n  SQLOperator,\n} from '@/utils/functions/SqlFunctions'\nimport { LARGE_USER_CARD, UserCardSize } from '@/utils/SynapseConstants'\nimport {\n  ColumnTypeEnum,\n  FacetColumnRequest,\n  QueryBundleRequest,\n  QueryResultBundle,\n} from '@sage-bionetworks/synapse-types'\nimport { useState } from 'react'\nimport { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect'\nimport { LoadingUserCardMedium } from '../UserCard/UserCardMedium'\nimport UserCardList from './UserCardList'\n\nconst STORED_UID_KEY = 'sage_rotate_uids'\nconst DEFAULT_DISPLAY_COUNT = 3\n\nexport type UserCardListRotateProps = {\n  sql: string\n  count: number\n  useQueryResultUserData?: boolean\n  size?: UserCardSize\n  summaryLink?: string\n  summaryLinkText?: string\n  selectedFacets?: FacetColumnRequest[]\n  sqlOperator?: SQLOperator\n  searchParams?: Record<string, string>\n  additionalFiltersSessionStorageKey?: string\n}\n\nexport const getDisplayIds = (\n  ids: string[] = [],\n  count: number = DEFAULT_DISPLAY_COUNT,\n  storageUidKey: string,\n) => {\n  let storedIds: string[] = []\n  let newIds: string[] = []\n  const storedIdsStr = localStorage.getItem(storageUidKey)\n  if (storedIdsStr != null) {\n    storedIds = JSON.parse(storedIdsStr)\n  }\n  if (!storedIds.length) {\n    // no stuff in storage\n    newIds = ids.slice(0, count)\n    localStorage.setItem(storageUidKey, JSON.stringify(newIds))\n    return newIds\n  } else {\n    // has stuff in storage\n    const filtered = ids.filter(item => !storedIds.includes(item))\n    if (filtered.length >= count) {\n      newIds = filtered.slice(0, count)\n      localStorage.setItem(\n        storageUidKey,\n        JSON.stringify(storedIds.concat(newIds)),\n      )\n      return newIds\n    } else {\n      localStorage.removeItem(storageUidKey)\n      const part = ids.slice(0, count - filtered.length)\n      localStorage.setItem(storageUidKey, JSON.stringify(part))\n      return filtered.concat(part)\n    }\n  }\n}\n\nexport function UserCardListRotate({\n  sql,\n  count,\n  useQueryResultUserData = false,\n  size = LARGE_USER_CARD,\n  summaryLink,\n  summaryLinkText,\n  selectedFacets,\n  searchParams,\n  sqlOperator,\n  additionalFiltersSessionStorageKey,\n}: UserCardListRotateProps) {\n  const { accessToken } = useSynapseContext()\n  const [userIds, setUserIds] = useState<string[]>([])\n  const [queryData, setQueryData] = useState<QueryResultBundle>()\n  const [isLoading, setIsLoading] = useState<boolean>()\n  let mounted = true\n  const storageUidKey = `${STORED_UID_KEY}-${sql}-${JSON.stringify(\n    selectedFacets,\n  )}`\n  useDeepCompareEffectNoCheck(() => {\n    const fetchData = async function () {\n      setIsLoading(true)\n      const entityId = parseEntityIdFromSqlStatement(sql)\n      const additionalFilters = getAdditionalFilters(\n        searchParams,\n        sqlOperator,\n        additionalFiltersSessionStorageKey,\n      )\n      const partMask = SynapseConstants.BUNDLE_MASK_QUERY_RESULTS\n      const request: QueryBundleRequest = {\n        partMask,\n        concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n        entityId,\n        query: {\n          sql,\n          additionalFilters,\n          selectedFacets,\n        },\n      }\n\n      const queryResultBundle = await SynapseClient.getFullQueryTableResults(\n        request,\n        accessToken,\n      )\n      const { queryResult } = queryResultBundle\n      if (queryResult?.queryResults.rows) {\n        // find the column that has the USER_ID in it.\n        const ownerIdColumnIndex = queryResult.queryResults.headers.findIndex(\n          el => el.columnType === ColumnTypeEnum.USERID,\n        )\n        const ids: string[] = queryResult.queryResults.rows\n          .map(d => d.values[ownerIdColumnIndex])\n          .filter((id): id is string => id !== null)\n        if (mounted) {\n          const newIds = getDisplayIds(ids, count, storageUidKey)\n          setUserIds(newIds)\n          if (useQueryResultUserData) {\n            setQueryData(queryResultBundle)\n          }\n          setIsLoading(false)\n        }\n      } else {\n        console.log('UserCardListRotate: Error getting data')\n      }\n    }\n    fetchData()\n\n    return () => {\n      mounted = false\n    }\n  }, [sql, selectedFacets, count, accessToken, searchParams, sqlOperator])\n\n  return (\n    <div className=\"UserCardListRotate\">\n      {isLoading && <LoadingUserCardMedium />}\n      {!isLoading && userIds.length === 0 && (\n        <p className=\"font-italic\">No one was found.</p>\n      )}\n      {!isLoading && userIds.length > 0 && (\n        <UserCardList\n          list={userIds}\n          size={size}\n          rowSet={queryData?.queryResult?.queryResults}\n        />\n      )}\n      {summaryLink && summaryLinkText && (\n        <div className=\"UserCardListRotate__summary\">\n          <LargeButton color=\"secondary\" variant=\"contained\" href={summaryLink}>\n            {summaryLinkText}\n          </LargeButton>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default UserCardListRotate\n"],"mappings":";;;;;;;;;;;;;AAqBA,IAAM,IAAiB,oBACjB,IAAwB,GAejB,KACX,IAAgB,CAAC,GACjB,IAAgB,GAChB,MACG;CACH,IAAI,IAAsB,CAAC,GACvB,IAAmB,CAAC,GAClB,IAAe,aAAa,QAAQ,CAAa;CAIvD,IAHI,KAAgB,SAClB,IAAY,KAAK,MAAM,CAAY,IAEhC,EAAU,QAKR;EAEL,IAAM,IAAW,EAAI,QAAO,MAAQ,CAAC,EAAU,SAAS,CAAI,CAAC;EAC7D,IAAI,EAAS,UAAU,GAMrB,OALA,IAAS,EAAS,MAAM,GAAG,CAAK,GAChC,aAAa,QACX,GACA,KAAK,UAAU,EAAU,OAAO,CAAM,CAAC,CACzC,GACO;EACF;GACL,aAAa,WAAW,CAAa;GACrC,IAAM,IAAO,EAAI,MAAM,GAAG,IAAQ,EAAS,MAAM;GAEjD,OADA,aAAa,QAAQ,GAAe,KAAK,UAAU,CAAI,CAAC,GACjD,EAAS,OAAO,CAAI;EAC7B;CACF,OAjBE,OAFA,IAAS,EAAI,MAAM,GAAG,CAAK,GAC3B,aAAa,QAAQ,GAAe,KAAK,UAAU,CAAM,CAAC,GACnD;AAkBX;AAEA,SAAgB,EAAmB,EACjC,QACA,UACA,4BAAyB,IACzB,UAAO,GACP,gBACA,oBACA,mBACA,iBACA,gBACA,yCAC0B;CAC1B,IAAM,EAAE,mBAAgB,EAAkB,GACpC,CAAC,GAAS,KAAc,EAAmB,CAAC,CAAC,GAC7C,CAAC,GAAW,KAAgB,EAA4B,GACxD,CAAC,GAAW,KAAgB,EAAkB,GAChD,IAAU,IACR,IAAgB,GAAG,EAAe,GAAG,EAAI,GAAG,KAAK,UACrD,CACF;CAsDA,OArDA,SA8CE,iBA7CoC;EAClC,EAAa,EAAI;EAQjB,IAAM,IAA8B;GAClC,UAAA;GACA,cAAc;GACd,UAVe,EAA8B,CAU7C;GACA,OAAO;IACL;IACA,mBAZsB,EACxB,GACA,GACA,CASE;IACA;GACF;EACF,GAEM,IAAoB,MAAM,EAAc,yBAC5C,GACA,CACF,GACM,EAAE,mBAAgB;EACxB,IAAI,GAAa,aAAa,MAAM;GAElC,IAAM,IAAqB,EAAY,aAAa,QAAQ,WAC1D,MAAM,EAAG,eAAe,EAAe,MACzC,GACM,IAAgB,EAAY,aAAa,KAC5C,KAAI,MAAK,EAAE,OAAO,EAAmB,EACrC,QAAQ,MAAqB,MAAO,IAAI;GAC3C,AAAI,MAEF,EADe,EAAc,GAAK,GAAO,CAC9B,CAAM,GACb,KACF,EAAa,CAAiB,GAEhC,EAAa,EAAK;EAEtB,OACE,QAAQ,IAAI,wCAAwC;CAExD,EACU,SAEG;EACX,IAAU;CACZ,IACC;EAAC;EAAK;EAAgB;EAAO;EAAa;EAAc;CAAW,CAAC,GAGrE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACG,KAAa,kBAAC,GAAD,CAAwB,CAAA;GACrC,CAAC,KAAa,EAAQ,WAAW,KAChC,kBAAC,KAAD;IAAG,WAAU;cAAc;GAAoB,CAAA;GAEhD,CAAC,KAAa,EAAQ,SAAS,KAC9B,kBAAC,GAAD;IACE,MAAM;IACA;IACN,QAAQ,GAAW,aAAa;GACjC,CAAA;GAEF,KAAe,KACd,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KAAa,OAAM;KAAY,SAAQ;KAAY,MAAM;eACtD;IACU,CAAA;GACV,CAAA;EAEJ;;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"UserOrTeamBadge.js","names":[],"sources":["../../../src/components/UserOrTeamBadge/UserOrTeamBadge.tsx"],"sourcesContent":["import { Skeleton } from '@mui/material'\nimport { UserGroupHeader } from '@sage-bionetworks/synapse-types'\nimport TeamBadge from '../TeamBadge'\nimport { UserBadge } from '../UserCard/UserBadge'\nimport { useUserOrTeam } from './useUserOrTeam'\n\nexport type UserOrTeamBadgeProps = {\n  /* The principal ID of the user or team. Required if userGroupHeader is undefined. */\n  principalId?: string | number\n  /* The userGroupHeader of the user or team. Required if principalId is undefined. */\n  userGroupHeader?: UserGroupHeader\n  showFullName?: boolean\n  disableHref?: boolean\n  showCardOnHover?: boolean\n  openLinkInNewTab?: boolean\n}\n\nexport default function UserOrTeamBadge(props: UserOrTeamBadgeProps) {\n  const {\n    principalId,\n    disableHref,\n    showCardOnHover,\n    showFullName,\n    userGroupHeader: providedUserGroupHeader,\n    openLinkInNewTab,\n  } = props\n\n  const { userGroupHeader } = useUserOrTeam(\n    principalId,\n    providedUserGroupHeader,\n  )\n\n  const resolvedPrincipalId = principalId ?? providedUserGroupHeader?.ownerId\n\n  if (resolvedPrincipalId == null && providedUserGroupHeader == null) {\n    console.error(\n      'Expected one of principalId or userGroupHeader to be defined but both were null or undefined',\n    )\n    return <></>\n  } else if (userGroupHeader === undefined) {\n    return <Skeleton width={125} height={30} />\n  } else if (userGroupHeader.isIndividual) {\n    return (\n      <UserBadge\n        userId={resolvedPrincipalId!.toString()}\n        disableLink={disableHref}\n        showFullName={showFullName}\n        showCardOnHover={showCardOnHover}\n        openLinkInNewTab={openLinkInNewTab}\n      />\n    )\n  } else {\n    return (\n      <TeamBadge\n        teamId={resolvedPrincipalId!}\n        teamName={userGroupHeader.userName}\n        disableHref={disableHref}\n        openLinkInNewTab={openLinkInNewTab}\n      />\n    )\n  }\n}\n"],"mappings":";;;;;;AAiBA,SAAwB,EAAgB,GAA6B;CACnE,IAAM,EACJ,gBACA,gBACA,oBACA,iBACA,iBAAiB,GACjB,wBACE,GAEE,EAAE,uBAAoB,EAC1B,GACA,EACD,EAEK,IAAsB,KAAe,GAAyB;AAoBlE,QAlBE,KAAuB,QAAQ,KAA2B,QAC5D,QAAQ,MACN,+FACD,EACM,kBAAA,GAAA,EAAK,CAAA,IACH,MAAoB,KAAA,IACtB,kBAAC,GAAD;EAAU,OAAO;EAAK,QAAQ;EAAM,CAAA,GAClC,EAAgB,eAEvB,kBAAC,GAAD;EACE,QAAQ,EAAqB,UAAU;EACvC,aAAa;EACC;EACG;EACC;EAClB,CAAA,GAIF,kBAAC,GAAD;EACE,QAAQ;EACR,UAAU,EAAgB;EACb;EACK;EAClB,CAAA"}
+{"version":3,"file":"UserOrTeamBadge.js","names":[],"sources":["../../../src/components/UserOrTeamBadge/UserOrTeamBadge.tsx"],"sourcesContent":["import { Skeleton } from '@mui/material'\nimport { UserGroupHeader } from '@sage-bionetworks/synapse-types'\nimport TeamBadge from '../TeamBadge'\nimport { UserBadge } from '../UserCard/UserBadge'\nimport { useUserOrTeam } from './useUserOrTeam'\n\nexport type UserOrTeamBadgeProps = {\n  /* The principal ID of the user or team. Required if userGroupHeader is undefined. */\n  principalId?: string | number\n  /* The userGroupHeader of the user or team. Required if principalId is undefined. */\n  userGroupHeader?: UserGroupHeader\n  showFullName?: boolean\n  disableHref?: boolean\n  showCardOnHover?: boolean\n  openLinkInNewTab?: boolean\n}\n\nexport default function UserOrTeamBadge(props: UserOrTeamBadgeProps) {\n  const {\n    principalId,\n    disableHref,\n    showCardOnHover,\n    showFullName,\n    userGroupHeader: providedUserGroupHeader,\n    openLinkInNewTab,\n  } = props\n\n  const { userGroupHeader } = useUserOrTeam(\n    principalId,\n    providedUserGroupHeader,\n  )\n\n  const resolvedPrincipalId = principalId ?? providedUserGroupHeader?.ownerId\n\n  if (resolvedPrincipalId == null && providedUserGroupHeader == null) {\n    console.error(\n      'Expected one of principalId or userGroupHeader to be defined but both were null or undefined',\n    )\n    return <></>\n  } else if (userGroupHeader === undefined) {\n    return <Skeleton width={125} height={30} />\n  } else if (userGroupHeader.isIndividual) {\n    return (\n      <UserBadge\n        userId={resolvedPrincipalId!.toString()}\n        disableLink={disableHref}\n        showFullName={showFullName}\n        showCardOnHover={showCardOnHover}\n        openLinkInNewTab={openLinkInNewTab}\n      />\n    )\n  } else {\n    return (\n      <TeamBadge\n        teamId={resolvedPrincipalId!}\n        teamName={userGroupHeader.userName}\n        disableHref={disableHref}\n        openLinkInNewTab={openLinkInNewTab}\n      />\n    )\n  }\n}\n"],"mappings":";;;;;;AAiBA,SAAwB,EAAgB,GAA6B;CACnE,IAAM,EACJ,gBACA,gBACA,oBACA,iBACA,iBAAiB,GACjB,wBACE,GAEE,EAAE,uBAAoB,EAC1B,GACA,CACF,GAEM,IAAsB,KAAe,GAAyB;CAoBlE,OAlBE,KAAuB,QAAQ,KAA2B,QAC5D,QAAQ,MACN,8FACF,GACO,kBAAA,GAAA,CAAI,CAAA,KACF,MAAoB,KAAA,IACtB,kBAAC,GAAD;EAAU,OAAO;EAAK,QAAQ;CAAK,CAAA,IACjC,EAAgB,eAEvB,kBAAC,GAAD;EACE,QAAQ,EAAqB,SAAS;EACtC,aAAa;EACC;EACG;EACC;CACnB,CAAA,IAID,kBAAC,GAAD;EACE,QAAQ;EACR,UAAU,EAAgB;EACb;EACK;CACnB,CAAA;AAGP"}

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":";;;;;;;;;;;;;;;;;;AAoCA,IAAM,IAA8D,CAClE,EAA0B,QAC1B,EAA0B,QAC3B,EAEK,IAAe,GAA6B;AAElD,SAAS,EACP,GACA,GACA,GACA;AACA,QAAO;EACL,EAAa,SAAS,MAAM;GAC1B,QAAQ;GACR,MAAM;GACN,OAAM,MAAO,EAAI,KAAK,UAAU;GACjC,CAAC;EACF,EAAa,QAAQ;GACnB,QAAQ;GACR,OAAM,MACA,EAAI,IAAI,SAAS,eAAe,EAAkB,SAElD,kBAAA,GAAA,EAAA,UAAA;IACE,kBAAC,GAAD,EAAY,QAAQ,EAAI,IAAI,SAAS,UAAa,CAAA;;IACjD,EAAI,IAAI,SAAS;IAAS;IAC1B,EAAA,CAAA,GAGA,GAAG,EAAI,IAAI,SAAS,WAAW,IAAI,EAAI,IAAI,SAAS;GAE9D,CAAC;EACF,EAAa,SAAS,cAAc;GAClC,QAAQ;GACR,OAAM,MACJ,kBAAC,GAAD,EAAA,UACG,MAAM,KAAa,EAAI,KAAK,UAAU,CAAE,CACtC,KAAI,MAAK,EAAE,aAAa,CAAC,CACzB,IAAI,EAAW,CACf,KAAI,MACH,kBAAC,QAAD,EAAA,UAAiB,GAAW,EAAjB,EAAiB,CAC5B,EACE,CAAA;GAEX,CAAC;EACF,EAAa,SAAS,aAAa;GACjC,QAAQ;GACR,MAAM;GACN,OAAM,MAAQ,EAAI,KAAK,UAAU,GAAG,QAAQ;GAC7C,CAAC;EACF,EAAa,SAAS,aAAa;GACjC,QAAQ;GACR,OAAO,EAAE,kBAAe,EAAW,EAAM,GAAU,CAAC,CAAC;GACtD,CAAC;EACF,EAAa,SAAS,cAAc;GAClC,QAAQ;GACR,OAAO,EAAE,kBAAe,EAAW,EAAM,GAAU,CAAC,CAAC;GACtD,CAAC;EACF,EAAa,SAAS,sBAAsB;GAC1C,QAAQ;GACR,OAAM,MACJ,kBAAC,GAAD;IACE,IAAI;KACF,eAAe;KACf,YAAY;KACZ,KAAK;KACN;cALH;KAOG,EAAI,IAAI,SAAS,uBAAuB,aAEvC,kBAAC,GAAD,EAAgB,MAAM,IAAM,CAAA;KAE7B,EAAI,IAAI,SAAS,uBAChB,EAA0B,WAC1B,GACG,EAAI,IAAI,SAAS,sBAAsB,IACrC,aAAa,CACb,WAAW,KAAK,IAAI,CACxB;KACF,EAAI,IAAI,SAAS,mBAChB,kBAAC,GAAD,EAAa,cAAc,EAAI,IAAI,SAAS,iBAAmB,CAAA;KAE3D;;GAEX,CAAC;EACF,EAAa,QAAQ;GACnB,IAAI;GACJ,QAAQ;GACR,MAAM;GACN,MAAM,EACJ,WAAW,SACZ;GACD,OAAM,MACJ,kBAAC,GAAD;IACE,IAAI;KACF,eAAe;KACf,gBAAgB;KAChB,YAAY;KACZ,KAAK;KACN;cANH;KAQG,EAAI,IAAI,SAAS,uBAChB,EAA0B,aAC1B,kBAAC,GAAD;MACE,SAAS;MACT,eAAe;AACb,SAAqB,EAAI,IAAI,SAAS;;gBAEzC;MAEQ,CAAA;KAGV,EAA+B,SAC9B,EAAI,IAAI,SAAS,mBAClB,IACC,kBAAC,GAAD;MACE,SAAS;MACT,eAAe;AACb,SAA8B,EAAI,IAAI,SAAS;;gBAElD;MAEQ,CAAA;KAEX,kBAAC,GAAD;MACE,MAAK;MACL,SAAQ;MACR,eAAe;AACb,SAAmB,EAAI,IAAI,SAAS;;gBAEvC;MAEQ,CAAA;KACH;;GAEX,CAAC;EACH;;AAGH,SAAwB,IAAmB;CACzC,IAAM,CAAC,GAAiB,KAAsB,EAAS,GAAM,EACvD,CAAC,GAAwB,KAA6B,EAAS,GAAM,EACrE,CAAC,GAAiB,KAAsB,EAC5C,KAAA,EACD,EAGK,IAAsB,EADd,GAC4B,CAAM,YAAY,KAAK,KAAK,CAAC,EAEjE,EACJ,MAAM,GACN,YACA,gBACA,kBACA,uBACA,iBACE,GAAwB,EACtB,IAAW,QACT,GAAc,MAAM,SAAQ,MAAQ,EAAK,KAAM,IAAI,EAAE,EAC3D,CAAC,EAAa,CACf;AAID,SAAgB;EACd,IAAI;AAMJ,SALI,EAAS,MAAK,MAAW,EAAQ,uBAAuB,UAAU,KACpE,IAAa,kBAAkB;AACxB,MAAS;KACb,KAAK,SAEG,cAAc,EAAW;IACrC,CAAC,GAAS,EAAS,CAAC;CAEvB,IAAM,EAAE,QAAQ,MAA2B,GAA2B,EAEhE,IAAuB,GAAa,MAAqB;AAE7D,EADA,EAAmB,EAAQ,EAC3B,EAA0B,GAAK;IAC9B,EAAE,CAAC,EACA,IAAqB,GAAa,MAAqB;AAE3D,EADA,EAAmB,EAAQ,EAC3B,EAAmB,GAAK;IACvB,EAAE,CAAC,EACA,IAAgC,GACnC,MAAqB;AACpB,IAAuB,EAAQ,GAAI;IAErC,CAAC,EAAuB,CACzB,EAYK,IAAe,EAAuB;EAC1C,MAAM;EACG,SAZK,QAEZ,EACE,GACA,GACA,EACD,EACH;GAAC;GAAoB;GAA+B;GAAqB,CAKhE;EACT,OAAO,EACL,kBAAkB;GAChB,WAAW,CAAC;GACZ,YAAY,CAAC;GACd,EACF;EACD,iBAAiB,GAAiB;EACnC,CAAC,EAEI,IAAU,CAAC,KAAa,EAAa,aAAa,CAAC,KAAK,WAAW;AAEzE,QACE,kBAAC,OAAD,EAAA,UAAA;EACE,kBAAC,GAAD;GAEE,MAAM;GACN,eAAe,EAA0B,GAAM;GAC/C,WAAW,GAAiB;GAC5B,EAJK,GAAiB,GAItB;EACF,kBAAC,GAAD;GAAY,SAAS;aAAa;GAA8B,CAAA;EAChE,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT,eAAe;IACf,IAAI;IACJ,KAAK;IACL,gBAAgB;IAChB,YAAY;IACb;aARH;IAUE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;KAAY,SAAS;KAAS,cAAA;eAAa;KAM9B,CAAA,EACb,kBAAC,GAAD;KAAY,SAAS;KAAS,cAAA;eAA9B;MAA2C;MACX;MAC9B,kBAAC,GAAD;OACE,MACE;OAEF,QAAQ;iBACT;OAEM,CAAA;;MAEI;OACT,EAAA,CAAA;IACN,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,WAAW,kBAAC,GAAD,EAAoB,CAAA;KAC/B,eAAe;AAEb,MADA,EAAmB,KAAA,EAAU,EAC7B,EAAmB,GAAK;;KAE1B,IAAI,EAAE,YAAY,GAAG;eACtB;KAEQ,CAAA;IACT,kBAAC,GAAD;KACE,aAAa;KACb,MAAM;KACN,eAAe,EAAmB,GAAM;KACxC,CAAA;IACE;;EACN,kBAAC,GAAD;GACE,OAAO,kBAAC,GAAD,EAAqB,OAAO,GAAgB,CAAA;GACxC;GACX,WACE,kBAAC,GAAD;IAAY,SAAQ;cAAQ;IAGf,CAAA;GAEN;GACI;GACb,8BAA8B;AACvB,OAAe;;GAEF;GACpB,CAAA;EACE,EAAA,CAAA"}
+{"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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"}