Skip to content

Commit 07dca99

Browse files
jeraderjerader
committed
feat(protocol-designer, components): introduce release notes
closes AUTH-1423
1 parent 677c92c commit 07dca99

File tree

18 files changed

+193
-822
lines changed

18 files changed

+193
-822
lines changed

‎app/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@
5151
"react-error-boundary": "^4.0.10",
5252
"react-i18next": "14.0.0",
5353
"react-intersection-observer": "^8.33.1",
54-
"react-markdown": "9.0.1",
5554
"react-redux": "8.1.2",
5655
"react-router-dom": "6.24.1",
5756
"react-select": "5.4.0",

‎app/src/molecules/ReleaseNotes/index.tsx

-71
This file was deleted.

‎app/src/molecules/ReleaseNotes/styles.module.css

-66
This file was deleted.

‎app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
Modal,
1515
NewPrimaryBtn,
1616
NewSecondaryBtn,
17+
ReleaseNotes,
1718
SPACING,
1819
Tooltip,
1920
useHoverTooltip,
@@ -28,8 +29,8 @@ import {
2829
DOWNGRADE,
2930
getRobotUpdateVersion,
3031
} from '/app/redux/robot-update'
32+
import { useIsOEMMode } from '/app/resources/robot-settings'
3133
import { ExternalLink } from '/app/atoms/Link/ExternalLink'
32-
import { ReleaseNotes } from '/app/molecules/ReleaseNotes'
3334
import { useIsRobotBusy } from '/app/redux-resources/robots'
3435
import { useDispatchStartRobotUpdate } from '/app/redux/robot-update/hooks'
3536

@@ -73,6 +74,7 @@ export function UpdateRobotModal({
7374
}: UpdateRobotModalProps): JSX.Element {
7475
const dispatch = useDispatch<Dispatch>()
7576
const { t } = useTranslation('device_settings')
77+
const isOEMMode = useIsOEMMode()
7678
const [updateButtonProps, updateButtonTooltipProps] = useHoverTooltip()
7779
// TODO(jh 08-29-2023): revisit reasons that are/are not captured by this selector.
7880
const { updateFromFileDisabledReason } = useSelector((state: State) => {
@@ -159,7 +161,7 @@ export function UpdateRobotModal({
159161
<UpdateAppBanner type="informing" marginBottom={SPACING.spacing8}>
160162
{t('update_requires_restarting_robot')}
161163
</UpdateAppBanner>
162-
<ReleaseNotes source={releaseNotes} />
164+
<ReleaseNotes source={releaseNotes} isOEMMode={isOEMMode} />
163165
</Flex>
164166
</Modal>
165167
)

‎app/src/organisms/Desktop/UpdateAppModal/index.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
SecondaryButton,
1717
SPACING,
1818
LegacyStyledText,
19+
ReleaseNotes,
1920
Modal,
2021
} from '@opentrons/components'
2122

@@ -25,9 +26,8 @@ import {
2526
downloadShellUpdate,
2627
applyShellUpdate,
2728
} from '/app/redux/shell'
28-
29+
import { useIsOEMMode } from '/app/resources/robot-settings'
2930
import { ExternalLink } from '/app/atoms/Link/ExternalLink'
30-
import { ReleaseNotes } from '/app/molecules/ReleaseNotes'
3131
import { ProgressBar } from '/app/atoms/ProgressBar'
3232
import { useRemoveActiveAppUpdateToast } from '../Alerts'
3333

@@ -85,6 +85,7 @@ export interface UpdateAppModalProps {
8585
export function UpdateAppModal(props: UpdateAppModalProps): JSX.Element {
8686
const { closeModal } = props
8787
const dispatch = useDispatch<Dispatch>()
88+
const isOEMMode = useIsOEMMode()
8889
const updateState = useSelector(getShellUpdateState)
8990
const {
9091
downloaded,
@@ -199,7 +200,7 @@ export function UpdateAppModal(props: UpdateAppModalProps): JSX.Element {
199200
<UpdateAppBanner type="informing" marginBottom={SPACING.spacing8}>
200201
{t('branded:update_requires_restarting_app')}
201202
</UpdateAppBanner>
202-
<ReleaseNotes source={releaseNotesText} />
203+
<ReleaseNotes source={releaseNotesText} isOEMMode={isOEMMode} />
203204
</Flex>
204205
</Modal>
205206
) : null}

‎app/src/organisms/ODD/RobotSettingsDashboard/RobotSystemVersionModal.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import {
77
Flex,
88
OVERFLOW_AUTO,
99
SPACING,
10+
ReleaseNotes,
1011
} from '@opentrons/components'
11-
12+
import { useIsOEMMode } from '/app/resources/robot-settings'
1213
import { SmallButton } from '/app/atoms/buttons'
1314
import { InlineNotification } from '/app/atoms/InlineNotification'
14-
import { ReleaseNotes } from '/app/molecules/ReleaseNotes'
1515
import { OddModal } from '/app/molecules/OddModal'
1616

1717
import type { OddModalHeaderBaseProps } from '/app/molecules/OddModal/types'
@@ -29,6 +29,7 @@ export function RobotSystemVersionModal({
2929
}: RobotSystemVersionModalProps): JSX.Element {
3030
const { t } = useTranslation(['device_settings', 'shared'])
3131
const navigate = useNavigate()
32+
const isOEMMode = useIsOEMMode()
3233

3334
const modalHeader: OddModalHeaderBaseProps = {
3435
title: t('robot_system_version_available', {
@@ -53,7 +54,7 @@ export function RobotSystemVersionModal({
5354
heading={t('update_requires_restarting_robot')}
5455
hug
5556
/>
56-
<ReleaseNotes source={releaseNotes} />
57+
<ReleaseNotes source={releaseNotes} isOEMMode={isOEMMode} />
5758
</Flex>
5859
<Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing8}>
5960
<SmallButton

‎components/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"i18next": "^19.8.3",
3737
"lodash": "4.17.21",
3838
"react-i18next": "14.0.0",
39+
"react-markdown": "9.0.1",
3940
"react-popper": "1.0.0",
4041
"react-remove-scroll": "2.4.3",
4142
"react-select": "5.4.0",

‎components/src/molecules/ReleaseNotes/index.tsx

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import Markdown from 'react-markdown'
2+
import styled from 'styled-components'
3+
import { LegacyStyledText } from '../../atoms'
4+
import { Box } from '../../primitives'
5+
import { COLORS } from '../../helix-design-system'
6+
import { SPACING } from '../../ui-style-constants'
7+
8+
export interface ReleaseNotesProps {
9+
isOEMMode: boolean
10+
source?: string | null
11+
}
12+
13+
const DEFAULT_RELEASE_NOTES = 'We recommend upgrading to the latest version.'
14+
15+
export function ReleaseNotes(props: ReleaseNotesProps): JSX.Element {
16+
const { source, isOEMMode } = props
17+
18+
return (
19+
<div css={ReleaseNotesStyled}>
20+
{source != null && !isOEMMode ? (
21+
<Markdown
22+
components={{
23+
div: undefined,
24+
ul: UnnumberedListText,
25+
h2: HeaderText,
26+
li: ListItemText,
27+
p: ParagraphText,
28+
a: ExternalLink,
29+
hr: HorizontalRule,
30+
}}
31+
>
32+
{source}
33+
</Markdown>
34+
) : (
35+
<p>{DEFAULT_RELEASE_NOTES}</p>
36+
)}
37+
</div>
38+
)
39+
}
40+
41+
function ExternalLink(props: JSX.IntrinsicAttributes): JSX.Element {
42+
return <a {...props} target="_blank" rel="noopener noreferrer" />
43+
}
44+
45+
function ParagraphText(props: JSX.IntrinsicAttributes): JSX.Element {
46+
return <LegacyStyledText {...props} as="p" />
47+
}
48+
49+
function HeaderText(props: JSX.IntrinsicAttributes): JSX.Element {
50+
return <LegacyStyledText {...props} as="h3" />
51+
}
52+
53+
function ListItemText(props: JSX.IntrinsicAttributes): JSX.Element {
54+
return <LegacyStyledText {...props} as="li" />
55+
}
56+
57+
function UnnumberedListText(props: JSX.IntrinsicAttributes): JSX.Element {
58+
return <LegacyStyledText {...props} as="ul" />
59+
}
60+
61+
function HorizontalRule(): JSX.Element {
62+
return (
63+
<Box
64+
borderBottom={`1px solid ${COLORS.grey30}`}
65+
marginY={SPACING.spacing16}
66+
data-testid="divider"
67+
/>
68+
)
69+
}
70+
71+
const ReleaseNotesStyled = styled.div`
72+
.release_notes {
73+
width: 100%;
74+
max-height: 100%;
75+
padding: 0 0.5rem;
76+
77+
& > h1 {
78+
font-size: var(--fs-header); /* from legacy --font-header-dark */
79+
font-weight: var(--fw-semibold); /* from legacy --font-header-dark */
80+
color: var(--c-font-dark); /* from legacy --font-header-dark */
81+
margin-bottom: 1rem;
82+
}
83+
84+
& > h2 {
85+
font-size: var(--fs-header); /* from legacy --font-header-dark */
86+
color: var(--c-font-dark); /* from legacy --font-header-dark */
87+
font-weight: var(--fw-regular);
88+
margin-top: 1rem;
89+
margin-bottom: 0.75rem;
90+
}
91+
92+
& > h3 {
93+
font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
94+
color: var(--c-font-dark); /* from legacy --font-body-2-dark */
95+
font-weight: var(--fw-semibold);
96+
margin-top: 0.75rem;
97+
margin-bottom: 0.5rem;
98+
}
99+
100+
& ul,
101+
& ol {
102+
margin-left: 1.25rem;
103+
margin-bottom: 0.25rem;
104+
font-size: var(--fs-body-2);
105+
color: var(--c-font-dark); /* from legacy --font-body-2-dark */
106+
}
107+
108+
& li {
109+
margin: 0.25rem 0;
110+
font-size: var(--fs-body-2);
111+
color: var(--c-font-dark); /* from legacy --font-body-2-dark */
112+
}
113+
114+
& code {
115+
font-family: monospace;
116+
color: var(--c-font-dark);
117+
}
118+
119+
& pre {
120+
margin: 0.5rem 0;
121+
padding: 0.5rem 0.75rem;
122+
background-color: var(--c-font-dark);
123+
124+
& code {
125+
color: var(--c-font-light);
126+
}
127+
}
128+
129+
& p {
130+
font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
131+
font-weight: var(--fw-regular); /* from legacy --font-body-2-dark */
132+
color: var(--c-font-dark); /* from legacy --font-body-2-dark */
133+
margin-bottom: 1rem;
134+
}
135+
}
136+
`

‎components/src/molecules/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ export * from './DropdownMenu'
55
export * from './InfoScreen'
66
export * from './LiquidIcon'
77
export * from './ParametersTable'
8+
export * from './ReleaseNotes'
89
export * from './Tabs'

0 commit comments

Comments
 (0)