diff --git a/src/Components/CreateImageWizardV2/steps/TargetEnvironment/Aws/AwsSourcesSelect.tsx b/src/Components/CreateImageWizardV2/steps/TargetEnvironment/Aws/AwsSourcesSelect.tsx new file mode 100644 index 00000000..5879e795 --- /dev/null +++ b/src/Components/CreateImageWizardV2/steps/TargetEnvironment/Aws/AwsSourcesSelect.tsx @@ -0,0 +1,160 @@ +import React, { useEffect, useState } from 'react'; + +import { FormSpy } from '@data-driven-forms/react-form-renderer'; +import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api'; +import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api'; +import { Alert } from '@patternfly/react-core'; +import { FormGroup, Spinner } from '@patternfly/react-core'; +import { + Select, + SelectOption, + SelectVariant, +} from '@patternfly/react-core/deprecated'; +import PropTypes from 'prop-types'; + +import { extractProvisioningList } from '../../../store/helpers'; +import { + useGetSourceListQuery, + useGetSourceUploadInfoQuery, +} from '../../../store/provisioningApi'; + +export const AWSSourcesSelect = ({ + label, + isRequired, + className, + ...props +}) => { + const { change, getState } = useFormApi(); + const { input } = useFieldApi(props); + const [isOpen, setIsOpen] = useState(false); + const [selectedSourceId, setSelectedSourceId] = useState( + getState()?.values?.['aws-sources-select'] + ); + + const { + data: rawSources, + isFetching, + isSuccess, + isError, + refetch, + } = useGetSourceListQuery({ provider: 'aws' }); + const sources = extractProvisioningList(rawSources); + + const { + data: sourceDetails, + isFetching: isFetchingDetails, + isSuccess: isSuccessDetails, + isError: isErrorDetails, + } = useGetSourceUploadInfoQuery( + { id: selectedSourceId }, + { + skip: !selectedSourceId, + } + ); + + useEffect(() => { + if (isFetchingDetails || !isSuccessDetails) return; + change('aws-associated-account-id', sourceDetails?.aws?.account_id); + }, [isFetchingDetails, isSuccessDetails]); + + const onFormChange = ({ values }) => { + if ( + values['aws-target-type'] !== 'aws-target-type-source' || + values[input.name] === undefined + ) { + change(input.name, undefined); + change('aws-associated-account-id', undefined); + } + }; + + const handleSelect = (_, sourceName) => { + const sourceId = sources.find((source) => source.name === sourceName).id; + setSelectedSourceId(sourceId); + setIsOpen(false); + change(input.name, sourceId); + }; + + const handleClear = () => { + setSelectedSourceId(); + change(input.name, undefined); + }; + + const handleToggle = () => { + // Refetch upon opening (but not upon closing) + if (!isOpen) { + refetch(); + } + + setIsOpen(!isOpen); + }; + + return ( + <> + + + + + <> + {isError && ( + + Sources cannot be reached, try again later or enter an AWS account + ID manually. + + )} + {!isError && isErrorDetails && ( + + The AWS account ID for the selected source could not be resolved. + There might be a problem with the source. Verify that the source is + valid in Sources or select a different source. + + )} + + + ); +}; + +AWSSourcesSelect.propTypes = { + className: PropTypes.string, + label: PropTypes.node, + isRequired: PropTypes.bool, +}; diff --git a/src/Components/CreateImageWizardV2/steps/TargetEnvironment/Aws/index.tsx b/src/Components/CreateImageWizardV2/steps/TargetEnvironment/Aws/index.tsx new file mode 100644 index 00000000..e69de29b