-
Notifications
You must be signed in to change notification settings - Fork 178
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[RHOAIENG-10318] Add connection type field modal
- Loading branch information
1 parent
78d616b
commit 07fcc3a
Showing
6 changed files
with
321 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
221 changes: 221 additions & 0 deletions
221
frontend/src/pages/connectionTypes/connectionTypeFields/AddConnectionTypeFieldModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,221 @@ | ||
| import * as React from 'react'; | ||
| import { | ||
| Checkbox, | ||
| Form, | ||
| FormGroup, | ||
| MenuToggle, | ||
| Modal, | ||
| Popover, | ||
| Select, | ||
| SelectList, | ||
| SelectOption, | ||
| TextArea, | ||
| TextInput, | ||
| } from '@patternfly/react-core'; | ||
| import { HelpIcon } from '@patternfly/react-icons'; | ||
| import DashboardModalFooter from '~/concepts/dashboard/DashboardModalFooter'; | ||
| import { | ||
| ConnectionTypeCommonProperties, | ||
| ConnectionTypeDataField, | ||
| ConnectionTypeFieldType, | ||
| } from '~/concepts/connectionTypes/types'; | ||
| import { TextForm } from '~/pages/connectionTypes/connectionTypeFields/TextForm'; | ||
| import { isEnumMember } from '~/utilities/utils'; | ||
|
|
||
| const isConnectionTypeFieldType = ( | ||
| fieldType: string | number | undefined, | ||
| ): fieldType is ConnectionTypeFieldType => | ||
| isEnumMember(fieldType?.toString(), ConnectionTypeFieldType); | ||
|
|
||
| interface AddConnectionTypeFieldModalProps { | ||
| onCancel: () => void; | ||
| onSubmit: (newField: ConnectionTypeDataField) => void; | ||
| // existingFields?: ConnectionTypeField[]; | ||
| } | ||
|
|
||
| const fieldTypeLabels: { [key: string]: string } = { | ||
| [ConnectionTypeFieldType.Boolean]: 'Boolean', | ||
| [ConnectionTypeFieldType.Dropdown]: 'Short text', | ||
| [ConnectionTypeFieldType.File]: 'File', | ||
| [ConnectionTypeFieldType.Hidden]: 'Hidden', | ||
| [ConnectionTypeFieldType.Numeric]: 'Numeric', | ||
| [ConnectionTypeFieldType.ShortText]: 'Short text', | ||
| [ConnectionTypeFieldType.Text]: 'Text', | ||
| [ConnectionTypeFieldType.URI]: 'URI', | ||
| }; | ||
|
|
||
| export const AddConnectionTypeFieldModal: React.FC<AddConnectionTypeFieldModalProps> = ({ | ||
| onCancel, | ||
| onSubmit, | ||
| }) => { | ||
| const [name, setName] = React.useState<string>(''); | ||
| const [description, setDescription] = React.useState<string>(); | ||
| const [envVar, setEnvVar] = React.useState<string>(''); | ||
| const [fieldType, setFieldType] = React.useState<ConnectionTypeFieldType>( | ||
| ConnectionTypeFieldType.ShortText, | ||
| ); | ||
| const [required, setRequired] = React.useState<boolean>(); | ||
| const [isOpen, setIsOpen] = React.useState<boolean>(false); | ||
| const valid = React.useMemo(() => !!name && !!envVar && !!fieldType, [envVar, fieldType, name]); | ||
| const [textProperties, setTextProperties] = React.useState<ConnectionTypeCommonProperties>({}); | ||
|
|
||
| const onAdd = () => { | ||
| switch (fieldType) { | ||
| case ConnectionTypeFieldType.Hidden: | ||
| case ConnectionTypeFieldType.File: | ||
| case ConnectionTypeFieldType.ShortText: | ||
| case ConnectionTypeFieldType.Text: | ||
| case ConnectionTypeFieldType.URI: | ||
| onSubmit({ | ||
| name, | ||
| description, | ||
| envVar, | ||
| type: fieldType, | ||
| properties: { | ||
| defaultValue: textProperties.defaultValue, | ||
| defaultReadOnly: textProperties.defaultValue | ||
| ? textProperties.defaultReadOnly | ||
| : undefined, | ||
| }, | ||
| required, | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| const fieldTypeForm = React.useMemo(() => { | ||
| switch (fieldType) { | ||
| case ConnectionTypeFieldType.Hidden: | ||
| case ConnectionTypeFieldType.File: | ||
| case ConnectionTypeFieldType.ShortText: | ||
| case ConnectionTypeFieldType.Text: | ||
| case ConnectionTypeFieldType.URI: | ||
| return ( | ||
| <TextForm | ||
| fieldType={fieldType} | ||
| properties={textProperties} | ||
| onUpdateDefaultValue={(value) => | ||
| setTextProperties((prev) => ({ | ||
| defaultValue: value, | ||
| defaultReadOnly: prev.defaultReadOnly, | ||
| })) | ||
| } | ||
| onUpdateDefaultReadOnly={(value) => | ||
| setTextProperties((prev) => ({ | ||
| defaultValue: prev.defaultValue, | ||
| defaultReadOnly: value, | ||
| })) | ||
| } | ||
| /> | ||
| ); | ||
| } | ||
| return null; | ||
| }, [fieldType, textProperties]); | ||
|
|
||
| return ( | ||
| <Modal | ||
| isOpen | ||
| variant="medium" | ||
| title="Add field" | ||
| onClose={onCancel} | ||
| footer={ | ||
| <DashboardModalFooter | ||
| onCancel={onCancel} | ||
| onSubmit={onAdd} | ||
| submitLabel="Add" | ||
| isSubmitDisabled={!valid} | ||
| alertTitle="Error" | ||
| /> | ||
| } | ||
| data-testid="archive-model-version-modal" | ||
| > | ||
| <Form> | ||
| <FormGroup fieldId="name" label="Field name" isRequired> | ||
| <TextInput id="name" value={name} onChange={(_ev, value) => setName(value)} /> | ||
| </FormGroup> | ||
| <FormGroup | ||
| fieldId="description" | ||
| label="Field description" | ||
| labelIcon={ | ||
| <Popover | ||
| aria-label="field description help" | ||
| headerContent="Field description" | ||
| bodyContent="Use the field description to provide users in your organization with additional information about a field, or instructions for completing the field. Your input will appear in a popover, like this one." | ||
| > | ||
| <HelpIcon style={{ color: 'var(--pf-v5-global--icon--Color--light)' }} /> | ||
| </Popover> | ||
| } | ||
| > | ||
| <TextArea | ||
| id="description" | ||
| value={description} | ||
| onChange={(_ev, value) => setDescription(value)} | ||
| /> | ||
| </FormGroup> | ||
| <FormGroup | ||
| fieldId="envVar" | ||
| label="Environment variable" | ||
| labelIcon={ | ||
| <Popover | ||
| aria-label="environment variable help" | ||
| headerContent="Environment variable" | ||
| bodyContent="Environment variables grant you access to the value provided when attaching the connection to your workbench." | ||
| > | ||
| <HelpIcon style={{ color: 'var(--pf-v5-global--icon--Color--light)' }} /> | ||
| </Popover> | ||
| } | ||
| isRequired | ||
| > | ||
| <TextInput id="envVar" value={envVar} onChange={(_ev, value) => setEnvVar(value)} /> | ||
| </FormGroup> | ||
| <FormGroup fieldId="fieldType" label="Field type" isRequired> | ||
| <Select | ||
| id="fieldType" | ||
| isOpen={isOpen} | ||
| shouldFocusToggleOnSelect | ||
| selected={fieldType} | ||
| onSelect={(_e, selection) => { | ||
| if (isConnectionTypeFieldType(selection)) { | ||
| setFieldType(selection); | ||
| setIsOpen(false); | ||
| } | ||
| }} | ||
| onOpenChange={(open) => setIsOpen(open)} | ||
| toggle={(toggleRef) => ( | ||
| <MenuToggle | ||
| ref={toggleRef} | ||
| id="type-select" | ||
| isFullWidth | ||
| onClick={() => { | ||
| setIsOpen((open) => !open); | ||
| }} | ||
| isExpanded={isOpen} | ||
| > | ||
| {fieldTypeLabels[fieldType]} | ||
| </MenuToggle> | ||
| )} | ||
| > | ||
| <SelectList> | ||
| <SelectOption value={ConnectionTypeFieldType.ShortText}> | ||
| {fieldTypeLabels[ConnectionTypeFieldType.ShortText]} | ||
| </SelectOption> | ||
| <SelectOption value={ConnectionTypeFieldType.Hidden}> | ||
| {fieldTypeLabels[ConnectionTypeFieldType.Hidden]} | ||
| </SelectOption> | ||
| </SelectList> | ||
| </Select> | ||
| </FormGroup> | ||
| {fieldTypeForm} | ||
| <FormGroup fieldId="isRequired"> | ||
| <Checkbox | ||
| id="isRequired" | ||
| label="Field is required" | ||
| isChecked={required || false} | ||
| onChange={(_ev, checked) => { | ||
| setRequired(checked); | ||
| }} | ||
| /> | ||
| </FormGroup> | ||
| </Form> | ||
| </Modal> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
Oops, something went wrong.