big refactor to move state to DeckSetupTools so that clear button han…

…dles resetting categories and search bar
Opentrons · Nov 19, 2024 · ef9c8d2 · ef9c8d2
1 parent f631b83
commit ef9c8d2
Show file tree

Hide file tree

Showing 5 changed files with 251 additions and 219 deletions.
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupTools.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupTools.tsx
@@ -52,11 +52,11 @@ import { getDismissedHints } from '../../../tutorial/selectors'
 import { createContainerAboveModule } from '../../../step-forms/actions/thunks'
 import { ConfirmDeleteStagingAreaModal } from '../../../organisms'
 import { BUTTON_LINK_STYLE } from '../../../atoms'
-import { FIXTURES, MOAM_MODELS } from './constants'
 import { getSlotInformation } from '../utils'
-import { getModuleModelsBySlot, getDeckErrors } from './utils'
-import { MagnetModuleChangeContent } from './MagnetModuleChangeContent'
+import { ALL_ORDERED_CATEGORIES, FIXTURES, MOAM_MODELS } from './constants'
 import { LabwareTools } from './LabwareTools'
+import { MagnetModuleChangeContent } from './MagnetModuleChangeContent'
+import { getModuleModelsBySlot, getDeckErrors } from './utils'
 
 import type { ModuleModel } from '@opentrons/shared-data'
 import type { ThunkDispatch } from '../../../types'
@@ -71,6 +71,8 @@ interface DeckSetupToolsProps {
   } | null
 }
 
+export type CategoryExpand = Record<string, boolean>
+
 export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
   const { onCloseClick, setHoveredLabware, onDeckProps } = props
   const { t, i18n } = useTranslation(['starting_deck_state', 'shared'])
@@ -117,13 +119,45 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
   const [tab, setTab] = useState<'hardware' | 'labware'>(
     moduleModels?.length === 0 || slot === 'offDeck' ? 'labware' : 'hardware'
   )
+  const allCategoriesExpanded = ALL_ORDERED_CATEGORIES.reduce<CategoryExpand>(
+    (acc, category) => {
+      return { ...acc, [category]: true }
+    },
+    {}
+  )
+  const allCategoriesCollapsed = ALL_ORDERED_CATEGORIES.reduce<CategoryExpand>(
+    (acc, category) => {
+      return { ...acc, [category]: false }
+    },
+    {}
+  )
+  const [
+    areCategoriesExpanded,
+    setAreCategoriesExpanded,
+  ] = useState<CategoryExpand>(allCategoriesCollapsed)
+  const [searchTerm, setSearchTerm] = useState<string>('')
+
+  useEffect(() => {
+    if (searchTerm !== '') {
+      setAreCategoriesExpanded(allCategoriesExpanded)
+    } else {
+      setAreCategoriesExpanded(allCategoriesCollapsed)
+    }
+  }, [searchTerm])
+
   const hasMagneticModule = Object.values(deckSetup.modules).some(
     module => module.type === MAGNETIC_MODULE_TYPE
   )
   const moduleOnSlotIsMagneticModuleV1 =
     Object.values(deckSetup.modules).find(module => module.slot === slot)
       ?.model === MAGNETIC_MODULE_V1
 
+  const handleCollapseAllCategories = (): void => {
+    setAreCategoriesExpanded(allCategoriesCollapsed)
+  }
+  const handleResetSearchTerm = (): void => {
+    setSearchTerm('')
+  }
   const changeModuleWarning = useBlockingHint({
     hintKey: 'change_magnet_module_model',
     handleCancel: () => {
@@ -207,6 +241,11 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
     )
   }
 
+  const handleResetLabwareTools = (): void => {
+    handleCollapseAllCategories()
+    handleResetSearchTerm()
+  }
+
   const handleClear = (): void => {
     onDeckProps?.setHoveredModule(null)
     onDeckProps?.setHoveredFixture(null)
@@ -242,7 +281,11 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
       }
     }
     handleResetToolbox()
+    handleResetLabwareTools()
     setSelectedHardware(null)
+    if (selectedHardware != null) {
+      setTab('hardware')
+    }
   }
   const handleConfirm = (): void => {
     //  clear entities first before recreating them
@@ -548,7 +591,15 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
               )}
             </Flex>
           ) : (
-            <LabwareTools setHoveredLabware={setHoveredLabware} slot={slot} />
+            <LabwareTools
+              setHoveredLabware={setHoveredLabware}
+              slot={slot}
+              searchTerm={searchTerm}
+              setSearchTerm={setSearchTerm}
+              areCategoriesExpanded={areCategoriesExpanded}
+              setAreCategoriesExpanded={setAreCategoriesExpanded}
+              handleReset={handleResetLabwareTools}
+            />
           )}
         </Flex>
       </Toolbox>