Skip to content

Commit a5a04bf

Browse files
lucasgorallucasgoral
committed
refactor
1 parent f94c772 commit a5a04bf

File tree

3 files changed

+115
-94
lines changed

3 files changed

+115
-94
lines changed

‎src/components/Dialogs/CreateProjectWorkspaceDialog.tsx‎

Lines changed: 18 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,8 @@
1-
import {
2-
Bar,
3-
Button,
4-
Dialog,
5-
Form,
6-
FormGroup,
7-
Input,
8-
Label,
9-
} from '@ui5/webcomponents-react';
1+
import { Bar, Button, Dialog, FormGroup } from '@ui5/webcomponents-react';
102

113
import { Member } from '../../lib/api/types/shared/members';
124
import { ErrorDialog, ErrorDialogHandle } from '../Shared/ErrorMessageBox.tsx';
13-
import styles from './CreateProjectWorkspaceDialog.module.css';
5+
146
import { FormEvent, useState } from 'react';
157
import { KubectlInfoButton } from './KubectlCommandInfo/KubectlInfoButton.tsx';
168
import { KubectlCreateWorkspaceDialog } from './KubectlCommandInfo/KubectlCreateWorkspaceDialog.tsx';
@@ -22,6 +14,7 @@ import { useTranslation } from 'react-i18next';
2214

2315
import { CreateDialogProps } from './CreateWorkspaceDialogContainer.tsx';
2416
import { FieldErrors, UseFormRegister, UseFormSetValue } from 'react-hook-form';
17+
import { MetadataForm } from './MetadataForm.tsx';
2518

2619
export type OnCreatePayload = {
2720
name: string;
@@ -55,12 +48,14 @@ export function CreateProjectWorkspaceDialog({
5548
setValue,
5649
projectName,
5750
}: CreateProjectWorkspaceDialogProps) {
58-
// const { links } = useFrontendConfig();
5951
const { t } = useTranslation();
6052
const [isKubectlDialogOpen, setIsKubectlDialogOpen] = useState(false);
6153

6254
const openKubectlDialog = () => setIsKubectlDialogOpen(true);
6355
const closeKubectlDialog = () => setIsKubectlDialogOpen(false);
56+
const setMembers = (members: Member[]) => {
57+
setValue('members', members);
58+
};
6459

6560
return (
6661
<>
@@ -89,11 +84,20 @@ export function CreateProjectWorkspaceDialog({
8984
}
9085
onClose={() => setIsOpen(false)}
9186
>
92-
<MetadataAndMembersForm
93-
members={members}
87+
<MetadataForm
9488
register={register}
9589
errors={errors}
96-
setValue={setValue}
90+
sideFormContent={
91+
<FormGroup
92+
headerText={t('CreateProjectWorkspaceDialog.membersHeader')}
93+
>
94+
<EditMembers
95+
members={members}
96+
isValidationError={!!errors.members}
97+
onMemberChanged={setMembers}
98+
/>
99+
</FormGroup>
100+
}
97101
/>
98102
</Dialog>
99103
<KubectlCreateWorkspaceDialog
@@ -109,68 +113,3 @@ export function CreateProjectWorkspaceDialog({
109113
</>
110114
);
111115
}
112-
113-
interface MetadataAndMembersFormProps {
114-
members: Member[];
115-
register: UseFormRegister<CreateDialogProps>;
116-
errors: FieldErrors<CreateDialogProps>;
117-
setValue: UseFormSetValue<CreateDialogProps>;
118-
}
119-
120-
export function MetadataAndMembersForm({
121-
members,
122-
register,
123-
errors,
124-
setValue,
125-
}: MetadataAndMembersFormProps) {
126-
const { t } = useTranslation();
127-
128-
const setMembers = (members: Member[]) => {
129-
setValue('members', members);
130-
};
131-
return (
132-
<Form>
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-
/>
157-
158-
<Label for={'chargingTarget'}>
159-
{t('CreateProjectWorkspaceDialog.chargingTargetLabel')}
160-
</Label>
161-
<Input
162-
id="chargingTarget"
163-
{...register('chargingTarget')}
164-
className={styles.input}
165-
/>
166-
</FormGroup>
167-
<FormGroup headerText={t('CreateProjectWorkspaceDialog.membersHeader')}>
168-
<EditMembers
169-
members={members}
170-
isValidationError={!!errors.members}
171-
onMemberChanged={setMembers}
172-
/>
173-
</FormGroup>
174-
</Form>
175-
);
176-
}

‎src/components/Dialogs/MetadataForm.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { FieldErrors, UseFormRegister } from 'react-hook-form';
2+
import { CreateDialogProps } from './CreateWorkspaceDialogContainer.tsx';
3+
import { useTranslation } from 'react-i18next';
4+
import { Form, FormGroup, Input, Label } from '@ui5/webcomponents-react';
5+
import styles from './CreateProjectWorkspaceDialog.module.css';
6+
7+
export interface MetadataFormProps {
8+
register: UseFormRegister<CreateDialogProps>;
9+
errors: FieldErrors<CreateDialogProps>;
10+
11+
sideFormContent?: React.ReactNode;
12+
}
13+
14+
export function MetadataForm({
15+
register,
16+
errors,
17+
18+
sideFormContent,
19+
}: MetadataFormProps) {
20+
const { t } = useTranslation();
21+
22+
return (
23+
<Form>
24+
<FormGroup
25+
headerText={t('CreateProjectWorkspaceDialog.metadataHeader')}
26+
columnSpan={12}
27+
>
28+
<Label for="name" required>
29+
{t('CreateProjectWorkspaceDialog.nameLabel')}
30+
</Label>
31+
<Input
32+
className={styles.input}
33+
id="name"
34+
{...register('name')}
35+
valueState={errors.name ? 'Negative' : 'None'}
36+
valueStateMessage={<span>{errors.name?.message}</span>}
37+
required
38+
/>
39+
40+
<Label for={'displayName'}>
41+
{t('CreateProjectWorkspaceDialog.displayNameLabel')}
42+
</Label>
43+
<Input
44+
id="displayName"
45+
{...register('displayName')}
46+
className={styles.input}
47+
/>
48+
49+
<Label for={'chargingTarget'}>
50+
{t('CreateProjectWorkspaceDialog.chargingTargetLabel')}
51+
</Label>
52+
<Input
53+
id="chargingTarget"
54+
{...register('chargingTarget')}
55+
className={styles.input}
56+
/>
57+
</FormGroup>
58+
{sideFormContent ? sideFormContent : null}
59+
</Form>
60+
);
61+
}

‎src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx‎

Lines changed: 36 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@ import { useApiResourceMutation } from '../../lib/api/useApiResource';
33

44
import { useAuth } from '../../spaces/onboarding/auth/AuthContext.tsx';
55
import { Member, MemberRoles } from '../../lib/api/types/shared/members.ts';
6-
6+
import type { WizardStepChangeEventDetail } from '@ui5/webcomponents-fiori/dist/Wizard.js';
77
import { zodResolver } from '@hookform/resolvers/zod';
88
import { useForm } from 'react-hook-form';
99
import { validationSchemaProjectWorkspace } from '../../lib/api/validations/schemas.ts';
10-
import {
11-
MetadataAndMembersForm,
12-
OnCreatePayload,
13-
} from '../Dialogs/CreateProjectWorkspaceDialog.tsx';
10+
import { OnCreatePayload } from '../Dialogs/CreateProjectWorkspaceDialog.tsx';
1411
import {
1512
Bar,
1613
Button,
1714
Dialog,
15+
FormGroup,
1816
Grid,
1917
List,
2018
ListItemStandard,
19+
Ui5CustomEvent,
2120
Wizard,
21+
WizardDomRef,
2222
WizardStep,
2323
} from '@ui5/webcomponents-react';
2424
import YamlViewer from '../Yaml/YamlViewer.tsx';
@@ -31,6 +31,9 @@ import {
3131
} from '../../lib/api/types/crate/createManagedControlPlane.ts';
3232
import { ErrorDialog, ErrorDialogHandle } from '../Shared/ErrorMessageBox.tsx';
3333
import { useToast } from '../../context/ToastContext.tsx';
34+
import { EditMembers } from '../Members/EditMembers.tsx';
35+
import { useTranslation } from 'react-i18next';
36+
import { MetadataForm } from '../Dialogs/MetadataForm.tsx';
3437

3538
export type CreateDialogProps = {
3639
name: string;
@@ -130,8 +133,10 @@ export const CreateManagedControlPlaneWizardContainer: FC<
130133
return false;
131134
}
132135
};
133-
const handleStepChange = (e: any) => {
134-
setSelectedStep(e.detail.step.dataset.step);
136+
const handleStepChange = (
137+
e: Ui5CustomEvent<WizardDomRef, WizardStepChangeEventDetail>,
138+
) => {
139+
setSelectedStep(e.detail.step.dataset.step ?? '');
135140
};
136141
const onNextClick = () => {
137142
console.log('test');
@@ -152,6 +157,10 @@ export const CreateManagedControlPlaneWizardContainer: FC<
152157
handleCreateManagedControlPlane(getValues());
153158
}
154159
};
160+
const setMembers = (members: Member[]) => {
161+
setValue('members', members);
162+
};
163+
const { t } = useTranslation();
155164
console.log('selected');
156165
console.log(selectedStep);
157166
return (
@@ -185,21 +194,33 @@ export const CreateManagedControlPlaneWizardContainer: FC<
185194
selected={selectedStep === '1'}
186195
data-step={'1'}
187196
>
188-
{selectedStep}
189-
<MetadataAndMembersForm
190-
members={watch('members')}
197+
<MetadataForm
191198
register={register}
192199
errors={errors}
193-
setValue={setValue}
200+
sideFormContent={
201+
<FormGroup
202+
headerText={t('CreateProjectWorkspaceDialog.membersHeader')}
203+
>
204+
<EditMembers
205+
members={watch('members')}
206+
isValidationError={!!errors.members}
207+
onMemberChanged={setMembers}
208+
/>
209+
</FormGroup>
210+
}
194211
/>
195212
</WizardStep>
196-
<WizardStep titleText="Members" />
197213
<WizardStep
198-
icon={'activities'}
199-
titleText="Summarize"
200-
disabled={selectedStep === '1' || !isValid}
214+
titleText="Members"
201215
selected={selectedStep === '2'}
202216
data-step={'2'}
217+
/>
218+
<WizardStep
219+
icon={'activities'}
220+
titleText="Summarize"
221+
disabled={selectedStep === '1' || selectedStep === '2' || !isValid}
222+
selected={selectedStep === '3'}
223+
data-step={'3'}
203224
>
204225
<h1>Summarize</h1>
205226
<Grid defaultSpan="XL6 L6 M6 S6">

0 commit comments

Comments
 (0)