Skip to content

Commit d262b87

Browse files
jenny-s51jenny-s51
authored
feat(frontend): MUI Theme for Create Model Registry Form (kubeflow#864)
Signed-off-by: Jenny <[email protected]> feat(frontend): theme create model registry modal fix tests Signed-off-by: Jenny <[email protected]> fix CI build remove reference to midstream
1 parent b459abe commit d262b87

File tree

5 files changed

+434
-179
lines changed

5 files changed

+434
-179
lines changed

‎clients/ui/frontend/src/app/pages/settings/ModelRegistryCreateModal.tsx

+225-86
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@ import {
1010
import { Modal } from '@patternfly/react-core/deprecated';
1111
import { useNavigate } from 'react-router';
1212
import ModelRegistryCreateModalFooter from '~/app/pages/settings/ModelRegistryCreateModalFooter';
13+
import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
1314
import FormSection from '~/shared/components/pf-overrides/FormSection';
1415

1516
import ModelRegistryDatabasePassword from '~/app/pages/settings/ModelRegistryDatabasePassword';
1617
import K8sNameDescriptionField from '~/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField';
18+
import { isMUITheme } from '~/shared/utilities/const';
1719

1820
type CreateModalProps = {
1921
onClose: () => void;
@@ -81,6 +83,179 @@ const CreateModal: React.FC<CreateModalProps> = ({
8183
onClose();
8284
};
8385

86+
const hostInput = (
87+
<TextInput
88+
isRequired
89+
type="text"
90+
id="mr-host"
91+
name="mr-host"
92+
value={host}
93+
onBlur={() => setIsHostTouched(true)}
94+
onChange={(_e, value) => setHost(value)}
95+
validated={isHostTouched && !hasContent(host) ? 'error' : 'default'}
96+
/>
97+
);
98+
99+
const hostHelperText = isHostTouched && !hasContent(host) && (
100+
<HelperText>
101+
<HelperTextItem variant="error" data-testid="mr-host-error">
102+
Host cannot be empty
103+
</HelperTextItem>
104+
</HelperText>
105+
);
106+
107+
const hostFormGroup = (
108+
<>
109+
<FormGroup
110+
className={hostHelperText ? 'pf-m-error' : ''}
111+
label="Host"
112+
isRequired
113+
fieldId="mr-host"
114+
>
115+
<FormFieldset component={hostInput} field="Host" />
116+
</FormGroup>
117+
{hostHelperText}
118+
</>
119+
);
120+
121+
const portInput = (
122+
<TextInput
123+
isRequired
124+
type="text"
125+
id="mr-port"
126+
name="mr-port"
127+
value={port}
128+
onBlur={() => setIsPortTouched(true)}
129+
onChange={(_e, value) => setPort(value)}
130+
validated={isPortTouched && !hasContent(port) ? 'error' : 'default'}
131+
/>
132+
);
133+
134+
const portHelperText = isPortTouched && !hasContent(port) && (
135+
<HelperText>
136+
<HelperTextItem variant="error" data-testid="mr-port-error">
137+
Port cannot be empty
138+
</HelperTextItem>
139+
</HelperText>
140+
);
141+
142+
const portFormGroup = (
143+
<>
144+
<FormGroup
145+
className={portHelperText ? 'pf-m-error' : ''}
146+
label="Port"
147+
isRequired
148+
fieldId="mr-port"
149+
>
150+
<FormFieldset component={portInput} field="Port" />
151+
</FormGroup>
152+
{portHelperText}
153+
</>
154+
);
155+
156+
const userNameInput = (
157+
<TextInput
158+
isRequired
159+
type="text"
160+
id="mr-username"
161+
name="mr-username"
162+
value={username}
163+
onBlur={() => setIsUsernameTouched(true)}
164+
onChange={(_e, value) => setUsername(value)}
165+
validated={isUsernameTouched && !hasContent(username) ? 'error' : 'default'}
166+
/>
167+
);
168+
169+
const usernameHelperText = isUsernameTouched && !hasContent(username) && (
170+
<HelperText>
171+
<HelperTextItem variant="error" data-testid="mr-username-error">
172+
Username cannot be empty
173+
</HelperTextItem>
174+
</HelperText>
175+
);
176+
177+
const usernameFormGroup = (
178+
<>
179+
<FormGroup
180+
className={usernameHelperText ? 'pf-m-error' : ''}
181+
label="Username"
182+
isRequired
183+
fieldId="mr-username"
184+
>
185+
<FormFieldset component={userNameInput} field="Host" />
186+
</FormGroup>
187+
{usernameHelperText}
188+
</>
189+
);
190+
191+
const passwordInput = (
192+
<ModelRegistryDatabasePassword
193+
password={password || ''}
194+
setPassword={setPassword}
195+
isPasswordTouched={isPasswordTouched}
196+
setIsPasswordTouched={setIsPasswordTouched}
197+
showPassword={showPassword}
198+
// editRegistry={mr}
199+
/>
200+
);
201+
202+
const passwordHelperText = isPasswordTouched && !hasContent(password) && (
203+
<HelperText>
204+
<HelperTextItem variant="error" data-testid="mr-password-error">
205+
Password cannot be empty
206+
</HelperTextItem>
207+
</HelperText>
208+
);
209+
210+
const passwordFormGroup = (
211+
<>
212+
<FormGroup
213+
className={passwordHelperText ? 'pf-m-error' : ''}
214+
label="Password"
215+
isRequired
216+
fieldId="mr-password"
217+
>
218+
<FormFieldset component={passwordInput} field="Password" />
219+
</FormGroup>
220+
{passwordHelperText}
221+
</>
222+
);
223+
224+
const databaseInput = (
225+
<TextInput
226+
isRequired
227+
type="text"
228+
id="mr-database"
229+
name="mr-database"
230+
value={database}
231+
onBlur={() => setIsDatabaseTouched(true)}
232+
onChange={(_e, value) => setDatabase(value)}
233+
validated={isDatabaseTouched && !hasContent(database) ? 'error' : 'default'}
234+
/>
235+
);
236+
237+
const databaseHelperText = isDatabaseTouched && !hasContent(database) && (
238+
<HelperText>
239+
<HelperTextItem variant="error" data-testid="mr-database-error">
240+
Database cannot be empty
241+
</HelperTextItem>
242+
</HelperText>
243+
);
244+
245+
const databaseFormGroup = (
246+
<>
247+
<FormGroup
248+
className={databaseHelperText ? 'pf-m-error' : ''}
249+
label="Database"
250+
isRequired
251+
fieldId="mr-database"
252+
>
253+
<FormFieldset component={databaseInput} field="Database" />
254+
</FormGroup>
255+
{databaseHelperText}
256+
</>
257+
);
258+
84259
return (
85260
<Modal
86261
isOpen
@@ -117,92 +292,56 @@ const CreateModal: React.FC<CreateModalProps> = ({
117292
title="Connect to external MySQL database"
118293
description="This external database is where model data is stored."
119294
>
120-
<FormGroup label="Host" isRequired fieldId="mr-host">
121-
<TextInput
122-
isRequired
123-
type="text"
124-
id="mr-host"
125-
name="mr-host"
126-
value={host}
127-
onBlur={() => setIsHostTouched(true)}
128-
onChange={(_e, value) => setHost(value)}
129-
validated={isHostTouched && !hasContent(host) ? 'error' : 'default'}
130-
/>
131-
{isHostTouched && !hasContent(host) && (
132-
<HelperText>
133-
<HelperTextItem variant="error" data-testid="mr-host-error">
134-
Host cannot be empty
135-
</HelperTextItem>
136-
</HelperText>
137-
)}
138-
</FormGroup>
139-
<FormGroup label="Port" isRequired fieldId="mr-port">
140-
<TextInput
141-
isRequired
142-
type="text"
143-
id="mr-port"
144-
name="mr-port"
145-
value={port}
146-
onBlur={() => setIsPortTouched(true)}
147-
onChange={(_e, value) => setPort(value)}
148-
validated={isPortTouched && !hasContent(port) ? 'error' : 'default'}
149-
/>
150-
{isPortTouched && !hasContent(port) && (
151-
<HelperText>
152-
<HelperTextItem variant="error" data-testid="mr-port-error">
153-
Port cannot be empty
154-
</HelperTextItem>
155-
</HelperText>
156-
)}
157-
</FormGroup>
158-
<FormGroup label="Username" isRequired fieldId="mr-username">
159-
<TextInput
160-
isRequired
161-
type="text"
162-
id="mr-username"
163-
name="mr-username"
164-
value={username}
165-
onBlur={() => setIsUsernameTouched(true)}
166-
onChange={(_e, value) => setUsername(value)}
167-
validated={isUsernameTouched && !hasContent(username) ? 'error' : 'default'}
168-
/>
169-
{isUsernameTouched && !hasContent(username) && (
170-
<HelperText>
171-
<HelperTextItem variant="error" data-testid="mr-username-error">
172-
Username cannot be empty
173-
</HelperTextItem>
174-
</HelperText>
175-
)}
176-
</FormGroup>
177-
<FormGroup label="Password" isRequired fieldId="mr-password">
178-
<ModelRegistryDatabasePassword
179-
password={password || ''}
180-
setPassword={setPassword}
181-
isPasswordTouched={isPasswordTouched}
182-
setIsPasswordTouched={setIsPasswordTouched}
183-
showPassword={showPassword}
184-
// editRegistry={mr}
185-
/>
186-
</FormGroup>
187-
<FormGroup label="Database" isRequired fieldId="mr-database">
188-
<TextInput
189-
isRequired
190-
type="text"
191-
id="mr-database"
192-
name="mr-database"
193-
value={database}
194-
onBlur={() => setIsDatabaseTouched(true)}
195-
onChange={(_e, value) => setDatabase(value)}
196-
validated={isDatabaseTouched && !hasContent(database) ? 'error' : 'default'}
197-
/>
198-
{isDatabaseTouched && !hasContent(database) && (
199-
<HelperText>
200-
<HelperTextItem variant="error" data-testid="mr-database-error">
201-
Database cannot be empty
202-
</HelperTextItem>
203-
</HelperText>
204-
)}
205-
</FormGroup>
295+
{isMUITheme() ? (
296+
hostFormGroup
297+
) : (
298+
<>
299+
<FormGroup label="Host" isRequired fieldId="mr-host">
300+
{hostInput}
301+
{hostHelperText}
302+
</FormGroup>
303+
</>
304+
)}
305+
{isMUITheme() ? (
306+
portFormGroup
307+
) : (
308+
<>
309+
<FormGroup label="Port" isRequired fieldId="mr-port">
310+
{portInput}
311+
{portHelperText}
312+
</FormGroup>
313+
</>
314+
)}
315+
{isMUITheme() ? (
316+
usernameFormGroup
317+
) : (
318+
<>
319+
<FormGroup label="Username" isRequired fieldId="mr-username">
320+
{userNameInput}
321+
{usernameHelperText}
322+
</FormGroup>
323+
</>
324+
)}
325+
{isMUITheme() ? (
326+
passwordFormGroup
327+
) : (
328+
<>
329+
<FormGroup label="Password" isRequired fieldId="mr-password">
330+
{passwordInput}
331+
{passwordHelperText}
332+
</FormGroup>
333+
</>
334+
)}
335+
{isMUITheme() ? (
336+
databaseFormGroup
337+
) : (
338+
<>
339+
<FormGroup label="Database" isRequired fieldId="mr-database">
340+
{databaseInput}
341+
{databaseFormGroup}
342+
</FormGroup>
343+
</>
344+
)}
206345
{/* {secureDbEnabled && (
207346
<>
208347
<FormGroup>

‎clients/ui/frontend/src/app/pages/settings/ModelRegistryDatabasePassword.tsx

-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import { HelperText, HelperTextItem } from '@patternfly/react-core';
32
import PasswordInput from '~/app/pages/settings/PasswordInput';
43

54
type ModelRegistryDatabasePasswordProps = {
@@ -67,13 +66,6 @@ const ModelRegistryDatabasePassword: React.FC<ModelRegistryDatabasePasswordProps
6766
onChange={(_e, value) => setPassword(value)}
6867
validated={isPasswordTouched && !hasContent(password) ? 'error' : 'default'}
6968
/>
70-
{isPasswordTouched && !hasContent(password) && (
71-
<HelperText>
72-
<HelperTextItem variant="error" data-testid="mr-password-error">
73-
Password cannot be empty
74-
</HelperTextItem>
75-
</HelperText>
76-
)}
7769
</>
7870
);
7971
};

0 commit comments

Comments
 (0)