[Discover] Deangularize navbar in context app (#86353)

* [Discover] Deangualrize navbar in context

* Remove directive

* Updating a unit test

* Updating a unit test

* Add cleanup in FilterItem component

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/data/public/ui/filter_bar/filter_item.tsx

@@ -71,19 +71,27 @@ export function FilterItem(props: Props) {
 
   useEffect(() => {
     const index = props.filter.meta.index;
+    let isSubscribed = true;
     if (index) {
       getIndexPatterns()
         .get(index)
         .then((indexPattern) => {
-          setIndexPatternExists(!!indexPattern);
+          if (isSubscribed) {
+            setIndexPatternExists(!!indexPattern);
+          }
         })
         .catch(() => {
-          setIndexPatternExists(false);
+          if (isSubscribed) {
+            setIndexPatternExists(false);
+          }
         });
-    } else {
+    } else if (isSubscribed) {
       // Allow filters without an index pattern and don't validate them.
       setIndexPatternExists(true);
     }
+    return () => {
+      isSubscribed = false;
+    };
   }, [props.filter.meta.index]);
 
   function handleBadgeClick(e: MouseEvent<HTMLInputElement>) {

src/plugins/discover/public/application/angular/context_app.html

@@ -1,15 +1,3 @@
-<kbn-top-nav
-  app-name="'context'"
-  show-search-bar="true"
-  show-filter-bar="true"
-  show-query-bar="false"
-  show-save-query="false"
-  show-date-picker="false"
-  index-patterns="[contextApp.indexPattern]"
-  use-default-behaviors="true"
->
-</kbn-top-nav>
-
 <!-- Context App Legacy -->
 <context-app-legacy
   filter="contextApp.actions.addFilter"
@@ -29,4 +17,5 @@
   successor-available="contextApp.state.rows.successors.length"
   successor-status="contextApp.state.loadingStatus.successors.status"
   on-change-successor-count="contextApp.actions.fetchGivenSuccessorRows"
+  top-nav-menu="contextApp.topNavMenu"
 ></context-app-legacy>

src/plugins/discover/public/application/angular/context_app.js

@@ -56,13 +56,14 @@ getAngularModule().directive('contextApp', function ContextApp() {
 });
 
 function ContextAppController($scope, Private) {
-  const { filterManager, indexPatterns, uiSettings } = getServices();
+  const { filterManager, indexPatterns, uiSettings, navigation } = getServices();
   const queryParameterActions = getQueryParameterActions(filterManager, indexPatterns);
   const queryActions = Private(QueryActionsProvider);
   this.state = createInitialState(
     parseInt(uiSettings.get(CONTEXT_STEP_SETTING), 10),
     getFirstSortableField(this.indexPattern, uiSettings.get(CONTEXT_TIE_BREAKER_FIELDS_SETTING))
   );
+  this.topNavMenu = navigation.ui.TopNavMenu;
 
   this.actions = _.mapValues(
     {

src/plugins/discover/public/application/components/context_app/__mocks__/top_nav_menu.tsx

@@ -0,0 +1,22 @@
+/*
+ * 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 React from 'react';
+
+export const TopNavMenuMock = () => <div>Hello World</div>;

src/plugins/discover/public/application/components/context_app/context_app_legacy.test.tsx

@@ -25,6 +25,7 @@ import { DocTableLegacy } from '../../angular/doc_table/create_doc_table_react';
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { ActionBar } from '../../angular/context/components/action_bar/action_bar';
 import { ContextErrorMessage } from '../context_error_message';
+import { TopNavMenuMock } from './__mocks__/top_nav_menu';
 
 describe('ContextAppLegacy test', () => {
   const hit = {
@@ -64,6 +65,17 @@ describe('ContextAppLegacy test', () => {
     onChangeSuccessorCount: jest.fn(),
     predecessorStatus: 'loaded',
     successorStatus: 'loaded',
+    topNavMenu: TopNavMenuMock,
+  };
+  const topNavProps = {
+    appName: 'context',
+    showSearchBar: true,
+    showQueryBar: false,
+    showFilterBar: true,
+    showSaveQuery: false,
+    showDatePicker: false,
+    indexPatterns: [indexPattern],
+    useDefaultBehaviors: true,
   };
 
   it('renders correctly', () => {
@@ -72,6 +84,9 @@ describe('ContextAppLegacy test', () => {
     const loadingIndicator = findTestSubject(component, 'contextApp_loadingIndicator');
     expect(loadingIndicator.length).toBe(0);
     expect(component.find(ActionBar).length).toBe(2);
+    const topNavMenu = component.find(TopNavMenuMock);
+    expect(topNavMenu.length).toBe(1);
+    expect(topNavMenu.props()).toStrictEqual(topNavProps);
   });
 
   it('renders loading indicator', () => {
@@ -82,6 +97,7 @@ describe('ContextAppLegacy test', () => {
     const loadingIndicator = findTestSubject(component, 'contextApp_loadingIndicator');
     expect(loadingIndicator.length).toBe(1);
     expect(component.find(ActionBar).length).toBe(2);
+    expect(component.find(TopNavMenuMock).length).toBe(1);
   });
 
   it('renders error message', () => {
@@ -90,6 +106,7 @@ describe('ContextAppLegacy test', () => {
     props.reason = 'something went wrong';
     const component = mountWithIntl(<ContextAppLegacy {...props} />);
     expect(component.find(DocTableLegacy).length).toBe(0);
+    expect(component.find(TopNavMenuMock).length).toBe(0);
     const errorMessage = component.find(ContextErrorMessage);
     expect(errorMessage.length).toBe(1);
   });

src/plugins/discover/public/application/components/context_app/context_app_legacy.tsx

@@ -27,8 +27,10 @@ import {
 import { IIndexPattern, IndexPatternField } from '../../../../../data/common/index_patterns';
 import { LOADING_STATUS } from './constants';
 import { ActionBar, ActionBarProps } from '../../angular/context/components/action_bar/action_bar';
+import { TopNavMenuProps } from '../../../../../navigation/public';
 
 export interface ContextAppProps {
+  topNavMenu: React.ComponentType<TopNavMenuProps>;
   columns: string[];
   hits: Array<Record<string, unknown>>;
   indexPattern: IIndexPattern;
@@ -96,6 +98,20 @@ export function ContextAppLegacy(renderProps: ContextAppProps) {
     } as DocTableLegacyProps;
   };
 
+  const TopNavMenu = renderProps.topNavMenu;
+  const getNavBarProps = () => {
+    return {
+      appName: 'context',
+      showSearchBar: true,
+      showQueryBar: false,
+      showFilterBar: true,
+      showSaveQuery: false,
+      showDatePicker: false,
+      indexPatterns: [renderProps.indexPattern],
+      useDefaultBehaviors: true,
+    };
+  };
+
   const loadingFeedback = () => {
     if (status === LOADING_STATUS.UNINITIALIZED || status === LOADING_STATUS.LOADING) {
       return (
@@ -112,20 +128,23 @@ export function ContextAppLegacy(renderProps: ContextAppProps) {
       {isFailed ? (
         <ContextErrorMessage status={status} reason={renderProps.reason} />
       ) : (
-        <EuiPage>
-          <EuiPageContent paddingSize="s" className="dscCxtAppContent">
-            <ActionBar {...actionBarProps(PREDECESSOR_TYPE)} />
-            {loadingFeedback()}
-            <EuiHorizontalRule margin="xs" />
-            {isLoaded ? (
-              <div className="discover-table">
-                <DocTableLegacy {...docTableProps()} />
-              </div>
-            ) : null}
-            <EuiHorizontalRule margin="xs" />
-            <ActionBar {...actionBarProps(SUCCESSOR_TYPE)} />
-          </EuiPageContent>
-        </EuiPage>
+        <div>
+          <TopNavMenu {...getNavBarProps()} />
+          <EuiPage>
+            <EuiPageContent paddingSize="s" className="dscCxtAppContent">
+              <ActionBar {...actionBarProps(PREDECESSOR_TYPE)} />
+              {loadingFeedback()}
+              <EuiHorizontalRule margin="xs" />
+              {isLoaded ? (
+                <div className="discover-table">
+                  <DocTableLegacy {...docTableProps()} />
+                </div>
+              ) : null}
+              <EuiHorizontalRule margin="xs" />
+              <ActionBar {...actionBarProps(SUCCESSOR_TYPE)} />
+            </EuiPageContent>
+          </EuiPage>
+        </div>
       )}
     </I18nProvider>
   );

src/plugins/discover/public/application/components/context_app/context_app_legacy_directive.ts

@@ -37,5 +37,6 @@ export function createContextAppLegacy(reactDirective: any) {
     ['successorAvailable', { watchDepth: 'reference' }],
     ['successorStatus', { watchDepth: 'reference' }],
     ['onChangeSuccessorCount', { watchDepth: 'reference' }],
+    ['topNavMenu', { watchDepth: 'reference' }],
   ]);
 }

src/plugins/discover/public/get_inner_angular.ts

@@ -50,8 +50,6 @@ import {
   PromiseServiceCreator,
   registerListenEventListener,
   watchMultiDecorator,
-  createTopNavDirective,
-  createTopNavHelper,
 } from '../../kibana_legacy/public';
 import { DiscoverStartPlugins } from './plugin';
 import { getScopedHistory } from './kibana_services';
@@ -98,7 +96,6 @@ export function initializeInnerAngularModule(
     createLocalI18nModule();
     createLocalPrivateModule();
     createLocalPromiseModule();
-    createLocalTopNavModule(navigation);
     createLocalStorageModule();
     createPagerFactoryModule();
     createDocTableModule();
@@ -131,7 +128,6 @@ export function initializeInnerAngularModule(
       'discoverI18n',
       'discoverPrivate',
       'discoverPromise',
-      'discoverTopNav',
       'discoverLocalStorageProvider',
       'discoverDocTable',
       'discoverPagerFactory',
@@ -151,13 +147,6 @@ function createLocalPrivateModule() {
   angular.module('discoverPrivate', []).provider('Private', PrivateProvider);
 }
 
-function createLocalTopNavModule(navigation: NavigationStart) {
-  angular
-    .module('discoverTopNav', ['react'])
-    .directive('kbnTopNav', createTopNavDirective)
-    .directive('kbnTopNavHelper', createTopNavHelper(navigation.ui));
-}
-
 function createLocalI18nModule() {
   angular
     .module('discoverI18n', [])

src/plugins/navigation/public/index.ts

@@ -24,7 +24,7 @@ export function plugin(initializerContext: PluginInitializerContext) {
   return new NavigationPublicPlugin(initializerContext);
 }
 
-export { TopNavMenuData, TopNavMenu } from './top_nav_menu';
+export { TopNavMenuData, TopNavMenu, TopNavMenuProps } from './top_nav_menu';
 
 export { NavigationPublicPluginSetup, NavigationPublicPluginStart } from './types';