Skip to content

Commit c799472

Browse files
mariasergeenkomariasergeenko
authored
Merge pull request #2993 from RedisInsight/fe/feature/RI-5313-update-tutorials-form
#RI-5313 - update custom tutorials form
2 parents affb864 + 87cd667 commit c799472

File tree

10 files changed

+133
-97
lines changed

10 files changed

+133
-97
lines changed

‎redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/EnablementArea.spec.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -153,14 +153,13 @@ describe('EnablementArea', () => {
153153
expect(screen.getByTestId('upload-tutorial-form')).toBeInTheDocument()
154154
})
155155

156-
it('should render welcome screen and open form', () => {
156+
it('should render open form with tutorials', () => {
157157
const customTutorials = [{ ...MOCK_CUSTOM_TUTORIALS_ITEMS[0], children: [] }]
158158
render(<EnablementArea {...instance(mockedProps)} customTutorials={customTutorials} />)
159159
expect(screen.getByTestId('welcome-my-tutorials')).toBeInTheDocument()
160160

161161
fireEvent.click(screen.getByTestId('upload-tutorial-btn'))
162162
expect(screen.getByTestId('upload-tutorial-form')).toBeInTheDocument()
163-
expect(screen.getByTestId('welcome-my-tutorials')).toBeInTheDocument()
164163
})
165164

166165
it('should call proper actions after upload form submit', async () => {

‎redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/CreateTutorialLink/CreateTutorialLink.spec.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
3+
4+
import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
5+
import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/analytics/clusterDetailsHandlers'
6+
import CreateTutorailLink from './CreateTutorialLink'
7+
8+
jest.mock('uiSrc/telemetry', () => ({
9+
...jest.requireActual('uiSrc/telemetry'),
10+
sendEventTelemetry: jest.fn(),
11+
}))
12+
13+
describe('CreateTutoralLink', () => {
14+
it('should render', () => {
15+
expect(render(<CreateTutorailLink />)).toBeTruthy()
16+
})
17+
18+
it('should call proper telemetry event after click read more', () => {
19+
const sendEventTelemetryMock = jest.fn();
20+
21+
(sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
22+
render(<CreateTutorailLink />)
23+
24+
fireEvent.click(screen.getByTestId('read-more-link'))
25+
26+
expect(sendEventTelemetry).toBeCalledWith({
27+
event: TelemetryEvent.EXPLORE_PANEL_CREATE_TUTORIAL_LINK_CLICKED,
28+
eventData: {
29+
databaseId: INSTANCE_ID_MOCK,
30+
}
31+
});
32+
(sendEventTelemetry as jest.Mock).mockRestore()
33+
})
34+
})

‎redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/CreateTutorialLink/CreateTutorialLink.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
import { useParams } from 'react-router-dom'
3+
import { ExternalLink } from 'uiSrc/components'
4+
import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
5+
6+
import { sendEventTelemetry, TELEMETRY_EMPTY_VALUE, TelemetryEvent } from 'uiSrc/telemetry'
7+
import styles from './styles.module.scss'
8+
9+
const CreateTutorialLink = () => {
10+
const { instanceId = '' } = useParams<{ instanceId: string }>()
11+
const onClickReadMore = () => {
12+
sendEventTelemetry({
13+
event: TelemetryEvent.EXPLORE_PANEL_CREATE_TUTORIAL_LINK_CLICKED,
14+
eventData: {
15+
databaseId: instanceId || TELEMETRY_EMPTY_VALUE
16+
}
17+
})
18+
}
19+
20+
return (
21+
<ExternalLink
22+
color="text"
23+
iconSize="s"
24+
className={styles.readMoreLink}
25+
onClick={onClickReadMore}
26+
href={EXTERNAL_LINKS.guidesRepo}
27+
data-testid="read-more-link"
28+
>
29+
Create your tutorial
30+
</ExternalLink>
31+
)
32+
}
33+
34+
export default CreateTutorialLink

‎redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/CreateTutorialLink/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import CreateTutorialLink from './CreateTutorialLink'
2+
3+
export default CreateTutorialLink

‎redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/CreateTutorialLink/styles.module.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.readMoreLink {
2+
font-size: 12px;
3+
}

‎redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ const Navigation = (props: Props) => {
113113
>
114114
{isCustomTutorials && actions?.includes(EAItemActions.Create) && (
115115
<div className={styles.customTuturoialsForm}>
116-
{children?.length === 0 && (
116+
{!isCreateOpen && children?.length === 0 && (
117117
<WelcomeMyTutorials handleOpenUpload={() => setIsCreateOpen(true)} />
118118
)}
119119
{isCreateOpen && (

‎redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { isEmpty } from 'lodash'
77
import { Nullable } from 'uiSrc/utils'
88
import validationErrors from 'uiSrc/constants/validationErrors'
99

10+
import CreateTutorialLink from '../CreateTutorialLink'
1011
import styles from './styles.module.scss'
1112

1213
export interface FormValues {
@@ -93,37 +94,40 @@ const UploadTutorialForm = (props: Props) => {
9394
/>
9495
<EuiSpacer size="l" />
9596
<div className={styles.footer}>
96-
<EuiButton
97-
color="secondary"
98-
size="s"
99-
onClick={() => onCancel?.()}
100-
data-testid="cancel-upload-tutorial-btn"
101-
>
102-
Cancel
103-
</EuiButton>
104-
<EuiToolTip
105-
position="top"
106-
anchorClassName="euiToolTip__btn-disabled"
107-
title={
108-
isSubmitDisabled
109-
? validationErrors.REQUIRED_TITLE(Object.keys(errors).length)
110-
: null
111-
}
112-
content={getSubmitButtonContent(isSubmitDisabled)}
113-
>
97+
<CreateTutorialLink />
98+
<div className={styles.footerButtons}>
11499
<EuiButton
115-
className={styles.btnSubmit}
116100
color="secondary"
117101
size="s"
118-
fill
119-
onClick={() => formik.handleSubmit()}
120-
iconType={isSubmitDisabled ? 'iInCircle' : undefined}
121-
disabled={isSubmitDisabled}
122-
data-testid="submit-upload-tutorial-btn"
102+
onClick={() => onCancel?.()}
103+
data-testid="cancel-upload-tutorial-btn"
123104
>
124-
Submit
105+
Cancel
125106
</EuiButton>
126-
</EuiToolTip>
107+
<EuiToolTip
108+
position="top"
109+
anchorClassName="euiToolTip__btn-disabled"
110+
title={
111+
isSubmitDisabled
112+
? validationErrors.REQUIRED_TITLE(Object.keys(errors).length)
113+
: null
114+
}
115+
content={getSubmitButtonContent(isSubmitDisabled)}
116+
>
117+
<EuiButton
118+
className={styles.btnSubmit}
119+
color="secondary"
120+
size="s"
121+
fill
122+
onClick={() => formik.handleSubmit()}
123+
iconType={isSubmitDisabled ? 'iInCircle' : undefined}
124+
disabled={isSubmitDisabled}
125+
data-testid="submit-upload-tutorial-btn"
126+
>
127+
Submit
128+
</EuiButton>
129+
</EuiToolTip>
130+
</div>
127131
</div>
128132
</div>
129133
</div>

‎redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/styles.module.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,5 +95,11 @@
9595
.footer {
9696
display: flex;
9797
align-items: center;
98-
justify-content: flex-end;
98+
justify-content: space-between;
99+
100+
.footerButtons {
101+
display: flex;
102+
align-items: center;
103+
justify-content: flex-end;
104+
}
99105
}

‎redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.spec.tsx‎

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,8 @@
11
import React from 'react'
22
import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
33

4-
import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
5-
import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/analytics/clusterDetailsHandlers'
6-
74
import WelcomeMyTutorials from './WelcomeMyTutorials'
85

9-
jest.mock('uiSrc/telemetry', () => ({
10-
...jest.requireActual('uiSrc/telemetry'),
11-
sendEventTelemetry: jest.fn(),
12-
}))
13-
146
describe('WelcomeMyTutorials', () => {
157
it('should render', () => {
168
expect(render(<WelcomeMyTutorials handleOpenUpload={jest.fn()} />)).toBeTruthy()
@@ -24,21 +16,4 @@ describe('WelcomeMyTutorials', () => {
2416

2517
expect(mockHandleOpenUpload).toBeCalled()
2618
})
27-
28-
it('should call proper telemetry event after click read more', () => {
29-
const sendEventTelemetryMock = jest.fn()
30-
31-
sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock)
32-
render(<WelcomeMyTutorials handleOpenUpload={jest.fn()} />)
33-
34-
fireEvent.click(screen.getByTestId('read-more-link'))
35-
36-
expect(sendEventTelemetry).toBeCalledWith({
37-
event: TelemetryEvent.EXPLORE_PANEL_CREATE_TUTORIAL_LINK_CLICKED,
38-
eventData: {
39-
databaseId: INSTANCE_ID_MOCK,
40-
}
41-
})
42-
sendEventTelemetry.mockRestore()
43-
})
4419
})

‎redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.tsx‎

Lines changed: 20 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,32 @@
11
import React from 'react'
22
import { EuiButton, EuiPanel } from '@elastic/eui'
33

4-
import { useParams } from 'react-router-dom'
5-
import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
6-
import { sendEventTelemetry, TELEMETRY_EMPTY_VALUE, TelemetryEvent } from 'uiSrc/telemetry'
4+
import CreateTutorialLink from '../CreateTutorialLink'
75

8-
import { ExternalLink } from 'uiSrc/components'
96
import styles from './styles.module.scss'
107

118
export interface Props {
129
handleOpenUpload: () => void
1310
}
1411

15-
const WelcomeMyTutorials = ({ handleOpenUpload }: Props) => {
16-
const { instanceId = '' } = useParams<{ instanceId: string }>()
17-
const onClickReadMore = () => {
18-
sendEventTelemetry({
19-
event: TelemetryEvent.EXPLORE_PANEL_CREATE_TUTORIAL_LINK_CLICKED,
20-
eventData: {
21-
databaseId: instanceId || TELEMETRY_EMPTY_VALUE
22-
}
23-
})
24-
}
25-
26-
return (
27-
<div className={styles.wrapper} data-testid="welcome-my-tutorials">
28-
<EuiPanel hasBorder={false} hasShadow={false} className={styles.panel} paddingSize="s">
29-
<div className={styles.link}>
30-
<ExternalLink
31-
color="text"
32-
onClick={onClickReadMore}
33-
href={EXTERNAL_LINKS.guidesRepo}
34-
data-testid="read-more-link"
35-
>
36-
Create your own tutorial
37-
</ExternalLink>
38-
</div>
39-
<EuiButton
40-
className={styles.btnSubmit}
41-
color="secondary"
42-
size="s"
43-
fill
44-
onClick={() => handleOpenUpload()}
45-
data-testid="upload-tutorial-btn"
46-
>
47-
+ Upload <span className={styles.hideText}>tutorial</span>
48-
</EuiButton>
49-
</EuiPanel>
50-
</div>
51-
)
52-
}
12+
const WelcomeMyTutorials = ({ handleOpenUpload }: Props) => (
13+
<div className={styles.wrapper} data-testid="welcome-my-tutorials">
14+
<EuiPanel hasBorder={false} hasShadow={false} className={styles.panel} paddingSize="s">
15+
<div className={styles.link}>
16+
<CreateTutorialLink />
17+
</div>
18+
<EuiButton
19+
className={styles.btnSubmit}
20+
color="secondary"
21+
size="s"
22+
fill
23+
onClick={() => handleOpenUpload()}
24+
data-testid="upload-tutorial-btn"
25+
>
26+
+ Upload <span className={styles.hideText}>tutorial</span>
27+
</EuiButton>
28+
</EuiPanel>
29+
</div>
30+
)
5331

5432
export default WelcomeMyTutorials

0 commit comments

Comments
 (0)