refactor(protocol-designer) add components folder for atoms/molecules/organisms

protocol-designer/cypress/support/MixSteps.ts

@@ -106,8 +106,8 @@ enum MixLocators {
   PosFromBottom = '[id="TipPositionField_mix_touchTip_mmFromBottom"]',
   RenameBtn = 'button:contains("Rename")',
   StepNameInput = '[class="InputField__StyledInput-sc-1gyyvht-0 cLVzBl"]',
-  StepNotesInput = '[class="TextAreaField__StyledTextArea-sc-ug50vm-0 fSXuLe"]',
-  // StepNotesInput = '[data-testid="TextAreaField_step_notes"]',
+  // StepNotesInput = '[class="TextAreaField__StyledTextArea-sc-1mhuse7-0 hpcyEZ"]',
+  StepNotesInput = '[data-testid="TextAreaField"]',
   PosFromTop = '[data-testid="TipPositionField_mix_touchTip_mmFromTop"]',
 }
 

protocol-designer/src/ProtocolEditor.tsx

@@ -9,7 +9,7 @@ import {
   OVERFLOW_AUTO,
 } from '@opentrons/components'
 import { ProtocolRoutes } from './ProtocolRoutes'
-import { PortalRoot } from './organisms'
+import { PortalRoot } from './components/organisms'
 import { getEnableReactScan } from './feature-flags/selectors'
 
 export function ProtocolEditor(): JSX.Element {

protocol-designer/src/ProtocolRoutes.tsx

@@ -15,7 +15,7 @@ import {
   Kitchen,
   LabwareUploadModal,
   Navigation,
-} from './organisms'
+} from './components/organisms'
 import { ProtocolDesignerAppFallback } from './resources/ProtocolDesignerAppFallback'
 
 import type { RouteProps } from './types'

protocol-designer/src/components/atoms/index.ts

@@ -0,0 +1,5 @@
+export * from './constants'
+export * from './GlobalStyle'
+export * from './HandleEnter'
+export * from './Toggle'
+export * from './ToggleButton'

protocol-designer/src/molecules/CheckboxStepFormField/index.tsx → protocol-designer/src/components/molecules/CheckboxStepFormField/index.tsx

@@ -9,7 +9,7 @@ import {
 
 import type { ReactElement, ReactNode } from 'react'
 import type { Placement } from '@opentrons/components'
-import type { FieldProps } from '../../pages/Designer/ProtocolSteps/StepForm/types'
+import type { FieldProps } from '../../../pages/Designer/ProtocolSteps/StepForm/types'
 
 type CheckboxStepFormFieldProps = FieldProps & {
   children?: ReactElement

protocol-designer/src/molecules/DropdownStepFormField/index.tsx → protocol-designer/src/components/molecules/DropdownStepFormField/index.tsx

@@ -13,9 +13,9 @@ import {
   SPACING,
   StyledText,
 } from '@opentrons/components'
-import { selectDropdownItem } from '../../ui/steps/actions/actions'
+import { selectDropdownItem } from '../../../ui/steps/actions/actions'
 import type { DropdownOption } from '@opentrons/components'
-import type { FieldProps } from '../../pages/Designer/ProtocolSteps/StepForm/types'
+import type { FieldProps } from '../../../pages/Designer/ProtocolSteps/StepForm/types'
 
 export interface DropdownStepFormFieldProps extends FieldProps {
   options: DropdownOption[]

protocol-designer/src/molecules/EndUserAgreementFooter/__tests__/EndUserAgreementFooter.test.tsx → protocol-designer/src/components/molecules/EndUserAgreementFooter/__tests__/EndUserAgreementFooter.test.tsx

@@ -1,8 +1,8 @@
 import { describe, it, expect } from 'vitest'
 import { screen } from '@testing-library/react'
 
-import { i18n } from '../../../assets/localization'
-import { renderWithProviders } from '../../../__testing-utils__'
+import { i18n } from '../../../../assets/localization'
+import { renderWithProviders } from '../../../../__testing-utils__'
 import { EndUserAgreementFooter } from '..'
 
 const render = () => {

protocol-designer/src/molecules/InputStepFormField/index.tsx → protocol-designer/src/components/molecules/InputStepFormField/index.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { Flex, InputField, SPACING } from '@opentrons/components'
 import type { Dispatch, SetStateAction } from 'react'
-import type { FieldProps } from '../../pages/Designer/ProtocolSteps/types'
+import type { FieldProps } from '../../../pages/Designer/ProtocolSteps/types'
 
 interface InputStepFormFieldProps extends FieldProps {
   title: string

protocol-designer/src/molecules/LiquidButton/__tests__/LiquidButton.test.tsx → protocol-designer/src/components/molecules/LiquidButton/__tests__/LiquidButton.test.tsx

@@ -1,9 +1,9 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
-import { i18n } from '../../../assets/localization'
-import { renderWithProviders } from '../../../__testing-utils__'
-import { LiquidButton } from '../../../molecules/LiquidButton'
+import { i18n } from '../../../../assets/localization'
+import { renderWithProviders } from '../../../../__testing-utils__'
+import { LiquidButton } from '..'
 
 import type { ComponentProps } from 'react'
 

protocol-designer/src/molecules/TextAreaField/__tests__/TextAreaField.test.tsx → protocol-designer/src/components/molecules/TextAreaField/__tests__/TextAreaField.test.tsx

@@ -1,8 +1,8 @@
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 
-import { renderWithProviders } from '../../../__testing-utils__'
-import { TextAreaField } from '../'
+import { renderWithProviders } from '../../../../__testing-utils__'
+import { TextAreaField } from '..'
 
 import type { ComponentProps } from 'react'
 

protocol-designer/src/molecules/ToggleExpandStepFormField/index.tsx → protocol-designer/src/components/molecules/ToggleExpandStepFormField/index.tsx

@@ -11,8 +11,8 @@ import {
 } from '@opentrons/components'
 
 import { InputStepFormField } from '../InputStepFormField'
-import { ToggleButton } from '../../atoms/ToggleButton'
-import type { FieldProps } from '../../pages/Designer/ProtocolSteps/StepForm/types'
+import { ToggleButton } from '../../atoms'
+import type { FieldProps } from '../../../pages/Designer/ProtocolSteps/StepForm/types'
 
 interface ToggleExpandStepFormFieldProps extends FieldProps {
   title: string

protocol-designer/src/molecules/ToggleStepFormField/index.tsx → protocol-designer/src/components/molecules/ToggleStepFormField/index.tsx

@@ -12,7 +12,7 @@ import {
   useHoverTooltip,
 } from '@opentrons/components'
 
-import { ToggleButton } from '../../atoms/ToggleButton'
+import { ToggleButton } from '../../atoms'
 
 interface ToggleStepFormFieldProps {
   title: string

protocol-designer/src/organisms/Alerts/ErrorContents.tsx → protocol-designer/src/components/organisms/Alerts/ErrorContents.tsx

@@ -8,7 +8,7 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { LINK_BUTTON_STYLE } from '../../atoms'
-import { selectDesignerTab } from '../../file-data/actions'
+import { selectDesignerTab } from '../../../file-data/actions'
 
 import type { AlertLevel } from './types'
 

protocol-designer/src/organisms/Alerts/FormAlerts.tsx → protocol-designer/src/components/organisms/Alerts/FormAlerts.tsx

@@ -8,24 +8,24 @@ import {
   SPACING,
   StyledText,
 } from '@opentrons/components'
-import * as timelineWarningSelectors from '../../top-selectors/timelineWarnings'
-import { getSelectedStepId } from '../../ui/steps'
+import * as timelineWarningSelectors from '../../../top-selectors/timelineWarnings'
+import { getSelectedStepId } from '../../../ui/steps'
 import {
   actions as dismissActions,
   selectors as dismissSelectors,
-} from '../../dismiss'
-import { selectors as stepFormSelectors } from '../../step-forms'
+} from '../../../dismiss'
+import { selectors as stepFormSelectors } from '../../../step-forms'
 import {
   getVisibleFormErrors,
   getVisibleFormWarnings,
   getVisibleProfileFormLevelErrors,
-} from '../../pages/Designer/ProtocolSteps/StepForm/utils'
+} from '../../../pages/Designer/ProtocolSteps/StepForm/utils'
 import { WarningContents } from './WarningContents'
 
 import type { ReactNode } from 'react'
 import type { ProfileItem } from '@opentrons/step-generation'
-import type { StepFieldName } from '../../form-types'
-import type { ProfileFormError } from '../../steplist/formLevel/profileErrors'
+import type { StepFieldName } from '../../../form-types'
+import type { ProfileFormError } from '../../../steplist/formLevel/profileErrors'
 import type { MakeAlert } from './types'
 
 interface FormAlertsProps {

protocol-designer/src/organisms/Alerts/TerminalItemLink.tsx → protocol-designer/src/components/organisms/Alerts/TerminalItemLink.tsx

@@ -1,8 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
 import { Link } from '@opentrons/components'
-import { actions as stepsActions } from '../../ui/steps'
-import type { TerminalItemId } from '../../steplist'
+import { actions as stepsActions } from '../../../ui/steps'
+import type { TerminalItemId } from '../../../steplist'
 
 interface TerminalItemLinkProps {
   terminalId: TerminalItemId

protocol-designer/src/organisms/Alerts/TimelineAlerts.tsx → protocol-designer/src/components/organisms/Alerts/TimelineAlerts.tsx

@@ -8,7 +8,7 @@ import {
   Flex,
   StyledText,
 } from '@opentrons/components'
-import { getRobotStateTimeline } from '../../file-data/selectors'
+import { getRobotStateTimeline } from '../../../file-data/selectors'
 import { ErrorContents } from './ErrorContents'
 
 import type { StyleProps } from '@opentrons/components'

protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx → protocol-designer/src/components/organisms/Alerts/__tests__/FormAlerts.test.tsx

@@ -2,28 +2,28 @@ import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { FormAlerts } from '../FormAlerts'
-import { i18n } from '../../../assets/localization'
-import { renderWithProviders } from '../../../__testing-utils__'
+import { i18n } from '../../../../assets/localization'
+import { renderWithProviders } from '../../../../__testing-utils__'
 import {
   getDynamicFieldFormErrorsForUnsavedForm,
   getFormLevelErrorsForUnsavedForm,
   getHydratedUnsavedForm,
-} from '../../../step-forms/selectors'
-import { getFormWarningsForSelectedStep } from '../../../dismiss/selectors'
-import { getTimelineWarningsForSelectedStep } from '../../../top-selectors/timelineWarnings'
-import { getSelectedStepId } from '../../../ui/steps'
+} from '../../../../step-forms/selectors'
+import { getFormWarningsForSelectedStep } from '../../../../dismiss/selectors'
+import { getTimelineWarningsForSelectedStep } from '../../../../top-selectors/timelineWarnings'
+import { getSelectedStepId } from '../../../../ui/steps'
 import {
   dismissFormWarning,
   dismissTimelineWarning,
-} from '../../../dismiss/actions'
+} from '../../../../dismiss/actions'
 
 import type { ComponentProps } from 'react'
 
-vi.mock('../../../dismiss/actions')
-vi.mock('../../../ui/steps')
-vi.mock('../../../top-selectors/timelineWarnings')
-vi.mock('../../../dismiss/selectors')
-vi.mock('../../../step-forms/selectors')
+vi.mock('../../../../dismiss/actions')
+vi.mock('../../../../ui/steps')
+vi.mock('../../../../top-selectors/timelineWarnings')
+vi.mock('../../../../dismiss/selectors')
+vi.mock('../../../../step-forms/selectors')
 
 const render = (props: ComponentProps<typeof FormAlerts>) => {
   return renderWithProviders(<FormAlerts {...props} />, {

protocol-designer/src/organisms/Alerts/__tests__/TimelineAlerts.test.tsx → protocol-designer/src/components/organisms/Alerts/__tests__/TimelineAlerts.test.tsx

@@ -1,14 +1,14 @@
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
-import { i18n } from '../../../assets/localization'
-import { renderWithProviders } from '../../../__testing-utils__'
-import { getRobotStateTimeline } from '../../../file-data/selectors'
-import { selectDesignerTab } from '../../../file-data/actions'
+import { i18n } from '../../../../assets/localization'
+import { renderWithProviders } from '../../../../__testing-utils__'
+import { getRobotStateTimeline } from '../../../../file-data/selectors'
+import { selectDesignerTab } from '../../../../file-data/actions'
 import { TimelineAlerts } from '../TimelineAlerts'
 
-vi.mock('../../../file-data/selectors')
-vi.mock('../../../file-data/actions')
+vi.mock('../../../../file-data/selectors')
+vi.mock('../../../../file-data/actions')
 
 const render = () => {
   return renderWithProviders(<TimelineAlerts />, {

protocol-designer/src/organisms/AnnouncementModal/__tests__/AnnouncementModal.test.tsx → protocol-designer/src/components/organisms/AnnouncementModal/__tests__/AnnouncementModal.test.tsx

@@ -1,12 +1,12 @@
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { renderWithProviders } from '../../../__testing-utils__'
-import { i18n } from '../../../assets/localization'
-import { getLocalStorageItem, setLocalStorageItem } from '../../../persist'
+import { renderWithProviders } from '../../../../__testing-utils__'
+import { i18n } from '../../../../assets/localization'
+import { getLocalStorageItem, setLocalStorageItem } from '../../../../persist'
 import { useAnnouncements } from '../announcements'
 import { AnnouncementModal } from '../index'
 
-vi.mock('../../../persist')
+vi.mock('../../../../persist')
 vi.mock('../announcements')
 
 const render = () => {

protocol-designer/src/organisms/AnnouncementModal/announcements.tsx → protocol-designer/src/components/organisms/AnnouncementModal/announcements.tsx

@@ -13,16 +13,16 @@
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import magTempCombined from '../../assets/images/modules/magdeck_tempdeck_combined.png'
-import thermocycler from '../../assets/images/modules/thermocycler.png'
-import multiSelect from '../../assets/images/announcements/multi_select.gif'
-import batchEdit from '../../assets/images/announcements/batch_edit.gif'
-import heaterShaker from '../../assets/images/modules/heatershaker.png'
-import thermocyclerGen2 from '../../assets/images/modules/thermocycler_gen2.png'
-import liquidEnhancements from '../../assets/images/announcements/liquid-enhancements.gif'
-import opentronsFlex from '../../assets/images/OpentronsFlex.png'
-import deckConfiguration from '../../assets/images/deck_configuration.png'
-import absorbancePlateReaderImage from '../../assets/images/opentrons_absorbance_plate_reader.png'
+import magTempCombined from '../../../assets/images/modules/magdeck_tempdeck_combined.png'
+import thermocycler from '../../../assets/images/modules/thermocycler.png'
+import multiSelect from '../../../assets/images/announcements/multi_select.gif'
+import batchEdit from '../../../assets/images/announcements/batch_edit.gif'
+import heaterShaker from '../../../assets/images/modules/heatershaker.png'
+import thermocyclerGen2 from '../../../assets/images/modules/thermocycler_gen2.png'
+import liquidEnhancements from '../../../assets/images/announcements/liquid-enhancements.gif'
+import opentronsFlex from '../../../assets/images/OpentronsFlex.png'
+import deckConfiguration from '../../../assets/images/deck_configuration.png'
+import absorbancePlateReaderImage from '../../../assets/images/opentrons_absorbance_plate_reader.png'
 import { DOC_URL, RELEASE_NOTES_URL } from '../KnowledgeLink'
 import type { ReactNode } from 'react'
 
@@ -68,7 +68,11 @@
       announcementKey: 'modulesRequireRunAppUpdate',
       image: (
         <div css={modulesDiagramsRow}>
-          <img css={modulesDiagram} src={magTempCombined} />
+          <img
+            css={modulesDiagram}
+            src={magTempCombined}
+            alt="modules diagram"
+          />
         </div>
       ),
       heading: t('announcements.header', { pd: PD }),

protocol-designer/src/organisms/AnnouncementModal/index.tsx → protocol-designer/src/components/organisms/AnnouncementModal/index.tsx

@@ -13,7 +13,7 @@ import {
   setLocalStorageItem,
   getLocalStorageItem,
   localStorageAnnouncementKey,
-} from '../../persist'
+} from '../../../persist'
 import { useAnnouncements } from './announcements'
 
 interface AnnouncementModalProps {

protocol-designer/src/organisms/AssignLiquidsModal/LiquidCard.tsx → protocol-designer/src/components/organisms/AssignLiquidsModal/LiquidCard.tsx

@@ -19,13 +19,13 @@ import {
 } from '@opentrons/components'
 
 import { LINE_CLAMP_TEXT_STYLE } from '../../atoms'
-import { getEnableLiquidClasses } from '../../feature-flags/selectors'
-import { removeWellsContents } from '../../labware-ingred/actions'
-import { selectors as labwareIngredSelectors } from '../../labware-ingred/selectors'
-import { getLabwareEntities } from '../../step-forms/selectors'
-import * as wellContentsSelectors from '../../top-selectors/well-contents'
+import { getEnableLiquidClasses } from '../../../feature-flags/selectors'
+import { removeWellsContents } from '../../../labware-ingred/actions'
+import { selectors as labwareIngredSelectors } from '../../../labware-ingred/selectors'
+import { getLabwareEntities } from '../../../step-forms/selectors'
+import * as wellContentsSelectors from '../../../top-selectors/well-contents'
 
-import type { SelectedContainerId } from '../../labware-ingred/reducers'
+import type { SelectedContainerId } from '../../../labware-ingred/reducers'
 import type { LiquidInfo } from './LiquidToolbox'
 
 interface LiquidCardProps {

protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx → protocol-designer/src/components/organisms/AssignLiquidsModal/LiquidToolbox.tsx

@@ -19,26 +19,26 @@ import {
   Toolbox,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { getLiquidEntities } from '../../step-forms/selectors'
+import { getLiquidEntities } from '../../../step-forms/selectors'
 import { LINK_BUTTON_STYLE } from '../../atoms'
-import { selectors as labwareIngredSelectors } from '../../labware-ingred/selectors'
-import * as wellContentsSelectors from '../../top-selectors/well-contents'
-import * as fieldProcessors from '../../steplist/fieldLevel/processing'
-import * as labwareIngredActions from '../../labware-ingred/actions'
-import { getLiquidClassDisplayName } from '../../liquid-defs/utils'
-import { getSelectedWells } from '../../well-selection/selectors'
-import { getLabwareNicknamesById } from '../../ui/labware/selectors'
+import { selectors as labwareIngredSelectors } from '../../../labware-ingred/selectors'
+import * as wellContentsSelectors from '../../../top-selectors/well-contents'
+import * as fieldProcessors from '../../../steplist/fieldLevel/processing'
+import * as labwareIngredActions from '../../../labware-ingred/actions'
+import { getLiquidClassDisplayName } from '../../../liquid-defs/utils'
+import { getSelectedWells } from '../../../well-selection/selectors'
+import { getLabwareNicknamesById } from '../../../ui/labware/selectors'
 import {
   removeWellsContents,
   setWellContents,
-} from '../../labware-ingred/actions'
-import { deselectAllWells } from '../../well-selection/actions'
+} from '../../../labware-ingred/actions'
+import { deselectAllWells } from '../../../well-selection/actions'
 import { DefineLiquidsModal } from '../DefineLiquidsModal'
 import { LiquidCard } from './LiquidCard'
 
 import type { ChangeEvent } from 'react'
 import type { DropdownOption } from '@opentrons/components'
-import type { ContentsByWell } from '../../labware-ingred/types'
+import type { ContentsByWell } from '../../../labware-ingred/types'
 
 export interface LiquidInfo {
   name: string

protocol-designer/src/organisms/AssignLiquidsModal/index.tsx → protocol-designer/src/components/organisms/AssignLiquidsModal/index.tsx

@@ -14,13 +14,13 @@ import {
   StyledText,
   WELL_LABEL_OPTIONS,
 } from '@opentrons/components'
-import { selectors } from '../../labware-ingred/selectors'
-import { selectors as stepFormSelectors } from '../../step-forms'
-import * as wellContentsSelectors from '../../top-selectors/well-contents'
-import { getSelectedWells } from '../../well-selection/selectors'
+import { selectors } from '../../../labware-ingred/selectors'
+import { selectors as stepFormSelectors } from '../../../step-forms'
+import * as wellContentsSelectors from '../../../top-selectors/well-contents'
+import { getSelectedWells } from '../../../well-selection/selectors'
 import { SelectableLabware } from '../Labware/SelectableLabware'
 import { wellFillFromWellContents } from '../LabwareOnDeck/utils'
-import { deselectWells, selectWells } from '../../well-selection/actions'
+import { deselectWells, selectWells } from '../../../well-selection/actions'
 import { NAV_BAR_HEIGHT_REM } from '../../atoms'
 import { LiquidToolbox } from './LiquidToolbox'