fix(protocol-designer): fix labware tools filtering and expand/collap…

…se behavior (#16889)

This PR addresses several functional issues with our LabwareTools
component, produced when adding labware to the starting deck state.
Here, I add filtering to populated expanded categories, allow
independent expand/collapse toggling for multiple categories
simultaneously, and auto expand/collapse all categories based on the
state of the current search term.

NOTE: This component is pretty bloated as is, and I think we can address
condensing filtering logic and improving performance in a followup.
Also, I notice a ton of rerenders after mounting— I will address in a
followup.

Closes RQA-3590

components/src/atoms/ListButton/ListButtonChildren/ListButtonAccordionContainer.tsx

@@ -16,7 +16,7 @@ export function ListButtonAccordionContainer(
   const { id, children } = props
 
   return (
-    <Flex key={id} flexDirection={DIRECTION_COLUMN}>
+    <Flex key={id} flexDirection={DIRECTION_COLUMN} width="100%">
       {children}
     </Flex>
   )

protocol-designer/src/assets/localization/en/starting_deck_state.json

@@ -1,6 +1,6 @@
 {
   "adapter_compatible_lab": "Adapter compatible labware",
-  "adapter": "Adapter",
+  "adapter": "Adapters",
   "add_fixture": "Add a fixture",
   "add_hardware_labware": "Add hardware/labware",
   "add_hw_lw": "Add hardware/labware",
@@ -9,7 +9,7 @@
   "add_module": "Add a module",
   "add_rest": "Add labware and liquids to complete deck setup",
   "alter_pause": "You may also need to alter the time you pause while your magnet is engaged.",
-  "aluminumBlock": "Aluminum block",
+  "aluminumBlock": "Aluminum blocks",
   "clear_labware": "Clear labware",
   "clear_slot": "Clear slot",
   "clear": "Clear",
@@ -47,16 +47,16 @@
   "protocol_starting_deck": "Protocol starting deck",
   "read_more_gen1_gen2": "Read more about the differences between GEN1 and GEN2 Magnetic Modules",
   "rename_lab": "Rename labware",
-  "reservoir": "Reservoir",
+  "reservoir": "Reservoirs",
   "shift_click_to_select_all": "Shift + Click to select all",
   "starting_deck_state": "Starting deck state",
   "tc_slots_occupied_flex": "The Thermocycler needs slots A1 and B1. Slot A1 is occupied",
   "tc_slots_occupied_ot2": "The Thermocycler needs slots 7, 8, 10, and 11. One or more of those slots is occupied",
-  "tipRack": "Tip rack",
+  "tipRack": "Tip racks",
   "trash_required": "A trash bin or waste chute is required",
-  "tubeRack": "Tube rack",
+  "tubeRack": "Tube racks",
   "untitled_protocol": "Untitled protocol",
   "upload_custom_labware": "Upload custom labware",
   "we_added_hardware": "We've added your deck hardware!",
-  "wellPlate": "Well plate"
+  "wellPlate": "Well plates"
 }

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,41 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
   const [tab, setTab] = useState<'hardware' | 'labware'>(
     moduleModels?.length === 0 || slot === 'offDeck' ? 'labware' : 'hardware'
   )
+
+  const setAllCategories = (state: boolean): Record<string, boolean> =>
+    ALL_ORDERED_CATEGORIES.reduce<Record<string, boolean>>(
+      (acc, category) => ({ ...acc, [category]: state }),
+      {}
+    )
+  const allCategoriesExpanded = setAllCategories(true)
+  const allCategoriesCollapsed = setAllCategories(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 +237,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 +277,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 +587,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>