@@ -62,7 +62,7 @@ export default function NotificationArea(props: IProps) {
62
62
63
63
const { hideNewDeviceBanner } = useActions ( accountActions ) ;
64
64
65
- const { setDisplayedChangelog } = useAppContext ( ) ;
65
+ const { setDisplayedChangelog, setDismissedUpgrade } = useAppContext ( ) ;
66
66
67
67
const currentVersion = useSelector ( ( state ) => state . version . current ) ;
68
68
const displayedForVersion = useSelector (
@@ -73,7 +73,7 @@ export default function NotificationArea(props: IProps) {
73
73
) ;
74
74
const changelog = useSelector ( ( state ) => state . userInterface . changelog ) ;
75
75
76
- const close = useCallback ( ( ) => {
76
+ const displayedChangelog = useCallback ( ( ) => {
77
77
setDisplayedChangelog ( ) ;
78
78
} , [ setDisplayedChangelog ] ) ;
79
79
@@ -120,10 +120,12 @@ export default function NotificationArea(props: IProps) {
120
120
currentVersion,
121
121
displayedForVersion,
122
122
changelog,
123
- close,
123
+ close : displayedChangelog ,
124
124
} ) ,
125
125
new UpdateAvailableNotificationProvider ( {
126
- ...version ,
126
+ suggestedIsBeta : version . suggestedIsBeta ,
127
+ suggestedUpgrade : version . suggestedUpgrade ,
128
+ close : setDismissedUpgrade ,
127
129
updateDismissedForVersion,
128
130
} ) ,
129
131
) ;
@@ -147,16 +149,27 @@ export default function NotificationArea(props: IProps) {
147
149
{ notification . title }
148
150
</ NotificationTitle >
149
151
< NotificationSubtitle data-testid = "notificationSubTitle" >
150
- { notification . subtitleAction ?. type === 'navigate-internal' ? (
151
- < InternalLink
152
- variant = "labelTiny"
153
- color = { Colors . white60 }
154
- { ...notification . subtitleAction . link } >
155
- { formatHtml ( notification . subtitle ?? '' ) }
156
- </ InternalLink >
157
- ) : (
158
- formatHtml ( notification . subtitle ?? '' )
159
- ) }
152
+ { Array . isArray ( notification . subtitle )
153
+ ? notification . subtitle . map ( ( subtitle , index , arr ) => {
154
+ const content =
155
+ subtitle . action && subtitle . action . type === 'navigate-internal' ? (
156
+ < InternalLink
157
+ variant = "labelTiny"
158
+ color = { Colors . white60 }
159
+ { ...subtitle . action . link } >
160
+ { formatHtml ( subtitle . content ) }
161
+ </ InternalLink >
162
+ ) : (
163
+ formatHtml ( subtitle . content )
164
+ ) ;
165
+ return (
166
+ < span key = { index } >
167
+ { content }
168
+ { index !== arr . length - 1 && ' ' }
169
+ </ span >
170
+ ) ;
171
+ } )
172
+ : formatHtml ( notification . subtitle ?? '' ) }
160
173
</ NotificationSubtitle >
161
174
</ NotificationContent >
162
175
{ notification . action && (
@@ -192,7 +205,7 @@ function NotificationActionWrapper({
192
205
const { push } = useHistory ( ) ;
193
206
const { openUrlWithAuth, openUrl } = useAppContext ( ) ;
194
207
195
- const closeTroubleshootModal = useCallback ( ( ) => setIsModalOpen ( false ) , [ setIsModalOpen ] ) ;
208
+ const closeModal = useCallback ( ( ) => setIsModalOpen ( false ) , [ setIsModalOpen ] ) ;
196
209
197
210
const handleClick = useCallback ( ( ) => {
198
211
if ( action ) {
@@ -207,7 +220,9 @@ function NotificationActionWrapper({
207
220
setIsModalOpen ( true ) ;
208
221
break ;
209
222
case 'close' :
210
- action . close ( ) ;
223
+ if ( action . close ) {
224
+ action . close ( ) ;
225
+ }
211
226
break ;
212
227
}
213
228
}
@@ -216,9 +231,9 @@ function NotificationActionWrapper({
216
231
} , [ action , setIsModalOpen , openUrlWithAuth , openUrl ] ) ;
217
232
218
233
const goToProblemReport = useCallback ( ( ) => {
219
- closeTroubleshootModal ( ) ;
234
+ closeModal ( ) ;
220
235
push ( RoutePath . problemReport , { transition : transitions . show } ) ;
221
- } , [ closeTroubleshootModal , push ] ) ;
236
+ } , [ closeModal , push ] ) ;
222
237
223
238
let actionComponent : React . ReactElement | undefined ;
224
239
if ( action ) {
@@ -254,7 +269,7 @@ function NotificationActionWrapper({
254
269
255
270
let buttons = [
256
271
problemReportButton ,
257
- < AppButton . BlueButton key = "back" onClick = { closeTroubleshootModal } >
272
+ < AppButton . BlueButton key = "back" onClick = { closeModal } >
258
273
{ messages . gettext ( 'Back' ) }
259
274
</ AppButton . BlueButton > ,
260
275
] ;
@@ -291,7 +306,7 @@ function NotificationActionWrapper({
291
306
isOpen = { isModalOpen }
292
307
type = { ModalAlertType . info }
293
308
buttons = { buttons }
294
- close = { closeTroubleshootModal } >
309
+ close = { closeModal } >
295
310
< ModalMessage > { action . troubleshoot ?. details } </ ModalMessage >
296
311
< ModalMessage >
297
312
< ModalMessageList >
0 commit comments