Skip to content

Commit df1b23d

Browse files
ArtemHoruzhenkoArtemHoruzhenko
authored
RI-7687: adjust RDI deploy modal (#5170)
* RI-7687: adjust RDI deploy modal * RI-7687: fix PR comments * RI-7687: fix PR comments
1 parent 6fba3ff commit df1b23d

File tree

3 files changed

+80
-159
lines changed

3 files changed

+80
-159
lines changed

‎redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.spec.tsx‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
mockedStore,
88
render,
99
screen,
10+
within,
1011
} from 'uiSrc/utils/test-utils'
1112
import { rdiPipelineSelector } from 'uiSrc/slices/rdi/pipeline'
1213
import DeployPipelineButton, { Props } from './DeployPipelineButton'
@@ -58,7 +59,14 @@ describe('DeployPipelineButton', () => {
5859

5960
it('should call proper telemetry on Deploy', () => {
6061
fireEvent.click(screen.getByTestId('deploy-rdi-pipeline'))
61-
fireEvent.click(screen.getByTestId('deploy-confirm-btn'))
62+
63+
const confirmDeployButton = within(
64+
screen.getByRole('dialog'),
65+
).getByLabelText('Deploy')
66+
expect(confirmDeployButton).toBeInTheDocument()
67+
68+
fireEvent.click(confirmDeployButton)
69+
6270
expect(sendEventTelemetry).toHaveBeenCalledWith({
6371
event: TelemetryEvent.RDI_DEPLOY_CLICKED,
6472
eventData: {
@@ -78,7 +86,13 @@ describe('DeployPipelineButton', () => {
7886
expect(el).toHaveAttribute('aria-checked', 'false')
7987
fireEvent.click(el)
8088
expect(el).toHaveAttribute('aria-checked', 'true')
81-
fireEvent.click(screen.getByTestId('deploy-confirm-btn'))
89+
90+
const confirmDeployButton = within(
91+
screen.getByRole('dialog'),
92+
).getByLabelText('Deploy')
93+
expect(confirmDeployButton).toBeInTheDocument()
94+
95+
fireEvent.click(confirmDeployButton)
8296
expect(sendEventTelemetry).toHaveBeenCalledWith({
8397
event: TelemetryEvent.RDI_DEPLOY_CLICKED,
8498
eventData: {
@@ -97,7 +111,10 @@ describe('DeployPipelineButton', () => {
97111

98112
fireEvent.click(screen.getByTestId('deploy-rdi-pipeline'))
99113

100-
expect(screen.queryByTestId('deploy-confirm-btn')).toBeInTheDocument()
114+
const confirmDeployButton = within(
115+
screen.getByRole('dialog'),
116+
).getByLabelText('Deploy')
117+
expect(confirmDeployButton).toBeInTheDocument()
101118
expect(
102119
screen.queryByText('Are you sure you want to deploy the pipeline?'),
103120
).toBeInTheDocument()
@@ -119,10 +136,13 @@ describe('DeployPipelineButton', () => {
119136

120137
fireEvent.click(screen.getByTestId('deploy-rdi-pipeline'))
121138

122-
expect(screen.queryByTestId('deploy-confirm-btn')).toBeInTheDocument()
139+
const confirmDeployButton = within(
140+
screen.getByRole('dialog'),
141+
).getByLabelText('Deploy')
142+
expect(confirmDeployButton).toBeInTheDocument()
123143
expect(
124144
screen.queryByText('Are you sure you want to deploy the pipeline?'),
125-
).not.toBeInTheDocument()
145+
).toBeInTheDocument()
126146
expect(
127147
screen.queryByText(
128148
'Your RDI pipeline contains errors. Are you sure you want to continue?',

‎redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx‎

Lines changed: 55 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import cx from 'classnames'
21
import React, { useState } from 'react'
32
import { useDispatch, useSelector } from 'react-redux'
43
import { useParams } from 'react-router-dom'
@@ -14,17 +13,14 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
1413
import { createAxiosError, pipelineToJson } from 'uiSrc/utils'
1514
import { addErrorNotification } from 'uiSrc/slices/app/notifications'
1615
import { rdiErrorMessages } from 'uiSrc/pages/rdi/constants'
17-
import { ColorText, Text } from 'uiSrc/components/base/text'
18-
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
19-
import { Spacer } from 'uiSrc/components/base/layout/spacer'
20-
import { OutsideClickDetector } from 'uiSrc/components/base/utils'
16+
import { Text } from 'uiSrc/components/base/text'
17+
import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
2118
import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
22-
import { RocketIcon } from 'uiSrc/components/base/icons'
23-
import { Title } from 'uiSrc/components/base/text/Title'
19+
import { Icon, RocketIcon, InfoIcon } from 'uiSrc/components/base/icons'
2420
import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
25-
import { RiPopover, RiTooltip } from 'uiSrc/components/base'
26-
import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
27-
import styles from './styles.module.scss'
21+
import { RiTooltip } from 'uiSrc/components/base'
22+
import { Modal } from 'uiSrc/components/base/display/modal'
23+
import { UploadWarningBanner } from 'uiSrc/components/upload-warning/styles'
2824

2925
export interface Props {
3026
loading: boolean
@@ -33,7 +29,6 @@ export interface Props {
3329
}
3430

3531
const DeployPipelineButton = ({ loading, disabled, onReset }: Props) => {
36-
const [isPopoverOpen, setIsPopoverOpen] = useState(false)
3732
const [resetPipeline, setResetPipeline] = useState(false)
3833

3934
const { config, jobs, resetChecked, isPipelineValid } =
@@ -60,7 +55,6 @@ const DeployPipelineButton = ({ loading, disabled, onReset }: Props) => {
6055
jobsNumber: jobs?.length,
6156
},
6257
})
63-
setIsPopoverOpen(false)
6458
setResetPipeline(false)
6559
const JSONValues = pipelineToJson({ config, jobs }, (errors) => {
6660
dispatch(
@@ -87,107 +81,64 @@ const DeployPipelineButton = ({ loading, disabled, onReset }: Props) => {
8781
)
8882
}
8983

90-
const handleClosePopover = () => {
91-
setIsPopoverOpen(false)
92-
}
93-
94-
const handleClickDeploy = () => {
95-
setIsPopoverOpen(true)
96-
}
97-
9884
const handleSelectReset = (reset: boolean) => {
9985
setResetPipeline(reset)
10086
dispatch(resetPipelineChecked(reset))
10187
}
10288

10389
return (
104-
<OutsideClickDetector onOutsideClick={handleClosePopover}>
105-
<RiPopover
106-
closePopover={handleClosePopover}
107-
ownFocus
108-
initialFocus={false}
109-
className={styles.popoverAnchor}
110-
panelClassName={cx('popoverLikeTooltip', styles.popover)}
111-
anchorClassName={styles.popoverAnchor}
112-
anchorPosition="upLeft"
113-
isOpen={isPopoverOpen}
114-
panelPaddingSize="m"
115-
focusTrapProps={{
116-
scrollLock: true,
117-
}}
118-
button={
119-
<PrimaryButton
120-
onClick={handleClickDeploy}
121-
icon={RocketIcon}
122-
disabled={disabled}
123-
loading={loading}
124-
data-testid="deploy-rdi-pipeline"
125-
>
126-
Deploy
127-
</PrimaryButton>
128-
}
129-
>
130-
<Title size="XS">
131-
{isPipelineValid ? (
132-
<ColorText color="default">
133-
Are you sure you want to deploy the pipeline?
134-
</ColorText>
135-
) : (
136-
<ColorText color="warning">
137-
<RiIcon type="ToastDangerIcon" size="L" color="attention500" />
138-
Your RDI pipeline contains errors. Are you sure you want to
139-
continue?
140-
</ColorText>
141-
)}
142-
</Title>
143-
<Spacer size="s" />
144-
<Text size="s">
145-
When deployed, this local configuration will overwrite any existing
146-
pipeline.
147-
</Text>
148-
<Spacer size="s" />
149-
<Text size="s">
150-
After deployment, consider flushing the target Redis database and
151-
resetting the pipeline to ensure that all data is reprocessed.
152-
</Text>
153-
<Spacer size="s" />
154-
<div className={styles.checkbox}>
155-
<Checkbox
156-
id="resetPipeline"
157-
name="resetPipeline"
158-
label="Reset"
159-
className={cx(styles.resetPipelineCheckbox, {
160-
[styles.checked]: resetPipeline,
161-
})}
162-
checked={resetPipeline}
163-
onChange={(e) => handleSelectReset(e.target.checked)}
164-
data-testid="reset-pipeline-checkbox"
165-
/>
166-
167-
<RiTooltip content="The pipeline will take a new snapshot of the data and process it, then continue tracking changes.">
168-
<RiIcon
169-
type="InfoIcon"
170-
size="m"
171-
style={{ cursor: 'pointer' }}
172-
data-testid="reset-checkbox-info-icon"
90+
<Modal
91+
id="deploy-pipeline-modal"
92+
title="Are you sure you want to deploy the pipeline?"
93+
content={
94+
<Col gap="l">
95+
{!isPipelineValid && (
96+
<UploadWarningBanner
97+
message="Your RDI pipeline contains errors. Are you sure you want to continue?"
98+
show
99+
showIcon
100+
variant="attention"
173101
/>
174-
</RiTooltip>
175-
</div>
176-
<Row gap="m" responsive justify="end">
102+
)}
177103
<FlexItem>
178-
<PrimaryButton
179-
size="s"
180-
color="secondary"
181-
className={styles.popoverBtn}
182-
onClick={handleDeployPipeline}
183-
data-testid="deploy-confirm-btn"
184-
>
185-
Deploy
186-
</PrimaryButton>
104+
<Text>
105+
When deployed, this local configuration will overwrite any
106+
existing pipeline.
107+
</Text>
108+
<Text>
109+
After deployment, consider flushing the target Redis database and
110+
resetting the pipeline to ensure that all data is reprocessed.
111+
</Text>
187112
</FlexItem>
188-
</Row>
189-
</RiPopover>
190-
</OutsideClickDetector>
113+
<Row align="center">
114+
<Checkbox
115+
id="resetPipeline"
116+
name="resetPipeline"
117+
label="Reset"
118+
labelSize="M"
119+
checked={resetPipeline}
120+
onChange={(e) => handleSelectReset(e.target.checked)}
121+
data-testid="reset-pipeline-checkbox"
122+
/>
123+
124+
<RiTooltip content="The pipeline will take a new snapshot of the data and process it, then continue tracking changes.">
125+
<Icon icon={InfoIcon} data-testid="reset-checkbox-info-icon" />
126+
</RiTooltip>
127+
</Row>
128+
</Col>
129+
}
130+
primaryButtonText="Deploy"
131+
onPrimaryButtonClick={handleDeployPipeline}
132+
>
133+
<PrimaryButton
134+
icon={RocketIcon}
135+
disabled={disabled}
136+
loading={loading}
137+
data-testid="deploy-rdi-pipeline"
138+
>
139+
Deploy
140+
</PrimaryButton>
141+
</Modal>
191142
)
192143
}
193144

‎redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/styles.module.scss‎

Lines changed: 0 additions & 50 deletions
This file was deleted.

0 commit comments

Comments
 (0)