Merge branch 'edge' into chore_mergeback

.codecov.yml

@@ -1,5 +1,3 @@
-version: 2.0
-
 coverage:
   status:
     project:
@@ -15,25 +13,25 @@ comment:
   layout: 'reach, diff, flags, files'
 
 ignore:
-  - 'webpack-config/**'
-  - 'hardware-testing/**'
-  - 'abr-testing/**'
-  - 'test-data-generation/**'
-  - 'performance-metrics/**'
-  - 'package-testing/**'
-  - 'opentrons-ai-server/**'
-  - 'opentrons-ai-client/**'
-  - 'g-code-testing/**'
-  - 'api-client/**'
-  - 'analyses-snapshot-testing/**'
-  - '.storybook/**'
-  - 'react-api-client/**'
-  - 'scripts/**'
-  - '.github/**'
-  - '**/build/**'
-  - '**/dist/**'
-  - '**/node_modules/**'
-  - '**/{test,tests,__tests__,__mocks__,mocks}/**'
+  - 'hardware-testing/**/*'
+  - 'abr-testing/**/*'
+  - 'test-data-generation/**/*'
+  - 'performance-metrics/**/*'
+  - 'package-testing/**/*'
+  - 'opentrons-ai-server/**/*'
+  - 'opentrons-ai-client/**/*'
+  - 'g-code-testing/**/*'
+  - 'api-client/**/*'
+  - 'analyses-snapshot-testing/**/*'
+  - '.storybook/**/*'
+  - 'react-api-client/**/*'
+  - 'scripts/**/*'
+  - '.github/**/*'
+  - '**/build/**/*'
+  - '**/dist/**/*'
+  - '**/node_modules/**/*'
+  - '**/cypress/**/*'
+  - '**/{test,tests,__tests__,__mocks__,mocks}/**/*'
   - '**/*.{md,yaml,yml,json,rst}'
   - '**/Makefile'
   - '**/*.{in,ini,lock,toml,cfg}'

.github/workflows/pd-test-build-deploy.yaml

@@ -60,15 +60,15 @@ jobs:
           token: ${{ secrets.CODECOV_TOKEN }}
 
   e2e-test:
-      name: 'protocol designer e2e tests'
-      runs-on: 'ubuntu-24.04'
-      timeout-minutes: 20
-      steps:
-        - name: 'Checkout Repository'
-          uses: actions/checkout@v4
-        - uses: ./.github/actions/js/setup
-        - name: 'run test-e2e'
-          run: make -C protocol-designer test-e2e
+    name: 'protocol designer e2e tests'
+    runs-on: 'ubuntu-24.04'
+    timeout-minutes: 20
+    steps:
+      - name: 'Checkout Repository'
+        uses: actions/checkout@v4
+      - uses: ./.github/actions/js/setup
+      - name: 'run test-e2e'
+        run: make -C protocol-designer test-e2e
 
   build-pd:
     timeout-minutes: 20

Makefile

@@ -280,3 +280,7 @@ test-js-internal:
 .PHONY: test-js-%
 test-js-%: 
 	$(MAKE) test-js-internal tests="$(if $(tests),$(foreach test,$(tests),$*/$(test)),$*)" test_opts="$(test_opts)" cov_opts="$(cov_opts)"
+
+.PHONY: validate-codecov-yml
+validate-codecov-yml:
+	curl --data-binary @.codecov.yml https://codecov.io/validate

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",

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>
   )

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}

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

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",

components/src/atoms/ListButton/__tests__/ListButton.test.tsx

@@ -25,7 +25,7 @@ describe('ListButton', () => {
   it('should render correct style - noActive', () => {
     render(props)
     const listButton = screen.getByTestId('ListButton_noActive')
-    expect(listButton).toHaveStyle(`backgroundColor: ${COLORS.grey30}`)
+    expect(listButton).toHaveStyle(`backgroundColor: ${COLORS.grey20}`)
   })
   it('should render correct style - connected', () => {
     props.type = 'connected'

components/src/atoms/ListButton/index.tsx

@@ -16,15 +16,16 @@ interface ListButtonProps extends StyleProps {
   children: ReactNode
   disabled?: boolean
   onClick?: () => void
+  testId?: string
 }
 
 const LISTBUTTON_PROPS_BY_TYPE: Record<
   ListButtonType,
   { backgroundColor: string; hoverBackgroundColor: string }
 > = {
   noActive: {
-    backgroundColor: COLORS.grey30,
-    hoverBackgroundColor: COLORS.grey35,
+    backgroundColor: COLORS.grey20,
+    hoverBackgroundColor: COLORS.grey30,
   },
   connected: {
     backgroundColor: COLORS.green30,
@@ -42,7 +43,14 @@ const LISTBUTTON_PROPS_BY_TYPE: Record<
   odd stylings
 **/
 export function ListButton(props: ListButtonProps): JSX.Element {
-  const { type, children, disabled = false, onClick, ...styleProps } = props
+  const {
+    type,
+    children,
+    disabled = false,
+    onClick,
+    testId, // optional data-testid value for Cypress testing
+    ...styleProps
+  } = props
   const listButtonProps = LISTBUTTON_PROPS_BY_TYPE[type]
 
   const LIST_BUTTON_STYLE = css`
@@ -60,13 +68,19 @@ export function ListButton(props: ListButtonProps): JSX.Element {
         ? COLORS.grey20
         : listButtonProps.hoverBackgroundColor};
     }
+
+    &:focus-visible {
+      outline: 2px solid ${COLORS.blue50};
+      outline-offset: 0.25rem;
+    }
   `
 
   return (
     <Flex
-      data-testid={`ListButton_${type}`}
+      data-testid={testId ?? `ListButton_${type}`}
       onClick={onClick}
       css={LIST_BUTTON_STYLE}
+      tabIndex={0}
       {...styleProps}
     >
       {children}

components/src/atoms/buttons/EmptySelectorButton.tsx

@@ -4,7 +4,6 @@ import {
   ALIGN_CENTER,
   CURSOR_DEFAULT,
   CURSOR_POINTER,
-  FLEX_MAX_CONTENT,
   Icon,
   JUSTIFY_CENTER,
   JUSTIFY_START,
@@ -62,8 +61,8 @@ interface ButtonProps {
 
 const StyledButton = styled.button<ButtonProps>`
   border: none;
-  width: ${FLEX_MAX_CONTENT};
-  height: ${FLEX_MAX_CONTENT};
+  width: 100%;
+  height: 100%;
   cursor: ${CURSOR_POINTER};
   background-color: ${COLORS.blue30};
   border-radius: ${BORDERS.borderRadius8};

components/src/atoms/buttons/LargeButton.tsx

@@ -206,7 +206,9 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
 
       border: ${buttonType === 'stroke'
         ? `2px solid ${COLORS.blue55}`
-        : `${computedBorderStyle()}`};
+        : buttonType === 'primary'
+        ? `4px solid ${COLORS.blue55}`
+        : computedBorderStyle()};
     }
 
     &:focus-visible {

components/src/molecules/DropdownMenu/index.tsx

@@ -27,6 +27,7 @@ import { LiquidIcon } from '../LiquidIcon'
 import { DeckInfoLabel } from '../DeckInfoLabel'
 
 import type { FocusEventHandler } from 'react'
+import type { FlattenSimpleInterpolation } from 'styled-components'
 
 export interface DropdownOption {
   name: string
@@ -268,7 +269,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
             >
               <StyledText
                 desktopStyle="captionRegular"
-                css={LINE_CLAMP_TEXT_STYLE}
+                css={LINE_CLAMP_TEXT_STYLE(1)}
               >
                 {currentOption.name}
               </StyledText>
@@ -327,12 +328,15 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
                       flexDirection={DIRECTION_COLUMN}
                       gridGap={option.subtext != null ? SPACING.spacing4 : '0'}
                     >
-                      <StyledText desktopStyle="captionRegular">
+                      <StyledText
+                        desktopStyle="captionRegular"
+                        css={LINE_CLAMP_TEXT_STYLE(3, true)}
+                      >
                         {option.name}
                       </StyledText>
                       <StyledText
                         desktopStyle="captionRegular"
-                        color={COLORS.black70}
+                        color={COLORS.grey60}
                       >
                         {option.subtext}
                       </StyledText>
@@ -363,12 +367,17 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
   )
 }
 
-const LINE_CLAMP_TEXT_STYLE = css`
+export const LINE_CLAMP_TEXT_STYLE = (
+  lineClamp?: number,
+  wordBreak?: boolean
+): FlattenSimpleInterpolation => css`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: ${OVERFLOW_HIDDEN};
   text-overflow: ellipsis;
   word-wrap: break-word;
-  -webkit-line-clamp: 1;
-  word-break: break-all;
+  -webkit-line-clamp: ${lineClamp ?? 1};
+  word-break: ${wordBreak === true
+    ? 'normal'
+    : 'break-all'}; // normal for tile and break-all for a non word case like aaaaaaaa
 `

app/src/molecules/ReleaseNotes/index.tsx → components/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"
     />

app/src/molecules/ReleaseNotes/styles.module.css → components/src/molecules/ReleaseNotes/styles.module.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components/styles';
+@import '../../index.module.css';
 
 .release_notes {
   width: 100%;