feat(protocol-designer, components): introduce release notes & update…

… react-markdown to v9.0.3 (#17481) closes AUTH-1423 Co-authored-by: Josh McVey <[email protected]>
Opentrons · Feb 12, 2025 · 947c9e4 · 947c9e4
1 parent 3ad2cae
commit 947c9e4
Show file tree

Hide file tree

Showing 15 changed files with 188 additions and 25 deletions.
diff --git a/app/package.json b/app/package.json
@@ -51,7 +51,6 @@
     "react-error-boundary": "^4.0.10",
     "react-i18next": "14.0.0",
     "react-intersection-observer": "^8.33.1",
-    "react-markdown": "9.0.1",
     "react-redux": "8.1.2",
     "react-router-dom": "6.24.1",
     "react-select": "5.4.0",

diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx
@@ -14,6 +14,7 @@ import {
   Modal,
   NewPrimaryBtn,
   NewSecondaryBtn,
+  ReleaseNotes,
   SPACING,
   Tooltip,
   useHoverTooltip,
@@ -28,8 +29,8 @@ import {
   DOWNGRADE,
   getRobotUpdateVersion,
 } from '/app/redux/robot-update'
+import { useIsOEMMode } from '/app/resources/robot-settings'
 import { ExternalLink } from '/app/atoms/Link/ExternalLink'
-import { ReleaseNotes } from '/app/molecules/ReleaseNotes'
 import { useIsRobotBusy } from '/app/redux-resources/robots'
 import { useDispatchStartRobotUpdate } from '/app/redux/robot-update/hooks'
 
@@ -73,6 +74,7 @@ export function UpdateRobotModal({
 }: UpdateRobotModalProps): JSX.Element {
   const dispatch = useDispatch<Dispatch>()
   const { t } = useTranslation('device_settings')
+  const isOEMMode = useIsOEMMode()
   const [updateButtonProps, updateButtonTooltipProps] = useHoverTooltip()
   // TODO(jh 08-29-2023): revisit reasons that are/are not captured by this selector.
   const { updateFromFileDisabledReason } = useSelector((state: State) => {
@@ -159,7 +161,7 @@ export function UpdateRobotModal({
         <UpdateAppBanner type="informing" marginBottom={SPACING.spacing8}>
           {t('update_requires_restarting_robot')}
         </UpdateAppBanner>
-        <ReleaseNotes source={releaseNotes} />
+        <ReleaseNotes source={releaseNotes} isOEMMode={isOEMMode} />
       </Flex>
     </Modal>
   )

diff --git a/app/src/organisms/Desktop/UpdateAppModal/index.tsx b/app/src/organisms/Desktop/UpdateAppModal/index.tsx
@@ -16,6 +16,7 @@ import {
   SecondaryButton,
   SPACING,
   LegacyStyledText,
+  ReleaseNotes,
   Modal,
 } from '@opentrons/components'
 
@@ -25,9 +26,8 @@ import {
   downloadShellUpdate,
   applyShellUpdate,
 } from '/app/redux/shell'
-
+import { useIsOEMMode } from '/app/resources/robot-settings'
 import { ExternalLink } from '/app/atoms/Link/ExternalLink'
-import { ReleaseNotes } from '/app/molecules/ReleaseNotes'
 import { ProgressBar } from '/app/atoms/ProgressBar'
 import { useRemoveActiveAppUpdateToast } from '../Alerts'
 
@@ -85,6 +85,7 @@ export interface UpdateAppModalProps {
 export function UpdateAppModal(props: UpdateAppModalProps): JSX.Element {
   const { closeModal } = props
   const dispatch = useDispatch<Dispatch>()
+  const isOEMMode = useIsOEMMode()
   const updateState = useSelector(getShellUpdateState)
   const {
     downloaded,
@@ -199,7 +200,7 @@ export function UpdateAppModal(props: UpdateAppModalProps): JSX.Element {
             <UpdateAppBanner type="informing" marginBottom={SPACING.spacing8}>
               {t('branded:update_requires_restarting_app')}
             </UpdateAppBanner>
-            <ReleaseNotes source={releaseNotesText} />
+            <ReleaseNotes source={releaseNotesText} isOEMMode={isOEMMode} />
           </Flex>
         </Modal>
       ) : null}

diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/RobotSystemVersionModal.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/RobotSystemVersionModal.tsx
@@ -6,13 +6,13 @@ import {
   DIRECTION_ROW,
   Flex,
   OVERFLOW_AUTO,
+  ReleaseNotes,
   SPACING,
 } from '@opentrons/components'
-
 import { SmallButton } from '/app/atoms/buttons'
 import { InlineNotification } from '/app/atoms/InlineNotification'
-import { ReleaseNotes } from '/app/molecules/ReleaseNotes'
 import { OddModal } from '/app/molecules/OddModal'
+import { useIsOEMMode } from '/app/resources/robot-settings'
 
 import type { OddModalHeaderBaseProps } from '/app/molecules/OddModal/types'
 
@@ -29,6 +29,7 @@ export function RobotSystemVersionModal({
 }: RobotSystemVersionModalProps): JSX.Element {
   const { t } = useTranslation(['device_settings', 'shared'])
   const navigate = useNavigate()
+  const isOEMMode = useIsOEMMode()
 
   const modalHeader: OddModalHeaderBaseProps = {
     title: t('robot_system_version_available', {
@@ -53,7 +54,7 @@ export function RobotSystemVersionModal({
             heading={t('update_requires_restarting_robot')}
             hug
           />
-          <ReleaseNotes source={releaseNotes} />
+          <ReleaseNotes source={releaseNotes} isOEMMode={isOEMMode} />
         </Flex>
         <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing8}>
           <SmallButton

diff --git a/components/package.json b/components/package.json
@@ -36,6 +36,7 @@
     "i18next": "^19.8.3",
     "lodash": "4.17.21",
     "react-i18next": "14.0.0",
+    "react-markdown": "9.0.3",
     "react-popper": "1.0.0",
     "react-remove-scroll": "2.4.3",
     "react-select": "5.4.0",

diff --git a/app/src/molecules/ReleaseNotes/index.tsx → ...ents/src/molecules/ReleaseNotes/index.tsx b/app/src/molecules/ReleaseNotes/index.tsx → ...ents/src/molecules/ReleaseNotes/index.tsx
@@ -1,21 +1,20 @@
 import Markdown from 'react-markdown'
-
-import { Box, COLORS, SPACING, LegacyStyledText } from '@opentrons/components'
-
-import { useIsOEMMode } from '/app/resources/robot-settings/hooks'
+import { LegacyStyledText } from '../../atoms'
+import { COLORS } from '../../helix-design-system'
+import { Box } from '../../primitives'
+import { SPACING } from '../../ui-style-constants'
 
 import styles from './styles.module.css'
 
 export interface ReleaseNotesProps {
+  isOEMMode: boolean
   source?: string | null
 }
 
 const DEFAULT_RELEASE_NOTES = 'We recommend upgrading to the latest version.'
 
 export function ReleaseNotes(props: ReleaseNotesProps): JSX.Element {
-  const { source } = props
-
-  const isOEMMode = useIsOEMMode()
+  const { source, isOEMMode } = props
 
   return (
     <div className={styles.release_notes}>
@@ -63,7 +62,7 @@ function UnnumberedListText(props: JSX.IntrinsicAttributes): JSX.Element {
 function HorizontalRule(): JSX.Element {
   return (
     <Box
-      borderBottom={`1px solid ${String(COLORS.grey30)}`}
+      borderBottom={`1px solid ${COLORS.grey30}`}
       marginY={SPACING.spacing16}
       data-testid="divider"
     />

diff --git a/.../molecules/ReleaseNotes/styles.module.css → .../molecules/ReleaseNotes/styles.module.css b/.../molecules/ReleaseNotes/styles.module.css → .../molecules/ReleaseNotes/styles.module.css
@@ -1,4 +1,4 @@
-@import '@opentrons/components/styles';
+@import '../../index.module.css';
 
 .release_notes {
   width: 100%;

diff --git a/components/src/molecules/index.ts b/components/src/molecules/index.ts
@@ -5,4 +5,5 @@ export * from './DropdownMenu'
 export * from './InfoScreen'
 export * from './LiquidIcon'
 export * from './ParametersTable'
+export * from './ReleaseNotes'
 export * from './Tabs'
diff --git a/protocol-designer/release-notes.md b/protocol-designer/release-notes.md
@@ -0,0 +1,90 @@
+For more details about this release, please see the full [technical change
+log][]. For a list of currently known issues, please see the [Opentrons issue tracker][].
+
+[technical change log]: https://github.com/Opentrons/opentrons/releases
+[opentrons issue tracker]: https://github.com/Opentrons/opentrons/issues?q=is%3Aopen+is%3Aissue+label%3Abug
+
+By using Opentrons Protocol Designer, you agree to the Opentrons End-User License Agreement (EULA). You can view the EULA at [opentrons.com/eula](https://opentrons.com/eula).
+
+---
+
+## Opentrons Protocol Designer Changes in 8.4.0
+
+**Welcome to Protocol Designer 8.4.0!**
+
+This release adds support for the Absorbance Plate Reader Module and includes feature improvements and bug fixes.
+
+### Bug Fixes
+
+- Move steps added to a Flex protocol now use the gripper by default.
+- Use matching X and Y offset values to aspirate and dispense during a Mix step.
+
+All protocols created in Protocol Designer now require version 8.2.0 or higher of the Opentrons App to run.
+
+### New Features
+
+**Absorbance Plate Reader Module GEN1**
+
+You can add an Absorbance Plate Reader Module GEN1 to deck slots A3-D3 on the Flex. You'll also need to use a gripper to safely move the lid on and off the module.
+
+To use the Absorbance Plate Reader Module in your Protocol Designer protocol, add the following steps:
+
+- an Absorbance Plate Reader step to close the lid using the gripper
+- an Absorbance Plate Reader step to initialize the module without labware inside. Choose from a single or multiple wavelengths.
+- an Absorbance Plate Reader step to open the lid using the gripper
+- a Move step to place a plate in the module. Using the gripper is optional.
+- an Absorbance Plate Reader step to read the plate using the same wavelength choices.
+
+Data from the Absorbance Plate Reader Module is exported as a .CSV file and can be found on your Flex's detail page in the Opentrons Desktop App. Repeat the steps shown above to open the lid and remove the plate.
+
+---
+
+## Opentrons Protocol Designer Changes in 8.3.0
+
+Welcome to the v8.3.0 release of Opentrons Protocol Designer!
+
+### New Features
+
+- During step creation, labware and modules used are highlighted on the deck.
+
+### Bug Fixes
+
+- Custom labware can be added and moved onto its supported labware.
+
+### Improved Features
+
+- Touch tip and blow out copy is more precise.
+
+---
+
+## Opentrons Protocol Designer Changes in 8.2.2
+
+Welcome to the v8.2.2 release of Opentrons Protocol Designer!
+
+### Bug Fixes
+
+- Fixed an error with the heater-shaker timer field where it would not save from an imported protocol.
+
+### Improved Features
+
+- The analytics modal is dismissible via the settings page for both previous and new users.
+
+---
+
+## Opentrons Protocol Designer Changes in 8.2.1
+
+Welcome to the v8.2.1 release of Opentrons Protocol Designer!
+
+### Bug Fixes
+
+- Fixed blow out not saving when checking it in the form.
+
+---
+
+## Opentrons Protocol Designer Changes in 8.2.0
+
+We’re excited to release the new Opentrons Protocol Designer, now with a fresh redesign! All protocols now require Opentrons App version 8.2.0+ to run. Enjoy the same functionality with the added ability to:
+
+### New Features
+
+- Add multiple Heater-Shaker Modules and Magnetic Blocks to the deck (Flex only).
diff --git a/protocol-designer/src/assets/localization/en/modal.json b/protocol-designer/src/assets/localization/en/modal.json
@@ -66,7 +66,7 @@
       "body4": "Bug fix for mismatched x- and y-offset values for aspirate and dispense during Mix steps",
       "body5": "Bug fix for Move steps not using the gripper by default",
       "body6": "All protocols now require Opentrons App version 8.2.0+ to run.",
-      "body7": "For more information, see the <link1>Protocol Designer Instruction Manual</link1>."
+      "body7": "For more information, see the <link1>Protocol Designer Instruction Manual</link1> or the <link2>Release Notes.</link2>"
     }
   },
   "labware_selection": {

diff --git a/protocol-designer/src/organisms/AnnouncementModal/announcements.tsx b/protocol-designer/src/organisms/AnnouncementModal/announcements.tsx
@@ -10,6 +10,7 @@ import {
   SPACING,
   StyledText,
   TEXT_DECORATION_UNDERLINE,
+  TYPOGRAPHY,
 } from '@opentrons/components'
 
 import magTempCombined from '../../assets/images/modules/magdeck_tempdeck_combined.png'
@@ -22,7 +23,7 @@ import liquidEnhancements from '../../assets/images/announcements/liquid-enhance
 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 } from '../KnowledgeLink'
+import { DOC_URL, RELEASE_NOTES_URL } from '../KnowledgeLink'
 import type { ReactNode } from 'react'
 
 export interface Announcement {
@@ -445,7 +446,15 @@ export const useAnnouncements = (): Announcement[] => {
                   <LinkComponent
                     external
                     href={DOC_URL}
-                    textDecoration={TEXT_DECORATION_UNDERLINE}
+                    textDecoration={TYPOGRAPHY.textDecorationUnderline}
+                    color={COLORS.black90}
+                  />
+                ),
+                link2: (
+                  <LinkComponent
+                    external
+                    href={RELEASE_NOTES_URL}
+                    textDecoration={TYPOGRAPHY.textDecorationUnderline}
                     color={COLORS.black90}
                   />
                 ),

diff --git a/protocol-designer/src/organisms/KnowledgeLink.tsx b/protocol-designer/src/organisms/KnowledgeLink.tsx
@@ -5,6 +5,9 @@ interface KnowledgeLinkProps {
   children: ReactNode
 }
 
+export const RELEASE_NOTES_URL =
+  'https://github.com/Opentrons/opentrons/blob/edge/protocol-designer/release-notes.md'
+
 export const DOC_URL =
   'https://insights.opentrons.com/hubfs/Protocol%20Designer%20Instruction%20Manual.pdf'
 

diff --git a/protocol-designer/typings/global.d.ts b/protocol-designer/typings/global.d.ts
@@ -8,3 +8,8 @@ declare const global: typeof globalThis & {
 interface Window {
   __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: (val: string) => any
 }
+
+declare module '*.md' {
+  const content: string
+  export { content }
+}
diff --git a/protocol-designer/vite.config.mts b/protocol-designer/vite.config.mts
@@ -29,6 +29,14 @@ export default defineConfig(
             configFile: true,
           },
         }),
+        {
+          name: 'markdown-loader',
+          transform(code, id) {
+            if (id.endsWith('.md')) {
+              return `export default ${JSON.stringify(code)}`
+            }
+          },
+        },
       ],
       optimizeDeps: {
         esbuildOptions: {