Skip to content

Commit a061b08

Browse files
author
Kristiyan Ivanov
authored
RI-7228 - key details - space is missing between Add / Cancel (#4761)
* RI-7228 - key details - space is missing between Add / Cancel * RI-7228 - key details - space is missing between Add / Cancel * RI-7228 - key details - space is missing between Add / Cancel - returned classnames for test purposes
1 parent 907799f commit a061b08

File tree

9 files changed

+144
-250
lines changed

9 files changed

+144
-250
lines changed

‎redisinsight/ui/src/pages/browser/components/action-footer/ActionFooter.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React from 'react'
2+
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
3+
import { PrimaryButton, SecondaryButton } from 'uiSrc/components/base/forms/buttons'
4+
import AddKeyFooter from 'uiSrc/pages/browser/components/add-key/AddKeyFooter/AddKeyFooter'
5+
import { SpacerSize } from 'uiSrc/components/base/layout/spacer/spacer.styles'
6+
7+
export interface ActionFooterProps {
8+
cancelText?: string
9+
actionText?: string
10+
onCancel: () => void
11+
onAction: () => void
12+
disabled?: boolean
13+
loading?: boolean
14+
gap?: SpacerSize
15+
actionTestId?: string
16+
cancelTestId?: string
17+
cancelClassName?: string
18+
actionClassName?: string
19+
usePortal?: boolean
20+
enableFormSubmit?: boolean
21+
}
22+
23+
export const ActionFooter = ({
24+
cancelText = 'Cancel',
25+
actionText = 'Save',
26+
onCancel,
27+
onAction,
28+
disabled = false,
29+
loading = false,
30+
gap = "m",
31+
actionTestId,
32+
cancelTestId,
33+
cancelClassName = 'btn-cancel btn-back',
34+
actionClassName = 'btn-add',
35+
usePortal = true,
36+
enableFormSubmit = true,
37+
}: ActionFooterProps) => {
38+
const content = (
39+
<Row justify="end" gap={gap} style={{ padding: 18 }}>
40+
<FlexItem>
41+
<SecondaryButton
42+
onClick={onCancel}
43+
data-testid={cancelTestId}
44+
className={cancelClassName}
45+
>
46+
{cancelText}
47+
</SecondaryButton>
48+
</FlexItem>
49+
<FlexItem>
50+
<PrimaryButton
51+
type={enableFormSubmit ? 'submit' : 'button'}
52+
loading={loading}
53+
onClick={onAction}
54+
disabled={disabled || loading}
55+
data-testid={actionTestId}
56+
className={actionClassName}
57+
>
58+
{actionText}
59+
</PrimaryButton>
60+
</FlexItem>
61+
</Row>
62+
)
63+
64+
if (enableFormSubmit) {
65+
return (
66+
<>
67+
<PrimaryButton type="submit" style={{ display: 'none' }}>
68+
Submit
69+
</PrimaryButton>
70+
{usePortal ? <AddKeyFooter>{content}</AddKeyFooter> : content}
71+
</>
72+
)
73+
}
74+
75+
if (usePortal) {
76+
return <AddKeyFooter>{content}</AddKeyFooter>
77+
}
78+
79+
return content
80+
}

‎redisinsight/ui/src/pages/browser/components/action-footer/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { ActionFooter } from './ActionFooter'
2+
export type { ActionFooterProps } from './ActionFooter'

‎redisinsight/ui/src/pages/browser/components/add-key/AddKeyHash/AddKeyHash.tsx‎

Lines changed: 9 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,15 @@ import { connectedInstanceOverviewSelector } from 'uiSrc/slices/instances/instan
2222
import { FeatureFlags } from 'uiSrc/constants'
2323
import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
2424
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
25-
import {
26-
PrimaryButton,
27-
SecondaryButton,
28-
} from 'uiSrc/components/base/forms/buttons'
2925
import { FormField } from 'uiSrc/components/base/forms/FormField'
26+
import { ActionFooter } from 'uiSrc/pages/browser/components/action-footer'
3027
import {
3128
CreateHashWithExpireDto,
3229
HashFieldDto,
3330
} from 'apiSrc/modules/browser/hash/dto'
3431

3532
import { IHashFieldState, INITIAL_HASH_FIELD_STATE } from './interfaces'
3633
import { AddHashFormConfig as config } from '../constants/fields-config'
37-
import AddKeyFooter from '../AddKeyFooter/AddKeyFooter'
3834

3935
export interface Props {
4036
keyName: string
@@ -233,34 +229,14 @@ const AddKeyHash = (props: Props) => {
233229
)}
234230
</AddMultipleFields>
235231

236-
<PrimaryButton type="submit" style={{ display: 'none' }}>
237-
Submit
238-
</PrimaryButton>
239-
<AddKeyFooter>
240-
<>
241-
<Row justify="end" style={{ padding: 18 }}>
242-
<FlexItem>
243-
<SecondaryButton
244-
onClick={() => onCancel(true)}
245-
className="btn-cancel btn-back"
246-
>
247-
Cancel
248-
</SecondaryButton>
249-
</FlexItem>
250-
<FlexItem>
251-
<PrimaryButton
252-
className="btn-add"
253-
loading={loading}
254-
onClick={submitData}
255-
disabled={!isFormValid || loading}
256-
data-testid="add-key-hash-btn"
257-
>
258-
Add Key
259-
</PrimaryButton>
260-
</FlexItem>
261-
</Row>
262-
</>
263-
</AddKeyFooter>
232+
<ActionFooter
233+
onCancel={() => onCancel(true)}
234+
onAction={submitData}
235+
actionText="Add Key"
236+
loading={loading}
237+
disabled={!isFormValid}
238+
actionTestId="add-key-hash-btn"
239+
/>
264240
</form>
265241
)
266242
}

‎redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.tsx‎

Lines changed: 9 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,18 @@ import { EuiFieldText } from '@elastic/eui'
44

55
import { Maybe, stringToBuffer } from 'uiSrc/utils'
66
import { addKeyStateSelector, addListKey } from 'uiSrc/slices/browser/keys'
7-
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
7+
import { ActionFooter } from 'uiSrc/pages/browser/components/action-footer'
88
import {
99
optionsDestinations,
1010
TAIL_DESTINATION,
1111
} from 'uiSrc/pages/browser/modules/key-details/components/list-details/add-list-elements/AddListElements'
12-
import {
13-
PrimaryButton,
14-
SecondaryButton,
15-
} from 'uiSrc/components/base/forms/buttons'
1612
import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
1713
import {
1814
CreateListWithExpireDto,
1915
ListElementDestination,
2016
} from 'apiSrc/modules/browser/list/dto'
2117

2218
import { AddListFormConfig as config } from '../constants/fields-config'
23-
import AddKeyFooter from '../AddKeyFooter/AddKeyFooter'
2419
import AddMultipleFields from '../../add-multiple-fields'
2520

2621
export interface Props {
@@ -114,34 +109,14 @@ const AddKeyList = (props: Props) => {
114109
/>
115110
)}
116111
</AddMultipleFields>
117-
<PrimaryButton type="submit" style={{ display: 'none' }}>
118-
Submit
119-
</PrimaryButton>
120-
<AddKeyFooter>
121-
<>
122-
<Row justify="end" style={{ padding: 18 }}>
123-
<FlexItem>
124-
<SecondaryButton
125-
onClick={() => onCancel(true)}
126-
className="btn-cancel btn-back"
127-
>
128-
Cancel
129-
</SecondaryButton>
130-
</FlexItem>
131-
<FlexItem>
132-
<PrimaryButton
133-
className="btn-add"
134-
loading={loading}
135-
onClick={submitData}
136-
disabled={!isFormValid || loading}
137-
data-testid="add-key-list-btn"
138-
>
139-
Add Key
140-
</PrimaryButton>
141-
</FlexItem>
142-
</Row>
143-
</>
144-
</AddKeyFooter>
112+
<ActionFooter
113+
onCancel={() => onCancel(true)}
114+
onAction={submitData}
115+
actionText="Add Key"
116+
loading={loading}
117+
disabled={!isFormValid}
118+
actionTestId="add-key-list-btn"
119+
/>
145120
</form>
146121
)
147122
}

‎redisinsight/ui/src/pages/browser/components/add-key/AddKeyReJSON/AddKeyReJSON.tsx‎

Lines changed: 9 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,12 @@ import { MonacoJson } from 'uiSrc/components/monaco-editor'
99
import UploadFile from 'uiSrc/components/upload-file'
1010
import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
1111
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
12-
import { ColorText } from 'uiSrc/components/base/text'
13-
import {
14-
PrimaryButton,
15-
SecondaryButton,
16-
} from 'uiSrc/components/base/forms/buttons'
1712
import { FormField } from 'uiSrc/components/base/forms/FormField'
13+
import { ActionFooter } from 'uiSrc/pages/browser/components/action-footer'
1814
import { CreateRejsonRlWithExpireDto } from 'apiSrc/modules/browser/rejson-rl/dto'
1915

2016
import { AddJSONFormConfig as config } from '../constants/fields-config'
2117

22-
import AddKeyFooter from '../AddKeyFooter/AddKeyFooter'
2318

2419
export interface Props {
2520
keyName: string
@@ -99,38 +94,14 @@ const AddKeyReJSON = (props: Props) => {
9994
</>
10095
</FormField>
10196

102-
<PrimaryButton type="submit" style={{ display: 'none' }}>
103-
Submit
104-
</PrimaryButton>
105-
<AddKeyFooter>
106-
<>
107-
<Row justify="end" style={{ padding: 18 }}>
108-
<FlexItem>
109-
<div>
110-
<SecondaryButton
111-
onClick={() => onCancel(true)}
112-
className="btn-cancel btn-back"
113-
>
114-
<ColorText>Cancel</ColorText>
115-
</SecondaryButton>
116-
</div>
117-
</FlexItem>
118-
<FlexItem>
119-
<div>
120-
<PrimaryButton
121-
className="btn-add"
122-
loading={loading}
123-
onClick={submitData}
124-
disabled={!isFormValid || loading}
125-
data-testid="add-key-json-btn"
126-
>
127-
Add Key
128-
</PrimaryButton>
129-
</div>
130-
</FlexItem>
131-
</Row>
132-
</>
133-
</AddKeyFooter>
97+
<ActionFooter
98+
onCancel={() => onCancel(true)}
99+
onAction={submitData}
100+
actionText="Add Key"
101+
loading={loading}
102+
disabled={!isFormValid}
103+
actionTestId="add-key-json-btn"
104+
/>
134105
</form>
135106
)
136107
}

‎redisinsight/ui/src/pages/browser/components/add-key/AddKeySet/AddKeySet.tsx‎

Lines changed: 9 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,13 @@ import { Maybe, stringToBuffer } from 'uiSrc/utils'
1111
import { addKeyStateSelector, addSetKey } from 'uiSrc/slices/browser/keys'
1212

1313
import AddMultipleFields from 'uiSrc/pages/browser/components/add-multiple-fields'
14-
import {
15-
PrimaryButton,
16-
SecondaryButton,
17-
} from 'uiSrc/components/base/forms/buttons'
14+
import { ActionFooter } from 'uiSrc/pages/browser/components/action-footer'
1815
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
1916
import { FormField } from 'uiSrc/components/base/forms/FormField'
2017
import { CreateSetWithExpireDto } from 'apiSrc/modules/browser/set/dto'
2118

2219
import { INITIAL_SET_MEMBER_STATE, ISetMemberState } from './interfaces'
2320
import { AddSetFormConfig as config } from '../constants/fields-config'
24-
import AddKeyFooter from '../AddKeyFooter/AddKeyFooter'
2521

2622
export interface Props {
2723
keyName: string
@@ -159,34 +155,14 @@ const AddKeySet = (props: Props) => {
159155
</Row>
160156
)}
161157
</AddMultipleFields>
162-
<PrimaryButton type="submit" style={{ display: 'none' }}>
163-
Submit
164-
</PrimaryButton>
165-
<AddKeyFooter>
166-
<>
167-
<Row justify="end" style={{ padding: 18 }}>
168-
<FlexItem>
169-
<SecondaryButton
170-
onClick={() => onCancel(true)}
171-
className="btn-cancel btn-back"
172-
>
173-
Cancel
174-
</SecondaryButton>
175-
</FlexItem>
176-
<FlexItem>
177-
<PrimaryButton
178-
className="btn-add"
179-
loading={loading}
180-
onClick={submitData}
181-
disabled={!isFormValid || loading}
182-
data-testid="add-key-set-btn"
183-
>
184-
Add Key
185-
</PrimaryButton>
186-
</FlexItem>
187-
</Row>
188-
</>
189-
</AddKeyFooter>
158+
<ActionFooter
159+
onCancel={() => onCancel(true)}
160+
onAction={submitData}
161+
actionText="Add Key"
162+
loading={loading}
163+
disabled={!isFormValid}
164+
actionTestId="add-key-set-btn"
165+
/>
190166
</form>
191167
)
192168
}

0 commit comments

Comments
 (0)