Handle queries + filters for dataview saved search

Heenawter · Jun 26, 2024 · 96ecb1a · 96ecb1a
1 parent 909015c
commit 96ecb1a
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 14 deletions.
diff --git a/src/plugins/dashboard/public/dashboard_container/embeddable/create/create_dashboard.ts b/src/plugins/dashboard/public/dashboard_container/embeddable/create/create_dashboard.ts
@@ -365,6 +365,7 @@ export const initializeDashboard = async ({
       const stopSyncingUnifiedSearchState =
         syncUnifiedSearchState.bind(dashboardContainer)(kbnUrlStateStorage);
       dashboardContainer.stopSyncingWithUnifiedSearch = () => {
+        console.log('stopSyncingWithUnifiedSearch');
         stopSyncingUnifiedSearchState();
         stopSyncingQueryServiceStateWithUrl();
       };

diff --git a/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx b/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx
@@ -174,6 +174,7 @@ export class DashboardContainer
   public firstLoad: boolean = true;
   private hadContentfulRender = false;
   private scrollPosition?: number;
+  public ignoreDashboardUnsavedChanges: boolean = false;
 
   // cleanup
   public stopSyncingWithUnifiedSearch?: () => void;

diff --git a/...ugins/dashboard/public/dashboard_container/state/diffing/dashboard_diffing_integration.ts b/...ugins/dashboard/public/dashboard_container/state/diffing/dashboard_diffing_integration.ts
@@ -123,10 +123,9 @@ export function startDiffingDashboardState(
           explicitInput: currentInput,
           componentState: { lastSavedInput },
         } = this.getState();
-        const unsavedChanges = await getDashboardUnsavedChanges.bind(this)(
-          lastSavedInput,
-          currentInput
-        );
+        const unsavedChanges = this.ignoreDashboardUnsavedChanges
+          ? {}
+          : await getDashboardUnsavedChanges.bind(this)(lastSavedInput, currentInput);
         return unsavedChanges;
       })();
     })

diff --git a/src/plugins/discover/public/embeddable/components/editor/saved_search_edit_flyout.tsx b/src/plugins/discover/public/embeddable/components/editor/saved_search_edit_flyout.tsx
@@ -89,9 +89,9 @@ export default function SavedSearchEditorFlyout({
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
         {isEsql ? (
-          <SavedSearchEsqlEditor api={api} stateManager={stateManager} services={services} />
+          <SavedSearchEsqlEditor api={api} stateManager={stateManager} />
         ) : (
-          <SavedSearchDataviewEditor api={api} stateManager={stateManager} services={services} />
+          <SavedSearchDataviewEditor api={api} stateManager={stateManager} />
         )}
       </EuiFlyoutBody>
       <EuiFlyoutFooter>

diff --git a/src/plugins/discover/public/embeddable/components/editor/saved_search_editor_dataview.tsx b/src/plugins/discover/public/embeddable/components/editor/saved_search_editor_dataview.tsx
@@ -7,9 +7,12 @@
  */
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { debounceTime } from 'rxjs';
 
-import { EuiPanel, EuiSpacer } from '@elastic/eui';
+import { EuiPanel } from '@elastic/eui';
+import { DashboardContainer } from '@kbn/dashboard-plugin/public/dashboard_container';
 import { DataViewListItem } from '@kbn/data-views-plugin/common';
+import { Filter, Query } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
 import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
 import { LazyDataViewPicker, withSuspense } from '@kbn/presentation-util-plugin/public';
@@ -53,6 +56,41 @@ export function SavedSearchDataviewEditor({
   const selectedDataView = savedSearch.searchSource.getField('index');
   const [dataViews, setDataViews] = useState<DataViewListItem[]>([]);
 
+  useEffect(() => {
+    (api.parentApi as DashboardContainer).ignoreDashboardUnsavedChanges = true;
+
+    const originalQuery = services.data.query.queryString.getQuery();
+    services.data.query.queryString.setQuery(savedSearch.searchSource.getField('query') as Query);
+    const querySubscription = services.data.query.queryString
+      .getUpdates$()
+      .pipe(debounceTime(1))
+      .subscribe((newQuery) => {
+        stateManager.searchSource.next(savedSearch.searchSource.setField('query', newQuery));
+      });
+
+    const originalFilters = services.filterManager.getFilters();
+    services.filterManager.setFilters(
+      (savedSearch.searchSource.getField('filter') ?? []) as Filter[]
+    );
+    const filtersSubscription = services.filterManager
+      .getUpdates$()
+      .pipe(debounceTime(1))
+      .subscribe(() => {
+        const newFilters = services.filterManager.getFilters();
+        stateManager.searchSource.next(savedSearch.searchSource.setField('filter', newFilters));
+      });
+
+    return () => {
+      services.data.query.queryString.setQuery(originalQuery);
+      services.filterManager.setFilters(originalFilters);
+
+      (api.parentApi as DashboardContainer).ignoreDashboardUnsavedChanges = false;
+      querySubscription.unsubscribe();
+      filtersSubscription.unsubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     let mounted = true;
     const fetchDataViews = async () => {
@@ -96,7 +134,7 @@ export function SavedSearchDataviewEditor({
           }}
         />
 
-        {selectedDataView ? (
+        {selectedDataView && (
           <UnifiedFieldListSidebarContainer
             fullWidth
             variant="responsive"
@@ -113,14 +151,8 @@ export function SavedSearchDataviewEditor({
               stateManager.columns.next((columns ?? []).filter((name) => name !== field.name));
             }}
           />
-        ) : (
-          <>error</>
         )}
       </EuiPanel>
-      <EuiSpacer size="m" />
-      <EuiPanel className="editorPanel" paddingSize="s">
-        test
-      </EuiPanel>
     </>
   );
 }