Skip to content

Commit f7c278e

Browse files
jenny-s51jenny-s51
authored
fix: UI issues identified in shared library upgrade (kubeflow#1680)
Signed-off-by: Jenny <[email protected]> fix: bump to latest shared library versions with style fixes fix tests Signed-off-by: Jenny <[email protected]> fix tests revert test files to latest on main Signed-off-by: Jenny <[email protected]> fix: bump to 1.1.4 shared library version to fix Cypress tests
1 parent 89545f3 commit f7c278e

File tree

9 files changed

+272
-152
lines changed

9 files changed

+272
-152
lines changed

‎clients/ui/frontend/package-lock.json‎

Lines changed: 206 additions & 87 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎clients/ui/frontend/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,9 +99,9 @@
9999
"classnames": "^2.2.6",
100100
"dompurify": "^3.2.4",
101101
"lodash-es": "^4.17.15",
102-
"mod-arch-core": "~1.0.2",
103-
"mod-arch-kubeflow": "~1.0.2",
104-
"mod-arch-shared": "~1.0.2",
102+
"mod-arch-core": "~1.1.4",
103+
"mod-arch-kubeflow": "~1.1.4",
104+
"mod-arch-shared": "~1.1.4",
105105
"react": "^18",
106106
"react-dom": "^18",
107107
"react-router": "^7.5.2",

‎clients/ui/frontend/src/app/App.tsx‎

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
Bullseye,
77
Button,
88
Page,
9-
PageSection,
109
PageSidebar,
1110
Spinner,
1211
Stack,
@@ -60,31 +59,29 @@ const App: React.FC = () => {
6059
if (error) {
6160
// There was an error fetching critical data
6261
return (
63-
<Page sidebar={sidebar}>
64-
<PageSection>
65-
<Stack hasGutter>
66-
<StackItem>
67-
<Alert variant="danger" isInline title="General loading error">
68-
<p>
69-
{configError?.message ||
70-
namespacesLoadError?.message ||
71-
initializationError?.message ||
72-
'Unknown error occurred during startup'}
73-
</p>
74-
<p>Logging out and logging back in may solve the issue</p>
75-
</Alert>
76-
</StackItem>
77-
<StackItem>
78-
<Button
79-
variant="secondary"
80-
onClick={() => logout().then(() => window.location.reload())}
81-
>
82-
Logout
83-
</Button>
84-
</StackItem>
85-
</Stack>
86-
</PageSection>
87-
</Page>
62+
<div className="error-page-container">
63+
<Stack hasGutter>
64+
<StackItem>
65+
<Alert variant="danger" isInline title="General loading error">
66+
<p>
67+
{configError?.message ||
68+
namespacesLoadError?.message ||
69+
initializationError?.message ||
70+
'Unknown error occurred during startup'}
71+
</p>
72+
<p>Logging out and logging back in may solve the issue</p>
73+
</Alert>
74+
</StackItem>
75+
<StackItem>
76+
<Button
77+
variant="secondary"
78+
onClick={() => logout().then(() => window.location.reload())}
79+
>
80+
Logout
81+
</Button>
82+
</StackItem>
83+
</Stack>
84+
</div>
8885
);
8986
}
9087

‎clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,9 @@ import {
77
Stack,
88
StackItem,
99
} from '@patternfly/react-core';
10-
import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
1110
import { useParams, useNavigate } from 'react-router';
1211
import { Link } from 'react-router-dom';
13-
import { ApplicationsPage } from 'mod-arch-shared';
12+
import { ApplicationsPage, FormSection } from 'mod-arch-shared';
1413
import { modelRegistryUrl, modelVersionUrl } from '~/app/pages/modelRegistry/screens/routeUtils';
1514
import { ModelRegistryContext } from '~/app/context/ModelRegistryContext';
1615
import { AppContext } from '~/app/context/AppContext';
@@ -94,9 +93,9 @@ const RegisterModel: React.FC = () => {
9493
<PageSection hasBodyWrapper={false} isFilled>
9594
<Form isWidthLimited>
9695
<Stack hasGutter>
97-
<StackItem className={spacing.mbLg}>
96+
<FormSection className="pf-v6-u-pb-xl">
9897
<PrefilledModelRegistryField mrName={mrName} />
99-
</StackItem>
98+
</FormSection>
10099
<StackItem>
101100
<RegisterModelDetailsFormSection
102101
formData={formData}

‎clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModelDetailsFormSection.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ const RegisterModelDetailsFormSection = <D extends RegisterModelFormData>({
4444
name="model-description"
4545
value={formData.modelDescription}
4646
onChange={(_e, value) => setData('modelDescription', value)}
47+
autoResize
4748
/>
4849
);
4950

@@ -53,7 +54,7 @@ const RegisterModelDetailsFormSection = <D extends RegisterModelFormData>({
5354
description="Provide model details that apply to every version of this model."
5455
>
5556
<FormGroup label="Model name" isRequired fieldId="model-name">
56-
<FormFieldset component={modelNameInput} field="model-name" />
57+
<FormFieldset component={modelNameInput} field="Model Name" />
5758
{hasModelNameError && (
5859
<FormHelperText>
5960
<HelperText>

‎clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterVersion.tsx‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
BreadcrumbItem,
55
Form,
66
FormGroup,
7+
FormSection,
78
PageSection,
89
Spinner,
910
Stack,
@@ -118,27 +119,27 @@ const RegisterVersion: React.FC = () => {
118119
>
119120
<PageSection hasBodyWrapper={false} isFilled>
120121
<Form isWidthLimited>
122+
<FormSection className="pf-v6-u-pb-xs">
123+
<PrefilledModelRegistryField mrName={mrName} />
124+
</FormSection>
125+
<FormSection className="pf-v6-u-pb-xl">
126+
<FormGroup
127+
id="registered-model-container"
128+
isRequired
129+
fieldId="model-name"
130+
labelHelp={
131+
!loadedPrefillData ? <Spinner size="sm" className={spacing.mlMd} /> : undefined
132+
}
133+
>
134+
<RegisteredModelSelector
135+
registeredModels={liveRegisteredModels}
136+
registeredModelId={registeredModelId}
137+
setRegisteredModelId={(id) => setData('registeredModelId', id)}
138+
isDisabled={!!prefilledRegisteredModelId}
139+
/>
140+
</FormGroup>
141+
</FormSection>
121142
<Stack hasGutter>
122-
<StackItem>
123-
<PrefilledModelRegistryField mrName={mrName} />
124-
</StackItem>
125-
<StackItem className={spacing.mbLg}>
126-
<FormGroup
127-
id="registered-model-container"
128-
isRequired
129-
fieldId="model-name"
130-
labelHelp={
131-
!loadedPrefillData ? <Spinner size="sm" className={spacing.mlMd} /> : undefined
132-
}
133-
>
134-
<RegisteredModelSelector
135-
registeredModels={liveRegisteredModels}
136-
registeredModelId={registeredModelId}
137-
setRegisteredModelId={(id) => setData('registeredModelId', id)}
138-
isDisabled={!!prefilledRegisteredModelId}
139-
/>
140-
</FormGroup>
141-
</StackItem>
142143
<StackItem>
143144
<RegistrationCommonFormSections
144145
formData={formData}

‎clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ const RegistrationCommonFormSections = <D extends RegistrationCommonFormData>({
9090
name="version-description"
9191
value={versionDescription}
9292
onChange={(_e, value) => setData('versionDescription', value)}
93+
autoResize
9394
/>
9495
);
9596

@@ -184,20 +185,20 @@ const RegistrationCommonFormSections = <D extends RegistrationCommonFormData>({
184185
>
185186
<FormGroup label="Version name" isRequired fieldId="version-name">
186187
<FormFieldset component={versionNameInput} field="Version Name" />
187-
<FormHelperText>
188-
{latestVersion && (
188+
{latestVersion && (
189+
<FormHelperText>
189190
<HelperText>
190191
<HelperTextItem>Current version is {latestVersion.name}</HelperTextItem>
191192
</HelperText>
192-
)}
193-
{!isVersionNameValid && (
194-
<HelperText>
195-
<HelperTextItem variant="error">
196-
Cannot exceed {MR_CHARACTER_LIMIT} characters
197-
</HelperTextItem>
198-
</HelperText>
199-
)}
200-
</FormHelperText>
193+
{!isVersionNameValid && (
194+
<HelperText>
195+
<HelperTextItem variant="error">
196+
Cannot exceed {MR_CHARACTER_LIMIT} characters
197+
</HelperTextItem>
198+
</HelperText>
199+
)}
200+
</FormHelperText>
201+
)}
201202
</FormGroup>
202203
<FormGroup label="Version description" fieldId="version-description">
203204
<FormFieldset component={versionDescriptionInput} field="Version Description" />

‎clients/ui/frontend/src/app/shared/components/FilterToolbar.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ function FilterToolbar<T extends string>({
7474
setOpen(false);
7575
setCurrentFilterType(filterKey);
7676
}}
77+
isSelected={currentFilterType === filterKey}
7778
>
7879
{filterOptions[filterKey]}
7980
</DropdownItem>

‎clients/ui/frontend/src/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ const K8sNameDescriptionField: React.FC<K8sNameDescriptionFieldProps> = ({
128128
value={data.description}
129129
onChange={(_e, value) => onDataChange({ ...data, description: value })}
130130
resizeOrientation="vertical"
131+
autoResize
131132
/>
132133
);
133134

0 commit comments

Comments
 (0)