Move filter bar and apply filters to data plugin

src/legacy/ui/public/apply_filters/apply_filters_popover.tsx → src/legacy/core_plugins/data/public/filter/apply_filters/apply_filters_popover.tsx

@@ -82,7 +82,7 @@ export class ApplyFiltersPopover extends Component<Props, State> {
           <EuiModalHeader>
             <EuiModalHeaderTitle>
               <FormattedMessage
-                id="common.ui.applyFilters.popupHeader"
+                id="data.filter.applyFilters.popupHeader"
                 defaultMessage="Select filters to apply"
               />
             </EuiModalHeaderTitle>
@@ -93,13 +93,13 @@ export class ApplyFiltersPopover extends Component<Props, State> {
           <EuiModalFooter>
             <EuiButtonEmpty onClick={this.props.onCancel}>
               <FormattedMessage
-                id="common.ui.applyFiltersPopup.cancelButtonLabel"
+                id="data.filter.applyFiltersPopup.cancelButtonLabel"
                 defaultMessage="Cancel"
               />
             </EuiButtonEmpty>
             <EuiButton onClick={this.onSubmit} fill>
               <FormattedMessage
-                id="common.ui.applyFiltersPopup.saveButtonLabel"
+                id="data.filter.applyFiltersPopup.saveButtonLabel"
                 defaultMessage="Apply"
               />
             </EuiButton>

src/legacy/core_plugins/data/public/filter/apply_filters/directive.js

@@ -0,0 +1,60 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import 'ngreact';
+import { uiModules } from 'ui/modules';
+import template from './directive.html';
+import { ApplyFiltersPopover } from './apply_filters_popover';
+import { mapAndFlattenFilters } from 'ui/filter_manager/lib/map_and_flatten_filters';
+import { wrapInI18nContext } from 'ui/i18n';
+
+const app = uiModules.get('app/data', ['react']);
+
+export function setupDirective() {
+  app.directive('applyFiltersPopoverComponent', (reactDirective) => {
+    return reactDirective(wrapInI18nContext(ApplyFiltersPopover));
+  });
+
+  app.directive('applyFiltersPopover', (indexPatterns) => {
+    return {
+      template,
+      restrict: 'E',
+      scope: {
+        filters: '=',
+        onCancel: '=',
+        onSubmit: '=',
+      },
+      link: function ($scope) {
+        $scope.state = {};
+
+        // Each time the new filters change we want to rebuild (not just re-render) the "apply filters"
+        // popover, because it has to reset its state whenever the new filters change. Setting a `key`
+        // property on the component accomplishes this due to how React handles the `key` property.
+        $scope.$watch('filters', filters => {
+          mapAndFlattenFilters(indexPatterns, filters).then(mappedFilters => {
+            $scope.state = {
+              filters: mappedFilters,
+              key: Date.now(),
+            };
+          });
+        });
+      }
+    };
+  });
+}

src/legacy/ui/public/apply_filters/index.ts → src/legacy/core_plugins/data/public/filter/apply_filters/index.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 
-import './directive';
-
 export { ApplyFiltersPopover } from './apply_filters_popover';
+
+// @ts-ignore
+export { setupDirective } from './directive';

src/legacy/ui/public/filter_bar/directive.js → src/legacy/core_plugins/data/public/filter/filter_bar/directive.js

@@ -19,11 +19,13 @@
 
 import 'ngreact';
 import { wrapInI18nContext } from 'ui/i18n';
-import { uiModules } from '../modules';
+import { uiModules } from 'ui/modules';
 import { FilterBar } from './filter_bar';
 
 const app = uiModules.get('app/kibana', ['react']);
 
-app.directive('filterBar', reactDirective => {
-  return reactDirective(wrapInI18nContext(FilterBar));
-});
+export function setupDirective() {
+  app.directive('filterBar', reactDirective => {
+    return reactDirective(wrapInI18nContext(FilterBar));
+  });
+}

src/legacy/ui/public/filter_bar/filter_bar.tsx → src/legacy/core_plugins/data/public/filter/filter_bar/filter_bar.tsx

@@ -118,7 +118,7 @@ class FilterBarUI extends Component<Props, State> {
       <EuiButtonEmpty size="xs" onClick={this.onOpenAddFilterPopover} data-test-subj="addFilter">
         +{' '}
         <FormattedMessage
-          id="common.ui.filterBar.addFilterButtonLabel"
+          id="data.filter.filterBar.addFilterButtonLabel"
           defaultMessage="Add filter"
         />
       </EuiButtonEmpty>

src/legacy/ui/public/filter_bar/filter_editor/index.tsx → src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/index.tsx

@@ -95,20 +95,20 @@ class FilterEditorUI extends Component<Props, State> {
           <EuiFlexGroup alignItems="baseline">
             <EuiFlexItem>
               <FormattedMessage
-                id="common.ui.filterEditor.editFilterPopupTitle"
+                id="data.filter.filterEditor.editFilterPopupTitle"
                 defaultMessage="Edit filter"
               />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiButtonEmpty size="xs" onClick={this.toggleCustomEditor}>
                 {this.state.isCustomEditorOpen ? (
                   <FormattedMessage
-                    id="common.ui.filterEditor.editFilterValuesButtonLabel"
+                    id="data.filter.filterEditor.editFilterValuesButtonLabel"
                     defaultMessage="Edit filter values"
                   />
                 ) : (
                   <FormattedMessage
-                    id="common.ui.filterEditor.editQueryDslButtonLabel"
+                    id="data.filter.filterEditor.editQueryDslButtonLabel"
                     defaultMessage="Edit as Query DSL"
                   />
                 )}
@@ -128,7 +128,7 @@ class FilterEditorUI extends Component<Props, State> {
             <EuiSwitch
               id="filterEditorCustomLabelSwitch"
               label={this.props.intl.formatMessage({
-                id: 'common.ui.filterEditor.createCustomLabelSwitchLabel',
+                id: 'data.filter.filterEditor.createCustomLabelSwitchLabel',
                 defaultMessage: 'Create custom label?',
               })}
               checked={this.state.useCustomLabel}
@@ -140,7 +140,7 @@ class FilterEditorUI extends Component<Props, State> {
                 <EuiSpacer size="m" />
                 <EuiFormRow
                   label={this.props.intl.formatMessage({
-                    id: 'common.ui.filterEditor.createCustomLabelInputLabel',
+                    id: 'data.filter.filterEditor.createCustomLabelInputLabel',
                     defaultMessage: 'Custom label',
                   })}
                 >
@@ -163,7 +163,7 @@ class FilterEditorUI extends Component<Props, State> {
                   data-test-subj="saveFilter"
                 >
                   <FormattedMessage
-                    id="common.ui.filterEditor.saveButtonLabel"
+                    id="data.filter.filterEditor.saveButtonLabel"
                     defaultMessage="Save"
                   />
                 </EuiButton>
@@ -175,7 +175,7 @@ class FilterEditorUI extends Component<Props, State> {
                   data-test-subj="cancelSaveFilter"
                 >
                   <FormattedMessage
-                    id="common.ui.filterEditor.cancelButtonLabel"
+                    id="data.filter.filterEditor.cancelButtonLabel"
                     defaultMessage="Cancel"
                   />
                 </EuiButtonEmpty>
@@ -198,13 +198,13 @@ class FilterEditorUI extends Component<Props, State> {
         <EuiFlexItem>
           <EuiFormRow
             label={this.props.intl.formatMessage({
-              id: 'common.ui.filterEditor.indexPatternSelectLabel',
+              id: 'data.filter.filterEditor.indexPatternSelectLabel',
               defaultMessage: 'Index Pattern',
             })}
           >
             <IndexPatternComboBox
               placeholder={this.props.intl.formatMessage({
-                id: 'common.ui.filterBar.indexPatternSelectPlaceholder',
+                id: 'data.filter.filterBar.indexPatternSelectPlaceholder',
                 defaultMessage: 'Select an index pattern',
               })}
               options={this.props.indexPatterns}
@@ -240,15 +240,15 @@ class FilterEditorUI extends Component<Props, State> {
     return (
       <EuiFormRow
         label={this.props.intl.formatMessage({
-          id: 'common.ui.filterEditor.fieldSelectLabel',
+          id: 'data.filter.filterEditor.fieldSelectLabel',
           defaultMessage: 'Field',
         })}
       >
         <FieldComboBox
           id="fieldInput"
           isDisabled={!selectedIndexPattern}
           placeholder={this.props.intl.formatMessage({
-            id: 'common.ui.filterEditor.fieldSelectPlaceholder',
+            id: 'data.filter.filterEditor.fieldSelectPlaceholder',
             defaultMessage: 'Select a field',
           })}
           options={fields}
@@ -269,14 +269,14 @@ class FilterEditorUI extends Component<Props, State> {
     return (
       <EuiFormRow
         label={this.props.intl.formatMessage({
-          id: 'common.ui.filterEditor.operatorSelectLabel',
+          id: 'data.filter.filterEditor.operatorSelectLabel',
           defaultMessage: 'Operator',
         })}
       >
         <OperatorComboBox
           isDisabled={!selectedField}
           placeholder={this.props.intl.formatMessage({
-            id: 'common.ui.filterEditor.operatorSelectPlaceholder',
+            id: 'data.filter.filterEditor.operatorSelectPlaceholder',
             defaultMessage: 'Select an operator',
           })}
           options={operators}

src/legacy/ui/public/filter_bar/filter_editor/lib/filter_operators.ts → src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/filter_operators.ts

@@ -27,23 +27,23 @@ export interface Operator {
 }
 
 export const isOperator = {
-  message: i18n.translate('common.ui.filterEditor.isOperatorOptionLabel', {
+  message: i18n.translate('data.filter.filterEditor.isOperatorOptionLabel', {
     defaultMessage: 'is',
   }),
   type: 'phrase',
   negate: false,
 };
 
 export const isNotOperator = {
-  message: i18n.translate('common.ui.filterEditor.isNotOperatorOptionLabel', {
+  message: i18n.translate('data.filter.filterEditor.isNotOperatorOptionLabel', {
     defaultMessage: 'is not',
   }),
   type: 'phrase',
   negate: true,
 };
 
 export const isOneOfOperator = {
-  message: i18n.translate('common.ui.filterEditor.isOneOfOperatorOptionLabel', {
+  message: i18n.translate('data.filter.filterEditor.isOneOfOperatorOptionLabel', {
     defaultMessage: 'is one of',
   }),
   type: 'phrases',
@@ -52,7 +52,7 @@ export const isOneOfOperator = {
 };
 
 export const isNotOneOfOperator = {
-  message: i18n.translate('common.ui.filterEditor.isNotOneOfOperatorOptionLabel', {
+  message: i18n.translate('data.filter.filterEditor.isNotOneOfOperatorOptionLabel', {
     defaultMessage: 'is not one of',
   }),
   type: 'phrases',
@@ -61,7 +61,7 @@ export const isNotOneOfOperator = {
 };
 
 export const isBetweenOperator = {
-  message: i18n.translate('common.ui.filterEditor.isBetweenOperatorOptionLabel', {
+  message: i18n.translate('data.filter.filterEditor.isBetweenOperatorOptionLabel', {
     defaultMessage: 'is between',
   }),
   type: 'range',
@@ -70,7 +70,7 @@ export const isBetweenOperator = {
 };
 
 export const isNotBetweenOperator = {
-  message: i18n.translate('common.ui.filterEditor.isNotBetweenOperatorOptionLabel', {
+  message: i18n.translate('data.filter.filterEditor.isNotBetweenOperatorOptionLabel', {
     defaultMessage: 'is not between',
   }),
   type: 'range',
@@ -79,15 +79,15 @@ export const isNotBetweenOperator = {
 };
 
 export const existsOperator = {
-  message: i18n.translate('common.ui.filterEditor.existsOperatorOptionLabel', {
+  message: i18n.translate('data.filter.filterEditor.existsOperatorOptionLabel', {
     defaultMessage: 'exists',
   }),
   type: 'exists',
   negate: false,
 };
 
 export const doesNotExistOperator = {
-  message: i18n.translate('common.ui.filterEditor.doesNotExistOperatorOptionLabel', {
+  message: i18n.translate('data.filter.filterEditor.doesNotExistOperatorOptionLabel', {
     defaultMessage: 'does not exist',
   }),
   type: 'exists',

src/legacy/ui/public/filter_bar/filter_editor/phrase_value_input.tsx → src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/phrase_value_input.tsx

@@ -36,7 +36,7 @@ class PhraseValueInputUI extends PhraseSuggestor<Props> {
     return (
       <EuiFormRow
         label={this.props.intl.formatMessage({
-          id: 'common.ui.filterEditor.valueInputLabel',
+          id: 'data.filter.filterEditor.valueInputLabel',
           defaultMessage: 'Value',
         })}
       >
@@ -45,7 +45,7 @@ class PhraseValueInputUI extends PhraseSuggestor<Props> {
         ) : (
           <ValueInputType
             placeholder={this.props.intl.formatMessage({
-              id: 'common.ui.filterEditor.valueInputPlaceholder',
+              id: 'data.filter.filterEditor.valueInputPlaceholder',
               defaultMessage: 'Enter a value',
             })}
             value={this.props.value}
@@ -64,7 +64,7 @@ class PhraseValueInputUI extends PhraseSuggestor<Props> {
     return (
       <StringComboBox
         placeholder={intl.formatMessage({
-          id: 'common.ui.filterEditor.valueSelectPlaceholder',
+          id: 'data.filter.filterEditor.valueSelectPlaceholder',
           defaultMessage: 'Select a value',
         })}
         options={options}

src/legacy/ui/public/filter_bar/filter_editor/phrases_values_input.tsx → src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/phrases_values_input.tsx

@@ -38,13 +38,13 @@ class PhrasesValuesInputUI extends PhraseSuggestor<Props> {
     return (
       <EuiFormRow
         label={intl.formatMessage({
-          id: 'common.ui.filterEditor.valuesSelectLabel',
+          id: 'data.filter.filterEditor.valuesSelectLabel',
           defaultMessage: 'Values',
         })}
       >
         <StringComboBox
           placeholder={intl.formatMessage({
-            id: 'common.ui.filterEditor.valuesSelectPlaceholder',
+            id: 'data.filter.filterEditor.valuesSelectPlaceholder',
             defaultMessage: 'Select values',
           })}
           options={options}

src/legacy/ui/public/filter_bar/filter_editor/range_value_input.tsx → src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/range_value_input.tsx

@@ -54,7 +54,7 @@ class RangeValueInputUI extends Component<Props> {
           <EuiFlexItem>
             <EuiFormRow
               label={this.props.intl.formatMessage({
-                id: 'common.ui.filterEditor.rangeStartInputLabel',
+                id: 'data.filter.filterEditor.rangeStartInputLabel',
                 defaultMessage: 'From',
               })}
             >
@@ -63,7 +63,7 @@ class RangeValueInputUI extends Component<Props> {
                 value={this.props.value ? this.props.value.from : undefined}
                 onChange={this.onFromChange}
                 placeholder={this.props.intl.formatMessage({
-                  id: 'common.ui.filterEditor.rangeStartInputPlaceholder',
+                  id: 'data.filter.filterEditor.rangeStartInputPlaceholder',
                   defaultMessage: 'Start of the range',
                 })}
               />
@@ -72,7 +72,7 @@ class RangeValueInputUI extends Component<Props> {
           <EuiFlexItem>
             <EuiFormRow
               label={this.props.intl.formatMessage({
-                id: 'common.ui.filterEditor.rangeEndInputLabel',
+                id: 'data.filter.filterEditor.rangeEndInputLabel',
                 defaultMessage: 'To',
               })}
             >
@@ -81,7 +81,7 @@ class RangeValueInputUI extends Component<Props> {
                 value={this.props.value ? this.props.value.to : undefined}
                 onChange={this.onToChange}
                 placeholder={this.props.intl.formatMessage({
-                  id: 'common.ui.filterEditor.rangeEndInputPlaceholder',
+                  id: 'data.filter.filterEditor.rangeEndInputPlaceholder',
                   defaultMessage: 'End of the range',
                 })}
               />
@@ -91,7 +91,7 @@ class RangeValueInputUI extends Component<Props> {
         {type === 'date' ? (
           <EuiLink target="_blank" href={getDocLink('date.dateMath')}>
             <FormattedMessage
-              id="common.ui.filterEditor.dateFormatHelpLinkLabel"
+              id="data.filter.filterEditor.dateFormatHelpLinkLabel"
               defaultMessage="Accepted date formats"
             />{' '}
             <EuiIcon type="link" />