refactor(app): Untangle labware organisms

app/src/local-resources/labware/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useAllLabware'

app/src/local-resources/labware/hooks/useAllLabware.ts

@@ -0,0 +1,50 @@
+import { useSelector } from 'react-redux'
+import { getValidCustomLabware } from '/app/redux/custom-labware'
+import { getAllDefinitions } from '../utils'
+import type { LabwareSort, LabwareFilter, LabwareDefAndDate } from '../types'
+
+export function useAllLabware(
+  sortBy: LabwareSort,
+  filterBy: LabwareFilter
+): LabwareDefAndDate[] {
+  const fullLabwareList: LabwareDefAndDate[] = []
+  const labwareDefinitions = getAllDefinitions()
+  labwareDefinitions.forEach(def => fullLabwareList.push({ definition: def }))
+  const customLabwareList = useSelector(getValidCustomLabware)
+  customLabwareList.forEach(customLabware =>
+    'definition' in customLabware
+      ? fullLabwareList.push({
+          modified: customLabware.modified,
+          definition: customLabware.definition,
+          filename: customLabware.filename,
+        })
+      : null
+  )
+  const sortLabware = (a: LabwareDefAndDate, b: LabwareDefAndDate): number => {
+    if (
+      a.definition.metadata.displayName.toUpperCase() <
+      b.definition.metadata.displayName.toUpperCase()
+    ) {
+      return sortBy === 'alphabetical' ? -1 : 1
+    }
+    if (
+      a.definition.metadata.displayName.toUpperCase() >
+      b.definition.metadata.displayName.toUpperCase()
+    ) {
+      return sortBy === 'alphabetical' ? 1 : -1
+    }
+    return 0
+  }
+
+  if (filterBy === 'customLabware') {
+    return (customLabwareList as LabwareDefAndDate[]).sort(sortLabware)
+  }
+  fullLabwareList.sort(sortLabware)
+  if (filterBy !== 'all') {
+    return fullLabwareList.filter(
+      labwareItem =>
+        labwareItem.definition.metadata.displayCategory === filterBy
+    )
+  }
+  return fullLabwareList
+}

app/src/local-resources/labware/index.ts

@@ -0,0 +1,3 @@
+export * from './hooks'
+export * from './utils'
+export type * from './types'

app/src/pages/Desktop/Labware/types.ts → app/src/local-resources/labware/types.ts

@@ -5,35 +5,12 @@ import type {
   LabwareBrand,
 } from '@opentrons/shared-data'
 
-export type {
-  LabwareDefinition2 as LabwareDefinition,
-  LabwareParameters,
-  LabwareOffset,
-  LabwareWell,
-  LabwareWellShapeProperties,
-  LabwareWellProperties,
-  LabwareWellMap,
-  LabwareWellGroupMetadata,
-  LabwareVolumeUnits,
-  LabwareDisplayCategory,
-  LabwareBrand,
-} from '@opentrons/shared-data'
-
-export interface LabwareWellGroupProperties {
-  xOffsetFromLeft: number
-  yOffsetFromTop: number
-  xSpacing: number | null
-  ySpacing: number | null
-  wellCount: number
-  shape: LabwareWellShapeProperties | null
-  depth: number | null
-  totalLiquidVolume: number | null
-  metadata: LabwareWellGroupMetadata
-  brand: LabwareBrand | null
+export interface LabwareDefAndDate {
+  definition: LabwareDefinition
+  modified?: number
+  filename?: string
 }
 
-export type LabwareList = LabwareDefinition[]
-
 export type LabwareFilter =
   | 'all'
   | 'wellPlate'
@@ -45,3 +22,16 @@ export type LabwareFilter =
   | 'adapter'
 
 export type LabwareSort = 'alphabetical' | 'reverse'
+
+export interface LabwareWellGroupProperties {
+  xOffsetFromLeft: number
+  yOffsetFromTop: number
+  xSpacing: number | null
+  ySpacing: number | null
+  wellCount: number
+  shape: LabwareWellShapeProperties | null
+  depth: number | null
+  totalLiquidVolume: number | null
+  metadata: LabwareWellGroupMetadata
+  brand: LabwareBrand | null
+}

app/src/pages/Desktop/Labware/helpers/definitions.ts → app/src/local-resources/labware/utils/getAllDefinitions.ts

@@ -1,9 +1,9 @@
 import groupBy from 'lodash/groupBy'
 import { LABWAREV2_DO_NOT_LIST } from '@opentrons/shared-data'
-import { getAllDefs } from './getAllDefs'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import { getAllDefs } from './getAllDefs'
 
-const getOnlyLatestDefs = (
+export const getOnlyLatestDefs = (
   labwareList: LabwareDefinition2[]
 ): LabwareDefinition2[] => {
   // group by namespace + loadName

app/src/local-resources/labware/utils/index.ts

@@ -0,0 +1 @@
+export * from './getAllDefinitions'

app/src/organisms/AddCustomLabwareSlideout/__tests__/AddCustomLabwareSlideout.test.tsx → app/src/organisms/Desktop/Labware/AddCustomLabwareSlideout/__tests__/AddCustomLabwareSlideout.test.tsx

@@ -11,7 +11,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { AddCustomLabwareSlideout } from '..'
 
 vi.mock('/app/redux/custom-labware')
-vi.mock('/app/pages/Desktop/Labware/helpers/getAllDefs')
+vi.mock('/app/local-resources/labware')
 vi.mock('/app/redux/analytics')
 
 let mockTrackEvent: any

app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx → app/src/organisms/Desktop/Labware/LabwareCard/CustomLabwareOverflowMenu.tsx

@@ -30,7 +30,7 @@ import {
 } from '@opentrons/components'
 
 import { Divider } from '/app/atoms/structure'
-import { getTopPortalEl } from '../../App/portal'
+import { getTopPortalEl } from '/app/App/portal'
 import {
   deleteCustomLabwareFile,
   openCustomLabwareDirectory,

app/src/organisms/LabwareCard/__tests__/LabwareCard.test.tsx → app/src/organisms/Desktop/Labware/LabwareCard/__tests__/LabwareCard.test.tsx

@@ -3,14 +3,14 @@ import { screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import { renderWithProviders, nestedTextMatcher } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
-import { useAllLabware } from '/app/pages/Desktop/Labware/hooks'
+import { useAllLabware } from '/app/local-resources/labware'
 import { mockDefinition } from '/app/redux/custom-labware/__fixtures__'
 import { CustomLabwareOverflowMenu } from '../CustomLabwareOverflowMenu'
 import { LabwareCard } from '..'
 
 import type * as OpentronsComponents from '@opentrons/components'
 
-vi.mock('/app/pages/Desktop/Labware/hooks')
+vi.mock('/app/local-resources/labware')
 vi.mock('../CustomLabwareOverflowMenu')
 
 vi.mock('@opentrons/components', async importOriginal => {

app/src/organisms/LabwareCard/index.tsx → app/src/organisms/Desktop/Labware/LabwareCard/index.tsx

@@ -23,7 +23,7 @@ import {
 
 import { UNIVERSAL_FLAT_ADAPTER_X_DIMENSION } from '../LabwareDetails/Gallery'
 import { CustomLabwareOverflowMenu } from './CustomLabwareOverflowMenu'
-import type { LabwareDefAndDate } from '/app/pages/Desktop/Labware/hooks'
+import type { LabwareDefAndDate } from '/app/local-resources/labware'
 
 export interface LabwareCardProps {
   labware: LabwareDefAndDate

app/src/organisms/LabwareDetails/Dimensions.tsx → app/src/organisms/Desktop/Labware/LabwareDetails/Dimensions.tsx

@@ -4,7 +4,7 @@ import round from 'lodash/round'
 import { Box, SPACING, getFootprintDiagram } from '@opentrons/components'
 import { LabeledValue } from './StyledComponents/LabeledValue'
 import { ExpandingTitle } from './StyledComponents/ExpandingTitle'
-import type { LabwareDefinition } from '/app/pages/Desktop/Labware/types'
+import type { LabwareDefinition2 as LabwareDefinition } from '@opentrons/shared-data'
 
 const toFixed = (n: number): string => round(n, 2).toFixed(2)
 

app/src/organisms/LabwareDetails/Gallery.tsx → app/src/organisms/Desktop/Labware/LabwareDetails/Gallery.tsx

@@ -11,9 +11,10 @@ import {
   SPACING_AUTO,
   SPACING,
 } from '@opentrons/components'
+
 import { labwareImages } from './labware-images'
 
-import type { LabwareDefinition } from '/app/pages/Desktop/Labware/types'
+import type { LabwareDefinition2 as LabwareDefinition } from '@opentrons/shared-data'
 
 export const UNIVERSAL_FLAT_ADAPTER_X_DIMENSION = 127.4
 

app/src/organisms/LabwareDetails/InsertDetails.tsx → app/src/organisms/Desktop/Labware/LabwareDetails/InsertDetails.tsx

@@ -12,7 +12,7 @@ import { WellProperties } from './WellProperties'
 import { WellDimensions } from './WellDimensions'
 import { ManufacturerDetails } from './ManufacturerDetails'
 
-import type { LabwareDefinition } from '/app/pages/Desktop/Labware/types'
+import type { LabwareDefinition2 as LabwareDefinition } from '@opentrons/shared-data'
 
 export interface InsertDetailsProps {
   definition: LabwareDefinition

app/src/organisms/LabwareDetails/ManufacturerDetails.tsx → app/src/organisms/Desktop/Labware/LabwareDetails/ManufacturerDetails.tsx

@@ -12,7 +12,7 @@ import {
   SPACING,
   LegacyStyledText,
 } from '@opentrons/components'
-import type { LabwareBrand } from '/app/pages/Desktop/Labware/types'
+import type { LabwareBrand } from '@opentrons/shared-data'
 
 export interface ManufacturerDetailsProps {
   brand: LabwareBrand

app/src/organisms/LabwareDetails/WellDimensions.tsx → app/src/organisms/Desktop/Labware/LabwareDetails/WellDimensions.tsx

@@ -5,10 +5,8 @@ import { Box, SPACING, getMeasurementDiagram } from '@opentrons/components'
 import { LabeledValue } from './StyledComponents/LabeledValue'
 import { ExpandingTitle } from './StyledComponents/ExpandingTitle'
 
-import type {
-  LabwareWellGroupProperties,
-  LabwareParameters,
-} from '/app/pages/Desktop/Labware/types'
+import type { LabwareParameters } from '@opentrons/shared-data'
+import type { LabwareWellGroupProperties } from '/app/local-resources/labware'
 
 const toFixed = (n: number): string => round(n, 2).toFixed(2)
 

app/src/organisms/LabwareDetails/WellProperties.tsx → app/src/organisms/Desktop/Labware/LabwareDetails/WellProperties.tsx

@@ -13,11 +13,12 @@ import {
 } from '@opentrons/components'
 import { getDisplayVolume } from '@opentrons/shared-data'
 
+import type { LabwareWellGroupProperties } from '/app/local-resources/labware'
+
 import type {
-  LabwareDefinition,
-  LabwareWellGroupProperties,
+  LabwareDefinition2 as LabwareDefinition,
   LabwareVolumeUnits,
-} from '/app/pages/Desktop/Labware/types'
+} from '@opentrons/shared-data'
 
 export interface AllWellPropertiesProps {
   definition: LabwareDefinition

app/src/organisms/LabwareDetails/WellSpacing.tsx → app/src/organisms/Desktop/Labware/LabwareDetails/WellSpacing.tsx

@@ -5,7 +5,7 @@ import { getSpacingDiagram } from '@opentrons/components'
 import { LabeledValue } from './StyledComponents/LabeledValue'
 import { ExpandingTitle } from './StyledComponents/ExpandingTitle'
 
-import type { LabwareWellGroupProperties } from '/app/pages/Desktop/Labware/types'
+import type { LabwareWellGroupProperties } from '/app/local-resources/labware'
 
 const toFixed = (n: number): string => round(n, 2).toFixed(2)
 

app/src/organisms/LabwareDetails/__tests__/LabwareDetails.test.tsx → app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/LabwareDetails.test.tsx

@@ -4,7 +4,7 @@ import { describe, it, beforeEach, afterEach, vi, expect } from 'vitest'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
-import { useAllLabware } from '/app/pages/Desktop/Labware/hooks'
+import { useAllLabware } from '/app/local-resources/labware'
 import { mockOpentronsLabwareDetailsDefinition } from '/app/redux/custom-labware/__fixtures__'
 import { CustomLabwareOverflowMenu } from '../../LabwareCard/CustomLabwareOverflowMenu'
 import { Dimensions } from '../Dimensions'
@@ -17,7 +17,7 @@ import { WellSpacing } from '../WellSpacing'
 
 import { LabwareDetails } from '..'
 
-vi.mock('/app/pages/Desktop/Labware/hooks')
+vi.mock('/app/local-resources/labware')
 vi.mock('../../LabwareCard/CustomLabwareOverflowMenu')
 vi.mock('../Dimensions')
 vi.mock('../Gallery')

app/src/organisms/LabwareDetails/helpers/labels.ts → app/src/organisms/Desktop/Labware/LabwareDetails/helpers/labels.ts

@@ -1,8 +1,7 @@
 import uniqBy from 'lodash/uniqBy'
-import type {
-  LabwareWellGroupProperties,
-  LabwareDefinition,
-} from '/app/pages/Desktop/Labware/types'
+import type { LabwareWellGroupProperties } from '/app/local-resources/labware'
+import type { LabwareDefinition2 as LabwareDefinition } from '@opentrons/shared-data'
+
 const WELL_TYPE_BY_CATEGORY = {
   tubeRack: 'tube',
   tipRack: 'tip',

app/src/organisms/LabwareDetails/index.tsx → app/src/organisms/Desktop/Labware/LabwareDetails/index.tsx

@@ -35,7 +35,7 @@ import { ManufacturerDetails } from './ManufacturerDetails'
 import { InsertDetails } from './InsertDetails'
 import { Gallery } from './Gallery'
 import { CustomLabwareOverflowMenu } from '../LabwareCard/CustomLabwareOverflowMenu'
-import type { LabwareDefAndDate } from '/app/pages/Desktop/Labware/hooks'
+import type { LabwareDefAndDate } from '/app/local-resources/labware'
 
 const CLOSE_ICON_STYLE = css`
   border-radius: 50%;