[BUG][Discover] Add onQuerySubmit to top nav and allow force update t…

…o embeddable (opensearch-project#5160)

* all reload to force update embeddable
* add onQuerySubmit to top nav

Issue Resolve
opensearch-project#5116
opensearch-project#5159

Signed-off-by: ananzh <ananzh@amazon.com>
Co-authored-by: Miki <miki@amazon.com>
Co-authored-by: Ashwin P Chandran <ashwinpc@amazon.com>

(cherry picked from commit 7d89cca)
Signed-off-by: Miki <miki@amazon.com>

package.json

@@ -472,4 +472,4 @@
     "node": ">=14.20.1 <19",
     "yarn": "^1.22.10"
   }
-}
+}

src/plugins/discover/public/application/view_components/canvas/index.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
 import { TopNav } from './top_nav';
 import { ViewProps } from '../../../../../data_explorer/public';
@@ -42,6 +42,14 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
   });
 
   const { status } = fetchState;
+  const onQuerySubmit = useCallback(
+    (payload, isUpdate) => {
+      if (isUpdate === false) {
+        refetch$.next();
+      }
+    },
+    [refetch$]
+  );
 
   useEffect(() => {
     const subscription = data$.subscribe((next) => {
@@ -74,6 +82,7 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
         <TopNav
           opts={{
             setHeaderActionMenu,
+            onQuerySubmit,
           }}
         />
       </EuiFlexItem>

src/plugins/discover/public/application/view_components/canvas/top_nav.tsx

@@ -4,6 +4,7 @@
  */
 
 import React, { useEffect, useMemo, useState } from 'react';
+import { TimeRange, Query } from 'src/plugins/data/common';
 import { AppMountParameters } from '../../../../../../core/public';
 import { PLUGIN_ID } from '../../../../common';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
@@ -16,6 +17,7 @@ import { getRootBreadcrumbs } from '../../helpers/breadcrumbs';
 export interface TopNavProps {
   opts: {
     setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+    onQuerySubmit: (payload: { dateRange: TimeRange; query?: Query }, isUpdate?: boolean) => void;
   };
 }
 
@@ -83,6 +85,7 @@ export const TopNav = ({ opts }: TopNavProps) => {
       useDefaultBehaviors
       setMenuMountPoint={opts.setHeaderActionMenu}
       indexPatterns={indexPattern ? [indexPattern] : indexPatterns}
+      onQuerySubmit={opts.onQuerySubmit}
     />
   );
 };

src/plugins/discover/public/embeddable/search_embeddable.tsx

@@ -309,7 +309,7 @@ export class SearchEmbeddable
 
   public reload() {
     if (this.searchProps) {
-      this.pushContainerStateParamsToProps(this.searchProps);
+      this.pushContainerStateParamsToProps(this.searchProps, true);
     }
   }
 
@@ -377,8 +377,9 @@ export class SearchEmbeddable
     ReactDOM.render(<SearchEmbeddableComponent {...props} />, node);
   }
 
-  private async pushContainerStateParamsToProps(searchProps: SearchProps) {
+  private async pushContainerStateParamsToProps(searchProps: SearchProps, force: boolean = false) {
     const isFetchRequired =
+      force ||
       !opensearchFilters.onlyDisabledFiltersChanged(this.input.filters, this.prevFilters) ||
       !isEqual(this.prevQuery, this.input.query) ||
       !isEqual(this.prevTimeRange, this.input.timeRange) ||

test/functional/apps/dashboard/dashboard_query_bar.js

@@ -49,8 +49,7 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.dashboard.loadSavedDashboard('dashboard with filter');
     });
 
-    // https://github.com/opensearch-project/OpenSearch-Dashboards/issues/5116
-    it.skip('causes panels to reload when refresh is clicked', async () => {
+    it('causes panels to reload when refresh is clicked', async () => {
       await opensearchArchiver.unload('dashboard/current/data');
 
       await queryBar.clickQuerySubmitButton();