fix(protocol-designer): fix scroll position of MoreOptionsModal (#6515)

Closes #6156

protocol-designer/src/components/DeckSetup/LabwareOverlays/BrowseLabware.js

@@ -3,12 +3,11 @@ import * as React from 'react'
 import cx from 'classnames'
 import { connect } from 'react-redux'
 import { Icon } from '@opentrons/components'
-import forEach from 'lodash/forEach'
 import { i18n } from '../../../localization'
 import type { ThunkDispatch } from '../../../types'
 import type { LabwareOnDeck } from '../../../step-forms'
 import { drillDownOnLabware } from '../../../labware-ingred/actions'
-import { MAIN_CONTENT_FORCED_SCROLL_CLASSNAME } from '../../../ui/steps'
+import { resetScrollElements } from '../../../ui/steps/utils'
 import styles from './LabwareOverlays.css'
 
 type OP = {|
@@ -35,15 +34,7 @@ function BrowseLabwareOverlay(props: Props) {
 
 const mapDispatchToProps = (dispatch: ThunkDispatch<*>, ownProps: OP): DP => ({
   drillDown: () => {
-    // scroll to top of all elements with the special class
-    forEach(
-      global.document.getElementsByClassName(
-        MAIN_CONTENT_FORCED_SCROLL_CLASSNAME
-      ),
-      elem => {
-        elem.scrollTop = 0
-      }
-    )
+    resetScrollElements()
     dispatch(drillDownOnLabware(ownProps.labwareOnDeck.id))
   },
 })

protocol-designer/src/components/FilePage.js

@@ -13,14 +13,14 @@ import {
 } from '@opentrons/components'
 import cx from 'classnames'
 import { i18n } from '../localization'
+import { resetScrollElements } from '../ui/steps/utils'
 import { Portal } from './portals/MainPageModalPortal'
 import { EditPipettesModal } from './modals/EditPipettesModal'
 import { EditModulesCard } from './modules'
 import { EditModules } from './EditModules'
 import styles from './FilePage.css'
 import modalStyles from '../components/modals/modal.css'
 import formStyles from '../components/forms/forms.css'
-
 import type { FormikProps } from 'formik/@flow-typed'
 import type { ModuleRealType } from '@opentrons/shared-data'
 import type { FileMetadataFields } from '../file-data'
@@ -54,16 +54,8 @@ export class FilePage extends React.Component<Props, State> {
     moduleToEdit: null,
   }
 
-  // TODO (ka 2019-10-28): This is a workaround, see #4446
-  // but it solves the modal positioning problem caused by main page wrapper
-  // being positioned absolute until we can figure out something better
-  scrollToTop: () => void = () => {
-    const editPage = document.getElementById('main-page')
-    if (editPage) editPage.scrollTop = 0
-  }
-
   openEditPipetteModal: () => void = () => {
-    this.scrollToTop()
+    resetScrollElements()
     this.setState({ isEditPipetteModalOpen: true })
   }
 
@@ -74,7 +66,7 @@ export class FilePage extends React.Component<Props, State> {
     moduleType,
     moduleId
   ) => {
-    this.scrollToTop()
+    resetScrollElements()
     this.setState({
       moduleToEdit: { moduleType: moduleType, moduleId: moduleId },
     })

protocol-designer/src/components/FileSidebar/FileSidebar.js

@@ -11,9 +11,10 @@ import {
 import { i18n } from '../../localization'
 import { useBlockingHint } from '../Hints/useBlockingHint'
 import { KnowledgeBaseLink } from '../KnowledgeBaseLink'
+import { resetScrollElements } from '../../ui/steps/utils'
 import { Portal } from '../portals/MainPageModalPortal'
-import modalStyles from '../modals/modal.css'
 import { getUnusedEntities } from './utils'
+import modalStyles from '../modals/modal.css'
 import styles from './FileSidebar.css'
 
 import type { HintKey } from '../../tutorial'
@@ -234,11 +235,6 @@ export function FileSidebar(props: Props): React.Node {
     },
   })
 
-  const scrollToTop = () => {
-    const editPage = document.getElementById('main-page')
-    if (editPage) editPage.scrollTop = 0
-  }
-
   return (
     <>
       {blockingExportHint}
@@ -287,10 +283,10 @@ export function FileSidebar(props: Props): React.Node {
             <PrimaryButton
               onClick={() => {
                 if (hasWarning) {
-                  scrollToTop()
+                  resetScrollElements()
                   setShowExportWarningModal(true)
                 } else if (schemaVersion > 3) {
-                  scrollToTop()
+                  resetScrollElements()
                   setShowBlockingHint(true)
                 } else {
                   saveFile(downloadData)

protocol-designer/src/components/ProtocolEditor.js

@@ -9,7 +9,7 @@ import { ConnectedSidebar } from '../containers/ConnectedSidebar'
 import { ConnectedTitleBar } from '../containers/ConnectedTitleBar'
 import { ConnectedMainPanel } from '../containers/ConnectedMainPanel'
 import { PortalRoot as MainPageModalPortalRoot } from '../components/portals/MainPageModalPortal'
-import { MAIN_CONTENT_FORCED_SCROLL_CLASSNAME } from '../ui/steps'
+import { MAIN_CONTENT_FORCED_SCROLL_CLASSNAME } from '../ui/steps/utils'
 import { PrereleaseModeIndicator } from './PrereleaseModeIndicator'
 import { PortalRoot as TopPortalRoot } from './portals/TopPortal'
 import { NewFileModal } from './modals/NewFileModal'

protocol-designer/src/components/SettingsPage/FeatureFlagCard/FeatureFlagCard.js

@@ -1,8 +1,9 @@
 // @flow
 import sortBy from 'lodash/sortBy'
 import * as React from 'react'
-import { i18n } from '../../../localization'
 import { ContinueModal, Card, ToggleButton } from '@opentrons/components'
+import { i18n } from '../../../localization'
+import { resetScrollElements } from '../../../ui/steps/utils'
 import { Portal } from '../../portals/MainPageModalPortal'
 import styles from '../SettingsPage.css'
 import modalStyles from '../../modals/modal.css'
@@ -17,14 +18,6 @@ type Props = {|
   setFeatureFlags: (flags: Flags) => mixed,
 |}
 
-// TODO (ka 2019-10-28): This is a workaround, see #4446
-// but it solves the modal positioning problem caused by main page wrapper
-// being positioned absolute until we can figure out something better
-const scrollToTop = () => {
-  const editPage = document.getElementById('main-page')
-  if (editPage) editPage.scrollTop = 0
-}
-
 export const FeatureFlagCard = (props: Props): React.Node => {
   const [modalFlagName, setModalFlagName] = React.useState<FlagTypes | null>(
     null
@@ -68,7 +61,7 @@ export const FeatureFlagCard = (props: Props): React.Node => {
           className={styles.toggle_button}
           toggledOn={Boolean(props.flags[flagName])}
           onClick={() => {
-            scrollToTop()
+            resetScrollElements()
             setModalFlagName(flagName)
           }}
         />

protocol-designer/src/components/StepEditForm/index.js

@@ -9,6 +9,7 @@ import cx from 'classnames'
 import { useConditionalConfirm } from '@opentrons/components'
 import { actions } from '../../steplist'
 import { actions as stepsActions } from '../../ui/steps'
+import { resetScrollElements } from '../../ui/steps/utils'
 import { selectors as stepFormSelectors } from '../../step-forms'
 import { getDefaultsForStepType } from '../../steplist/formLevel/getDefaultsForStepType.js'
 import formStyles from '../forms/forms.css'
@@ -173,6 +174,7 @@ const StepEditFormManager = (props: StepEditFormManagerProps) => {
   )
 
   const toggleMoreOptionsModal = () => {
+    resetScrollElements()
     setShowMoreOptionsModal(!showMoreOptionsModal)
   }
 

protocol-designer/src/ui/steps/actions/actions.js

@@ -1,8 +1,7 @@
 // @flow
-import forEach from 'lodash/forEach'
 import { uuid } from '../../../utils'
-import { MAIN_CONTENT_FORCED_SCROLL_CLASSNAME } from '../constants'
 import { selectors as stepFormSelectors } from '../../../step-forms'
+import { resetScrollElements } from '../utils'
 import type { StepIdType, StepType } from '../../../form-types'
 import type { GetState, ThunkAction, ThunkDispatch } from '../../../types'
 import type { Timeline } from '../../../step-generation'
@@ -110,13 +109,5 @@ export const selectStep = (stepId: StepIdType): ThunkAction<*> => (
     payload: formData,
   })
 
-  // scroll to top of all elements with the special class
-  forEach(
-    global.document.getElementsByClassName(
-      MAIN_CONTENT_FORCED_SCROLL_CLASSNAME
-    ),
-    elem => {
-      elem.scrollTop = 0
-    }
-  )
+  resetScrollElements()
 }

protocol-designer/src/ui/steps/index.js

@@ -16,7 +16,6 @@ export {
   getWellSelectionLabwareKey,
   getCollapsedSteps,
 } from './selectors'
-export * from './constants'
 export type * from './actions/types'
 
 export const actions = { ..._actions, ..._thunks }

protocol-designer/src/ui/steps/utils.js

@@ -0,0 +1,20 @@
+// @flow
+import forEach from 'lodash/forEach'
+
+export const MAIN_CONTENT_FORCED_SCROLL_CLASSNAME = 'main_content_forced_scroll'
+
+// scroll to top of all elements with the special class (probably the main page wrapper)
+//
+// TODO (ka 2019-10-28): This is a workaround, see #4446
+// but it solves the modal positioning problem caused by main page wrapper
+// being positioned absolute until we can figure out something better
+export const resetScrollElements = () => {
+  forEach(
+    global.document.getElementsByClassName(
+      MAIN_CONTENT_FORCED_SCROLL_CLASSNAME
+    ),
+    elem => {
+      elem.scrollTop = 0
+    }
+  )
+}