Refactor search bar & filters to conditionally render with new applic…

…ation header Signed-off-by: Zhongnan Su <[email protected]>
opensearch-project · Aug 12, 2024 · 8b9db3d · 8b9db3d
1 parent 265a176
commit 8b9db3d
Show file tree

Hide file tree

Showing 7 changed files with 483 additions and 387 deletions.
diff --git a/src/plugins/data/common/constants.ts b/src/plugins/data/common/constants.ts
@@ -63,4 +63,5 @@ export const UI_SETTINGS = {
   QUERY_ENHANCEMENTS_ENABLED: 'query:enhancements:enabled',
   QUERY_DATAFRAME_HYDRATION_STRATEGY: 'query:dataframe:hydrationStrategy',
   SEARCH_QUERY_LANGUAGE_BLOCKLIST: 'search:queryLanguageBlocklist',
+  NEW_HOME_PAGE: 'home:useNewHomePage',
 } as const;
diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
@@ -55,3 +55,12 @@
     margin-top: $euiSize * -1;
   }
 }
+
+.globalFilterGroup__removeAllFilters {
+  color: $euiColorDangerText;
+}
+
+.globalFilterGroup__filterPrefix {
+  padding-top: 10px;
+  padding-right: 10px;
+}
diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
@@ -35,6 +35,7 @@ import {
   EuiFlexItem,
   EuiPopover,
   EuiResizeObserver,
+  EuiText,
 } from '@elastic/eui';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@osd/i18n/react';
 import classNames from 'classnames';
@@ -43,20 +44,10 @@ import { stringify } from '@osd/std';
 
 import { FilterEditor } from './filter_editor';
 import { FilterItem } from './filter_item';
-import { FilterOptions } from './filter_options';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { IIndexPattern } from '../..';
-import {
-  buildEmptyFilter,
-  Filter,
-  enableFilter,
-  disableFilter,
-  pinFilter,
-  toggleFilterDisabled,
-  toggleFilterNegated,
-  unpinFilter,
-  UI_SETTINGS,
-} from '../../../common';
+import { buildEmptyFilter, Filter, UI_SETTINGS } from '../../../common';
+import { FilterOptions } from './filter_options';
 
 interface Props {
   filters: Filter[];
@@ -74,6 +65,7 @@ function FilterBarUI(props: Props) {
   const [filterWidth, setFilterWidth] = useState(maxFilterWidth);
 
   const uiSettings = opensearchDashboards.services.uiSettings;
+  const useNewHeader = Boolean(uiSettings!.get(UI_SETTINGS.NEW_HOME_PAGE));
   if (!uiSettings) return null;
 
   function onFiltersUpdated(filters: Filter[]) {
@@ -177,40 +169,6 @@ function FilterBarUI(props: Props) {
     onFiltersUpdated(filters);
   }
 
-  function onEnableAll() {
-    const filters = props.filters.map(enableFilter);
-    onFiltersUpdated(filters);
-  }
-
-  function onDisableAll() {
-    const filters = props.filters.map(disableFilter);
-    onFiltersUpdated(filters);
-  }
-
-  function onPinAll() {
-    const filters = props.filters.map(pinFilter);
-    onFiltersUpdated(filters);
-  }
-
-  function onUnpinAll() {
-    const filters = props.filters.map(unpinFilter);
-    onFiltersUpdated(filters);
-  }
-
-  function onToggleAllNegated() {
-    const filters = props.filters.map(toggleFilterNegated);
-    onFiltersUpdated(filters);
-  }
-
-  function onToggleAllDisabled() {
-    const filters = props.filters.map(toggleFilterDisabled);
-    onFiltersUpdated(filters);
-  }
-
-  function onRemoveAll() {
-    onFiltersUpdated([]);
-  }
-
   const classes = classNames('globalFilterBar', props.className);
 
   return (
@@ -221,15 +179,18 @@ function FilterBarUI(props: Props) {
       responsive={false}
     >
       <EuiFlexItem className="globalFilterGroup__branch" grow={false}>
-        <FilterOptions
-          onEnableAll={onEnableAll}
-          onDisableAll={onDisableAll}
-          onPinAll={onPinAll}
-          onUnpinAll={onUnpinAll}
-          onToggleAllNegated={onToggleAllNegated}
-          onToggleAllDisabled={onToggleAllDisabled}
-          onRemoveAll={onRemoveAll}
-        />
+        {useNewHeader ? (
+          <EuiText size="s" className="globalFilterGroup__filterPrefix">
+            Filters:
+          </EuiText>
+        ) : (
+          <FilterOptions
+            filters={props.filters!}
+            onFiltersUpdated={props.onFiltersUpdated}
+            intl={props.intl}
+            indexPatterns={props.indexPatterns}
+          />
+        )}
       </EuiFlexItem>
 
       <EuiFlexItem className="globalFilterGroup__filterFlexItem">