Adding width and height as parameters to image url (#46917) (#52457)

* Adding width and height as parameters to image url

* Addressing PR comments

* Removing unnecessary error message

src/legacy/ui/public/field_editor/components/field_format_editor/editors/url/url.js

@@ -25,6 +25,7 @@ import {
  EuiLink,
  EuiSelect,
  EuiSwitch,
+ EuiFieldNumber
 } from '@elastic/eui';
 
 import {
@@ -68,23 +69,29 @@ export class UrlFormatEditor extends DefaultFormatEditor {
  };
  }
 
+ sanitizeNumericValue = (val) => {
+ const sanitizedValue = parseInt(val);
+ if (isNaN(sanitizedValue)) {
+ return '';
+ }
+ return sanitizedValue;
+ }
+
  onTypeChange = (newType) => {
- const { urlTemplate } = this.props.formatParams;
- if(newType === 'img' && !urlTemplate) {
- this.onChange({
- type: newType,
- urlTemplate: this.iconPattern,
- });
- } else if(newType !== 'img' && urlTemplate === this.iconPattern) {
- this.onChange({
- type: newType,
- urlTemplate: null,
- });
- } else {
- this.onChange({
- type: newType,
- });
+ const { urlTemplate, width, height } = this.props.formatParams;
+ const params = {
+ type: newType
+ };
+ if (newType === 'img') {
+ params.width = width;
+ params.height = height;
+ if (!urlTemplate) {
+ params.urlTemplate = this.iconPattern;
+ }
+ } else if (newType !== 'img' && urlTemplate === this.iconPattern) {
+ params.urlTemplate = null;
  }
+ this.onChange(params);
  }
 
  showUrlTemplateHelp = () => {
@@ -113,6 +120,37 @@ export class UrlFormatEditor extends DefaultFormatEditor {
  });
  }
 
+ renderWidthHeightParameters = () => {
+ const width = this.sanitizeNumericValue(this.props.formatParams.width);
+ const height = this.sanitizeNumericValue(this.props.formatParams.height);
+ return (
+ <Fragment>
+ <EuiFormRow
+ label={<FormattedMessage id="common.ui.fieldEditor.url.widthLabel" defaultMessage="Width" />}
+ >
+ <EuiFieldNumber
+ data-test-subj="urlEditorWidth"
+ value={width}
+ onChange={(e) => {
+ this.onChange({ width: e.target.value });
+ }}
+ />
+ </EuiFormRow>
+ <EuiFormRow
+ label={<FormattedMessage id="common.ui.fieldEditor.url.heightLabel" defaultMessage="Height" />}
+ >
+ <EuiFieldNumber
+ data-test-subj="urlEditorHeight"
+ value={height}
+ onChange={(e) => {
+ this.onChange({ height: e.target.value });
+ }}
+ />
+ </EuiFormRow>
+ </Fragment>
+ );
+ }
+
  render() {
  const { format, formatParams } = this.props;
  const { error, samples, sampleConverterType } = this.state;
@@ -197,6 +235,8 @@ export class UrlFormatEditor extends DefaultFormatEditor {
  />
  </EuiFormRow>
 
+ { formatParams.type === 'img' && this.renderWidthHeightParameters() }
+
  <FormatEditorSamples
  samples={samples}
  sampleType={sampleConverterType}

src/legacy/ui/public/field_editor/components/field_format_editor/editors/url/url.test.js

@@ -92,4 +92,17 @@ describe('UrlFormatEditor', () => {
  component.update();
  expect(component).toMatchSnapshot();
  });
+
+ it('should render width and height fields if image', async () => {
+ const component = shallow(
+ <UrlFormatEditor
+ fieldType={fieldType}
+ format={format}
+ formatParams={{ ...formatParams, type: 'img' }}
+ onChange={onChange}
+ onError={onError}
+ />
+ );
+ expect(component).toMatchSnapshot();
+ });
 });