github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.12] [Enterprise Search]Fix cursor jumping form inputs. (#173659) (#173748)

Browse source 
# Backport

This will backport the following commits from `main` to `8.12`:
- [[Enterprise Search]Fix cursor jumping form inputs.
(#173659)](https://github.com/elastic/kibana/pull/173659)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Efe Gürkan
YALAMAN","email":"efeguerkan.yalaman@elastic.co"},"sourceCommit":{"committedDate":"2023-12-20T14:20:46Z","message":"[Enterprise
Search]Fix cursor jumping form inputs. (#173659)\n\n##
Summary\r\n\r\nMoved all inputs to separate components with internal
inner
values.\r\n\r\n\r\n2155049d-d6bc-4c28-8ddb-0201af080a9d\r\n\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"9d1feb5febfc5c4192d2ab11bf17555971e17195","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Team:EnterpriseSearch","v8.12.0","v8.13.0"],"number":173659,"url":"https://github.com/elastic/kibana/pull/173659","mergeCommit":{"message":"[Enterprise
Search]Fix cursor jumping form inputs. (#173659)\n\n##
Summary\r\n\r\nMoved all inputs to separate components with internal
inner
values.\r\n\r\n\r\n2155049d-d6bc-4c28-8ddb-0201af080a9d\r\n\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"9d1feb5febfc5c4192d2ab11bf17555971e17195"}},"sourceBranch":"main","suggestedTargetBranches":["8.12"],"targetPullRequestStates":[{"branch":"8.12","label":"v8.12.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.13.0","labelRegex":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/173659","number":173659,"mergeCommit":{"message":"[Enterprise
Search]Fix cursor jumping form inputs. (#173659)\n\n##
Summary\r\n\r\nMoved all inputs to separate components with internal
inner
values.\r\n\r\n\r\n2155049d-d6bc-4c28-8ddb-0201af080a9d\r\n\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"9d1feb5febfc5c4192d2ab11bf17555971e17195"}}]}]
BACKPORT-->

Co-authored-by: Efe Gürkan YALAMAN <efeguerkan.yalaman@elastic.co>
This commit is contained in:
Kibana Machine 2023-12-20 10:31:04 -05:00 • committed by GitHub
parent 89220e4bef
commit ced76befcb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 128 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

192
packages/kbn-search-connectors/components/configuration/connector_configuration_field.tsx
View file

@ -41,6 +41,109 @@ interface ConnectorConfigurationFieldProps {
setConfigValue: (value: number | string | boolean | null) => void;
}
interface ConfigInputFieldProps {
configEntry: ConfigEntryView;
isLoading: boolean;
validateAndSetConfigValue: (value: string) => void;
}
export const ConfigInputField: React.FC<ConfigInputFieldProps> = ({
configEntry,
isLoading,
validateAndSetConfigValue,
}) => {
const { isValid, required, placeholder, value } = configEntry;
const [innerValue, setInnerValue] = useState(value);
return (
<EuiFieldText
disabled={isLoading}
required={required}
value={ensureStringType(innerValue)}
isInvalid={!isValid}
onChange={(event) => {
setInnerValue(event.target.value);
validateAndSetConfigValue(event.target.value);
}}
placeholder={placeholder}
/>
);
};
export const ConfigInputTextArea: React.FC<ConfigInputFieldProps> = ({
isLoading,
configEntry,
validateAndSetConfigValue,
}) => {
const { isValid, required, placeholder, value } = configEntry;
const [innerValue, setInnerValue] = useState(value);
return (
<EuiTextArea
disabled={isLoading}
required={required}
// ensures placeholder shows up when value is empty string
value={ensureStringType(innerValue) || undefined}
isInvalid={!isValid}
onChange={(event) => {
setInnerValue(event.target.value);
validateAndSetConfigValue(event.target.value);
}}
placeholder={placeholder}
/>
);
};
export const ConfigSensitiveTextArea: React.FC<ConfigInputFieldProps> = ({
isLoading,
configEntry,
validateAndSetConfigValue,
}) => {
const { key, label, tooltip } = configEntry;
return (
<EuiAccordion
id={key + '-accordion'}
buttonContent={
tooltip ? (
<EuiFlexGroup gutterSize="xs">
<EuiFlexItem>
<p>{label}</p>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIcon type="questionInCircle" />
</EuiFlexItem>
</EuiFlexGroup>
) : (
<p>{label}</p>
)
}
>
<ConfigInputTextArea
isLoading={isLoading}
configEntry={configEntry}
validateAndSetConfigValue={validateAndSetConfigValue}
/>
</EuiAccordion>
);
};
export const ConfigInputPassword: React.FC<ConfigInputFieldProps> = ({
isLoading,
configEntry,
validateAndSetConfigValue,
}) => {
const { required, value } = configEntry;
const [innerValue, setInnerValue] = useState(value);
return (
<EuiFieldPassword
disabled={isLoading}
required={required}
type="dual"
value={ensureStringType(innerValue)}
onChange={(event) => {
setInnerValue(event.target.value);
validateAndSetConfigValue(event.target.value);
}}
/>
);
};
export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldProps> = ({
configEntry,
isLoading,
@ -53,18 +156,7 @@ export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldPr
setConfigValue(ensureCorrectTyping(configEntry.type, value));
};
const {
key,
display,
isValid,
label,
options,
required,
placeholder,
sensitive,
tooltip,
value,
} = configEntry;
const { key, display, label, options, required, sensitive, tooltip, value } = configEntry;
switch (display) {
case DisplayType.DROPDOWN:
@ -92,51 +184,30 @@ export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldPr
case DisplayType.NUMERIC:
return (
<EuiFieldText
disabled={isLoading}
required={required}
value={ensureStringType(value)}
isInvalid={!isValid}
onChange={(event) => {
validateAndSetConfigValue(event.target.value);
}}
placeholder={placeholder}
<ConfigInputField
key={key}
isLoading={isLoading}
configEntry={configEntry}
validateAndSetConfigValue={validateAndSetConfigValue}
/>
);
case DisplayType.TEXTAREA:
const textarea = (
<EuiTextArea
disabled={isLoading}
placeholder={placeholder}
required={required}
value={ensureStringType(value) || undefined} // ensures placeholder shows up when value is empty string
onChange={(event) => {
validateAndSetConfigValue(event.target.value);
}}
<ConfigInputTextArea
key={sensitive ? key + '-sensitive-text-area' : key + 'text-area'}
isLoading={isLoading}
configEntry={configEntry}
validateAndSetConfigValue={validateAndSetConfigValue}
/>
);
return sensitive ? (
<EuiAccordion
id={key + '-accordion'}
buttonContent={
tooltip ? (
<EuiFlexGroup gutterSize="xs">
<EuiFlexItem>
<p>{label}</p>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIcon type="questionInCircle" />
</EuiFlexItem>
</EuiFlexGroup>
) : (
<p>{label}</p>
)
}
>
{textarea}
</EuiAccordion>
<ConfigSensitiveTextArea
isLoading={isLoading}
configEntry={configEntry}
validateAndSetConfigValue={validateAndSetConfigValue}
/>
) : (
textarea
);
@ -210,24 +281,17 @@ export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldPr
default:
return sensitive ? (
<EuiFieldPassword
disabled={isLoading}
required={required}
type="dual"
value={ensureStringType(value)}
onChange={(event) => {
validateAndSetConfigValue(event.target.value);
}}
<ConfigInputPassword
isLoading={isLoading}
configEntry={configEntry}
validateAndSetConfigValue={validateAndSetConfigValue}
/>
) : (
<EuiFieldText
disabled={isLoading}
placeholder={placeholder}
required={required}
value={ensureStringType(value)}
onChange={(event) => {
validateAndSetConfigValue(event.target.value);
}}
<ConfigInputField
key={key}
isLoading={isLoading}
configEntry={configEntry}
validateAndSetConfigValue={validateAndSetConfigValue}
/>
);
}