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

* 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/__snapshots__/url.test.js.snap

@@ -392,3 +392,207 @@ exports[`UrlFormatEditor should render url template help 1`] = `
   />
 </Fragment>
 `;
+
+exports[`UrlFormatEditor should render width and height fields if image 1`] = `
+<Fragment>
+  <InjectIntl(LabelTemplateFlyout)
+    isVisible={false}
+    onClose={[Function]}
+  />
+  <InjectIntl(UrlTemplateFlyout)
+    isVisible={false}
+    onClose={[Function]}
+  />
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    label={
+      <FormattedMessage
+        defaultMessage="Type"
+        id="common.ui.fieldEditor.url.typeLabel"
+        values={Object {}}
+      />
+    }
+    labelType="label"
+  >
+    <EuiSelect
+      compressed={false}
+      data-test-subj="urlEditorType"
+      fullWidth={false}
+      hasNoInitialSelection={false}
+      isLoading={false}
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "text": "Link",
+            "value": "a",
+          },
+          Object {
+            "text": "Image",
+            "value": "img",
+          },
+          Object {
+            "text": "Audio",
+            "value": "audio",
+          },
+        ]
+      }
+      value="img"
+    />
+  </EuiFormRow>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    error={null}
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <ForwardRef
+        onClick={[Function]}
+      >
+        <FormattedMessage
+          defaultMessage="URL template help"
+          id="common.ui.fieldEditor.url.template.helpLinkText"
+          values={Object {}}
+        />
+      </ForwardRef>
+    }
+    isInvalid={false}
+    label={
+      <FormattedMessage
+        defaultMessage="URL template"
+        id="common.ui.fieldEditor.url.urlTemplateLabel"
+        values={Object {}}
+      />
+    }
+    labelType="label"
+  >
+    <EuiFieldText
+      compressed={false}
+      data-test-subj="urlEditorUrlTemplate"
+      fullWidth={false}
+      isLoading={false}
+      onChange={[Function]}
+      value=""
+    />
+  </EuiFormRow>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    error={null}
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <ForwardRef
+        onClick={[Function]}
+      >
+        <FormattedMessage
+          defaultMessage="Label template help"
+          id="common.ui.fieldEditor.url.labelTemplateHelpText"
+          values={Object {}}
+        />
+      </ForwardRef>
+    }
+    isInvalid={false}
+    label={
+      <FormattedMessage
+        defaultMessage="Label template"
+        id="common.ui.fieldEditor.url.labelTemplateLabel"
+        values={Object {}}
+      />
+    }
+    labelType="label"
+  >
+    <EuiFieldText
+      compressed={false}
+      data-test-subj="urlEditorLabelTemplate"
+      fullWidth={false}
+      isLoading={false}
+      onChange={[Function]}
+      value=""
+    />
+  </EuiFormRow>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    label={
+      <FormattedMessage
+        defaultMessage="Width"
+        id="common.ui.fieldEditor.url.widthLabel"
+        values={Object {}}
+      />
+    }
+    labelType="label"
+  >
+    <EuiFieldNumber
+      compressed={false}
+      data-test-subj="urlEditorWidth"
+      fullWidth={false}
+      isLoading={false}
+      onChange={[Function]}
+      value=""
+    />
+  </EuiFormRow>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    label={
+      <FormattedMessage
+        defaultMessage="Height"
+        id="common.ui.fieldEditor.url.heightLabel"
+        values={Object {}}
+      />
+    }
+    labelType="label"
+  >
+    <EuiFieldNumber
+      compressed={false}
+      data-test-subj="urlEditorHeight"
+      fullWidth={false}
+      isLoading={false}
+      onChange={[Function]}
+      value=""
+    />
+  </EuiFormRow>
+  <InjectIntl(FormatEditorSamplesComponent)
+    sampleType="html"
+    samples={
+      Array [
+        Object {
+          "input": "go",
+          "output": "converted url for go",
+        },
+        Object {
+          "input": "stop",
+          "output": "converted url for stop",
+        },
+        Object {
+          "input": Array [
+            "de",
+            "ne",
+            "us",
+            "ni",
+          ],
+          "output": "converted url for de,ne,us,ni",
+        },
+        Object {
+          "input": "cv",
+          "output": "converted url for cv",
+        },
+      ]
+    }
+  />
+</Fragment>
+`;

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 {
     };
   }
 
-  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,
-      });
+  sanitizeNumericValue = (val) => {
+    const sanitizedValue = parseInt(val);
+    if (isNaN(sanitizedValue)) {
+      return '';
     }
+    return sanitizedValue;
+  }
+
+  onTypeChange = (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();
+  });
 });