diff --git a/awx/ui_next/src/screens/Credential/shared/CredentialForm.jsx b/awx/ui_next/src/screens/Credential/shared/CredentialForm.jsx index 9cf197842b..9d69aa7d13 100644 --- a/awx/ui_next/src/screens/Credential/shared/CredentialForm.jsx +++ b/awx/ui_next/src/screens/Credential/shared/CredentialForm.jsx @@ -1,4 +1,5 @@ import React, { useCallback, useEffect, useState } from 'react'; +import { useLocation } from 'react-router-dom'; import { shape } from 'prop-types'; import { Formik, useField, useFormikContext } from 'formik'; import { withI18n } from '@lingui/react'; @@ -11,6 +12,7 @@ import { Select as PFSelect, SelectOption as PFSelectOption, SelectVariant, + Tooltip, } from '@patternfly/react-core'; import styled from 'styled-components'; import FormField, { FormSubmitError } from '../../../components/FormField'; @@ -27,6 +29,7 @@ const Select = styled(PFSelect)` ul { max-width: 495px; } + ${props => (props.isDisabled ? `cursor: not-allowed` : null)} `; const SelectOption = styled(PFSelectOption)` @@ -36,6 +39,7 @@ const SelectOption = styled(PFSelectOption)` `; function CredentialFormFields({ i18n, initialTypeId, credentialTypes }) { + const { pathname } = useLocation(); const { setFieldValue, initialValues, setFieldTouched } = useFormikContext(); const [isSelectOpen, setIsSelectOpen] = useState(false); const [credTypeField, credTypeMeta, credTypeHelpers] = useField({ @@ -128,6 +132,38 @@ function CredentialFormFields({ i18n, initialTypeId, credentialTypes }) { [setFieldValue] ); + const isCredentialTypeDisabled = pathname.includes('edit'); + const credentialTypeSelect = ( + + ); + return ( <> - + {isCredentialTypeDisabled ? ( + + {credentialTypeSelect} + + ) : ( + credentialTypeSelect + )} {credentialTypeId !== undefined && credentialTypeId !== '' &&