Elasticsearch: Migrate queryeditor to React (#28033)

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx

@@ -0,0 +1,28 @@
+import { css } from 'emotion';
+import React, { FunctionComponent } from 'react';
+import { IconButton } from './IconButton';
+
+interface Props {
+  index: number;
+  elements: any[];
+  onAdd: () => void;
+  onRemove: () => void;
+}
+
+/**
+ * A component used to show add & remove buttons for mutable lists of values. Wether to show or not the add or the remove buttons
+ * depends on the `index` and `elements` props. This enforces a consistent experience whenever this pattern is used.
+ */
+export const AddRemove: FunctionComponent<Props> = ({ index, onAdd, onRemove, elements }) => {
+  return (
+    <div
+      className={css`
+        display: flex;
+      `}
+    >
+      {index === 0 && <IconButton iconName="plus" onClick={onAdd} label="add" />}
+
+      {elements.length >= 2 && <IconButton iconName="minus" onClick={onRemove} label="remove" />}
+    </div>
+  );
+};