Skip to content

Commit fca1393

Browse files
ArtemHoruzhenkoArtemHoruzhenko
authored
Fe/feature/ri 7687 abjust rdi screens (#5148)
* Fe/feature/ri 7687 rdi page navigation (#5125) * RI-7687: use tabs for navigation in RDI (poc) * RI-7687: add tests and remove navigation from the left bar * Fe/feature/ri 7687 rdi page pipeline header (#5128) * RI-7687: use tabs for navigation in RDI (poc) * RI-7687: add tests and remove navigation from the left bar * RI-7687: rework pipeline header * RI-7687: rework pipeline header - fix tests * RI-7687: rework menu and modals (#5136) * RI-7687: adjust statistics page (#5141) * RI-7687: adjust statistics page * RI-7687: fix PR comments * RI-7687: rollback warning message for import form + adjust layout (#5147) * RI-7687: rollback warning message for import form + adjust layout * RI-7687: fix single/double quote issue * RI-7687: rollback prettier config * RI-7687: address PR comments
1 parent 30dc067 commit fca1393

File tree

53 files changed

+875
-890
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+875
-890
lines changed

‎redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import {
2727

2828
import styles from './styles.module.scss'
2929

30-
const AutoRefreshInterval = styled.span<
30+
const AutoRefreshInterval = styled(ColorText)<
3131
HTMLAttributes<HTMLSpanElement> & {
3232
enableAutoRefresh: boolean
3333
disabled?: boolean
@@ -247,26 +247,34 @@ const AutoRefresh = ({
247247
[styles.enable]: !disabled && enableAutoRefresh,
248248
})}
249249
data-testid={getDataTestid('auto-refresh-container')}
250+
// TODO: fix properly
251+
style={{ lineHeight: 1 }}
250252
>
251-
<FlexItem>
252-
<ColorText size="s">
253-
{displayText && (
254-
<span data-testid={getDataTestid('refresh-message-label')}>
255-
{enableAutoRefresh ? 'Auto refresh:' : 'Last refresh:'}
256-
</span>
257-
)}
258-
{displayLastRefresh && (
259-
<AutoRefreshInterval
260-
disabled={disabled}
261-
enableAutoRefresh={enableAutoRefresh}
262-
className={cx('refresh-message-time')}
263-
data-testid={getDataTestid('refresh-message')}
264-
>
265-
{` ${enableAutoRefresh ? refreshRateMessage : refreshMessage}`}
266-
</AutoRefreshInterval>
267-
)}
268-
</ColorText>
269-
</FlexItem>
253+
{displayText && (
254+
<FlexItem>
255+
<ColorText
256+
size="s"
257+
component="span"
258+
data-testid={getDataTestid('refresh-message-label')}
259+
>
260+
{enableAutoRefresh ? 'Auto refresh:' : 'Last refresh:'}
261+
</ColorText>
262+
</FlexItem>
263+
)}
264+
{displayLastRefresh && (
265+
<FlexItem>
266+
<AutoRefreshInterval
267+
disabled={disabled}
268+
enableAutoRefresh={enableAutoRefresh}
269+
className={cx('refresh-message-time')}
270+
data-testid={getDataTestid('refresh-message')}
271+
component="span"
272+
size="s"
273+
>
274+
{` ${enableAutoRefresh ? refreshRateMessage : refreshMessage}`}
275+
</AutoRefreshInterval>
276+
</FlexItem>
277+
)}
270278
<FlexItem>
271279
<Row align="center" gap="none">
272280
<FlexItem>

‎redisinsight/ui/src/components/base/forms/file-picker/RiFilePicker.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ export const RiFilePicker = ({
184184
size={normalFormControl ? 'L' : 'XL'}
185185
aria-hidden="true"
186186
/>
187-
<FilePickerPromptText size="XS" className="RI-File-Picker__promptText">
187+
<FilePickerPromptText size="s" className="RI-File-Picker__promptText">
188188
{promptText || initialPromptText}
189189
</FilePickerPromptText>
190190
{clearButton}

‎redisinsight/ui/src/components/base/forms/file-picker/styles.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ const defaultWrapper = css`
1717
height: 40px;
1818
`
1919
export const FilePickerWrapper = styled.div<FilePickerWrapperProps>`
20-
max-width: 400px;
2120
width: 100%;
2221
position: relative;
2322
${({ $large }) => ($large ? largeWrapper : defaultWrapper)}

‎redisinsight/ui/src/components/base/text/text.styles.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,38 @@ export const Indicator = styled.div<
107107
background-color: ${({ $color }) => $color || 'inherit'};
108108
`
109109

110+
const useStatusColorStyles = ({ $color }: MapProps = {}) => {
111+
const theme = useTheme()
112+
const colors = theme.semantic.color
113+
114+
const getColorValue = (color?: ColorType) => {
115+
switch (color) {
116+
case 'danger':
117+
return colors.text.danger500
118+
case 'warning':
119+
return colors.text.attention500
120+
case 'success':
121+
return colors.text.success500
122+
default:
123+
return color // any supported color value e.g #fff
124+
}
125+
}
126+
127+
return css`
128+
background-color: ${getColorValue($color)};
129+
`
130+
}
131+
132+
export const StatusIndicator = styled.div<
133+
{
134+
$color: ColorType
135+
} & CommonProps
136+
>`
137+
${useStatusColorStyles};
138+
width: 1rem;
139+
height: 1rem;
140+
border-radius: 50%;
141+
`
110142
export const mapSize = (size: TextSizeType): BodyProps['size'] => {
111143
if (size === 'm') {
112144
return 'M'

‎redisinsight/ui/src/components/import-file-modal/ImportFileModal.tsx‎

Lines changed: 104 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@ import React from 'react'
22

33
import { Nullable } from 'uiSrc/utils'
44
import { RiFilePicker, UploadWarning } from 'uiSrc/components'
5-
import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
5+
import { Col, FlexItem } from 'uiSrc/components/base/layout/flex'
66
import { ColorText, Text } from 'uiSrc/components/base/text'
77
import { Loader, Modal } from 'uiSrc/components/base/display'
88
import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
99
import { CancelIcon } from 'uiSrc/components/base/icons'
10-
import { Button } from 'uiSrc/components/base/forms/buttons'
10+
import {
11+
PrimaryButton,
12+
SecondaryButton,
13+
} from 'uiSrc/components/base/forms/buttons'
1114
import styles from './styles.module.scss'
1215

1316
export interface Props<T> {
@@ -50,100 +53,110 @@ const ImportFileModal = <T,>({
5053
const isShowForm = !loading && !data && !error
5154
return (
5255
<Modal.Compose open>
53-
<Modal.Content.Compose className={styles.modal}>
54-
<Modal.Content.Close icon={CancelIcon} onClick={onClose} data-testid="import-file-modal-close-btn" />
55-
<Modal.Content.Header.Title
56-
data-testid="import-file-modal-title"
57-
className={styles.marginTop2}
58-
>
59-
{!data && !error ? title : resultsTitle || 'Import Results'}
60-
</Modal.Content.Header.Title>
61-
<Modal.Content.Body.Compose className={styles.marginTop2}>
62-
<Col align="center">
63-
{warning && <FlexItem>{warning}</FlexItem>}
64-
<FlexItem>
65-
{isShowForm && (
66-
<>
67-
<RiFilePicker
68-
id="import-file-modal-filepicker"
69-
initialPromptText="Select or drag and drop a file"
70-
className={styles.fileDrop}
71-
isInvalid={isInvalid}
72-
onChange={onFileChange}
73-
display="large"
74-
accept={acceptedFileExtension}
75-
data-testid="import-file-modal-filepicker"
76-
aria-label="Select or drag and drop file"
77-
/>
78-
{isInvalid && (
79-
<ColorText
80-
color="danger"
81-
className={styles.errorFileMsg}
82-
data-testid="input-file-error-msg"
83-
>
84-
{invalidMessage}
85-
</ColorText>
86-
)}
87-
</>
88-
)}
89-
{loading && (
90-
<div
91-
className={styles.loading}
92-
data-testid="file-loading-indicator"
93-
>
94-
<Loader size="xl" />
95-
<Text color="subdued" style={{ marginTop: 12 }}>
96-
Uploading...
97-
</Text>
98-
</div>
99-
)}
100-
{error && (
101-
<div className={styles.result} data-testid="result-failed">
102-
<RiIcon type="ToastCancelIcon" size="xxl" color="danger500" />
103-
<Text color="subdued" style={{ marginTop: 16 }}>
104-
{errorMessage}
105-
</Text>
106-
<Text color="subdued">{error}</Text>
107-
</div>
108-
)}
56+
<Modal.Content.Compose persistent>
57+
<Modal.Content.Close
58+
icon={CancelIcon}
59+
onClick={onClose}
60+
data-testid="import-file-modal-close-btn"
61+
/>
62+
63+
<Modal.Content.Header.Compose>
64+
<Modal.Content.Header.Title data-testid="import-file-modal-title">
65+
{!data && !error ? title : resultsTitle || 'Import Results'}
66+
</Modal.Content.Header.Title>
67+
</Modal.Content.Header.Compose>
68+
69+
<Modal.Content.Body
70+
width="610px"
71+
content={
72+
<Col gap="l">
73+
{warning && <FlexItem>{warning}</FlexItem>}
74+
<FlexItem>
75+
{isShowForm && (
76+
<>
77+
<RiFilePicker
78+
id="import-file-modal-filepicker"
79+
initialPromptText="Select or drag and drop a file"
80+
className={styles.fileDrop}
81+
isInvalid={isInvalid}
82+
onChange={onFileChange}
83+
display="large"
84+
accept={acceptedFileExtension}
85+
data-testid="import-file-modal-filepicker"
86+
aria-label="Select or drag and drop file"
87+
/>
88+
{isInvalid && (
89+
<ColorText
90+
color="danger"
91+
className={styles.errorFileMsg}
92+
data-testid="input-file-error-msg"
93+
>
94+
{invalidMessage}
95+
</ColorText>
96+
)}
97+
</>
98+
)}
99+
{loading && (
100+
<div
101+
className={styles.loading}
102+
data-testid="file-loading-indicator"
103+
>
104+
<Loader size="xl" />
105+
<Text color="subdued" style={{ marginTop: 12 }}>
106+
Uploading...
107+
</Text>
108+
</div>
109+
)}
110+
{error && (
111+
<div className={styles.result} data-testid="result-failed">
112+
<RiIcon
113+
type="ToastCancelIcon"
114+
size="xxl"
115+
color="danger500"
116+
/>
117+
<Text style={{ marginTop: 16 }}>{errorMessage}</Text>
118+
<Text>{error}</Text>
119+
</div>
120+
)}
121+
</FlexItem>
109122
{isShowForm && (
110-
<FlexItem grow className={styles.uploadWarningContainer}>
123+
<FlexItem grow>
111124
<UploadWarning />
112125
</FlexItem>
113126
)}
114-
</FlexItem>
115-
</Col>
116-
{data && (
117-
<Row justify="center">
118-
<FlexItem>{submitResults}</FlexItem>
119-
</Row>
120-
)}
121-
</Modal.Content.Body.Compose>
127+
</Col>
128+
}
129+
/>
130+
131+
{data && (
132+
<Modal.Content.Body
133+
content={submitResults}
134+
data-testid="result-succeeded"
135+
/>
136+
)}
122137
<Modal.Content.Footer.Compose>
123-
{isShowForm && (
124-
<>
125-
<Button
126-
variant="secondary-invert"
127-
onClick={onClose}
128-
data-testid="cancel-btn"
129-
>
130-
Cancel
131-
</Button>
132-
<Button
133-
variant="primary"
134-
onClick={onSubmit}
135-
disabled={isSubmitDisabled}
136-
data-testid="submit-btn"
137-
>
138-
{submitBtnText || 'Import'}
139-
</Button>
140-
</>
141-
)}
142-
{data && (
143-
<Button variant="primary" onClick={onClose}>
144-
OK
145-
</Button>
146-
)}
138+
<Modal.Content.Footer.Group>
139+
{isShowForm && (
140+
<>
141+
<SecondaryButton
142+
size="l"
143+
onClick={onClose}
144+
data-testid="cancel-btn"
145+
>
146+
Cancel
147+
</SecondaryButton>
148+
<PrimaryButton
149+
size="l"
150+
onClick={onSubmit}
151+
disabled={isSubmitDisabled}
152+
data-testid="submit-btn"
153+
>
154+
{submitBtnText || 'Import'}
155+
</PrimaryButton>
156+
</>
157+
)}
158+
{data && <PrimaryButton onClick={onClose}>OK</PrimaryButton>}
159+
</Modal.Content.Footer.Group>
147160
</Modal.Content.Footer.Compose>
148161
</Modal.Content.Compose>
149162
</Modal.Compose>

‎redisinsight/ui/src/components/import-file-modal/styles.module.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,3 @@
1-
.marginTop2 {
2-
margin-top: 2rem !important;
3-
}
4-
5-
.uploadWarningContainer {
6-
align-self: flex-start;
7-
text-wrap: wrap;
8-
margin-inline: auto;
9-
margin-top: 1rem;
10-
max-width: 400px;
11-
}
12-
131
.result {
142
height: fit-content;
153
overflow: hidden;

‎redisinsight/ui/src/components/navigation-menu/NavigationMenu.spec.tsx‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -186,18 +186,6 @@ describe('NavigationMenu', () => {
186186
})
187187
})
188188

189-
it('should render private routes with connectedRdiInstanceId', () => {
190-
;(appContextSelector as jest.Mock).mockImplementation(() => ({
191-
...appContextSelector,
192-
workspace: 'redisDataIntegration',
193-
}))
194-
195-
render(<NavigationMenu />)
196-
197-
expect(screen.getByTestId('pipeline-status-page-btn')).toBeTruthy()
198-
expect(screen.getByTestId('pipeline-management-page-btn')).toBeTruthy()
199-
})
200-
201189
describe('feature flags tests', () => {
202190
it('should show feature dependent items when feature flag is on', async () => {
203191
const initialStoreState = set(

0 commit comments

Comments
 (0)