synapse-react-client 4.0.33 → 4.0.34

package/dist/components/dataaccess/AccessRequirementDashboard.js

@@ -7,86 +7,86 @@ import { AccessRequirementTable as a } from "./AccessRequirementTable.js";
 import { useCallback as o, useEffect as s, useMemo as c, useState as l } from "react";
 import { omitBy as u } from "lodash-es";
 import { Grid as d, InputAdornment as f, TextField as p, Typography as m } from "@mui/material";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { EntityType as _ } from "@sage-bionetworks/synapse-client";
-import { SearchOutlined as v } from "@mui/icons-material";
-import { useLocation as y, useNavigate as b } from "react-router";
-import { useDebouncedState as x } from "@react-hookz/web";
+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 { useDebouncedState as S } from "@react-hookz/web";
 //#region src/components/dataaccess/AccessRequirementDashboard.tsx
-var S = "nameOrID", C = "relatedProjectId", w = "reviewerId", T = "type";
-function E(E) {
-	let { onCreateNewAccessRequirementClicked: D } = E, O = y(), k = c(() => new URLSearchParams(O.search), [O.search]), A = b(), [j, M] = x(k.get("nameOrID") ?? "", 500), [N, P] = x(k.get("relatedProjectId") ?? void 0, 500), [F, I] = x(k.get("reviewerId") ?? void 0, 500), [L, R] = l(k.get("type") ?? void 0), z = c(() => !!(N && !e.exec(N)), [N]), [B, V] = l(!1);
+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);
 	s(() => {
 		let e = u({
-			[S]: j,
-			[C]: N,
-			[w]: F,
-			[T]: L
+			[C]: M,
+			[w]: P,
+			[T]: I,
+			[E]: R
 		}, (e) => e === void 0 || e === ""), t = new URLSearchParams(e);
-		A({
-			pathname: O.pathname,
+		j({
+			pathname: k.pathname,
 			search: t.toString()
 		}, { replace: !0 });
 	}, [
+		M,
+		P,
+		I,
+		R,
 		j,
-		N,
-		F,
-		L,
-		A,
-		O.pathname
+		k.pathname
 	]);
-	let H = o((e) => {
-		I(e || void 0);
-	}, [I]);
+	let U = o((e) => {
+		L(e || void 0);
+	}, [L]);
 	return /* @__PURE__ */ g("div", {
 		className: "AccessRequirementDashboard",
-		children: [
-			/* @__PURE__ */ h(i, {
+		children: /* @__PURE__ */ _(h, { children: [
+			/* @__PURE__ */ g(i, {
 				configuration: {
 					initialScope: n.ALL_PROJECTS,
 					initialContainer: null,
 					selectMultiple: !1,
-					selectableTypes: [_.project],
+					selectableTypes: [v.project],
 					treeOnly: !0
 				},
-				show: B,
+				show: V,
 				onCancel: () => {
-					V(!1);
+					H(!1);
 				},
 				title: "Select Project to Filter Access Requirements",
 				promptCopy: "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.",
 				onConfirm: (e) => {
-					P(e[0].targetId), V(!1);
+					F(e[0].targetId), H(!1);
 				},
 				confirmButtonCopy: "Select"
 			}),
-			/* @__PURE__ */ g(d, {
+			/* @__PURE__ */ _(d, {
 				component: "form",
 				container: !0,
 				spacing: 2,
 				className: "InputPanel",
 				children: [
-					/* @__PURE__ */ h(d, {
+					/* @__PURE__ */ g(d, {
 						size: {
 							xs: 12,
 							md: 4
 						},
-						children: /* @__PURE__ */ h(p, {
+						children: /* @__PURE__ */ g(p, {
 							label: "Filter by Access Requirement Name or ID",
 							id: "ar-name-filter",
 							type: "text",
 							fullWidth: !0,
 							placeholder: "Search for an Access Requirement Name or ID",
 							onChange: (e) => {
-								M(e.target.value);
+								N(e.target.value);
 							},
-							slotProps: { input: { endAdornment: /* @__PURE__ */ h(f, {
+							slotProps: { input: { endAdornment: /* @__PURE__ */ g(f, {
 								position: "end",
-								children: /* @__PURE__ */ h(v, {})
+								children: /* @__PURE__ */ g(y, {})
 							}) } }
 						})
 					}),
-					/* @__PURE__ */ g(d, {
+					/* @__PURE__ */ _(d, {
 						size: {
 							xs: 12,
 							md: 4
@@ -96,58 +96,58 @@ function E(E) {
 							gap: "5px",
 							alignItems: "stretch"
 						},
-						children: [/* @__PURE__ */ h(p, {
+						children: [/* @__PURE__ */ g(p, {
 							label: "Filter by Project",
 							id: "project-id-filter",
 							type: "text",
 							fullWidth: !0,
 							placeholder: "Enter a project SynID",
-							error: z,
-							helperText: z ? "Value must be a Synapse ID, e.g. \"syn1234\"" : void 0,
+							error: B,
+							helperText: B ? "Value must be a Synapse ID, e.g. \"syn1234\"" : void 0,
 							onChange: (e) => {
 								let t = e.target.value;
-								P(t === "" ? void 0 : t);
+								F(t === "" ? void 0 : t);
 							}
-						}), /* @__PURE__ */ h(r, {
+						}), /* @__PURE__ */ g(r, {
 							variant: "outlined",
 							color: "primary",
 							onClick: () => {
-								V(!0);
+								H(!0);
 							},
 							children: "Browse"
 						})]
 					}),
-					/* @__PURE__ */ g(d, {
+					/* @__PURE__ */ _(d, {
 						size: {
 							xs: 12,
 							md: 4
 						},
-						children: [/* @__PURE__ */ h(m, {
+						children: [/* @__PURE__ */ g(m, {
 							component: "label",
 							variant: "smallText2",
 							htmlFor: "reviewer-filter",
 							children: "Filter by Reviewer"
-						}), /* @__PURE__ */ h(t, {
+						}), /* @__PURE__ */ g(t, {
 							inputId: "reviewer-filter",
 							placeholder: "Search for a username or team name",
-							defaultValue: F,
-							onChange: H
+							defaultValue: I,
+							onChange: U
 						})]
 					})
 				]
 			}),
-			/* @__PURE__ */ h(a, {
-				nameOrID: j,
-				relatedProjectId: N,
-				reviewerId: F,
-				onCreateNewAccessRequirementClicked: D,
-				typeFilter: L,
-				onTypeFilterChange: R
+			/* @__PURE__ */ g(a, {
+				nameOrID: M,
+				relatedProjectId: P,
+				reviewerId: I,
+				onCreateNewAccessRequirementClicked: O,
+				typeFilter: R,
+				onTypeFilterChange: z
 			})
-		]
+		] })
 	});
 }
 //#endregion
-export { S as AR_NAME_OR_ID_SEARCH_PARAM_KEY, T as AR_TYPE_SEARCH_PARAM_KEY, E as AccessRequirementDashboard, E as default, C as RELATED_PROJECT_ID_SEARCH_PARAM_KEY, w as REVIEWER_ID_SEARCH_PARAM_KEY };
+export { C as AR_NAME_OR_ID_SEARCH_PARAM_KEY, E as AR_TYPE_SEARCH_PARAM_KEY, D as AccessRequirementDashboard, D as default, w as RELATED_PROJECT_ID_SEARCH_PARAM_KEY, T as REVIEWER_ID_SEARCH_PARAM_KEY };
 
 //# sourceMappingURL=AccessRequirementDashboard.js.map

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

@@ -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  return (\n    <div className=\"AccessRequirementDashboard\">\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    </div>\n  )\n}\n\nexport default AccessRequirementDashboard\n"],"mappings":"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"}
+{"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":"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"}

package/dist/components/dataaccess/EDucTemplateTable.d.ts

@@ -0,0 +1,3 @@
+export declare function EDucTemplateTable(): import("react/jsx-runtime").JSX.Element;
+export default EDucTemplateTable;
+//# sourceMappingURL=EDucTemplateTable.d.ts.map

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

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

package/dist/components/dataaccess/EDucTemplateTable.js

@@ -0,0 +1,213 @@
+import { SynapseSpinner as e } from "../LoadingScreen/LoadingScreen.js";
+import { useGetEDucTemplateValidation as t, useListEDucTemplates as n } from "../../synapse-queries/dataaccess/useEDuc.js";
+import "../../synapse-queries/index.js";
+import { formatDate as r } from "../../utils/functions/DateFormatter.js";
+import i from "../TanStackTable/StyledTanStackTable.js";
+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";
+//#region src/components/dataaccess/EDucTemplateTable.tsx
+var T = S(), E = [
+	T.accessor("name", {
+		header: (e) => /* @__PURE__ */ g(a, {
+			...e,
+			title: "Name"
+		}),
+		cell: ({ getValue: e }) => e() ?? "",
+		enableSorting: !1,
+		enableColumnFilter: !1
+	}),
+	T.accessor("description", {
+		header: (e) => /* @__PURE__ */ g(a, {
+			...e,
+			title: "Description"
+		}),
+		cell: ({ getValue: e }) => e() ?? "",
+		enableSorting: !1,
+		enableColumnFilter: !1
+	}),
+	T.accessor("createdOn", {
+		header: (e) => /* @__PURE__ */ g(a, {
+			...e,
+			title: "Created on"
+		}),
+		cell: ({ getValue: e }) => {
+			let t = e();
+			return t ? r(x(t)) : "";
+		},
+		enableSorting: !1,
+		enableColumnFilter: !1
+	}),
+	T.accessor("modifiedOn", {
+		header: (e) => /* @__PURE__ */ g(a, {
+			...e,
+			title: "Modified on"
+		}),
+		cell: ({ getValue: e }) => {
+			let t = e();
+			return t ? r(x(t)) : "";
+		},
+		enableSorting: !1,
+		enableColumnFilter: !1
+	}),
+	T.display({
+		id: "validation",
+		header: (e) => /* @__PURE__ */ g(a, {
+			...e,
+			title: "Validation status"
+		}),
+		cell: ({ row: e }) => /* @__PURE__ */ g(D, { templateId: e.original.templateId })
+	})
+];
+function D(n) {
+	let { templateId: r } = n, [i, a] = c(!1), { data: o, error: s, isFetching: l, refetch: p } = t(r ?? "", { enabled: i && !!r });
+	return r ? i ? l ? /* @__PURE__ */ g(u, {
+		sx: {
+			display: "inline-flex",
+			alignItems: "center"
+		},
+		children: /* @__PURE__ */ g(e, { size: 16 })
+	}) : s ? /* @__PURE__ */ _(u, {
+		sx: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: .5
+		},
+		children: [
+			/* @__PURE__ */ g(y, {
+				color: "error",
+				fontSize: "small"
+			}),
+			/* @__PURE__ */ g(h, {
+				variant: "smallText1",
+				sx: { color: "error.main" },
+				children: s.reason
+			}),
+			/* @__PURE__ */ g(m, {
+				title: "Re-validate",
+				children: /* @__PURE__ */ g(f, {
+					size: "small",
+					onClick: () => {
+						p();
+					},
+					"aria-label": "Re-validate",
+					children: /* @__PURE__ */ g(b, { fontSize: "small" })
+				})
+			})
+		]
+	}) : o?.isValid ? /* @__PURE__ */ _(u, {
+		sx: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: .5
+		},
+		children: [
+			/* @__PURE__ */ g(v, {
+				color: "success",
+				fontSize: "small"
+			}),
+			/* @__PURE__ */ g(h, {
+				variant: "smallText1",
+				children: "Valid"
+			}),
+			/* @__PURE__ */ g(m, {
+				title: "Re-validate",
+				children: /* @__PURE__ */ g(f, {
+					size: "small",
+					onClick: () => {
+						p();
+					},
+					"aria-label": "Re-validate",
+					children: /* @__PURE__ */ g(b, { fontSize: "small" })
+				})
+			})
+		]
+	}) : /* @__PURE__ */ _(u, {
+		sx: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: .5
+		},
+		children: [
+			/* @__PURE__ */ g(y, {
+				color: "error",
+				fontSize: "small"
+			}),
+			/* @__PURE__ */ g(h, {
+				variant: "smallText1",
+				sx: { color: "error.main" },
+				children: o?.reason ?? "Invalid"
+			}),
+			/* @__PURE__ */ g(m, {
+				title: "Re-validate",
+				children: /* @__PURE__ */ g(f, {
+					size: "small",
+					onClick: () => {
+						p();
+					},
+					"aria-label": "Re-validate",
+					children: /* @__PURE__ */ g(b, { fontSize: "small" })
+				})
+			})
+		]
+	}) : /* @__PURE__ */ g(d, {
+		variant: "outlined",
+		size: "small",
+		onClick: () => a(!0),
+		children: "Validate"
+	}) : null;
+}
+function O() {
+	let { data: e, isLoading: t, error: r, hasNextPage: a, fetchNextPage: c, isFetchingNextPage: d } = n();
+	o(() => {
+		a && !d && c();
+	}, [
+		a,
+		d,
+		c
+	]);
+	let f = s(() => e?.pages.flatMap((e) => e.results ?? []) ?? [], [e]), m = w({
+		data: f,
+		columns: E,
+		getCoreRowModel: C(),
+		getRowId: (e) => e.templateId ?? ""
+	});
+	return t || a && f.length === 0 ? /* @__PURE__ */ g(u, { children: /* @__PURE__ */ g(p, {
+		variant: "rectangular",
+		height: 200,
+		"data-testid": "EDucTemplateTable-loading"
+	}) }) : r ? /* @__PURE__ */ _(l, {
+		severity: "error",
+		children: [
+			/* @__PURE__ */ g("strong", { children: "Sorry, we couldn't load the eDUC templates." }),
+			/* @__PURE__ */ g("br", {}),
+			r.reason
+		]
+	}) : f.length === 0 ? /* @__PURE__ */ g(l, {
+		severity: "info",
+		children: "No eDUC templates are registered in DocuSign."
+	}) : /* @__PURE__ */ _(u, { children: [/* @__PURE__ */ _(h, {
+		variant: "body1",
+		sx: {
+			mb: 2,
+			color: "grey.700"
+		},
+		children: [
+			"Templates are managed in DocuSign. Use the ",
+			/* @__PURE__ */ g("strong", { children: "Validate" }),
+			" ",
+			"action to check whether a template meets Synapse's eDUC requirements."
+		]
+	}), /* @__PURE__ */ g(i, {
+		table: m,
+		styledTableContainerProps: { sx: { my: 2 } }
+	})] });
+}
+//#endregion
+export { O as EDucTemplateTable, O as default };
+
+//# sourceMappingURL=EDucTemplateTable.js.map

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

@@ -0,0 +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&apos;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&apos;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,IAAM,IAAe,EAAiC,GAEhD,IAAU;CACd,EAAa,SAAS,QAAQ;EAC5B,SAAQ,MAAS,kBAAC,GAAD;GAAc,GAAI;GAAO,OAAO;EAAS,CAAA;EAC1D,OAAO,EAAE,kBAAe,EAAS,KAAK;EACtC,eAAe;EACf,oBAAoB;CACtB,CAAC;CACD,EAAa,SAAS,eAAe;EACnC,SAAQ,MAAS,kBAAC,GAAD;GAAc,GAAI;GAAO,OAAO;EAAgB,CAAA;EACjE,OAAO,EAAE,kBAAe,EAAS,KAAK;EACtC,eAAe;EACf,oBAAoB;CACtB,CAAC;CACD,EAAa,SAAS,aAAa;EACjC,SAAQ,MAAS,kBAAC,GAAD;GAAc,GAAI;GAAO,OAAO;EAAe,CAAA;EAChE,OAAO,EAAE,kBAAe;GACtB,IAAM,IAAQ,EAAS;GACvB,OAAO,IAAQ,EAAW,EAAM,CAAK,CAAC,IAAI;EAC5C;EACA,eAAe;EACf,oBAAoB;CACtB,CAAC;CACD,EAAa,SAAS,cAAc;EAClC,SAAQ,MAAS,kBAAC,GAAD;GAAc,GAAI;GAAO,OAAO;EAAgB,CAAA;EACjE,OAAO,EAAE,kBAAe;GACtB,IAAM,IAAQ,EAAS;GACvB,OAAO,IAAQ,EAAW,EAAM,CAAK,CAAC,IAAI;EAC5C;EACA,eAAe;EACf,oBAAoB;CACtB,CAAC;CACD,EAAa,QAAQ;EACnB,IAAI;EACJ,SAAQ,MAAS,kBAAC,GAAD;GAAc,GAAI;GAAO,OAAO;EAAsB,CAAA;EACvE,OAAO,EAAE,aAAU,kBAAC,GAAD,EAAgB,YAAY,EAAI,SAAS,WAAa,CAAA;CAC3E,CAAC;AACH;AAEA,SAAS,EAAe,GAA2C;CACjE,IAAM,EAAE,kBAAe,GACjB,CAAC,GAAwB,KAA6B,EAAS,EAAK,GAEpE,EAAE,SAAM,UAAO,eAAY,eAAY,EAC3C,KAAc,IACd,EAAE,SAAS,KAA0B,EAAQ,EAAY,CAC3D;CAkEA,OAhEK,IAEA,IAYD,IAEA,kBAAC,GAAD;EAAK,IAAI;GAAE,SAAS;GAAe,YAAY;EAAS;YACtD,kBAAC,GAAD,EAAgB,MAAM,GAAK,CAAA;CACxB,CAAA,IAIL,IAEA,kBAAC,GAAD;EAAK,IAAI;GAAE,SAAS;GAAe,YAAY;GAAU,KAAK;EAAI;YAAlE;GACE,kBAAC,GAAD;IAAc,OAAO;IAAS,UAAU;GAAU,CAAA;GAClD,kBAAC,GAAD;IAAY,SAAS;IAAc,IAAI,EAAE,OAAO,aAAa;cAC1D,EAAM;GACG,CAAA;GACZ,kBAAC,GAAD;IAAS,OAAO;cACd,kBAAC,GAAD;KACE,MAAM;KACN,eAAe;MACb,EAAQ;KACV;KACA,cAAY;eAEZ,kBAAC,GAAD,EAAQ,UAAU,QAAU,CAAA;IAClB,CAAA;GACL,CAAA;EACN;MAIL,GAAM,UAEN,kBAAC,GAAD;EAAK,IAAI;GAAE,SAAS;GAAe,YAAY;GAAU,KAAK;EAAI;YAAlE;GACE,kBAAC,GAAD;IAAoB,OAAO;IAAW,UAAU;GAAU,CAAA;GAC1D,kBAAC,GAAD;IAAY,SAAS;cAAc;GAAiB,CAAA;GACpD,kBAAC,GAAD;IAAS,OAAO;cACd,kBAAC,GAAD;KACE,MAAM;KACN,eAAe;MACb,EAAQ;KACV;KACA,cAAY;eAEZ,kBAAC,GAAD,EAAQ,UAAU,QAAU,CAAA;IAClB,CAAA;GACL,CAAA;EACN;MAKP,kBAAC,GAAD;EAAK,IAAI;GAAE,SAAS;GAAe,YAAY;GAAU,KAAK;EAAI;YAAlE;GACE,kBAAC,GAAD;IAAc,OAAO;IAAS,UAAU;GAAU,CAAA;GAClD,kBAAC,GAAD;IAAY,SAAS;IAAc,IAAI,EAAE,OAAO,aAAa;cAC1D,GAAM,UAAU;GACP,CAAA;GACZ,kBAAC,GAAD;IAAS,OAAO;cACd,kBAAC,GAAD;KACE,MAAM;KACN,eAAe;MACb,EAAQ;KACV;KACA,cAAY;eAEZ,kBAAC,GAAD,EAAQ,UAAU,QAAU,CAAA;IAClB,CAAA;GACL,CAAA;EACN;MA7EH,kBAAC,GAAD;EACE,SAAS;EACT,MAAM;EACN,eAAe,EAA0B,EAAI;YAC9C;CAEO,CAAA,IAVY;AAmF1B;AAEA,SAAgB,IAAoB;CAClC,IAAM,EACJ,SACA,cACA,UACA,gBACA,kBACA,0BACE,EAAqB;CAEzB,QAAgB;EACd,AAAI,KAAe,CAAC,KAClB,EAAmB;CAEvB,GAAG;EAAC;EAAa;EAAoB;CAAa,CAAC;CAEnD,IAAM,IAAY,QACV,GAAM,MAAM,SAAQ,MAAQ,EAAK,WAAW,CAAC,CAAC,KAAK,CAAC,GAC1D,CAAC,CAAI,CACP,GAEM,IAAQ,EAA4B;EACxC,MAAM;EACN;EACA,iBAAiB,EAAgB;EACjC,WAAU,MAAO,EAAI,cAAc;CACrC,CAAC;CAgCD,OA9BI,KAAc,KAAe,EAAU,WAAW,IAElD,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EACE,SAAS;EACT,QAAQ;EACR,eAAa;CACd,CAAA,EACE,CAAA,IAIL,IAEA,kBAAC,GAAD;EAAO,UAAU;YAAjB;GACE,kBAAC,UAAD,EAAA,UAAQ,8CAAwD,CAAA;GAChE,kBAAC,MAAD,CAAK,CAAA;GACJ,EAAM;EACF;MAIP,EAAU,WAAW,IAErB,kBAAC,GAAD;EAAO,UAAU;YAAQ;CAElB,CAAA,IAKT,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAY,SAAS;EAAS,IAAI;GAAE,IAAI;GAAG,OAAO;EAAW;YAA7D;GAAgE;GACnB,kBAAC,UAAD,EAAA,UAAQ,WAAgB,CAAA;GAAE;GAAI;EAG/D;KACZ,kBAAC,GAAD;EACS;EACP,2BAA2B,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;CAC5C,CAAA,CACE,EAAA,CAAA;AAET"}

package/dist/components/dataaccess/ReviewerDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReviewerDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/dataaccess/ReviewerDashboard.tsx"],"names":[],"mappings":"AAsCA,KAAK,sBAAsB,GAAG;IAC5B,iGAAiG;IACjG,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,wGAAwG;IACxG,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAuG9D;AAUD,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"ReviewerDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/dataaccess/ReviewerDashboard.tsx"],"names":[],"mappings":"AAuCA,KAAK,sBAAsB,GAAG;IAC5B,iGAAiG;IACjG,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,wGAAwG;IACxG,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAgH9D;AAUD,eAAe,iBAAiB,CAAA"}

package/dist/components/dataaccess/ReviewerDashboard.js

@@ -6,66 +6,76 @@ import i from "../OrientationBanner/index.js";
 import { UserHistoryDashboard as a } from "./AccessHistoryDashboard.js";
 import { AccessRequirementDashboard as o } from "./AccessRequirementDashboard.js";
 import { DataAccessSubmissionDashboard as s } from "./AccessSubmissionDashboard.js";
-import c from "./SubmissionPage/SubmissionPage.js";
-import { useMemo as l } from "react";
-import { Typography as u } from "@mui/material";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { NavLink as m, Navigate as h, Outlet as g, RouterProvider as _, createBrowserRouter as v, createMemoryRouter as y, useParams as b } from "react-router";
-import { RouterProvider as x } from "react-router/dom";
+import { EDucTemplateTable as c } from "./EDucTemplateTable.js";
+import l from "./SubmissionPage/SubmissionPage.js";
+import { useMemo as u } from "react";
+import { Typography as d } from "@mui/material";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { NavLink as h, Navigate as g, Outlet as _, RouterProvider as v, createBrowserRouter as y, createMemoryRouter as b, useParams as x } from "react-router";
+import { RouterProvider as S } from "react-router/dom";
 //#region src/components/dataaccess/ReviewerDashboard.tsx
-function S(e) {
+function C(e) {
 	let { href: t, children: n, icon: i } = e;
-	return /* @__PURE__ */ p(m, {
+	return /* @__PURE__ */ m(h, {
 		className: "Tab",
 		role: "tab",
 		to: t,
-		children: [/* @__PURE__ */ f(r, {
+		children: [/* @__PURE__ */ p(r, {
 			icon: i,
 			sx: { paddingRight: "0.2rem" }
-		}), /* @__PURE__ */ f(u, {
+		}), /* @__PURE__ */ p(d, {
 			variant: "buttonLink",
 			children: n
 		})]
 	});
 }
-function C(r) {
-	let { routerBaseName: c = "/DataAccessManagement:default", useMemoryRouter: u = !1 } = r, { data: m, isLoading: h } = n(), b = m?.isACTMember, C = m?.isACTMember || m?.isARReviewer, T = l(() => [{
+function w(r) {
+	let { routerBaseName: l = "/DataAccessManagement:default", useMemoryRouter: d = !1 } = r, { data: h, isLoading: g } = n(), x = h?.isACTMember, w = h?.isACTMember || h?.isARReviewer, E = u(() => [{
 		path: "/",
-		element: /* @__PURE__ */ p("div", {
+		element: /* @__PURE__ */ m("div", {
 			className: "ReviewerDashboard",
-			children: [/* @__PURE__ */ p("div", {
+			children: [/* @__PURE__ */ m("div", {
 				className: "Tabs",
 				role: "tablist",
 				children: [
-					b && /* @__PURE__ */ f(S, {
+					x && /* @__PURE__ */ p(C, {
 						href: "/AccessRequirements",
 						icon: "accessClosed",
 						children: "Access Requirements"
 					}),
-					C && /* @__PURE__ */ f(S, {
+					x && /* @__PURE__ */ p(C, {
+						href: "/EDucTemplates",
+						icon: "fileOutlined",
+						children: "eDUC Templates"
+					}),
+					w && /* @__PURE__ */ p(C, {
 						href: "/Submissions",
 						icon: "discussion",
 						children: "Submissions"
 					}),
-					C && /* @__PURE__ */ f(S, {
+					w && /* @__PURE__ */ p(C, {
 						href: "/UserAccessHistory",
 						icon: "history",
 						children: "User Access History"
 					})
 				]
-			}), /* @__PURE__ */ f("div", {
+			}), /* @__PURE__ */ p("div", {
 				className: "TabContentContainer",
-				children: /* @__PURE__ */ f(e, { children: /* @__PURE__ */ f(g, {}) })
+				children: /* @__PURE__ */ p(e, { children: /* @__PURE__ */ p(_, {}) })
 			})]
 		}),
 		children: [
 			{
 				path: "AccessRequirements",
-				element: b ? /* @__PURE__ */ f(o, {}) : null
+				element: x ? /* @__PURE__ */ p(o, {}) : null
+			},
+			{
+				path: "EDucTemplates",
+				element: x ? /* @__PURE__ */ p(c, {}) : null
 			},
 			{
 				path: "Submissions",
-				element: C ? /* @__PURE__ */ p(d, { children: [!b && /* @__PURE__ */ f(i, {
+				element: w ? /* @__PURE__ */ m(f, { children: [!x && /* @__PURE__ */ p(i, {
 					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.",
@@ -73,32 +83,32 @@ function C(r) {
 						margin: "-20px -30px 20px -30px",
 						width: "auto"
 					}
-				}), /* @__PURE__ */ f(s, {})] }) : null
+				}), /* @__PURE__ */ p(s, {})] }) : null
 			},
 			{
 				path: "Submissions/:id",
-				element: C ? /* @__PURE__ */ f(w, {}) : null
+				element: w ? /* @__PURE__ */ p(T, {}) : null
 			},
 			{
 				path: "UserAccessHistory",
-				element: /* @__PURE__ */ f(a, {})
+				element: /* @__PURE__ */ p(a, {})
 			}
 		]
-	}], [b, C]), E = l(() => u ? y(T, { basename: c }) : v(T, { basename: c }), [
-		u,
-		T,
-		c
+	}], [x, w]), D = u(() => d ? b(E, { basename: l }) : y(E, { basename: l }), [
+		d,
+		E,
+		l
 	]);
-	return h ? /* @__PURE__ */ f(t, { size: 50 }) : f(u ? _ : x, { router: E });
+	return g ? /* @__PURE__ */ p(t, { size: 50 }) : p(d ? v : S, { router: D });
 }
-function w() {
-	let { id: e } = b();
-	return e ? /* @__PURE__ */ f(c, {
+function T() {
+	let { id: e } = x();
+	return e ? /* @__PURE__ */ p(l, {
 		submissionId: e,
 		isReviewer: !0
-	}) : /* @__PURE__ */ f(h, { to: "Submissions/" });
+	}) : /* @__PURE__ */ p(g, { to: "Submissions/" });
 }
 //#endregion
-export { C as ReviewerDashboard, C as default };
+export { w as ReviewerDashboard, w as default };
 
 //# sourceMappingURL=ReviewerDashboard.js.map