synapse-react-client 4.0.22 → 4.0.23

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnumFacetFilterUI.js","names":[],"sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.tsx"],"sourcesContent":["import {\n  Checkbox,\n  Collapse,\n  FormControlLabel,\n  IconButton,\n  TextField,\n  Tooltip,\n} from '@mui/material'\nimport { useMemo, useRef, useState } from 'react'\nimport { FacetColumnResultValueCount } from '@sage-bionetworks/synapse-types'\nimport IconSvg from '../../../IconSvg/IconSvg'\nimport { FacetFilterHeader } from '../FacetFilterHeader'\nimport { EnumFacetFilterOption } from './EnumFacetFilterOption'\nimport EnumFacetFilterDropdown from './EnumFacetFilterDropdown'\nimport { SetOptional } from 'type-fest'\n\nconst MAX_ENUMERATION_VALUES_TO_SHOW = 5\n\nexport type RenderedFacetValue<TValue = string> = Omit<\n  SetOptional<FacetColumnResultValueCount, 'count'>,\n  'value'\n> & {\n  value: TValue\n  /* Text displayed for the option, and also used to filter in search */\n  displayText: string\n}\n\nexport type EnumFacetFilterUIProps<TValue = string> = {\n  /* The ID of the corresponding label, for testing and accessibility */\n  labelId?: string\n  /* The title of the faceted column to be displayed */\n  facetTitle: string\n  /* List of all facet values and information associated with each value */\n  facetValues: RenderedFacetValue<TValue>[]\n  /* Determines how the component is styled and whether the 'All' checkbox should be selected. */\n  filterIsActive: boolean // filterIsActive cannot be derived from facetValues[*].isSelected. See PORTALS-2680\n  /* The EnumFacetFilter can be rendered as a collapsible panel or a dropdown. Default is `'Collapsible'` */\n  containerAs?: 'Collapsible' | 'Dropdown'\n  /* If `containerAs` is a dropdown, the dropdown can be either an IconButton or a SelectBox. Default is `'Icon'` */\n  dropdownType?: 'Icon' | 'SelectBox'\n  /* If true, hides the button to collapse the panel (only shown if `containerAs` is 'Collapsible'). Default is false.*/\n  hideCollapsible?: boolean\n  /* Called when an unselected value is selected */\n  onAddValueToSelection: (value: TValue) => void\n  /* Called when a selected value is unselected */\n  onRemoveValueFromSelection: (value: TValue) => void\n  /* Called when all values should be unselected (e.g. 'All' is clicked) */\n  onRemoveAllFacetSelections: () => void\n  /* Called when an value is hovered over */\n  onHoverOverValue: (value: TValue) => void\n  /* Set to true if multiple values can be selected for the filter */\n  canMultiSelect: boolean\n  /* By default, all values are not shown (defaultShowAllValues = false) */\n  defaultShowAllValues?: boolean\n}\n\nfunction removeWhitespace(value: string): string {\n  return value.replace(/\\s/g, '').toLowerCase()\n}\n\nexport default function EnumFacetFilterUI<TValue = string>(\n  props: EnumFacetFilterUIProps<TValue>,\n) {\n  const {\n    labelId,\n    filterIsActive,\n    containerAs = 'Collapsible',\n    dropdownType = 'Icon',\n    hideCollapsible = false,\n    facetValues,\n    onAddValueToSelection,\n    onRemoveValueFromSelection,\n    facetTitle,\n    onRemoveAllFacetSelections,\n    onHoverOverValue,\n    canMultiSelect = true,\n    defaultShowAllValues = false,\n  } = props\n  const [toggleShowAll, setToggleShowAll] =\n    useState<boolean>(defaultShowAllValues)\n  const [isCollapsed, setIsCollapsed] = useState<boolean>(false)\n  const [showSearch, setShowSearch] = useState<boolean>(false)\n  const [searchTerm, setSearchText] = useState<string>('')\n\n  // e.g. we show a subset of facet values before hiding the rest behind \"Show More\"\n  // If the user has selected a value that would normally be hidden, always show all of the values\n  const valueIndexedGreaterThanMaxToShowIsSelected =\n    facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW &&\n    facetValues\n      .slice(MAX_ENUMERATION_VALUES_TO_SHOW)\n      .some(({ isSelected }) => isSelected)\n  const showAll =\n    containerAs === 'Dropdown' ||\n    toggleShowAll ||\n    showSearch ||\n    valueIndexedGreaterThanMaxToShowIsSelected\n\n  const facetValuesToShow = useMemo(() => {\n    if (showSearch && searchTerm.length > 0) {\n      return facetValues.filter(({ displayText }) => {\n        return (\n          displayText.toLowerCase().indexOf(searchTerm.trim().toLowerCase()) >\n          -1\n        )\n      })\n    }\n    if (showAll) {\n      return facetValues\n    }\n    return facetValues.slice(0, MAX_ENUMERATION_VALUES_TO_SHOW)\n  }, [facetValues, searchTerm, showSearch, showAll])\n\n  const textInput = useRef<HTMLInputElement>(null)\n\n  const isDropdown = containerAs === 'Dropdown'\n  const showMoreButtonIsVisible =\n    !showAll && facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW\n  const showLessButtonIsVisible =\n    showAll &&\n    !searchTerm &&\n    !valueIndexedGreaterThanMaxToShowIsSelected &&\n    facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW\n\n  const content = (\n    <div className={isDropdown ? 'EnumFacetFilter__dropdown_menu' : ''}>\n      <div className=\"EnumFacetFilter__checkboxContainer--forAll\">\n        <TextField // Search Filter Text\n          sx={{\n            display: showSearch ? undefined : 'none',\n          }}\n          size={'small'}\n          fullWidth={true}\n          slotProps={{\n            input: {\n              startAdornment: (\n                <Tooltip title={'Close search'}>\n                  <IconButton\n                    size={'small'}\n                    onClick={() => {\n                      setShowSearch(false)\n                      setToggleShowAll(defaultShowAllValues)\n                    }}\n                  >\n                    <IconSvg\n                      sx={{ fontSize: 'inherit' }}\n                      wrap={false}\n                      icon=\"arrowBack\"\n                    />\n                  </IconButton>\n                </Tooltip>\n              ),\n              endAdornment: searchTerm.length > 0 && (\n                <Tooltip title={'Clear'}>\n                  <IconButton\n                    size={'small'}\n                    onClick={() => {\n                      setSearchText('')\n                      textInput.current?.focus()\n                    }}\n                  >\n                    <IconSvg\n                      sx={{ fontSize: 'inherit' }}\n                      wrap={false}\n                      icon=\"close\"\n                    />\n                  </IconButton>\n                </Tooltip>\n              ),\n            },\n          }}\n          type=\"text\"\n          placeholder=\"Find values\"\n          value={searchTerm}\n          ref={textInput}\n          onChange={e => {\n            setSearchText(e.target.value)\n          }}\n        />\n        {!showSearch && (\n          <div className=\"EnumFacetFilter__checkAll\">\n            <FormControlLabel\n              control={<Checkbox />}\n              className=\"EnumFacetFilter__checkbox\"\n              onChange={() => {\n                if (filterIsActive) {\n                  onRemoveAllFacetSelections()\n                }\n              }}\n              key=\"select_all\"\n              checked={!filterIsActive}\n              label=\"All\"\n            />\n            <Tooltip title={'Search'}>\n              <IconButton\n                size={'small'}\n                sx={{ aspectRatio: '1 / 1' }}\n                onClick={() => {\n                  setSearchText('')\n                  setShowSearch(true)\n                  textInput.current?.focus()\n                }}\n              >\n                <IconSvg\n                  sx={{ fontSize: 'inherit' }}\n                  wrap={false}\n                  icon=\"search\"\n                />\n              </IconButton>\n            </Tooltip>\n          </div>\n        )}\n      </div>\n      <div>\n        {facetValuesToShow.map((facetValueAndCount, index: number) => {\n          const { isSelected, displayText, value, count } = facetValueAndCount\n\n          return (\n            <EnumFacetFilterOption\n              key={String(value)}\n              id={[\n                removeWhitespace(facetTitle),\n                removeWhitespace(String(value)),\n                index,\n              ].join('-')}\n              label={displayText}\n              count={count}\n              isDropdown={isDropdown}\n              checked={isSelected}\n              onHover={() => {\n                onHoverOverValue(value)\n              }}\n              onChange={(newIsSelected: boolean) => {\n                if (newIsSelected) {\n                  onAddValueToSelection(value)\n                } else {\n                  onRemoveValueFromSelection(value)\n                }\n              }}\n              inputType={canMultiSelect ? 'checkbox' : 'radio'}\n            />\n          )\n        })}\n        {!isDropdown && (\n          <>\n            {showMoreButtonIsVisible && (\n              <button\n                className=\"EnumFacetFilter__showMoreFacetsBtn\"\n                onClick={() => setToggleShowAll(true)}\n              >\n                <div className=\"EnumFacetFilter__checkboxContainer\">\n                  <div className=\"EnumFacetFilter__showMoreFacetsLabel\">\n                    Show all ({facetValues.length})\n                  </div>\n                </div>\n              </button>\n            )}\n            {showLessButtonIsVisible && (\n              <button\n                className=\"EnumFacetFilter__showMoreFacetsBtn\"\n                onClick={() => setToggleShowAll(false)}\n              >\n                <div className=\"EnumFacetFilter__checkboxContainer\">\n                  <div className=\"EnumFacetFilter__showMoreFacetsLabel\">\n                    Show less\n                  </div>\n                </div>\n              </button>\n            )}\n          </>\n        )}\n        {facetValuesToShow.length <= 0 && (\n          <div className=\"EnumFacetFilter__noMatch\">No match found</div>\n        )}\n      </div>\n    </div>\n  )\n\n  const menuText = useMemo(() => {\n    if (!filterIsActive) {\n      return 'All'\n    } else if (\n      filterIsActive &&\n      facetValuesToShow.filter(item => item.isSelected).length === 1\n    ) {\n      return facetValuesToShow.filter(item => item.isSelected)[0].displayText\n    } else {\n      return 'Multiple Values Selected'\n    }\n  }, [filterIsActive, facetValuesToShow])\n\n  if (isDropdown) {\n    return (\n      <EnumFacetFilterDropdown\n        facetTitle={facetTitle}\n        dropdownType={dropdownType}\n        menuText={menuText}\n        filterIsActive={filterIsActive}\n        labelId={labelId}\n      >\n        {content}\n      </EnumFacetFilterDropdown>\n    )\n  } else {\n    return (\n      <>\n        <FacetFilterHeader\n          hideCollapsible={hideCollapsible}\n          isCollapsed={isCollapsed}\n          label={facetTitle}\n          onClick={(isCollapsed: boolean) => setIsCollapsed(isCollapsed)}\n        />\n        <Collapse className=\"EnumFacetFilter\" in={!isCollapsed}>\n          {content}\n        </Collapse>\n      </>\n    )\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"EnumFacetFilterUI.js","names":[],"sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.tsx"],"sourcesContent":["import {\n  Checkbox,\n  Collapse,\n  FormControlLabel,\n  IconButton,\n  TextField,\n  Tooltip,\n} from '@mui/material'\nimport { ReactNode, useMemo, useRef, useState } from 'react'\nimport { FacetColumnResultValueCount } from '@sage-bionetworks/synapse-types'\nimport IconSvg from '../../../IconSvg/IconSvg'\nimport { FacetFilterHeader } from '../FacetFilterHeader'\nimport { EnumFacetFilterOption } from './EnumFacetFilterOption'\nimport EnumFacetFilterDropdown from './EnumFacetFilterDropdown'\nimport { SetOptional } from 'type-fest'\n\nconst MAX_ENUMERATION_VALUES_TO_SHOW = 5\n\nexport type RenderedFacetValue<TValue = string> = Omit<\n  SetOptional<FacetColumnResultValueCount, 'count'>,\n  'value'\n> & {\n  value: TValue\n  /* Text displayed for the option, and also used to filter in search */\n  displayText: string\n  /* Optional custom node to render in place of the plain-text label. */\n  renderedLabel?: ReactNode\n}\n\nexport type EnumFacetFilterUIProps<TValue = string> = {\n  /* The ID of the corresponding label, for testing and accessibility */\n  labelId?: string\n  /* The title of the faceted column to be displayed */\n  facetTitle: string\n  /* List of all facet values and information associated with each value */\n  facetValues: RenderedFacetValue<TValue>[]\n  /* Determines how the component is styled and whether the 'All' checkbox should be selected. */\n  filterIsActive: boolean // filterIsActive cannot be derived from facetValues[*].isSelected. See PORTALS-2680\n  /* The EnumFacetFilter can be rendered as a collapsible panel or a dropdown. Default is `'Collapsible'` */\n  containerAs?: 'Collapsible' | 'Dropdown'\n  /* If `containerAs` is a dropdown, the dropdown can be either an IconButton or a SelectBox. Default is `'Icon'` */\n  dropdownType?: 'Icon' | 'SelectBox'\n  /* If true, hides the button to collapse the panel (only shown if `containerAs` is 'Collapsible'). Default is false.*/\n  hideCollapsible?: boolean\n  /* Called when an unselected value is selected */\n  onAddValueToSelection: (value: TValue) => void\n  /* Called when a selected value is unselected */\n  onRemoveValueFromSelection: (value: TValue) => void\n  /* Called when all values should be unselected (e.g. 'All' is clicked) */\n  onRemoveAllFacetSelections: () => void\n  /* Called when an value is hovered over */\n  onHoverOverValue: (value: TValue) => void\n  /* Set to true if multiple values can be selected for the filter */\n  canMultiSelect: boolean\n  /* By default, all values are not shown (defaultShowAllValues = false) */\n  defaultShowAllValues?: boolean\n}\n\nfunction removeWhitespace(value: string): string {\n  return value.replace(/\\s/g, '').toLowerCase()\n}\n\nexport default function EnumFacetFilterUI<TValue = string>(\n  props: EnumFacetFilterUIProps<TValue>,\n) {\n  const {\n    labelId,\n    filterIsActive,\n    containerAs = 'Collapsible',\n    dropdownType = 'Icon',\n    hideCollapsible = false,\n    facetValues,\n    onAddValueToSelection,\n    onRemoveValueFromSelection,\n    facetTitle,\n    onRemoveAllFacetSelections,\n    onHoverOverValue,\n    canMultiSelect = true,\n    defaultShowAllValues = false,\n  } = props\n  const [toggleShowAll, setToggleShowAll] =\n    useState<boolean>(defaultShowAllValues)\n  const [isCollapsed, setIsCollapsed] = useState<boolean>(false)\n  const [showSearch, setShowSearch] = useState<boolean>(false)\n  const [searchTerm, setSearchText] = useState<string>('')\n\n  // e.g. we show a subset of facet values before hiding the rest behind \"Show More\"\n  // If the user has selected a value that would normally be hidden, always show all of the values\n  const valueIndexedGreaterThanMaxToShowIsSelected =\n    facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW &&\n    facetValues\n      .slice(MAX_ENUMERATION_VALUES_TO_SHOW)\n      .some(({ isSelected }) => isSelected)\n  const showAll =\n    containerAs === 'Dropdown' ||\n    toggleShowAll ||\n    showSearch ||\n    valueIndexedGreaterThanMaxToShowIsSelected\n\n  const facetValuesToShow = useMemo(() => {\n    if (showSearch && searchTerm.length > 0) {\n      return facetValues.filter(({ displayText }) => {\n        return (\n          displayText.toLowerCase().indexOf(searchTerm.trim().toLowerCase()) >\n          -1\n        )\n      })\n    }\n    if (showAll) {\n      return facetValues\n    }\n    return facetValues.slice(0, MAX_ENUMERATION_VALUES_TO_SHOW)\n  }, [facetValues, searchTerm, showSearch, showAll])\n\n  const textInput = useRef<HTMLInputElement>(null)\n\n  const isDropdown = containerAs === 'Dropdown'\n  const showMoreButtonIsVisible =\n    !showAll && facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW\n  const showLessButtonIsVisible =\n    showAll &&\n    !searchTerm &&\n    !valueIndexedGreaterThanMaxToShowIsSelected &&\n    facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW\n\n  const content = (\n    <div className={isDropdown ? 'EnumFacetFilter__dropdown_menu' : ''}>\n      <div className=\"EnumFacetFilter__checkboxContainer--forAll\">\n        <TextField // Search Filter Text\n          sx={{\n            display: showSearch ? undefined : 'none',\n          }}\n          size={'small'}\n          fullWidth={true}\n          slotProps={{\n            input: {\n              startAdornment: (\n                <Tooltip title={'Close search'}>\n                  <IconButton\n                    size={'small'}\n                    onClick={() => {\n                      setShowSearch(false)\n                      setToggleShowAll(defaultShowAllValues)\n                    }}\n                  >\n                    <IconSvg\n                      sx={{ fontSize: 'inherit' }}\n                      wrap={false}\n                      icon=\"arrowBack\"\n                    />\n                  </IconButton>\n                </Tooltip>\n              ),\n              endAdornment: searchTerm.length > 0 && (\n                <Tooltip title={'Clear'}>\n                  <IconButton\n                    size={'small'}\n                    onClick={() => {\n                      setSearchText('')\n                      textInput.current?.focus()\n                    }}\n                  >\n                    <IconSvg\n                      sx={{ fontSize: 'inherit' }}\n                      wrap={false}\n                      icon=\"close\"\n                    />\n                  </IconButton>\n                </Tooltip>\n              ),\n            },\n          }}\n          type=\"text\"\n          placeholder=\"Find values\"\n          value={searchTerm}\n          ref={textInput}\n          onChange={e => {\n            setSearchText(e.target.value)\n          }}\n        />\n        {!showSearch && (\n          <div className=\"EnumFacetFilter__checkAll\">\n            <FormControlLabel\n              control={<Checkbox />}\n              className=\"EnumFacetFilter__checkbox\"\n              onChange={() => {\n                if (filterIsActive) {\n                  onRemoveAllFacetSelections()\n                }\n              }}\n              key=\"select_all\"\n              checked={!filterIsActive}\n              label=\"All\"\n            />\n            <Tooltip title={'Search'}>\n              <IconButton\n                size={'small'}\n                sx={{ aspectRatio: '1 / 1' }}\n                onClick={() => {\n                  setSearchText('')\n                  setShowSearch(true)\n                  textInput.current?.focus()\n                }}\n              >\n                <IconSvg\n                  sx={{ fontSize: 'inherit' }}\n                  wrap={false}\n                  icon=\"search\"\n                />\n              </IconButton>\n            </Tooltip>\n          </div>\n        )}\n      </div>\n      <div>\n        {facetValuesToShow.map((facetValueAndCount, index: number) => {\n          const { isSelected, displayText, renderedLabel, value, count } =\n            facetValueAndCount\n\n          return (\n            <EnumFacetFilterOption\n              key={String(value)}\n              id={[\n                removeWhitespace(facetTitle),\n                removeWhitespace(String(value)),\n                index,\n              ].join('-')}\n              label={renderedLabel ?? displayText}\n              count={count}\n              isDropdown={isDropdown}\n              checked={isSelected}\n              onHover={() => {\n                onHoverOverValue(value)\n              }}\n              onChange={(newIsSelected: boolean) => {\n                if (newIsSelected) {\n                  onAddValueToSelection(value)\n                } else {\n                  onRemoveValueFromSelection(value)\n                }\n              }}\n              inputType={canMultiSelect ? 'checkbox' : 'radio'}\n            />\n          )\n        })}\n        {!isDropdown && (\n          <>\n            {showMoreButtonIsVisible && (\n              <button\n                className=\"EnumFacetFilter__showMoreFacetsBtn\"\n                onClick={() => setToggleShowAll(true)}\n              >\n                <div className=\"EnumFacetFilter__checkboxContainer\">\n                  <div className=\"EnumFacetFilter__showMoreFacetsLabel\">\n                    Show all ({facetValues.length})\n                  </div>\n                </div>\n              </button>\n            )}\n            {showLessButtonIsVisible && (\n              <button\n                className=\"EnumFacetFilter__showMoreFacetsBtn\"\n                onClick={() => setToggleShowAll(false)}\n              >\n                <div className=\"EnumFacetFilter__checkboxContainer\">\n                  <div className=\"EnumFacetFilter__showMoreFacetsLabel\">\n                    Show less\n                  </div>\n                </div>\n              </button>\n            )}\n          </>\n        )}\n        {facetValuesToShow.length <= 0 && (\n          <div className=\"EnumFacetFilter__noMatch\">No match found</div>\n        )}\n      </div>\n    </div>\n  )\n\n  const menuText = useMemo(() => {\n    if (!filterIsActive) {\n      return 'All'\n    } else if (\n      filterIsActive &&\n      facetValuesToShow.filter(item => item.isSelected).length === 1\n    ) {\n      return facetValuesToShow.filter(item => item.isSelected)[0].displayText\n    } else {\n      return 'Multiple Values Selected'\n    }\n  }, [filterIsActive, facetValuesToShow])\n\n  if (isDropdown) {\n    return (\n      <EnumFacetFilterDropdown\n        facetTitle={facetTitle}\n        dropdownType={dropdownType}\n        menuText={menuText}\n        filterIsActive={filterIsActive}\n        labelId={labelId}\n      >\n        {content}\n      </EnumFacetFilterDropdown>\n    )\n  } else {\n    return (\n      <>\n        <FacetFilterHeader\n          hideCollapsible={hideCollapsible}\n          isCollapsed={isCollapsed}\n          label={facetTitle}\n          onClick={(isCollapsed: boolean) => setIsCollapsed(isCollapsed)}\n        />\n        <Collapse className=\"EnumFacetFilter\" in={!isCollapsed}>\n          {content}\n        </Collapse>\n      </>\n    )\n  }\n}\n"],"mappings":";;;;;;;;AAgBA,IAAM,IAAiC;AA0CvC,SAAS,EAAiB,GAAuB;CAC/C,OAAO,EAAM,QAAQ,OAAO,EAAE,EAAE,YAAY;AAC9C;AAEA,SAAwB,EACtB,GACA;CACA,IAAM,EACJ,YACA,mBACA,iBAAc,eACd,kBAAe,QACf,qBAAkB,IAClB,gBACA,0BACA,+BACA,eACA,+BACA,qBACA,oBAAiB,IACjB,0BAAuB,OACrB,GACE,CAAC,GAAe,KACpB,EAAkB,CAAoB,GAClC,CAAC,GAAa,KAAkB,EAAkB,EAAK,GACvD,CAAC,GAAY,KAAiB,EAAkB,EAAK,GACrD,CAAC,GAAY,KAAiB,EAAiB,EAAE,GAIjD,IACJ,EAAY,SAAS,KACrB,EACG,MAAM,CAA8B,EACpC,MAAM,EAAE,oBAAiB,CAAU,GAClC,IACJ,MAAgB,cAChB,KACA,KACA,GAEI,IAAoB,QACpB,KAAc,EAAW,SAAS,IAC7B,EAAY,QAAQ,EAAE,qBAEzB,EAAY,YAAY,EAAE,QAAQ,EAAW,KAAK,EAAE,YAAY,CAAC,IACjE,EAEH,IAEC,IACK,IAEF,EAAY,MAAM,GAAG,CAA8B,GACzD;EAAC;EAAa;EAAY;EAAY;CAAO,CAAC,GAE3C,IAAY,EAAyB,IAAI,GAEzC,IAAa,MAAgB,YAC7B,IACJ,CAAC,KAAW,EAAY,SAAS,GAC7B,IACJ,KACA,CAAC,KACD,CAAC,KACD,EAAY,SAAS,GAEjB,IACJ,kBAAC,OAAD;EAAK,WAAW,IAAa,mCAAmC;YAAhE,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IACE,IAAI,EACF,SAAS,IAAa,KAAA,IAAY,OACpC;IACA,MAAM;IACN,WAAW;IACX,WAAW,EACT,OAAO;KACL,gBACE,kBAAC,GAAD;MAAS,OAAO;gBACd,kBAAC,GAAD;OACE,MAAM;OACN,eAAe;QAEb,AADA,EAAc,EAAK,GACnB,EAAiB,CAAoB;OACvC;iBAEA,kBAAC,GAAD;QACE,IAAI,EAAE,UAAU,UAAU;QAC1B,MAAM;QACN,MAAK;OACN,CAAA;MACS,CAAA;KACL,CAAA;KAEX,cAAc,EAAW,SAAS,KAChC,kBAAC,GAAD;MAAS,OAAO;gBACd,kBAAC,GAAD;OACE,MAAM;OACN,eAAe;QAEb,AADA,EAAc,EAAE,GAChB,EAAU,SAAS,MAAM;OAC3B;iBAEA,kBAAC,GAAD;QACE,IAAI,EAAE,UAAU,UAAU;QAC1B,MAAM;QACN,MAAK;OACN,CAAA;MACS,CAAA;KACL,CAAA;IAEb,EACF;IACA,MAAK;IACL,aAAY;IACZ,OAAO;IACP,KAAK;IACL,WAAU,MAAK;KACb,EAAc,EAAE,OAAO,KAAK;IAC9B;GACD,CAAA,GACA,CAAC,KACA,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KACE,SAAS,kBAAC,GAAD,CAAW,CAAA;KACpB,WAAU;KACV,gBAAgB;MACd,AAAI,KACF,EAA2B;KAE/B;KAEA,SAAS,CAAC;KACV,OAAM;IACP,GAHK,YAGL,GACD,kBAAC,GAAD;KAAS,OAAO;eACd,kBAAC,GAAD;MACE,MAAM;MACN,IAAI,EAAE,aAAa,QAAQ;MAC3B,eAAe;OAGb,AAFA,EAAc,EAAE,GAChB,EAAc,EAAI,GAClB,EAAU,SAAS,MAAM;MAC3B;gBAEA,kBAAC,GAAD;OACE,IAAI,EAAE,UAAU,UAAU;OAC1B,MAAM;OACN,MAAK;MACN,CAAA;KACS,CAAA;IACL,CAAA,CACN;KAEJ;MACL,kBAAC,OAAD,EAAA,UAAA;GACG,EAAkB,KAAK,GAAoB,MAAkB;IAC5D,IAAM,EAAE,eAAY,gBAAa,kBAAe,UAAO,aACrD;IAEF,OACE,kBAAC,GAAD;KAEE,IAAI;MACF,EAAiB,CAAU;MAC3B,EAAiB,OAAO,CAAK,CAAC;MAC9B;KACF,EAAE,KAAK,GAAG;KACV,OAAO,KAAiB;KACjB;KACK;KACZ,SAAS;KACT,eAAe;MACb,EAAiB,CAAK;KACxB;KACA,WAAW,MAA2B;MACpC,AAAI,IACF,EAAsB,CAAK,IAE3B,EAA2B,CAAK;KAEpC;KACA,WAAW,IAAiB,aAAa;IAC1C,GArBM,OAAO,CAAK,CAqBlB;GAEL,CAAC;GACA,CAAC,KACA,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,UAAD;IACE,WAAU;IACV,eAAe,EAAiB,EAAI;cAEpC,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBAAf;OAAsD;OACzC,EAAY;OAAO;MAC3B;;IACF,CAAA;GACC,CAAA,GAET,KACC,kBAAC,UAAD;IACE,WAAU;IACV,eAAe,EAAiB,EAAK;cAErC,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBAAuC;KAEjD,CAAA;IACF,CAAA;GACC,CAAA,CAEV,EAAA,CAAA;GAEH,EAAkB,UAAU,KAC3B,kBAAC,OAAD;IAAK,WAAU;cAA2B;GAAmB,CAAA;EAE5D,EAAA,CAAA,CACF;KAGD,IAAW,QACV,IAGH,KACA,EAAkB,QAAO,MAAQ,EAAK,UAAU,EAAE,WAAW,IAEtD,EAAkB,QAAO,MAAQ,EAAK,UAAU,EAAE,GAAG,cAErD,6BAPA,OASR,CAAC,GAAgB,CAAiB,CAAC;CAepC,OAbE,IAEA,kBAAC,GAAD;EACc;EACE;EACJ;EACM;EACP;YAER;CACsB,CAAA,IAIzB,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACmB;EACJ;EACb,OAAO;EACP,UAAU,MAAyB,EAAe,CAAW;CAC9D,CAAA,GACD,kBAAC,GAAD;EAAU,WAAU;EAAkB,IAAI,CAAC;YACxC;CACO,CAAA,CACV,EAAA,CAAA;AAGR"}

package/dist/features/curator/dashboard/components/CurationTaskCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CurationTaskCard.d.ts","sourceRoot":"","sources":["../../../../../src/features/curator/dashboard/components/CurationTaskCard.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAO7D,MAAM,MAAM,qBAAqB,GAAG;IAClC,UAAU,EAAE,UAAU,CAAA;CACvB,CAAA;AA+DD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAuDpE"}
+{"version":3,"file":"CurationTaskCard.d.ts","sourceRoot":"","sources":["../../../../../src/features/curator/dashboard/components/CurationTaskCard.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,UAAU,EAEX,MAAM,kCAAkC,CAAA;AASzC,MAAM,MAAM,qBAAqB,GAAG;IAClC,UAAU,EAAE,UAAU,CAAA;CACvB,CAAA;AA8ED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CA+FpE"}

package/dist/features/curator/dashboard/components/CurationTaskCard.js

@@ -1,17 +1,21 @@
 import { displayToast as e } from "../../../../components/ToastMessage/ToastMessage.js";
+import t from "../../../../synapse-queries/entity/useEntityBundle.js";
 import "../../../../components/index.js";
-import { OPEN_CURATOR_NO_PERMISSION_ON_SOURCE_ERROR_MESSAGE as t } from "../../../entity/metadata-task/utils/constants.js";
-import n from "../../../entity/metadata-task/hooks/useOpenCuratorButton.js";
-import r from "./CurationTaskCard.module.js";
-import i from "./NextStepButton.js";
-import a from "./shared.module.js";
-import o from "./UserOrTeamChip.js";
-import { Card as s, Chip as c, Divider as l, Typography as u } from "@mui/material";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import p from "classnames";
+import { OPEN_CURATOR_NO_PERMISSION_ON_SOURCE_ERROR_MESSAGE as n, TASK_STATUS_CONFIG as r } from "../../../entity/metadata-task/utils/constants.js";
+import i from "../../../entity/metadata-task/hooks/useOpenCuratorButton.js";
+import a from "../../../entity/metadata-task/components/CreateOrUpdateCurationTaskDialog.js";
+import o from "./CurationTaskCard.module.js";
+import s from "./NextStepButton.js";
+import c from "./shared.module.js";
+import l from "./UserOrTeamChip.js";
+import { useState as u } from "react";
+import { Box as d, Card as f, Chip as p, Divider as m, IconButton as h, Skeleton as g, Typography as _ } from "@mui/material";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import b from "classnames";
+import x from "@mui/icons-material/SettingsOutlined";
 //#region src/features/curator/dashboard/components/CurationTaskCard.tsx
-function m(t) {
-	let { onClick: r, isLoading: i, isPending: a, hasPermission: o } = n(t);
+function S(t) {
+	let { onClick: n, isLoading: r, isPending: a, hasPermission: o } = i(t);
 	if (!t.task || !t.status) throw Error("Task bundle is missing required properties");
 	switch (t.task?.taskProperties?.concreteType) {
 		case "org.sagebionetworks.repo.model.curation.metadata.FileBasedMetadataTaskProperties":
@@ -22,8 +26,9 @@ function m(t) {
 			principalIds: t.task.assigneePrincipalId ? [t.task.assigneePrincipalId] : [],
 			buttonText: "Open Curator",
 			taskType: "Curate Data",
-			onClickNextStep: r,
-			isLoading: i,
+			statusState: t.status.state,
+			onClickNextStep: n,
+			isLoading: r,
 			isPending: a,
 			hasPermission: o
 		};
@@ -36,6 +41,7 @@ function m(t) {
 		principalIds: t.task.assigneePrincipalId ? [t.task.assigneePrincipalId] : [],
 		buttonText: "Continue",
 		taskType: "",
+		statusState: t.status.state,
 		onClickNextStep: () => {
 			e("No action defined for this task type", "danger", { title: "Unexpected Error" });
 		},
@@ -44,9 +50,9 @@ function m(t) {
 		hasPermission: void 0
 	};
 }
-function h(e) {
+function C(e) {
 	let { label: t } = e;
-	return /* @__PURE__ */ d(c, {
+	return /* @__PURE__ */ v(p, {
 		sx: {
 			fontWeight: 600,
 			backgroundColor: "#BFD3ED"
@@ -54,38 +60,81 @@ function h(e) {
 		label: t
 	});
 }
-function g(n) {
-	let { taskBundle: c } = n, { title: g, description: _, taskId: v, taskType: y, principalIds: b, buttonText: x, onClickNextStep: S, hasPermission: C, isLoading: w, isPending: T } = m(c);
-	return /* @__PURE__ */ d(s, {
-		className: p(a.card, r.card),
-		children: /* @__PURE__ */ f("div", {
-			className: r.cardContent,
+function w(e) {
+	let { state: t } = e;
+	if (!t) return null;
+	let { label: n, backgroundColor: i } = r[t];
+	return /* @__PURE__ */ v(p, {
+		size: "small",
+		sx: {
+			fontWeight: 600,
+			backgroundColor: i
+		},
+		label: n
+	});
+}
+function T(r) {
+	let { taskBundle: i } = r, { title: p, description: T, taskId: E, taskType: D, principalIds: O, buttonText: k, statusState: A, onClickNextStep: j, hasPermission: M, isLoading: N, isPending: P } = S(i), [F, I] = u(!1), L = i.task?.projectId, { data: R } = t(L, void 0, {
+		includeEntity: !0,
+		includePermissions: !0
+	}), z = R?.permissions?.canEdit ?? !1;
+	function B() {
+		M ? j() : e(n, "danger");
+	}
+	return /* @__PURE__ */ y(f, {
+		className: b(c.card, o.card),
+		children: [/* @__PURE__ */ y("div", {
+			className: o.cardContent,
 			children: [
-				/* @__PURE__ */ f("div", {
-					className: r.mainContent,
+				/* @__PURE__ */ y("div", {
+					className: o.mainContent,
 					children: [
-						/* @__PURE__ */ f("div", {
-							className: r.titleChipContainer,
+						/* @__PURE__ */ y("div", {
+							className: o.titleChipContainer,
 							children: [
-								/* @__PURE__ */ d(u, {
+								/* @__PURE__ */ v(_, {
 									variant: "headline3",
-									children: g
+									children: p
 								}),
-								y && /* @__PURE__ */ d(h, { label: y }),
-								v && /* @__PURE__ */ d(h, { label: `TaskId ${v}` })
+								D && /* @__PURE__ */ v(C, { label: D }),
+								z && /* @__PURE__ */ v(h, {
+									onClick: () => I(!0),
+									"aria-label": "Task settings",
+									children: /* @__PURE__ */ v(x, {})
+								})
 							]
 						}),
-						/* @__PURE__ */ d(u, {
+						/* @__PURE__ */ y(d, {
+							sx: {
+								display: "flex",
+								gap: 4
+							},
+							children: [R?.entity?.name ? /* @__PURE__ */ v(_, {
+								variant: "body1",
+								children: R.entity.name
+							}) : /* @__PURE__ */ v(g, { width: 100 }), E && /* @__PURE__ */ y(_, {
+								variant: "body1",
+								children: ["Task ID: ", E]
+							})]
+						}),
+						T && /* @__PURE__ */ v(_, {
 							variant: "body1",
-							children: _
+							children: T
 						}),
-						/* @__PURE__ */ d("div", {
-							className: r.userChipContainer,
-							children: b.map((e) => /* @__PURE__ */ d(o, { principalId: e }, e))
+						/* @__PURE__ */ v("div", {
+							className: o.userChipContainer,
+							children: O.map((e) => /* @__PURE__ */ v(l, { principalId: e }, e))
 						})
 					]
 				}),
-				/* @__PURE__ */ d(l, {
+				/* @__PURE__ */ v(d, {
+					sx: {
+						display: "flex",
+						alignItems: "center"
+					},
+					children: /* @__PURE__ */ v(w, { state: A })
+				}),
+				/* @__PURE__ */ v(m, {
 					orientation: "vertical",
 					flexItem: !0,
 					sx: { display: {
@@ -93,20 +142,25 @@ function g(n) {
 						md: "block"
 					} }
 				}),
-				/* @__PURE__ */ d(i, {
-					className: r.cardButton,
-					buttonText: x,
-					onClick: C ? S : () => {
-						e(t, "danger");
-					},
-					disabled: w,
-					loading: T
+				/* @__PURE__ */ v(s, {
+					className: o.cardButton,
+					buttonText: k,
+					onClick: B,
+					disabled: N,
+					loading: P
 				})
 			]
-		})
+		}), /* @__PURE__ */ v(a, {
+			open: F,
+			onCancel: () => I(!1),
+			onSuccess: () => I(!1),
+			onDeleteSuccess: () => I(!1),
+			projectId: L ?? "",
+			task: i.task
+		}, String(F))]
 	});
 }
 //#endregion
-export { g as default };
+export { T as default };
 
 //# sourceMappingURL=CurationTaskCard.js.map

package/dist/features/curator/dashboard/components/CurationTaskCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CurationTaskCard.js","names":[],"sources":["../../../../../src/features/curator/dashboard/components/CurationTaskCard.tsx"],"sourcesContent":["import { displayToast } from '@/components'\nimport useOpenCuratorFromTaskButton from '@/features/entity/metadata-task/hooks/useOpenCuratorButton'\nimport { OPEN_CURATOR_NO_PERMISSION_ON_SOURCE_ERROR_MESSAGE } from '@/features/entity/metadata-task/utils/constants'\nimport { Card, Chip, Divider, Typography } from '@mui/material'\nimport { TaskBundle } from '@sage-bionetworks/synapse-client'\nimport classNames from 'classnames'\nimport styles from './CurationTaskCard.module.scss'\nimport NextStepButton from './NextStepButton'\nimport sharedStyles from './shared.module.scss'\nimport UserOrTeamChip from './UserOrTeamChip'\n\nexport type CurationTaskCardProps = {\n  taskBundle: TaskBundle\n}\n\nfunction useUiForTask(taskBundle: TaskBundle) {\n  const { onClick, isLoading, isPending, hasPermission } =\n    useOpenCuratorFromTaskButton(taskBundle)\n\n  if (!taskBundle.task || !taskBundle.status) {\n    throw new Error('Task bundle is missing required properties')\n  }\n\n  switch (taskBundle.task?.taskProperties?.concreteType) {\n    case 'org.sagebionetworks.repo.model.curation.metadata.FileBasedMetadataTaskProperties':\n    case 'org.sagebionetworks.repo.model.curation.metadata.RecordBasedMetadataTaskProperties':\n      return {\n        title: taskBundle.task.dataType,\n        description: taskBundle.task.instructions ?? '',\n        taskId: taskBundle.task.taskId,\n        principalIds: taskBundle.task.assigneePrincipalId\n          ? [taskBundle.task.assigneePrincipalId]\n          : [],\n        buttonText: 'Open Curator',\n        taskType: 'Curate Data',\n        onClickNextStep: onClick,\n        isLoading,\n        isPending,\n        hasPermission,\n      }\n    default: {\n      console.error(\n        'No UI implemented for task type: ' +\n          // @ts-expect-error - the switch should be exhaustive for known types\n          taskBundle.task?.taskProperties?.concreteType,\n      )\n    }\n  }\n\n  return {\n    title: taskBundle.task.dataType,\n    description: taskBundle.task.instructions ?? '',\n    taskId: taskBundle.task.taskId!,\n    principalIds: taskBundle.task.assigneePrincipalId\n      ? [taskBundle.task.assigneePrincipalId]\n      : [],\n    buttonText: 'Continue',\n    taskType: '',\n    onClickNextStep: () => {\n      displayToast('No action defined for this task type', 'danger', {\n        title: 'Unexpected Error',\n      })\n    },\n    isLoading: false,\n    isPending: false,\n    hasPermission: undefined,\n  }\n}\n\nfunction TaskTypeChip(props: { label: string }) {\n  const { label } = props\n  return (\n    <Chip sx={{ fontWeight: 600, backgroundColor: '#BFD3ED' }} label={label} />\n  )\n}\n\n/**\n * Card component for displaying a curation task on the curator dashboard. Shows relevant information about the task and includes a button to proceed to the next step in the workflow.\n */\nexport default function CurationTaskCard(props: CurationTaskCardProps) {\n  const { taskBundle } = props\n  const {\n    title,\n    description,\n    taskId,\n    taskType,\n    principalIds,\n    buttonText,\n    onClickNextStep,\n    hasPermission,\n    isLoading,\n    isPending,\n  } = useUiForTask(taskBundle)\n\n  return (\n    <Card className={classNames(sharedStyles.card, styles.card)}>\n      <div className={styles.cardContent}>\n        <div className={styles.mainContent}>\n          <div className={styles.titleChipContainer}>\n            <Typography variant=\"headline3\">{title}</Typography>\n            {taskType && <TaskTypeChip label={taskType} />}\n            {taskId && <TaskTypeChip label={`TaskId ${taskId}`} />}\n          </div>\n          <Typography variant=\"body1\">{description}</Typography>\n          <div className={styles.userChipContainer}>\n            {principalIds.map(principalId => (\n              <UserOrTeamChip key={principalId} principalId={principalId} />\n            ))}\n          </div>\n        </div>\n        <Divider\n          orientation=\"vertical\"\n          flexItem\n          sx={{ display: { xs: 'none', md: 'block' } }}\n        />\n        <NextStepButton\n          className={styles.cardButton}\n          buttonText={buttonText}\n          onClick={\n            hasPermission\n              ? onClickNextStep\n              : () => {\n                  displayToast(\n                    OPEN_CURATOR_NO_PERMISSION_ON_SOURCE_ERROR_MESSAGE,\n                    'danger',\n                  )\n                }\n          }\n          disabled={isLoading}\n          loading={isPending}\n        />\n      </div>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAeA,SAAS,EAAa,GAAwB;CAC5C,IAAM,EAAE,YAAS,cAAW,cAAW,qBACrC,EAA6B,CAAU;CAEzC,IAAI,CAAC,EAAW,QAAQ,CAAC,EAAW,QAClC,MAAU,MAAM,4CAA4C;CAG9D,QAAQ,EAAW,MAAM,gBAAgB,cAAzC;EACE,KAAK;EACL,KAAK,sFACH,OAAO;GACL,OAAO,EAAW,KAAK;GACvB,aAAa,EAAW,KAAK,gBAAgB;GAC7C,QAAQ,EAAW,KAAK;GACxB,cAAc,EAAW,KAAK,sBAC1B,CAAC,EAAW,KAAK,mBAAmB,IACpC,CAAC;GACL,YAAY;GACZ,UAAU;GACV,iBAAiB;GACjB;GACA;GACA;EACF;EACF,SACE,QAAQ,MACN,sCAEE,EAAW,MAAM,gBAAgB,YACrC;CAEJ;CAEA,OAAO;EACL,OAAO,EAAW,KAAK;EACvB,aAAa,EAAW,KAAK,gBAAgB;EAC7C,QAAQ,EAAW,KAAK;EACxB,cAAc,EAAW,KAAK,sBAC1B,CAAC,EAAW,KAAK,mBAAmB,IACpC,CAAC;EACL,YAAY;EACZ,UAAU;EACV,uBAAuB;GACrB,EAAa,wCAAwC,UAAU,EAC7D,OAAO,mBACT,CAAC;EACH;EACA,WAAW;EACX,WAAW;EACX,eAAe,KAAA;CACjB;AACF;AAEA,SAAS,EAAa,GAA0B;CAC9C,IAAM,EAAE,aAAU;CAClB,OACE,kBAAC,GAAD;EAAM,IAAI;GAAE,YAAY;GAAK,iBAAiB;EAAU;EAAU;CAAQ,CAAA;AAE9E;AAKA,SAAwB,EAAiB,GAA8B;CACrE,IAAM,EAAE,kBAAe,GACjB,EACJ,UACA,gBACA,WACA,aACA,iBACA,eACA,oBACA,kBACA,cACA,iBACE,EAAa,CAAU;CAE3B,OACE,kBAAC,GAAD;EAAM,WAAW,EAAW,EAAa,MAAM,EAAO,IAAI;YACxD,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB;IACE,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAvB;MACE,kBAAC,OAAD;OAAK,WAAW,EAAO;iBAAvB;QACE,kBAAC,GAAD;SAAY,SAAQ;mBAAa;QAAkB,CAAA;QAClD,KAAY,kBAAC,GAAD,EAAc,OAAO,EAAW,CAAA;QAC5C,KAAU,kBAAC,GAAD,EAAc,OAAO,UAAU,IAAW,CAAA;OAClD;;MACL,kBAAC,GAAD;OAAY,SAAQ;iBAAS;MAAwB,CAAA;MACrD,kBAAC,OAAD;OAAK,WAAW,EAAO;iBACpB,EAAa,KAAI,MAChB,kBAAC,GAAD,EAA+C,eAAc,GAAxC,CAAwC,CAC9D;MACE,CAAA;KACF;;IACL,kBAAC,GAAD;KACE,aAAY;KACZ,UAAA;KACA,IAAI,EAAE,SAAS;MAAE,IAAI;MAAQ,IAAI;KAAQ,EAAE;IAC5C,CAAA;IACD,kBAAC,GAAD;KACE,WAAW,EAAO;KACN;KACZ,SACE,IACI,UACM;MACJ,EACE,GACA,QACF;KACF;KAEN,UAAU;KACV,SAAS;IACV,CAAA;GACE;;CACD,CAAA;AAEV"}
+{"version":3,"file":"CurationTaskCard.js","names":[],"sources":["../../../../../src/features/curator/dashboard/components/CurationTaskCard.tsx"],"sourcesContent":["import { displayToast } from '@/components'\nimport CreateOrUpdateCurationTaskDialog from '@/features/entity/metadata-task/components/CreateOrUpdateCurationTaskDialog'\nimport { TASK_STATUS_CONFIG } from '@/features/entity/metadata-task/utils/constants'\nimport useOpenCuratorFromTaskButton from '@/features/entity/metadata-task/hooks/useOpenCuratorButton'\nimport { OPEN_CURATOR_NO_PERMISSION_ON_SOURCE_ERROR_MESSAGE } from '@/features/entity/metadata-task/utils/constants'\nimport useGetEntityBundle from '@/synapse-queries/entity/useEntityBundle'\nimport {\n  Box,\n  Card,\n  Chip,\n  Divider,\n  IconButton,\n  Skeleton,\n  Typography,\n} from '@mui/material'\nimport {\n  TaskBundle,\n  TaskStatusStateEnum,\n} from '@sage-bionetworks/synapse-client'\nimport classNames from 'classnames'\nimport styles from './CurationTaskCard.module.scss'\nimport NextStepButton from './NextStepButton'\nimport sharedStyles from './shared.module.scss'\nimport UserOrTeamChip from './UserOrTeamChip'\nimport SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined'\nimport { useState } from 'react'\n\nexport type CurationTaskCardProps = {\n  taskBundle: TaskBundle\n}\n\nfunction useUiForTask(taskBundle: TaskBundle) {\n  const { onClick, isLoading, isPending, hasPermission } =\n    useOpenCuratorFromTaskButton(taskBundle)\n\n  if (!taskBundle.task || !taskBundle.status) {\n    throw new Error('Task bundle is missing required properties')\n  }\n\n  switch (taskBundle.task?.taskProperties?.concreteType) {\n    case 'org.sagebionetworks.repo.model.curation.metadata.FileBasedMetadataTaskProperties':\n    case 'org.sagebionetworks.repo.model.curation.metadata.RecordBasedMetadataTaskProperties':\n      return {\n        title: taskBundle.task.dataType,\n        description: taskBundle.task.instructions ?? '',\n        taskId: taskBundle.task.taskId,\n        principalIds: taskBundle.task.assigneePrincipalId\n          ? [taskBundle.task.assigneePrincipalId]\n          : [],\n        buttonText: 'Open Curator',\n        taskType: 'Curate Data',\n        statusState: taskBundle.status.state,\n        onClickNextStep: onClick,\n        isLoading,\n        isPending,\n        hasPermission,\n      }\n    default: {\n      console.error(\n        'No UI implemented for task type: ' +\n          // @ts-expect-error - the switch should be exhaustive for known types\n          taskBundle.task?.taskProperties?.concreteType,\n      )\n    }\n  }\n\n  return {\n    title: taskBundle.task.dataType,\n    description: taskBundle.task.instructions ?? '',\n    taskId: taskBundle.task.taskId!,\n    principalIds: taskBundle.task.assigneePrincipalId\n      ? [taskBundle.task.assigneePrincipalId]\n      : [],\n    buttonText: 'Continue',\n    taskType: '',\n    statusState: taskBundle.status.state,\n    onClickNextStep: () => {\n      displayToast('No action defined for this task type', 'danger', {\n        title: 'Unexpected Error',\n      })\n    },\n    isLoading: false,\n    isPending: false,\n    hasPermission: undefined,\n  }\n}\n\nfunction TaskTypeChip(props: { label: string }) {\n  const { label } = props\n  return (\n    <Chip sx={{ fontWeight: 600, backgroundColor: '#BFD3ED' }} label={label} />\n  )\n}\n\nfunction TaskStatusChip(props: { state: TaskStatusStateEnum | undefined }) {\n  const { state } = props\n  if (!state) return null\n  const { label, backgroundColor } = TASK_STATUS_CONFIG[state]\n  return (\n    <Chip\n      size=\"small\"\n      sx={{ fontWeight: 600, backgroundColor }}\n      label={label}\n    />\n  )\n}\n\n/**\n * Card component for displaying a curation task on the curator dashboard. Shows relevant information about the task and includes a button to proceed to the next step in the workflow.\n */\nexport default function CurationTaskCard(props: CurationTaskCardProps) {\n  const { taskBundle } = props\n  const {\n    title,\n    description,\n    taskId,\n    taskType,\n    principalIds,\n    buttonText,\n    statusState,\n    onClickNextStep,\n    hasPermission: hasPermissionToOpenGrid,\n    isLoading,\n    isPending,\n  } = useUiForTask(taskBundle)\n\n  const [isSettingsOpen, setIsSettingsOpen] = useState(false)\n\n  const projectId = taskBundle.task?.projectId\n  const { data: bundle } = useGetEntityBundle(projectId, undefined, {\n    includeEntity: true,\n    includePermissions: true,\n  })\n  const canEdit = bundle?.permissions?.canEdit ?? false\n\n  function onClickAction() {\n    if (hasPermissionToOpenGrid) {\n      onClickNextStep()\n    } else {\n      displayToast(OPEN_CURATOR_NO_PERMISSION_ON_SOURCE_ERROR_MESSAGE, 'danger')\n    }\n  }\n\n  return (\n    <Card className={classNames(sharedStyles.card, styles.card)}>\n      <div className={styles.cardContent}>\n        <div className={styles.mainContent}>\n          <div className={styles.titleChipContainer}>\n            <Typography variant=\"headline3\">{title}</Typography>\n            {taskType && <TaskTypeChip label={taskType} />}\n            {canEdit && (\n              <IconButton\n                onClick={() => setIsSettingsOpen(true)}\n                aria-label=\"Task settings\"\n              >\n                <SettingsOutlinedIcon />\n              </IconButton>\n            )}\n          </div>\n          <Box sx={{ display: 'flex', gap: 4 }}>\n            {bundle?.entity?.name ? (\n              <Typography variant=\"body1\">{bundle.entity.name}</Typography>\n            ) : (\n              <Skeleton width={100} />\n            )}\n            {taskId && (\n              <Typography variant=\"body1\">Task ID: {taskId}</Typography>\n            )}\n          </Box>\n          {description && (\n            <Typography variant=\"body1\">{description}</Typography>\n          )}\n          <div className={styles.userChipContainer}>\n            {principalIds.map(principalId => (\n              <UserOrTeamChip key={principalId} principalId={principalId} />\n            ))}\n          </div>\n        </div>\n        <Box sx={{ display: 'flex', alignItems: 'center' }}>\n          <TaskStatusChip state={statusState} />\n        </Box>\n        <Divider\n          orientation=\"vertical\"\n          flexItem\n          sx={{ display: { xs: 'none', md: 'block' } }}\n        />\n        <NextStepButton\n          className={styles.cardButton}\n          buttonText={buttonText}\n          onClick={onClickAction}\n          disabled={isLoading}\n          loading={isPending}\n        />\n      </div>\n      <CreateOrUpdateCurationTaskDialog\n        key={String(isSettingsOpen)}\n        open={isSettingsOpen}\n        onCancel={() => setIsSettingsOpen(false)}\n        onSuccess={() => setIsSettingsOpen(false)}\n        onDeleteSuccess={() => setIsSettingsOpen(false)}\n        projectId={projectId ?? ''}\n        task={taskBundle.task}\n      />\n    </Card>\n  )\n}\n"],"mappings":"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"}

package/dist/features/entity/metadata-task/components/CreateOrUpdateCurationTaskDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateOrUpdateCurationTaskDialog.d.ts","sourceRoot":"","sources":["../../../../../src/features/entity/metadata-task/components/CreateOrUpdateCurationTaskDialog.tsx"],"names":[],"mappings":"AAmCA,OAAO,EACL,YAAY,EAKb,MAAM,kCAAkC,CAAA;AA0CzC,MAAM,MAAM,qCAAqC,GAAG;IAClD,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IACvC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB,CAAA;AAsBD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,gCAAgC,CACtD,KAAK,EAAE,qCAAqC,2CAmlB7C"}
+{"version":3,"file":"CreateOrUpdateCurationTaskDialog.d.ts","sourceRoot":"","sources":["../../../../../src/features/entity/metadata-task/components/CreateOrUpdateCurationTaskDialog.tsx"],"names":[],"mappings":"AAuCA,OAAO,EACL,YAAY,EAMb,MAAM,kCAAkC,CAAA;AA6CzC,MAAM,MAAM,qCAAqC,GAAG;IAClD,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IACvC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB,CAAA;AAsBD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,gCAAgC,CACtD,KAAK,EAAE,qCAAqC,2CAsoB7C"}