Skip to content

Commit eca41fb

Browse files
lucasgorallucasgoral
committed
refactor
1 parent 2009834 commit eca41fb

File tree

7 files changed

+189
-50
lines changed

7 files changed

+189
-50
lines changed

‎public/locales/en.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,8 @@
8181
"menuCopy": "Copy to clipboard"
8282
},
8383
"IllustratedBanner": {
84-
"titleMessage": "No ManagedControlPlane",
85-
"subtitleMessage": "Create a ManagedControlPlane to get started",
84+
"titleMessage": "You don’t have any Managed Control Planes",
85+
"subtitleMessage": "Create a new Managed Control Plane to get started",
8686
"helpButton": "Help"
8787
},
8888
"IntelligentBreadcrumbs": {

‎src/components/ControlPlanes/ControlPlanesListMenu.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
import { Button, Menu, MenuItem } from '@ui5/webcomponents-react';
22

3-
import { useRef, useState } from 'react';
3+
import { Dispatch, FC, SetStateAction, useRef, useState } from 'react';
44
import '@ui5/webcomponents-icons/dist/copy';
55
import '@ui5/webcomponents-icons/dist/accept';
66

77
import { useTranslation } from 'react-i18next';
88

9-
export const ControlPlanesListMenu = () => {
9+
type ControlPlanesListMenuProps = {
10+
setDialogDeleteWsIsOpen: Dispatch<SetStateAction<boolean>>;
11+
setIsCreateManagedControlPlaneWizardOpen: Dispatch<SetStateAction<boolean>>;
12+
};
13+
14+
export const ControlPlanesListMenu: FC<ControlPlanesListMenuProps> = ({
15+
setDialogDeleteWsIsOpen,
16+
setIsCreateManagedControlPlaneWizardOpen,
17+
}) => {
1018
const popoverRef = useRef(null);
1119
const [open, setOpen] = useState(false);
1220

@@ -30,8 +38,10 @@ export const ControlPlanesListMenu = () => {
3038
open={open}
3139
onItemClick={(event) => {
3240
if (event.detail.item.dataset.action === 'newManagedControlPlane') {
41+
setIsCreateManagedControlPlaneWizardOpen(true);
3342
}
3443
if (event.detail.item.dataset.action === 'deleteWorkspace') {
44+
setDialogDeleteWsIsOpen(true);
3545
}
3646

3747
setOpen(false);

‎src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { useLink } from '../../../lib/shared/useLink.ts';
3939
import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js';
4040

4141
import { ControlPlanesListMenu } from '../ControlPlanesListMenu.tsx';
42+
import { CreateManagedControlPlaneWizardContainer } from '../../Wizards/CreateManagedControlPlaneWizardContainer.tsx';
4243

4344
interface Props {
4445
projectName: string;
@@ -49,6 +50,10 @@ export function ControlPlaneListWorkspaceGridTile({
4950
projectName,
5051
workspace,
5152
}: Props) {
53+
const [
54+
isCreateManagedControlPlaneWizardOpen,
55+
setIsCreateManagedControlPlaneWizardOpen,
56+
] = useState(false);
5257
const workspaceName = workspace.metadata.name;
5358
const workspaceDisplayName =
5459
workspace.metadata.annotations?.[DISPLAY_NAME_ANNOTATION] || '';
@@ -132,19 +137,17 @@ export function ControlPlaneListWorkspaceGridTile({
132137
workspace={workspaceName}
133138
/>
134139
<FlexBox justifyContent={'SpaceBetween'} gap={10}>
135-
<Button
136-
design={'Transparent'}
137-
icon="delete"
138-
onClick={async () => {
139-
setDialogDeleteWsIsOpen(true);
140-
}}
141-
/>
142140
<YamlViewButtonWithLoader
143141
workspaceName={workspace.metadata.namespace}
144142
resourceName={workspaceName}
145143
resourceType={'workspaces'}
146144
/>
147-
<ControlPlanesListMenu />
145+
<ControlPlanesListMenu
146+
setDialogDeleteWsIsOpen={setDialogDeleteWsIsOpen}
147+
setIsCreateManagedControlPlaneWizardOpen={
148+
setIsCreateManagedControlPlaneWizardOpen
149+
}
150+
/>
148151
</FlexBox>
149152
</div>
150153
}
@@ -162,7 +165,13 @@ export function ControlPlaneListWorkspaceGridTile({
162165
buttonText: t('IllustratedBanner.helpButton'),
163166
}}
164167
button={
165-
<Button icon={'add'} design={'Emphasized'}>
168+
<Button
169+
icon={'add'}
170+
design={'Emphasized'}
171+
onClick={() => {
172+
setIsCreateManagedControlPlaneWizardOpen(true);
173+
}}
174+
>
166175
{t('ControlPlaneListToolbar.createNewManagedControlPlane')}
167176
</Button>
168177
}
@@ -198,6 +207,10 @@ export function ControlPlaneListWorkspaceGridTile({
198207
);
199208
}}
200209
/>
210+
<CreateManagedControlPlaneWizardContainer
211+
isOpen={isCreateManagedControlPlaneWizardOpen}
212+
setIsOpen={setIsCreateManagedControlPlaneWizardOpen}
213+
/>
201214
</>
202215
);
203216
}

‎src/components/Dialogs/CreateProjectWorkspaceDialog.module.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.input {
2+
width: 100%;
3+
margin-bottom: 2rem;
4+
max-width: 40ch;
5+
}

‎src/components/Dialogs/CreateProjectWorkspaceDialog.tsx‎

Lines changed: 34 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,20 @@ import {
44
Dialog,
55
Form,
66
FormGroup,
7-
FormItem,
87
Input,
98
Label,
109
} from '@ui5/webcomponents-react';
1110

1211
import { Member } from '../../lib/api/types/shared/members';
1312
import { ErrorDialog, ErrorDialogHandle } from '../Shared/ErrorMessageBox.tsx';
14-
13+
import styles from './CreateProjectWorkspaceDialog.module.css';
1514
import { FormEvent, useState } from 'react';
1615
import { KubectlInfoButton } from './KubectlCommandInfo/KubectlInfoButton.tsx';
1716
import { KubectlCreateWorkspaceDialog } from './KubectlCommandInfo/KubectlCreateWorkspaceDialog.tsx';
1817
import { KubectlCreateProjectDialog } from './KubectlCommandInfo/KubectlCreateProjectDialog.tsx';
1918

2019
import { EditMembers } from '../Members/EditMembers.tsx';
21-
// import { useFrontendConfig } from '../../context/FrontendConfigContext.tsx';
20+
2221
import { useTranslation } from 'react-i18next';
2322

2423
import { CreateDialogProps } from './CreateWorkspaceDialogContainer.tsx';
@@ -79,7 +78,6 @@ export function CreateProjectWorkspaceDialog({
7978
>
8079
<KubectlInfoButton onClick={openKubectlDialog} />
8180
<Button onClick={() => setIsOpen(false)}>
82-
{' '}
8381
{t('CreateProjectWorkspaceDialog.cancelButton')}
8482
</Button>
8583
<Button design="Emphasized" onClick={() => onCreate()}>
@@ -132,39 +130,39 @@ function CreateProjectWorkspaceDialogContent({
132130
};
133131
return (
134132
<Form>
135-
<FormGroup headerText={t('CreateProjectWorkspaceDialog.metadataHeader')}>
136-
<FormItem
137-
labelContent={
138-
<Label required>
139-
{t('CreateProjectWorkspaceDialog.nameLabel')}
140-
</Label>
141-
}
142-
>
143-
<Input
144-
id="name"
145-
{...register('name')}
146-
valueState={errors.name ? 'Negative' : 'None'}
147-
valueStateMessage={<span>{errors.name?.message}</span>}
148-
required
149-
/>
150-
</FormItem>
133+
<FormGroup
134+
headerText={t('CreateProjectWorkspaceDialog.metadataHeader')}
135+
columnSpan={12}
136+
>
137+
<Label for="name" required>
138+
{t('CreateProjectWorkspaceDialog.nameLabel')}
139+
</Label>
140+
<Input
141+
className={styles.input}
142+
id="name"
143+
{...register('name')}
144+
valueState={errors.name ? 'Negative' : 'None'}
145+
valueStateMessage={<span>{errors.name?.message}</span>}
146+
required
147+
/>
148+
149+
<Label for={'displayName'}>
150+
{t('CreateProjectWorkspaceDialog.displayNameLabel')}
151+
</Label>
152+
<Input
153+
id="displayName"
154+
{...register('displayName')}
155+
className={styles.input}
156+
/>
151157

152-
<FormItem
153-
labelContent={
154-
<Label>{t('CreateProjectWorkspaceDialog.displayNameLabel')}</Label>
155-
}
156-
>
157-
<Input id="displayName" {...register('displayName')} />
158-
</FormItem>
159-
<FormItem
160-
labelContent={
161-
<Label>
162-
{t('CreateProjectWorkspaceDialog.chargingTargetLabel')}
163-
</Label>
164-
}
165-
>
166-
<Input id="chargingTarget" {...register('chargingTarget')} />
167-
</FormItem>
158+
<Label for={'chargingTarget'}>
159+
{t('CreateProjectWorkspaceDialog.chargingTargetLabel')}
160+
</Label>
161+
<Input
162+
id="chargingTarget"
163+
{...register('chargingTarget')}
164+
className={styles.input}
165+
/>
168166
</FormGroup>
169167
<FormGroup headerText={t('CreateProjectWorkspaceDialog.membersHeader')}>
170168
<EditMembers

‎src/components/Ui/IllustratedBanner/IllustratedBanner.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const IllustratedBanner = ({
2626
return (
2727
<FlexBox direction="Column" alignItems="Center">
2828
<IllustratedMessage
29-
design={IllustrationMessageDesign.Spot}
29+
design={IllustrationMessageDesign.Scene}
3030
name={illustrationName}
3131
titleText={title}
3232
subtitleText={subtitle}

‎src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import { FC, useCallback, useEffect, useRef } from 'react';
2+
import {
3+
useApiResourceMutation,
4+
useRevalidateApiResource,
5+
} from '../../lib/api/useApiResource';
6+
import { ErrorDialogHandle } from '../Shared/ErrorMessageBox.tsx';
7+
import { APIError } from '../../lib/api/error';
8+
9+
import {
10+
CreateWorkspace,
11+
CreateWorkspaceResource,
12+
CreateWorkspaceType,
13+
} from '../../lib/api/types/crate/createWorkspace';
14+
import { projectnameToNamespace } from '../../utils';
15+
import { ListWorkspaces } from '../../lib/api/types/crate/listWorkspaces';
16+
import { useToast } from '../../context/ToastContext.tsx';
17+
import { useAuth } from '../../spaces/onboarding/auth/AuthContext.tsx';
18+
import { Member, MemberRoles } from '../../lib/api/types/shared/members.ts';
19+
import { useTranslation } from 'react-i18next';
20+
import { zodResolver } from '@hookform/resolvers/zod';
21+
import { useForm } from 'react-hook-form';
22+
import { validationSchemaProjectWorkspace } from '../../lib/api/validations/schemas.ts';
23+
import {
24+
CreateProjectWorkspaceDialog,
25+
OnCreatePayload,
26+
} from '../Dialogs/CreateProjectWorkspaceDialog.tsx';
27+
import { Bar, Button, Dialog } from '@ui5/webcomponents-react';
28+
import { KubectlInfoButton } from '../Dialogs/KubectlCommandInfo/KubectlInfoButton.tsx';
29+
30+
export type CreateDialogProps = {
31+
name: string;
32+
displayName?: string;
33+
chargingTarget?: string;
34+
members: Member[];
35+
};
36+
37+
type CreateManagedControlPlaneWizardContainerProps = {
38+
isOpen: boolean;
39+
setIsOpen: (isOpen: boolean) => void;
40+
project?: string;
41+
};
42+
43+
export const CreateManagedControlPlaneWizardContainer: FC<
44+
CreateManagedControlPlaneWizardContainerProps
45+
> = ({ isOpen, setIsOpen, project = '' }) => {
46+
const {
47+
register,
48+
handleSubmit,
49+
resetField,
50+
setValue,
51+
formState: { errors },
52+
watch,
53+
} = useForm<CreateDialogProps>({
54+
resolver: zodResolver(validationSchemaProjectWorkspace),
55+
defaultValues: {
56+
name: '',
57+
displayName: '',
58+
chargingTarget: '',
59+
members: [],
60+
},
61+
});
62+
const { t } = useTranslation();
63+
const { user } = useAuth();
64+
65+
const username = user?.email;
66+
67+
const clearForm = useCallback(() => {
68+
resetField('name');
69+
resetField('chargingTarget');
70+
resetField('displayName');
71+
}, [resetField]);
72+
73+
useEffect(() => {
74+
if (username) {
75+
setValue('members', [
76+
{ name: username, roles: [MemberRoles.admin], kind: 'User' },
77+
]);
78+
}
79+
if (!isOpen) {
80+
clearForm();
81+
}
82+
}, [resetField, setValue, username, isOpen, clearForm]);
83+
const namespace = projectnameToNamespace(project);
84+
const toast = useToast();
85+
86+
const { trigger } = useApiResourceMutation<CreateWorkspaceType>(
87+
CreateWorkspaceResource(namespace),
88+
);
89+
const revalidate = useRevalidateApiResource(ListWorkspaces(project));
90+
const errorDialogRef = useRef<ErrorDialogHandle>(null);
91+
92+
return (
93+
<Dialog
94+
stretch={true}
95+
headerText={'Create Managed Control Plane'}
96+
open={isOpen}
97+
initialFocus="project-name-input"
98+
footer={
99+
<Bar
100+
design="Footer"
101+
endContent={
102+
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
103+
<Button design="Emphasized" onClick={() => {}}>
104+
{t('CreateProjectWorkspaceDialog.createButton')}
105+
</Button>
106+
</div>
107+
}
108+
/>
109+
}
110+
onClose={() => setIsOpen(false)}
111+
></Dialog>
112+
);
113+
};

0 commit comments

Comments
 (0)