-
Notifications
You must be signed in to change notification settings - Fork 137
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added data connection section (#1000)
* added data connection section added upload for secret * removed extra PF props * fixed props * added data connection form validation * fixes * added fix * linter
- Loading branch information
1 parent
af79b0b
commit 32f4555
Showing
14 changed files
with
409 additions
and
40 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
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
92 changes: 92 additions & 0 deletions
92
frontend/src/pages/projects/screens/spawner/dataConnection/DataConnectionField.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,92 @@ | ||
| import * as React from 'react'; | ||
| import { Checkbox, FormGroup, Radio, Stack, StackItem } from '@patternfly/react-core'; | ||
| import { | ||
| DataConnectionData, | ||
| EnvironmentVariableType, | ||
| SecretCategory, | ||
| } from '~/pages/projects/types'; | ||
| import AWSField from '~/pages/projects/dataConnections/AWSField'; | ||
| import { EMPTY_AWS_SECRET_DATA } from '~/pages/projects/dataConnections/const'; | ||
| import ExistingDataConnectionField from './ExistingDataConnectionField'; | ||
|
|
||
| type DataConnectionFieldProps = { | ||
| dataConnection: DataConnectionData; | ||
| setDataConnection: (dataConnection: DataConnectionData) => void; | ||
| }; | ||
| const DataConnectionField: React.FC<DataConnectionFieldProps> = ({ | ||
| dataConnection, | ||
| setDataConnection, | ||
| }) => ( | ||
| <FormGroup fieldId="cluster-storage" role="radiogroup"> | ||
| <Stack hasGutter> | ||
| <StackItem> | ||
| <Checkbox | ||
| className="checkbox-radio-fix-body-width" | ||
| name="enable-data-connection-checkbox" | ||
| id="enable-data-connection-checkbox" | ||
| label="Use a data connection" | ||
| isChecked={dataConnection.enabled} | ||
| onChange={() => | ||
| setDataConnection({ ...dataConnection, enabled: !dataConnection.enabled }) | ||
| } | ||
| /> | ||
| </StackItem> | ||
| {dataConnection.enabled && ( | ||
| <> | ||
| <StackItem> | ||
| <Radio | ||
| className="checkbox-radio-fix-body-width" | ||
| name="new-data-connection-radio" | ||
| id="new-data-connection-radio" | ||
| label="Create new data connection" | ||
| isChecked={dataConnection.type === 'creating'} | ||
| onChange={() => setDataConnection({ ...dataConnection, type: 'creating' })} | ||
| body={ | ||
| dataConnection.type === 'creating' && ( | ||
| <AWSField | ||
| values={dataConnection.creating?.values?.data ?? EMPTY_AWS_SECRET_DATA} | ||
| onUpdate={(newEnvData) => { | ||
| setDataConnection({ | ||
| ...dataConnection, | ||
| creating: { | ||
| type: EnvironmentVariableType.SECRET, | ||
| values: { category: SecretCategory.AWS, data: newEnvData }, | ||
| }, | ||
| }); | ||
| }} | ||
| /> | ||
| ) | ||
| } | ||
| /> | ||
| </StackItem> | ||
| <StackItem> | ||
| <Radio | ||
| className="checkbox-radio-fix-body-width" | ||
| name="existing-data-connection-type-radio" | ||
| id="existing-data-connection-type-radio" | ||
| label="Use existing data connection" | ||
| isChecked={dataConnection.type === 'existing'} | ||
| onChange={() => setDataConnection({ ...dataConnection, type: 'existing' })} | ||
| body={ | ||
| dataConnection.type === 'existing' && ( | ||
| <ExistingDataConnectionField | ||
| fieldId="select-existing-data-connection" | ||
| selectedDataConnection={dataConnection?.existing?.secretRef.name} | ||
| setDataConnection={(name) => | ||
| setDataConnection({ | ||
| ...dataConnection, | ||
| existing: { secretRef: { name: name ?? '' } }, | ||
| }) | ||
| } | ||
| /> | ||
| ) | ||
| } | ||
| /> | ||
| </StackItem> | ||
| </> | ||
| )} | ||
| </Stack> | ||
| </FormGroup> | ||
| ); | ||
|
|
||
| export default DataConnectionField; |
73 changes: 73 additions & 0 deletions
73
frontend/src/pages/projects/screens/spawner/dataConnection/ExistingDataConnectionField.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,73 @@ | ||
| import * as React from 'react'; | ||
| import { Alert, FormGroup, Select, SelectOption } from '@patternfly/react-core'; | ||
| import { ProjectDetailsContext } from '~/pages/projects/ProjectDetailsContext'; | ||
| import { getDataConnectionDisplayName } from '~/pages/projects/screens/detail/data-connections/utils'; | ||
|
|
||
| type ExistingDataConnectionFieldProps = { | ||
| fieldId: string; | ||
| selectedDataConnection?: string; | ||
| setDataConnection: (name?: string) => void; | ||
| }; | ||
|
|
||
| const ExistingDataConnectionField: React.FC<ExistingDataConnectionFieldProps> = ({ | ||
| fieldId, | ||
| selectedDataConnection, | ||
| setDataConnection, | ||
| }) => { | ||
| const [isOpen, setOpen] = React.useState(false); | ||
| const { | ||
| dataConnections: { data: connections, loaded, error }, | ||
| } = React.useContext(ProjectDetailsContext); | ||
|
|
||
| if (error) { | ||
| return ( | ||
| <Alert title="Error loading data connections" variant="danger"> | ||
| {error.message} | ||
| </Alert> | ||
| ); | ||
| } | ||
|
|
||
| const empty = connections.length === 0; | ||
| let placeholderText: string; | ||
| if (!loaded) { | ||
| placeholderText = 'Loading data connections...'; | ||
| } else if (empty) { | ||
| placeholderText = 'No existing data connections available'; | ||
| } else { | ||
| placeholderText = 'Select a data connection'; | ||
| } | ||
|
|
||
| return ( | ||
| <FormGroup isRequired label="Data connection" fieldId={fieldId}> | ||
| <Select | ||
| removeFindDomNode | ||
| variant="typeahead" | ||
| selections={selectedDataConnection} | ||
| isOpen={isOpen} | ||
| onClear={() => { | ||
| setDataConnection(undefined); | ||
| setOpen(false); | ||
| }} | ||
| isDisabled={empty} | ||
| onSelect={(e, selection) => { | ||
| if (typeof selection === 'string') { | ||
| setDataConnection(selection); | ||
| setOpen(false); | ||
| } | ||
| }} | ||
| onToggle={setOpen} | ||
| placeholderText={placeholderText} | ||
| direction="up" | ||
| menuAppendTo="parent" | ||
| > | ||
| {connections.map((connection) => ( | ||
| <SelectOption key={connection.data.metadata.name} value={connection.data.metadata.name}> | ||
| {getDataConnectionDisplayName(connection)} | ||
| </SelectOption> | ||
| ))} | ||
| </Select> | ||
| </FormGroup> | ||
| ); | ||
| }; | ||
|
|
||
| export default ExistingDataConnectionField; |
Oops, something went wrong.