npm - synapse-react-client - Versions diffs - 4.0.45 → 4.0.47 - Mend

synapse-react-client 4.0.45 → 4.0.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (842) hide show

package/dist/components/TotalQueryResults.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { SynapseErrorBoundary as e } from "./error/ErrorBanner.js";
-import { SkeletonInlineBlock as t } from "./Skeleton/SkeletonInlineBlock.js";
+import { useQueryVisualizationContext as e } from "./QueryVisualizationWrapper/QueryVisualizationContext.js";
+import { SynapseErrorBoundary as t } from "./error/ErrorBanner.js";
+import { SkeletonInlineBlock as n } from "./Skeleton/SkeletonInlineBlock.js";
 import "./Skeleton/index.js";
-import n from "./IconSvg/IconSvg.js";
-import { useQueryContext as r } from "./QueryContext/QueryContext.js";
+import r from "./IconSvg/IconSvg.js";
+import { useQueryContext as i } from "./QueryContext/QueryContext.js";
 import "./QueryContext/index.js";
-import { useSuspenseGetQueryMetadata as i } from "./QueryWrapper/useGetQueryMetadata.js";
-import { useQueryVisualizationContext as a } from "./QueryVisualizationWrapper/QueryVisualizationContext.js";
+import { useSuspenseGetQueryMetadata as a } from "./QueryWrapper/useGetQueryMetadata.js";
 import "./QueryVisualizationWrapper/index.js";
 import "./error/index.js";
 import o from "./widgets/facet-nav/SelectionCriteriaPills.js";
@@ -13,11 +13,11 @@ import { Suspense as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 import u from "pluralize";
 //#region src/components/TotalQueryResults.tsx
-function d(e) {
-	let { style: t, frontText: s, endText: d = "", hideIfUnfiltered: f = !1 } = e, { resetQuery: p, hasResettableFilters: m } = r(), { data: h } = i(), { unitDescription: g } = a(), _ = h?.queryCount, v = m;
+function d(t) {
+	let { style: n, frontText: s, endText: d = "", hideIfUnfiltered: f = !1 } = t, { resetQuery: p, hasResettableFilters: m } = i(), { data: h } = a(), { unitDescription: g } = e(), _ = h?.queryCount, v = m;
 	return /* @__PURE__ */ l("div", {
 		className: `TotalQueryResults ${m ? "hasFilters" : ""}`,
-		style: t,
+		style: n,
 		children: [(m || !f) && /* @__PURE__ */ l("div", {
 			className: "TotalQueryResults__topbar",
 			children: [/* @__PURE__ */ l("span", {
@@ -34,7 +34,7 @@ function d(e) {
 			}), v && /* @__PURE__ */ l("a", {
 				onClick: p,
 				className: "TotalQueryResults__topbar__clearall",
-				children: [/* @__PURE__ */ c(n, { icon: "deleteSweep" }), "Clear all filters"]
+				children: [/* @__PURE__ */ c(r, { icon: "deleteSweep" }), "Clear all filters"]
 			})]
 		}), /* @__PURE__ */ c("div", {
 			className: "TotalQueryResults__selections",
@@ -42,10 +42,10 @@ function d(e) {
 		})]
 	});
 }
-function f(n) {
-	return /* @__PURE__ */ c(e, { children: /* @__PURE__ */ c(s, {
-		fallback: /* @__PURE__ */ c(t, { width: 100 }),
-		children: /* @__PURE__ */ c(d, { ...n })
+function f(e) {
+	return /* @__PURE__ */ c(t, { children: /* @__PURE__ */ c(s, {
+		fallback: /* @__PURE__ */ c(n, { width: 100 }),
+		children: /* @__PURE__ */ c(d, { ...e })
 	}) });
 }
 //#endregion

package/dist/components/Webhook/WebhookDashboard.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WebhookDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/Webhook/WebhookDashboard.tsx"],"names":[],"mappings":"~~AAgLA~~,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CAwJvC"}
1	+ {"version":3,"file":"WebhookDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/Webhook/WebhookDashboard.tsx"],"names":[],"mappings":"AA8KA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CAwJvC"}

package/dist/components/Webhook/WebhookDashboard.js CHANGED Viewed

@@ -12,11 +12,11 @@ import { upperFirst as m } from "lodash-es";
 import { Box as h, Button as g, Link as _, Stack as v, Typography as y, useMediaQuery as b, useTheme as x } from "@mui/material";
 import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
 import { SynapseObjectType as T, WebhookVerificationStatus as E } from "@sage-bionetworks/synapse-client";
-import { AddCircleTwoTone as D } from "@mui/icons-material";
+import D from "@mui/icons-material/AddCircleTwoTone";
 import O from "dayjs";
 import { createColumnHelper as k, getCoreRowModel as A, useReactTable as j } from "@tanstack/react-table";
 //#region src/components/Webhook/WebhookDashboard.tsx
-var M = [E.FAILED, E.REVOKED], N = k();
+var M = new Set([E.FAILED, E.REVOKED]), N = k();
 function P(i, a, o) {
 	return [
 		N.accessor("id", {
@@ -85,7 +85,7 @@ function P(i, a, o) {
 						},
 						children: "Verify code"
 					}),
-					M.includes(e.row.original.verificationStatus) && /* @__PURE__ */ C(g, {
+					M.has(e.row.original.verificationStatus) && /* @__PURE__ */ C(g, {
 						variant: "outlined",
 						onClick: () => {
 							a(e.row.original);

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

	@@ -1 +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 "Create Webhook"\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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"}
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/AddCircleTwoTone'\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: ReadonlySet<WebhookVerificationStatus> =\n new Set([WebhookVerificationStatus.FAILED, WebhookVerificationStatus.REVOKED])\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.has(\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 "Create Webhook"\n above to begin.\n </Typography>\n }\n isEmpty={isEmpty}\n hasNextPage={hasNextPage}\n onFetchNextPageClicked={() => {\n void fetchNextPage()\n }}\n isFetchingNextPage={isFetchingNextPage}\n />\n </div>\n )\n}\n"],"mappings":"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"}

package/dist/components/dataaccess/AccessRequirementDashboard.js CHANGED Viewed

@@ -9,13 +9,13 @@ import { omitBy as u } from "lodash-es";
 import { Grid as d, InputAdornment as f, TextField as p, Typography as m } from "@mui/material";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 import { EntityType as v } from "@sage-bionetworks/synapse-client";
-import { SearchOutlined as y } from "@mui/icons-material";
-import { useLocation as b, useNavigate as x } from "react-router";
+import { useLocation as y, useNavigate as b } from "react-router";
+import x from "@mui/icons-material/SearchOutlined";
 import { useDebouncedState as S } from "@react-hookz/web";
 //#region src/components/dataaccess/AccessRequirementDashboard.tsx
 var C = "nameOrID", w = "relatedProjectId", T = "reviewerId", E = "type";
 function D(D) {
-	let { onCreateNewAccessRequirementClicked: O } = D, k = b(), A = c(() => new URLSearchParams(k.search), [k.search]), j = x(), [M, N] = S(A.get("nameOrID") ?? "", 500), [P, F] = S(A.get("relatedProjectId") ?? void 0, 500), [I, L] = S(A.get("reviewerId") ?? void 0, 500), [R, z] = l(A.get("type") ?? void 0), B = c(() => !!(P && !e.exec(P)), [P]), [V, H] = l(!1);
+	let { onCreateNewAccessRequirementClicked: O } = D, k = y(), A = c(() => new URLSearchParams(k.search), [k.search]), j = b(), [M, N] = S(A.get("nameOrID") ?? "", 500), [P, F] = S(A.get("relatedProjectId") ?? void 0, 500), [I, L] = S(A.get("reviewerId") ?? void 0, 500), [R, z] = l(A.get("type") ?? void 0), B = c(() => !!(P && !e.exec(P)), [P]), [V, H] = l(!1);
 	s(() => {
 		let e = u({
 			[C]: M,
@@ -82,7 +82,7 @@ function D(D) {
 							},
 							slotProps: { input: { endAdornment: /* @__PURE__ */ g(f, {
 								position: "end",
-								children: /* @__PURE__ */ g(y, {})
+								children: /* @__PURE__ */ g(x, {})
 							}) } }
 						})
 					}),

package/dist/components/dataaccess/AccessRequirementDashboard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AccessRequirementDashboard.js","names":[],"sources":["../../../src/components/dataaccess/AccessRequirementDashboard.tsx"],"sourcesContent":["import { InputSizedButton } from '@/components/styled/InputSizedButton'\nimport { SYNAPSE_ENTITY_ID_REGEX } from '@/utils/functions/RegularExpressions'\nimport { SearchOutlined } from '@mui/icons-material'\nimport { Grid, InputAdornment, TextField, Typography } from '@mui/material'\nimport { useDebouncedState } from '@react-hookz/web'\nimport { EntityType } from '@sage-bionetworks/synapse-client'\nimport { omitBy } from 'lodash-es'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useLocation, useNavigate } from 'react-router'\nimport { EntityFinderModal } from '../EntityFinder/EntityFinderModal'\nimport { FinderScope } from '../EntityFinder/tree/EntityTree'\nimport UserSearchBox from '../UserSearchBox/UserSearchBox'\nimport { AccessRequirementTable } from './AccessRequirementTable'\n\nexport const AR_NAME_OR_ID_SEARCH_PARAM_KEY = 'nameOrID'\nexport const RELATED_PROJECT_ID_SEARCH_PARAM_KEY = 'relatedProjectId'\nexport const REVIEWER_ID_SEARCH_PARAM_KEY = 'reviewerId'\nexport const AR_TYPE_SEARCH_PARAM_KEY = 'type'\n\nexport type AccessRequirementDashboardProps = {\n onCreateNewAccessRequirementClicked?: () => void\n}\n\nexport function AccessRequirementDashboard(\n props: AccessRequirementDashboardProps,\n) {\n // Amount of time to wait after an input value changes before sending a new request\n const INPUT_CHANGE_DEBOUNCE_DELAY_MS = 500\n\n const { onCreateNewAccessRequirementClicked } = props\n\n const location = useLocation()\n const urlSearchParams = useMemo(\n () => new URLSearchParams(location.search),\n [location.search],\n )\n const navigate = useNavigate()\n\n /*\n When an input changes, update the props passed to the table and update the search params.\n \n Debounced to prevent firing many queries while the user is entering text.\n */\n const [nameOrID, setNameOrID] = useDebouncedState<string>(\n urlSearchParams.get(AR_NAME_OR_ID_SEARCH_PARAM_KEY) ?? '',\n INPUT_CHANGE_DEBOUNCE_DELAY_MS,\n )\n const [relatedProjectId, setRelatedProjectId] = useDebouncedState<\n string \| undefined\n >(\n urlSearchParams.get(RELATED_PROJECT_ID_SEARCH_PARAM_KEY) ?? undefined,\n INPUT_CHANGE_DEBOUNCE_DELAY_MS,\n )\n const [reviewerId, setReviewerId] = useDebouncedState<string \| undefined>(\n urlSearchParams.get(REVIEWER_ID_SEARCH_PARAM_KEY) ?? undefined,\n INPUT_CHANGE_DEBOUNCE_DELAY_MS,\n )\n const [typeFilter, setTypeFilter] = useState<string \| undefined>(\n urlSearchParams.get(AR_TYPE_SEARCH_PARAM_KEY) ?? undefined,\n )\n\n const projectFilterFieldIsError: boolean = useMemo(\n () =>\n !!(relatedProjectId && !SYNAPSE_ENTITY_ID_REGEX.exec(relatedProjectId)),\n [relatedProjectId],\n )\n\n const [showEntityFinder, setShowEntityFinder] = useState(false)\n\n // Update the QueryParams when the filter state changes\n useEffect(() => {\n // Don't include undefined/empty parameters\n const params = omitBy(\n {\n // Sync the search params state with the debounced props\n [AR_NAME_OR_ID_SEARCH_PARAM_KEY]: nameOrID,\n [RELATED_PROJECT_ID_SEARCH_PARAM_KEY]: relatedProjectId,\n [REVIEWER_ID_SEARCH_PARAM_KEY]: reviewerId,\n [AR_TYPE_SEARCH_PARAM_KEY]: typeFilter, // typeFilter state is not debounced\n },\n item => item === undefined \|\| item === '',\n ) as Record<string, string>\n\n // Add the new params to the URL\n // Replace history because intuitively, the user has not navigated to a new page\n const paramsObject = new URLSearchParams(params)\n navigate(\n {\n pathname: location.pathname,\n search: paramsObject.toString(),\n },\n { replace: true },\n )\n }, [\n nameOrID,\n relatedProjectId,\n reviewerId,\n typeFilter,\n navigate,\n location.pathname,\n ])\n\n const onReviewerChange = useCallback(\n (selected: string \| null) => {\n if (selected) {\n setReviewerId(selected)\n } else {\n setReviewerId(undefined)\n }\n },\n [setReviewerId],\n )\n\n const accessRequirementsPanel = (\n <>\n <EntityFinderModal\n configuration={{\n initialScope: FinderScope.ALL_PROJECTS,\n initialContainer: null,\n selectMultiple: false,\n selectableTypes: [EntityType.project],\n treeOnly: true,\n }}\n show={showEntityFinder}\n onCancel={() => {\n setShowEntityFinder(false)\n }}\n title={'Select Project to Filter Access Requirements'}\n promptCopy={\n 'Select a project to find Access Requirements that are associated with that project. Access Requirements will be found if the Access Requirement is applied to the project, or if it is applied to any item inside the project.'\n }\n onConfirm={selected => {\n setRelatedProjectId(selected[0].targetId)\n setShowEntityFinder(false)\n }}\n confirmButtonCopy={'Select'}\n />\n <Grid component={'form'} container spacing={2} className=\"InputPanel\">\n <Grid size={{ xs: 12, md: 4 }}>\n <TextField\n label=\"Filter by Access Requirement Name or ID\"\n id=\"ar-name-filter\"\n type=\"text\"\n fullWidth\n placeholder=\"Search for an Access Requirement Name or ID\"\n onChange={e => {\n setNameOrID(e.target.value)\n }}\n slotProps={{\n input: {\n endAdornment: (\n <InputAdornment position=\"end\">\n <SearchOutlined />\n </InputAdornment>\n ),\n },\n }}\n />\n </Grid>\n <Grid\n size={{ xs: 12, md: 4 }}\n sx={{\n display: 'flex',\n gap: '5px',\n alignItems: 'stretch',\n }}\n >\n <TextField\n label=\"Filter by Project\"\n id=\"project-id-filter\"\n type=\"text\"\n fullWidth\n placeholder=\"Enter a project SynID\"\n error={projectFilterFieldIsError}\n helperText={\n projectFilterFieldIsError\n ? 'Value must be a Synapse ID, e.g. \"syn1234\"'\n : undefined\n }\n onChange={e => {\n const newValue = e.target.value\n if (newValue === '') {\n setRelatedProjectId(undefined)\n } else {\n setRelatedProjectId(newValue)\n }\n }}\n />\n <InputSizedButton\n variant=\"outlined\"\n color=\"primary\"\n onClick={() => {\n setShowEntityFinder(true)\n }}\n >\n Browse\n </InputSizedButton>\n </Grid>\n <Grid size={{ xs: 12, md: 4 }}>\n <Typography\n component=\"label\"\n variant=\"smallText2\"\n htmlFor=\"reviewer-filter\"\n >\n Filter by Reviewer\n </Typography>\n <UserSearchBox\n inputId=\"reviewer-filter\"\n placeholder=\"Search for a username or team name\"\n defaultValue={reviewerId}\n onChange={onReviewerChange}\n />\n </Grid>\n </Grid>\n <AccessRequirementTable\n nameOrID={nameOrID}\n relatedProjectId={relatedProjectId}\n reviewerId={reviewerId}\n onCreateNewAccessRequirementClicked={\n onCreateNewAccessRequirementClicked\n }\n typeFilter={typeFilter}\n onTypeFilterChange={setTypeFilter}\n />\n </>\n )\n\n return (\n <div className=\"AccessRequirementDashboard\">{accessRequirementsPanel}</div>\n )\n}\n\nexport default AccessRequirementDashboard\n"],"mappings":";;;;;;;;;;;;;;;AAcA,IAAa,IAAiC,YACjC,IAAsC,oBACtC,IAA+B,cAC/B,IAA2B;AAMxC,SAAgB,EACd,GACA;CAEA,IAEM,EAAE,2CAAwC,GAE1C,IAAW,EAAY,GACvB,IAAkB,QAChB,IAAI,gBAAgB,EAAS,MAAM,GACzC,CAAC,EAAS,MAAM,CAClB,GACM,IAAW,EAAY,GAOvB,CAAC,GAAU,KAAe,EAC9B,EAAgB,IAAA,UAAkC,KAAK,IACvD,GACF,GACM,CAAC,GAAkB,KAAuB,EAG9C,EAAgB,IAAA,kBAAuC,KAAK,KAAA,GAC5D,GACF,GACM,CAAC,GAAY,KAAiB,EAClC,EAAgB,IAAA,YAAgC,KAAK,KAAA,GACrD,GACF,GACM,CAAC,GAAY,KAAiB,EAClC,EAAgB,IAAA,MAA4B,KAAK,KAAA,CACnD,GAEM,IAAqC,QAEvC,CAAC,EAAE,KAAoB,CAAC,EAAwB,KAAK,CAAgB,IACvE,CAAC,CAAgB,CACnB,GAEM,CAAC,GAAkB,KAAuB,EAAS,EAAK;CAG9D,QAAgB;EAEd,IAAM,IAAS,EACb;IAEG,IAAiC;IACjC,IAAsC;IACtC,IAA+B;IAC/B,IAA2B;EAC9B,IACA,MAAQ,MAAS,KAAA,KAAa,MAAS,EACzC,GAIM,IAAe,IAAI,gBAAgB,CAAM;EAC/C,EACE;GACE,UAAU,EAAS;GACnB,QAAQ,EAAa,SAAS;EAChC,GACA,EAAE,SAAS,GAAK,CAClB;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA,EAAS;CACX,CAAC;CAED,IAAM,IAAmB,GACtB,MAA4B;EAC3B,AACE,EADE,KAGY,KAAA,CAAS;CAE3B,GACA,CAAC,CAAa,CAChB;CAoHA,OACE,kBAAC,OAAD;EAAK,WAAU;YAlHf,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,GAAD;IACE,eAAe;KACb,cAAc,EAAY;KAC1B,kBAAkB;KAClB,gBAAgB;KAChB,iBAAiB,CAAC,EAAW,OAAO;KACpC,UAAU;IACZ;IACA,MAAM;IACN,gBAAgB;KACd,EAAoB,EAAK;IAC3B;IACA,OAAO;IACP,YACE;IAEF,YAAW,MAAY;KAErB,AADA,EAAoB,EAAS,GAAG,QAAQ,GACxC,EAAoB,EAAK;IAC3B;IACA,mBAAmB;GACpB,CAAA;GACD,kBAAC,GAAD;IAAM,WAAW;IAAQ,WAAA;IAAU,SAAS;IAAG,WAAU;cAAzD;KACE,kBAAC,GAAD;MAAM,MAAM;OAAE,IAAI;OAAI,IAAI;MAAE;gBAC1B,kBAAC,GAAD;OACE,OAAM;OACN,IAAG;OACH,MAAK;OACL,WAAA;OACA,aAAY;OACZ,WAAU,MAAK;QACb,EAAY,EAAE,OAAO,KAAK;OAC5B;OACA,WAAW,EACT,OAAO,EACL,cACE,kBAAC,GAAD;QAAgB,UAAS;kBACvB,kBAAC,GAAD,CAAiB,CAAA;OACH,CAAA,EAEpB,EACF;MACD,CAAA;KACG,CAAA;KACN,kBAAC,GAAD;MACE,MAAM;OAAE,IAAI;OAAI,IAAI;MAAE;MACtB,IAAI;OACF,SAAS;OACT,KAAK;OACL,YAAY;MACd;gBANF,CAQE,kBAAC,GAAD;OACE,OAAM;OACN,IAAG;OACH,MAAK;OACL,WAAA;OACA,aAAY;OACZ,OAAO;OACP,YACE,IACI,iDACA,KAAA;OAEN,WAAU,MAAK;QACb,IAAM,IAAW,EAAE,OAAO;QAC1B,AACE,EADE,MAAa,KACK,KAAA,IAEA,CAAQ;OAEhC;MACD,CAAA,GACD,kBAAC,GAAD;OACE,SAAQ;OACR,OAAM;OACN,eAAe;QACb,EAAoB,EAAI;OAC1B;iBACD;MAEiB,CAAA,CACd;;KACN,kBAAC,GAAD;MAAM,MAAM;OAAE,IAAI;OAAI,IAAI;MAAE;gBAA5B,CACE,kBAAC,GAAD;OACE,WAAU;OACV,SAAQ;OACR,SAAQ;iBACT;MAEW,CAAA,GACZ,kBAAC,GAAD;OACE,SAAQ;OACR,aAAY;OACZ,cAAc;OACd,UAAU;MACX,CAAA,CACG;;IACF;;GACN,kBAAC,GAAD;IACY;IACQ;IACN;IAEV;IAEU;IACZ,oBAAoB;GACrB,CAAA;EACD,EAAA,CAI2C;CAA6B,CAAA;AAE9E"}
1	+ {"version":3,"file":"AccessRequirementDashboard.js","names":[],"sources":["../../../src/components/dataaccess/AccessRequirementDashboard.tsx"],"sourcesContent":["import { InputSizedButton } from '@/components/styled/InputSizedButton'\nimport { SYNAPSE_ENTITY_ID_REGEX } from '@/utils/functions/RegularExpressions'\nimport SearchOutlined from '@mui/icons-material/SearchOutlined'\nimport { Grid, InputAdornment, TextField, Typography } from '@mui/material'\nimport { useDebouncedState } from '@react-hookz/web'\nimport { EntityType } from '@sage-bionetworks/synapse-client'\nimport { omitBy } from 'lodash-es'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useLocation, useNavigate } from 'react-router'\nimport { EntityFinderModal } from '../EntityFinder/EntityFinderModal'\nimport { FinderScope } from '../EntityFinder/tree/EntityTree'\nimport UserSearchBox from '../UserSearchBox/UserSearchBox'\nimport { AccessRequirementTable } from './AccessRequirementTable'\n\nexport const AR_NAME_OR_ID_SEARCH_PARAM_KEY = 'nameOrID'\nexport const RELATED_PROJECT_ID_SEARCH_PARAM_KEY = 'relatedProjectId'\nexport const REVIEWER_ID_SEARCH_PARAM_KEY = 'reviewerId'\nexport const AR_TYPE_SEARCH_PARAM_KEY = 'type'\n\nexport type AccessRequirementDashboardProps = {\n onCreateNewAccessRequirementClicked?: () => void\n}\n\nexport function AccessRequirementDashboard(\n props: AccessRequirementDashboardProps,\n) {\n // Amount of time to wait after an input value changes before sending a new request\n const INPUT_CHANGE_DEBOUNCE_DELAY_MS = 500\n\n const { onCreateNewAccessRequirementClicked } = props\n\n const location = useLocation()\n const urlSearchParams = useMemo(\n () => new URLSearchParams(location.search),\n [location.search],\n )\n const navigate = useNavigate()\n\n /*\n When an input changes, update the props passed to the table and update the search params.\n \n Debounced to prevent firing many queries while the user is entering text.\n */\n const [nameOrID, setNameOrID] = useDebouncedState<string>(\n urlSearchParams.get(AR_NAME_OR_ID_SEARCH_PARAM_KEY) ?? '',\n INPUT_CHANGE_DEBOUNCE_DELAY_MS,\n )\n const [relatedProjectId, setRelatedProjectId] = useDebouncedState<\n string \| undefined\n >(\n urlSearchParams.get(RELATED_PROJECT_ID_SEARCH_PARAM_KEY) ?? undefined,\n INPUT_CHANGE_DEBOUNCE_DELAY_MS,\n )\n const [reviewerId, setReviewerId] = useDebouncedState<string \| undefined>(\n urlSearchParams.get(REVIEWER_ID_SEARCH_PARAM_KEY) ?? undefined,\n INPUT_CHANGE_DEBOUNCE_DELAY_MS,\n )\n const [typeFilter, setTypeFilter] = useState<string \| undefined>(\n urlSearchParams.get(AR_TYPE_SEARCH_PARAM_KEY) ?? undefined,\n )\n\n const projectFilterFieldIsError: boolean = useMemo(\n () =>\n !!(relatedProjectId && !SYNAPSE_ENTITY_ID_REGEX.exec(relatedProjectId)),\n [relatedProjectId],\n )\n\n const [showEntityFinder, setShowEntityFinder] = useState(false)\n\n // Update the QueryParams when the filter state changes\n useEffect(() => {\n // Don't include undefined/empty parameters\n const params = omitBy(\n {\n // Sync the search params state with the debounced props\n [AR_NAME_OR_ID_SEARCH_PARAM_KEY]: nameOrID,\n [RELATED_PROJECT_ID_SEARCH_PARAM_KEY]: relatedProjectId,\n [REVIEWER_ID_SEARCH_PARAM_KEY]: reviewerId,\n [AR_TYPE_SEARCH_PARAM_KEY]: typeFilter, // typeFilter state is not debounced\n },\n item => item === undefined \|\| item === '',\n ) as Record<string, string>\n\n // Add the new params to the URL\n // Replace history because intuitively, the user has not navigated to a new page\n const paramsObject = new URLSearchParams(params)\n navigate(\n {\n pathname: location.pathname,\n search: paramsObject.toString(),\n },\n { replace: true },\n )\n }, [\n nameOrID,\n relatedProjectId,\n reviewerId,\n typeFilter,\n navigate,\n location.pathname,\n ])\n\n const onReviewerChange = useCallback(\n (selected: string \| null) => {\n if (selected) {\n setReviewerId(selected)\n } else {\n setReviewerId(undefined)\n }\n },\n [setReviewerId],\n )\n\n const accessRequirementsPanel = (\n <>\n <EntityFinderModal\n configuration={{\n initialScope: FinderScope.ALL_PROJECTS,\n initialContainer: null,\n selectMultiple: false,\n selectableTypes: [EntityType.project],\n treeOnly: true,\n }}\n show={showEntityFinder}\n onCancel={() => {\n setShowEntityFinder(false)\n }}\n title={'Select Project to Filter Access Requirements'}\n promptCopy={\n 'Select a project to find Access Requirements that are associated with that project. Access Requirements will be found if the Access Requirement is applied to the project, or if it is applied to any item inside the project.'\n }\n onConfirm={selected => {\n setRelatedProjectId(selected[0].targetId)\n setShowEntityFinder(false)\n }}\n confirmButtonCopy={'Select'}\n />\n <Grid component={'form'} container spacing={2} className=\"InputPanel\">\n <Grid size={{ xs: 12, md: 4 }}>\n <TextField\n label=\"Filter by Access Requirement Name or ID\"\n id=\"ar-name-filter\"\n type=\"text\"\n fullWidth\n placeholder=\"Search for an Access Requirement Name or ID\"\n onChange={e => {\n setNameOrID(e.target.value)\n }}\n slotProps={{\n input: {\n endAdornment: (\n <InputAdornment position=\"end\">\n <SearchOutlined />\n </InputAdornment>\n ),\n },\n }}\n />\n </Grid>\n <Grid\n size={{ xs: 12, md: 4 }}\n sx={{\n display: 'flex',\n gap: '5px',\n alignItems: 'stretch',\n }}\n >\n <TextField\n label=\"Filter by Project\"\n id=\"project-id-filter\"\n type=\"text\"\n fullWidth\n placeholder=\"Enter a project SynID\"\n error={projectFilterFieldIsError}\n helperText={\n projectFilterFieldIsError\n ? 'Value must be a Synapse ID, e.g. \"syn1234\"'\n : undefined\n }\n onChange={e => {\n const newValue = e.target.value\n if (newValue === '') {\n setRelatedProjectId(undefined)\n } else {\n setRelatedProjectId(newValue)\n }\n }}\n />\n <InputSizedButton\n variant=\"outlined\"\n color=\"primary\"\n onClick={() => {\n setShowEntityFinder(true)\n }}\n >\n Browse\n </InputSizedButton>\n </Grid>\n <Grid size={{ xs: 12, md: 4 }}>\n <Typography\n component=\"label\"\n variant=\"smallText2\"\n htmlFor=\"reviewer-filter\"\n >\n Filter by Reviewer\n </Typography>\n <UserSearchBox\n inputId=\"reviewer-filter\"\n placeholder=\"Search for a username or team name\"\n defaultValue={reviewerId}\n onChange={onReviewerChange}\n />\n </Grid>\n </Grid>\n <AccessRequirementTable\n nameOrID={nameOrID}\n relatedProjectId={relatedProjectId}\n reviewerId={reviewerId}\n onCreateNewAccessRequirementClicked={\n onCreateNewAccessRequirementClicked\n }\n typeFilter={typeFilter}\n onTypeFilterChange={setTypeFilter}\n />\n </>\n )\n\n return (\n <div className=\"AccessRequirementDashboard\">{accessRequirementsPanel}</div>\n )\n}\n\nexport default AccessRequirementDashboard\n"],"mappings":";;;;;;;;;;;;;;;AAcA,IAAa,IAAiC,YACjC,IAAsC,oBACtC,IAA+B,cAC/B,IAA2B;AAMxC,SAAgB,EACd,GACA;CAEA,IAEM,EAAE,2CAAwC,GAE1C,IAAW,EAAY,GACvB,IAAkB,QAChB,IAAI,gBAAgB,EAAS,MAAM,GACzC,CAAC,EAAS,MAAM,CAClB,GACM,IAAW,EAAY,GAOvB,CAAC,GAAU,KAAe,EAC9B,EAAgB,IAAA,UAAkC,KAAK,IACvD,GACF,GACM,CAAC,GAAkB,KAAuB,EAG9C,EAAgB,IAAA,kBAAuC,KAAK,KAAA,GAC5D,GACF,GACM,CAAC,GAAY,KAAiB,EAClC,EAAgB,IAAA,YAAgC,KAAK,KAAA,GACrD,GACF,GACM,CAAC,GAAY,KAAiB,EAClC,EAAgB,IAAA,MAA4B,KAAK,KAAA,CACnD,GAEM,IAAqC,QAEvC,CAAC,EAAE,KAAoB,CAAC,EAAwB,KAAK,CAAgB,IACvE,CAAC,CAAgB,CACnB,GAEM,CAAC,GAAkB,KAAuB,EAAS,EAAK;CAG9D,QAAgB;EAEd,IAAM,IAAS,EACb;IAEG,IAAiC;IACjC,IAAsC;IACtC,IAA+B;IAC/B,IAA2B;EAC9B,IACA,MAAQ,MAAS,KAAA,KAAa,MAAS,EACzC,GAIM,IAAe,IAAI,gBAAgB,CAAM;EAC/C,EACE;GACE,UAAU,EAAS;GACnB,QAAQ,EAAa,SAAS;EAChC,GACA,EAAE,SAAS,GAAK,CAClB;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA,EAAS;CACX,CAAC;CAED,IAAM,IAAmB,GACtB,MAA4B;EAC3B,AACE,EADE,KAGY,KAAA,CAAS;CAE3B,GACA,CAAC,CAAa,CAChB;CAoHA,OACE,kBAAC,OAAD;EAAK,WAAU;YAlHf,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,GAAD;IACE,eAAe;KACb,cAAc,EAAY;KAC1B,kBAAkB;KAClB,gBAAgB;KAChB,iBAAiB,CAAC,EAAW,OAAO;KACpC,UAAU;IACZ;IACA,MAAM;IACN,gBAAgB;KACd,EAAoB,EAAK;IAC3B;IACA,OAAO;IACP,YACE;IAEF,YAAW,MAAY;KAErB,AADA,EAAoB,EAAS,GAAG,QAAQ,GACxC,EAAoB,EAAK;IAC3B;IACA,mBAAmB;GACpB,CAAA;GACD,kBAAC,GAAD;IAAM,WAAW;IAAQ,WAAA;IAAU,SAAS;IAAG,WAAU;cAAzD;KACE,kBAAC,GAAD;MAAM,MAAM;OAAE,IAAI;OAAI,IAAI;MAAE;gBAC1B,kBAAC,GAAD;OACE,OAAM;OACN,IAAG;OACH,MAAK;OACL,WAAA;OACA,aAAY;OACZ,WAAU,MAAK;QACb,EAAY,EAAE,OAAO,KAAK;OAC5B;OACA,WAAW,EACT,OAAO,EACL,cACE,kBAAC,GAAD;QAAgB,UAAS;kBACvB,kBAAC,GAAD,CAAiB,CAAA;OACH,CAAA,EAEpB,EACF;MACD,CAAA;KACG,CAAA;KACN,kBAAC,GAAD;MACE,MAAM;OAAE,IAAI;OAAI,IAAI;MAAE;MACtB,IAAI;OACF,SAAS;OACT,KAAK;OACL,YAAY;MACd;gBANF,CAQE,kBAAC,GAAD;OACE,OAAM;OACN,IAAG;OACH,MAAK;OACL,WAAA;OACA,aAAY;OACZ,OAAO;OACP,YACE,IACI,iDACA,KAAA;OAEN,WAAU,MAAK;QACb,IAAM,IAAW,EAAE,OAAO;QAC1B,AACE,EADE,MAAa,KACK,KAAA,IAEA,CAAQ;OAEhC;MACD,CAAA,GACD,kBAAC,GAAD;OACE,SAAQ;OACR,OAAM;OACN,eAAe;QACb,EAAoB,EAAI;OAC1B;iBACD;MAEiB,CAAA,CACd;;KACN,kBAAC,GAAD;MAAM,MAAM;OAAE,IAAI;OAAI,IAAI;MAAE;gBAA5B,CACE,kBAAC,GAAD;OACE,WAAU;OACV,SAAQ;OACR,SAAQ;iBACT;MAEW,CAAA,GACZ,kBAAC,GAAD;OACE,SAAQ;OACR,aAAY;OACZ,cAAc;OACd,UAAU;MACX,CAAA,CACG;;IACF;;GACN,kBAAC,GAAD;IACY;IACQ;IACN;IAEV;IAEU;IACZ,oBAAoB;GACrB,CAAA;EACD,EAAA,CAI2C;CAA6B,CAAA;AAE9E"}

package/dist/components/dataaccess/AccessRequirementTable.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { useAccessRequirementTable as n } from "./UseAccessRequirementTable.js";
 import { noop as r } from "lodash-es";
 import { Button as i, Typography as a } from "@mui/material";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { StarTwoTone as c } from "@mui/icons-material";
+import c from "@mui/icons-material/StarTwoTone";
 //#region src/components/dataaccess/AccessRequirementTable.tsx
 function l(l) {
 	let { nameOrID: u, relatedProjectId: d, reviewerId: f, accessType: p, onCreateNewAccessRequirementClicked: m, typeFilter: h, onTypeFilterChange: g = r } = l, { table: _, isLoading: v, hasNextPage: y, fetchNextPage: b, isFetchingNextPage: x } = n({

package/dist/components/dataaccess/AccessRequirementTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AccessRequirementTable.js","names":[],"sources":["../../../src/components/dataaccess/AccessRequirementTable.tsx"],"sourcesContent":["import InfiniteTableLayout from '@/components/layout/InfiniteTableLayout'\nimport { ACCESS_TYPE } from '@sage-bionetworks/synapse-types'\nimport { Button, Typography } from '@mui/material'\nimport { StarTwoTone } from '@mui/icons-material'\nimport { useAccessRequirementTable } from './UseAccessRequirementTable'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\nimport { noop } from 'lodash-es'\n\nexport type AccessRequirementTableProps = {\n nameOrID?: string\n relatedProjectId?: string\n reviewerId?: string\n accessType?: ACCESS_TYPE\n onCreateNewAccessRequirementClicked?: () => void\n typeFilter?: string\n onTypeFilterChange?: (typeFilter: string \| undefined) => void\n}\n\nexport function AccessRequirementTable(props: AccessRequirementTableProps) {\n const {\n nameOrID,\n relatedProjectId,\n reviewerId,\n accessType,\n onCreateNewAccessRequirementClicked,\n typeFilter,\n onTypeFilterChange = noop,\n } = props\n\n const { table, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } =\n useAccessRequirementTable({\n nameOrID,\n relatedProjectId,\n reviewerId,\n accessType,\n typeFilter,\n onTypeFilterChange,\n })\n\n const isEmpty = !isLoading && table.getRowModel().rows.length === 0\n\n return (\n <div>\n <div className=\"SRC-split\">\n <Typography variant=\"headline3\" style={{ marginBottom: 0 }}>\n Access Requirements\n </Typography>\n {onCreateNewAccessRequirementClicked && (\n <Button\n variant=\"outlined\"\n color=\"primary\"\n onClick={onCreateNewAccessRequirementClicked}\n startIcon={<StarTwoTone />}\n >\n New Access Requirement\n </Button>\n )}\n </div>\n <InfiniteTableLayout\n table={\n <StyledTanStackTable\n table={table}\n styledTableContainerProps={{ sx: { my: 2 } }}\n />\n }\n isLoading={isLoading}\n isEmpty={isEmpty}\n hasNextPage={hasNextPage}\n onFetchNextPageClicked={() => {\n fetchNextPage()\n }}\n isFetchingNextPage={isFetchingNextPage}\n />\n </div>\n )\n}\n"],"mappings":";;;;;;;;AAkBA,SAAgB,EAAuB,GAAoC;CACzE,IAAM,EACJ,aACA,qBACA,eACA,eACA,wCACA,eACA,wBAAqB,MACnB,GAEE,EAAE,UAAO,cAAW,gBAAa,kBAAe,0BACpD,EAA0B;EACxB;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GAEG,IAAU,CAAC,KAAa,EAAM,YAAY,EAAE,KAAK,WAAW;CAElE,OACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GAAY,SAAQ;GAAY,OAAO,EAAE,cAAc,EAAE;aAAG;EAEhD,CAAA,GACX,KACC,kBAAC,GAAD;GACE,SAAQ;GACR,OAAM;GACN,SAAS;GACT,WAAW,kBAAC,GAAD,CAAc,CAAA;aAC1B;EAEO,CAAA,CAEP;KACL,kBAAC,GAAD;EACE,OACE,kBAAC,GAAD;GACS;GACP,2BAA2B,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;EAC5C,CAAA;EAEQ;EACF;EACI;EACb,8BAA8B;GAC5B,EAAc;EAChB;EACoB;CACrB,CAAA,CACE,EAAA,CAAA;AAET"}
1	+ {"version":3,"file":"AccessRequirementTable.js","names":[],"sources":["../../../src/components/dataaccess/AccessRequirementTable.tsx"],"sourcesContent":["import InfiniteTableLayout from '@/components/layout/InfiniteTableLayout'\nimport { ACCESS_TYPE } from '@sage-bionetworks/synapse-types'\nimport { Button, Typography } from '@mui/material'\nimport StarTwoTone from '@mui/icons-material/StarTwoTone'\nimport { useAccessRequirementTable } from './UseAccessRequirementTable'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\nimport { noop } from 'lodash-es'\n\nexport type AccessRequirementTableProps = {\n nameOrID?: string\n relatedProjectId?: string\n reviewerId?: string\n accessType?: ACCESS_TYPE\n onCreateNewAccessRequirementClicked?: () => void\n typeFilter?: string\n onTypeFilterChange?: (typeFilter: string \| undefined) => void\n}\n\nexport function AccessRequirementTable(props: AccessRequirementTableProps) {\n const {\n nameOrID,\n relatedProjectId,\n reviewerId,\n accessType,\n onCreateNewAccessRequirementClicked,\n typeFilter,\n onTypeFilterChange = noop,\n } = props\n\n const { table, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } =\n useAccessRequirementTable({\n nameOrID,\n relatedProjectId,\n reviewerId,\n accessType,\n typeFilter,\n onTypeFilterChange,\n })\n\n const isEmpty = !isLoading && table.getRowModel().rows.length === 0\n\n return (\n <div>\n <div className=\"SRC-split\">\n <Typography variant=\"headline3\" style={{ marginBottom: 0 }}>\n Access Requirements\n </Typography>\n {onCreateNewAccessRequirementClicked && (\n <Button\n variant=\"outlined\"\n color=\"primary\"\n onClick={onCreateNewAccessRequirementClicked}\n startIcon={<StarTwoTone />}\n >\n New Access Requirement\n </Button>\n )}\n </div>\n <InfiniteTableLayout\n table={\n <StyledTanStackTable\n table={table}\n styledTableContainerProps={{ sx: { my: 2 } }}\n />\n }\n isLoading={isLoading}\n isEmpty={isEmpty}\n hasNextPage={hasNextPage}\n onFetchNextPageClicked={() => {\n fetchNextPage()\n }}\n isFetchingNextPage={isFetchingNextPage}\n />\n </div>\n )\n}\n"],"mappings":";;;;;;;;AAkBA,SAAgB,EAAuB,GAAoC;CACzE,IAAM,EACJ,aACA,qBACA,eACA,eACA,wCACA,eACA,wBAAqB,MACnB,GAEE,EAAE,UAAO,cAAW,gBAAa,kBAAe,0BACpD,EAA0B;EACxB;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GAEG,IAAU,CAAC,KAAa,EAAM,YAAY,EAAE,KAAK,WAAW;CAElE,OACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GAAY,SAAQ;GAAY,OAAO,EAAE,cAAc,EAAE;aAAG;EAEhD,CAAA,GACX,KACC,kBAAC,GAAD;GACE,SAAQ;GACR,OAAM;GACN,SAAS;GACT,WAAW,kBAAC,GAAD,CAAc,CAAA;aAC1B;EAEO,CAAA,CAEP;KACL,kBAAC,GAAD;EACE,OACE,kBAAC,GAAD;GACS;GACP,2BAA2B,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;EAC5C,CAAA;EAEQ;EACF;EACI;EACb,8BAA8B;GAC5B,EAAc;EAChB;EACoB;CACrB,CAAA,CACE,EAAA,CAAA;AAET"}

package/dist/components/dataaccess/EDucTemplateTable.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EDucTemplateTable.d.ts","sourceRoot":"","sources":["../../../src/components/dataaccess/EDucTemplateTable.tsx"],"names":[],"mappings":"~~AAiKA~~,wBAAgB,iBAAiB,4CAuEhC;AAED,eAAe,iBAAiB,CAAA"}
1	+ {"version":3,"file":"EDucTemplateTable.d.ts","sourceRoot":"","sources":["../../../src/components/dataaccess/EDucTemplateTable.tsx"],"names":[],"mappings":"AAmKA,wBAAgB,iBAAiB,4CAuEhC;AAED,eAAe,iBAAiB,CAAA"}

package/dist/components/dataaccess/EDucTemplateTable.js CHANGED Viewed

@@ -7,11 +7,13 @@ import a from "../TanStackTable/ColumnHeader.js";
 import { useEffect as o, useMemo as s, useState as c } from "react";
 import { Alert as l, Box as u, Button as d, IconButton as f, Skeleton as p, Tooltip as m, Typography as h } from "@mui/material";
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { CheckCircleTwoTone as v, ErrorTwoTone as y, Replay as b } from "@mui/icons-material";
-import x from "dayjs";
-import { createColumnHelper as S, getCoreRowModel as C, useReactTable as w } from "@tanstack/react-table";
+import v from "@mui/icons-material/CheckCircleTwoTone";
+import y from "@mui/icons-material/ErrorTwoTone";
+import b from "dayjs";
+import { createColumnHelper as x, getCoreRowModel as S, useReactTable as C } from "@tanstack/react-table";
+import w from "@mui/icons-material/Replay";
 //#region src/components/dataaccess/EDucTemplateTable.tsx
-var T = S(), E = [
+var T = x(), E = [
 	T.accessor("name", {
 		header: (e) => /* @__PURE__ */ g(a, {
 			...e,
@@ -37,7 +39,7 @@ var T = S(), E = [
 		}),
 		cell: ({ getValue: e }) => {
 			let t = e();
-			return t ? r(x(t)) : "";
+			return t ? r(b(t)) : "";
 		},
 		enableSorting: !1,
 		enableColumnFilter: !1
@@ -49,7 +51,7 @@ var T = S(), E = [
 		}),
 		cell: ({ getValue: e }) => {
 			let t = e();
-			return t ? r(x(t)) : "";
+			return t ? r(b(t)) : "";
 		},
 		enableSorting: !1,
 		enableColumnFilter: !1
@@ -95,7 +97,7 @@ function D(n) {
 						p();
 					},
 					"aria-label": "Re-validate",
-					children: /* @__PURE__ */ g(b, { fontSize: "small" })
+					children: /* @__PURE__ */ g(w, { fontSize: "small" })
 				})
 			})
 		]
@@ -122,7 +124,7 @@ function D(n) {
 						p();
 					},
 					"aria-label": "Re-validate",
-					children: /* @__PURE__ */ g(b, { fontSize: "small" })
+					children: /* @__PURE__ */ g(w, { fontSize: "small" })
 				})
 			})
 		]
@@ -150,7 +152,7 @@ function D(n) {
 						p();
 					},
 					"aria-label": "Re-validate",
-					children: /* @__PURE__ */ g(b, { fontSize: "small" })
+					children: /* @__PURE__ */ g(w, { fontSize: "small" })
 				})
 			})
 		]
@@ -170,10 +172,10 @@ function O() {
 		d,
 		c
 	]);
-	let f = s(() => e?.pages.flatMap((e) => e.results ?? []) ?? [], [e]), m = w({
+	let f = s(() => e?.pages.flatMap((e) => e.results ?? []) ?? [], [e]), m = C({
 		data: f,
 		columns: E,
-		getCoreRowModel: C(),
+		getCoreRowModel: S(),
 		getRowId: (e) => e.templateId ?? ""
 	});
 	return t || a && f.length === 0 ? /* @__PURE__ */ g(u, { children: /* @__PURE__ */ g(p, {

package/dist/components/dataaccess/EDucTemplateTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EDucTemplateTable.js","names":[],"sources":["../../../src/components/dataaccess/EDucTemplateTable.tsx"],"sourcesContent":["import {\n useGetEDucTemplateValidation,\n useListEDucTemplates,\n} from '@/synapse-queries'\nimport { formatDate } from '@/utils/functions/DateFormatter'\nimport { CheckCircleTwoTone, ErrorTwoTone, Replay } from '@mui/icons-material'\nimport {\n Alert,\n Box,\n Button,\n IconButton,\n Skeleton,\n Tooltip,\n Typography,\n} from '@mui/material'\nimport { EDucTemplate } from '@sage-bionetworks/synapse-client'\nimport {\n createColumnHelper,\n getCoreRowModel,\n useReactTable,\n} from '@tanstack/react-table'\nimport dayjs from 'dayjs'\nimport { useEffect, useMemo, useState } from 'react'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport ColumnHeader from '../TanStackTable/ColumnHeader'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\n\nconst columnHelper = createColumnHelper<EDucTemplate>()\n\nconst columns = [\n columnHelper.accessor('name', {\n header: props => <ColumnHeader {...props} title={'Name'} />,\n cell: ({ getValue }) => getValue() ?? '',\n enableSorting: false,\n enableColumnFilter: false,\n }),\n columnHelper.accessor('description', {\n header: props => <ColumnHeader {...props} title={'Description'} />,\n cell: ({ getValue }) => getValue() ?? '',\n enableSorting: false,\n enableColumnFilter: false,\n }),\n columnHelper.accessor('createdOn', {\n header: props => <ColumnHeader {...props} title={'Created on'} />,\n cell: ({ getValue }) => {\n const value = getValue()\n return value ? formatDate(dayjs(value)) : ''\n },\n enableSorting: false,\n enableColumnFilter: false,\n }),\n columnHelper.accessor('modifiedOn', {\n header: props => <ColumnHeader {...props} title={'Modified on'} />,\n cell: ({ getValue }) => {\n const value = getValue()\n return value ? formatDate(dayjs(value)) : ''\n },\n enableSorting: false,\n enableColumnFilter: false,\n }),\n columnHelper.display({\n id: 'validation',\n header: props => <ColumnHeader {...props} title={'Validation status'} />,\n cell: ({ row }) => <ValidationCell templateId={row.original.templateId} />,\n }),\n]\n\nfunction ValidationCell(props: { templateId: string \| undefined }) {\n const { templateId } = props\n const [hasRequestedValidation, setHasRequestedValidation] = useState(false)\n\n const { data, error, isFetching, refetch } = useGetEDucTemplateValidation(\n templateId ?? '',\n { enabled: hasRequestedValidation && Boolean(templateId) },\n )\n\n if (!templateId) return null\n\n if (!hasRequestedValidation) {\n return (\n <Button\n variant={'outlined'}\n size={'small'}\n onClick={() => setHasRequestedValidation(true)}\n >\n Validate\n </Button>\n )\n }\n\n if (isFetching) {\n return (\n <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>\n <SynapseSpinner size={16} />\n </Box>\n )\n }\n\n if (error) {\n return (\n <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5 }}>\n <ErrorTwoTone color={'error'} fontSize={'small'} />\n <Typography variant={'smallText1'} sx={{ color: 'error.main' }}>\n {error.reason}\n </Typography>\n <Tooltip title={'Re-validate'}>\n <IconButton\n size={'small'}\n onClick={() => {\n refetch()\n }}\n aria-label={'Re-validate'}\n >\n <Replay fontSize={'small'} />\n </IconButton>\n </Tooltip>\n </Box>\n )\n }\n\n if (data?.isValid) {\n return (\n <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5 }}>\n <CheckCircleTwoTone color={'success'} fontSize={'small'} />\n <Typography variant={'smallText1'}>Valid</Typography>\n <Tooltip title={'Re-validate'}>\n <IconButton\n size={'small'}\n onClick={() => {\n refetch()\n }}\n aria-label={'Re-validate'}\n >\n <Replay fontSize={'small'} />\n </IconButton>\n </Tooltip>\n </Box>\n )\n }\n\n return (\n <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5 }}>\n <ErrorTwoTone color={'error'} fontSize={'small'} />\n <Typography variant={'smallText1'} sx={{ color: 'error.main' }}>\n {data?.reason ?? 'Invalid'}\n </Typography>\n <Tooltip title={'Re-validate'}>\n <IconButton\n size={'small'}\n onClick={() => {\n refetch()\n }}\n aria-label={'Re-validate'}\n >\n <Replay fontSize={'small'} />\n </IconButton>\n </Tooltip>\n </Box>\n )\n}\n\nexport function EDucTemplateTable() {\n const {\n data,\n isLoading,\n error,\n hasNextPage,\n fetchNextPage,\n isFetchingNextPage,\n } = useListEDucTemplates()\n\n useEffect(() => {\n if (hasNextPage && !isFetchingNextPage) {\n void fetchNextPage()\n }\n }, [hasNextPage, isFetchingNextPage, fetchNextPage])\n\n const templates = useMemo(\n () => data?.pages.flatMap(page => page.results ?? []) ?? [],\n [data],\n )\n\n const table = useReactTable<EDucTemplate>({\n data: templates,\n columns,\n getCoreRowModel: getCoreRowModel(),\n getRowId: row => row.templateId ?? '',\n })\n\n if (isLoading \|\| (hasNextPage && templates.length === 0)) {\n return (\n <Box>\n <Skeleton\n variant={'rectangular'}\n height={200}\n data-testid={'EDucTemplateTable-loading'}\n />\n </Box>\n )\n }\n\n if (error) {\n return (\n <Alert severity={'error'}>\n <strong>Sorry, we couldn't load the eDUC templates.</strong>\n <br />\n {error.reason}\n </Alert>\n )\n }\n\n if (templates.length === 0) {\n return (\n <Alert severity={'info'}>\n No eDUC templates are registered in DocuSign.\n </Alert>\n )\n }\n\n return (\n <Box>\n <Typography variant={'body1'} sx={{ mb: 2, color: 'grey.700' }}>\n Templates are managed in DocuSign. Use the <strong>Validate</strong>{' '}\n action to check whether a template meets Synapse's eDUC\n requirements.\n </Typography>\n <StyledTanStackTable\n table={table}\n styledTableContainerProps={{ sx: { my: 2 } }}\n />\n </Box>\n )\n}\n\nexport default EDucTemplateTable\n"],"mappings":"~~;;;;;;;;;;;;;AA2BA~~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"}
1	+ {"version":3,"file":"EDucTemplateTable.js","names":[],"sources":["../../../src/components/dataaccess/EDucTemplateTable.tsx"],"sourcesContent":["import {\n useGetEDucTemplateValidation,\n useListEDucTemplates,\n} from '@/synapse-queries'\nimport { formatDate } from '@/utils/functions/DateFormatter'\nimport CheckCircleTwoTone from '@mui/icons-material/CheckCircleTwoTone'\nimport ErrorTwoTone from '@mui/icons-material/ErrorTwoTone'\nimport Replay from '@mui/icons-material/Replay'\nimport {\n Alert,\n Box,\n Button,\n IconButton,\n Skeleton,\n Tooltip,\n Typography,\n} from '@mui/material'\nimport { EDucTemplate } from '@sage-bionetworks/synapse-client'\nimport {\n createColumnHelper,\n getCoreRowModel,\n useReactTable,\n} from '@tanstack/react-table'\nimport dayjs from 'dayjs'\nimport { useEffect, useMemo, useState } from 'react'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport ColumnHeader from '../TanStackTable/ColumnHeader'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\n\nconst columnHelper = createColumnHelper<EDucTemplate>()\n\nconst columns = [\n columnHelper.accessor('name', {\n header: props => <ColumnHeader {...props} title={'Name'} />,\n cell: ({ getValue }) => getValue() ?? '',\n enableSorting: false,\n enableColumnFilter: false,\n }),\n columnHelper.accessor('description', {\n header: props => <ColumnHeader {...props} title={'Description'} />,\n cell: ({ getValue }) => getValue() ?? '',\n enableSorting: false,\n enableColumnFilter: false,\n }),\n columnHelper.accessor('createdOn', {\n header: props => <ColumnHeader {...props} title={'Created on'} />,\n cell: ({ getValue }) => {\n const value = getValue()\n return value ? formatDate(dayjs(value)) : ''\n },\n enableSorting: false,\n enableColumnFilter: false,\n }),\n columnHelper.accessor('modifiedOn', {\n header: props => <ColumnHeader {...props} title={'Modified on'} />,\n cell: ({ getValue }) => {\n const value = getValue()\n return value ? formatDate(dayjs(value)) : ''\n },\n enableSorting: false,\n enableColumnFilter: false,\n }),\n columnHelper.display({\n id: 'validation',\n header: props => <ColumnHeader {...props} title={'Validation status'} />,\n cell: ({ row }) => <ValidationCell templateId={row.original.templateId} />,\n }),\n]\n\nfunction ValidationCell(props: { templateId: string \| undefined }) {\n const { templateId } = props\n const [hasRequestedValidation, setHasRequestedValidation] = useState(false)\n\n const { data, error, isFetching, refetch } = useGetEDucTemplateValidation(\n templateId ?? '',\n { enabled: hasRequestedValidation && Boolean(templateId) },\n )\n\n if (!templateId) return null\n\n if (!hasRequestedValidation) {\n return (\n <Button\n variant={'outlined'}\n size={'small'}\n onClick={() => setHasRequestedValidation(true)}\n >\n Validate\n </Button>\n )\n }\n\n if (isFetching) {\n return (\n <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>\n <SynapseSpinner size={16} />\n </Box>\n )\n }\n\n if (error) {\n return (\n <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5 }}>\n <ErrorTwoTone color={'error'} fontSize={'small'} />\n <Typography variant={'smallText1'} sx={{ color: 'error.main' }}>\n {error.reason}\n </Typography>\n <Tooltip title={'Re-validate'}>\n <IconButton\n size={'small'}\n onClick={() => {\n refetch()\n }}\n aria-label={'Re-validate'}\n >\n <Replay fontSize={'small'} />\n </IconButton>\n </Tooltip>\n </Box>\n )\n }\n\n if (data?.isValid) {\n return (\n <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5 }}>\n <CheckCircleTwoTone color={'success'} fontSize={'small'} />\n <Typography variant={'smallText1'}>Valid</Typography>\n <Tooltip title={'Re-validate'}>\n <IconButton\n size={'small'}\n onClick={() => {\n refetch()\n }}\n aria-label={'Re-validate'}\n >\n <Replay fontSize={'small'} />\n </IconButton>\n </Tooltip>\n </Box>\n )\n }\n\n return (\n <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5 }}>\n <ErrorTwoTone color={'error'} fontSize={'small'} />\n <Typography variant={'smallText1'} sx={{ color: 'error.main' }}>\n {data?.reason ?? 'Invalid'}\n </Typography>\n <Tooltip title={'Re-validate'}>\n <IconButton\n size={'small'}\n onClick={() => {\n refetch()\n }}\n aria-label={'Re-validate'}\n >\n <Replay fontSize={'small'} />\n </IconButton>\n </Tooltip>\n </Box>\n )\n}\n\nexport function EDucTemplateTable() {\n const {\n data,\n isLoading,\n error,\n hasNextPage,\n fetchNextPage,\n isFetchingNextPage,\n } = useListEDucTemplates()\n\n useEffect(() => {\n if (hasNextPage && !isFetchingNextPage) {\n void fetchNextPage()\n }\n }, [hasNextPage, isFetchingNextPage, fetchNextPage])\n\n const templates = useMemo(\n () => data?.pages.flatMap(page => page.results ?? []) ?? [],\n [data],\n )\n\n const table = useReactTable<EDucTemplate>({\n data: templates,\n columns,\n getCoreRowModel: getCoreRowModel(),\n getRowId: row => row.templateId ?? '',\n })\n\n if (isLoading \|\| (hasNextPage && templates.length === 0)) {\n return (\n <Box>\n <Skeleton\n variant={'rectangular'}\n height={200}\n data-testid={'EDucTemplateTable-loading'}\n />\n </Box>\n )\n }\n\n if (error) {\n return (\n <Alert severity={'error'}>\n <strong>Sorry, we couldn't load the eDUC templates.</strong>\n <br />\n {error.reason}\n </Alert>\n )\n }\n\n if (templates.length === 0) {\n return (\n <Alert severity={'info'}>\n No eDUC templates are registered in DocuSign.\n </Alert>\n )\n }\n\n return (\n <Box>\n <Typography variant={'body1'} sx={{ mb: 2, color: 'grey.700' }}>\n Templates are managed in DocuSign. Use the <strong>Validate</strong>{' '}\n action to check whether a template meets Synapse's eDUC\n requirements.\n </Typography>\n <StyledTanStackTable\n table={table}\n styledTableContainerProps={{ sx: { my: 2 } }}\n />\n </Box>\n )\n}\n\nexport default EDucTemplateTable\n"],"mappings":"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"}

package/dist/components/dataaccess/FormTemplateTable.js CHANGED Viewed

@@ -5,8 +5,8 @@ import { useMemo as r, useState as i } from "react";
 import { Alert as a, Box as o, Button as s, Chip as c, FormControlLabel as l, InputAdornment as u, Skeleton as d, Switch as f, TextField as p, Typography as m } from "@mui/material";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 import { keepPreviousData as v } from "@tanstack/react-query";
-import { SearchOutlined as y } from "@mui/icons-material";
-import { Link as b, useNavigate as x } from "react-router";
+import { Link as y, useNavigate as b } from "react-router";
+import x from "@mui/icons-material/SearchOutlined";
 import { useDebouncedState as S } from "@react-hookz/web";
 import { createColumnHelper as C, getCoreRowModel as w, useReactTable as T } from "@tanstack/react-table";
 //#region src/components/dataaccess/FormTemplateTable.tsx
@@ -16,7 +16,7 @@ var E = "FormTemplates", D = `${E}/new`, O = `${E}/:templateId`, k = `/${E}`, A
 			...e,
 			title: "Name"
 		}),
-		cell: ({ row: e, getValue: t }) => e.original.id ? /* @__PURE__ */ g(b, {
+		cell: ({ row: e, getValue: t }) => e.original.id ? /* @__PURE__ */ g(y, {
 			to: j(e.original.id),
 			children: t()
 		}) : t(),
@@ -42,7 +42,7 @@ var E = "FormTemplates", D = `${E}/new`, O = `${E}/:templateId`, k = `/${E}`, A
 	})
 ];
 function F() {
-	let n = x(), [c, b] = S("", 500), [C, E] = i(!1), { data: D, isLoading: O, error: k, hasNextPage: j, fetchNextPage: M, isFetchingNextPage: N } = e(r(() => ({
+	let n = b(), [c, y] = S("", 500), [C, E] = i(!1), { data: D, isLoading: O, error: k, hasNextPage: j, fetchNextPage: M, isFetchingNextPage: N } = e(r(() => ({
 		name: c || void 0,
 		includeDeprecated: C
 	}), [c, C]), { placeholderData: v }), F = r(() => D?.pages.flatMap((e) => e.results ?? []) ?? [], [D]), I = T({
@@ -93,10 +93,10 @@ function F() {
 				label: "Filter by template name",
 				type: "text",
 				size: "small",
-				onChange: (e) => b(e.target.value),
+				onChange: (e) => y(e.target.value),
 				slotProps: { input: { endAdornment: /* @__PURE__ */ g(u, {
 					position: "end",
-					children: /* @__PURE__ */ g(y, {})
+					children: /* @__PURE__ */ g(x, {})
 				}) } },
 				sx: { minWidth: 300 }
 			}),

package/dist/components/dataaccess/FormTemplateTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormTemplateTable.js","names":[],"sources":["../../../src/components/dataaccess/FormTemplateTable.tsx"],"sourcesContent":["import { useSearchFormTemplatesInfinite } from '@/synapse-queries/dataaccess/useFormTemplate'\nimport { SearchOutlined } from '@mui/icons-material'\nimport {\n Alert,\n Box,\n Button,\n Chip,\n FormControlLabel,\n InputAdornment,\n Skeleton,\n Switch,\n TextField,\n Typography,\n} from '@mui/material'\nimport { useDebouncedState } from '@react-hookz/web'\nimport { FormTemplate } from '@sage-bionetworks/synapse-client'\nimport {\n createColumnHelper,\n getCoreRowModel,\n useReactTable,\n} from '@tanstack/react-table'\nimport { useMemo, useState } from 'react'\nimport { Link, useNavigate } from 'react-router'\nimport ColumnHeader from '../TanStackTable/ColumnHeader'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\nimport { keepPreviousData } from '@tanstack/react-query'\n\nexport const FORM_TEMPLATES_ROUTE = 'FormTemplates'\nexport const NEW_FORM_TEMPLATE_ROUTE = `${FORM_TEMPLATES_ROUTE}/new`\nexport const FORM_TEMPLATE_ROUTE = `${FORM_TEMPLATES_ROUTE}/:templateId`\nexport const FORM_TEMPLATES_PATH = `/${FORM_TEMPLATES_ROUTE}`\nexport const NEW_FORM_TEMPLATE_PATH = `/${NEW_FORM_TEMPLATE_ROUTE}`\nexport const getFormTemplatePath = (templateId: string) =>\n `${FORM_TEMPLATES_PATH}/${templateId}`\n\n// Time to wait after the search input changes before sending a new request\nexport const NAME_SEARCH_DEBOUNCE_DELAY_MS = 500\n\nconst columnHelper = createColumnHelper<FormTemplate>()\n\nconst columns = [\n columnHelper.accessor('name', {\n header: props => <ColumnHeader {...props} title={'Name'} />,\n cell: ({ row, getValue }) =>\n row.original.id ? (\n <Link to={getFormTemplatePath(row.original.id)}>{getValue()}</Link>\n ) : (\n getValue()\n ),\n enableColumnFilter: false,\n }),\n columnHelper.accessor('versionNumber', {\n header: props => <ColumnHeader {...props} title={'Version'} />,\n enableColumnFilter: false,\n }),\n columnHelper.accessor('deprecated', {\n header: props => <ColumnHeader {...props} title={'Status'} />,\n cell: ({ getValue }) =>\n getValue() ? <Chip label={'Deprecated'} size={'small'} /> : null,\n enableColumnFilter: false,\n }),\n]\n\nexport function FormTemplateTable() {\n const navigate = useNavigate()\n const [name, setName] = useDebouncedState<string>(\n '',\n NAME_SEARCH_DEBOUNCE_DELAY_MS,\n )\n const [includeDeprecated, setIncludeDeprecated] = useState(false)\n\n const request = useMemo(\n () => ({ name: name \|\| undefined, includeDeprecated }),\n [name, includeDeprecated],\n )\n const {\n data,\n isLoading,\n error,\n hasNextPage,\n fetchNextPage,\n isFetchingNextPage,\n } = useSearchFormTemplatesInfinite(request, {\n // keepPreviousData avoids a flicker when the request changes\n placeholderData: keepPreviousData,\n })\n\n const templates = useMemo(\n () => data?.pages.flatMap(page => page.results ?? []) ?? [],\n [data],\n )\n\n const table = useReactTable<FormTemplate>({\n data: templates,\n columns,\n getCoreRowModel: getCoreRowModel(),\n getRowId: row => row.id ?? '',\n })\n\n const errorAlert = error && (\n <Alert severity={'error'}>\n <strong>Sorry, we couldn't load the form templates.</strong>\n <br />\n {error.reason}\n </Alert>\n )\n\n let content\n if (isLoading) {\n content = <Skeleton variant={'rectangular'} height={200} />\n } else if (error && !data) {\n content = errorAlert\n } else if (templates.length === 0) {\n content = (\n <Typography variant={'body1'} sx={{ textAlign: 'center', my: 2 }}>\n No form templates found.\n </Typography>\n )\n } else {\n content = (\n <>\n <StyledTanStackTable\n table={table}\n styledTableContainerProps={{ sx: { my: 2 } }}\n />\n {/* A failed \"Load more\" keeps the loaded rows; clicking \"Load more\" again retries */}\n {errorAlert}\n {hasNextPage && (\n <Button\n variant={'outlined'}\n disabled={isFetchingNextPage}\n onClick={() => void fetchNextPage()}\n >\n Load more\n </Button>\n )}\n </>\n )\n }\n\n return (\n <Box>\n <Box\n sx={{\n display: 'flex',\n // The text field's label sits above its input, so align to the bottom to line up with the input\n alignItems: 'flex-end',\n gap: 2,\n flexWrap: 'wrap',\n mb: 2,\n }}\n >\n <TextField\n label={'Filter by template name'}\n type={'text'}\n size={'small'}\n onChange={e => setName(e.target.value)}\n slotProps={{\n input: {\n endAdornment: (\n <InputAdornment position={'end'}>\n <SearchOutlined />\n </InputAdornment>\n ),\n },\n }}\n sx={{ minWidth: 300 }}\n />\n <FormControlLabel\n label={'Include deprecated'}\n // Drop the inherited bottom margin so the switch lines up with the input\n sx={{ mb: 0 }}\n control={\n <Switch\n // The hidden input's default margin overflows the switch and scrolls it when checked\n sx={{ '& .MuiSwitch-input': { m: 0 } }}\n checked={includeDeprecated}\n onChange={e => setIncludeDeprecated(e.target.checked)}\n />\n }\n />\n <Button\n variant={'contained'}\n sx={{ ml: 'auto' }}\n onClick={() => void navigate(NEW_FORM_TEMPLATE_PATH)}\n >\n Create template\n </Button>\n </Box>\n {content}\n </Box>\n )\n}\n\nexport default FormTemplateTable\n"],"mappings":"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"}
1	+ {"version":3,"file":"FormTemplateTable.js","names":[],"sources":["../../../src/components/dataaccess/FormTemplateTable.tsx"],"sourcesContent":["import { useSearchFormTemplatesInfinite } from '@/synapse-queries/dataaccess/useFormTemplate'\nimport SearchOutlined from '@mui/icons-material/SearchOutlined'\nimport {\n Alert,\n Box,\n Button,\n Chip,\n FormControlLabel,\n InputAdornment,\n Skeleton,\n Switch,\n TextField,\n Typography,\n} from '@mui/material'\nimport { useDebouncedState } from '@react-hookz/web'\nimport { FormTemplate } from '@sage-bionetworks/synapse-client'\nimport {\n createColumnHelper,\n getCoreRowModel,\n useReactTable,\n} from '@tanstack/react-table'\nimport { useMemo, useState } from 'react'\nimport { Link, useNavigate } from 'react-router'\nimport ColumnHeader from '../TanStackTable/ColumnHeader'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\nimport { keepPreviousData } from '@tanstack/react-query'\n\nexport const FORM_TEMPLATES_ROUTE = 'FormTemplates'\nexport const NEW_FORM_TEMPLATE_ROUTE = `${FORM_TEMPLATES_ROUTE}/new`\nexport const FORM_TEMPLATE_ROUTE = `${FORM_TEMPLATES_ROUTE}/:templateId`\nexport const FORM_TEMPLATES_PATH = `/${FORM_TEMPLATES_ROUTE}`\nexport const NEW_FORM_TEMPLATE_PATH = `/${NEW_FORM_TEMPLATE_ROUTE}`\nexport const getFormTemplatePath = (templateId: string) =>\n `${FORM_TEMPLATES_PATH}/${templateId}`\n\n// Time to wait after the search input changes before sending a new request\nexport const NAME_SEARCH_DEBOUNCE_DELAY_MS = 500\n\nconst columnHelper = createColumnHelper<FormTemplate>()\n\nconst columns = [\n columnHelper.accessor('name', {\n header: props => <ColumnHeader {...props} title={'Name'} />,\n cell: ({ row, getValue }) =>\n row.original.id ? (\n <Link to={getFormTemplatePath(row.original.id)}>{getValue()}</Link>\n ) : (\n getValue()\n ),\n enableColumnFilter: false,\n }),\n columnHelper.accessor('versionNumber', {\n header: props => <ColumnHeader {...props} title={'Version'} />,\n enableColumnFilter: false,\n }),\n columnHelper.accessor('deprecated', {\n header: props => <ColumnHeader {...props} title={'Status'} />,\n cell: ({ getValue }) =>\n getValue() ? <Chip label={'Deprecated'} size={'small'} /> : null,\n enableColumnFilter: false,\n }),\n]\n\nexport function FormTemplateTable() {\n const navigate = useNavigate()\n const [name, setName] = useDebouncedState<string>(\n '',\n NAME_SEARCH_DEBOUNCE_DELAY_MS,\n )\n const [includeDeprecated, setIncludeDeprecated] = useState(false)\n\n const request = useMemo(\n () => ({ name: name \|\| undefined, includeDeprecated }),\n [name, includeDeprecated],\n )\n const {\n data,\n isLoading,\n error,\n hasNextPage,\n fetchNextPage,\n isFetchingNextPage,\n } = useSearchFormTemplatesInfinite(request, {\n // keepPreviousData avoids a flicker when the request changes\n placeholderData: keepPreviousData,\n })\n\n const templates = useMemo(\n () => data?.pages.flatMap(page => page.results ?? []) ?? [],\n [data],\n )\n\n const table = useReactTable<FormTemplate>({\n data: templates,\n columns,\n getCoreRowModel: getCoreRowModel(),\n getRowId: row => row.id ?? '',\n })\n\n const errorAlert = error && (\n <Alert severity={'error'}>\n <strong>Sorry, we couldn't load the form templates.</strong>\n <br />\n {error.reason}\n </Alert>\n )\n\n let content\n if (isLoading) {\n content = <Skeleton variant={'rectangular'} height={200} />\n } else if (error && !data) {\n content = errorAlert\n } else if (templates.length === 0) {\n content = (\n <Typography variant={'body1'} sx={{ textAlign: 'center', my: 2 }}>\n No form templates found.\n </Typography>\n )\n } else {\n content = (\n <>\n <StyledTanStackTable\n table={table}\n styledTableContainerProps={{ sx: { my: 2 } }}\n />\n {/* A failed \"Load more\" keeps the loaded rows; clicking \"Load more\" again retries */}\n {errorAlert}\n {hasNextPage && (\n <Button\n variant={'outlined'}\n disabled={isFetchingNextPage}\n onClick={() => void fetchNextPage()}\n >\n Load more\n </Button>\n )}\n </>\n )\n }\n\n return (\n <Box>\n <Box\n sx={{\n display: 'flex',\n // The text field's label sits above its input, so align to the bottom to line up with the input\n alignItems: 'flex-end',\n gap: 2,\n flexWrap: 'wrap',\n mb: 2,\n }}\n >\n <TextField\n label={'Filter by template name'}\n type={'text'}\n size={'small'}\n onChange={e => setName(e.target.value)}\n slotProps={{\n input: {\n endAdornment: (\n <InputAdornment position={'end'}>\n <SearchOutlined />\n </InputAdornment>\n ),\n },\n }}\n sx={{ minWidth: 300 }}\n />\n <FormControlLabel\n label={'Include deprecated'}\n // Drop the inherited bottom margin so the switch lines up with the input\n sx={{ mb: 0 }}\n control={\n <Switch\n // The hidden input's default margin overflows the switch and scrolls it when checked\n sx={{ '& .MuiSwitch-input': { m: 0 } }}\n checked={includeDeprecated}\n onChange={e => setIncludeDeprecated(e.target.checked)}\n />\n }\n />\n <Button\n variant={'contained'}\n sx={{ ml: 'auto' }}\n onClick={() => void navigate(NEW_FORM_TEMPLATE_PATH)}\n >\n Create template\n </Button>\n </Box>\n {content}\n </Box>\n )\n}\n\nexport default FormTemplateTable\n"],"mappings":"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"}

package/dist/components/dataaccess/ReviewerDashboard.js CHANGED Viewed

@@ -15,13 +15,13 @@ import _ from "./SubmissionPage/SubmissionPage.js";
 import { useMemo as v } from "react";
 import { Box as y, Typography as b } from "@mui/material";
 import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
-import { DynamicFormOutlined as w } from "@mui/icons-material";
-import { NavLink as T, Navigate as E, Outlet as D, RouterProvider as O, createBrowserRouter as k, createMemoryRouter as A, useParams as j } from "react-router";
-import { RouterProvider as M } from "react-router/dom";
+import { NavLink as w, Navigate as T, Outlet as E, RouterProvider as D, createBrowserRouter as O, createMemoryRouter as k, useParams as A } from "react-router";
+import { RouterProvider as j } from "react-router/dom";
+import M from "@mui/icons-material/DynamicFormOutlined";
 //#region src/components/dataaccess/ReviewerDashboard.tsx
 function N(e) {
 	let { href: t, children: n, icon: r } = e;
-	return /* @__PURE__ */ C(T, {
+	return /* @__PURE__ */ C(w, {
 		className: "Tab",
 		role: "tab",
 		to: t,
@@ -39,7 +39,7 @@ function N(e) {
 	});
 }
 function P(_) {
-	let { routerBaseName: y = "/DataAccessManagement:default", useMemoryRouter: b = !1 } = _, { data: T, isLoading: E } = r(), j = T?.isACTMember, P = T?.isACTMember || T?.isARReviewer, I = n(o.ACT_DASHBOARD_FORM_TEMPLATES), L = j && I, R = v(() => [{
+	let { routerBaseName: y = "/DataAccessManagement:default", useMemoryRouter: b = !1 } = _, { data: w, isLoading: T } = r(), A = w?.isACTMember, P = w?.isACTMember || w?.isARReviewer, I = n(o.ACT_DASHBOARD_FORM_TEMPLATES), L = A && I, R = v(() => [{
 		path: "/",
 		element: /* @__PURE__ */ C("div", {
 			className: "ReviewerDashboard",
@@ -47,19 +47,19 @@ function P(_) {
 				className: "Tabs",
 				role: "tablist",
 				children: [
-					j && /* @__PURE__ */ S(N, {
+					A && /* @__PURE__ */ S(N, {
 						href: "/AccessRequirements",
 						icon: /* @__PURE__ */ S(i, { icon: "accessClosed" }),
 						children: "Access Requirements"
 					}),
-					j && /* @__PURE__ */ S(N, {
+					A && /* @__PURE__ */ S(N, {
 						href: "/EDucTemplates",
 						icon: /* @__PURE__ */ S(i, { icon: "fileOutlined" }),
 						children: "eDUC Templates"
 					}),
 					L && /* @__PURE__ */ S(N, {
 						href: d,
-						icon: /* @__PURE__ */ S(w, {}),
+						icon: /* @__PURE__ */ S(M, {}),
 						children: "Form Templates"
 					}),
 					P && /* @__PURE__ */ S(N, {
@@ -75,17 +75,17 @@ function P(_) {
 				]
 			}), /* @__PURE__ */ S("div", {
 				className: "TabContentContainer",
-				children: /* @__PURE__ */ S(e, { children: /* @__PURE__ */ S(D, {}) })
+				children: /* @__PURE__ */ S(e, { children: /* @__PURE__ */ S(E, {}) })
 			})]
 		}),
 		children: [
 			{
 				path: "AccessRequirements",
-				element: j ? /* @__PURE__ */ S(c, {}) : null
+				element: A ? /* @__PURE__ */ S(c, {}) : null
 			},
 			{
 				path: "EDucTemplates",
-				element: j ? /* @__PURE__ */ S(u, {}) : null
+				element: A ? /* @__PURE__ */ S(u, {}) : null
 			},
 			{
 				path: f,
@@ -101,7 +101,7 @@ function P(_) {
 			},
 			{
 				path: "Submissions",
-				element: P ? /* @__PURE__ */ C(x, { children: [!j && /* @__PURE__ */ S(a, {
+				element: P ? /* @__PURE__ */ C(x, { children: [!A && /* @__PURE__ */ S(a, {
 					name: "DataAccessManagement",
 					title: "Getting Started With Data Access Management",
 					text: "When someone requests access to data, that request will show up here. Clicking on the Request ID will take you to a page where you can review the request.",
@@ -121,22 +121,22 @@ function P(_) {
 			}
 		]
 	}], [
-		j,
+		A,
 		P,
 		L
-	]), z = v(() => b ? A(R, { basename: y }) : k(R, { basename: y }), [
+	]), z = v(() => b ? k(R, { basename: y }) : O(R, { basename: y }), [
 		b,
 		R,
 		y
 	]);
-	return E ? /* @__PURE__ */ S(t, { size: 50 }) : S(b ? O : M, { router: z });
+	return T ? /* @__PURE__ */ S(t, { size: 50 }) : S(b ? D : j, { router: z });
 }
 function F() {
-	let { id: e } = j();
+	let { id: e } = A();
 	return e ? /* @__PURE__ */ S(_, {
 		submissionId: e,
 		isReviewer: !0
-	}) : /* @__PURE__ */ S(E, { to: "Submissions/" });
+	}) : /* @__PURE__ */ S(T, { to: "Submissions/" });
 }
 //#endregion
 export { P as ReviewerDashboard, P as default };