[Graph] EUI-ification of search bar

src/plugins/kibana_react/public/saved_objects/saved_object_finder.test.tsx

@@ -135,7 +135,9 @@ describe('SavedObjectsFinder', () => {
       .find(EuiListGroupItem)
       .first()
       .simulate('click');
-    expect(chooseStub.calledWith('1', 'search', `${doc.attributes.title} (Search)`)).toEqual(true);
+    expect(chooseStub.calledWith('1', 'search', `${doc.attributes.title} (Search)`, doc)).toEqual(
+      true
+    );
   });
 
   describe('sorting', () => {

src/plugins/kibana_react/public/saved_objects/saved_object_finder.tsx

@@ -86,7 +86,8 @@ interface BaseSavedObjectFinder {
   onChoose?: (
     id: SimpleSavedObject<SavedObjectAttributes>['id'],
     type: SimpleSavedObject<SavedObjectAttributes>['type'],
-    name: string
+    name: string,
+    savedObject: SimpleSavedObject<SavedObjectAttributes>
   ) => void;
   noItemsMessage?: React.ReactNode;
   savedObjectMetaData: Array<SavedObjectMetaData<SavedObjectAttributes>>;
@@ -470,7 +471,7 @@ class SavedObjectFinder extends React.Component<SavedObjectFinderProps, SavedObj
                   onClick={
                     onChoose
                       ? () => {
-                          onChoose(item.id, item.type, fullName);
+                          onChoose(item.id, item.type, fullName, item.savedObject);
                         }
                       : undefined
                   }

x-pack/legacy/plugins/graph/public/angular/templates/_graph.scss

@@ -75,7 +75,7 @@
 }
 
 .gphGraph__menus, .gphGraph__bar {
-  margin: $euiSizeM $euiSizeM 0 $euiSizeM;
+  margin: $euiSizeS;
 }
 
 .gphGraph__flexGroup {

x-pack/legacy/plugins/graph/public/angular/templates/index.html

@@ -6,19 +6,19 @@
   <div class="gphGraph__menus" ng-show="menus.showInspect">
     <graph-inspect ng-show="menus.showInspect"></graph-inspect>
   </div>
+
+  <graph-search-bar
+    current-index-pattern="selectedIndex"
+    on-index-pattern-selected="uiSelectIndex"
+    on-query-submit="submit"
+    saved-objects="pluginDependencies.savedObjects"
+    ui-settings="pluginDependencies.uiSettings"
+    is-loading="loading"
+    initial-query="initialQuery"
+  ></graph-search-bar>
 
   <div class="gphGraph__bar">
     <div class="gphGraph__flexGroup">
-      <!-- Select index pattern. -->
-      <select class="form-control gphIndexSelect" name="mySelect" ng-change="uiSelectIndex()" ng-class="{'gphIndexSelect-unselected':selectedIndex === null}"
-        ng-options="option.attributes.title for option in indices" ng-model="grr.proposedIndex">
-        <option
-          value=""
-          i18n-id="xpack.graph.topNavMenu.selectIndexPatternOptionLabel"
-          i18n-default-message="Select index pattern…"
-        ></option>
-      </select>
-
       <!-- Added fields. -->
       <span
         class="gphNoUserSelect"
@@ -53,22 +53,6 @@
           <span aria-hidden="true" class="kuiIcon fa-plus"></span>
         </button>
       </span>
-
-      <!-- Search. -->
-      <form ng-submit="submit()" name="graphBasicSearch" class="gphGraph__flexGroupFiller" style="width: 100%">
-        <div class="kuiLocalSearch">
-          <input name="searchTerm" type="text" class="kuiLocalSearchInput" ng-model="grr.searchTerm" ng-disabled="liveResponseFields.length === 0"
-            ng-focus="kbnTopNav.close()" placeholder="foo AND bar NOT baz" autocomplete="off">
-          <button
-            class="kuiLocalSearchButton"
-            type="submit"
-            ng-disabled="liveResponseFields.length === 0"
-            aria-label="{{ ::'xpack.graph.topNavMenu.searchButtonAriaLabel' | i18n: { defaultMessage: 'Search' } }}"
-          >
-            <span aria-hidden="true" class="kuiIcon fa-search"></span>
-          </button>
-        </div>
-      </form>
     </div>
   </div>
 

x-pack/legacy/plugins/graph/public/angular/templates/inspect.html

@@ -6,7 +6,7 @@
   ></div>
 
   <div
-    class="list-group-item list-group-item--noBorder"
+    class="list-group-item"
     ng-if="(workspace !== null)"
   >
     <small class="help-block">http://host:port/{{ selectedIndex.name }}/_graph/explore</small>

x-pack/legacy/plugins/graph/public/app.js

@@ -41,6 +41,7 @@ import listingTemplate from './angular/templates/listing_ng_wrapper.html';
 import { getReadonlyBadge } from './badge';
 import { FormattedMessage } from '@kbn/i18n/react';
 
+import { SearchBar } from './components/search_bar';
 import { Listing } from './components/listing';
 import { Settings } from './components/settings';
 
@@ -57,8 +58,9 @@ import {
   outlinkEncoders,
 } from './helpers/outlink_encoders';
 import { getEditUrl, getNewPath, getEditPath, setBreadcrumbs, getHomePath } from './services/url';
-import { appStateToSavedWorkspace, savedWorkspaceToAppState, lookupIndexPattern, mapFields } from './services/persistence';
+import { openSourceModal } from './services/source_modal';
 import { openSaveModal } from  './services/save_modal';
+import { appStateToSavedWorkspace, savedWorkspaceToAppState, lookupIndexPattern, mapFields } from './services/persistence';
 import { urlTemplateRegex } from  './helpers/url_template';
 import {
   asAngularSyncedObservable,
@@ -93,6 +95,17 @@ app.directive('graphListing', function (reactDirective) {
   return reactDirective(Listing);
 });
 
+app.directive('graphSearchBar', function (reactDirective) {
+  return reactDirective(SearchBar, [
+    ['currentIndexPattern', { watchDepth: 'reference' }],
+    ['isLoading', { watchDepth: 'reference' }],
+    ['onIndexPatternSelected', { watchDepth: 'reference' }],
+    ['onQuerySubmit', { watchDepth: 'reference' }],
+    ['savedObjects', { watchDepth: 'reference' }],
+    ['uiSettings', { watchDepth: 'reference' }]
+  ]);
+});
+
 if (uiRoutes.enable) {
   uiRoutes.enable();
 }
@@ -240,6 +253,10 @@ app.controller('graphuiPlugin', function (
   $scope.allSavingDisabled = $scope.graphSavePolicy === 'none';
   $scope.searchTerm = '';
 
+  $scope.pluginDependencies = npStart.core;
+
+  $scope.loading = false;
+
   //So scope properties can be used consistently with ng-model
   $scope.grr = $scope;
 
@@ -365,11 +382,9 @@ app.controller('graphuiPlugin', function (
     }), confirmModalOptions);
   }
 
-  $scope.uiSelectIndex = function () {
+  $scope.uiSelectIndex = function (proposedIndex) {
     canWipeWorkspace(function () {
-      $scope.indexSelected($scope.proposedIndex);
-    }, function () {
-      $scope.proposedIndex = $scope.selectedIndex;
+      $scope.indexSelected(proposedIndex);
     });
   };
 
@@ -410,6 +425,7 @@ app.controller('graphuiPlugin', function (
       index: indexName,
       query: query
     };
+    $scope.loading = true;
     return $http.post('../api/graph/graphExplore', request)
       .then(function (resp) {
         if (resp.data.resp.timed_out) {
@@ -421,7 +437,10 @@ app.controller('graphuiPlugin', function (
         }
         responseHandler(resp.data.resp);
       })
-      .catch(handleHttpError);
+      .catch(handleHttpError)
+      .finally(() => {
+        $scope.loading = false;
+      });
   }
 
 
@@ -431,20 +450,24 @@ app.controller('graphuiPlugin', function (
       index: indexName,
       body: query
     };
+    $scope.loading = true;
     $http.post('../api/graph/searchProxy', request)
       .then(function (resp) {
         responseHandler(resp.data.resp);
       })
-      .catch(handleHttpError);
+      .catch(handleHttpError)
+      .finally(() => {
+        $scope.loading = false;
+      });
   };
 
-  $scope.submit = function () {
+  $scope.submit = function (searchTerm) {
     $scope.hideAllConfigPanels();
     initWorkspaceIfRequired();
     const numHops = 2;
-    if ($scope.searchTerm.startsWith('{')) {
+    if (searchTerm.startsWith('{')) {
       try {
-        const query = JSON.parse($scope.searchTerm);
+        const query = JSON.parse(searchTerm);
         if (query.vertices) {
           // Is a graph explore request
           $scope.workspace.callElasticsearch(query);
@@ -458,7 +481,7 @@ app.controller('graphuiPlugin', function (
       }
       return;
     }
-    $scope.workspace.simpleSearch($scope.searchTerm, $scope.liveResponseFields, numHops);
+    $scope.workspace.simpleSearch(searchTerm, $scope.liveResponseFields, numHops);
   };
 
   $scope.clearWorkspace = function () {
@@ -629,9 +652,6 @@ app.controller('graphuiPlugin', function (
     }
   }
 
-  $scope.indices = $route.current.locals.indexPatterns.filter(indexPattern => !indexPattern.attributes.type);
-
-
   $scope.setDetail = function (data) {
     $scope.detail = data;
   };
@@ -703,7 +723,7 @@ app.controller('graphuiPlugin', function (
   const managementUrl = npStart.core.chrome.navLinks.get('kibana:management').url;
   const url = `${managementUrl}/kibana/index_patterns`;
 
-  if ($scope.indices.length === 0) {
+  if ($route.current.locals.indexPatterns.length === 0) {
     toastNotifications.addWarning({
       title: i18n.translate('xpack.graph.noDataSourceNotificationMessageTitle', {
         defaultMessage: 'No data source',
@@ -745,7 +765,9 @@ app.controller('graphuiPlugin', function (
     }),
     run: function () {
       canWipeWorkspace(function () {
-        kbnUrl.change('/workspace/', {});
+        $scope.$evalAsync(() => {
+          kbnUrl.change('/workspace/', {});
+        });
       });  },
     testId: 'graphNewButton',
   });
@@ -865,7 +887,7 @@ app.controller('graphuiPlugin', function (
   // Deal with situation of request to open saved workspace
   if ($route.current.locals.savedWorkspace) {
     $scope.savedWorkspace = $route.current.locals.savedWorkspace;
-    const selectedIndex = lookupIndexPattern($scope.savedWorkspace, $scope.indices);
+    const selectedIndex = lookupIndexPattern($scope.savedWorkspace, $route.current.locals.indexPatterns);
     if(!selectedIndex) {
       toastNotifications.addDanger(
         i18n.translate('xpack.graph.loadWorkspace.missingIndexPatternErrorMessage', {
@@ -899,13 +921,16 @@ app.controller('graphuiPlugin', function (
       }
       // Allow URLs to include a user-defined text query
       if ($route.current.params.query) {
-        $scope.searchTerm = $route.current.params.query;
-        $scope.submit();
+        $scope.initialQuery = $route.current.params.query;
+        $scope.submit($route.current.params.query);
       }
     });
   } else {
     $route.current.locals.SavedWorkspacesProvider.get().then(function (newWorkspace) {
       $scope.savedWorkspace = newWorkspace;
+      openSourceModal(npStart.core, indexPattern => {
+        $scope.indexSelected(indexPattern);
+      });
     });
   }
 

x-pack/legacy/plugins/graph/public/components/_index.scss

@@ -1 +1,2 @@
+@import './search_bar';
 @import './settings/index';

x-pack/legacy/plugins/graph/public/components/_search_bar.scss

@@ -0,0 +1,12 @@
+.gphSearchBar {
+  padding: 0 $euiSizeS;
+}
+
+.gphSearchBar__datasourceButton {
+  height: 100% !important;
+  border: none;
+}
+
+.gphSearchBar__datasourceButtonTooltip {
+  padding: 0;
+}

x-pack/legacy/plugins/graph/public/components/search_bar.test.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { SearchBar } from './search_bar';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import React, { ReactElement } from 'react';
+import { CoreStart } from 'src/core/public';
+import { IndexPatternSavedObject } from '../types';
+import { act } from 'react-dom/test-utils';
+import { EuiFieldText } from '@elastic/eui';
+
+describe('search_bar', () => {
+  it('should render search bar and submit queryies', () => {
+    const querySubmit = jest.fn();
+    const instance = shallowWithIntl(
+      <SearchBar
+        isLoading={false}
+        onIndexPatternSelected={() => {}}
+        onQuerySubmit={querySubmit}
+        savedObjects={{} as CoreStart['savedObjects']}
+        uiSettings={{} as CoreStart['uiSettings']}
+        currentIndexPattern={{ attributes: { title: 'Testpattern' } } as IndexPatternSavedObject}
+      />
+    );
+    act(() => {
+      instance.find(EuiFieldText).simulate('change', { target: { value: 'testQuery' } });
+    });
+
+    act(() => {
+      instance.find('form').simulate('submit', { preventDefault: () => {} });
+    });
+
+    expect(querySubmit).toHaveBeenCalledWith('testQuery');
+  });
+
+  it('should render index pattern picker', () => {
+    const indexPatternSelected = jest.fn();
+    const instance = shallowWithIntl(
+      <SearchBar
+        isLoading={false}
+        onIndexPatternSelected={indexPatternSelected}
+        onQuerySubmit={() => {}}
+        savedObjects={{} as CoreStart['savedObjects']}
+        uiSettings={{} as CoreStart['uiSettings']}
+        currentIndexPattern={{ attributes: { title: 'Testpattern' } } as IndexPatternSavedObject}
+      />
+    );
+
+    const newIndexpattern = {} as IndexPatternSavedObject;
+
+    // pick the SourcePicker component out of the tree because
+    // it's part of a popover and thus not covered by enzyme
+    (instance
+      .find(EuiFieldText)
+      .prop('prepend') as ReactElement).props.children.props.onIndexPatternSelected(
+      newIndexpattern
+    );
+
+    expect(indexPatternSelected).toHaveBeenCalledWith(newIndexpattern);
+  });
+});