[Vis Editor] EUIfication of agg and agg-group directives

package.json

@@ -150,7 +150,6 @@
     "d3": "3.5.17",
     "d3-cloud": "1.2.5",
     "del": "^4.0.0",
-    "dragula": "3.7.2",
     "elasticsearch": "^16.2.0",
     "elasticsearch-browser": "^16.2.0",
     "encode-uri-query": "1.0.1",

src/legacy/core_plugins/kibana/public/management/_hacks.scss

@@ -23,21 +23,6 @@ kbn-management-objects-view {
   .ace_editor { height: 300px; }
 }
 
-// SASSTODO: These are some dragula settings.
-.gu-handle {
-  cursor: move;
-  cursor: grab;
-  cursor: -moz-grab;
-  cursor: -webkit-grab;
-}
-
-.gu-mirror,
-.gu-mirror .gu-handle {
-  cursor: grabbing;
-  cursor: -moz-grabbing;
-  cursor: -webkit-grabbing;
-}
-
 // Hack because the management wrapper is flat HTML and needs a class
 .mgtPage__body {
   max-width: map-get($euiBreakpoints, 'xl');

src/legacy/ui/public/agg_types/controls/date_ranges.tsx

@@ -30,6 +30,7 @@ import {
   EuiLink,
   EuiSpacer,
   EuiText,
+  EuiFormRow,
 } from '@elastic/eui';
 import dateMath from '@elastic/datemath';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -110,96 +111,99 @@ function DateRangesParamEditor({
     );
 
   return (
-    <>
-      <EuiText size="xs">
-        <EuiLink href={getDocLink('date.dateMath')} target="_blank" rel="noopener">
-          <FormattedMessage
-            id="common.ui.aggTypes.dateRanges.acceptedDateFormatsLinkText"
-            defaultMessage="Acceptable date formats"
-          />
-        </EuiLink>
-      </EuiText>
-      <EuiSpacer size="s" />
-
-      {ranges.map(({ from, to, id }) => {
-        const deleteBtnTitle = i18n.translate(
-          'common.ui.aggTypes.dateRanges.removeRangeButtonAriaLabel',
-          {
-            defaultMessage: 'Remove the range of {from} to {to}',
-            values: { from: from || FROM_PLACEHOLDER, to: to || TO_PLACEHOLDER },
-          }
-        );
-        const areBothEmpty = !from && !to;
-
-        return (
-          <Fragment key={id}>
-            <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
-              <EuiFlexItem>
-                <EuiFieldText
-                  aria-label={i18n.translate('common.ui.aggTypes.dateRanges.fromColumnLabel', {
-                    defaultMessage: 'From',
-                    description: 'Beginning of a date range, e.g. *From* 2018-02-26 To 2018-02-28',
-                  })}
-                  compressed
-                  fullWidth={true}
-                  isInvalid={areBothEmpty || !validateDateMath(from)}
-                  placeholder={FROM_PLACEHOLDER}
-                  value={from || ''}
-                  onChange={ev => onChangeRange(id, 'from', ev.target.value)}
-                />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiIcon type="sortRight" color="subdued" />
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiFieldText
-                  aria-label={i18n.translate('common.ui.aggTypes.dateRanges.toColumnLabel', {
-                    defaultMessage: 'To',
-                    description: 'End of a date range, e.g. From 2018-02-26 *To* 2018-02-28',
-                  })}
-                  compressed
-                  fullWidth={true}
-                  isInvalid={areBothEmpty || !validateDateMath(to)}
-                  placeholder={TO_PLACEHOLDER}
-                  value={to || ''}
-                  onChange={ev => onChangeRange(id, 'to', ev.target.value)}
-                />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiButtonIcon
-                  title={deleteBtnTitle}
-                  aria-label={deleteBtnTitle}
-                  disabled={value.length === 1}
-                  color="danger"
-                  iconType="trash"
-                  onClick={() => onRemoveRange(id)}
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-            <EuiSpacer size="xs" />
-          </Fragment>
-        );
-      })}
-
-      {hasInvalidRange && (
-        <EuiFormErrorText>
-          <FormattedMessage
-            id="common.ui.aggTypes.dateRanges.errorMessage"
-            defaultMessage="Each range should have at least one valid date."
-          />
-        </EuiFormErrorText>
-      )}
-
-      <EuiSpacer size="s" />
-      <EuiFlexItem>
-        <EuiButtonEmpty iconType="plusInCircleFilled" onClick={onAddRange} size="xs">
-          <FormattedMessage
-            id="common.ui.aggTypes.dateRanges.addRangeButtonLabel"
-            defaultMessage="Add range"
-          />
-        </EuiButtonEmpty>
-      </EuiFlexItem>
-    </>
+    <EuiFormRow compressed>
+      <>
+        <EuiText size="xs">
+          <EuiLink href={getDocLink('date.dateMath')} target="_blank" rel="noopener">
+            <FormattedMessage
+              id="common.ui.aggTypes.dateRanges.acceptedDateFormatsLinkText"
+              defaultMessage="Acceptable date formats"
+            />
+          </EuiLink>
+        </EuiText>
+        <EuiSpacer size="s" />
+
+        {ranges.map(({ from, to, id }) => {
+          const deleteBtnTitle = i18n.translate(
+            'common.ui.aggTypes.dateRanges.removeRangeButtonAriaLabel',
+            {
+              defaultMessage: 'Remove the range of {from} to {to}',
+              values: { from: from || FROM_PLACEHOLDER, to: to || TO_PLACEHOLDER },
+            }
+          );
+          const areBothEmpty = !from && !to;
+
+          return (
+            <Fragment key={id}>
+              <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+                <EuiFlexItem>
+                  <EuiFieldText
+                    aria-label={i18n.translate('common.ui.aggTypes.dateRanges.fromColumnLabel', {
+                      defaultMessage: 'From',
+                      description:
+                        'Beginning of a date range, e.g. *From* 2018-02-26 To 2018-02-28',
+                    })}
+                    compressed
+                    fullWidth={true}
+                    isInvalid={areBothEmpty || !validateDateMath(from)}
+                    placeholder={FROM_PLACEHOLDER}
+                    value={from || ''}
+                    onChange={ev => onChangeRange(id, 'from', ev.target.value)}
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiIcon type="sortRight" color="subdued" />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiFieldText
+                    aria-label={i18n.translate('common.ui.aggTypes.dateRanges.toColumnLabel', {
+                      defaultMessage: 'To',
+                      description: 'End of a date range, e.g. From 2018-02-26 *To* 2018-02-28',
+                    })}
+                    compressed
+                    fullWidth={true}
+                    isInvalid={areBothEmpty || !validateDateMath(to)}
+                    placeholder={TO_PLACEHOLDER}
+                    value={to || ''}
+                    onChange={ev => onChangeRange(id, 'to', ev.target.value)}
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiButtonIcon
+                    title={deleteBtnTitle}
+                    aria-label={deleteBtnTitle}
+                    disabled={value.length === 1}
+                    color="danger"
+                    iconType="trash"
+                    onClick={() => onRemoveRange(id)}
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+              <EuiSpacer size="xs" />
+            </Fragment>
+          );
+        })}
+
+        {hasInvalidRange && (
+          <EuiFormErrorText>
+            <FormattedMessage
+              id="common.ui.aggTypes.dateRanges.errorMessage"
+              defaultMessage="Each range should have at least one valid date."
+            />
+          </EuiFormErrorText>
+        )}
+
+        <EuiSpacer size="s" />
+        <EuiFlexItem>
+          <EuiButtonEmpty iconType="plusInCircleFilled" onClick={onAddRange} size="xs">
+            <FormattedMessage
+              id="common.ui.aggTypes.dateRanges.addRangeButtonLabel"
+              defaultMessage="Add range"
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      </>
+    </EuiFormRow>
   );
 }
 

src/legacy/ui/public/agg_types/controls/ranges.tsx

@@ -27,6 +27,7 @@ import {
   EuiIcon,
   EuiSpacer,
   EuiButtonEmpty,
+  EuiFormRow,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
@@ -88,75 +89,77 @@ function RangesParamEditor({ agg, value = [], setValue }: AggParamEditorProps<Ra
     );
 
   return (
-    <>
-      {ranges.map(({ from, to, id }) => {
-        const deleteBtnTitle = i18n.translate(
-          'common.ui.aggTypes.ranges.removeRangeButtonAriaLabel',
-          {
-            defaultMessage: 'Remove the range of {from} to {to}',
-            values: {
-              from: isEmpty(from) ? FROM_PLACEHOLDER : from,
-              to: isEmpty(to) ? TO_PLACEHOLDER : to,
-            },
-          }
-        );
+    <EuiFormRow compressed>
+      <>
+        {ranges.map(({ from, to, id }) => {
+          const deleteBtnTitle = i18n.translate(
+            'common.ui.aggTypes.ranges.removeRangeButtonAriaLabel',
+            {
+              defaultMessage: 'Remove the range of {from} to {to}',
+              values: {
+                from: isEmpty(from) ? FROM_PLACEHOLDER : from,
+                to: isEmpty(to) ? TO_PLACEHOLDER : to,
+              },
+            }
+          );
 
-        return (
-          <Fragment key={id}>
-            <EuiFlexGroup gutterSize="s" alignItems="center">
-              <EuiFlexItem>
-                <EuiFieldNumber
-                  aria-label={i18n.translate('common.ui.aggTypes.ranges.fromLabel', {
-                    defaultMessage: 'From',
-                  })}
-                  value={isEmpty(from) ? '' : from}
-                  placeholder={FROM_PLACEHOLDER}
-                  onChange={ev => onChangeRange(id, 'from', ev.target.value)}
-                  fullWidth={true}
-                  compressed={true}
-                />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiIcon type="sortRight" color="subdued" />
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiFieldNumber
-                  aria-label={i18n.translate('common.ui.aggTypes.ranges.toLabel', {
-                    defaultMessage: 'To',
-                  })}
-                  value={isEmpty(to) ? '' : to}
-                  placeholder={TO_PLACEHOLDER}
-                  onChange={ev => onChangeRange(id, 'to', ev.target.value)}
-                  fullWidth={true}
-                  compressed={true}
-                />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiButtonIcon
-                  title={deleteBtnTitle}
-                  aria-label={deleteBtnTitle}
-                  disabled={value.length === 1}
-                  color="danger"
-                  iconType="trash"
-                  onClick={() => onRemoveRange(id)}
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-            <EuiSpacer size="xs" />
-          </Fragment>
-        );
-      })}
+          return (
+            <Fragment key={id}>
+              <EuiFlexGroup gutterSize="s" alignItems="center">
+                <EuiFlexItem>
+                  <EuiFieldNumber
+                    aria-label={i18n.translate('common.ui.aggTypes.ranges.fromLabel', {
+                      defaultMessage: 'From',
+                    })}
+                    value={isEmpty(from) ? '' : from}
+                    placeholder={FROM_PLACEHOLDER}
+                    onChange={ev => onChangeRange(id, 'from', ev.target.value)}
+                    fullWidth={true}
+                    compressed={true}
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiIcon type="sortRight" color="subdued" />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiFieldNumber
+                    aria-label={i18n.translate('common.ui.aggTypes.ranges.toLabel', {
+                      defaultMessage: 'To',
+                    })}
+                    value={isEmpty(to) ? '' : to}
+                    placeholder={TO_PLACEHOLDER}
+                    onChange={ev => onChangeRange(id, 'to', ev.target.value)}
+                    fullWidth={true}
+                    compressed={true}
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiButtonIcon
+                    title={deleteBtnTitle}
+                    aria-label={deleteBtnTitle}
+                    disabled={value.length === 1}
+                    color="danger"
+                    iconType="trash"
+                    onClick={() => onRemoveRange(id)}
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+              <EuiSpacer size="xs" />
+            </Fragment>
+          );
+        })}
 
-      <EuiSpacer size="s" />
-      <EuiFlexItem>
-        <EuiButtonEmpty iconType="plusInCircleFilled" onClick={onAddRange} size="xs">
-          <FormattedMessage
-            id="common.ui.aggTypes.ranges.addRangeButtonLabel"
-            defaultMessage="Add range"
-          />
-        </EuiButtonEmpty>
-      </EuiFlexItem>
-    </>
+        <EuiSpacer size="s" />
+        <EuiFlexItem>
+          <EuiButtonEmpty iconType="plusInCircleFilled" onClick={onAddRange} size="xs">
+            <FormattedMessage
+              id="common.ui.aggTypes.ranges.addRangeButtonLabel"
+              defaultMessage="Add range"
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      </>
+    </EuiFormRow>
   );
 }
 

src/legacy/ui/public/vis/agg_configs.d.ts

@@ -17,4 +17,11 @@
  * under the License.
  */
 
-export type AggConfigs = any;
+import { IndexedArray } from '../indexed_array';
+import { AggConfig } from './agg_config';
+
+export interface AggConfigs extends IndexedArray<AggConfig> {
+  bySchemaGroup: {
+    [key: string]: AggConfig[];
+  };
+}