add flex stacker overflow menu

app/src/organisms/ModuleCard/FlexStackerModuleData.tsx

@@ -0,0 +1,59 @@
+import { useTranslation } from 'react-i18next'
+import { StyledText, COLORS } from '@opentrons/components'
+import { StatusLabel } from '/app/atoms/StatusLabel'
+
+import type { FlexStackerModule } from '/app/redux/modules/types'
+
+interface FlexStackerModuleProps {
+  moduleData: FlexStackerModule['data']
+}
+
+export const FlexStackerModuleData = (
+  props: FlexStackerModuleProps
+): JSX.Element | null => {
+  const { moduleData } = props
+  const { t, i18n } = useTranslation(['device_details', 'shared'])
+
+  const StatusLabelProps = {
+    status: 'Idle',
+    backgroundColor: COLORS.grey30,
+    iconColor: COLORS.grey60,
+    textColor: COLORS.grey60,
+    pulse: false,
+  }
+  switch (moduleData.status) {
+    case 'storing': 
+    case 'dispensing': {
+      StatusLabelProps.status = moduleData.status
+      StatusLabelProps.backgroundColor = COLORS.blue30
+      StatusLabelProps.iconColor = COLORS.blue60
+      StatusLabelProps.textColor = COLORS.blue60
+      break
+    }
+    case 'error': {
+      StatusLabelProps.status = 'Error'
+      StatusLabelProps.backgroundColor = COLORS.yellow30
+      StatusLabelProps.iconColor = COLORS.yellow60
+      StatusLabelProps.textColor = COLORS.yellow60
+      break
+    }
+  }
+  const lidDisplayStatus =
+    moduleData.hopperDoorState === 'opened'
+      ? i18n.format(t('shared:closed'), 'capitalize')
+      : i18n.format(t('shared:open'), 'capitalize')
+
+  return (
+    <>
+      <StatusLabel {...StatusLabelProps} />
+      <StyledText
+        desktopStyle="bodyDefaultRegular"
+        data-testid="abs_module_data"
+      >
+        {t('abs_reader_lid_status', {
+          status: lidDisplayStatus,
+        })}
+      </StyledText>
+    </>
+  )
+}

app/src/organisms/ModuleCard/FlexStackerModuleSlideout.tsx

@@ -0,0 +1,43 @@
+import { useTranslation } from 'react-i18next'
+import { getModuleDisplayName } from '@opentrons/shared-data'
+import { SPACING, LegacyStyledText, TYPOGRAPHY } from '@opentrons/components'
+import { Slideout } from '/app/atoms/Slideout'
+
+import type { FlexStackerModule } from '/app/redux/modules/types'
+
+interface FlexStackerModuleSlideoutProps {
+  module: FlexStackerModule
+  onCloseClick: () => unknown
+  isExpanded: boolean
+}
+
+export const FlexStackerModuleSlideout = (
+  props: FlexStackerModuleSlideoutProps
+): JSX.Element | null => {
+  const { module, onCloseClick, isExpanded } = props
+  const { t } = useTranslation('device_details')
+  const moduleName = getModuleDisplayName(module.moduleModel)
+
+  const handleCloseSlideout = (): void => {
+    onCloseClick()
+  }
+
+  return (
+    <Slideout
+      title={t('absorbance_reader', {
+        name: moduleName,
+      })}
+      onCloseClick={handleCloseSlideout}
+      isExpanded={isExpanded}
+    >
+      <LegacyStyledText
+        fontWeight={TYPOGRAPHY.fontWeightRegular}
+        fontSize={TYPOGRAPHY.fontSizeP}
+        paddingTop={SPACING.spacing4}
+        data-testid={`FlexStackerModuleSlideout_title_${module.serialNumber}`}
+      >
+        {t('set_absorbance_reader')}
+      </LegacyStyledText>
+    </Slideout>
+  )
+}

app/src/organisms/ModuleCard/ModuleOverflowMenu.tsx

@@ -17,6 +17,7 @@ import {
   MODULE_MODELS_OT2_ONLY,
   TEMPERATURE_MODULE_TYPE,
   THERMOCYCLER_MODULE_TYPE,
+  FLEX_STACKER_MODULE_TYPE,
 } from '@opentrons/shared-data'
 import { useCurrentRunId, useRunStatuses } from '/app/resources/runs'
 import { useIsLegacySessionInProgress } from '/app/resources/legacy_sessions'
@@ -121,6 +122,7 @@ export const ModuleOverflowMenu = (
       <MenuList>
         {isFlex &&
         module.moduleType !== ABSORBANCE_READER_TYPE &&
+        module.moduleType !== FLEX_STACKER_MODULE_TYPE &&
         !MODULE_MODELS_OT2_ONLY.some(
           modModel => modModel === module.moduleModel
         ) ? (

app/src/organisms/ModuleCard/hooks.tsx

@@ -369,6 +369,15 @@ export function useModuleOverflowMenu(
         onClick: handleAboutClick,
       },
     ],
+    flexStackerModuleType: [
+      {
+        setSetting: t('overflow_menu_about'),
+        isSecondary: false,
+        isSettingDisabled: false,
+        menuButtons: [],
+        onClick: handleAboutClick,
+      },
+    ],
   }
 
   return {

app/src/organisms/ModuleCard/index.tsx

@@ -77,6 +77,7 @@ import type { State, Dispatch } from '/app/redux/types'
 import type { RequestState } from '/app/redux/robot-api/types'
 import { AbsorbanceReaderData } from './AbsorbanceReaderData'
 import { AbsorbanceReaderSlideout } from './AbsorbanceReaderSlideout'
+import { FlexStackerModuleData } from './FlexStackerModuleData'
 
 interface ModuleCardProps {
   module: AttachedModule
@@ -215,6 +216,11 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => {
       moduleData = <AbsorbanceReaderData moduleData={module.data} />
       break
     }
+
+    case FLEX_STACKER_MODULE_TYPE: {
+      moduleData = <FlexStackerModuleData moduleData={module.data} />
+      break
+    }
   }
 
   const handleMenuItemClick = (isSecondary: boolean = false): void => {