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

[Enterprise Search] Clean up rich configurable fields UI (#155282)

Browse source 
- Add spacing between `EuiRow` and `EuiPanel` for
`ConnectorConfigurationField`.
- Hide fields that have any `ui_restrictions`
- Fix labelling for sensitive textareas
- Other misc cleanup tasks
This commit is contained in:
Navarone Feekery 2023-04-24 10:17:00 +02:00 • committed by GitHub
parent 67927e12b2
commit 03464e79c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 92 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

14
x-pack/plugins/enterprise_search/common/connectors/native_connectors.ts
View file

@ -27,6 +27,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
required: true,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: '',
},
user: {
@ -44,6 +45,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
required: true,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: '',
},
password: {
@ -61,6 +63,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
required: true,
sensitive: true,
tooltip: '',
ui_restrictions: [],
value: '',
},
database: {
@ -78,6 +81,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
required: true,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: '',
},
collection: {
@ -95,6 +99,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
required: true,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: '',
},
direct_connection: {
@ -112,6 +117,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
required: true,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: true,
},
},
@ -145,6 +151,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
required: true,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: '',
},
port: {
@ -162,6 +169,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
required: true,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: '',
},
user: {
@ -179,6 +187,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: '',
},
password: {
@ -196,6 +205,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
required: false,
sensitive: true,
tooltip: '',
ui_restrictions: [],
value: '',
},
database: {
@ -213,6 +223,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
required: true,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: '',
},
tables: {
@ -230,6 +241,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
required: true,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: '',
},
ssl_enabled: {
@ -247,6 +259,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
required: true,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: false,
},
ssl_ca: {
@ -264,6 +277,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
required: true,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: '',
},
},

2
x-pack/plugins/enterprise_search/common/types/connectors.ts
View file

@ -23,7 +23,6 @@ export enum DisplayType {
NUMERIC = 'numeric',
TOGGLE = 'toggle',
DROPDOWN = 'dropdown',
CHECKBOX = 'checkbox',
}
export interface ConnectorConfigProperties {
@ -36,6 +35,7 @@ export interface ConnectorConfigProperties {
required: boolean;
sensitive: boolean;
tooltip: string;
ui_restrictions: string[];
value: string | number | boolean | null;
}

2
x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/search_indices.mock.ts
View file

@ -45,6 +45,7 @@ export const indices: ElasticsearchIndexWithIngestion[] = [
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'barbar',
},
},
@ -155,6 +156,7 @@ export const indices: ElasticsearchIndexWithIngestion[] = [
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'barbar',
},
},

2
x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/view_index.mock.ts
View file

@ -55,6 +55,7 @@ export const connectorIndex: ConnectorViewIndex = {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'barbar',
},
},
@ -169,6 +170,7 @@ export const crawlerIndex: CrawlerViewIndex = {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'barbar',
},
},

9
x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_field.tsx
View file

@ -95,7 +95,14 @@ export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldPr
);
return sensitive ? (
<EuiAccordion id={key + '-accordion'} buttonContent={label}>
<EuiAccordion
id={key + '-accordion'}
buttonContent={
<EuiToolTip content={tooltip}>
<p>{label}</p>
</EuiToolTip>
}
>
{textarea}
</EuiAccordion>
) : (

55
x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_form.tsx
View file

@ -17,6 +17,7 @@ import {
EuiForm,
EuiFormRow,
EuiPanel,
EuiSpacer,
EuiToolTip,
} from '@elastic/eui';
@ -48,6 +49,12 @@ export const ConnectorConfigurationForm = () => {
{}
);
const filteredConfigView = localConfigView.filter(
(configEntry) =>
configEntry.ui_restrictions.length <= 0 &&
dependenciesSatisfied(configEntry.depends_on, dependencyLookup)
);
return (
<EuiForm
onSubmit={(event) => {
@ -56,17 +63,16 @@ export const ConnectorConfigurationForm = () => {
}}
component="form"
>
{localConfigView.map((configEntry) => {
{filteredConfigView.map((configEntry, index) => {
const {
default_value: defaultValue,
depends_on: dependencies,
key,
display,
label,
sensitive,
tooltip,
} = configEntry;
// toggle label goes next to the element, not in the row
const hasDependencies = dependencies.length > 0;
const helpText = defaultValue
? i18n.translate(
'xpack.enterpriseSearch.content.indices.configurationConnector.config.defaultValue',
@ -76,26 +82,41 @@ export const ConnectorConfigurationForm = () => {
}
)
: '';
// toggle and sensitive textarea labels go next to the element, not in the row
const rowLabel =
display !== DisplayType.TOGGLE ? (
display === DisplayType.TOGGLE || (display === DisplayType.TEXTAREA && sensitive) ? (
<></>
) : (
<EuiToolTip content={tooltip}>
<p>{label}</p>
</EuiToolTip>
) : (
<></>
);
return hasDependencies ? (
dependenciesSatisfied(dependencies, dependencyLookup) ? (
<EuiPanel color="subdued" borderRadius="none">
<EuiFormRow label={rowLabel} key={key} helpText={helpText}>
<ConnectorConfigurationField configEntry={configEntry} />
</EuiFormRow>
</EuiPanel>
) : (
<></>
)
) : (
if (dependencies.length > 0) {
// dynamic spacing without CSS
const previousField = filteredConfigView[index - 1];
const nextField = filteredConfigView[index + 1];
const topSpacing =
!previousField || previousField.depends_on.length <= 0 ? <EuiSpacer size="m" /> : <></>;
const bottomSpacing =
!nextField || nextField.depends_on.length <= 0 ? <EuiSpacer size="m" /> : <></>;
return (
<>
{topSpacing}
<EuiPanel color="subdued" borderRadius="none">
<EuiFormRow label={rowLabel} key={key} helpText={helpText}>
<ConnectorConfigurationField configEntry={configEntry} />
</EuiFormRow>
</EuiPanel>
{bottomSpacing}
</>
);
}
return (
<EuiFormRow label={rowLabel} key={key} helpText={helpText}>
<ConnectorConfigurationField configEntry={configEntry} />
</EuiFormRow>

23
x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_logic.test.ts
View file

@ -61,6 +61,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'oldBar',
},
},
@ -79,6 +80,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'oldBar',
},
},
@ -94,6 +96,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'oldBar',
},
],
@ -111,6 +114,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'fourthBar',
},
});
@ -127,6 +131,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'fourthBar',
},
},
@ -142,6 +147,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'fourthBar',
},
],
@ -160,6 +166,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'foofoo',
},
password: {
@ -172,6 +179,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: true,
tooltip: '',
ui_restrictions: [],
value: 'fourthBar',
},
});
@ -186,6 +194,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'foofoo',
},
password: {
@ -198,6 +207,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: true,
tooltip: '',
ui_restrictions: [],
value: 'fourthBar',
},
});
@ -212,6 +222,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'fafa',
});
expect(ConnectorConfigurationLogic.values).toEqual({
@ -227,6 +238,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'foofoo',
},
password: {
@ -239,6 +251,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: true,
tooltip: '',
ui_restrictions: [],
value: 'fourthBar',
},
},
@ -254,6 +267,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'foofoo',
},
{
@ -267,6 +281,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: true,
tooltip: '',
ui_restrictions: [],
value: 'fourthBar',
},
],
@ -281,6 +296,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'fafa',
},
password: {
@ -293,6 +309,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: true,
tooltip: '',
ui_restrictions: [],
value: 'fourthBar',
},
},
@ -308,6 +325,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'fafa',
},
{
@ -321,6 +339,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: true,
tooltip: '',
ui_restrictions: [],
value: 'fourthBar',
},
],
@ -345,6 +364,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'barbar',
},
],
@ -381,6 +401,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'barbar',
},
],
@ -402,6 +423,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: false,
tooltip: '',
ui_restrictions: [],
value: 'barbar',
},
],
@ -424,6 +446,7 @@ describe('ConnectorConfigurationLogic', () => {
required: false,
sensitive: true,
tooltip: '',
ui_restrictions: [],
value: 'Barbara',
},
});

4
x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_logic.ts
View file

@ -66,6 +66,7 @@ export interface ConfigEntry {
required: boolean;
sensitive: boolean;
tooltip: string;
ui_restrictions: string[];
value: string | number | boolean | null;
}
@ -245,6 +246,8 @@ export const ConnectorConfigurationLogic = kea<
required,
sensitive,
tooltip,
// eslint-disable-next-line @typescript-eslint/naming-convention
ui_restrictions,
value,
}
) => ({
@ -259,6 +262,7 @@ export const ConnectorConfigurationLogic = kea<
required,
sensitive,
tooltip,
ui_restrictions,
value,
},
}),