synapse-react-client 4.0.45 → 4.0.47

package/dist/components/Aridhia/fairFormToRjsf.js.map

@@ -1 +1 @@
-{"version":3,"file":"fairFormToRjsf.js","names":[],"sources":["../../../src/components/Aridhia/fairFormToRjsf.ts"],"sourcesContent":["import { RJSFSchema, UiSchema } from '@rjsf/utils'\nimport dayjs from 'dayjs'\nimport { FairField, FairFormPayload } from '@/aridhia-queries/FairFormPayload'\n\nexport type { FairField, FairFormPayload }\n\nexport type FairFormSection = {\n  key: string\n  label?: string\n  fields: FairField[]\n}\n\nexport type FairRjsfSection = {\n  schema: RJSFSchema\n  uiSchema: UiSchema\n  /** Fields whose `type` cannot be rendered; the wizard blocks submit and names them. */\n  unsupported: FairField[]\n}\n\nconst RENDERABLE_TYPES = new Set([\n  'string',\n  'text',\n  'markdown',\n  'boolean',\n  'date',\n  'list',\n  'phone',\n  'label',\n])\n\n/**\n * Accepts both FAIR form-definition payload shapes seen in practice and normalizes them to\n * ordered sections:\n * - `{ sections: { about: { label, fields: [...] }, ... } }` — the shape returned by\n *   `GET /workspaces-forms/{code}` (via `WorkspaceForm.sections`).\n * - `{ fields: { about: [...], project: [...] } }` — the shape declared for\n *   `GET /workflows/{code}` (via `WorkflowNoControlsRequests.fields`).\n */\nexport function parseFairFormSections(\n  payload: FairFormPayload | null | undefined,\n): FairFormSection[] {\n  if (!payload || typeof payload !== 'object') {\n    return []\n  }\n\n  const { sections } = payload\n  if (sections && typeof sections === 'object') {\n    return Object.entries(sections).map(([key, section]) => {\n      const { label, fields } = section ?? {}\n      return { key, label, fields: fields ?? [] }\n    })\n  }\n\n  const fieldsBySection = payload.fields\n  if (fieldsBySection && typeof fieldsBySection === 'object') {\n    return Object.entries(fieldsBySection).map(([key, fields]) => ({\n      key,\n      fields: fields ?? [],\n    }))\n  }\n\n  return []\n}\n\n/** FAIR sends `minimum`/`maximum` as strings; `undefined` in, `undefined` out. */\nfunction num(value: string | undefined): number | undefined {\n  return value == null ? undefined : Number(value)\n}\n\n/** Translates one FAIR form section into an RJSF schema/uiSchema pair. */\nexport function fairSectionToRjsf(section: FairFormSection): FairRjsfSection {\n  const properties: Record<string, RJSFSchema> = {}\n  const uiSchema: UiSchema = {\n    'ui:order': section.fields.map(field => field.name!),\n  }\n  const required: string[] = []\n  const unsupported: FairField[] = []\n\n  for (const field of section.fields) {\n    const name = field.name\n    if (!name) {\n      continue\n    }\n    const v = field.validation ?? {}\n\n    if (!field.type || !RENDERABLE_TYPES.has(field.type)) {\n      unsupported.push(field)\n      continue\n    }\n\n    if (v.required === true && field.type !== 'label') {\n      required.push(name)\n    }\n\n    switch (field.type) {\n      case 'string': {\n        properties[name] = {\n          type: 'string',\n          maxLength: num(v.maximum),\n          minLength: num(v.minimum),\n        }\n        uiSchema[name] = { 'ui:placeholder': field.placeholder }\n        break\n      }\n      case 'text':\n      case 'markdown': {\n        properties[name] = {\n          type: 'string',\n          maxLength: num(v.maximum),\n          minLength: num(v.minimum),\n        }\n        uiSchema[name] = {\n          'ui:widget': 'textarea',\n          'ui:placeholder': field.placeholder,\n        }\n        break\n      }\n      case 'boolean': {\n        properties[name] = { type: 'boolean' }\n        break\n      }\n      case 'date': {\n        // The FAIR API expects a `date-time`; the only date field is project_end_date\n        // so a simple date picker (DateWidget) is ideal.\n        properties[name] = { type: 'string', format: 'date-time' }\n        uiSchema[name] = { 'ui:widget': 'DateWidget' }\n        break\n      }\n      case 'list': {\n        properties[name] = {\n          type: 'string',\n          oneOf: (field.options ?? []).map(option => ({\n            const: option.value,\n            title: option.text,\n            ...(option.description ? { description: option.description } : {}),\n          })),\n        }\n        if (field.default_options) {\n          properties[name].default = field.default_options\n        }\n        uiSchema[name] = {\n          'ui:widget': 'SelectWidget',\n          'ui:placeholder': field.placeholder,\n        }\n        break\n      }\n      case 'phone': {\n        properties[name] = { type: 'string', maxLength: num(v.maximum) }\n        uiSchema[name] = { 'ui:options': { inputType: 'tel' } }\n        break\n      }\n      case 'label': {\n        properties[name] = { type: 'null', title: field.label }\n        uiSchema[name] = { 'ui:field': 'fairLabel', 'ui:label': false }\n        break\n      }\n    }\n\n    if (field.type !== 'label' && field.label) {\n      properties[name].title = field.label\n    }\n\n    if (field.defaultValue) {\n      properties[name].default = field.defaultValue\n    }\n  }\n\n  return {\n    schema: {\n      type: 'object',\n      properties,\n      required,\n    },\n    uiSchema,\n    unsupported,\n  }\n}\n\nexport type AnsweredField = { label: string; value: string }\n\nfunction formatAnswerValue(propertySchema: RJSFSchema, value: unknown): string {\n  if (Array.isArray(value)) {\n    return value.map(v => formatAnswerValue(propertySchema, v)).join(', ')\n  }\n  if (typeof value === 'boolean') {\n    return value ? 'Yes' : 'No'\n  }\n  const oneOf = propertySchema.oneOf as\n    | { const: unknown; title?: string }[]\n    | undefined\n  const matchedOption = oneOf?.find(option => option.const === value)\n  if (matchedOption) {\n    return matchedOption.title ?? String(value)\n  }\n  if (propertySchema.format === 'date-time' && typeof value === 'string') {\n    // `DateWidget`-produced values are always UTC midnight for the picked calendar date;\n    // format the date portion directly to avoid a local-timezone parse shifting it onto\n    // the adjacent day.\n    const parsed = dayjs(value.slice(0, 10))\n    return parsed.isValid() ? parsed.format('MMM D, YYYY') : value\n  }\n  return String(value)\n}\n\n/**\n * Renders a `fairSectionToRjsf` schema's answered fields as `{ label, value }` pairs, in the\n * form's own field order, for read-only review UI (the DAR wizard's Review & submit step).\n * Unanswered fields (including `label`-type fields, which never carry a value) are omitted.\n */\nexport function summarizeFormAnswers(\n  schema: RJSFSchema,\n  values: Record<string, unknown>,\n): AnsweredField[] {\n  const propertyNames = Object.keys(schema.properties ?? {})\n  return propertyNames.flatMap(name => {\n    const value = values[name]\n    if (value === undefined || value === null || value === '') {\n      return []\n    }\n    const propertySchema = (schema.properties as Record<string, RJSFSchema>)[\n      name\n    ]\n    const label = propertySchema.title ?? name\n    return [{ label, value: formatAnswerValue(propertySchema, value) }]\n  })\n}\n"],"mappings":"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"}
+{"version":3,"file":"fairFormToRjsf.js","names":[],"sources":["../../../src/components/Aridhia/fairFormToRjsf.ts"],"sourcesContent":["import { RJSFSchema, UiSchema } from '@rjsf/utils'\nimport dayjs from 'dayjs'\nimport { FairField, FairFormPayload } from '@/aridhia-queries/FairFormPayload'\n\nexport type { FairField, FairFormPayload }\n\nexport type FairFormSection = {\n  key: string\n  label?: string\n  fields: FairField[]\n}\n\nexport type FairRjsfSection = {\n  schema: RJSFSchema\n  uiSchema: UiSchema\n  /** Fields whose `type` cannot be rendered; the wizard blocks submit and names them. */\n  unsupported: FairField[]\n}\n\nconst RENDERABLE_TYPES = new Set([\n  'string',\n  'text',\n  'markdown',\n  'boolean',\n  'date',\n  'list',\n  'phone',\n  'label',\n])\n\n/**\n * Accepts both FAIR form-definition payload shapes seen in practice and normalizes them to\n * ordered sections:\n * - `{ sections: { about: { label, fields: [...] }, ... } }` — the shape returned by\n *   `GET /workspaces-forms/{code}` (via `WorkspaceForm.sections`).\n * - `{ fields: { about: [...], project: [...] } }` — the shape declared for\n *   `GET /workflows/{code}` (via `WorkflowNoControlsRequests.fields`).\n */\nexport function parseFairFormSections(\n  payload: FairFormPayload | null | undefined,\n): FairFormSection[] {\n  if (!payload || typeof payload !== 'object') {\n    return []\n  }\n\n  const { sections } = payload\n  if (sections && typeof sections === 'object') {\n    return Object.entries(sections).map(([key, section]) => {\n      const { label, fields } = section ?? {}\n      return { key, label, fields: fields ?? [] }\n    })\n  }\n\n  const fieldsBySection = payload.fields\n  if (fieldsBySection && typeof fieldsBySection === 'object') {\n    return Object.entries(fieldsBySection).map(([key, fields]) => ({\n      key,\n      fields: fields ?? [],\n    }))\n  }\n\n  return []\n}\n\n/** FAIR sends `minimum`/`maximum` as strings; `undefined` in, `undefined` out. */\nfunction num(value: string | undefined): number | undefined {\n  return value == null ? undefined : Number(value)\n}\n\n/** Translates one FAIR form section into an RJSF schema/uiSchema pair. */\nexport function fairSectionToRjsf(section: FairFormSection): FairRjsfSection {\n  const properties: Record<string, RJSFSchema> = {}\n  const uiSchema: UiSchema = {\n    'ui:order': section.fields.map(field => field.name!),\n  }\n  const required: string[] = []\n  const unsupported: FairField[] = []\n\n  for (const field of section.fields) {\n    const name = field.name\n    if (!name) {\n      continue\n    }\n    const v = field.validation ?? {}\n\n    if (!field.type || !RENDERABLE_TYPES.has(field.type)) {\n      unsupported.push(field)\n      continue\n    }\n\n    if (v.required === true && field.type !== 'label') {\n      required.push(name)\n    }\n\n    switch (field.type) {\n      case 'string': {\n        properties[name] = {\n          type: 'string',\n          maxLength: num(v.maximum),\n          minLength: num(v.minimum),\n        }\n        uiSchema[name] = { 'ui:placeholder': field.placeholder }\n        break\n      }\n      case 'text':\n      case 'markdown': {\n        properties[name] = {\n          type: 'string',\n          maxLength: num(v.maximum),\n          minLength: num(v.minimum),\n        }\n        uiSchema[name] = {\n          'ui:widget': 'textarea',\n          'ui:placeholder': field.placeholder,\n        }\n        break\n      }\n      case 'boolean': {\n        properties[name] = { type: 'boolean' }\n        break\n      }\n      case 'date': {\n        // The FAIR API expects a `date-time`; the only date field is project_end_date\n        // so a simple date picker (DateWidget) is ideal.\n        properties[name] = { type: 'string', format: 'date-time' }\n        uiSchema[name] = { 'ui:widget': 'DateWidget' }\n        break\n      }\n      case 'list': {\n        properties[name] = {\n          type: 'string',\n          oneOf: (field.options ?? []).map(option => ({\n            const: option.value,\n            title: option.text,\n            ...(option.description ? { description: option.description } : {}),\n          })),\n        }\n        if (field.default_options) {\n          properties[name].default = field.default_options\n        }\n        uiSchema[name] = {\n          'ui:widget': 'SelectWidget',\n          'ui:placeholder': field.placeholder,\n        }\n        break\n      }\n      case 'phone': {\n        properties[name] = { type: 'string', maxLength: num(v.maximum) }\n        uiSchema[name] = { 'ui:widget': 'PhoneWidget' }\n        break\n      }\n      case 'label': {\n        properties[name] = { type: 'null', title: field.label }\n        uiSchema[name] = { 'ui:field': 'fairLabel', 'ui:label': false }\n        break\n      }\n    }\n\n    if (field.type !== 'label' && field.label) {\n      properties[name].title = field.label\n    }\n\n    if (field.defaultValue) {\n      properties[name].default = field.defaultValue\n    }\n  }\n\n  return {\n    schema: {\n      type: 'object',\n      properties,\n      required,\n    },\n    uiSchema,\n    unsupported,\n  }\n}\n\nexport type AnsweredField = { label: string; value: string }\n\nfunction formatAnswerValue(propertySchema: RJSFSchema, value: unknown): string {\n  if (Array.isArray(value)) {\n    return value.map(v => formatAnswerValue(propertySchema, v)).join(', ')\n  }\n  if (typeof value === 'boolean') {\n    return value ? 'Yes' : 'No'\n  }\n  const oneOf = propertySchema.oneOf as\n    | { const: unknown; title?: string }[]\n    | undefined\n  const matchedOption = oneOf?.find(option => option.const === value)\n  if (matchedOption) {\n    return matchedOption.title ?? String(value)\n  }\n  if (propertySchema.format === 'date-time' && typeof value === 'string') {\n    // `DateWidget`-produced values are always UTC midnight for the picked calendar date;\n    // format the date portion directly to avoid a local-timezone parse shifting it onto\n    // the adjacent day.\n    const parsed = dayjs(value.slice(0, 10))\n    return parsed.isValid() ? parsed.format('MMM D, YYYY') : value\n  }\n  return String(value)\n}\n\n/**\n * Renders a `fairSectionToRjsf` schema's answered fields as `{ label, value }` pairs, in the\n * form's own field order, for read-only review UI (the DAR wizard's Review & submit step).\n * Unanswered fields (including `label`-type fields, which never carry a value) are omitted.\n */\nexport function summarizeFormAnswers(\n  schema: RJSFSchema,\n  values: Record<string, unknown>,\n): AnsweredField[] {\n  const propertyNames = Object.keys(schema.properties ?? {})\n  return propertyNames.flatMap(name => {\n    const value = values[name]\n    if (value === undefined || value === null || value === '') {\n      return []\n    }\n    const propertySchema = (schema.properties as Record<string, RJSFSchema>)[\n      name\n    ]\n    const label = propertySchema.title ?? name\n    return [{ label, value: formatAnswerValue(propertySchema, value) }]\n  })\n}\n"],"mappings":"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"}

package/dist/components/Authentication/LastLoginInfo.js

@@ -3,7 +3,7 @@ import { formatDate as a } from "../../utils/functions/DateFormatter.js";
 import { getLoginMethodFriendlyName as o } from "./LoginMethod.js";
 import { Box as s, Link as c, Tooltip as l, Typography as u } from "@mui/material";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { InfoTwoTone as m } from "@mui/icons-material";
+import m from "@mui/icons-material/InfoTwoTone";
 import h from "dayjs";
 import { useLocalStorageValue as g } from "@react-hookz/web";
 //#region src/components/Authentication/LastLoginInfo.tsx
@@ -36,10 +36,10 @@ function y() {
 	].forEach((e) => localStorage.removeItem(e));
 }
 function b(e) {
-	return e.match(/^[aeiou]/i) ? "an" : "a";
+	return /^[aeiou]/i.exec(e) ? "an" : "a";
 }
 function x(e) {
-	return e.match(" Portal$") ? "the " : "";
+	return / Portal$/.exec(e) ? "the " : "";
 }
 function S(e) {
 	let { currentSourceAppName: t, lastLoginMethod: n, lastLoginSourceAppName: r, lastLoginSourceAppURL: i, lastLoginDate: g, display: _ } = e;

package/dist/components/Authentication/LastLoginInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"LastLoginInfo.js","names":[],"sources":["../../../src/components/Authentication/LastLoginInfo.tsx"],"sourcesContent":["import { formatDate } from '@/utils/functions/DateFormatter'\nimport {\n  CURRENT_SOURCEAPP_NAME_LOCALSTORAGE_KEY,\n  LAST_LOGIN_DATE_LOCALSTORAGE_KEY,\n  LAST_LOGIN_METHOD_LOCALSTORAGE_KEY,\n  LAST_LOGIN_SOURCEAPP_NAME_LOCALSTORAGE_KEY,\n  LAST_LOGIN_SOURCEAPP_URL_LOCALSTORAGE_KEY,\n} from '@/utils/SynapseConstants'\nimport { InfoTwoTone } from '@mui/icons-material'\nimport { Box, Link, Tooltip, Typography } from '@mui/material'\nimport { useLocalStorageValue } from '@react-hookz/web'\nimport dayjs from 'dayjs'\nimport { getLoginMethodFriendlyName, LoginMethod } from './LoginMethod'\n\nexport type LastLoginInfoProps = {\n  currentSourceAppName: string | undefined\n  lastLoginMethod: LoginMethod | undefined\n  lastLoginSourceAppName: string | undefined\n  lastLoginSourceAppURL: string | undefined\n  lastLoginDate: string | undefined\n  display: 'sentence' | 'box'\n}\n\nexport function useLastLoginInfoState() {\n  return {\n    currentSourceAppNameState: useLocalStorageValue<string>(\n      CURRENT_SOURCEAPP_NAME_LOCALSTORAGE_KEY,\n    ),\n    lastLoginMethodState: useLocalStorageValue<LoginMethod>(\n      LAST_LOGIN_METHOD_LOCALSTORAGE_KEY,\n    ),\n    lastLoginSourceAppNameState: useLocalStorageValue<string>(\n      LAST_LOGIN_SOURCEAPP_NAME_LOCALSTORAGE_KEY,\n    ),\n    lastLoginSourceAppURLState: useLocalStorageValue<string>(\n      LAST_LOGIN_SOURCEAPP_URL_LOCALSTORAGE_KEY,\n    ),\n    lastLoginDateState: useLocalStorageValue<string>(\n      LAST_LOGIN_DATE_LOCALSTORAGE_KEY,\n    ),\n  }\n}\n\nexport function useLastLoginInfo() {\n  const states = useLastLoginInfoState()\n  return {\n    currentSourceAppName: states.currentSourceAppNameState.value,\n    lastLoginMethod: states.lastLoginMethodState.value,\n    lastLoginSourceAppName: states.lastLoginSourceAppNameState.value,\n    lastLoginSourceAppURL: states.lastLoginSourceAppURLState.value,\n    lastLoginDate: states.lastLoginDateState.value,\n  }\n}\n\nexport function clearLastLoginInfo() {\n  const keys = [\n    CURRENT_SOURCEAPP_NAME_LOCALSTORAGE_KEY,\n    LAST_LOGIN_METHOD_LOCALSTORAGE_KEY,\n    LAST_LOGIN_SOURCEAPP_NAME_LOCALSTORAGE_KEY,\n    LAST_LOGIN_SOURCEAPP_URL_LOCALSTORAGE_KEY,\n    LAST_LOGIN_DATE_LOCALSTORAGE_KEY,\n  ]\n  keys.forEach(key => localStorage.removeItem(key))\n}\n\nfunction getSourceAppIndefiniteArticle(val: string) {\n  return val.match(/^[aeiou]/i) ? 'an' : 'a'\n}\n\nfunction getSourceAppDefiniteArticle(val: string) {\n  return val.match(' Portal$') ? 'the ' : ''\n}\n\nexport default function LastLoginInfo(props: LastLoginInfoProps) {\n  const {\n    currentSourceAppName,\n    lastLoginMethod,\n    lastLoginSourceAppName,\n    lastLoginSourceAppURL,\n    lastLoginDate,\n    display,\n  } = props\n\n  const showLastLoginInfo =\n    currentSourceAppName &&\n    lastLoginMethod &&\n    lastLoginSourceAppName &&\n    lastLoginSourceAppURL &&\n    lastLoginDate &&\n    currentSourceAppName !== lastLoginSourceAppName\n\n  if (!showLastLoginInfo) {\n    return null\n  }\n\n  const currentSourceAppIndefiniteArticle =\n    getSourceAppIndefiniteArticle(currentSourceAppName)\n  const currentSourceAppDefiniteArticle =\n    getSourceAppDefiniteArticle(currentSourceAppName)\n  const lastLoginSourceAppDefiniteArticle = getSourceAppDefiniteArticle(\n    lastLoginSourceAppName,\n  )\n\n  const title = `You may already have ${currentSourceAppIndefiniteArticle} ${currentSourceAppName} account`\n  const accountLastUsed = `Account last used on ${formatDate(\n    dayjs(lastLoginDate),\n    'MMMM D, YYYY',\n  )}`\n\n  const tooltipText = (\n    <>\n      <Typography\n        variant=\"smallText2\"\n        sx={{\n          mb: 1,\n        }}\n      >\n        {title}\n      </Typography>\n      <Typography\n        variant=\"smallText1\"\n        color=\"white\"\n        sx={{\n          mb: 1,\n        }}\n      >\n        {`This computer was used to sign in to an account on ${lastLoginSourceAppDefiniteArticle}${lastLoginSourceAppName}. \n          You can use the same account to sign in to ${currentSourceAppDefiniteArticle}${currentSourceAppName}.`}\n      </Typography>\n      <Typography variant=\"smallText1\" color=\"white\">\n        {accountLastUsed}\n      </Typography>\n    </>\n  )\n\n  const boxText = (\n    <>\n      <Typography\n        variant=\"smallText2\"\n        sx={{\n          mb: 1,\n          color: 'grey.900',\n          fontSize: '12px',\n        }}\n      >\n        {title}\n      </Typography>\n      <Typography\n        variant=\"smallText1\"\n        sx={{\n          mb: 1,\n          color: 'grey.900',\n          fontSize: '12px',\n        }}\n      >\n        It looks like you already have an account, last used on{' '}\n        {lastLoginSourceAppDefiniteArticle}\n        <Link href={lastLoginSourceAppURL}>{lastLoginSourceAppName}</Link>.{' '}\n        {`You can use this account to sign in via ${getLoginMethodFriendlyName(\n          lastLoginMethod,\n        )}.`}\n      </Typography>\n      <Typography\n        variant=\"smallText1\"\n        sx={{ color: 'grey.700', fontSize: '10px' }}\n      >\n        {accountLastUsed}\n      </Typography>\n    </>\n  )\n\n  return (\n    <>\n      {display === 'sentence' ? (\n        <Typography\n          variant=\"smallText1\"\n          sx={{ color: 'grey.700', textTransform: 'none' }}\n        >\n          You may be able to use an existing account\n          <Tooltip\n            title={tooltipText}\n            placement={'top'}\n            slotProps={{\n              tooltip: {\n                sx: {\n                  bgcolor: '#63676C',\n                  '& .MuiTooltip-arrow': {\n                    color: '#63676C',\n                  },\n                },\n              },\n            }}\n          >\n            <InfoTwoTone\n              sx={{\n                color: 'grey.700',\n                width: '12px',\n                height: '12px',\n                ml: '4px',\n                verticalAlign: 'middle',\n              }}\n            />\n          </Tooltip>\n        </Typography>\n      ) : (\n        <Box sx={{ backgroundColor: 'grey.100', p: '10px' }}>{boxText}</Box>\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,IAAwB;CACtC,OAAO;EACL,2BAA2B,EACzB,CACF;EACA,sBAAsB,EACpB,CACF;EACA,6BAA6B,EAC3B,CACF;EACA,4BAA4B,EAC1B,CACF;EACA,oBAAoB,EAClB,CACF;CACF;AACF;AAEA,SAAgB,IAAmB;CACjC,IAAM,IAAS,EAAsB;CACrC,OAAO;EACL,sBAAsB,EAAO,0BAA0B;EACvD,iBAAiB,EAAO,qBAAqB;EAC7C,wBAAwB,EAAO,4BAA4B;EAC3D,uBAAuB,EAAO,2BAA2B;EACzD,eAAe,EAAO,mBAAmB;CAC3C;AACF;AAEA,SAAgB,IAAqB;CAQnC;EANE;EACA;EACA;EACA;EACA;CAEF,EAAK,SAAQ,MAAO,aAAa,WAAW,CAAG,CAAC;AAClD;AAEA,SAAS,EAA8B,GAAa;CAClD,OAAO,EAAI,MAAM,WAAW,IAAI,OAAO;AACzC;AAEA,SAAS,EAA4B,GAAa;CAChD,OAAO,EAAI,MAAM,UAAU,IAAI,SAAS;AAC1C;AAEA,SAAwB,EAAc,GAA2B;CAC/D,IAAM,EACJ,yBACA,oBACA,2BACA,0BACA,kBACA,eACE;CAUJ,IAAI,EAPF,KACA,KACA,KACA,KACA,KACA,MAAyB,IAGzB,OAAO;CAGT,IAAM,IACJ,EAA8B,CAAoB,GAC9C,IACJ,EAA4B,CAAoB,GAC5C,IAAoC,EACxC,CACF,GAEM,IAAQ,wBAAwB,EAAkC,GAAG,EAAqB,WAC1F,IAAkB,wBAAwB,EAC9C,EAAM,CAAa,GACnB,cACF,KAEM,IACJ,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GACE,SAAQ;GACR,IAAI,EACF,IAAI,EACN;aAEC;EACS,CAAA;EACZ,kBAAC,GAAD;GACE,SAAQ;GACR,OAAM;GACN,IAAI,EACF,IAAI,EACN;aAEC,sDAAsD,IAAoC,EAAuB;uDACnE,IAAkC,EAAqB;EAC5F,CAAA;EACZ,kBAAC,GAAD;GAAY,SAAQ;GAAa,OAAM;aACpC;EACS,CAAA;CACZ,EAAA,CAAA,GAGE,IACJ,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,OAAO;IACP,UAAU;GACZ;aAEC;EACS,CAAA;EACZ,kBAAC,GAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,OAAO;IACP,UAAU;GACZ;aANF;IAOC;IACyD;IACvD;IACD,kBAAC,GAAD;KAAM,MAAM;eAAwB;IAA6B,CAAA;IAAC;IAAE;IACnE,2CAA2C,EAC1C,CACF,EAAE;GACQ;;EACZ,kBAAC,GAAD;GACE,SAAQ;GACR,IAAI;IAAE,OAAO;IAAY,UAAU;GAAO;aAEzC;EACS,CAAA;CACZ,EAAA,CAAA;CAGJ,OACE,kBAAA,GAAA,EAAA,UACG,MAAY,aACX,kBAAC,GAAD;EACE,SAAQ;EACR,IAAI;GAAE,OAAO;GAAY,eAAe;EAAO;YAFjD,CAGC,8CAEC,kBAAC,GAAD;GACE,OAAO;GACP,WAAW;GACX,WAAW,EACT,SAAS,EACP,IAAI;IACF,SAAS;IACT,uBAAuB,EACrB,OAAO,UACT;GACF,EACF,EACF;aAEA,kBAAC,GAAD,EACE,IAAI;IACF,OAAO;IACP,OAAO;IACP,QAAQ;IACR,IAAI;IACJ,eAAe;GACjB,EACD,CAAA;EACM,CAAA,CACC;MAEZ,kBAAC,GAAD;EAAK,IAAI;GAAE,iBAAiB;GAAY,GAAG;EAAO;YAAI;CAAa,CAAA,EAErE,CAAA;AAEN"}
+{"version":3,"file":"LastLoginInfo.js","names":[],"sources":["../../../src/components/Authentication/LastLoginInfo.tsx"],"sourcesContent":["import { formatDate } from '@/utils/functions/DateFormatter'\nimport {\n  CURRENT_SOURCEAPP_NAME_LOCALSTORAGE_KEY,\n  LAST_LOGIN_DATE_LOCALSTORAGE_KEY,\n  LAST_LOGIN_METHOD_LOCALSTORAGE_KEY,\n  LAST_LOGIN_SOURCEAPP_NAME_LOCALSTORAGE_KEY,\n  LAST_LOGIN_SOURCEAPP_URL_LOCALSTORAGE_KEY,\n} from '@/utils/SynapseConstants'\nimport InfoTwoTone from '@mui/icons-material/InfoTwoTone'\nimport { Box, Link, Tooltip, Typography } from '@mui/material'\nimport { useLocalStorageValue } from '@react-hookz/web'\nimport dayjs from 'dayjs'\nimport { getLoginMethodFriendlyName, LoginMethod } from './LoginMethod'\n\nexport type LastLoginInfoProps = {\n  currentSourceAppName: string | undefined\n  lastLoginMethod: LoginMethod | undefined\n  lastLoginSourceAppName: string | undefined\n  lastLoginSourceAppURL: string | undefined\n  lastLoginDate: string | undefined\n  display: 'sentence' | 'box'\n}\n\nexport function useLastLoginInfoState() {\n  return {\n    currentSourceAppNameState: useLocalStorageValue<string>(\n      CURRENT_SOURCEAPP_NAME_LOCALSTORAGE_KEY,\n    ),\n    lastLoginMethodState: useLocalStorageValue<LoginMethod>(\n      LAST_LOGIN_METHOD_LOCALSTORAGE_KEY,\n    ),\n    lastLoginSourceAppNameState: useLocalStorageValue<string>(\n      LAST_LOGIN_SOURCEAPP_NAME_LOCALSTORAGE_KEY,\n    ),\n    lastLoginSourceAppURLState: useLocalStorageValue<string>(\n      LAST_LOGIN_SOURCEAPP_URL_LOCALSTORAGE_KEY,\n    ),\n    lastLoginDateState: useLocalStorageValue<string>(\n      LAST_LOGIN_DATE_LOCALSTORAGE_KEY,\n    ),\n  }\n}\n\nexport function useLastLoginInfo() {\n  const states = useLastLoginInfoState()\n  return {\n    currentSourceAppName: states.currentSourceAppNameState.value,\n    lastLoginMethod: states.lastLoginMethodState.value,\n    lastLoginSourceAppName: states.lastLoginSourceAppNameState.value,\n    lastLoginSourceAppURL: states.lastLoginSourceAppURLState.value,\n    lastLoginDate: states.lastLoginDateState.value,\n  }\n}\n\nexport function clearLastLoginInfo() {\n  const keys = [\n    CURRENT_SOURCEAPP_NAME_LOCALSTORAGE_KEY,\n    LAST_LOGIN_METHOD_LOCALSTORAGE_KEY,\n    LAST_LOGIN_SOURCEAPP_NAME_LOCALSTORAGE_KEY,\n    LAST_LOGIN_SOURCEAPP_URL_LOCALSTORAGE_KEY,\n    LAST_LOGIN_DATE_LOCALSTORAGE_KEY,\n  ]\n  keys.forEach(key => localStorage.removeItem(key))\n}\n\nfunction getSourceAppIndefiniteArticle(val: string) {\n  return /^[aeiou]/i.exec(val) ? 'an' : 'a'\n}\n\nfunction getSourceAppDefiniteArticle(val: string) {\n  return / Portal$/.exec(val) ? 'the ' : ''\n}\n\nexport default function LastLoginInfo(props: LastLoginInfoProps) {\n  const {\n    currentSourceAppName,\n    lastLoginMethod,\n    lastLoginSourceAppName,\n    lastLoginSourceAppURL,\n    lastLoginDate,\n    display,\n  } = props\n\n  const showLastLoginInfo =\n    currentSourceAppName &&\n    lastLoginMethod &&\n    lastLoginSourceAppName &&\n    lastLoginSourceAppURL &&\n    lastLoginDate &&\n    currentSourceAppName !== lastLoginSourceAppName\n\n  if (!showLastLoginInfo) {\n    return null\n  }\n\n  const currentSourceAppIndefiniteArticle =\n    getSourceAppIndefiniteArticle(currentSourceAppName)\n  const currentSourceAppDefiniteArticle =\n    getSourceAppDefiniteArticle(currentSourceAppName)\n  const lastLoginSourceAppDefiniteArticle = getSourceAppDefiniteArticle(\n    lastLoginSourceAppName,\n  )\n\n  const title = `You may already have ${currentSourceAppIndefiniteArticle} ${currentSourceAppName} account`\n  const accountLastUsed = `Account last used on ${formatDate(\n    dayjs(lastLoginDate),\n    'MMMM D, YYYY',\n  )}`\n\n  const tooltipText = (\n    <>\n      <Typography\n        variant=\"smallText2\"\n        sx={{\n          mb: 1,\n        }}\n      >\n        {title}\n      </Typography>\n      <Typography\n        variant=\"smallText1\"\n        color=\"white\"\n        sx={{\n          mb: 1,\n        }}\n      >\n        {`This computer was used to sign in to an account on ${lastLoginSourceAppDefiniteArticle}${lastLoginSourceAppName}. \n          You can use the same account to sign in to ${currentSourceAppDefiniteArticle}${currentSourceAppName}.`}\n      </Typography>\n      <Typography variant=\"smallText1\" color=\"white\">\n        {accountLastUsed}\n      </Typography>\n    </>\n  )\n\n  const boxText = (\n    <>\n      <Typography\n        variant=\"smallText2\"\n        sx={{\n          mb: 1,\n          color: 'grey.900',\n          fontSize: '12px',\n        }}\n      >\n        {title}\n      </Typography>\n      <Typography\n        variant=\"smallText1\"\n        sx={{\n          mb: 1,\n          color: 'grey.900',\n          fontSize: '12px',\n        }}\n      >\n        It looks like you already have an account, last used on{' '}\n        {lastLoginSourceAppDefiniteArticle}\n        <Link href={lastLoginSourceAppURL}>{lastLoginSourceAppName}</Link>.{' '}\n        {`You can use this account to sign in via ${getLoginMethodFriendlyName(\n          lastLoginMethod,\n        )}.`}\n      </Typography>\n      <Typography\n        variant=\"smallText1\"\n        sx={{ color: 'grey.700', fontSize: '10px' }}\n      >\n        {accountLastUsed}\n      </Typography>\n    </>\n  )\n\n  return (\n    <>\n      {display === 'sentence' ? (\n        <Typography\n          variant=\"smallText1\"\n          sx={{ color: 'grey.700', textTransform: 'none' }}\n        >\n          You may be able to use an existing account\n          <Tooltip\n            title={tooltipText}\n            placement={'top'}\n            slotProps={{\n              tooltip: {\n                sx: {\n                  bgcolor: '#63676C',\n                  '& .MuiTooltip-arrow': {\n                    color: '#63676C',\n                  },\n                },\n              },\n            }}\n          >\n            <InfoTwoTone\n              sx={{\n                color: 'grey.700',\n                width: '12px',\n                height: '12px',\n                ml: '4px',\n                verticalAlign: 'middle',\n              }}\n            />\n          </Tooltip>\n        </Typography>\n      ) : (\n        <Box sx={{ backgroundColor: 'grey.100', p: '10px' }}>{boxText}</Box>\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,IAAwB;CACtC,OAAO;EACL,2BAA2B,EACzB,CACF;EACA,sBAAsB,EACpB,CACF;EACA,6BAA6B,EAC3B,CACF;EACA,4BAA4B,EAC1B,CACF;EACA,oBAAoB,EAClB,CACF;CACF;AACF;AAEA,SAAgB,IAAmB;CACjC,IAAM,IAAS,EAAsB;CACrC,OAAO;EACL,sBAAsB,EAAO,0BAA0B;EACvD,iBAAiB,EAAO,qBAAqB;EAC7C,wBAAwB,EAAO,4BAA4B;EAC3D,uBAAuB,EAAO,2BAA2B;EACzD,eAAe,EAAO,mBAAmB;CAC3C;AACF;AAEA,SAAgB,IAAqB;CAQnC;EANE;EACA;EACA;EACA;EACA;CAEF,EAAK,SAAQ,MAAO,aAAa,WAAW,CAAG,CAAC;AAClD;AAEA,SAAS,EAA8B,GAAa;CAClD,OAAO,YAAY,KAAK,CAAG,IAAI,OAAO;AACxC;AAEA,SAAS,EAA4B,GAAa;CAChD,OAAO,WAAW,KAAK,CAAG,IAAI,SAAS;AACzC;AAEA,SAAwB,EAAc,GAA2B;CAC/D,IAAM,EACJ,yBACA,oBACA,2BACA,0BACA,kBACA,eACE;CAUJ,IAAI,EAPF,KACA,KACA,KACA,KACA,KACA,MAAyB,IAGzB,OAAO;CAGT,IAAM,IACJ,EAA8B,CAAoB,GAC9C,IACJ,EAA4B,CAAoB,GAC5C,IAAoC,EACxC,CACF,GAEM,IAAQ,wBAAwB,EAAkC,GAAG,EAAqB,WAC1F,IAAkB,wBAAwB,EAC9C,EAAM,CAAa,GACnB,cACF,KAEM,IACJ,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GACE,SAAQ;GACR,IAAI,EACF,IAAI,EACN;aAEC;EACS,CAAA;EACZ,kBAAC,GAAD;GACE,SAAQ;GACR,OAAM;GACN,IAAI,EACF,IAAI,EACN;aAEC,sDAAsD,IAAoC,EAAuB;uDACnE,IAAkC,EAAqB;EAC5F,CAAA;EACZ,kBAAC,GAAD;GAAY,SAAQ;GAAa,OAAM;aACpC;EACS,CAAA;CACZ,EAAA,CAAA,GAGE,IACJ,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,OAAO;IACP,UAAU;GACZ;aAEC;EACS,CAAA;EACZ,kBAAC,GAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,OAAO;IACP,UAAU;GACZ;aANF;IAOC;IACyD;IACvD;IACD,kBAAC,GAAD;KAAM,MAAM;eAAwB;IAA6B,CAAA;IAAC;IAAE;IACnE,2CAA2C,EAC1C,CACF,EAAE;GACQ;;EACZ,kBAAC,GAAD;GACE,SAAQ;GACR,IAAI;IAAE,OAAO;IAAY,UAAU;GAAO;aAEzC;EACS,CAAA;CACZ,EAAA,CAAA;CAGJ,OACE,kBAAA,GAAA,EAAA,UACG,MAAY,aACX,kBAAC,GAAD;EACE,SAAQ;EACR,IAAI;GAAE,OAAO;GAAY,eAAe;EAAO;YAFjD,CAGC,8CAEC,kBAAC,GAAD;GACE,OAAO;GACP,WAAW;GACX,WAAW,EACT,SAAS,EACP,IAAI;IACF,SAAS;IACT,uBAAuB,EACrB,OAAO,UACT;GACF,EACF,EACF;aAEA,kBAAC,GAAD,EACE,IAAI;IACF,OAAO;IACP,OAAO;IACP,QAAQ;IACR,IAAI;IACJ,eAAe;GACjB,EACD,CAAA;EACM,CAAA,CACC;MAEZ,kBAAC,GAAD;EAAK,IAAI;GAAE,iBAAiB;GAAY,GAAG;EAAO;YAAI;CAAa,CAAA,EAErE,CAAA;AAEN"}

package/dist/components/Authentication/RecoveryCodeForm.js

@@ -10,7 +10,7 @@ function s(s) {
 		placeholder: "Enter backup code",
 		value: u,
 		onChange: (e) => {
-			d(e.target.value.toLowerCase().replace(/[^a-z0-9-]/gi, ""));
+			d(e.target.value.toLowerCase().replaceAll(/[^a-z0-9-]/gi, ""));
 		}
 	}), /* @__PURE__ */ i(r, {
 		fullWidth: !0,

package/dist/components/Authentication/RecoveryCodeForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecoveryCodeForm.js","names":[],"sources":["../../../src/components/Authentication/RecoveryCodeForm.tsx"],"sourcesContent":["import { UseLoginReturn } from '@/utils/hooks'\nimport { Box, Button } from '@mui/material'\nimport { useState } from 'react'\nimport TextField from '../TextField/TextField'\n\n// 16 characters separated into chunks of 4 by 3 hyphens\nconst RECOVERY_CODE_LENGTH = 19\n\ntype RecoveryCodeFormProps = {\n  onSubmit: (value: string) => void\n  loginIsPending: UseLoginReturn['loginIsPending']\n}\n\nexport default function RecoveryCodeForm(props: RecoveryCodeFormProps) {\n  const { onSubmit, loginIsPending } = props\n  const [recoveryCode, setRecoveryCode] = useState('')\n  return (\n    <Box>\n      <TextField\n        placeholder=\"Enter backup code\"\n        value={recoveryCode}\n        onChange={e => {\n          // coerce the input to lowercase and remove any nonalphanumeric or hyphen characters\n          const valueWithAllowedChars = e.target.value\n            .toLowerCase()\n            .replace(/[^a-z0-9-]/gi, '')\n          setRecoveryCode(valueWithAllowedChars)\n        }}\n      />\n\n      <Button\n        fullWidth\n        type=\"submit\"\n        color=\"primary\"\n        variant=\"contained\"\n        sx={{\n          height: '50px',\n          mt: 4,\n          mb: 2,\n        }}\n        disabled={\n          recoveryCode.length !== RECOVERY_CODE_LENGTH || loginIsPending\n        }\n        onClick={e => {\n          e.preventDefault()\n          onSubmit(recoveryCode)\n        }}\n      >\n        {loginIsPending ? 'Verifying...' : 'Submit'}\n      </Button>\n    </Box>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAM,IAAuB;AAO7B,SAAwB,EAAiB,GAA8B;CACrE,IAAM,EAAE,aAAU,sBAAmB,GAC/B,CAAC,GAAc,KAAmB,EAAS,EAAE;CACnD,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,aAAY;EACZ,OAAO;EACP,WAAU,MAAK;GAKb,EAH8B,EAAE,OAAO,MACpC,YAAY,EACZ,QAAQ,gBAAgB,EACX,CAAqB;EACvC;CACD,CAAA,GAED,kBAAC,GAAD;EACE,WAAA;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,IAAI;GACF,QAAQ;GACR,IAAI;GACJ,IAAI;EACN;EACA,UACE,EAAa,WAAW,KAAwB;EAElD,UAAS,MAAK;GAEZ,AADA,EAAE,eAAe,GACjB,EAAS,CAAY;EACvB;YAEC,IAAiB,iBAAiB;CAC7B,CAAA,CACL,EAAA,CAAA;AAET"}
+{"version":3,"file":"RecoveryCodeForm.js","names":[],"sources":["../../../src/components/Authentication/RecoveryCodeForm.tsx"],"sourcesContent":["import { UseLoginReturn } from '@/utils/hooks'\nimport { Box, Button } from '@mui/material'\nimport { useState } from 'react'\nimport TextField from '../TextField/TextField'\n\n// 16 characters separated into chunks of 4 by 3 hyphens\nconst RECOVERY_CODE_LENGTH = 19\n\ntype RecoveryCodeFormProps = {\n  onSubmit: (value: string) => void\n  loginIsPending: UseLoginReturn['loginIsPending']\n}\n\nexport default function RecoveryCodeForm(props: RecoveryCodeFormProps) {\n  const { onSubmit, loginIsPending } = props\n  const [recoveryCode, setRecoveryCode] = useState('')\n  return (\n    <Box>\n      <TextField\n        placeholder=\"Enter backup code\"\n        value={recoveryCode}\n        onChange={e => {\n          // coerce the input to lowercase and remove any nonalphanumeric or hyphen characters\n          const valueWithAllowedChars = e.target.value\n            .toLowerCase()\n            .replaceAll(/[^a-z0-9-]/gi, '')\n          setRecoveryCode(valueWithAllowedChars)\n        }}\n      />\n\n      <Button\n        fullWidth\n        type=\"submit\"\n        color=\"primary\"\n        variant=\"contained\"\n        sx={{\n          height: '50px',\n          mt: 4,\n          mb: 2,\n        }}\n        disabled={\n          recoveryCode.length !== RECOVERY_CODE_LENGTH || loginIsPending\n        }\n        onClick={e => {\n          e.preventDefault()\n          onSubmit(recoveryCode)\n        }}\n      >\n        {loginIsPending ? 'Verifying...' : 'Submit'}\n      </Button>\n    </Box>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAM,IAAuB;AAO7B,SAAwB,EAAiB,GAA8B;CACrE,IAAM,EAAE,aAAU,sBAAmB,GAC/B,CAAC,GAAc,KAAmB,EAAS,EAAE;CACnD,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,aAAY;EACZ,OAAO;EACP,WAAU,MAAK;GAKb,EAH8B,EAAE,OAAO,MACpC,YAAY,EACZ,WAAW,gBAAgB,EACd,CAAqB;EACvC;CACD,CAAA,GAED,kBAAC,GAAD;EACE,WAAA;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,IAAI;GACF,QAAQ;GACR,IAAI;GACJ,IAAI;EACN;EACA,UACE,EAAa,WAAW,KAAwB;EAElD,UAAS,MAAK;GAEZ,AADA,EAAE,eAAe,GACjB,EAAS,CAAY;EACvB;YAEC,IAAiB,iBAAiB;CAC7B,CAAA,CACL,EAAA,CAAA;AAET"}

package/dist/components/Authentication/RecoveryCodeGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecoveryCodeGrid.js","names":[],"sources":["../../../src/components/Authentication/RecoveryCodeGrid.tsx"],"sourcesContent":["import ConditionalWrapper from '@/components/utils/ConditionalWrapper'\nimport { Box } from '@mui/material'\nimport Skeleton from '@mui/material/Skeleton'\nimport { TwoFactorAuthRecoveryCodes } from '@sage-bionetworks/synapse-types'\n\nconst DEFAULT_RECOVERY_CODE_COUNT = 10\n\n// Placeholder codes used to render skeletons while loading\nconst PLACEHOLDER_RECOVERY_CODE = '1234-5678-9012-3456'\nconst PLACEHOLDER_RECOVERY_CODES = Array(DEFAULT_RECOVERY_CODE_COUNT).fill(\n  PLACEHOLDER_RECOVERY_CODE,\n)\n\ntype RecoveryCodeGridProps = {\n  recoveryCodes?: TwoFactorAuthRecoveryCodes\n}\n\nexport function RecoveryCodeGrid(props: RecoveryCodeGridProps) {\n  const { recoveryCodes } = props\n  return (\n    <Box\n      sx={{\n        display: 'grid',\n        gridTemplateColumns: { xs: 'max-content', md: '47.5% 47.5%' },\n        justifyContent: { xs: 'center', md: 'stretch' },\n        columnGap: '5%',\n        gridTemplateRows: 'repeat(5, 1fr)',\n        fontFamily: 'Menlo, Courier New, Courier, monospace',\n        my: 2,\n      }}\n    >\n      {(recoveryCodes?.codes ?? PLACEHOLDER_RECOVERY_CODES).map(\n        (code, index) => {\n          return (\n            <ConditionalWrapper\n              key={index}\n              condition={!recoveryCodes}\n              wrapper={Skeleton}\n              wrapperProps={{ width: '100%', height: '100%' }}\n            >\n              <Box\n                sx={{\n                  my: 1,\n                  fontSize: '13px',\n                }}\n              >\n                {code}\n              </Box>\n            </ConditionalWrapper>\n          )\n        },\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;;;AASA,IAAM,IAA6B,MAAM,EAA2B,EAAE,KACpE,qBACF;AAMA,SAAgB,EAAiB,GAA8B;CAC7D,IAAM,EAAE,qBAAkB;CAC1B,OACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,qBAAqB;IAAE,IAAI;IAAe,IAAI;GAAc;GAC5D,gBAAgB;IAAE,IAAI;IAAU,IAAI;GAAU;GAC9C,WAAW;GACX,kBAAkB;GAClB,YAAY;GACZ,IAAI;EACN;aAEE,GAAe,SAAS,GAA4B,KACnD,GAAM,MAEH,kBAAC,GAAD;GAEE,WAAW,CAAC;GACZ,SAAS;GACT,cAAc;IAAE,OAAO;IAAQ,QAAQ;GAAO;aAE9C,kBAAC,GAAD;IACE,IAAI;KACF,IAAI;KACJ,UAAU;IACZ;cAEC;GACE,CAAA;EACa,GAbb,CAaa,CAG1B;CACG,CAAA;AAET"}
+{"version":3,"file":"RecoveryCodeGrid.js","names":[],"sources":["../../../src/components/Authentication/RecoveryCodeGrid.tsx"],"sourcesContent":["import ConditionalWrapper from '@/components/utils/ConditionalWrapper'\nimport { Box } from '@mui/material'\nimport Skeleton from '@mui/material/Skeleton'\nimport { TwoFactorAuthRecoveryCodes } from '@sage-bionetworks/synapse-types'\n\nconst DEFAULT_RECOVERY_CODE_COUNT = 10\n\n// Placeholder codes used to render skeletons while loading\nconst PLACEHOLDER_RECOVERY_CODE = '1234-5678-9012-3456'\nconst PLACEHOLDER_RECOVERY_CODES = new Array(DEFAULT_RECOVERY_CODE_COUNT).fill(\n  PLACEHOLDER_RECOVERY_CODE,\n)\n\ntype RecoveryCodeGridProps = {\n  recoveryCodes?: TwoFactorAuthRecoveryCodes\n}\n\nexport function RecoveryCodeGrid(props: RecoveryCodeGridProps) {\n  const { recoveryCodes } = props\n  return (\n    <Box\n      sx={{\n        display: 'grid',\n        gridTemplateColumns: { xs: 'max-content', md: '47.5% 47.5%' },\n        justifyContent: { xs: 'center', md: 'stretch' },\n        columnGap: '5%',\n        gridTemplateRows: 'repeat(5, 1fr)',\n        fontFamily: 'Menlo, Courier New, Courier, monospace',\n        my: 2,\n      }}\n    >\n      {(recoveryCodes?.codes ?? PLACEHOLDER_RECOVERY_CODES).map(\n        (code, index) => {\n          return (\n            <ConditionalWrapper\n              key={index}\n              condition={!recoveryCodes}\n              wrapper={Skeleton}\n              wrapperProps={{ width: '100%', height: '100%' }}\n            >\n              <Box\n                sx={{\n                  my: 1,\n                  fontSize: '13px',\n                }}\n              >\n                {code}\n              </Box>\n            </ConditionalWrapper>\n          )\n        },\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;;;AASA,IAAM,IAAiC,MAAM,EAA2B,EAAE,KACxE,qBACF;AAMA,SAAgB,EAAiB,GAA8B;CAC7D,IAAM,EAAE,qBAAkB;CAC1B,OACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,qBAAqB;IAAE,IAAI;IAAe,IAAI;GAAc;GAC5D,gBAAgB;IAAE,IAAI;IAAU,IAAI;GAAU;GAC9C,WAAW;GACX,kBAAkB;GAClB,YAAY;GACZ,IAAI;EACN;aAEE,GAAe,SAAS,GAA4B,KACnD,GAAM,MAEH,kBAAC,GAAD;GAEE,WAAW,CAAC;GACZ,SAAS;GACT,cAAc;IAAE,OAAO;IAAQ,QAAQ;GAAO;aAE9C,kBAAC,GAAD;IACE,IAAI;KACF,IAAI;KACJ,UAAU;IACZ;cAEC;GACE,CAAA;EACa,GAbb,CAaa,CAG1B;CACG,CAAA;AAET"}

package/dist/components/Authentication/TOTPForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TOTPForm.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/TOTPForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAS9C,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;CACjD,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA6DpD"}
+{"version":3,"file":"TOTPForm.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/TOTPForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAoB9C,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;CACjD,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA6DpD"}

package/dist/components/Authentication/TOTPForm.js

@@ -4,7 +4,7 @@ import { Box as n, Button as r } from "@mui/material";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { MuiOtpInput as o } from "mui-one-time-password-input";
 //#region src/components/Authentication/TOTPForm.tsx
-var s = 6, c = [
+var s = 6, c = new Set([
 	"0",
 	"1",
 	"2",
@@ -15,7 +15,7 @@ var s = 6, c = [
 	"7",
 	"8",
 	"9"
-];
+]);
 function l(l) {
 	let { onSubmit: u, loginIsPending: d } = l, [f, p] = t("");
 	return /* @__PURE__ */ a(n, { children: [/* @__PURE__ */ i(o, {
@@ -25,7 +25,7 @@ function l(l) {
 		value: f,
 		onChange: p,
 		onComplete: u,
-		validateChar: (e) => c.includes(e) || e === "",
+		validateChar: (e) => c.has(e) || e === "",
 		gap: "2px",
 		sx: {
 			mx: "auto",

package/dist/components/Authentication/TOTPForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TOTPForm.js","names":[],"sources":["../../../src/components/Authentication/TOTPForm.tsx"],"sourcesContent":["import { UseLoginReturn } from '@/utils/hooks'\nimport { Box, Button } from '@mui/material'\nimport { MuiOtpInput } from 'mui-one-time-password-input'\nimport { useState } from 'react'\nimport { NUMERIC_CODE_HTML_INPUT_PROPS } from './Constants'\n\nconst TOTP_LENGTH = 6\nconst DIGIT_CHARACTERS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']\n\ntype TOTPFormProps = {\n  onSubmit: (value: string) => void\n  loginIsPending: UseLoginReturn['loginIsPending']\n}\n\nexport default function TOTPForm(props: TOTPFormProps) {\n  const { onSubmit, loginIsPending } = props\n  const [verificationCode, setVerificationCode] = useState('')\n  return (\n    <Box>\n      <MuiOtpInput\n        autoFocus\n        length={TOTP_LENGTH}\n        TextFieldsProps={{\n          slotProps: {\n            htmlInput: NUMERIC_CODE_HTML_INPUT_PROPS,\n          },\n        }}\n        value={verificationCode}\n        onChange={setVerificationCode}\n        onComplete={onSubmit}\n        validateChar={(character: string) => {\n          return DIGIT_CHARACTERS.includes(character) || character === ''\n        }}\n        gap={'2px'}\n        sx={{\n          mx: 'auto',\n          maxWidth: '350px',\n          '.MuiInputBase-root': {\n            paddingLeft: '5px',\n            paddingRight: '5px',\n          },\n          '.MuiFormControl-root:first-of-type > .MuiInputBase-root': {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n          '.MuiFormControl-root:last-of-type > .MuiInputBase-root': {\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n          },\n          '.MuiFormControl-root:not(:first-of-type):not(:last-of-type) > .MuiInputBase-root':\n            {\n              borderRadius: 0,\n            },\n        }}\n      />\n      <Button\n        fullWidth\n        type=\"submit\"\n        color=\"primary\"\n        variant=\"contained\"\n        sx={{\n          height: '50px',\n          mt: 4,\n          mb: 2,\n        }}\n        disabled={verificationCode.length !== TOTP_LENGTH || loginIsPending}\n        onClick={e => {\n          e.preventDefault()\n          onSubmit(verificationCode)\n        }}\n      >\n        {loginIsPending ? 'Verifying...' : 'Submit'}\n      </Button>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,IAAc,GACd,IAAmB;CAAC;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG;AAO1E,SAAwB,EAAS,GAAsB;CACrD,IAAM,EAAE,aAAU,sBAAmB,GAC/B,CAAC,GAAkB,KAAuB,EAAS,EAAE;CAC3D,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,WAAA;EACA,QAAQ;EACR,iBAAiB,EACf,WAAW,EACT,WAAW,EACb,EACF;EACA,OAAO;EACP,UAAU;EACV,YAAY;EACZ,eAAe,MACN,EAAiB,SAAS,CAAS,KAAK,MAAc;EAE/D,KAAK;EACL,IAAI;GACF,IAAI;GACJ,UAAU;GACV,sBAAsB;IACpB,aAAa;IACb,cAAc;GAChB;GACA,2DAA2D;IACzD,sBAAsB;IACtB,yBAAyB;GAC3B;GACA,0DAA0D;IACxD,qBAAqB;IACrB,wBAAwB;GAC1B;GACA,oFACE,EACE,cAAc,EAChB;EACJ;CACD,CAAA,GACD,kBAAC,GAAD;EACE,WAAA;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,IAAI;GACF,QAAQ;GACR,IAAI;GACJ,IAAI;EACN;EACA,UAAU,EAAiB,WAAW,KAAe;EACrD,UAAS,MAAK;GAEZ,AADA,EAAE,eAAe,GACjB,EAAS,CAAgB;EAC3B;YAEC,IAAiB,iBAAiB;CAC7B,CAAA,CACL,EAAA,CAAA;AAET"}
+{"version":3,"file":"TOTPForm.js","names":[],"sources":["../../../src/components/Authentication/TOTPForm.tsx"],"sourcesContent":["import { UseLoginReturn } from '@/utils/hooks'\nimport { Box, Button } from '@mui/material'\nimport { MuiOtpInput } from 'mui-one-time-password-input'\nimport { useState } from 'react'\nimport { NUMERIC_CODE_HTML_INPUT_PROPS } from './Constants'\n\nconst TOTP_LENGTH = 6\nconst DIGIT_CHARACTERS = new Set([\n  '0',\n  '1',\n  '2',\n  '3',\n  '4',\n  '5',\n  '6',\n  '7',\n  '8',\n  '9',\n])\n\ntype TOTPFormProps = {\n  onSubmit: (value: string) => void\n  loginIsPending: UseLoginReturn['loginIsPending']\n}\n\nexport default function TOTPForm(props: TOTPFormProps) {\n  const { onSubmit, loginIsPending } = props\n  const [verificationCode, setVerificationCode] = useState('')\n  return (\n    <Box>\n      <MuiOtpInput\n        autoFocus\n        length={TOTP_LENGTH}\n        TextFieldsProps={{\n          slotProps: {\n            htmlInput: NUMERIC_CODE_HTML_INPUT_PROPS,\n          },\n        }}\n        value={verificationCode}\n        onChange={setVerificationCode}\n        onComplete={onSubmit}\n        validateChar={(character: string) => {\n          return DIGIT_CHARACTERS.has(character) || character === ''\n        }}\n        gap={'2px'}\n        sx={{\n          mx: 'auto',\n          maxWidth: '350px',\n          '.MuiInputBase-root': {\n            paddingLeft: '5px',\n            paddingRight: '5px',\n          },\n          '.MuiFormControl-root:first-of-type > .MuiInputBase-root': {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n          '.MuiFormControl-root:last-of-type > .MuiInputBase-root': {\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n          },\n          '.MuiFormControl-root:not(:first-of-type):not(:last-of-type) > .MuiInputBase-root':\n            {\n              borderRadius: 0,\n            },\n        }}\n      />\n      <Button\n        fullWidth\n        type=\"submit\"\n        color=\"primary\"\n        variant=\"contained\"\n        sx={{\n          height: '50px',\n          mt: 4,\n          mb: 2,\n        }}\n        disabled={verificationCode.length !== TOTP_LENGTH || loginIsPending}\n        onClick={e => {\n          e.preventDefault()\n          onSubmit(verificationCode)\n        }}\n      >\n        {loginIsPending ? 'Verifying...' : 'Submit'}\n      </Button>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,IAAc,GACd,IAAmB,IAAI,IAAI;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAOD,SAAwB,EAAS,GAAsB;CACrD,IAAM,EAAE,aAAU,sBAAmB,GAC/B,CAAC,GAAkB,KAAuB,EAAS,EAAE;CAC3D,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,WAAA;EACA,QAAQ;EACR,iBAAiB,EACf,WAAW,EACT,WAAW,EACb,EACF;EACA,OAAO;EACP,UAAU;EACV,YAAY;EACZ,eAAe,MACN,EAAiB,IAAI,CAAS,KAAK,MAAc;EAE1D,KAAK;EACL,IAAI;GACF,IAAI;GACJ,UAAU;GACV,sBAAsB;IACpB,aAAa;IACb,cAAc;GAChB;GACA,2DAA2D;IACzD,sBAAsB;IACtB,yBAAyB;GAC3B;GACA,0DAA0D;IACxD,qBAAqB;IACrB,wBAAwB;GAC1B;GACA,oFACE,EACE,cAAc,EAChB;EACJ;CACD,CAAA,GACD,kBAAC,GAAD;EACE,WAAA;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,IAAI;GACF,QAAQ;GACR,IAAI;GACJ,IAAI;EACN;EACA,UAAU,EAAiB,WAAW,KAAe;EACrD,UAAS,MAAK;GAEZ,AADA,EAAE,eAAe,GACjB,EAAS,CAAgB;EAC3B;YAEC,IAAiB,iBAAiB;CAC7B,CAAA,CACL,EAAA,CAAA;AAET"}

package/dist/components/Authentication/index.d.ts

@@ -1,15 +1,15 @@
 import type { LastLoginInfoProps } from './LastLoginInfo';
-import { default as LastLoginInfo, useLastLoginInfo, useLastLoginInfoState } from './LastLoginInfo';
+import LastLoginInfo, { useLastLoginInfo, useLastLoginInfoState } from './LastLoginInfo';
 import type { LoginMethod } from './LoginMethod';
-import { default as PasswordField } from './PasswordField';
+import PasswordField from './PasswordField';
 import type { StandaloneLoginFormProps } from './StandaloneLoginForm';
-import { default as StandaloneLoginForm } from './StandaloneLoginForm';
+import StandaloneLoginForm from './StandaloneLoginForm';
 import type { TwoFactorAuthSettingsPanelProps } from './TwoFactorAuthSettingsPanel';
-import { default as TwoFactorAuthSettingsPanel } from './TwoFactorAuthSettingsPanel';
+import TwoFactorAuthSettingsPanel from './TwoFactorAuthSettingsPanel';
 import type { TwoFactorEnrollmentFormProps } from './TwoFactorEnrollmentForm';
-import { default as TwoFactorEnrollmentForm } from './TwoFactorEnrollmentForm';
+import TwoFactorEnrollmentForm from './TwoFactorEnrollmentForm';
 import type { TwoFactorBackupCodesProps } from './TwoFactorBackupCodes';
-import { default as TwoFactorBackupCodes } from './TwoFactorBackupCodes';
+import TwoFactorBackupCodes from './TwoFactorBackupCodes';
 import OneTimePasswordForm, { type OneTimePasswordFormProps, type ONE_TIME_PASSWORD_STEP } from './OneTimePasswordForm';
 export { useLastLoginInfoState, useLastLoginInfo, LastLoginInfo, LastLoginInfoProps, LoginMethod, PasswordField, StandaloneLoginForm, StandaloneLoginFormProps, TwoFactorAuthSettingsPanel, TwoFactorAuthSettingsPanelProps, TwoFactorEnrollmentForm, TwoFactorEnrollmentFormProps, TwoFactorBackupCodes, TwoFactorBackupCodesProps, OneTimePasswordForm, OneTimePasswordFormProps, ONE_TIME_PASSWORD_STEP, };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Authentication/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,gBAAgB,EAChB,qBAAqB,EACtB,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AACtE,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAA;AACnF,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAA;AACpF,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAA;AAC7E,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,mBAAmB,EAAE,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC5B,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EAClB,WAAW,EACX,aAAa,EACb,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,+BAA+B,EAC/B,uBAAuB,EACvB,4BAA4B,EAC5B,oBAAoB,EACpB,yBAAyB,EACzB,mBAAmB,EACnB,wBAAwB,EACxB,sBAAsB,GACvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,aAAa,EAAE,EACpB,gBAAgB,EAChB,qBAAqB,EACtB,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAA;AACrE,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAA;AACnF,OAAO,0BAA0B,MAAM,8BAA8B,CAAA;AACrE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAA;AAC7E,OAAO,uBAAuB,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAA;AACvE,OAAO,oBAAoB,MAAM,wBAAwB,CAAA;AACzD,OAAO,mBAAmB,EAAE,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC5B,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EAClB,WAAW,EACX,aAAa,EACb,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,+BAA+B,EAC/B,uBAAuB,EACvB,4BAA4B,EAC5B,oBAAoB,EACpB,yBAAyB,EACzB,mBAAmB,EACnB,wBAAwB,EACxB,sBAAsB,GACvB,CAAA"}

package/dist/components/CannedRejectionDialog/CannedRejectionDialog.js

@@ -129,7 +129,7 @@ function E(t) {
 		e += "\n";
 		let n = F[t].sectionText;
 		n && (e += n + "\n");
-		for (let n of F[t].reasons) n != null && (e += "\n* " + n.replaceAll("\\n", "\n") + "\n");
+		for (let n of F[t].reasons) n != null && (e += "\n* " + n.replaceAll(String.raw`\n`, "\n") + "\n");
 		return e;
 	}, "") + d;
 	return o(() => {

package/dist/components/CannedRejectionDialog/CannedRejectionDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"CannedRejectionDialog.js","names":[],"sources":["../../../src/components/CannedRejectionDialog/CannedRejectionDialog.tsx"],"sourcesContent":["import { useGetFullTableQueryResults } from '@/synapse-queries'\nimport { BUNDLE_MASK_QUERY_RESULTS } from '@/utils/SynapseConstants'\nimport {\n  Checkbox,\n  Collapse,\n  FormControl,\n  FormControlLabel,\n  Stack,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { SynapseClientError } from '@sage-bionetworks/synapse-client/util/SynapseClientError'\nimport { QueryResultBundle, Row } from '@sage-bionetworks/synapse-types'\nimport { UseQueryResult } from '@tanstack/react-query'\nimport { Set } from 'immutable'\nimport { Dispatch, ReactNode, SetStateAction, useEffect, useState } from 'react'\nimport ConfirmationDialog from '../ConfirmationDialog'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport FullWidthAlert from '../FullWidthAlert/FullWidthAlert'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\n\nconst CATEGORY_COLUMN_NAME = 'category'\nconst CATEGORY_SECTION_EMAIL_TEXT_COLUMN_NAME = 'category email prompt'\nconst REJECTION_REASON_FORM_TEXT_COLUMN_NAME = 'rejection reason'\nconst REJECTION_REASON_EMAIL_TEXT_COLUMN_NAME = 'email text'\n\nexport type CannedRejectionDialogProps = {\n  open: boolean\n  /* SynID of the table which contains the email responses which should populate this modal */\n  tableId: string\n  /* Callback invoked when the rejection is confirmed */\n  onConfirm: (message: string) => void\n  onClose: () => void\n  /** Text injected into the beginning of the email template */\n  defaultMessagePrefix?: string\n  /** Text appended onto the end of the email template */\n  defaultMessageAppend?: string\n  /** Text to display above the canned rejection reasons */\n  rejectionFormPromptCopy?: string\n  /** Error to display, in case one occurred in the callback to `onReject` */\n  error: SynapseClientError | null\n  /** Optional children, can be used to extend the form as needed on step 2 */\n  children?: ReactNode\n}\n\ntype RejectionCategoryProps = {\n  category: string\n  rows: Row[]\n  rejectionReasonFormTextIndex: number\n  selectedRowIds: Set<number>\n  setSelectedRowIds: Dispatch<SetStateAction<Set<number>>>\n  initialIsExpanded?: boolean\n}\n\ntype SelectRejectionReasonsFormProps = {\n  tableQuery: UseQueryResult<QueryResultBundle, SynapseClientError>\n  selectedRowIds: Set<number>\n  setSelectedRowIds: Dispatch<SetStateAction<Set<number>>>\n  rejectionFormPromptCopy?: string\n}\n\n/**\n * Renders a rejection reason category and checkboxes for each reason in the category\n */\nfunction RejectionCategory(props: RejectionCategoryProps) {\n  const {\n    category,\n    rows,\n    selectedRowIds,\n    setSelectedRowIds,\n    rejectionReasonFormTextIndex,\n    initialIsExpanded = false,\n  } = props\n  const [isExpanded, setIsExpanded] = useState(initialIsExpanded)\n\n  return (\n    <>\n      <Typography\n        variant=\"body1\"\n        onClick={() => setIsExpanded(!isExpanded)}\n        sx={{ fontWeight: 700, cursor: 'pointer', my: 1 }}\n      >\n        <IconSvg\n          icon={isExpanded ? 'expandMore' : 'chevronRight'}\n          sx={{ color: 'grey.700' }}\n          wrap={false}\n        />\n        {category}\n      </Typography>\n      <Collapse in={isExpanded}>\n        <Stack sx={{ ml: 3 }}>\n          {(rows ?? []).map(row => (\n            <FormControlLabel\n              key={row.rowId}\n              control={\n                <Checkbox\n                  checked={selectedRowIds.has(row.rowId!)}\n                  size={'small'}\n                  onChange={event => {\n                    if (event.target.checked) {\n                      setSelectedRowIds(selectedRowIds.add(row.rowId!))\n                    } else {\n                      setSelectedRowIds(selectedRowIds.remove(row.rowId!))\n                    }\n                  }}\n                />\n              }\n              label={\n                <Typography variant={'smallText1'}>\n                  {row.values[rejectionReasonFormTextIndex]}\n                </Typography>\n              }\n            />\n          ))}\n        </Stack>\n      </Collapse>\n    </>\n  )\n}\n\n/**\n * Renders a form for selecting individual rejection reasons grouped by category.\n * The rejection reason data comes from the table whose data is fetched in the tableQuery prop.\n */\nfunction SelectRejectionReasonsForm(props: SelectRejectionReasonsFormProps) {\n  const {\n    tableQuery,\n    selectedRowIds,\n    setSelectedRowIds,\n    rejectionFormPromptCopy,\n  } = props\n  const { data: tableData, isLoading, error } = tableQuery\n  const categoryIndex = tableData?.queryResult?.queryResults.headers.findIndex(\n    header => header.name.toLowerCase() === CATEGORY_COLUMN_NAME,\n  )\n  const rejectionReasonFormTextIndex =\n    tableData?.queryResult?.queryResults.headers.findIndex(\n      header =>\n        header.name.toLowerCase() === REJECTION_REASON_FORM_TEXT_COLUMN_NAME,\n    )\n\n  const rowsGroupedByCategory =\n    tableData?.queryResult?.queryResults.rows.reduce(\n      (acc: Record<string, Row[]>, row) => {\n        const category: string = row.values[categoryIndex!]!\n        acc[category] = [...(acc[category] || []), row]\n        return acc\n      },\n      {},\n    )\n  return (\n    <>\n      <Typography variant=\"headline3\" gutterBottom>\n        Reasons for rejecting\n      </Typography>\n      {rejectionFormPromptCopy && (\n        <Typography variant=\"body1\" gutterBottom>\n          {rejectionFormPromptCopy}\n        </Typography>\n      )}\n      {isLoading && (\n        <Stack sx={{ my: 2 }}>\n          <SynapseSpinner size={30} />\n        </Stack>\n      )}\n      {error && <ErrorBanner error={error} />}\n      {rowsGroupedByCategory && (\n        <FormControl>\n          {Object.keys(rowsGroupedByCategory).map(category => (\n            <RejectionCategory\n              key={category}\n              category={category}\n              rows={rowsGroupedByCategory[category]}\n              selectedRowIds={selectedRowIds}\n              setSelectedRowIds={setSelectedRowIds}\n              rejectionReasonFormTextIndex={rejectionReasonFormTextIndex!}\n              initialIsExpanded={\n                Object.keys(rowsGroupedByCategory).length === 1\n              }\n            />\n          ))}\n        </FormControl>\n      )}\n      <Typography variant=\"headline3\" sx={{ mt: 1 }} gutterBottom>\n        We’ll generate a response email message based on your selections.\n      </Typography>\n      <Typography variant=\"body1\" gutterBottom>\n        If your reasons for rejecting are not shown here, that’s okay! You can\n        edit the complete text of the message on the next screen before sending\n        it.\n      </Typography>\n    </>\n  )\n}\n\ntype DraftRejectionMessageProps = {\n  emailText: string\n  setEmailText: Dispatch<SetStateAction<string>>\n}\n\n/**\n * Presents a text field form that can be used to directly modify the rejection message.\n */\nfunction DraftRejectionMessage(props: DraftRejectionMessageProps) {\n  const { emailText, setEmailText } = props\n  return (\n    <>\n      <Typography variant=\"headline3\" gutterBottom>\n        Edit the text of the rejection message\n      </Typography>\n      <Typography variant=\"body1\" gutterBottom>\n        This message will be sent to the requester. You may edit it, or add\n        custom text to the message.\n      </Typography>\n      <TextField\n        multiline\n        fullWidth\n        rows={15}\n        value={emailText}\n        onChange={event => {\n          setEmailText(event.target.value)\n        }}\n      />\n    </>\n  )\n}\ntype RejectionMessageObject = {\n  [category: string]: {\n    sectionText: string\n    reasons: string[]\n  }\n}\n\n/**\n * Modal component presented to a data access submission reviewer when they decide to reject a request.\n * The modal contains a form for selecting rejection reasons and a text field for editing the rejection message.\n * After crafting a message, the user can reject the submission and send the message to the requester.\n */\nexport function CannedRejectionDialog(props: CannedRejectionDialogProps) {\n  const {\n    open,\n    tableId,\n    onClose,\n    onConfirm: onReject,\n    defaultMessagePrefix = '',\n    defaultMessageAppend = '',\n    rejectionFormPromptCopy,\n    children,\n    error,\n  } = props\n\n  const [step, setStep] = useState<1 | 2>(1)\n  // selectedRowIds are the row IDs of the canned responses the user selected:\n  const [emailText, setEmailText] = useState('')\n  const [selectedRowIds, setSelectedRowIds] = useState(Set<number>())\n\n  // Fetch the table data\n  const tableQuery = useGetFullTableQueryResults({\n    entityId: tableId,\n    query: {\n      sql: `SELECT * FROM ${tableId}`,\n    },\n    partMask: BUNDLE_MASK_QUERY_RESULTS,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n  })\n\n  const { data } = tableQuery\n\n  const categoryIndex = data?.queryResult?.queryResults.headers.findIndex(\n    header => header.name.toLowerCase() === CATEGORY_COLUMN_NAME,\n  )\n  const categorySectionEmailTextIndex =\n    data?.queryResult?.queryResults.headers.findIndex(\n      header =>\n        header.name.toLowerCase() === CATEGORY_SECTION_EMAIL_TEXT_COLUMN_NAME,\n    )\n\n  const reasonEmailTextIndex =\n    data?.queryResult?.queryResults.headers.findIndex(\n      header =>\n        header.name.toLowerCase() === REJECTION_REASON_EMAIL_TEXT_COLUMN_NAME,\n    )\n\n  // Transform the selected rejection reasons into an object that can be easily transformed into an email\n  const defaultEmailMessageObject: RejectionMessageObject | undefined =\n    data?.queryResult &&\n    selectedRowIds.reduce((messageObject: RejectionMessageObject, rowId) => {\n      const row = data.queryResult!.queryResults.rows.find(\n        row => row.rowId === rowId,\n      )!\n      const category = row.values[categoryIndex!]!\n      const sectionText = row.values[categorySectionEmailTextIndex!]!\n      const reasonText = row.values[reasonEmailTextIndex!]!\n      if (messageObject[category]) {\n        messageObject[category].reasons = [\n          ...messageObject[category].reasons,\n          reasonText,\n        ]\n      } else {\n        messageObject[category] = {\n          sectionText: sectionText,\n          reasons: [reasonText],\n        }\n      }\n      return messageObject\n    }, {})\n\n  // Using the rejection message object, create the email template.\n  const defaultEmailMessage =\n    defaultEmailMessageObject &&\n    defaultMessagePrefix +\n      Object.keys(defaultEmailMessageObject).reduce((message, key) => {\n        message += '\\n'\n        const sectionText = defaultEmailMessageObject[key].sectionText\n        if (sectionText) {\n          message += sectionText + '\\n'\n        }\n\n        for (const reason of defaultEmailMessageObject[key].reasons) {\n          if (reason != null) {\n            message += '\\n* ' + reason.replaceAll('\\\\n', '\\n') + '\\n'\n          }\n        }\n        return message\n      }, '') +\n      defaultMessageAppend\n\n  /* If the selected rows change, then reset the email text. */\n  useEffect(() => {\n    if (defaultEmailMessage) {\n      setEmailText(defaultEmailMessage)\n    }\n    // Specifically fire on update to just selectedRowIds\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedRowIds])\n\n  // If fetching/processing the table fails, gracefully fall back to just show the email template\n  return (\n    <ConfirmationDialog\n      open={open}\n      onCancel={() => {\n        if (step === 1) {\n          onClose()\n        }\n        if (step === 2) {\n          setStep(1)\n        }\n      }}\n      maxWidth={'md'}\n      fullWidth\n      title=\"Reject Request?\"\n      content={\n        <>\n          {step === 1 && (\n            <SelectRejectionReasonsForm\n              tableQuery={tableQuery}\n              selectedRowIds={selectedRowIds}\n              setSelectedRowIds={setSelectedRowIds}\n              rejectionFormPromptCopy={rejectionFormPromptCopy}\n            />\n          )}\n          {step === 2 && (\n            <>\n              <DraftRejectionMessage\n                emailText={emailText}\n                setEmailText={setEmailText}\n              />\n              {children}\n            </>\n          )}\n          {error && (\n            <FullWidthAlert\n              variant={'danger'}\n              description={error.reason}\n              isGlobal={false}\n            />\n          )}\n        </>\n      }\n      onConfirm={() => {\n        if (step === 1) {\n          setStep(2)\n        }\n        if (step === 2) {\n          onReject(emailText)\n        }\n      }}\n      confirmButtonProps={{\n        children: step === 1 ? 'Generate Email' : 'Reject and Notify Requester',\n      }}\n      cancelButtonProps={{\n        children: step === 1 ? 'Cancel' : 'Back',\n      }}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"CannedRejectionDialog.js","names":[],"sources":["../../../src/components/CannedRejectionDialog/CannedRejectionDialog.tsx"],"sourcesContent":["import { useGetFullTableQueryResults } from '@/synapse-queries'\nimport { BUNDLE_MASK_QUERY_RESULTS } from '@/utils/SynapseConstants'\nimport {\n  Checkbox,\n  Collapse,\n  FormControl,\n  FormControlLabel,\n  Stack,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { SynapseClientError } from '@sage-bionetworks/synapse-client/util/SynapseClientError'\nimport { QueryResultBundle, Row } from '@sage-bionetworks/synapse-types'\nimport { UseQueryResult } from '@tanstack/react-query'\nimport { Set } from 'immutable'\nimport { Dispatch, ReactNode, SetStateAction, useEffect, useState } from 'react'\nimport ConfirmationDialog from '../ConfirmationDialog'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport FullWidthAlert from '../FullWidthAlert/FullWidthAlert'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\n\nconst CATEGORY_COLUMN_NAME = 'category'\nconst CATEGORY_SECTION_EMAIL_TEXT_COLUMN_NAME = 'category email prompt'\nconst REJECTION_REASON_FORM_TEXT_COLUMN_NAME = 'rejection reason'\nconst REJECTION_REASON_EMAIL_TEXT_COLUMN_NAME = 'email text'\n\nexport type CannedRejectionDialogProps = {\n  open: boolean\n  /* SynID of the table which contains the email responses which should populate this modal */\n  tableId: string\n  /* Callback invoked when the rejection is confirmed */\n  onConfirm: (message: string) => void\n  onClose: () => void\n  /** Text injected into the beginning of the email template */\n  defaultMessagePrefix?: string\n  /** Text appended onto the end of the email template */\n  defaultMessageAppend?: string\n  /** Text to display above the canned rejection reasons */\n  rejectionFormPromptCopy?: string\n  /** Error to display, in case one occurred in the callback to `onReject` */\n  error: SynapseClientError | null\n  /** Optional children, can be used to extend the form as needed on step 2 */\n  children?: ReactNode\n}\n\ntype RejectionCategoryProps = {\n  category: string\n  rows: Row[]\n  rejectionReasonFormTextIndex: number\n  selectedRowIds: Set<number>\n  setSelectedRowIds: Dispatch<SetStateAction<Set<number>>>\n  initialIsExpanded?: boolean\n}\n\ntype SelectRejectionReasonsFormProps = {\n  tableQuery: UseQueryResult<QueryResultBundle, SynapseClientError>\n  selectedRowIds: Set<number>\n  setSelectedRowIds: Dispatch<SetStateAction<Set<number>>>\n  rejectionFormPromptCopy?: string\n}\n\n/**\n * Renders a rejection reason category and checkboxes for each reason in the category\n */\nfunction RejectionCategory(props: RejectionCategoryProps) {\n  const {\n    category,\n    rows,\n    selectedRowIds,\n    setSelectedRowIds,\n    rejectionReasonFormTextIndex,\n    initialIsExpanded = false,\n  } = props\n  const [isExpanded, setIsExpanded] = useState(initialIsExpanded)\n\n  return (\n    <>\n      <Typography\n        variant=\"body1\"\n        onClick={() => setIsExpanded(!isExpanded)}\n        sx={{ fontWeight: 700, cursor: 'pointer', my: 1 }}\n      >\n        <IconSvg\n          icon={isExpanded ? 'expandMore' : 'chevronRight'}\n          sx={{ color: 'grey.700' }}\n          wrap={false}\n        />\n        {category}\n      </Typography>\n      <Collapse in={isExpanded}>\n        <Stack sx={{ ml: 3 }}>\n          {(rows ?? []).map(row => (\n            <FormControlLabel\n              key={row.rowId}\n              control={\n                <Checkbox\n                  checked={selectedRowIds.has(row.rowId!)}\n                  size={'small'}\n                  onChange={event => {\n                    if (event.target.checked) {\n                      setSelectedRowIds(selectedRowIds.add(row.rowId!))\n                    } else {\n                      setSelectedRowIds(selectedRowIds.remove(row.rowId!))\n                    }\n                  }}\n                />\n              }\n              label={\n                <Typography variant={'smallText1'}>\n                  {row.values[rejectionReasonFormTextIndex]}\n                </Typography>\n              }\n            />\n          ))}\n        </Stack>\n      </Collapse>\n    </>\n  )\n}\n\n/**\n * Renders a form for selecting individual rejection reasons grouped by category.\n * The rejection reason data comes from the table whose data is fetched in the tableQuery prop.\n */\nfunction SelectRejectionReasonsForm(props: SelectRejectionReasonsFormProps) {\n  const {\n    tableQuery,\n    selectedRowIds,\n    setSelectedRowIds,\n    rejectionFormPromptCopy,\n  } = props\n  const { data: tableData, isLoading, error } = tableQuery\n  const categoryIndex = tableData?.queryResult?.queryResults.headers.findIndex(\n    header => header.name.toLowerCase() === CATEGORY_COLUMN_NAME,\n  )\n  const rejectionReasonFormTextIndex =\n    tableData?.queryResult?.queryResults.headers.findIndex(\n      header =>\n        header.name.toLowerCase() === REJECTION_REASON_FORM_TEXT_COLUMN_NAME,\n    )\n\n  const rowsGroupedByCategory =\n    tableData?.queryResult?.queryResults.rows.reduce(\n      (acc: Record<string, Row[]>, row) => {\n        const category: string = row.values[categoryIndex!]!\n        acc[category] = [...(acc[category] || []), row]\n        return acc\n      },\n      {},\n    )\n  return (\n    <>\n      <Typography variant=\"headline3\" gutterBottom>\n        Reasons for rejecting\n      </Typography>\n      {rejectionFormPromptCopy && (\n        <Typography variant=\"body1\" gutterBottom>\n          {rejectionFormPromptCopy}\n        </Typography>\n      )}\n      {isLoading && (\n        <Stack sx={{ my: 2 }}>\n          <SynapseSpinner size={30} />\n        </Stack>\n      )}\n      {error && <ErrorBanner error={error} />}\n      {rowsGroupedByCategory && (\n        <FormControl>\n          {Object.keys(rowsGroupedByCategory).map(category => (\n            <RejectionCategory\n              key={category}\n              category={category}\n              rows={rowsGroupedByCategory[category]}\n              selectedRowIds={selectedRowIds}\n              setSelectedRowIds={setSelectedRowIds}\n              rejectionReasonFormTextIndex={rejectionReasonFormTextIndex!}\n              initialIsExpanded={\n                Object.keys(rowsGroupedByCategory).length === 1\n              }\n            />\n          ))}\n        </FormControl>\n      )}\n      <Typography variant=\"headline3\" sx={{ mt: 1 }} gutterBottom>\n        We’ll generate a response email message based on your selections.\n      </Typography>\n      <Typography variant=\"body1\" gutterBottom>\n        If your reasons for rejecting are not shown here, that’s okay! You can\n        edit the complete text of the message on the next screen before sending\n        it.\n      </Typography>\n    </>\n  )\n}\n\ntype DraftRejectionMessageProps = {\n  emailText: string\n  setEmailText: Dispatch<SetStateAction<string>>\n}\n\n/**\n * Presents a text field form that can be used to directly modify the rejection message.\n */\nfunction DraftRejectionMessage(props: DraftRejectionMessageProps) {\n  const { emailText, setEmailText } = props\n  return (\n    <>\n      <Typography variant=\"headline3\" gutterBottom>\n        Edit the text of the rejection message\n      </Typography>\n      <Typography variant=\"body1\" gutterBottom>\n        This message will be sent to the requester. You may edit it, or add\n        custom text to the message.\n      </Typography>\n      <TextField\n        multiline\n        fullWidth\n        rows={15}\n        value={emailText}\n        onChange={event => {\n          setEmailText(event.target.value)\n        }}\n      />\n    </>\n  )\n}\ntype RejectionMessageObject = {\n  [category: string]: {\n    sectionText: string\n    reasons: string[]\n  }\n}\n\n/**\n * Modal component presented to a data access submission reviewer when they decide to reject a request.\n * The modal contains a form for selecting rejection reasons and a text field for editing the rejection message.\n * After crafting a message, the user can reject the submission and send the message to the requester.\n */\nexport function CannedRejectionDialog(props: CannedRejectionDialogProps) {\n  const {\n    open,\n    tableId,\n    onClose,\n    onConfirm: onReject,\n    defaultMessagePrefix = '',\n    defaultMessageAppend = '',\n    rejectionFormPromptCopy,\n    children,\n    error,\n  } = props\n\n  const [step, setStep] = useState<1 | 2>(1)\n  // selectedRowIds are the row IDs of the canned responses the user selected:\n  const [emailText, setEmailText] = useState('')\n  const [selectedRowIds, setSelectedRowIds] = useState(Set<number>())\n\n  // Fetch the table data\n  const tableQuery = useGetFullTableQueryResults({\n    entityId: tableId,\n    query: {\n      sql: `SELECT * FROM ${tableId}`,\n    },\n    partMask: BUNDLE_MASK_QUERY_RESULTS,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n  })\n\n  const { data } = tableQuery\n\n  const categoryIndex = data?.queryResult?.queryResults.headers.findIndex(\n    header => header.name.toLowerCase() === CATEGORY_COLUMN_NAME,\n  )\n  const categorySectionEmailTextIndex =\n    data?.queryResult?.queryResults.headers.findIndex(\n      header =>\n        header.name.toLowerCase() === CATEGORY_SECTION_EMAIL_TEXT_COLUMN_NAME,\n    )\n\n  const reasonEmailTextIndex =\n    data?.queryResult?.queryResults.headers.findIndex(\n      header =>\n        header.name.toLowerCase() === REJECTION_REASON_EMAIL_TEXT_COLUMN_NAME,\n    )\n\n  // Transform the selected rejection reasons into an object that can be easily transformed into an email\n  const defaultEmailMessageObject: RejectionMessageObject | undefined =\n    data?.queryResult &&\n    selectedRowIds.reduce((messageObject: RejectionMessageObject, rowId) => {\n      const row = data.queryResult!.queryResults.rows.find(\n        row => row.rowId === rowId,\n      )!\n      const category = row.values[categoryIndex!]!\n      const sectionText = row.values[categorySectionEmailTextIndex!]!\n      const reasonText = row.values[reasonEmailTextIndex!]!\n      if (messageObject[category]) {\n        messageObject[category].reasons = [\n          ...messageObject[category].reasons,\n          reasonText,\n        ]\n      } else {\n        messageObject[category] = {\n          sectionText: sectionText,\n          reasons: [reasonText],\n        }\n      }\n      return messageObject\n    }, {})\n\n  // Using the rejection message object, create the email template.\n  const defaultEmailMessage =\n    defaultEmailMessageObject &&\n    defaultMessagePrefix +\n      Object.keys(defaultEmailMessageObject).reduce((message, key) => {\n        message += '\\n'\n        const sectionText = defaultEmailMessageObject[key].sectionText\n        if (sectionText) {\n          message += sectionText + '\\n'\n        }\n\n        for (const reason of defaultEmailMessageObject[key].reasons) {\n          if (reason != null) {\n            message += '\\n* ' + reason.replaceAll(String.raw`\\n`, '\\n') + '\\n'\n          }\n        }\n        return message\n      }, '') +\n      defaultMessageAppend\n\n  /* If the selected rows change, then reset the email text. */\n  useEffect(() => {\n    if (defaultEmailMessage) {\n      setEmailText(defaultEmailMessage)\n    }\n    // Specifically fire on update to just selectedRowIds\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedRowIds])\n\n  // If fetching/processing the table fails, gracefully fall back to just show the email template\n  return (\n    <ConfirmationDialog\n      open={open}\n      onCancel={() => {\n        if (step === 1) {\n          onClose()\n        }\n        if (step === 2) {\n          setStep(1)\n        }\n      }}\n      maxWidth={'md'}\n      fullWidth\n      title=\"Reject Request?\"\n      content={\n        <>\n          {step === 1 && (\n            <SelectRejectionReasonsForm\n              tableQuery={tableQuery}\n              selectedRowIds={selectedRowIds}\n              setSelectedRowIds={setSelectedRowIds}\n              rejectionFormPromptCopy={rejectionFormPromptCopy}\n            />\n          )}\n          {step === 2 && (\n            <>\n              <DraftRejectionMessage\n                emailText={emailText}\n                setEmailText={setEmailText}\n              />\n              {children}\n            </>\n          )}\n          {error && (\n            <FullWidthAlert\n              variant={'danger'}\n              description={error.reason}\n              isGlobal={false}\n            />\n          )}\n        </>\n      }\n      onConfirm={() => {\n        if (step === 1) {\n          setStep(2)\n        }\n        if (step === 2) {\n          onReject(emailText)\n        }\n      }}\n      confirmButtonProps={{\n        children: step === 1 ? 'Generate Email' : 'Reject and Notify Requester',\n      }}\n      cancelButtonProps={{\n        children: step === 1 ? 'Cancel' : 'Back',\n      }}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/components/CardContainer/CardContainer.js

@@ -1,10 +1,10 @@
 import { DATASET as e, FUNDER as t, GENERIC_CARD as n, MEDIUM_USER_CARD as r, OBSERVATION_CARD as i, RELEASE_CARD as a } from "../../utils/SynapseConstants.js";
-import o from "../../utils/hooks/useGetInfoFromIds.js";
-import s from "../LoadingScreen/LoadingScreen.js";
-import { useQueryContext as c } from "../QueryContext/QueryContext.js";
+import { useQueryVisualizationContext as o } from "../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import s from "../../utils/hooks/useGetInfoFromIds.js";
+import c from "../LoadingScreen/LoadingScreen.js";
+import { useQueryContext as l } from "../QueryContext/QueryContext.js";
 import "../QueryContext/index.js";
-import { useGetQueryMetadata as l } from "../QueryWrapper/useGetQueryMetadata.js";
-import { useQueryVisualizationContext as u } from "../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import { useGetQueryMetadata as u } from "../QueryWrapper/useGetQueryMetadata.js";
 import "../QueryVisualizationWrapper/index.js";
 import { TableRowGenericCard as d } from "../GenericCard/TableRowGenericCard.js";
 import { ReleaseCard as f } from "../ReleaseCard/ReleaseCard.js";
@@ -46,11 +46,11 @@ function D(r) {
 	}
 }
 function O(e) {
-	let { unitDescription: t, type: n, secondaryLabelLimit: i = 3, title: a, rowSet: d, multiCardList: f, ...p } = e, { NoContentPlaceholder: m } = u(), g = c(), { data: O, isLoading: k } = l({ throwOnError: !0 }), A = u(), j = d.rows, M = j.length > 1, N = o({
+	let { unitDescription: t, type: n, secondaryLabelLimit: i = 3, title: a, rowSet: d, multiCardList: f, ...p } = e, { NoContentPlaceholder: m } = o(), g = l(), { data: O, isLoading: k } = u({ throwOnError: !0 }), A = o(), j = d.rows, M = j.length > 1, N = s({
 		ids: [d.tableId],
 		type: "ENTITY_HEADER"
 	});
-	if (k) return /* @__PURE__ */ S("div", { children: [n === "observation_card" && /* @__PURE__ */ x(h, {}), n !== "observation_card" && s] });
+	if (k) return /* @__PURE__ */ S("div", { children: [n === "observation_card" && /* @__PURE__ */ x(h, {}), n !== "observation_card" && c] });
 	if (j.length === 0) return /* @__PURE__ */ x(m, {});
 	let P = {};
 	d.headers.forEach((e, t) => {

package/dist/components/CardContainer/CardContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardContainer.js","names":[],"sources":["../../../src/components/CardContainer/CardContainer.tsx"],"sourcesContent":["import { CardConfiguration } from '@/components/CardContainer/CardConfiguration'\nimport TableRowGenericCard from '@/components/GenericCard/TableRowGenericCard'\nimport useGetInfoFromIds from '@/utils/hooks/useGetInfoFromIds'\nimport {\n  DATASET,\n  FUNDER,\n  GENERIC_CARD,\n  MEDIUM_USER_CARD,\n  OBSERVATION_CARD,\n  RELEASE_CARD,\n} from '@/utils/SynapseConstants'\nimport { Box } from '@mui/material'\nimport {\n  ColumnTypeEnum,\n  EntityHeader,\n  Row,\n  RowSet,\n} from '@sage-bionetworks/synapse-types'\nimport loadingScreen from '../LoadingScreen/LoadingScreen'\nimport { useQueryContext } from '../QueryContext'\nimport { useQueryVisualizationContext } from '../QueryVisualizationWrapper'\nimport { useGetQueryMetadata } from '../QueryWrapper/useGetQueryMetadata'\nimport { ReleaseCard } from '../ReleaseCard'\nimport { Dataset, Funder } from '../row_renderers'\nimport {\n  LoadingObservationCard,\n  ObservationCard,\n} from '../row_renderers/ObservationCard'\nimport TotalQueryResults from '../TotalQueryResults'\nimport UserCardList from '../UserCardList/UserCardList'\nimport { SustainabilityScorecardProps } from '../SustainabilityScorecard'\n\nconst defaultListSx = { display: 'block' }\nconst releaseCardMediumListSx = {\n  display: 'grid',\n  gridTemplateColumns: 'repeat(auto-fill, 272px)',\n  gridAutoRows: 'auto',\n  gridAutoFlow: 'row',\n  gap: '10px',\n  mb: '30px',\n}\nconst multiCardListSx = {\n  display: 'grid',\n  gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',\n  gridColumnGap: '20px',\n  marginBottom: '20px',\n  marginTop: '20px',\n\n  '& .SRC-portalCard': {\n    margin: '10px 0px',\n  },\n}\n\nexport type CardContainerProps = {\n  rowSet: RowSet\n  isHeader?: boolean\n  sustainabilityScorecard?: SustainabilityScorecardProps\n  isAlignToLeftNav?: boolean\n  title?: string\n  isLoading?: boolean\n  unitDescription?: string\n  multiCardList?: boolean\n} & CardConfiguration\n\nfunction Card(props: { propsToPass: any; type: string }) {\n  const { propsToPass, type } = props\n  switch (type) {\n    case DATASET:\n      return <Dataset {...propsToPass} />\n    case FUNDER:\n      return <Funder {...propsToPass} />\n    case GENERIC_CARD:\n      return <TableRowGenericCard {...propsToPass} />\n    case OBSERVATION_CARD:\n      return <ObservationCard {...propsToPass} />\n    case RELEASE_CARD:\n      return <ReleaseCard {...propsToPass} />\n    default:\n      return <div /> // this should never happen\n  }\n}\n\nexport function CardContainer(props: CardContainerProps) {\n  const {\n    unitDescription,\n    type,\n    secondaryLabelLimit = 3,\n    title,\n    rowSet,\n    multiCardList,\n    ...rest\n  } = props\n  const { NoContentPlaceholder } = useQueryVisualizationContext()\n  const queryContext = useQueryContext()\n  const { data: queryMetadata, isLoading: queryMetadataIsLoading } =\n    useGetQueryMetadata({ throwOnError: true })\n  const queryVisualizationContext = useQueryVisualizationContext()\n\n  const dataRows: Row[] = rowSet.rows\n  const isMultipleCards = dataRows.length > 1\n\n  const ids = [rowSet.tableId]\n  const tableEntityConcreteType = useGetInfoFromIds<EntityHeader>({\n    ids,\n    type: 'ENTITY_HEADER',\n  })\n\n  // Render a loading placeholder while waiting for query metadata. Using a\n  // non-suspense query (with conditional rendering) instead of Suspense keeps\n  // the cards inline in the prerendered HTML when data is already cached,\n  // rather than forcing React 19 streaming to stash them in a hidden div.\n  if (queryMetadataIsLoading) {\n    return (\n      <div>\n        {type === OBSERVATION_CARD && <LoadingObservationCard />}\n        {type !== OBSERVATION_CARD && loadingScreen}\n      </div>\n    )\n  }\n\n  // the cards only show the loading screen on initial load, this occurs when data is undefined\n  if (dataRows.length === 0) {\n    // Show \"no results\" UI (see PORTALS-1497)\n    return <NoContentPlaceholder />\n  }\n\n  const schema: Record<string, number> = {}\n  rowSet.headers.forEach((element, index) => {\n    schema[element.name] = index\n  })\n\n  let cards\n  if (type === MEDIUM_USER_CARD) {\n    // Hard coding ownerId as a column name containing the user profile ownerId\n    // for each row, grab the column with the ownerId\n    const userIdColumnName = queryMetadata?.columnModels?.find(\n      cm => cm.columnType === ColumnTypeEnum.USERID,\n    )?.name\n    const userIdColumnIndex = userIdColumnName\n      ? rowSet.headers.findIndex(el => el.name === userIdColumnName)\n      : -1\n    if (userIdColumnIndex === -1) {\n      throw Error(\n        'Type MEDIUM_USER_CARD specified but no columnType USERID found',\n      )\n    }\n    const listIds = dataRows.map(el => el.values[userIdColumnIndex])\n    cards = (\n      <UserCardList rowSet={rowSet} list={listIds} size={MEDIUM_USER_CARD} />\n    )\n  } else {\n    // render the cards\n    cards = dataRows.length ? (\n      dataRows.map((rowData: Row, index) => {\n        const propsForCard = {\n          type,\n          schema,\n          secondaryLabelLimit,\n          rowId: rowData.rowId,\n          versionNumber: rowData.versionNumber,\n          data: rowData.values,\n          selectColumns: rowSet.headers,\n          columnModels: queryMetadata!.columnModels,\n          tableEntityConcreteType: tableEntityConcreteType[0]?.type,\n          tableId: rowSet.tableId,\n          queryContext: queryContext,\n          queryVisualizationContext,\n          ...rest,\n        }\n        return (\n          <Card\n            key={rowData.rowId ?? index}\n            propsToPass={propsForCard}\n            type={type}\n          />\n        )\n      })\n    ) : (\n      <></>\n    )\n  }\n\n  const isReleaseCardMediumList =\n    props.type === RELEASE_CARD &&\n    props.releaseCardConfig?.cardSize === 'medium'\n\n  let cardListSx = defaultListSx\n  if (isReleaseCardMediumList) {\n    cardListSx = releaseCardMediumListSx\n  } else if (multiCardList && isMultipleCards) {\n    cardListSx = multiCardListSx\n  }\n\n  return (\n    <Box role=\"list\" sx={cardListSx}>\n      {title && <h2 className=\"SRC-card-overview-title\">{title}</h2>}\n      {!title && unitDescription && (\n        <TotalQueryResults frontText={'Displaying'} />\n      )}\n      {/* ReactCSSTransitionGroup adds css fade in property for cards that come into view */}\n      {cards}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAgCA,IAAM,IAAgB,EAAE,SAAS,QAAQ,GACnC,IAA0B;CAC9B,SAAS;CACT,qBAAqB;CACrB,cAAc;CACd,cAAc;CACd,KAAK;CACL,IAAI;AACN,GACM,IAAkB;CACtB,SAAS;CACT,qBAAqB;CACrB,eAAe;CACf,cAAc;CACd,WAAW;CAEX,qBAAqB,EACnB,QAAQ,WACV;AACF;AAaA,SAAS,EAAK,GAA2C;CACvD,IAAM,EAAE,gBAAa,YAAS;CAC9B,QAAQ,GAAR;EACE,KAAK,GACH,OAAO,kBAAC,GAAD,EAAS,GAAI,EAAc,CAAA;EACpC,KAAK,GACH,OAAO,kBAAC,GAAD,EAAQ,GAAI,EAAc,CAAA;EACnC,KAAK,GACH,OAAO,kBAAC,GAAD,EAAqB,GAAI,EAAc,CAAA;EAChD,KAAK,GACH,OAAO,kBAAC,GAAD,EAAiB,GAAI,EAAc,CAAA;EAC5C,KAAK,GACH,OAAO,kBAAC,GAAD,EAAa,GAAI,EAAc,CAAA;EACxC,SACE,OAAO,kBAAC,OAAD,CAAM,CAAA;CACjB;AACF;AAEA,SAAgB,EAAc,GAA2B;CACvD,IAAM,EACJ,oBACA,SACA,yBAAsB,GACtB,UACA,WACA,kBACA,GAAG,MACD,GACE,EAAE,4BAAyB,EAA6B,GACxD,IAAe,EAAgB,GAC/B,EAAE,MAAM,GAAe,WAAW,MACtC,EAAoB,EAAE,cAAc,GAAK,CAAC,GACtC,IAA4B,EAA6B,GAEzD,IAAkB,EAAO,MACzB,IAAkB,EAAS,SAAS,GAGpC,IAA0B,EAAgC;EAC9D,KAAA,CAFW,EAAO,OAElB;EACA,MAAM;CACR,CAAC;CAMD,IAAI,GACF,OACE,kBAAC,OAAD,EAAA,UAAA,CACG,MAAA,sBAA6B,kBAAC,GAAD,CAAyB,CAAA,GACtD,MAAA,sBAA6B,CAC3B,EAAA,CAAA;CAKT,IAAI,EAAS,WAAW,GAEtB,OAAO,kBAAC,GAAD,CAAuB,CAAA;CAGhC,IAAM,IAAiC,CAAC;CACxC,EAAO,QAAQ,SAAS,GAAS,MAAU;EACzC,EAAO,EAAQ,QAAQ;CACzB,CAAC;CAED,IAAI;CACJ,IAAI,MAAA,oBAA2B;EAG7B,IAAM,IAAmB,GAAe,cAAc,MACpD,MAAM,EAAG,eAAe,EAAe,MACzC,GAAG,MACG,IAAoB,IACtB,EAAO,QAAQ,WAAU,MAAM,EAAG,SAAS,CAAgB,IAC3D;EACJ,IAAI,MAAsB,IACxB,MAAM,MACJ,gEACF;EAGF,IACE,kBAAC,GAAD;GAAsB;GAAQ,MAFhB,EAAS,KAAI,MAAM,EAAG,OAAO,EAEP;GAAS,MAAM;EAAmB,CAAA;CAE1E,OAEE,IAAQ,EAAS,SACf,EAAS,KAAK,GAAc,MAiBxB,kBAAC,GAAD;EAEE,aAAa;GAjBf;GACA;GACA;GACA,OAAO,EAAQ;GACf,eAAe,EAAQ;GACvB,MAAM,EAAQ;GACd,eAAe,EAAO;GACtB,cAAc,EAAe;GAC7B,yBAAyB,EAAwB,IAAI;GACrD,SAAS,EAAO;GACF;GACd;GACA,GAAG;EAKY;EACP;CACP,GAHM,EAAQ,SAAS,CAGvB,CAEJ,IAED,kBAAA,GAAA,CAAI,CAAA;CAIR,IAAM,IACJ,EAAM,SAAA,kBACN,EAAM,mBAAmB,aAAa,UAEpC,IAAa;CAOjB,OANI,IACF,IAAa,IACJ,KAAiB,MAC1B,IAAa,IAIb,kBAAC,GAAD;EAAK,MAAK;EAAO,IAAI;YAArB;GACG,KAAS,kBAAC,MAAD;IAAI,WAAU;cAA2B;GAAU,CAAA;GAC5D,CAAC,KAAS,KACT,kBAAC,GAAD,EAAmB,WAAW,aAAe,CAAA;GAG9C;EACE;;AAET"}
+{"version":3,"file":"CardContainer.js","names":[],"sources":["../../../src/components/CardContainer/CardContainer.tsx"],"sourcesContent":["import { CardConfiguration } from '@/components/CardContainer/CardConfiguration'\nimport TableRowGenericCard from '@/components/GenericCard/TableRowGenericCard'\nimport useGetInfoFromIds from '@/utils/hooks/useGetInfoFromIds'\nimport {\n  DATASET,\n  FUNDER,\n  GENERIC_CARD,\n  MEDIUM_USER_CARD,\n  OBSERVATION_CARD,\n  RELEASE_CARD,\n} from '@/utils/SynapseConstants'\nimport { Box } from '@mui/material'\nimport {\n  ColumnTypeEnum,\n  EntityHeader,\n  Row,\n  RowSet,\n} from '@sage-bionetworks/synapse-types'\nimport loadingScreen from '../LoadingScreen/LoadingScreen'\nimport { useQueryContext } from '../QueryContext'\nimport { useQueryVisualizationContext } from '../QueryVisualizationWrapper'\nimport { useGetQueryMetadata } from '../QueryWrapper/useGetQueryMetadata'\nimport { ReleaseCard } from '../ReleaseCard'\nimport { Dataset, Funder } from '../row_renderers'\nimport {\n  LoadingObservationCard,\n  ObservationCard,\n} from '../row_renderers/ObservationCard'\nimport TotalQueryResults from '../TotalQueryResults'\nimport UserCardList from '../UserCardList/UserCardList'\nimport { SustainabilityScorecardProps } from '../SustainabilityScorecard'\n\nconst defaultListSx = { display: 'block' }\nconst releaseCardMediumListSx = {\n  display: 'grid',\n  gridTemplateColumns: 'repeat(auto-fill, 272px)',\n  gridAutoRows: 'auto',\n  gridAutoFlow: 'row',\n  gap: '10px',\n  mb: '30px',\n}\nconst multiCardListSx = {\n  display: 'grid',\n  gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',\n  gridColumnGap: '20px',\n  marginBottom: '20px',\n  marginTop: '20px',\n\n  '& .SRC-portalCard': {\n    margin: '10px 0px',\n  },\n}\n\nexport type CardContainerProps = {\n  rowSet: RowSet\n  isHeader?: boolean\n  sustainabilityScorecard?: SustainabilityScorecardProps\n  isAlignToLeftNav?: boolean\n  title?: string\n  isLoading?: boolean\n  unitDescription?: string\n  multiCardList?: boolean\n} & CardConfiguration\n\nfunction Card(props: { propsToPass: any; type: string }) {\n  const { propsToPass, type } = props\n  switch (type) {\n    case DATASET:\n      return <Dataset {...propsToPass} />\n    case FUNDER:\n      return <Funder {...propsToPass} />\n    case GENERIC_CARD:\n      return <TableRowGenericCard {...propsToPass} />\n    case OBSERVATION_CARD:\n      return <ObservationCard {...propsToPass} />\n    case RELEASE_CARD:\n      return <ReleaseCard {...propsToPass} />\n    default:\n      return <div /> // this should never happen\n  }\n}\n\nexport function CardContainer(props: CardContainerProps) {\n  const {\n    unitDescription,\n    type,\n    secondaryLabelLimit = 3,\n    title,\n    rowSet,\n    multiCardList,\n    ...rest\n  } = props\n  const { NoContentPlaceholder } = useQueryVisualizationContext()\n  const queryContext = useQueryContext()\n  const { data: queryMetadata, isLoading: queryMetadataIsLoading } =\n    useGetQueryMetadata({ throwOnError: true })\n  const queryVisualizationContext = useQueryVisualizationContext()\n\n  const dataRows: Row[] = rowSet.rows\n  const isMultipleCards = dataRows.length > 1\n\n  const ids = [rowSet.tableId]\n  const tableEntityConcreteType = useGetInfoFromIds<EntityHeader>({\n    ids,\n    type: 'ENTITY_HEADER',\n  })\n\n  // Render a loading placeholder while waiting for query metadata. Using a\n  // non-suspense query (with conditional rendering) instead of Suspense keeps\n  // the cards inline in the prerendered HTML when data is already cached,\n  // rather than forcing React 19 streaming to stash them in a hidden div.\n  if (queryMetadataIsLoading) {\n    return (\n      <div>\n        {type === OBSERVATION_CARD && <LoadingObservationCard />}\n        {type !== OBSERVATION_CARD && loadingScreen}\n      </div>\n    )\n  }\n\n  // the cards only show the loading screen on initial load, this occurs when data is undefined\n  if (dataRows.length === 0) {\n    // Show \"no results\" UI (see PORTALS-1497)\n    return <NoContentPlaceholder />\n  }\n\n  const schema: Record<string, number> = {}\n  rowSet.headers.forEach((element, index) => {\n    schema[element.name] = index\n  })\n\n  let cards\n  if (type === MEDIUM_USER_CARD) {\n    // Hard coding ownerId as a column name containing the user profile ownerId\n    // for each row, grab the column with the ownerId\n    const userIdColumnName = queryMetadata?.columnModels?.find(\n      cm => cm.columnType === ColumnTypeEnum.USERID,\n    )?.name\n    const userIdColumnIndex = userIdColumnName\n      ? rowSet.headers.findIndex(el => el.name === userIdColumnName)\n      : -1\n    if (userIdColumnIndex === -1) {\n      throw new Error(\n        'Type MEDIUM_USER_CARD specified but no columnType USERID found',\n      )\n    }\n    const listIds = dataRows.map(el => el.values[userIdColumnIndex])\n    cards = (\n      <UserCardList rowSet={rowSet} list={listIds} size={MEDIUM_USER_CARD} />\n    )\n  } else {\n    // render the cards\n    cards = dataRows.length ? (\n      dataRows.map((rowData: Row, index) => {\n        const propsForCard = {\n          type,\n          schema,\n          secondaryLabelLimit,\n          rowId: rowData.rowId,\n          versionNumber: rowData.versionNumber,\n          data: rowData.values,\n          selectColumns: rowSet.headers,\n          columnModels: queryMetadata!.columnModels,\n          tableEntityConcreteType: tableEntityConcreteType[0]?.type,\n          tableId: rowSet.tableId,\n          queryContext: queryContext,\n          queryVisualizationContext,\n          ...rest,\n        }\n        return (\n          <Card\n            key={rowData.rowId ?? index}\n            propsToPass={propsForCard}\n            type={type}\n          />\n        )\n      })\n    ) : (\n      <></>\n    )\n  }\n\n  const isReleaseCardMediumList =\n    props.type === RELEASE_CARD &&\n    props.releaseCardConfig?.cardSize === 'medium'\n\n  let cardListSx = defaultListSx\n  if (isReleaseCardMediumList) {\n    cardListSx = releaseCardMediumListSx\n  } else if (multiCardList && isMultipleCards) {\n    cardListSx = multiCardListSx\n  }\n\n  return (\n    <Box role=\"list\" sx={cardListSx}>\n      {title && <h2 className=\"SRC-card-overview-title\">{title}</h2>}\n      {!title && unitDescription && (\n        <TotalQueryResults frontText={'Displaying'} />\n      )}\n      {/* ReactCSSTransitionGroup adds css fade in property for cards that come into view */}\n      {cards}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAgCA,IAAM,IAAgB,EAAE,SAAS,QAAQ,GACnC,IAA0B;CAC9B,SAAS;CACT,qBAAqB;CACrB,cAAc;CACd,cAAc;CACd,KAAK;CACL,IAAI;AACN,GACM,IAAkB;CACtB,SAAS;CACT,qBAAqB;CACrB,eAAe;CACf,cAAc;CACd,WAAW;CAEX,qBAAqB,EACnB,QAAQ,WACV;AACF;AAaA,SAAS,EAAK,GAA2C;CACvD,IAAM,EAAE,gBAAa,YAAS;CAC9B,QAAQ,GAAR;EACE,KAAK,GACH,OAAO,kBAAC,GAAD,EAAS,GAAI,EAAc,CAAA;EACpC,KAAK,GACH,OAAO,kBAAC,GAAD,EAAQ,GAAI,EAAc,CAAA;EACnC,KAAK,GACH,OAAO,kBAAC,GAAD,EAAqB,GAAI,EAAc,CAAA;EAChD,KAAK,GACH,OAAO,kBAAC,GAAD,EAAiB,GAAI,EAAc,CAAA;EAC5C,KAAK,GACH,OAAO,kBAAC,GAAD,EAAa,GAAI,EAAc,CAAA;EACxC,SACE,OAAO,kBAAC,OAAD,CAAM,CAAA;CACjB;AACF;AAEA,SAAgB,EAAc,GAA2B;CACvD,IAAM,EACJ,oBACA,SACA,yBAAsB,GACtB,UACA,WACA,kBACA,GAAG,MACD,GACE,EAAE,4BAAyB,EAA6B,GACxD,IAAe,EAAgB,GAC/B,EAAE,MAAM,GAAe,WAAW,MACtC,EAAoB,EAAE,cAAc,GAAK,CAAC,GACtC,IAA4B,EAA6B,GAEzD,IAAkB,EAAO,MACzB,IAAkB,EAAS,SAAS,GAGpC,IAA0B,EAAgC;EAC9D,KAAA,CAFW,EAAO,OAElB;EACA,MAAM;CACR,CAAC;CAMD,IAAI,GACF,OACE,kBAAC,OAAD,EAAA,UAAA,CACG,MAAA,sBAA6B,kBAAC,GAAD,CAAyB,CAAA,GACtD,MAAA,sBAA6B,CAC3B,EAAA,CAAA;CAKT,IAAI,EAAS,WAAW,GAEtB,OAAO,kBAAC,GAAD,CAAuB,CAAA;CAGhC,IAAM,IAAiC,CAAC;CACxC,EAAO,QAAQ,SAAS,GAAS,MAAU;EACzC,EAAO,EAAQ,QAAQ;CACzB,CAAC;CAED,IAAI;CACJ,IAAI,MAAA,oBAA2B;EAG7B,IAAM,IAAmB,GAAe,cAAc,MACpD,MAAM,EAAG,eAAe,EAAe,MACzC,GAAG,MACG,IAAoB,IACtB,EAAO,QAAQ,WAAU,MAAM,EAAG,SAAS,CAAgB,IAC3D;EACJ,IAAI,MAAsB,IACxB,MAAU,MACR,gEACF;EAGF,IACE,kBAAC,GAAD;GAAsB;GAAQ,MAFhB,EAAS,KAAI,MAAM,EAAG,OAAO,EAEP;GAAS,MAAM;EAAmB,CAAA;CAE1E,OAEE,IAAQ,EAAS,SACf,EAAS,KAAK,GAAc,MAiBxB,kBAAC,GAAD;EAEE,aAAa;GAjBf;GACA;GACA;GACA,OAAO,EAAQ;GACf,eAAe,EAAQ;GACvB,MAAM,EAAQ;GACd,eAAe,EAAO;GACtB,cAAc,EAAe;GAC7B,yBAAyB,EAAwB,IAAI;GACrD,SAAS,EAAO;GACF;GACd;GACA,GAAG;EAKY;EACP;CACP,GAHM,EAAQ,SAAS,CAGvB,CAEJ,IAED,kBAAA,GAAA,CAAI,CAAA;CAIR,IAAM,IACJ,EAAM,SAAA,kBACN,EAAM,mBAAmB,aAAa,UAEpC,IAAa;CAOjB,OANI,IACF,IAAa,IACJ,KAAiB,MAC1B,IAAa,IAIb,kBAAC,GAAD;EAAK,MAAK;EAAO,IAAI;YAArB;GACG,KAAS,kBAAC,MAAD;IAAI,WAAU;cAA2B;GAAU,CAAA;GAC5D,CAAC,KAAS,KACT,kBAAC,GAAD,EAAmB,WAAW,aAAe,CAAA;GAG9C;EACE;;AAET"}

package/dist/components/CertificationQuiz/CertificationQuiz.js

@@ -16,7 +16,7 @@ import { Alert as m, AlertTitle as h, Box as g, Button as _, Link as v, Skeleton
 import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
 import { MULTICHOICE_RESPONSE_CONCRETE_TYPE_VALUE as w } from "@sage-bionetworks/synapse-types";
 import { useErrorHandler as T } from "react-error-boundary";
-import { HelpOutlineTwoTone as E } from "@mui/icons-material";
+import E from "@mui/icons-material/HelpOutlineTwoTone";
 import D from "dayjs";
 //#region src/components/CertificationQuiz/CertificationQuiz.tsx
 function O() {

package/dist/components/CertificationQuiz/CertificationQuiz.js.map

@@ -1 +1 @@
-{"version":3,"file":"CertificationQuiz.js","names":[],"sources":["../../../src/components/CertificationQuiz/CertificationQuiz.tsx"],"sourcesContent":["import SynapseClient from '@/synapse-client'\nimport { useGetCurrentUserBundle } from '@/synapse-queries'\nimport {\n  useGetPassingRecord,\n  usePostCertifiedUserTestResponse,\n} from '@/synapse-queries/user/useCertificationQuiz'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { formatDate } from '@/utils/functions/DateFormatter'\nimport { USER_BUNDLE_MASK_IS_CERTIFIED } from '@/utils/SynapseConstants'\nimport { HelpOutlineTwoTone } from '@mui/icons-material'\nimport {\n  Alert,\n  AlertTitle,\n  Box,\n  Button,\n  ButtonProps,\n  Link,\n  Skeleton,\n  Typography,\n} from '@mui/material'\nimport {\n  MULTICHOICE_RESPONSE_CONCRETE_TYPE_VALUE,\n  MultichoiceQuestion,\n  MultichoiceResponse,\n  QuestionResponse,\n  Quiz,\n  QuizResponse,\n} from '@sage-bionetworks/synapse-types'\nimport dayjs from 'dayjs'\nimport { ReactNode, useEffect, useRef, useState } from 'react'\nimport { useErrorHandler } from 'react-error-boundary'\nimport { MarkdownPopover } from '../Markdown/MarkdownPopover'\nimport { SkeletonParagraph, SkeletonTable } from '../Skeleton'\nimport { displayToast } from '../ToastMessage/ToastMessage'\nimport CertificationAnswer from './CertificationAnswer'\n\nfunction CertificationQuiz() {\n  const { accessToken, isAuthenticated } = useSynapseContext()\n  const handleError = useErrorHandler()\n  const [quiz, setQuiz] = useState<Quiz | undefined>()\n  const [isRetakingQuiz, setIsRetakingQuiz] = useState(false)\n  const [questionResponse, setQuestionResponse] = useState<QuestionResponse[]>(\n    [],\n  )\n  const { data: currentUserBundle } = useGetCurrentUserBundle(\n    USER_BUNDLE_MASK_IS_CERTIFIED,\n  )\n  const isCertified = currentUserBundle?.isCertified\n  const userId = currentUserBundle?.userId\n  const { data: passingRecord, isLoading: isLoadingPassingRecord } =\n    useGetPassingRecord(userId, {\n      enabled: userId !== undefined,\n    })\n  const formRef = useRef<HTMLFormElement>(null)\n  const GETTING_STARTED_URL =\n    'https://help.synapse.org/docs/Getting-Started.2055471150.html'\n\n  const getQuiz = async () => {\n    try {\n      setQuiz(await SynapseClient.getCertifyQuiz(accessToken))\n    } catch (err: any) {\n      handleError(err)\n    }\n  }\n\n  const { mutate: postCertifiedUserTestResponse, isPending: isSubmitting } =\n    usePostCertifiedUserTestResponse({\n      onSuccess: () => {\n        setIsRetakingQuiz(false)\n        window.scrollTo(0, 0)\n      },\n      throwOnError: true,\n    })\n  // user is taking the quiz if user is not certified, and either there is no passing record or if the user clicked to retake the quiz\n  const isTakingQuiz = !isCertified && (passingRecord == null || isRetakingQuiz)\n  useEffect(() => {\n    if (isAuthenticated) {\n      getQuiz()\n    }\n  }, [isAuthenticated])\n\n  if (isLoadingPassingRecord || quiz == undefined) {\n    return <CertificationQuizSkeleton />\n  }\n\n  const onUpdateAnswer = (questionIndex: number, answer: number) => {\n    const newState = [\n      ...questionResponse.filter(obj => obj.questionIndex !== questionIndex),\n      {\n        questionIndex,\n        answerIndex: [answer],\n        concreteType: MULTICHOICE_RESPONSE_CONCRETE_TYPE_VALUE,\n      },\n    ]\n    setQuestionResponse(newState)\n  }\n\n  const handleRetakeQuiz = () => {\n    formRef.current?.reset()\n    setIsRetakingQuiz(true)\n    setQuestionResponse([])\n    getQuiz()\n  }\n\n  const handleSubmit = () => {\n    try {\n      if (quiz && quiz.questions.length === questionResponse.length) {\n        const quizResponse: QuizResponse = {\n          quizId: quiz.id,\n          questionResponses: questionResponse,\n        }\n        postCertifiedUserTestResponse(quizResponse)\n      } else {\n        displayToast(\n          'Please answer all of the questions and try again.',\n          'warning',\n        )\n      }\n    } catch (err: any) {\n      displayToast(err.reason as string, 'danger')\n    }\n  }\n\n  const actionButtonConfig = (helpUrl: string) =>\n    helpUrl\n      ? {\n          content: <>More info</>,\n          closePopoverOnClick: true,\n          onClick: () => window.open(helpUrl, '_blank'),\n          color: 'primary' as ButtonProps['color'],\n        }\n      : undefined\n  return (\n    <div>\n      {passingRecord && !isTakingQuiz && (\n        <>\n          {(passingRecord.revokedOn || passingRecord.passed) &&\n            !isCertified && (\n              <Alert severity=\"error\">\n                {!passingRecord.passed && (\n                  <AlertTitle>Certification Revoked</AlertTitle>\n                )}\n                <Typography variant=\"body1\" sx={{ marginTop: '5px' }}>\n                  Your certification was revoked. To become certified, you must{' '}\n                  <Link\n                    href=\"#\"\n                    onClick={e => {\n                      e.preventDefault()\n                      handleRetakeQuiz()\n                    }}\n                  >\n                    retake the quiz\n                  </Link>\n                  .\n                </Typography>\n              </Alert>\n            )}\n          {!passingRecord.passed && !isCertified && (\n            <Alert severity=\"error\">\n              {!passingRecord.passed && <AlertTitle>Quiz Failed</AlertTitle>}\n              <Typography variant=\"body1\" sx={{ marginTop: '5px' }}>\n                Please review the results from the previous attempt, and{' '}\n                <Link\n                  href=\"#\"\n                  onClick={e => {\n                    e.preventDefault()\n                    handleRetakeQuiz()\n                  }}\n                >\n                  retake the quiz\n                </Link>\n                .\n              </Typography>\n            </Alert>\n          )}\n          {passingRecord.passed && isCertified && (\n            <Alert severity=\"success\">\n              <AlertTitle>Quiz Passed</AlertTitle>\n              <Typography variant=\"body1\" sx={{ marginTop: '5px' }}>\n                {`You passed the Synapse Certification Quiz on ${formatDate(\n                  dayjs(passingRecord.passedOn),\n                )}`}\n              </Typography>\n            </Alert>\n          )}\n          <Typography\n            variant=\"sectionTitle\"\n            sx={{ marginTop: '20px', marginBottom: '20px' }}\n          >\n            Score: {passingRecord.score} / {passingRecord.corrections?.length}\n          </Typography>\n        </>\n      )}\n      <div className=\"CertificationQuiz__container\">\n        {quiz && isTakingQuiz && (\n          <>\n            <Button\n              onClick={() => window.open(GETTING_STARTED_URL, '_blank')}\n              className=\"help-button\"\n              color=\"primary\"\n              variant=\"contained\"\n            >\n              <Box sx={{ display: 'flex', alignItems: 'center' }}>\n                <HelpOutlineTwoTone\n                  className=\"HelpButton\"\n                  style={{ marginRight: '4px', color: 'white' }}\n                />\n                <>Help</>\n              </Box>\n            </Button>\n            <Typography variant=\"headline1\" sx={{ marginBottom: '25px' }}>\n              Certified User Quiz\n            </Typography>\n            <Typography variant=\"body1\" sx={{ marginBottom: '15px' }}>\n              Certified users are authorized to use the full Synapse\n              functionality. In order to ensure that users who create content in\n              the system and/or wish to interact more freely within Synapse are\n              familiar with the governance process and Synapse operating\n              procedures when dealing with possibly sensitive data, users must\n              pass a short quiz (approximately 15 minutes) to become Synapse\n              certified.\n            </Typography>\n            <Typography variant=\"body1\" sx={{ marginBottom: '15px' }}>\n              Please answer the following questions to become certified.\n            </Typography>\n            <form ref={formRef} onSubmit={e => e.preventDefault()}>\n              <ol>\n                {quiz?.questions.map(question => {\n                  const isHelp = question.helpText || question.docLink\n                  return (\n                    <li\n                      key={question.questionIndex}\n                      role={question.exclusive ? 'radiogroup' : undefined}\n                    >\n                      <Typography\n                        variant={'headline3'}\n                        dangerouslySetInnerHTML={{ __html: question.prompt }}\n                        sx={{ marginTop: '40px', marginBottom: '10px' }}\n                      />\n                      {question.answers.map(choice => (\n                        <CertificationAnswer\n                          key={`${question.questionIndex}-${choice.answerIndex}`}\n                          question={question}\n                          answer={choice}\n                          onClick={e =>\n                            onUpdateAnswer(\n                              question.questionIndex,\n                              Number(e.currentTarget.value),\n                            )\n                          }\n                        />\n                      ))}\n                      {isHelp && (\n                        <MarkdownPopover\n                          contentProps={{ markdown: question.helpText }}\n                          placement=\"right\"\n                          sx={{\n                            table: {\n                              textAlign: 'center',\n                              th: {\n                                padding: '5px',\n                              },\n                            },\n                          }}\n                          actionButton={actionButtonConfig(question.docLink)}\n                          showCloseButton={true}\n                        >\n                          <Box\n                            sx={{\n                              display: 'flex',\n                              alignItems: 'center',\n                              marginTop: '10px',\n                            }}\n                          >\n                            <HelpOutlineTwoTone\n                              className=\"HelpButton\"\n                              style={{ marginRight: '4px' }}\n                            />\n                            <Link>Need help answering this question?</Link>\n                          </Box>\n                        </MarkdownPopover>\n                      )}\n                    </li>\n                  )\n                })}\n              </ol>\n            </form>\n            <Button\n              className=\"help-button\"\n              color=\"primary\"\n              variant=\"contained\"\n              size=\"large\"\n              disabled={isSubmitting}\n              onClick={() => {\n                handleSubmit()\n              }}\n            >\n              Submit\n            </Button>\n          </>\n        )}\n\n        {!isTakingQuiz && passingRecord?.corrections && (\n          <ol>\n            {passingRecord.corrections.map(responseCorrectness => {\n              const question =\n                responseCorrectness.question as MultichoiceQuestion\n              const response =\n                responseCorrectness.response as MultichoiceResponse\n              return (\n                <li key={question.questionIndex}>\n                  <Typography\n                    variant={'headline3'}\n                    dangerouslySetInnerHTML={{ __html: question.prompt }}\n                    className={\n                      responseCorrectness.isCorrect ? '' : 'incorrectQuestion'\n                    }\n                    sx={{ marginTop: '40px', marginBottom: '10px' }}\n                  />\n                  {question.answers.map(choice => (\n                    <CertificationAnswer\n                      key={`${question.questionIndex}-${choice.answerIndex}`}\n                      question={question}\n                      answer={choice}\n                      disabled={true}\n                      checked={response.answerIndex.includes(\n                        choice.answerIndex,\n                      )}\n                    />\n                  ))}\n                </li>\n              )\n            })}\n          </ol>\n        )}\n      </div>\n    </div>\n  )\n}\n\nfunction CertificationQuizSkeleton() {\n  const questions: ReactNode[] = []\n  for (let i = 0; i < 20; i++) {\n    questions.push(\n      <li key={i}>\n        <SkeletonTable numCols={1} numRows={5} />\n      </li>,\n    )\n  }\n  return (\n    <>\n      <div>\n        <Skeleton height=\"80px\" width=\"460px\" />\n      </div>\n      <SkeletonParagraph numRows={5} />\n      <div className=\"CertificationQuiz__container\">\n        <ol style={{ marginTop: '20px' }}>{questions}</ol>\n      </div>\n    </>\n  )\n}\n\nexport default CertificationQuiz\n"],"mappings":"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"}
+{"version":3,"file":"CertificationQuiz.js","names":[],"sources":["../../../src/components/CertificationQuiz/CertificationQuiz.tsx"],"sourcesContent":["import SynapseClient from '@/synapse-client'\nimport { useGetCurrentUserBundle } from '@/synapse-queries'\nimport {\n  useGetPassingRecord,\n  usePostCertifiedUserTestResponse,\n} from '@/synapse-queries/user/useCertificationQuiz'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { formatDate } from '@/utils/functions/DateFormatter'\nimport { USER_BUNDLE_MASK_IS_CERTIFIED } from '@/utils/SynapseConstants'\nimport HelpOutlineTwoTone from '@mui/icons-material/HelpOutlineTwoTone'\nimport {\n  Alert,\n  AlertTitle,\n  Box,\n  Button,\n  ButtonProps,\n  Link,\n  Skeleton,\n  Typography,\n} from '@mui/material'\nimport {\n  MULTICHOICE_RESPONSE_CONCRETE_TYPE_VALUE,\n  MultichoiceQuestion,\n  MultichoiceResponse,\n  QuestionResponse,\n  Quiz,\n  QuizResponse,\n} from '@sage-bionetworks/synapse-types'\nimport dayjs from 'dayjs'\nimport { ReactNode, useEffect, useRef, useState } from 'react'\nimport { useErrorHandler } from 'react-error-boundary'\nimport { MarkdownPopover } from '../Markdown/MarkdownPopover'\nimport { SkeletonParagraph, SkeletonTable } from '../Skeleton'\nimport { displayToast } from '../ToastMessage/ToastMessage'\nimport CertificationAnswer from './CertificationAnswer'\n\nfunction CertificationQuiz() {\n  const { accessToken, isAuthenticated } = useSynapseContext()\n  const handleError = useErrorHandler()\n  const [quiz, setQuiz] = useState<Quiz | undefined>()\n  const [isRetakingQuiz, setIsRetakingQuiz] = useState(false)\n  const [questionResponse, setQuestionResponse] = useState<QuestionResponse[]>(\n    [],\n  )\n  const { data: currentUserBundle } = useGetCurrentUserBundle(\n    USER_BUNDLE_MASK_IS_CERTIFIED,\n  )\n  const isCertified = currentUserBundle?.isCertified\n  const userId = currentUserBundle?.userId\n  const { data: passingRecord, isLoading: isLoadingPassingRecord } =\n    useGetPassingRecord(userId, {\n      enabled: userId !== undefined,\n    })\n  const formRef = useRef<HTMLFormElement>(null)\n  const GETTING_STARTED_URL =\n    'https://help.synapse.org/docs/Getting-Started.2055471150.html'\n\n  const getQuiz = async () => {\n    try {\n      setQuiz(await SynapseClient.getCertifyQuiz(accessToken))\n    } catch (err: any) {\n      handleError(err)\n    }\n  }\n\n  const { mutate: postCertifiedUserTestResponse, isPending: isSubmitting } =\n    usePostCertifiedUserTestResponse({\n      onSuccess: () => {\n        setIsRetakingQuiz(false)\n        window.scrollTo(0, 0)\n      },\n      throwOnError: true,\n    })\n  // user is taking the quiz if user is not certified, and either there is no passing record or if the user clicked to retake the quiz\n  const isTakingQuiz = !isCertified && (passingRecord == null || isRetakingQuiz)\n  useEffect(() => {\n    if (isAuthenticated) {\n      getQuiz()\n    }\n  }, [isAuthenticated])\n\n  if (isLoadingPassingRecord || quiz == undefined) {\n    return <CertificationQuizSkeleton />\n  }\n\n  const onUpdateAnswer = (questionIndex: number, answer: number) => {\n    const newState = [\n      ...questionResponse.filter(obj => obj.questionIndex !== questionIndex),\n      {\n        questionIndex,\n        answerIndex: [answer],\n        concreteType: MULTICHOICE_RESPONSE_CONCRETE_TYPE_VALUE,\n      },\n    ]\n    setQuestionResponse(newState)\n  }\n\n  const handleRetakeQuiz = () => {\n    formRef.current?.reset()\n    setIsRetakingQuiz(true)\n    setQuestionResponse([])\n    getQuiz()\n  }\n\n  const handleSubmit = () => {\n    try {\n      if (quiz && quiz.questions.length === questionResponse.length) {\n        const quizResponse: QuizResponse = {\n          quizId: quiz.id,\n          questionResponses: questionResponse,\n        }\n        postCertifiedUserTestResponse(quizResponse)\n      } else {\n        displayToast(\n          'Please answer all of the questions and try again.',\n          'warning',\n        )\n      }\n    } catch (err: any) {\n      displayToast(err.reason as string, 'danger')\n    }\n  }\n\n  const actionButtonConfig = (helpUrl: string) =>\n    helpUrl\n      ? {\n          content: <>More info</>,\n          closePopoverOnClick: true,\n          onClick: () => window.open(helpUrl, '_blank'),\n          color: 'primary' as ButtonProps['color'],\n        }\n      : undefined\n  return (\n    <div>\n      {passingRecord && !isTakingQuiz && (\n        <>\n          {(passingRecord.revokedOn || passingRecord.passed) &&\n            !isCertified && (\n              <Alert severity=\"error\">\n                {!passingRecord.passed && (\n                  <AlertTitle>Certification Revoked</AlertTitle>\n                )}\n                <Typography variant=\"body1\" sx={{ marginTop: '5px' }}>\n                  Your certification was revoked. To become certified, you must{' '}\n                  <Link\n                    href=\"#\"\n                    onClick={e => {\n                      e.preventDefault()\n                      handleRetakeQuiz()\n                    }}\n                  >\n                    retake the quiz\n                  </Link>\n                  .\n                </Typography>\n              </Alert>\n            )}\n          {!passingRecord.passed && !isCertified && (\n            <Alert severity=\"error\">\n              {!passingRecord.passed && <AlertTitle>Quiz Failed</AlertTitle>}\n              <Typography variant=\"body1\" sx={{ marginTop: '5px' }}>\n                Please review the results from the previous attempt, and{' '}\n                <Link\n                  href=\"#\"\n                  onClick={e => {\n                    e.preventDefault()\n                    handleRetakeQuiz()\n                  }}\n                >\n                  retake the quiz\n                </Link>\n                .\n              </Typography>\n            </Alert>\n          )}\n          {passingRecord.passed && isCertified && (\n            <Alert severity=\"success\">\n              <AlertTitle>Quiz Passed</AlertTitle>\n              <Typography variant=\"body1\" sx={{ marginTop: '5px' }}>\n                {`You passed the Synapse Certification Quiz on ${formatDate(\n                  dayjs(passingRecord.passedOn),\n                )}`}\n              </Typography>\n            </Alert>\n          )}\n          <Typography\n            variant=\"sectionTitle\"\n            sx={{ marginTop: '20px', marginBottom: '20px' }}\n          >\n            Score: {passingRecord.score} / {passingRecord.corrections?.length}\n          </Typography>\n        </>\n      )}\n      <div className=\"CertificationQuiz__container\">\n        {quiz && isTakingQuiz && (\n          <>\n            <Button\n              onClick={() => window.open(GETTING_STARTED_URL, '_blank')}\n              className=\"help-button\"\n              color=\"primary\"\n              variant=\"contained\"\n            >\n              <Box sx={{ display: 'flex', alignItems: 'center' }}>\n                <HelpOutlineTwoTone\n                  className=\"HelpButton\"\n                  style={{ marginRight: '4px', color: 'white' }}\n                />\n                <>Help</>\n              </Box>\n            </Button>\n            <Typography variant=\"headline1\" sx={{ marginBottom: '25px' }}>\n              Certified User Quiz\n            </Typography>\n            <Typography variant=\"body1\" sx={{ marginBottom: '15px' }}>\n              Certified users are authorized to use the full Synapse\n              functionality. In order to ensure that users who create content in\n              the system and/or wish to interact more freely within Synapse are\n              familiar with the governance process and Synapse operating\n              procedures when dealing with possibly sensitive data, users must\n              pass a short quiz (approximately 15 minutes) to become Synapse\n              certified.\n            </Typography>\n            <Typography variant=\"body1\" sx={{ marginBottom: '15px' }}>\n              Please answer the following questions to become certified.\n            </Typography>\n            <form ref={formRef} onSubmit={e => e.preventDefault()}>\n              <ol>\n                {quiz?.questions.map(question => {\n                  const isHelp = question.helpText || question.docLink\n                  return (\n                    <li\n                      key={question.questionIndex}\n                      role={question.exclusive ? 'radiogroup' : undefined}\n                    >\n                      <Typography\n                        variant={'headline3'}\n                        dangerouslySetInnerHTML={{ __html: question.prompt }}\n                        sx={{ marginTop: '40px', marginBottom: '10px' }}\n                      />\n                      {question.answers.map(choice => (\n                        <CertificationAnswer\n                          key={`${question.questionIndex}-${choice.answerIndex}`}\n                          question={question}\n                          answer={choice}\n                          onClick={e =>\n                            onUpdateAnswer(\n                              question.questionIndex,\n                              Number(e.currentTarget.value),\n                            )\n                          }\n                        />\n                      ))}\n                      {isHelp && (\n                        <MarkdownPopover\n                          contentProps={{ markdown: question.helpText }}\n                          placement=\"right\"\n                          sx={{\n                            table: {\n                              textAlign: 'center',\n                              th: {\n                                padding: '5px',\n                              },\n                            },\n                          }}\n                          actionButton={actionButtonConfig(question.docLink)}\n                          showCloseButton={true}\n                        >\n                          <Box\n                            sx={{\n                              display: 'flex',\n                              alignItems: 'center',\n                              marginTop: '10px',\n                            }}\n                          >\n                            <HelpOutlineTwoTone\n                              className=\"HelpButton\"\n                              style={{ marginRight: '4px' }}\n                            />\n                            <Link>Need help answering this question?</Link>\n                          </Box>\n                        </MarkdownPopover>\n                      )}\n                    </li>\n                  )\n                })}\n              </ol>\n            </form>\n            <Button\n              className=\"help-button\"\n              color=\"primary\"\n              variant=\"contained\"\n              size=\"large\"\n              disabled={isSubmitting}\n              onClick={() => {\n                handleSubmit()\n              }}\n            >\n              Submit\n            </Button>\n          </>\n        )}\n\n        {!isTakingQuiz && passingRecord?.corrections && (\n          <ol>\n            {passingRecord.corrections.map(responseCorrectness => {\n              const question =\n                responseCorrectness.question as MultichoiceQuestion\n              const response =\n                responseCorrectness.response as MultichoiceResponse\n              return (\n                <li key={question.questionIndex}>\n                  <Typography\n                    variant={'headline3'}\n                    dangerouslySetInnerHTML={{ __html: question.prompt }}\n                    className={\n                      responseCorrectness.isCorrect ? '' : 'incorrectQuestion'\n                    }\n                    sx={{ marginTop: '40px', marginBottom: '10px' }}\n                  />\n                  {question.answers.map(choice => (\n                    <CertificationAnswer\n                      key={`${question.questionIndex}-${choice.answerIndex}`}\n                      question={question}\n                      answer={choice}\n                      disabled={true}\n                      checked={response.answerIndex.includes(\n                        choice.answerIndex,\n                      )}\n                    />\n                  ))}\n                </li>\n              )\n            })}\n          </ol>\n        )}\n      </div>\n    </div>\n  )\n}\n\nfunction CertificationQuizSkeleton() {\n  const questions: ReactNode[] = []\n  for (let i = 0; i < 20; i++) {\n    questions.push(\n      <li key={i}>\n        <SkeletonTable numCols={1} numRows={5} />\n      </li>,\n    )\n  }\n  return (\n    <>\n      <div>\n        <Skeleton height=\"80px\" width=\"460px\" />\n      </div>\n      <SkeletonParagraph numRows={5} />\n      <div className=\"CertificationQuiz__container\">\n        <ol style={{ marginTop: '20px' }}>{questions}</ol>\n      </div>\n    </>\n  )\n}\n\nexport default CertificationQuiz\n"],"mappings":"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"}

package/dist/components/ChallengeRequirementsModal/ChallengeRequirementsModal.js

@@ -33,7 +33,7 @@ function y(y) {
 		P,
 		B,
 		L
-	].filter((e) => !!e), G = "Next Step";
+	].filter((e) => e != null), G = "Next Step";
 	return I && (G = "Registering..."), d(W) ? !j || !b ? /* @__PURE__ */ g(h, {}) : /* @__PURE__ */ g(l, {
 		dialogTitle: "Challenge Registration (Step 1 of 2): Terms and Conditions",
 		subjectId: j,

package/dist/components/ChallengeRequirementsModal/ChallengeRequirementsModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChallengeRequirementsModal.js","names":[],"sources":["../../../src/components/ChallengeRequirementsModal/ChallengeRequirementsModal.tsx"],"sourcesContent":["import {\n  useGetAccessRequirementsForTeam,\n  useGetAccessRequirementStatuses,\n  useGetCurrentUserProfile,\n  useGetEntity,\n  useGetEntityChallenge,\n} from '@/synapse-queries'\nimport {\n  useAddMemberToTeam,\n  useGetMembershipStatus,\n} from '@/synapse-queries/team/useTeamMembers'\nimport { SynapseClientError, useSynapseContext } from '@/utils'\nimport { Alert, Button, Typography } from '@mui/material'\nimport { RestrictableObjectType } from '@sage-bionetworks/synapse-types'\nimport { isEmpty } from 'lodash-es'\nimport { useCallback } from 'react'\nimport AccessRequirementList from '../AccessRequirementList/AccessRequirementList'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\n\nexport type ChallengeRequirementsModalProps = {\n  open: boolean\n  projectId: string\n  onCancel: () => void\n  onRegisterComplete: () => void\n}\n\n/**\n * The challenge requirements modal will\n *  1. Display the access requirements that must be accepted to join a participant team. The component will guide the user through meeting the requirements.\n *  2. If the user has accepted the requirements, the user can click 'Register' to join the team\n *     If the user has not accepted the requirements, the user cannot register for the challenge.\n */\nexport default function ChallengeRequirementsModal(\n  props: ChallengeRequirementsModalProps,\n) {\n  const { open, projectId, onRegisterComplete, onCancel } = props\n  const { data: project, error: getEntityError } = useGetEntity(projectId)\n\n  const { isAuthenticated } = useSynapseContext()\n\n  const { data: challenge, error: getChallengeError } =\n    useGetEntityChallenge(projectId)\n  const { data: userProfile, error: getProfileError } =\n    useGetCurrentUserProfile({\n      enabled: isAuthenticated,\n    })\n\n  const participantTeamId = challenge?.participantTeamId\n  const userId = userProfile?.ownerId\n\n  const { data: teamMembershipStatus, error: getMembershipStatusError } =\n    useGetMembershipStatus(participantTeamId!, userId!, {\n      enabled: Boolean(participantTeamId && userId),\n    })\n\n  const {\n    mutateAsync: addTeamMember,\n    isPending: registrationIsPending,\n    error: registrationError,\n  } = useAddMemberToTeam()\n\n  const {\n    data: fetchedRequirementsForTeam,\n    isSuccess: hasFetchedRequirements,\n    error: getAccessRequirementsError,\n  } = useGetAccessRequirementsForTeam(challenge?.participantTeamId!, {\n    enabled: Boolean(challenge?.participantTeamId),\n  })\n\n  const requirementStatusesQueryResults = useGetAccessRequirementStatuses(\n    fetchedRequirementsForTeam?.map(ar => String(ar.id)) ?? [],\n  )\n\n  const meetsAllRequirements =\n    hasFetchedRequirements &&\n    requirementStatusesQueryResults.every(queryResult => {\n      return queryResult.status === 'success' && queryResult.data.isApproved\n    })\n\n  const registerForChallenge = useCallback(async () => {\n    if (participantTeamId && userId && !teamMembershipStatus?.isMember) {\n      await addTeamMember({\n        teamId: participantTeamId,\n        userId,\n      })\n    }\n    onRegisterComplete()\n  }, [\n    addTeamMember,\n    onRegisterComplete,\n    participantTeamId,\n    teamMembershipStatus?.isMember,\n    userId,\n  ])\n\n  const errors = [\n    getEntityError,\n    getChallengeError,\n    getProfileError,\n    getMembershipStatusError,\n    getAccessRequirementsError,\n    registrationError,\n  ].filter((e): e is SynapseClientError => Boolean(e))\n\n  // It's possible that the user joined the team, but requirements on the team changed since they became a member\n  // They do not need to re-join the team, but they should still be prompted to accept the requirements\n  let registerButtonText = 'Next Step'\n  if (registrationIsPending) {\n    registerButtonText = 'Registering...'\n  }\n\n  if (!isEmpty(errors)) {\n    return (\n      <Alert severity=\"error\">\n        {errors.map((e, index) => (\n          <Typography variant={'body1'} key={index}>\n            {e.reason}\n          </Typography>\n        ))}\n      </Alert>\n    )\n  }\n\n  if (!participantTeamId || !open) {\n    return <></>\n  }\n\n  return (\n    <AccessRequirementList\n      dialogTitle={`Challenge Registration (Step 1 of 2): Terms and Conditions`}\n      subjectId={participantTeamId}\n      subjectType={RestrictableObjectType.TEAM}\n      teamId={challenge?.participantTeamId}\n      renderAsModal={true}\n      requestObjectName={project?.name}\n      onHide={() => {\n        onCancel()\n      }}\n      customDialogActions={\n        <>\n          <Button variant={'outlined'} onClick={onCancel}>\n            Cancel\n          </Button>\n          <Button\n            variant={'contained'}\n            onClick={() => {\n              registerForChallenge()\n            }}\n            startIcon={registrationIsPending ? <SynapseSpinner /> : undefined}\n            disabled={!meetsAllRequirements || registrationIsPending}\n          >\n            {registerButtonText}\n          </Button>\n        </>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,SAAM,cAAW,uBAAoB,gBAAa,GACpD,EAAE,MAAM,GAAS,OAAO,MAAmB,EAAa,CAAS,GAEjE,EAAE,uBAAoB,EAAkB,GAExC,EAAE,MAAM,GAAW,OAAO,MAC9B,EAAsB,CAAS,GAC3B,EAAE,MAAM,GAAa,OAAO,MAChC,EAAyB,EACvB,SAAS,EACX,CAAC,GAEG,IAAoB,GAAW,mBAC/B,IAAS,GAAa,SAEtB,EAAE,MAAM,GAAsB,OAAO,MACzC,EAAuB,GAAoB,GAAS,EAClD,SAAS,GAAQ,KAAqB,GACxC,CAAC,GAEG,EACJ,aAAa,GACb,WAAW,GACX,OAAO,MACL,EAAmB,GAEjB,EACJ,MAAM,GACN,WAAW,GACX,OAAO,MACL,EAAgC,GAAW,mBAAoB,EACjE,SAAS,EAAQ,GAAW,kBAC9B,CAAC,GAEK,IAAkC,EACtC,GAA4B,KAAI,MAAM,OAAO,EAAG,EAAE,CAAC,KAAK,CAAC,CAC3D,GAEM,IACJ,KACA,EAAgC,OAAM,MAC7B,EAAY,WAAW,aAAa,EAAY,KAAK,UAC7D,GAEG,IAAuB,EAAY,YAAY;EAOnD,AANI,KAAqB,KAAU,CAAC,GAAsB,YACxD,MAAM,EAAc;GAClB,QAAQ;GACR;EACF,CAAC,GAEH,EAAmB;CACrB,GAAG;EACD;EACA;EACA;EACA,GAAsB;EACtB;CACF,CAAC,GAEK,IAAS;EACb;EACA;EACA;EACA;EACA;EACA;CACF,EAAE,QAAQ,MAA+B,EAAQ,CAAE,GAI/C,IAAqB;CAqBzB,OApBI,MACF,IAAqB,mBAGlB,EAAQ,CAAM,IAYf,CAAC,KAAqB,CAAC,IAClB,kBAAA,GAAA,CAAI,CAAA,IAIX,kBAAC,GAAD;EACE,aAAa;EACb,WAAW;EACX,aAAa,EAAuB;EACpC,QAAQ,GAAW;EACnB,eAAe;EACf,mBAAmB,GAAS;EAC5B,cAAc;GACZ,EAAS;EACX;EACA,qBACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GAAQ,SAAS;GAAY,SAAS;aAAU;EAExC,CAAA,GACR,kBAAC,GAAD;GACE,SAAS;GACT,eAAe;IACb,EAAqB;GACvB;GACA,WAAW,IAAwB,kBAAC,GAAD,CAAiB,CAAA,IAAI,KAAA;GACxD,UAAU,CAAC,KAAwB;aAElC;EACK,CAAA,CACR,EAAA,CAAA;CAEL,CAAA,IA1CC,kBAAC,GAAD;EAAO,UAAS;YACb,EAAO,KAAK,GAAG,MACd,kBAAC,GAAD;GAAY,SAAS;aAClB,EAAE;EACO,GAFuB,CAEvB,CACb;CACI,CAAA;AAsCb"}
+{"version":3,"file":"ChallengeRequirementsModal.js","names":[],"sources":["../../../src/components/ChallengeRequirementsModal/ChallengeRequirementsModal.tsx"],"sourcesContent":["import {\n  useGetAccessRequirementsForTeam,\n  useGetAccessRequirementStatuses,\n  useGetCurrentUserProfile,\n  useGetEntity,\n  useGetEntityChallenge,\n} from '@/synapse-queries'\nimport {\n  useAddMemberToTeam,\n  useGetMembershipStatus,\n} from '@/synapse-queries/team/useTeamMembers'\nimport { SynapseClientError, useSynapseContext } from '@/utils'\nimport { Alert, Button, Typography } from '@mui/material'\nimport { RestrictableObjectType } from '@sage-bionetworks/synapse-types'\nimport { isEmpty } from 'lodash-es'\nimport { useCallback } from 'react'\nimport AccessRequirementList from '../AccessRequirementList/AccessRequirementList'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\n\nexport type ChallengeRequirementsModalProps = {\n  open: boolean\n  projectId: string\n  onCancel: () => void\n  onRegisterComplete: () => void\n}\n\n/**\n * The challenge requirements modal will\n *  1. Display the access requirements that must be accepted to join a participant team. The component will guide the user through meeting the requirements.\n *  2. If the user has accepted the requirements, the user can click 'Register' to join the team\n *     If the user has not accepted the requirements, the user cannot register for the challenge.\n */\nexport default function ChallengeRequirementsModal(\n  props: ChallengeRequirementsModalProps,\n) {\n  const { open, projectId, onRegisterComplete, onCancel } = props\n  const { data: project, error: getEntityError } = useGetEntity(projectId)\n\n  const { isAuthenticated } = useSynapseContext()\n\n  const { data: challenge, error: getChallengeError } =\n    useGetEntityChallenge(projectId)\n  const { data: userProfile, error: getProfileError } =\n    useGetCurrentUserProfile({\n      enabled: isAuthenticated,\n    })\n\n  const participantTeamId = challenge?.participantTeamId\n  const userId = userProfile?.ownerId\n\n  const { data: teamMembershipStatus, error: getMembershipStatusError } =\n    useGetMembershipStatus(participantTeamId!, userId!, {\n      enabled: Boolean(participantTeamId && userId),\n    })\n\n  const {\n    mutateAsync: addTeamMember,\n    isPending: registrationIsPending,\n    error: registrationError,\n  } = useAddMemberToTeam()\n\n  const {\n    data: fetchedRequirementsForTeam,\n    isSuccess: hasFetchedRequirements,\n    error: getAccessRequirementsError,\n  } = useGetAccessRequirementsForTeam(challenge?.participantTeamId!, {\n    enabled: Boolean(challenge?.participantTeamId),\n  })\n\n  const requirementStatusesQueryResults = useGetAccessRequirementStatuses(\n    fetchedRequirementsForTeam?.map(ar => String(ar.id)) ?? [],\n  )\n\n  const meetsAllRequirements =\n    hasFetchedRequirements &&\n    requirementStatusesQueryResults.every(queryResult => {\n      return queryResult.status === 'success' && queryResult.data.isApproved\n    })\n\n  const registerForChallenge = useCallback(async () => {\n    if (participantTeamId && userId && !teamMembershipStatus?.isMember) {\n      await addTeamMember({\n        teamId: participantTeamId,\n        userId,\n      })\n    }\n    onRegisterComplete()\n  }, [\n    addTeamMember,\n    onRegisterComplete,\n    participantTeamId,\n    teamMembershipStatus?.isMember,\n    userId,\n  ])\n\n  const errors = [\n    getEntityError,\n    getChallengeError,\n    getProfileError,\n    getMembershipStatusError,\n    getAccessRequirementsError,\n    registrationError,\n  ].filter((e): e is SynapseClientError => e != null)\n\n  // It's possible that the user joined the team, but requirements on the team changed since they became a member\n  // They do not need to re-join the team, but they should still be prompted to accept the requirements\n  let registerButtonText = 'Next Step'\n  if (registrationIsPending) {\n    registerButtonText = 'Registering...'\n  }\n\n  if (!isEmpty(errors)) {\n    return (\n      <Alert severity=\"error\">\n        {errors.map((e, index) => (\n          <Typography variant={'body1'} key={index}>\n            {e.reason}\n          </Typography>\n        ))}\n      </Alert>\n    )\n  }\n\n  if (!participantTeamId || !open) {\n    return <></>\n  }\n\n  return (\n    <AccessRequirementList\n      dialogTitle={`Challenge Registration (Step 1 of 2): Terms and Conditions`}\n      subjectId={participantTeamId}\n      subjectType={RestrictableObjectType.TEAM}\n      teamId={challenge?.participantTeamId}\n      renderAsModal={true}\n      requestObjectName={project?.name}\n      onHide={() => {\n        onCancel()\n      }}\n      customDialogActions={\n        <>\n          <Button variant={'outlined'} onClick={onCancel}>\n            Cancel\n          </Button>\n          <Button\n            variant={'contained'}\n            onClick={() => {\n              registerForChallenge()\n            }}\n            startIcon={registrationIsPending ? <SynapseSpinner /> : undefined}\n            disabled={!meetsAllRequirements || registrationIsPending}\n          >\n            {registerButtonText}\n          </Button>\n        </>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,SAAM,cAAW,uBAAoB,gBAAa,GACpD,EAAE,MAAM,GAAS,OAAO,MAAmB,EAAa,CAAS,GAEjE,EAAE,uBAAoB,EAAkB,GAExC,EAAE,MAAM,GAAW,OAAO,MAC9B,EAAsB,CAAS,GAC3B,EAAE,MAAM,GAAa,OAAO,MAChC,EAAyB,EACvB,SAAS,EACX,CAAC,GAEG,IAAoB,GAAW,mBAC/B,IAAS,GAAa,SAEtB,EAAE,MAAM,GAAsB,OAAO,MACzC,EAAuB,GAAoB,GAAS,EAClD,SAAS,GAAQ,KAAqB,GACxC,CAAC,GAEG,EACJ,aAAa,GACb,WAAW,GACX,OAAO,MACL,EAAmB,GAEjB,EACJ,MAAM,GACN,WAAW,GACX,OAAO,MACL,EAAgC,GAAW,mBAAoB,EACjE,SAAS,EAAQ,GAAW,kBAC9B,CAAC,GAEK,IAAkC,EACtC,GAA4B,KAAI,MAAM,OAAO,EAAG,EAAE,CAAC,KAAK,CAAC,CAC3D,GAEM,IACJ,KACA,EAAgC,OAAM,MAC7B,EAAY,WAAW,aAAa,EAAY,KAAK,UAC7D,GAEG,IAAuB,EAAY,YAAY;EAOnD,AANI,KAAqB,KAAU,CAAC,GAAsB,YACxD,MAAM,EAAc;GAClB,QAAQ;GACR;EACF,CAAC,GAEH,EAAmB;CACrB,GAAG;EACD;EACA;EACA;EACA,GAAsB;EACtB;CACF,CAAC,GAEK,IAAS;EACb;EACA;EACA;EACA;EACA;EACA;CACF,EAAE,QAAQ,MAA+B,KAAK,IAAI,GAI9C,IAAqB;CAqBzB,OApBI,MACF,IAAqB,mBAGlB,EAAQ,CAAM,IAYf,CAAC,KAAqB,CAAC,IAClB,kBAAA,GAAA,CAAI,CAAA,IAIX,kBAAC,GAAD;EACE,aAAa;EACb,WAAW;EACX,aAAa,EAAuB;EACpC,QAAQ,GAAW;EACnB,eAAe;EACf,mBAAmB,GAAS;EAC5B,cAAc;GACZ,EAAS;EACX;EACA,qBACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GAAQ,SAAS;GAAY,SAAS;aAAU;EAExC,CAAA,GACR,kBAAC,GAAD;GACE,SAAS;GACT,eAAe;IACb,EAAqB;GACvB;GACA,WAAW,IAAwB,kBAAC,GAAD,CAAiB,CAAA,IAAI,KAAA;GACxD,UAAU,CAAC,KAAwB;aAElC;EACK,CAAA,CACR,EAAA,CAAA;CAEL,CAAA,IA1CC,kBAAC,GAAD;EAAO,UAAS;YACb,EAAO,KAAK,GAAG,MACd,kBAAC,GAAD;GAAY,SAAS;aAClB,EAAE;EACO,GAFuB,CAEvB,CACb;CACI,CAAA;AAsCb"}

package/dist/components/ChallengeSubmission/AvailableEvaluationQueueList.js

@@ -4,7 +4,7 @@ import { useEffect as n, useState as r } from "react";
 import { noop as i } from "lodash-es";
 import { Autocomplete as a, Box as o, Button as s, Collapse as c, List as l, ListItem as u, MenuItem as d, TextField as f, Typography as p } from "@mui/material";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
-import { HelpOutlineTwoTone as _ } from "@mui/icons-material";
+import _ from "@mui/icons-material/HelpOutlineTwoTone";
 //#region src/components/ChallengeSubmission/AvailableEvaluationQueueList.tsx
 function v(n) {
 	let { text: r, tooltipMarkdownText: i } = n;