refactor(app): Simplify upgrade/downgrade modal render logic

app/src/components/RobotSettings/UpdateRobot/ReinstallModal.js

@@ -0,0 +1,34 @@
+// @flow
+import * as React from 'react'
+import {Link} from 'react-router-dom'
+import {AlertModal} from '@opentrons/components'
+import VersionList from './VersionList'
+import type {VersionProps} from './types'
+import styles from './styles.css'
+
+type Props = {
+  versionProps: VersionProps,
+  parentUrl: string,
+  update: () => mixed,
+}
+
+const HEADING = 'Robot Server is up to date'
+const REINSTALL_MESSAGE =
+  "It looks like your robot is already up to date, but if you're experiencing issues you can re-apply the latest update."
+
+export default function ReinstallModal (props: Props) {
+  const {parentUrl, update, versionProps} = props
+  return (
+    <AlertModal
+      heading={HEADING}
+      buttons={[
+        {Component: Link, to: parentUrl, children: 'not now'},
+        {onClick: update, children: 'Reinstall'},
+      ]}
+      alertOverlay
+    >
+      <p className={styles.reinstall_message}>{REINSTALL_MESSAGE}</p>
+      <VersionList {...versionProps} ignoreAppUpdate />
+    </AlertModal>
+  )
+}

app/src/components/RobotSettings/UpdateRobot/SkipAppUpdateMessage.js

@@ -1,17 +1,15 @@
 // @flow
 import * as React from 'react'
 import styles from './styles.css'
-import type {VersionProps} from './types.js'
+
 type Props = {
-  ...$Exact<VersionProps>,
   onClick: () => mixed,
 }
 
 const SKIP_APP_MESSAGE =
   'If you wish to skip this app update and only sync your robot server with your current app version, please '
+
 export default function SkipAppUpdateMessage (props: Props) {
-  const {appVersion, robotVersion} = props
-  if (appVersion === robotVersion) return null
   return (
     <p className={styles.sync_message}>
       {SKIP_APP_MESSAGE}

app/src/components/RobotSettings/UpdateRobot/SyncRobotMessage.js

@@ -4,7 +4,6 @@ import styles from './styles.css'
 import type {RobotUpdateInfo} from '../../../http-api-client'
 type Props = {
   updateInfo: RobotUpdateInfo,
-  appVersion: string,
 }
 
 const notSyncedMessage = (
@@ -15,8 +14,7 @@ const notSyncedMessage = (
 
 export default function SyncRobotMessage (props: Props) {
   const {
-    appVersion,
-    updateInfo: {type},
+    updateInfo: {type, version},
   } = props
 
   if (type === 'upgrade') {
@@ -32,17 +30,10 @@ export default function SyncRobotMessage (props: Props) {
     return (
       <p className={styles.sync_message}>
         {notSyncedMessage}
-        You may wish to downgrade to robot server version {appVersion} to ensure
+        You may wish to downgrade to robot server version {version} to ensure
         compatibility.
       </p>
     )
   }
   return null
 }
-
-const REINSTALL_MESSAGE =
-  "It looks like your robot is already up to date, but if you're experiencing issues you can re-apply the latest update."
-
-export function ReinstallMessage () {
-  return <p className={styles.sync_message}>{REINSTALL_MESSAGE}</p>
-}

app/src/components/RobotSettings/UpdateRobot/SyncRobotModal.js

@@ -0,0 +1,101 @@
+// @flow
+import * as React from 'react'
+import {Link} from 'react-router-dom'
+
+import SyncRobotMessage from './SyncRobotMessage'
+import VersionList from './VersionList'
+import {ScrollableAlertModal} from '../../modals'
+import ReleaseNotes from '../../ReleaseNotes'
+
+import {API_RELEASE_NOTES} from '../../../shell'
+
+import type {RobotUpdateInfo} from '../../../http-api-client'
+import type {VersionProps} from './types'
+import type {ButtonProps} from '@opentrons/components'
+
+type Props = {
+  updateInfo: RobotUpdateInfo,
+  parentUrl: string,
+  versionProps: VersionProps,
+  ignoreUpdate: () => mixed,
+  update: () => mixed,
+  showReleaseNotes: boolean,
+}
+
+type SyncRobotState = {
+  showReleaseNotes: boolean,
+}
+
+export default class SyncRobotModal extends React.Component<
+  Props,
+  SyncRobotState
+> {
+  constructor (props: Props) {
+    super(props)
+    this.state = {showReleaseNotes: this.props.showReleaseNotes}
+  }
+
+  setShowReleaseNotes = () => {
+    this.setState({showReleaseNotes: true})
+  }
+
+  render () {
+    const {
+      updateInfo,
+      versionProps,
+      update,
+      ignoreUpdate,
+      parentUrl,
+    } = this.props
+
+    const {version} = updateInfo
+    const {showReleaseNotes} = this.state
+
+    const heading = `Robot Server Version ${version} Available`
+    let buttons: Array<?ButtonProps>
+
+    if (showReleaseNotes) {
+      buttons = [
+        {onClick: ignoreUpdate, children: 'not now'},
+        {
+          children: 'Update Robot Server',
+          onClick: update,
+        },
+      ]
+    } else if (updateInfo.type === 'upgrade') {
+      buttons = [
+        {onClick: ignoreUpdate, children: 'not now'},
+        {
+          children: 'View Robot Server Update',
+          onClick: this.setShowReleaseNotes,
+        },
+      ]
+    } else if (updateInfo.type === 'downgrade') {
+      buttons = [
+        {Component: Link, to: parentUrl, children: 'not now'},
+        {
+          children: 'Downgrade Robot',
+          onClick: update,
+        },
+      ]
+    }
+
+    return (
+      <ScrollableAlertModal
+        heading={heading}
+        buttons={buttons}
+        alertOverlay
+        key={String(showReleaseNotes)}
+      >
+        {showReleaseNotes ? (
+          <ReleaseNotes source={API_RELEASE_NOTES} />
+        ) : (
+          <React.Fragment>
+            <SyncRobotMessage updateInfo={updateInfo} />
+            <VersionList {...versionProps} ignoreAppUpdate />
+          </React.Fragment>
+        )}
+      </ScrollableAlertModal>
+    )
+  }
+}

app/src/components/RobotSettings/UpdateRobot/UpdateAppModal.js

@@ -0,0 +1,54 @@
+// @flow
+import * as React from 'react'
+import {Link} from 'react-router-dom'
+
+import {AlertModal} from '@opentrons/components'
+import UpdateAppMessage from './UpdateAppMessage'
+import VersionList from './VersionList'
+import SkipAppUpdateMessage from './SkipAppUpdateMessage'
+
+import type {RobotUpdateInfo} from '../../../http-api-client'
+import type {VersionProps} from './types'
+
+type Props = {
+  updateInfo: RobotUpdateInfo,
+  parentUrl: string,
+  versionProps: VersionProps,
+  ignoreUpdate: () => mixed,
+  onClick: () => mixed,
+}
+
+export default function UpdateAppModal (props: Props) {
+  const {updateInfo, parentUrl, versionProps, onClick, ignoreUpdate} = props
+  const HEADING = `Robot Server Version ${
+    versionProps.availableUpdate
+  } Available`
+  const isUpgrade = updateInfo.type === 'upgrade'
+  let notNowButton
+  if (isUpgrade) {
+    notNowButton = {
+      onClick: ignoreUpdate,
+      children: 'not now',
+    }
+  } else {
+    notNowButton = {Component: Link, to: parentUrl, children: 'not now'}
+  }
+  return (
+    <AlertModal
+      heading={HEADING}
+      buttons={[
+        notNowButton,
+        {
+          Component: Link,
+          to: '/menu/app/update',
+          children: 'View App Update',
+        },
+      ]}
+      alertOverlay
+    >
+      <UpdateAppMessage {...versionProps} />
+      <VersionList {...versionProps} />
+      <SkipAppUpdateMessage onClick={onClick} />
+    </AlertModal>
+  )
+}