Merge branch 'main' into main

.github/workflows/cypress_workflow.yml

@@ -28,8 +28,6 @@ on:
         type: string
 
 env:
-  SOURCE_REPO: ${{ github.repository }}
-  SOURCE_BRANCH: "${{ github.base_ref }}"
   TEST_REPO: ${{ inputs.test_repo != '' && inputs.test_repo || 'opensearch-project/opensearch-dashboards-functional-test' }}
   TEST_BRANCH: "${{ inputs.test_branch != '' && inputs.test_branch || github.base_ref }}"
   FTR_PATH: 'ftr'

CHANGELOG.md

@@ -49,16 +49,21 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [TSVB, Dashboards] Fix inconsistent dark mode code editor themes ([#4609](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4609))
 - [Table Visualization] Fix width of multiple tables when rendered in column view ([#4638](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4638))
 - [Legacy Maps] Fix dark mode style overrides ([#4658](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4658))
-- [BUG] Fix management overview page duplicate rendering ([#4636](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4636))
+- Fix management overview page duplicate rendering ([#4636](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4636))
 - Bump `agentkeepalive` to v4.5.0 to solve a problem preventing the use `https://ip` in `opensearch.hosts` ([#4949](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4949))
 - [Table Vis] Fix filter actions on data table vis cells ([#4837](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4837))
 - Fix broken app when management is turned off ([#4891](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4891))
 - Correct the generated path for downloading plugins by their names on Windows ([#4953](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4953))
-- [BUG] Fix buildPointSeriesData unit test fails due to local timezone ([#4992](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4992))
-- [BUG][Data Explorer][Discover] Fix total hits issue for no time based data ([#5087](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5087))
-- [BUG][Data Explorer][Discover] Add onQuerySubmit to top nav and allow force update to embeddable ([#5160](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5160))
-- [BUG][Discover] Fix misc navigation issues ([#5168](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5168))
-- [BUG][Discover] Fix mobile view ([#5168](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5168))
+- Fix `buildPointSeriesData` unit test fails due to local timezone ([#4992](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4992))
+- [Data Explorer][Discover] Fix total hits issue for no time based data ([#5087](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5087))
+- [Data Explorer][Discover] Add onQuerySubmit to top nav and allow force update to embeddable ([#5160](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5160))
+- [Discover] Fix misc navigation issues ([#5168](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5168))
+- [Discover] Fix mobile view ([#5168](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5168))
+- Fix `visAugmenter` forming empty key-value pairs in its calls to the `SavedObject` API ([#5190](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5190))
+- [Data Explorer][Discover] Automatically load solo added default index pattern ([#5171](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5171))
+- [Data Explorer][Discover] Allow data grid to auto adjust size based on fetched data count ([#5191](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5191))
+- [BUG][Data Explorer][Discover] Allow filter and query persist when refresh page or paste url to a new tab ([#5206](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5206))
+
 
 ### 🚞 Infrastructure
 

packages/osd-stylelint-config/config/global_selectors.json

@@ -23,7 +23,8 @@
       "src/plugins/vis_builder/public/application/components/searchable_dropdown.scss",
       "src/plugins/vis_builder/public/application/components/side_nav.scss",
       "packages/osd-ui-framework/src/components/button/button_group/_button_group.scss",
-      "src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss"
+      "src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss",
+      "src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss"
     ]
   }
 }

packages/osd-stylelint-config/config/restricted_properties.json

@@ -2,7 +2,6 @@
   "font-family": {
     "explanation": "All \"font-family\" styles should be inherited from OUI themes and components. Remove the rule.",
     "approved": [
-      "src/plugins/discover_legacy/public/application/_discover.scss",
       "src/plugins/maps_legacy/public/map/_leaflet_overrides.scss",
       "src/plugins/maps_legacy/public/map/_legend.scss",
       "src/plugins/opensearch_dashboards_legacy/public/font_awesome/font_awesome.scss",
@@ -12,8 +11,7 @@
       "src/plugins/data/public/ui/typeahead/_suggestion.scss",
       "src/plugins/vis_type_timeseries/public/application/components/_error.scss",
       "packages/osd-ui-framework/src/components/form/check_box/_check_box.scss",
-      "src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss",
-      "src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.scss"
+      "src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss"
     ]
   }
 }

src/plugins/data_explorer/public/components/app_container.scss

@@ -3,6 +3,11 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
 .deSidebar {
   max-width: 462px;
   min-width: 400px;
+
+  @include ouiBreakpoint("xs", "s", "m") {
+    max-width: initial;
+    width: 100%;
+  }
 }
 
 .deLayout {

src/plugins/data_explorer/public/index.ts

@@ -14,4 +14,10 @@ export function plugin() {
 }
 export { DataExplorerPluginSetup, DataExplorerPluginStart, DataExplorerServices } from './types';
 export { ViewProps, ViewDefinition, DefaultViewState } from './services/view_service';
-export { RootState, useTypedSelector, useTypedDispatch } from './utils/state_management';
+export {
+  RootState,
+  Store,
+  useTypedSelector,
+  useTypedDispatch,
+  setIndexPattern,
+} from './utils/state_management';

src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx

@@ -29,7 +29,6 @@ export interface DataGridTableProps {
   onSetColumns: (columns: string[]) => void;
   sort: SortOrder[];
   displayTimeColumn: boolean;
-  services: DiscoverServices;
   title?: string;
   description?: string;
   isToolbarVisible?: boolean;
@@ -177,6 +176,7 @@ export const DataGridTable = ({
         data-shared-item=""
         data-title={title}
         data-description={description}
+        data-test-subj="discoverTable"
       >
         <EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
           <EuiPanel paddingSize="s" style={{ height: '100%' }}>

src/plugins/discover/public/application/components/sidebar/discover_field.scss

@@ -3,16 +3,18 @@
   max-width: 300px;
 }
 
-.dscSidebarField__actionButton {
-  opacity: 0;
-  transition: opacity $ouiAnimSpeedExtraFast;
+.dscSidebarField {
+  &__actionButton {
+    opacity: 0;
+    transition: opacity $euiAnimSpeedFast;
 
-  &:hover,
-  &:focus {
-    opacity: 1;
+    @include ouiBreakpoint("xs", "s", "m") {
+      opacity: 1;
+    }
   }
 
-  @include ouiBreakpoint("xs", "s", "m") {
+  &:hover &__actionButton,
+  &:focus &__actionButton {
     opacity: 1;
   }
 }

src/plugins/discover/public/application/components/sidebar/discover_field.tsx

@@ -195,7 +195,7 @@ export const DiscoverField = ({
   }
 
   return (
-    <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+    <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false} className="dscSidebarField">
       <EuiFlexItem grow={false}>
         <FieldIcon
           type={field.type}

src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss

@@ -1,3 +1,8 @@
 .dscSideBarFieldListHeader {
   padding-left: $euiSizeS;
 }
+
+.dscSidebar__item:hover,
+.dscSidebar__item:focus {
+  background-color: tintOrShade($euiColorPrimary, 90%, 90%);
+}

src/plugins/discover/public/application/utils/state_management/index.ts

@@ -4,7 +4,13 @@
  */
 
 import { TypedUseSelectorHook } from 'react-redux';
-import { RootState, useTypedDispatch, useTypedSelector } from '../../../../../data_explorer/public';
+import {
+  RootState,
+  Store as StoreType,
+  setIndexPattern as updateIndexPattern,
+  useTypedDispatch,
+  useTypedSelector,
+} from '../../../../../data_explorer/public';
 import { DiscoverState } from './discover_slice';
 
 export * from './discover_slice';
@@ -15,3 +21,4 @@ export interface DiscoverRootState extends RootState {
 
 export const useSelector: TypedUseSelectorHook<DiscoverRootState> = useTypedSelector;
 export const useDispatch = useTypedDispatch;
+export { StoreType, updateIndexPattern };

src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss

@@ -1,5 +1,36 @@
 .dscCanvas {
   @include euiYScrollWithShadows;
 
+  /* stylelint-disable-next-line */
+  container-type: inline-size; // containment context
+  /* stylelint-disable-next-line */
+  container-name: canvas;
   height: 100%;
 }
+
+// TopNav styles for the Discover
+/* stylelint-disable-next-line */
+@container canvas (max-width: 900px) {
+  .globalQueryBar {
+    .osdQueryBar--withDatePicker {
+      flex-wrap: wrap;
+
+      & > .euiFlexItem {
+        width: 100% !important;
+
+        &:first-child {
+          order: 1;
+        }
+      }
+
+      .osdQueryBar__datePickerWrapper {
+        max-width: initial;
+        width: 100%;
+
+        .euiSuperDatePicker__flexWrapper {
+          width: auto;
+        }
+      }
+    }
+  }
+}

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

@@ -3,8 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { History } from 'history';
+import React, { useCallback, useMemo } from 'react';
 import { DiscoverViewServices } from '../../../build_services';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { DataGridTable } from '../../components/data_grid/data_grid_table';
@@ -17,30 +16,26 @@ import {
   useDispatch,
   useSelector,
 } from '../../utils/state_management';
-import { ResultStatus, SearchData, useSearch } from '../utils/use_search';
 import { IndexPatternField, opensearchFilters } from '../../../../../data/public';
 import { DocViewFilterFn } from '../../doc_views/doc_views_types';
 import { SortOrder } from '../../../saved_searches/types';
 import { DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../common';
+import { OpenSearchSearchHit } from '../../doc_views/doc_views_types';
 
 interface Props {
-  history: History;
+  rows?: OpenSearchSearchHit[];
 }
 
-export const DiscoverTable = ({ history }: Props) => {
+export const DiscoverTable = ({ rows }: Props) => {
   const { services } = useOpenSearchDashboards<DiscoverViewServices>();
   const {
     uiSettings,
     data: {
       query: { filterManager },
     },
   } = services;
-  const { data$, refetch$, indexPattern } = useDiscoverContext();
-  const [fetchState, setFetchState] = useState<SearchData>({
-    status: data$.getValue().status,
-    rows: [],
-  });
 
+  const { refetch$, indexPattern, savedSearch } = useDiscoverContext();
   const { columns, sort } = useSelector((state) => state.discover);
   const dispatch = useDispatch();
   const onAddColumn = (col: string) => dispatch(addColumn({ column: col }));
@@ -70,21 +65,6 @@ export const DiscoverTable = ({ history }: Props) => {
     [indexPattern, uiSettings]
   );
 
-  const { rows } = fetchState || {};
-  const { savedSearch } = useSearch(services);
-
-  useEffect(() => {
-    const subscription = data$.subscribe((next) => {
-      if (next.status === ResultStatus.LOADING) return;
-      if (next.status !== fetchState.status || (next.rows && next.rows !== fetchState.rows)) {
-        setFetchState({ ...fetchState, ...next });
-      }
-    });
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [data$, fetchState]);
-
   if (indexPattern === undefined) {
     // TODO: handle better
     return null;
@@ -107,7 +87,6 @@ export const DiscoverTable = ({ history }: Props) => {
       sort={sort}
       rows={rows}
       displayTimeColumn={displayTimeColumn}
-      services={services}
       title={savedSearch?.id ? savedSearch.title : ''}
       description={savedSearch?.id ? savedSearch.description : ''}
     />

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

@@ -19,6 +19,7 @@ import { DiscoverViewServices } from '../../../build_services';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { filterColumns } from '../utils/filter_columns';
 import { DEFAULT_COLUMNS_SETTING } from '../../../../common';
+import { OpenSearchSearchHit } from '../../../application/doc_views/doc_views_types';
 import './discover_canvas.scss';
 
 // eslint-disable-next-line import/no-default-export
@@ -42,7 +43,6 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
     bucketInterval: {},
   });
 
-  const { status } = fetchState;
   const onQuerySubmit = useCallback(
     (payload, isUpdate) => {
       if (isUpdate === false) {
@@ -51,18 +51,30 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
     },
     [refetch$]
   );
+  const [rows, setRows] = useState<OpenSearchSearchHit[] | undefined>(undefined);
 
   useEffect(() => {
     const subscription = data$.subscribe((next) => {
-      if (
-        next.status !== fetchState.status ||
-        (next.hits && next.hits !== fetchState.hits) ||
-        (next.bucketInterval && next.bucketInterval !== fetchState.bucketInterval) ||
-        (next.chartData && next.chartData !== fetchState.chartData)
-      ) {
+      if (next.status === ResultStatus.LOADING) return;
+
+      let shouldUpdateState = false;
+
+      if (next.status !== fetchState.status) shouldUpdateState = true;
+      if (next.hits && next.hits !== fetchState.hits) shouldUpdateState = true;
+      if (next.bucketInterval && next.bucketInterval !== fetchState.bucketInterval)
+        shouldUpdateState = true;
+      if (next.chartData && next.chartData !== fetchState.chartData) shouldUpdateState = true;
+      if (next.rows && next.rows !== fetchState.rows) {
+        shouldUpdateState = true;
+        setRows(next.rows);
+      }
+
+      // Update the state if any condition is met.
+      if (shouldUpdateState) {
         setFetchState({ ...fetchState, ...next });
       }
     });
+
     return () => {
       subscription.unsubscribe();
     };
@@ -91,23 +103,26 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
           onQuerySubmit,
         }}
       />
-      {status === ResultStatus.NO_RESULTS && (
+      {fetchState.status === ResultStatus.NO_RESULTS && (
         <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
       )}
-      {status === ResultStatus.UNINITIALIZED && (
+      {fetchState.status === ResultStatus.UNINITIALIZED && (
         <DiscoverUninitialized onRefresh={() => refetch$.next()} />
       )}
-      {status === ResultStatus.LOADING && <LoadingSpinner />}
-      {status === ResultStatus.READY && (
+      {fetchState.status === ResultStatus.LOADING && <LoadingSpinner />}
+      {fetchState.status === ResultStatus.READY && (
         <>
           <EuiPanel hasBorder={false} hasShadow={false} color="transparent" paddingSize="s">
             <EuiPanel>
-              <DiscoverChartContainer {...fetchState} />
+              <MemoizedDiscoverChartContainer {...fetchState} />
             </EuiPanel>
           </EuiPanel>
-          <DiscoverTable history={history} />
+          <MemoizedDiscoverTable rows={rows} />
         </>
       )}
     </EuiPanel>
   );
 }
+
+const MemoizedDiscoverTable = React.memo(DiscoverTable);
+const MemoizedDiscoverChartContainer = React.memo(DiscoverChartContainer);

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

@@ -13,6 +13,7 @@ import { IndexPattern } from '../../../opensearch_dashboards_services';
 import { getTopNavLinks } from '../../components/top_nav/get_top_nav_links';
 import { useDiscoverContext } from '../context';
 import { getRootBreadcrumbs } from '../../helpers/breadcrumbs';
+import { opensearchFilters, connectStorageToQueryState } from '../../../../../data/public';
 
 export interface TopNavProps {
   opts: {
@@ -35,10 +36,16 @@ export const TopNav = ({ opts }: TopNavProps) => {
     },
     data,
     chrome,
+    osdUrlStateStorage,
   } = services;
 
   const topNavLinks = savedSearch ? getTopNavLinks(services, inspectorAdapters, savedSearch) : [];
 
+  connectStorageToQueryState(services.data.query, osdUrlStateStorage, {
+    filters: opensearchFilters.FilterStateStore.APP_STATE,
+    query: true,
+  });
+
   useEffect(() => {
     let isMounted = true;
     const getDefaultIndexPattern = async () => {