[Discover 2.0] fixes add filter and dismissible callout (#5029) (#5033)

* fixes add filter and dismissible callout



* fixes filters applying when loading a saved search



---------


(cherry picked from commit b9b2b79)

Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: opensearch-trigger-bot[bot]

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

@@ -20,22 +20,22 @@ export const DiscoverChartContainer = ({ hits, bucketInterval, chartData }: Sear
     indexPattern,
   ]);
 
+  if (!hits || !chartData || !bucketInterval) return null;
+
   return (
-    hits && (
-      <DiscoverChart
-        bucketInterval={bucketInterval}
-        chartData={chartData}
-        config={uiSettings}
-        data={data}
-        hits={hits}
-        resetQuery={() => {
-          window.location.href = `#/view/${savedSearch?.id}`;
-          window.location.reload();
-        }}
-        services={services}
-        showResetButton={!!savedSearch && !!savedSearch.id}
-        isTimeBased={isTimeBased}
-      />
-    )
+    <DiscoverChart
+      bucketInterval={bucketInterval}
+      chartData={chartData}
+      config={uiSettings}
+      data={data}
+      hits={hits}
+      resetQuery={() => {
+        window.location.href = `#/view/${savedSearch?.id}`;
+        window.location.reload();
+      }}
+      services={services}
+      showResetButton={!!savedSearch && !!savedSearch.id}
+      isTimeBased={isTimeBased}
+    />
   );
 };

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

@@ -51,13 +51,15 @@ export const DiscoverTable = ({ history }: Props) => {
     refetch$.next();
   };
   const onAddFilter = useCallback(
-    (field: IndexPatternField, values: string, operation: '+' | '-') => {
+    (field: string | IndexPatternField, values: string, operation: '+' | '-') => {
+      if (!indexPattern) return;
+
       const newFilters = opensearchFilters.generateFilters(
         filterManager,
         field,
         values,
         operation,
-        indexPattern.id
+        indexPattern.id ?? ''
       );
       return filterManager.addFilters(newFilters);
     },

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

@@ -20,6 +20,8 @@ import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_re
 import { filterColumns } from '../utils/filter_columns';
 import { DEFAULT_COLUMNS_SETTING } from '../../../../common';
 
+const KEY_SHOW_NOTICE = 'discover:deprecation-notice:show';
+
 // eslint-disable-next-line import/no-default-export
 export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewProps) {
   const { data$, refetch$, indexPattern } = useDiscoverContext();
@@ -41,8 +43,13 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
     bucketInterval: {},
   });
 
-  const [isCallOutVisible, setIsCallOutVisible] = useState(true);
-  const closeCallOut = () => setIsCallOutVisible(false);
+  const [isCallOutVisible, setIsCallOutVisible] = useState(
+    localStorage.getItem(KEY_SHOW_NOTICE) !== 'false'
+  );
+  const closeCallOut = () => {
+    localStorage.setItem(KEY_SHOW_NOTICE, 'false');
+    setIsCallOutVisible(false);
+  };
 
   let callOut;
 

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { ViewProps } from '../../../../../data_explorer/public';
 import {
   addColumn,
@@ -15,9 +15,18 @@ import {
 import { DiscoverSidebar } from '../../components/sidebar';
 import { useDiscoverContext } from '../context';
 import { ResultStatus, SearchData } from '../utils/use_search';
+import { IndexPatternField, opensearchFilters } from '../../../../../data/public';
+import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
+import { DiscoverViewServices } from '../../../build_services';
 
 // eslint-disable-next-line import/no-default-export
 export default function DiscoverPanel(props: ViewProps) {
+  const { services } = useOpenSearchDashboards<DiscoverViewServices>();
+  const {
+    data: {
+      query: { filterManager },
+    },
+  } = services;
   const { data$, indexPattern } = useDiscoverContext();
   const [fetchState, setFetchState] = useState<SearchData>(data$.getValue());
 
@@ -36,6 +45,22 @@ export default function DiscoverPanel(props: ViewProps) {
     };
   }, [data$, fetchState]);
 
+  const onAddFilter = useCallback(
+    (field: string | IndexPatternField, values: string, operation: '+' | '-') => {
+      if (!indexPattern) return;
+
+      const newFilters = opensearchFilters.generateFilters(
+        filterManager,
+        field,
+        values,
+        operation,
+        indexPattern.id ?? ''
+      );
+      return filterManager.addFilters(newFilters);
+    },
+    [filterManager, indexPattern]
+  );
+
   return (
     <DiscoverSidebar
       columns={columns || []}
@@ -61,7 +86,7 @@ export default function DiscoverPanel(props: ViewProps) {
         );
       }}
       selectedIndexPattern={indexPattern}
-      onAddFilter={() => {}}
+      onAddFilter={onAddFilter}
     />
   );
 }

src/plugins/discover/public/application/view_components/utils/filter_columns.ts

@@ -16,7 +16,7 @@ import { IndexPattern } from '../../../opensearch_dashboards_services';
  */
 export function filterColumns(
   columns: string[],
-  indexPattern: IndexPattern,
+  indexPattern: IndexPattern | undefined,
   defaultColumns: string[]
 ) {
   const fieldsName = indexPattern?.fields.getAll().map((fld) => fld.name) || [];

src/plugins/discover/public/application/view_components/utils/use_search.ts

@@ -8,6 +8,7 @@ import { BehaviorSubject, Subject, merge } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { i18n } from '@osd/i18n';
 import { useEffect } from 'react';
+import { cloneDeep } from 'lodash';
 import { RequestAdapter } from '../../../../../inspector/public';
 import { DiscoverServices } from '../../../build_services';
 import { search } from '../../../../../data/public';
@@ -30,7 +31,6 @@ import {
   getResponseInspectorStats,
 } from '../../../opensearch_dashboards_services';
 import { SEARCH_ON_PAGE_LOAD_SETTING } from '../../../../common';
-import { SortOrder } from '../../../saved_searches/types';
 
 export enum ResultStatus {
   UNINITIALIZED = 'uninitialized',
@@ -253,9 +253,29 @@ export const useSearch = (services: DiscoverServices) => {
     (async () => {
       const savedSearchInstance = await getSavedSearchById(savedSearchId || '');
       setSavedSearch(savedSearchInstance);
+
+      // sync initial app filters from savedObject to filterManager
+      const filters = cloneDeep(savedSearchInstance.searchSource.getOwnField('filter'));
+      const query =
+        savedSearchInstance.searchSource.getField('query') ||
+        data.query.queryString.getDefaultQuery();
+      const actualFilters = [];
+
+      if (filters !== undefined) {
+        const result = typeof filters === 'function' ? filters() : filters;
+        if (result !== undefined) {
+          actualFilters.push(...(Array.isArray(result) ? result : [result]));
+        }
+      }
+
+      filterManager.setAppFilters(actualFilters);
+      data.query.queryString.setQuery(query);
     })();
 
     return () => {};
+    // This effect will only run when getSavedSearchById is called, which is
+    // only called when the component is first mounted.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [getSavedSearchById, savedSearchId]);
 
   return {

src/plugins/discover_legacy/public/application/components/discover_legacy.tsx

@@ -101,6 +101,8 @@ export interface DiscoverLegacyProps {
   vis?: Vis;
 }
 
+const KEY_SHOW_NOTICE = 'discover:deprecation-notice:show';
+
 export function DiscoverLegacy({
   addColumn,
   fetch,
@@ -132,7 +134,9 @@ export function DiscoverLegacy({
   vis,
 }: DiscoverLegacyProps) {
   const [isSidebarClosed, setIsSidebarClosed] = useState(false);
-  const [isCallOutVisible, setIsCallOutVisible] = useState(true);
+  const [isCallOutVisible, setIsCallOutVisible] = useState(
+    localStorage.getItem(KEY_SHOW_NOTICE) !== 'false'
+  );
   const { TopNavMenu } = getServices().navigation.ui;
   const { savedSearch, indexPatternList } = opts;
   const bucketAggConfig = vis?.data?.aggs?.aggs[1];
@@ -142,7 +146,10 @@ export function DiscoverLegacy({
       : undefined;
   const [fixedScrollEl, setFixedScrollEl] = useState<HTMLElement | undefined>();
 
-  const closeCallOut = () => setIsCallOutVisible(false);
+  const closeCallOut = () => {
+    localStorage.setItem(KEY_SHOW_NOTICE, 'false');
+    setIsCallOutVisible(false);
+  };
 
   let callOut;