From e116bc4370dfb8e0458ce70bd24b6f640627220b Mon Sep 17 00:00:00 2001 From: Jamey Huffnagle Date: Thu, 22 Feb 2024 10:05:36 -0500 Subject: [PATCH 1/4] update app update modal width --- app/src/organisms/UpdateAppModal/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/src/organisms/UpdateAppModal/index.tsx b/app/src/organisms/UpdateAppModal/index.tsx index 6f4bf3f8a23..7154cc58446 100644 --- a/app/src/organisms/UpdateAppModal/index.tsx +++ b/app/src/organisms/UpdateAppModal/index.tsx @@ -85,6 +85,7 @@ const UPDATE_PROGRESS_BAR_STYLE = css` ` const LEGACY_MODAL_STYLE = css` width: 40rem; + margin-left: 5.336rem; ` const RESTART_APP_AFTER_TIME = 5000 From 9d9ff19626b2ee202f4cd964d51161d9e20caa13 Mon Sep 17 00:00:00 2001 From: Jamey Huffnagle Date: Thu, 22 Feb 2024 10:17:25 -0500 Subject: [PATCH 2/4] update default left margin offset given default left width --- app/src/molecules/LegacyModal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/molecules/LegacyModal/index.tsx b/app/src/molecules/LegacyModal/index.tsx index 03c9dd1d72f..7f5a6004111 100644 --- a/app/src/molecules/LegacyModal/index.tsx +++ b/app/src/molecules/LegacyModal/index.tsx @@ -70,7 +70,7 @@ export const LegacyModal = (props: LegacyModalProps): JSX.Element => { header={modalHeader} onOutsideClick={closeOnOutsideClick ?? false ? onClose : undefined} // center within viewport aside from nav - marginLeft={styleProps.marginLeft ?? '7.125rem'} + marginLeft={styleProps.marginLeft ?? '5.656rem'} {...styleProps} footer={footer} > From c2ce9052dedb463bdc3fad0b72d8f33091978ce4 Mon Sep 17 00:00:00 2001 From: Jamey Huffnagle Date: Thu, 22 Feb 2024 10:17:42 -0500 Subject: [PATCH 3/4] more descriptive i18n string name --- app/src/assets/localization/en/device_settings.json | 2 +- .../Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx | 2 +- .../RobotSettingsDashboard/RobotSystemVersionModal.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/src/assets/localization/en/device_settings.json b/app/src/assets/localization/en/device_settings.json index 4c62a44044a..63912b30fa8 100644 --- a/app/src/assets/localization/en/device_settings.json +++ b/app/src/assets/localization/en/device_settings.json @@ -301,7 +301,7 @@ "update_robot_software_description": "Bypass the Opentrons App auto-update process and update the robot software manually.", "update_robot_software_link": "Launch Opentrons software update page", "updating": "Updating", - "updating_robot_system": "Updating the robot software requires restarting the robot", + "update_requires_restarting": "Updating the robot software requires restarting the robot", "usage_settings": "Usage Settings", "usb": "USB", "usb_to_ethernet_description": "Looking for USB-to-Ethernet Adapter info?", diff --git a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx index 3762cdd1955..a659259e698 100644 --- a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx +++ b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx @@ -155,7 +155,7 @@ export function UpdateRobotModal({ > - {t('updating_robot_system')} + {t('update_requires_restarting')} diff --git a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersionModal.tsx b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersionModal.tsx index 4610dc6dc92..e1fffe74e30 100644 --- a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersionModal.tsx +++ b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersionModal.tsx @@ -51,7 +51,7 @@ export function RobotSystemVersionModal({ > From bd5a042fed6fb6dc9731bd5f215549e555acc211 Mon Sep 17 00:00:00 2001 From: Jamey Huffnagle Date: Thu, 22 Feb 2024 10:38:07 -0500 Subject: [PATCH 4/4] update tests --- .../__tests__/LegacyModal.test.tsx | 31 +++++++++++++------ .../__tests__/UpdateAppModal.test.tsx | 9 ++++++ 2 files changed, 30 insertions(+), 10 deletions(-) diff --git a/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx b/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx index c7808ec38fc..6175cf0810a 100644 --- a/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx +++ b/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { screen } from '@testing-library/react' import { COLORS, renderWithProviders } from '@opentrons/components' @@ -20,33 +21,43 @@ describe('LegacyModal', () => { }) it('should render modal without header icon when type is info', () => { - const [{ getByText, queryByTestId, getByTestId }] = render(props) - expect(queryByTestId('Modal_header_icon')).not.toBeInTheDocument() - getByText('mock info modal') - expect(getByTestId('Modal_header')).toHaveStyle( + render(props) + expect(screen.queryByTestId('Modal_header_icon')).not.toBeInTheDocument() + screen.getByText('mock info modal') + expect(screen.getByTestId('Modal_header')).toHaveStyle( `background-color: ${COLORS.white}` ) }) it('should render modal with orange header icon when type is warning', () => { props.type = 'warning' - const [{ getByTestId }] = render(props) - const headerIcon = getByTestId('Modal_header_icon') + render(props) + const headerIcon = screen.getByTestId('Modal_header_icon') expect(headerIcon).toBeInTheDocument() expect(headerIcon).toHaveStyle(`color: ${COLORS.yellow50}`) - expect(getByTestId('Modal_header')).toHaveStyle( + expect(screen.getByTestId('Modal_header')).toHaveStyle( `background-color: ${COLORS.white}` ) }) it('should render modal with red header icon when type is error', () => { props.type = 'error' - const [{ getByTestId }] = render(props) - const headerIcon = getByTestId('Modal_header_icon') + render(props) + const headerIcon = screen.getByTestId('Modal_header_icon') expect(headerIcon).toBeInTheDocument() expect(headerIcon).toHaveStyle(`color: ${COLORS.red50}`) - expect(getByTestId('Modal_header')).toHaveStyle( + expect(screen.getByTestId('Modal_header')).toHaveStyle( `background-color: ${COLORS.white}` ) }) + + it('should supply a default margin to account for the sidebar, aligning the modal in the center of the app', () => { + render(props) + expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle( + 'width: 31.25rem' + ) + expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle( + 'margin-left: 5.656rem' + ) + }) }) diff --git a/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx b/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx index f3473854489..1831f991e2f 100644 --- a/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx +++ b/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx @@ -133,4 +133,13 @@ describe('UpdateAppModal', () => { screen.getByRole('heading', { name: 'Update Error' }) ).toBeInTheDocument() }) + it('uses a custom width and left margin to properly center the modal', () => { + render(props) + expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle( + 'width: 40rem' + ) + expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle( + 'margin-left: 5.336rem' + ) + }) })