Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement - EUICodeEditor for Visualize JSON #58679

Merged
merged 15 commits into from
Mar 10, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/legacy/core_plugins/data/public/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ export {
isStringType,
isType,
isValidInterval,
isValidJson,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had moved isValidJson into the default editor in #59605 since it is the only place where it is currently being used. Since this PR will likely merge first I'll go back and adjust #59605 accordingly.

METRIC_TYPES,
OptionedParamType,
parentPipelineType,
Expand Down
2 changes: 1 addition & 1 deletion src/legacy/core_plugins/data/public/search/aggs/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export { toAbsoluteDates } from './buckets/lib/date_utils';
export { convertIPRangeToString } from './buckets/ip_range';
export { aggTypeFilters, propFilter } from './filter';
export { OptionedParamType } from './param_types/optioned';
export { isValidJson, isValidInterval } from './utils';
export { isValidInterval } from './utils';
export { BUCKET_TYPES } from './buckets/bucket_agg_types';
export { METRIC_TYPES } from './metrics/metric_agg_types';

Expand Down
49 changes: 0 additions & 49 deletions src/legacy/core_plugins/data/public/search/aggs/utils.test.tsx

This file was deleted.

29 changes: 0 additions & 29 deletions src/legacy/core_plugins/data/public/search/aggs/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,35 +20,6 @@
import { leastCommonInterval } from 'ui/vis/lib/least_common_interval';
import { isValidEsInterval } from '../../../common';

/**
* Check a string if it's a valid JSON.
*
* @param {string} value a string that should be validated
* @returns {boolean} true if value is a valid JSON or if value is an empty string, or a string with whitespaces, otherwise false
*/
export function isValidJson(value: string): boolean {
if (!value || value.length === 0) {
return true;
}

const trimmedValue = value.trim();

if (trimmedValue.length === 0) {
return true;
}

if (trimmedValue[0] === '{' || trimmedValue[0] === '[') {
try {
JSON.parse(trimmedValue);
return true;
} catch (e) {
return false;
}
} else {
return false;
}
}

export function isValidInterval(value: string, baseInterval?: string) {
if (baseInterval) {
return _parseWithBase(value, baseInterval);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,65 +17,91 @@
* under the License.
*/

import React, { useEffect } from 'react';
import React, { useState, useMemo, useCallback } from 'react';

import { EuiFormRow, EuiIconTip, EuiTextArea } from '@elastic/eui';
import { EuiFormRow, EuiIconTip, EuiCodeEditor, EuiScreenReaderOnly } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';

import { isValidJson } from '../../legacy_imports';
import { AggParamEditorProps } from '../agg_param_props';

function RawJsonParamEditor({
ThomThomson marked this conversation as resolved.
Show resolved Hide resolved
agg,
showValidation,
value = '',
setValidity,
setValue,
setTouched,
}: AggParamEditorProps<string>) {
const label = (
<>
<FormattedMessage id="visDefaultEditor.controls.jsonInputLabel" defaultMessage="JSON input" />{' '}
<EuiIconTip
position="right"
content={i18n.translate('visDefaultEditor.controls.jsonInputTooltip', {
defaultMessage:
"Any JSON formatted properties you add here will be merged with the elasticsearch aggregation definition for this section. For example 'shard_size' on a terms aggregation.",
})}
type="questionInCircle"
/>
</>
const [isFieldValid, setFieldValidity] = useState(true);
const [editorReady, setEditorReady] = useState(false);

const editorTooltipText = useMemo(
() =>
i18n.translate('visDefaultEditor.controls.jsonInputTooltip', {
defaultMessage:
"Any JSON formatted properties you add here will be merged with the elasticsearch aggregation definition for this section. For example 'shard_size' on a terms aggregation.",
}),
[]
);
const isValid = isValidJson(value);

const onChange = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
const textValue = ev.target.value;
setValue(textValue);
setValidity(isValidJson(textValue));
};
const jsonEditorLabelText = useMemo(
() =>
i18n.translate('visDefaultEditor.controls.jsonInputLabel', {
defaultMessage: 'JSON input',
}),
[]
);

useEffect(() => {
setValidity(isValid);
}, [isValid]);
const label = useMemo(
() => (
<>
{jsonEditorLabelText}{' '}
<EuiIconTip position="right" content={editorTooltipText} type="questionInCircle" />
</>
),
[jsonEditorLabelText, editorTooltipText]
);

const onEditorValidate = useCallback(
(annotations: unknown[]) => {
// The first onValidate returned from EuiCodeEditor is a false negative
if (editorReady) {
const validity = annotations.length === 0;
setFieldValidity(validity);
setValidity(validity);
} else {
setEditorReady(true);
}
},
[setValidity, editorReady]
);

return (
<EuiFormRow
label={label}
isInvalid={showValidation ? !isValid : false}
isInvalid={showValidation ? !isFieldValid : false}
fullWidth={true}
compressed
>
<EuiTextArea
id={`visEditorRawJson${agg.id}`}
isInvalid={showValidation ? !isValid : false}
value={value}
onChange={onChange}
rows={2}
fullWidth={true}
onBlur={setTouched}
compressed
/>
<>
<EuiCodeEditor
mode="json"
theme="github"
width="100%"
height="250px"
value={value}
onValidate={onEditorValidate}
setOptions={{
fontSize: '14px',
ThomThomson marked this conversation as resolved.
Show resolved Hide resolved
}}
onChange={setValue}
onBlur={setTouched}
aria-label={jsonEditorLabelText}
aria-describedby="jsonEditorDescription"
/>
<EuiScreenReaderOnly>
<p id="jsonEditorDescription">{editorTooltipText}</p>
</EuiScreenReaderOnly>
</>
</EuiFormRow>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export { parentPipelineType } from 'ui/agg_types';
export { siblingPipelineType } from 'ui/agg_types';
export { isType, isStringType } from 'ui/agg_types';
export { OptionedValueProp, OptionedParamEditorProps, OptionedParamType } from 'ui/agg_types';
export { isValidJson, isValidInterval } from 'ui/agg_types';
export { isValidInterval } from 'ui/agg_types';
export { AggParamOption } from 'ui/agg_types';
export { CidrMask } from 'ui/agg_types';

Expand Down
1 change: 0 additions & 1 deletion src/legacy/ui/public/agg_types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ export {
isStringType,
isType,
isValidInterval,
isValidJson,
OptionedParamType,
parentPipelineType,
propFilter,
Expand Down