Fix migration bugs (#7007)

masoudmanson · web-flow · commit 6d1b61cd7e6c · 2024-05-08T17:11:08.000-07:00
diff --git a/frontend/src/components/CreateCollectionModal/components/Content/index.tsx b/frontend/src/components/CreateCollectionModal/components/Content/index.tsx
@@ -183,6 +183,7 @@ const Content: FC<Props> = (props) => {
         <Form ref={formEl} autoComplete="off">
           {/* Collection detail */}
           {/* TODO(SDSv20): Another example where using a component as a CSS selector expects parent component to pass in the selector's props */}
+          {/* (masoudmanson): The error occurred because the isSelected prop was required. Adding a '?' fixed the issue. */}
           <CollectionDetail>
             {/* Title */}
             <Title>Collection Details</Title>
@@ -397,7 +398,10 @@ const Content: FC<Props> = (props) => {
    * Handles change to selection of consortia.
    * @param selectedConsortia - Selected consortia.
    */
-  function handleConsortiaChange(selectedConsortia: DropdownValue) {
+  function handleConsortiaChange(
+    _: React.SyntheticEvent,
+    selectedConsortia: DropdownValue
+  ) {
     setConsortia(sortConsortia(selectedConsortia));
   }
 
diff --git a/frontend/src/components/Header/components/CuratorAPIKeyGenerator/index.tsx b/frontend/src/components/Header/components/CuratorAPIKeyGenerator/index.tsx
@@ -48,6 +48,10 @@ export default function CuratorAPIKeyGenerator(): JSX.Element {
     []
   );
 
+  const handleButtonClose = useCallback((_: DialogOnCloseParams[0]) => {
+    setIsOpen(false);
+  }, []);
+
   const copyAPIKey = useCallback(() => {
     navigator.clipboard.writeText(apiKeyResponse.current.key || "");
     Toast.show({
@@ -76,7 +80,9 @@ export default function CuratorAPIKeyGenerator(): JSX.Element {
         </DialogContent>
         <DialogActions>
           {/* TODO(SDSv20): Fix handler */}
-          <SDSButton onClick={handleClose}>Close</SDSButton>
+          {/* (masoudmanson): The Button onClick handler does not include a reason parameter, 
+                    and it should be distinct from the Dialog close handler */}
+          <SDSButton onClick={handleButtonClose}>Close</SDSButton>
           <SDSButton sdsType="primary" sdsStyle="square" onClick={copyAPIKey}>
             Copy API Key
           </SDSButton>
diff --git a/frontend/src/components/common/Form/Dropdown/index.tsx b/frontend/src/components/common/Form/Dropdown/index.tsx
@@ -1,7 +1,9 @@
 import {
-  DefaultDropdownMenuOption,
+  DefaultAutocompleteOption,
+  DropdownProps,
   Dropdown as SDSDropdown,
 } from "@czi-sds/components";
+import { AutocompleteValue } from "@mui/base";
 import {
   FormLabelText,
   Optional,
@@ -11,21 +13,24 @@ import {
   DropdownPopper,
 } from "src/components/common/Form/Dropdown/style";
 
-type onChangeFn = (options: Value) => void;
-export type Value =
-  | DefaultDropdownMenuOption
-  | DefaultDropdownMenuOption[]
-  | null;
+export type Value = AutocompleteValue<
+  DefaultAutocompleteOption,
+  boolean | undefined,
+  false,
+  false
+>;
 
-interface Props {
+interface Props
+  extends DropdownProps<
+    DefaultAutocompleteOption,
+    boolean | undefined,
+    false,
+    false
+  > {
   disablePortal?: boolean;
   label: string;
-  multiple?: boolean;
-  onChange: onChangeFn;
   optionalField?: boolean;
-  options: DefaultDropdownMenuOption[];
   text?: string;
-  value: Value;
 }
 
 const DropdownMenuProps = {
@@ -59,26 +64,26 @@ export default function Dropdown({
           {optionalField && <Optional>(optional)</Optional>}
         </FormLabelText>
       )}
-      <SDSDropdown
+      <SDSDropdown<DefaultAutocompleteOption, boolean | undefined, false, false>
         closeOnBlur
         DropdownMenuProps={DropdownMenuProps}
         InputDropdownProps={{ sdsStyle: "square" }}
         isTriggerChangeOnOptionClick
-        label={getDropdownLabel(value, label)}
+        label={getDropdownLabel(label, value)}
         multiple={multiple}
         onChange={onChange} // TODO(SDSv20): Come back to this
         options={options}
-        PopperComponent={({ ...props }) => (
-          <DropdownPopper
-            disablePortal={disablePortal}
-            open={props.open}
-            placement="bottom-start"
-            style={{
-              width: props.anchorEl?.offsetWidth, // Set Popper width to equal the dropdown button.
-            }}
-            {...props}
-          />
-        )}
+        PopperComponent={(popperProps) => {
+          const { anchorEl } = popperProps;
+
+          return (
+            <DropdownPopper
+              disablePortal={disablePortal}
+              {...popperProps}
+              style={{ width: (anchorEl as HTMLButtonElement)?.offsetWidth }}
+            />
+          );
+        }}
         value={value}
       />
     </DropdownForm>
@@ -92,7 +97,7 @@ export default function Dropdown({
  * @param label - Default "placeholder" label.
  * @returns dropdown label.
  */
-function getDropdownLabel(value: Value, label: string): string {
+function getDropdownLabel(label: string, value?: Value): string {
   if (!value || (Array.isArray(value) && value.length === 0)) {
     return label;
   }
@@ -106,7 +111,7 @@ function getDropdownLabel(value: Value, label: string): string {
  * @param value - Selected value.
  * @returns true is an option is selected.
  */
-function isOptionSelected(value: Value): boolean {
+function isOptionSelected(value?: Value): boolean {
   if (!value) {
     return false;
   }
diff --git a/frontend/src/components/common/Form/Dropdown/style.ts b/frontend/src/components/common/Form/Dropdown/style.ts
@@ -7,7 +7,7 @@ import {
 import { css } from "@emotion/react";
 
 interface DropdownFormProps extends CommonThemeProps {
-  isSelected: boolean;
+  isSelected?: boolean;
 }
 
 const scrollbar = css`
diff --git a/frontend/src/components/common/MoreDropdown/index.tsx b/frontend/src/components/common/MoreDropdown/index.tsx
@@ -4,7 +4,7 @@ import { MoreButton } from "src/components/common/MoreDropdown/style";
 
 interface Props {
   popoverProps?: PopoverProps;
-  buttonProps?: Partial<ButtonIconProps<"dotsHorizontal", "small">>; // TODO(SDSv20): unsure what the error is
+  buttonProps?: Partial<ButtonIconProps>;
 }
 
 const MoreDropdown = ({
diff --git a/frontend/src/views/CellGuide/components/CellGuideCard/index.tsx b/frontend/src/views/CellGuide/components/CellGuideCard/index.tsx
@@ -43,10 +43,10 @@ import {
   TISSUE_AGNOSTIC,
 } from "./components/MarkerGeneTables/constants";
 import {
-  DefaultDropdownMenuOption,
   Dropdown,
   InputDropdownProps,
   Button,
+  DefaultAutocompleteOption,
 } from "@czi-sds/components";
 import { useComponentWidth } from "./components/common/hooks/useIsComponentPastBreakpoint";
 import { DEFAULT_ONTOLOGY_HEIGHT } from "../common/OntologyDagView/common/constants";
@@ -57,7 +57,7 @@ import { useComputationalMarkerGenesTableRowsAndFilters } from "./components/Mar
 import { useConnect } from "./connect";
 import { SDSOrgan } from "src/views/CellGuide/components/CellGuideCard/types";
 import { getCellTypeLink } from "src/views/CellGuide/common/utils";
-import { TextField } from "@mui/material";
+import { AutocompleteValue, TextField } from "@mui/material";
 
 export const SDS_INPUT_DROPDOWN_PROPS: InputDropdownProps = {
   sdsStyle: "square",
@@ -135,7 +135,8 @@ export default function CellGuideCard({
   const titleizedCellTypeName = titleize(cellTypeName);
 
   const handleChangeOrgan = (
-    option: DefaultDropdownMenuOption | null = null
+    _: React.SyntheticEvent, // event
+    option: AutocompleteValue<DefaultAutocompleteOption, false, false, false>
   ) => {
     const { name, id } = (option || {}) as SDSOrgan;
 
@@ -154,7 +155,10 @@ export default function CellGuideCard({
     router.push(url, url, { scroll: false });
   };
 
-  const handleChangeOrganism = (option: DefaultDropdownMenuOption | null) => {
+  const handleChangeOrganism = (
+    _: React.SyntheticEvent,
+    option: AutocompleteValue<DefaultAutocompleteOption, false, false, false>
+  ) => {
     if (!option || option.name === selectedOrganism.name) return;
     setSelectedOrganism(option);
     track(EVENTS.CG_SELECT_ORGANISM, { organism: option.name });
@@ -213,7 +217,7 @@ export default function CellGuideCard({
   }). ${rawSeoDescription}`;
 
   const OrganismSelectorDropdown = (
-    <Dropdown
+    <Dropdown<DefaultAutocompleteOption, false, false, false>
       InputDropdownProps={SDS_INPUT_DROPDOWN_PROPS}
       search
       label={selectedOrganism?.name}
@@ -226,7 +230,7 @@ export default function CellGuideCard({
   const dropdownComponents = (
     <CellGuideCardHeaderInnerWrapper>
       {OrganismSelectorDropdown}
-      <Dropdown
+      <Dropdown<DefaultAutocompleteOption, false, false, false>
         InputDropdownProps={SDS_INPUT_DROPDOWN_PROPS}
         search
         label={tissueName}
diff --git a/frontend/src/views/CellGuide/components/TissueCard/index.tsx b/frontend/src/views/CellGuide/components/TissueCard/index.tsx
@@ -41,9 +41,10 @@ import { StyledOntologyId } from "../CellGuideCard/components/Description/style"
 import { useComponentWidth } from "../CellGuideCard/components/common/hooks/useIsComponentPastBreakpoint";
 import { track } from "src/common/analytics";
 import { EVENTS } from "src/common/analytics/events";
-import { DefaultDropdownMenuOption, Dropdown } from "@czi-sds/components";
+import { DefaultAutocompleteOption, Dropdown } from "@czi-sds/components";
 import { SDS_INPUT_DROPDOWN_PROPS } from "../CellGuideCard";
 import { ORGANISM_NAME_TO_TAXON_ID_MAPPING } from "src/common/queries/cellGuide";
+import { AutocompleteValue } from "@mui/base";
 
 interface Props {
   // From getServerSideProps
@@ -65,7 +66,10 @@ export default function TissueCard({ description, name }: Props): JSX.Element {
     Object.keys(ORGANISM_NAME_TO_TAXON_ID_MAPPING)[0]
   );
 
-  const handleChangeOrganism = (option: DefaultDropdownMenuOption | null) => {
+  const handleChangeOrganism = (
+    _: React.SyntheticEvent,
+    option: AutocompleteValue<DefaultAutocompleteOption, false, false, false>
+  ) => {
     if (!option || option.name === tissueCardSelectedOrganism) return;
     setTissueCardSelectedOrganism(option.name);
     track(EVENTS.CG_SELECT_ORGANISM, { organism: option.name });
@@ -185,7 +189,7 @@ export default function TissueCard({ description, name }: Props): JSX.Element {
                     />
                   </a>
                 </TissueCardHeaderInnerWrapper>
-                <Dropdown
+                <Dropdown<DefaultAutocompleteOption, false, false, false>
                   InputDropdownProps={SDS_INPUT_DROPDOWN_PROPS}
                   search
                   label={tissueCardSelectedOrganism}
diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/ColorScale/connect.ts b/frontend/src/views/WheresMyGeneV2/components/Filters/components/ColorScale/connect.ts
@@ -8,7 +8,8 @@ import { COLOR_SCALE_OPTIONS } from "./constants";
 import { track } from "src/common/analytics";
 import { EVENTS } from "src/common/analytics/events";
 import { selectSortBy } from "src/views/WheresMyGeneV2/common/store/actions";
-import { Props } from "./types";
+import { ColorScaleOptionType, Props } from "./types";
+import { AutocompleteValue } from "@mui/base";
 
 export const useConnect = ({
   setIsScaled,
@@ -26,7 +27,8 @@ export const useConnect = ({
   }, [sortBy]);
 
   function colorScaleOnChange(
-    value: { id?: SORT_BY; name: string } | null
+    _: React.SyntheticEvent, // event
+    value: AutocompleteValue<ColorScaleOptionType, false, false, false>
   ): void {
     if (!dispatch || !value || colorScaledOption.name === value.name) return;
     track(EVENTS.WMG_OPTION_SELECT_COLOR_SCALE, {
diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/ColorScale/index.tsx b/frontend/src/views/WheresMyGeneV2/components/Filters/components/ColorScale/index.tsx
@@ -10,7 +10,11 @@ import {
 } from "src/views/WheresMyGeneV2/components/CellInfoSideBar/style";
 import { COLOR_SCALE_TOOLTIP_TEXT } from "src/views/WheresMyGeneV2/common/constants";
 import { COLOR_SCALE_OPTIONS } from "./constants";
-import { DEFAULT_INPUT_DROPDOWN_PROPS, Props } from "./types";
+import {
+  ColorScaleOptionType,
+  DEFAULT_INPUT_DROPDOWN_PROPS,
+  Props,
+} from "./types";
 import { useConnect } from "./connect";
 
 export default function ColorScale({ setIsScaled }: Props): JSX.Element {
@@ -42,7 +46,10 @@ export default function ColorScale({ setIsScaled }: Props): JSX.Element {
         </Tooltip>
       </LabelWrapper>
 
-      <StyledDropdown
+      {/* Generic variables are
+          <T: Dropdown's option type, Multiple, DisableClearable, FreeSolo>
+      */}
+      <StyledDropdown<ColorScaleOptionType, false, false, false>
         data-testid="color-scale-dropdown"
         onChange={colorScaleOnChange} // TODO(SDSv20): Come back to this
         label={colorScaledOption.name}
diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/ColorScale/types.ts b/frontend/src/views/WheresMyGeneV2/components/Filters/components/ColorScale/types.ts
@@ -1,4 +1,5 @@
 import { InputDropdownProps as IInputDropdownProps } from "@czi-sds/components";
+import { SORT_BY } from "src/views/WheresMyGeneV2/common/types";
 
 export interface Props {
   setIsScaled: (prevIsScaled: boolean) => void;
@@ -7,3 +8,5 @@ export interface Props {
 export const DEFAULT_INPUT_DROPDOWN_PROPS: Partial<IInputDropdownProps> = {
   sdsStyle: "square",
 };
+
+export type ColorScaleOptionType = { id?: SORT_BY; name: string };
diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Compare/connect.ts b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Compare/connect.ts
@@ -1,5 +1,5 @@
 import {
-  DefaultDropdownMenuOption,
+  DefaultAutocompleteOption,
   InputDropdownProps as IInputDropdownProps,
 } from "@czi-sds/components";
 import { useCallback, useContext, useMemo } from "react";
@@ -13,6 +13,7 @@ import {
 } from "src/views/WheresMyGeneV2/common/store";
 import { selectCompare } from "src/views/WheresMyGeneV2/common/store/actions";
 import { Props } from "./types";
+import { AutocompleteValue } from "@mui/base";
 
 const DEFAULT_INPUT_DROPDOWN_PROPS: Partial<IInputDropdownProps> = {
   sdsStyle: "square",
@@ -30,12 +31,15 @@ export const useConnect = ({ areFiltersDisabled }: Props) => {
     [areFiltersDisabled]
   );
 
-  const optionLabel: DefaultDropdownMenuOption | undefined = useMemo(() => {
+  const optionLabel: DefaultAutocompleteOption | undefined = useMemo(() => {
     return COMPARE_OPTIONS.find((option) => option.id === compare);
   }, [compare]);
 
   const handleChange = useCallback(
-    (value: DefaultDropdownMenuOption | null) => {
+    (
+      _: React.SyntheticEvent,
+      value: AutocompleteValue<DefaultAutocompleteOption, false, false, false>
+    ) => {
       if (!dispatch || !value || optionLabel === value) return;
 
       track(EVENTS.WMG_OPTION_SELECT_GROUP_BY, {
diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Compare/index.tsx b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Compare/index.tsx
@@ -5,7 +5,7 @@ import {
   GROUP_BY_TOOLTIP_TEXT,
   SELECT_TISSUE_GENE_TEXT,
 } from "src/views/WheresMyGeneV2/common/constants";
-import { Tooltip } from "@czi-sds/components";
+import { DefaultAutocompleteOption, Tooltip } from "@czi-sds/components";
 import {
   StyledIconImage,
   StyledTooltip,
@@ -54,7 +54,7 @@ export default function Compare({ areFiltersDisabled }: Props): JSX.Element {
         </Label>
       </LabelWrapper>
       <Wrapper>
-        <StyledDropdown
+        <StyledDropdown<DefaultAutocompleteOption, false, false, false>
           data-testid="compare-dropdown"
           onChange={handleChange} // TODO(SDSv20): Come back tot his
           label={optionLabel?.name || "None"}
diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/connect.ts b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/connect.ts
@@ -9,6 +9,7 @@ import { selectOrganism } from "src/views/WheresMyGeneV2/common/store/actions";
 import { track } from "src/common/analytics";
 import { EVENTS } from "src/common/analytics/events";
 import { selectHasCustomFiltersOrGenesSelected } from "src/views/WheresMyGeneV2/common/store/selectors";
+import { AutocompleteValue } from "@mui/base";
 
 export const useConnect = () => {
   const dispatch = useContext(DispatchContext);
@@ -51,7 +52,10 @@ export const useConnect = () => {
     return result;
   }, [organisms]);
 
-  function handleOnChange(organism: IOrganism | null): void {
+  function handleOnChange(
+    _: React.SyntheticEvent,
+    organism: AutocompleteValue<IOrganism, false, false, false>
+  ): void {
     if (!dispatch || !organism || selectedOrganismId === organism.id) return;
 
     setPendingOrganism(organism);
diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/index.tsx b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/index.tsx
diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/connect.ts b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/connect.ts
diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/index.tsx b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/index.tsx
diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/types.ts b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/types.ts

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ import {`
`7`	`7`	`import { css } from "@emotion/react";`
`8`	`8`
`9`	`9`	`interface DropdownFormProps extends CommonThemeProps {`
`10`		`- isSelected: boolean;`
	`10`	`+ isSelected?: boolean;`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	const scrollbar = css`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import { MoreButton } from "src/components/common/MoreDropdown/style";`
`4`	`4`
`5`	`5`	`interface Props {`
`6`	`6`	`popoverProps?: PopoverProps;`
`7`		`- buttonProps?: Partial<ButtonIconProps<"dotsHorizontal", "small">>; // TODO(SDSv20): unsure what the error is`
	`7`	`+ buttonProps?: Partial<ButtonIconProps>;`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`const MoreDropdown = ({`