Skip to content

Commit 65eacc7

Browse files
olgennpeterschmidt85
olgenn
and
peterschmidt85
authored
[UI] Default fleet in project wizard (#3464)
* [UI] Default fleet in project wizard #373 * Minor cosmetic changes * Fixes after review * Was added create project wizard for oss * Cosmetical changes + help info * Was added create fleet wizard * Fixes after review * Refactoring after review * Fixes after review * Fixes after review * Cosmetics * Fixes after review --------- Co-authored-by: peterschmidt85 <andrey.cheptsov@gmail.com>
1 parent c01b022 commit 65eacc7

File tree

36 files changed

+1282
-205
lines changed

36 files changed

+1282
-205
lines changed

‎frontend/src/api.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ export const API = {
9999
// Fleets
100100
FLEETS: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/fleets/list`,
101101
FLEETS_DETAILS: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/fleets/get`,
102+
FLEETS_APPLY: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/fleets/apply`,
102103
FLEETS_DELETE: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/fleets/delete`,
103104
FLEET_INSTANCES_DELETE: (projectName: IProject['project_name']) =>
104105
`${API.BASE()}/project/${projectName}/fleets/delete_instances`,

‎frontend/src/components/ButtonWithConfirmation/index.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState } from 'react';
2+
import { useTranslation } from 'react-i18next';
23
import Box from '@cloudscape-design/components/box';
34

45
import { Button } from '../Button';
@@ -13,20 +14,31 @@ export const ButtonWithConfirmation: React.FC<IProps> = ({
1314
confirmButtonLabel,
1415
...props
1516
}) => {
17+
const { t } = useTranslation();
1618
const [showDeleteConfirm, setShowConfirmDelete] = useState(false);
1719

1820
const toggleDeleteConfirm = () => {
1921
setShowConfirmDelete((val) => !val);
2022
};
2123

22-
const content = typeof confirmContent === 'string' ? <Box variant="span">{confirmContent}</Box> : confirmContent;
23-
2424
const onConfirm = () => {
2525
if (onClick) onClick();
2626

2727
setShowConfirmDelete(false);
2828
};
2929

30+
const getContent = () => {
31+
if (!confirmContent) {
32+
return <Box variant="span">{t('confirm_dialog.message')}</Box>;
33+
}
34+
35+
if (typeof confirmContent === 'string') {
36+
return <Box variant="span">{confirmContent}</Box>;
37+
}
38+
39+
return confirmContent;
40+
};
41+
3042
return (
3143
<>
3244
<Button {...props} onClick={toggleDeleteConfirm} />
@@ -36,8 +48,8 @@ export const ButtonWithConfirmation: React.FC<IProps> = ({
3648
onDiscard={toggleDeleteConfirm}
3749
onConfirm={onConfirm}
3850
title={confirmTitle}
39-
content={content}
40-
confirmButtonLabel={confirmButtonLabel}
51+
content={getContent()}
52+
confirmButtonLabel={confirmButtonLabel ?? t('common.delete')}
4153
/>
4254
</>
4355
);

‎frontend/src/components/ConfirmationDialog/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { IProps } from './types';
99

1010
export const ConfirmationDialog: React.FC<IProps> = ({
1111
title: titleProp,
12-
content: contentProp,
12+
content,
1313
visible = false,
1414
onDiscard,
1515
onConfirm,
@@ -18,9 +18,8 @@ export const ConfirmationDialog: React.FC<IProps> = ({
1818
}) => {
1919
const { t } = useTranslation();
2020
const title = titleProp ?? t('confirm_dialog.title');
21-
const content = contentProp ?? <Box variant="span">{t('confirm_dialog.message')}</Box>;
2221
const cancelButtonLabel = cancelButtonLabelProp ?? t('common.cancel');
23-
const confirmButtonLabel = confirmButtonLabelProp ?? t('common.delete');
22+
const confirmButtonLabel = confirmButtonLabelProp ?? t('common.ok');
2423

2524
return (
2625
<Modal

‎frontend/src/components/ConfirmationDialog/slice.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import type { RootState } from 'store';
2+
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
3+
4+
import { IProps as ConfirmationDialogProps } from './types';
5+
6+
type ConfirmationDialogPropsWithUuid = ConfirmationDialogProps & { uuid: string };
7+
8+
type ConfirmationDialogsStata = {
9+
dialogs: Array<ConfirmationDialogPropsWithUuid>;
10+
};
11+
12+
const initialState: ConfirmationDialogsStata = {
13+
dialogs: [],
14+
};
15+
16+
export const confirmationSlice = createSlice({
17+
name: 'confirmation',
18+
initialState,
19+
20+
reducers: {
21+
open: (state, action: PayloadAction<ConfirmationDialogPropsWithUuid>) => {
22+
state.dialogs = [...state.dialogs, action.payload];
23+
},
24+
close: (state, action: PayloadAction<ConfirmationDialogPropsWithUuid['uuid']>) => {
25+
state.dialogs = state.dialogs.filter((i) => i.uuid !== action.payload);
26+
},
27+
},
28+
});
29+
30+
export const { open, close } = confirmationSlice.actions;
31+
32+
export const selectConfirmationDialogs = (state: RootState) => state.confirmation.dialogs;
33+
34+
export default confirmationSlice.reducer;

‎frontend/src/components/form/Toogle/index.module.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@use '@cloudscape-design/design-tokens/index' as awsui;
2+
3+
.labelWithInfo {
4+
display: inline-flex;
5+
align-items: center;
6+
}
7+
8+
.divider {
9+
display: inline-block;
10+
height: 16px;
11+
border-left: 1px solid awsui.$color-border-divider-default;
12+
margin: 0 8px;
13+
}
14+
15+
.info {
16+
display: inline-flex;
17+
}

‎frontend/src/components/form/Toogle/index.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React from 'react';
2+
import { Controller, FieldValues } from 'react-hook-form';
3+
import FormField from '@cloudscape-design/components/form-field';
4+
import ToggleCSD from '@cloudscape-design/components/toggle';
5+
6+
import { FormToggleProps } from './types';
7+
8+
import styles from './index.module.scss';
9+
10+
export const FormToggle = <T extends FieldValues>({
11+
name,
12+
control,
13+
rules,
14+
label,
15+
info,
16+
constraintText,
17+
description,
18+
secondaryControl,
19+
stretch,
20+
leftContent,
21+
toggleLabel,
22+
onChange: onChangeProp,
23+
toggleDescription,
24+
toggleInfo,
25+
...props
26+
}: FormToggleProps<T>) => {
27+
return (
28+
<Controller
29+
name={name}
30+
control={control}
31+
rules={rules}
32+
render={({ field: { onChange, value, ...fieldRest }, fieldState: { error } }) => {
33+
return (
34+
<FormField
35+
description={description}
36+
label={label}
37+
info={info}
38+
stretch={stretch}
39+
constraintText={constraintText}
40+
secondaryControl={secondaryControl}
41+
errorText={error?.message}
42+
>
43+
{leftContent}
44+
45+
<ToggleCSD
46+
{...fieldRest}
47+
{...props}
48+
checked={value}
49+
onChange={(event) => {
50+
onChange(event.detail.checked);
51+
onChangeProp?.(event);
52+
}}
53+
description={toggleDescription}
54+
>
55+
{(toggleLabel || toggleInfo) && (
56+
<span className={styles.labelWithInfo}>
57+
{toggleLabel}
58+
{toggleLabel && toggleInfo && <span aria-hidden="true" className={styles.divider} />}
59+
{toggleInfo && (
60+
<span
61+
className={styles.info}
62+
onClick={(e) => e.stopPropagation()}
63+
onMouseDown={(e) => e.stopPropagation()}
64+
onPointerDown={(e) => e.stopPropagation()}
65+
onKeyDown={(e) => e.stopPropagation()}
66+
>
67+
{toggleInfo}
68+
</span>
69+
)}
70+
</span>
71+
)}
72+
</ToggleCSD>
73+
</FormField>
74+
);
75+
}}
76+
/>
77+
);
78+
};

‎frontend/src/components/form/Toogle/types.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { ReactNode } from 'react';
2+
import { ControllerProps, FieldValues } from 'react-hook-form';
3+
import { FormFieldProps } from '@cloudscape-design/components/form-field';
4+
import { ToggleProps } from '@cloudscape-design/components/toggle';
5+
6+
export type FormToggleProps<T extends FieldValues> = Omit<ToggleProps, 'value' | 'checked' | 'name'> &
7+
Omit<FormFieldProps, 'errorText'> &
8+
Pick<ControllerProps<T>, 'control' | 'name' | 'rules'> & {
9+
toggleDescription?: ReactNode;
10+
leftContent?: ReactNode;
11+
toggleLabel?: ReactNode | string;
12+
toggleInfo?: ReactNode;
13+
};

‎frontend/src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ export { ListEmptyMessage } from './ListEmptyMessage';
7373
export { DetailsHeader } from './DetailsHeader';
7474
export { Loader } from './Loader';
7575
export { FormCheckbox } from './form/Checkbox';
76+
export { FormToggle } from './form/Toogle';
7677
export { FormInput } from './form/Input';
7778
export { FormMultiselect } from './form/Multiselect';
7879
export { FormSelect } from './form/Select';

‎frontend/src/hooks/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export { default as useAppDispatch } from './useAppDispatch';
22
export { default as useAppSelector } from './useAppSelector';
33
export { useBreadcrumbs } from './useBreadcrumbs';
44
export { useNotifications } from './useNotifications';
5+
export { useConfirmationDialog } from './useConfirmationDialog';
56
export { useHelpPanel } from './useHelpPanel';
67
export { usePermissionGuard } from './usePermissionGuard';
78
export { useInfiniteScroll } from './useInfiniteScroll';

‎frontend/src/hooks/useConfirmationDialog.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { close, open } from 'components/ConfirmationDialog/slice';
2+
import { IProps as ConfirmationDialogProps } from 'components/ConfirmationDialog/types';
3+
4+
import { getUid } from '../libs';
5+
import useAppDispatch from './useAppDispatch';
6+
7+
export const useConfirmationDialog = () => {
8+
const dispatch = useAppDispatch();
9+
10+
const onDiscard = (uuid: string) => {
11+
dispatch(close(uuid));
12+
};
13+
14+
const openConfirmationDialog = (props: Omit<ConfirmationDialogProps, 'onDiscard'>) => {
15+
const uuid = getUid();
16+
17+
dispatch(
18+
open({
19+
uuid,
20+
...props,
21+
onDiscard: () => onDiscard(uuid),
22+
}),
23+
);
24+
};
25+
26+
return [openConfirmationDialog];
27+
};

0 commit comments

Comments
 (0)