Skip to content

Commit

Permalink
pull radio body out of radiobody prop
Browse files Browse the repository at this point in the history 
Signed-off-by: gitdallas <[email protected]>
  • Loading branch information
@gitdallas
gitdallas committed Aug 15, 2024
1 parent bebb59c commit e37f5ce
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 102 deletions.
20 changes: 7 additions & 13 deletions frontend/src/pages/modelRegistry/screens/RegisterModel/ConnectionModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
import React from 'react';
import { Modal, Button, FormGroup, HelperText, Form } from '@patternfly/react-core';
import { Modal, Button, FormGroup, HelperText, Form, FormHelperText } from '@patternfly/react-core';
import ProjectSelector from '~/concepts/projects/ProjectSelector';
import { DataConnection } from '~/pages/projects/types';
import { ConnectionDropdown } from './ConnectionDropdown';

export type ConnectionInfoType = {
name: string;
endpoint: string;
bucket: string;
region: string;
path: string;
};

export const ConnectionModal: React.FC<{
isOpen: boolean;
onClose: () => void;
Expand All @@ -26,7 +18,7 @@ export const ConnectionModal: React.FC<{
data-testid="connection-autofill-modal"
variant="medium"
title="Autofill from data connection"
description="Select a project to list its [object storage]/[URI] data connections. Select a data connection to autofill the model location."
description="Select a project to list its object storage data connections. Select a data connection to autofill the model location."
onClose={() => {
setProject(undefined);
setConnection(undefined);
Expand Down Expand Up @@ -68,9 +60,11 @@ export const ConnectionModal: React.FC<{
selectedConnection={connection}
project={project}
/>
<HelperText>
Data connection list includes only object storage types that contain a bucket.
</HelperText>
<FormHelperText>
<HelperText>
Data connection list includes only object storage types that contain a bucket.
</HelperText>
</FormHelperText>
</FormGroup>
</Form>
</Modal>
Expand Down
4 changes: 0 additions & 4 deletions frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.scss
View file

This file was deleted.

183 changes: 98 additions & 85 deletions frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
InputGroupItem,
InputGroupText,
PageSection,
Panel,
Radio,
Split,
SplitItem,
Expand All @@ -37,7 +38,6 @@ import {
RegisterVersionFormData,
} from './useRegisterModelData';
import { registerModel } from './utils';
import './RegisterModel.scss';
import { ConnectionModal } from './ConnectionModal';

const RegisterModel: React.FC = () => {
Expand Down Expand Up @@ -209,92 +209,105 @@ const RegisterModel: React.FC = () => {
title="Model location"
description="Specify the model location by providing either the object storage details or the URI."
>
<Radio
isChecked={modelLocationType === ModelLocationType.ObjectStorage}
name="location-type-object-storage"
onChange={() => {
setData('modelLocationType', ModelLocationType.ObjectStorage);
}}
label={
<Split>
<SplitItem isFilled>Object storage</SplitItem>
{modelLocationType === ModelLocationType.ObjectStorage && (
<Split>
<SplitItem isFilled>
<Radio
isChecked={modelLocationType === ModelLocationType.ObjectStorage}
name="location-type-object-storage"
onChange={() => {
setData('modelLocationType', ModelLocationType.ObjectStorage);
}}
label="Object storage"
id="location-type-object-storage"
/>
</SplitItem>
{modelLocationType === ModelLocationType.ObjectStorage && (
<SplitItem>
<Button
data-testid="object-storage-autofill-button"
variant="link"
isInline
icon={<OptimizeIcon />}
onClick={() => setAutofillModalOpen(true)}
>
Autofill from data connection
</Button>
</SplitItem>
)}
</Split>
{modelLocationType === ModelLocationType.ObjectStorage && (
<>
<FormGroup
className={spacing.mlLg}
label="Endpoint"
isRequired
fieldId="location-endpoint"
>
<TextInput
isRequired
type="text"
id="location-endpoint"
name="location-endpoint"
value={modelLocationEndpoint}
onChange={(_e, value) => setData('modelLocationEndpoint', value)}
/>
</FormGroup>
<FormGroup
className={spacing.mlLg}
label="Bucket"
isRequired
fieldId="location-bucket"
>
<TextInput
isRequired
type="text"
id="location-bucket"
name="location-bucket"
value={modelLocationBucket}
onChange={(_e, value) => setData('modelLocationBucket', value)}
/>
</FormGroup>
<FormGroup className={spacing.mlLg} label="Region" fieldId="location-region">
<TextInput
type="text"
id="location-region"
name="location-region"
value={modelLocationRegion}
onChange={(_e, value) => setData('modelLocationRegion', value)}
/>
</FormGroup>
<FormGroup
className={spacing.mlLg}
label="Path"
isRequired
fieldId="location-path"
>
<Split hasGutter>
<SplitItem>
<Button
data-testid="object-storage-autofill-button"
variant="link"
isInline
icon={<OptimizeIcon />}
onClick={() => setAutofillModalOpen(true)}
>
Autofill from data connection
</Button>
<InputGroupText isPlain>/</InputGroupText>
</SplitItem>
)}
</Split>
}
id="location-type-object-storage"
body={
modelLocationType === ModelLocationType.ObjectStorage && (
<Form>
<FormGroup label="Endpoint" isRequired fieldId="location-endpoint">
<TextInput
isRequired
type="text"
id="location-endpoint"
name="location-endpoint"
value={modelLocationEndpoint}
onChange={(_e, value) => setData('modelLocationEndpoint', value)}
/>
</FormGroup>
<FormGroup label="Bucket" isRequired fieldId="location-bucket">
<TextInput
isRequired
type="text"
id="location-bucket"
name="location-bucket"
value={modelLocationBucket}
onChange={(_e, value) => setData('modelLocationBucket', value)}
/>
</FormGroup>
<FormGroup label="Region" fieldId="location-region">
<TextInput
type="text"
id="location-region"
name="location-region"
value={modelLocationRegion}
onChange={(_e, value) => setData('modelLocationRegion', value)}
/>
</FormGroup>
<FormGroup label="Path" isRequired fieldId="location-path">
<Split hasGutter>
<SplitItem>
<InputGroupText isPlain>/</InputGroupText>
</SplitItem>
<SplitItem isFilled>
<InputGroupItem>
<TextInput
isRequired
type="text"
id="location-path"
name="location-path"
value={modelLocationPath}
onChange={(_e, value) => setData('modelLocationPath', value)}
/>
</InputGroupItem>
</SplitItem>
</Split>
<HelperText>
<HelperTextItem>
Enter a path to a model or folder. This path cannot point to a root
folder.
</HelperTextItem>
</HelperText>
</FormGroup>
</Form>
)
}
/>
<SplitItem isFilled>
<InputGroupItem>
<TextInput
isRequired
type="text"
id="location-path"
name="location-path"
value={modelLocationPath}
onChange={(_e, value) => setData('modelLocationPath', value)}
/>
</InputGroupItem>
</SplitItem>
</Split>
<HelperText>
<HelperTextItem>
Enter a path to a model or folder. This path cannot point to a root
folder.
</HelperTextItem>
</HelperText>
</FormGroup>
</>
)}
<Radio
isChecked={modelLocationType === ModelLocationType.URI}
name="location-type-uri"
Expand Down

0 comments on commit e37f5ce

Please sign in to comment.