fix lookup field ids

This commit is contained in:
Keith J. Grant
2021-07-19 12:33:24 -07:00
parent 1aacd94cb5
commit 29753c6b9b
4 changed files with 14 additions and 6 deletions

View File

@@ -20,6 +20,7 @@ const QS_CONFIG = getQSConfig('execution_environments', {
}); });
function ExecutionEnvironmentLookup({ function ExecutionEnvironmentLookup({
id,
globallyAvailable, globallyAvailable,
helperTextInvalid, helperTextInvalid,
isDefaultEnvironment, isDefaultEnvironment,
@@ -154,7 +155,7 @@ function ExecutionEnvironmentLookup({
const renderLookup = () => ( const renderLookup = () => (
<> <>
<Lookup <Lookup
id="execution-environments" id={id}
header={t`Execution Environment`} header={t`Execution Environment`}
value={value} value={value}
onBlur={onBlur} onBlur={onBlur}
@@ -213,7 +214,7 @@ function ExecutionEnvironmentLookup({
return ( return (
<FormGroup <FormGroup
fieldId="execution-environment-lookup" fieldId={id}
label={renderLabel(isGlobalDefaultEnvironment, isDefaultEnvironment)} label={renderLabel(isGlobalDefaultEnvironment, isDefaultEnvironment)}
labelIcon={popoverContent && <Popover content={popoverContent} />} labelIcon={popoverContent && <Popover content={popoverContent} />}
helperTextInvalid={helperTextInvalid} helperTextInvalid={helperTextInvalid}
@@ -231,6 +232,7 @@ function ExecutionEnvironmentLookup({
} }
ExecutionEnvironmentLookup.propTypes = { ExecutionEnvironmentLookup.propTypes = {
id: string,
value: ExecutionEnvironment, value: ExecutionEnvironment,
popoverContent: string, popoverContent: string,
onChange: func.isRequired, onChange: func.isRequired,
@@ -243,6 +245,7 @@ ExecutionEnvironmentLookup.propTypes = {
}; };
ExecutionEnvironmentLookup.defaultProps = { ExecutionEnvironmentLookup.defaultProps = {
id: 'execution-environments',
popoverContent: '', popoverContent: '',
isDefaultEnvironment: false, isDefaultEnvironment: false,
isGlobalDefaultEnvironment: false, isGlobalDefaultEnvironment: false,

View File

@@ -236,6 +236,7 @@ function InventoryLookup({
} }
InventoryLookup.propTypes = { InventoryLookup.propTypes = {
fieldId: string,
value: Inventory, value: Inventory,
onChange: func.isRequired, onChange: func.isRequired,
required: bool, required: bool,
@@ -247,6 +248,7 @@ InventoryLookup.propTypes = {
}; };
InventoryLookup.defaultProps = { InventoryLookup.defaultProps = {
fieldId: 'inventory',
value: null, value: null,
required: false, required: false,
isOverrideDisabled: false, isOverrideDisabled: false,

View File

@@ -128,7 +128,7 @@ function Lookup(props) {
<InputGroup onBlur={onBlur}> <InputGroup onBlur={onBlur}>
<Button <Button
aria-label={t`Search`} aria-label={t`Search`}
id={id} id={`${id}-open`}
onClick={() => dispatch({ type: 'TOGGLE_MODAL' })} onClick={() => dispatch({ type: 'TOGGLE_MODAL' })}
variant={ButtonVariant.control} variant={ButtonVariant.control}
isDisabled={isLoading || isDisabled} isDisabled={isLoading || isDisabled}
@@ -149,7 +149,7 @@ function Lookup(props) {
</ChipHolder> </ChipHolder>
) : ( ) : (
<TextInput <TextInput
id={`${id}-input`} id={id}
value={typedText} value={typedText}
onChange={(inputValue) => { onChange={(inputValue) => {
setTypedText(inputValue); setTypedText(inputValue);

View File

@@ -19,6 +19,7 @@ const QS_CONFIG = getQSConfig('organizations', {
}); });
function OrganizationLookup({ function OrganizationLookup({
id,
helperTextInvalid, helperTextInvalid,
isValid, isValid,
onBlur, onBlur,
@@ -94,7 +95,7 @@ function OrganizationLookup({
return ( return (
<FormGroup <FormGroup
fieldId="organization" fieldId={id}
helperTextInvalid={helperTextInvalid} helperTextInvalid={helperTextInvalid}
isRequired={required} isRequired={required}
validated={isValid ? 'default' : 'error'} validated={isValid ? 'default' : 'error'}
@@ -103,7 +104,7 @@ function OrganizationLookup({
> >
<Lookup <Lookup
isDisabled={isDisabled} isDisabled={isDisabled}
id="organization" id={id}
header={t`Organization`} header={t`Organization`}
value={value} value={value}
onBlur={onBlur} onBlur={onBlur}
@@ -158,6 +159,7 @@ function OrganizationLookup({
} }
OrganizationLookup.propTypes = { OrganizationLookup.propTypes = {
id: string,
helperTextInvalid: node, helperTextInvalid: node,
isValid: bool, isValid: bool,
onBlur: func, onBlur: func,
@@ -171,6 +173,7 @@ OrganizationLookup.propTypes = {
}; };
OrganizationLookup.defaultProps = { OrganizationLookup.defaultProps = {
id: 'organization',
helperTextInvalid: '', helperTextInvalid: '',
isValid: true, isValid: true,
onBlur: () => {}, onBlur: () => {},