[Manual 2.x] De-angular backports collection (#5219)

* [BUG][Discover] Add onQuerySubmit to top nav and allow force update to embeddable (#5160) * all reload to force update embeddable * add onQuerySubmit to top nav Issue Resolve #5116 #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> * [Discover] A bunch of navigation fixes (#5168) * Discover: Fixes state persistence after nav * Fixed breadcrumbs and navigation * fixes mobile view --------- Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> (cherry picked from commit cb6e0f0) Signed-off-by: Miki <miki@amazon.com> * [BUG][Data Explorer][Discover] Automatically load solo added default index pattern (#5171) * [BUG][Data Explorer][Discover] Automatically load solo added default index pattern This fix ensures that when add a default index pattern, Discover will automatically select and load its details. Issue Resolve #5128 --------- Signed-off-by: ananzh <ananzh@amazon.com> (cherry picked from commit 9601c6c) Signed-off-by: Miki <miki@amazon.com> * [BUG][Data Explorer][Discover] Allow data grid to auto adjust size based on fetched data count (#5191) * This PR adds a new rows state to the DiscoverCanvas component and updated it whenever the data$ observable emitted new row data. * The DiscoverTable component was then refactored to accept rows as a prop, making it dependent on the parent component to provide the correct set of data. This ensures that the table renders correctly based on the current data and doesn't rely on its internal state, which could be outdated. Issue Resolve #5181 Signed-off-by: ananzh <ananzh@amazon.com> (cherry picked from commit 677fdf5) Signed-off-by: Miki <miki@amazon.com> * Fixes mobile layout (#5195) Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> (cherry picked from commit 0ffd2ab) * [BUG][Data Explorer][Discover] Allow filter and query persist when refresh page or paste url to a new tab (#5206) Issue Resolve #5179 #5071 Signed-off-by: ananzh <ananzh@amazon.com> (cherry picked from commit 5623cef) Signed-off-by: Miki <miki@amazon.com> * fixes DataTable rendering in doscover (#5207) Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> (cherry picked from commit c70125f) --------- Signed-off-by: ananzh <ananzh@amazon.com> Signed-off-by: Miki <miki@amazon.com> Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> Co-authored-by: Anan Zhuang <ananzh@amazon.com> Co-authored-by: Ashwin P Chandran <ashwinpc@amazon.com>
opensearch-project · Oct 4, 2023 · 6d9f4ae · 6d9f4ae
1 parent 430a62d
commit 6d9f4ae
Show file tree

Hide file tree

Showing 29 changed files with 378 additions and 269 deletions.
diff --git a/package.json b/package.json
@@ -472,4 +472,4 @@
     "node": ">=14.20.1 <19",
     "yarn": "^1.22.10"
   }
-}
+}
diff --git a/packages/osd-stylelint-config/config/global_selectors.json b/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"
     ]
   }
 }
diff --git a/packages/osd-stylelint-config/config/restricted_properties.json b/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"
     ]
   }
 }
diff --git a/src/plugins/data_explorer/public/components/app_container.scss b/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 {

diff --git a/src/plugins/data_explorer/public/index.ts b/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';
diff --git a/src/plugins/data_explorer/public/utils/state_management/store.ts b/src/plugins/data_explorer/public/utils/state_management/store.ts
@@ -9,6 +9,13 @@ import { reducer as metadataReducer } from './metadata_slice';
 import { loadReduxState, persistReduxState } from './redux_persistence';
 import { DataExplorerServices } from '../../types';
 
+const HYDRATE = 'HYDRATE';
+
+export const hydrate = (newState: RootState) => ({
+  type: HYDRATE,
+  payload: newState,
+});
+
 const commonReducers = {
   metadata: metadataReducer,
 };
@@ -22,9 +29,20 @@ let dynamicReducers: {
 
 const rootReducer = combineReducers(dynamicReducers);
 
+const createRootReducer = (): Reducer<RootState> => {
+  const combinedReducer = combineReducers(dynamicReducers);
+
+  return (state: RootState | undefined, action: any): RootState => {
+    if (action.type === HYDRATE) {
+      return action.payload;
+    }
+    return combinedReducer(state, action);
+  };
+};
+
 export const configurePreloadedStore = (preloadedState: PreloadedState<RootState>) => {
   // After registering the slices the root reducer needs to be updated
-  const updatedRootReducer = combineReducers(dynamicReducers);
+  const updatedRootReducer = createRootReducer();
 
   return configureStore({
     reducer: updatedRootReducer,
@@ -62,6 +80,18 @@ export const getPreloadedStore = async (services: DataExplorerServices) => {
   // the store subscriber will automatically detect changes and call handleChange function
   const unsubscribe = store.subscribe(handleChange);
 
+  // This is necessary because browser navigation updates URL state that isnt reflected in the redux state
+  services.scopedHistory.listen(async (location, action) => {
+    const urlState = await loadReduxState(services);
+    const currentState = store.getState();
+
+    // If the url state is different from the current state, then we need to update the store
+    // the state should have a view property if it was loaded from the url
+    if (action === 'POP' && urlState.metadata?.view && !isEqual(urlState, currentState)) {
+      store.dispatch(hydrate(urlState as RootState));
+    }
+  });
+
   const onUnsubscribe = () => {
     dynamicReducers = {
       ...commonReducers,

diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx b/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;

diff --git a/src/plugins/discover/public/application/components/doc_views/surrounding_docs_app.tsx b/src/plugins/discover/public/application/components/doc_views/surrounding_docs_app.tsx
@@ -47,7 +47,7 @@ export function SurroundingDocsApp() {
 
   useEffect(() => {
     chrome.setBreadcrumbs([
-      ...getRootBreadcrumbs(baseUrl),
+      ...getRootBreadcrumbs(),
       {
         text: i18n.translate('discover.context.breadcrumb', {
           defaultMessage: `Context of #{docId}`,

diff --git a/src/plugins/discover/public/application/components/doc_views/surrounding_docs_view.tsx b/src/plugins/discover/public/application/components/doc_views/surrounding_docs_view.tsx
@@ -93,7 +93,7 @@ export const SurroundingDocsView = ({ id, indexPattern }: SurroundingDocsViewPar
         field,
         values,
         operation,
-        indexPattern.id
+        indexPattern.id || ''
       );
       return filterManager.addFilters(newFilters);
     },
@@ -115,23 +115,25 @@ export const SurroundingDocsView = ({ id, indexPattern }: SurroundingDocsViewPar
     [onAddFilter, rows, indexPattern, setContextAppState, contextQueryState, contextAppState]
   );
 
+  if (isLoading) {
+    return null;
+  }
+
   return (
-    !isLoading && (
-      <Fragment>
-        <TopNavMenu
-          appName={'discover.context.surroundingDocs.topNavMenu'}
-          showSearchBar={true}
-          showQueryBar={false}
-          showDatePicker={false}
-          indexPatterns={[indexPattern]}
-          useDefaultBehaviors={true}
-        />
-        <EuiPage className="discover.context.appPage">
-          <EuiPageContent paddingSize="s" className="dscDocsContent">
-            {contextAppMemoized}
-          </EuiPageContent>
-        </EuiPage>
-      </Fragment>
-    )
+    <Fragment>
+      <TopNavMenu
+        appName={'discover.context.surroundingDocs.topNavMenu'}
+        showSearchBar={true}
+        showQueryBar={false}
+        showDatePicker={false}
+        indexPatterns={[indexPattern]}
+        useDefaultBehaviors={true}
+      />
+      <EuiPage className="discover.context.appPage">
+        <EuiPageContent paddingSize="s" className="dscDocsContent">
+          {contextAppMemoized}
+        </EuiPageContent>
+      </EuiPage>
+    </Fragment>
   );
 };
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.scss b/src/plugins/discover/public/application/components/sidebar/discover_field.scss
@@ -3,12 +3,18 @@
   max-width: 300px;
 }
 
-.dscSidebarField__actionButton {
-  opacity: 0;
-  transition: opacity $ouiAnimSpeedExtraFast;
+.dscSidebarField {
+  &__actionButton {
+    opacity: 0;
+    transition: opacity $euiAnimSpeedFast;
 
-  &:hover,
-  &:focus {
+    @include ouiBreakpoint("xs", "s", "m") {
+      opacity: 1;
+    }
+  }
+
+  &:hover &__actionButton,
+  &:focus &__actionButton {
     opacity: 1;
   }
 }
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx b/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}

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/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%);
+}
diff --git a/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx b/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx
@@ -19,6 +19,7 @@ import {
 import { DiscoverState, setSavedSearchId } from '../../utils/state_management';
 import { DOC_HIDE_TIME_COLUMN_SETTING, SORT_DEFAULT_ORDER_SETTING } from '../../../../common';
 import { getSortForSearchSource } from '../../view_components/utils/get_sort_for_search_source';
+import { getRootBreadcrumbs } from '../../helpers/breadcrumbs';
 
 export const getTopNavLinks = (
   services: DiscoverViewServices,
@@ -45,11 +46,9 @@ export const getTopNavLinks = (
       defaultMessage: 'New Search',
     }),
     run() {
-      setTimeout(() => {
-        history().push('/');
-        // TODO: figure out why a history push doesn't update the app state. The page reload is a hack around it
-        window.location.reload();
-      }, 0);
+      core.application.navigateToApp('discover', {
+        path: '#/',
+      });
     },
     testId: 'discoverNewButton',
   };
@@ -103,15 +102,7 @@ export const getTopNavLinks = (
               history().push(`/view/${encodeURIComponent(id)}`);
             } else {
               chrome.docTitle.change(savedSearch.lastSavedTitle);
-              chrome.setBreadcrumbs([
-                {
-                  text: i18n.translate('discover.discoverBreadcrumbTitle', {
-                    defaultMessage: 'Discover',
-                  }),
-                  href: '#/',
-                },
-                { text: savedSearch.title },
-              ]);
+              chrome.setBreadcrumbs([...getRootBreadcrumbs(), { text: savedSearch.title }]);
             }
 
             // set App state to clean

diff --git a/src/plugins/discover/public/application/components/top_nav/open_search_panel.tsx b/src/plugins/discover/public/application/components/top_nav/open_search_panel.tsx
@@ -55,7 +55,7 @@ interface Props {
 export function OpenSearchPanel({ onClose, makeUrl }: Props) {
   const {
     services: {
-      core: { uiSettings, savedObjects },
+      core: { uiSettings, savedObjects, application },
       addBasePath,
     },
   } = useOpenSearchDashboards<DiscoverViewServices>();
@@ -90,12 +90,8 @@ export function OpenSearchPanel({ onClose, makeUrl }: Props) {
             },
           ]}
           onChoose={(id) => {
-            setTimeout(() => {
-              window.location.assign(makeUrl(id));
-              // TODO: figure out why a history push doesn't update the app state. The page reload is a hack around it
-              window.location.reload();
-              onClose();
-            }, 0);
+            application.navigateToApp('discover', { path: `#/view/${id}` });
+            onClose();
           }}
           uiSettings={uiSettings}
           savedObjects={savedObjects}

diff --git a/src/plugins/discover/public/application/helpers/breadcrumbs.ts b/src/plugins/discover/public/application/helpers/breadcrumbs.ts
@@ -29,14 +29,17 @@
  */
 
 import { i18n } from '@osd/i18n';
+import { EuiBreadcrumb } from '@elastic/eui';
+import { getServices } from '../../opensearch_dashboards_services';
 
-export function getRootBreadcrumbs(baseUrl: string) {
+export function getRootBreadcrumbs(): EuiBreadcrumb[] {
+  const { core } = getServices();
   return [
     {
       text: i18n.translate('discover.rootBreadcrumb', {
         defaultMessage: 'Discover',
       }),
-      href: baseUrl,
+      onClick: () => core.application.navigateToApp('discover'),
     },
   ];
 }
diff --git a/src/plugins/discover/public/application/utils/state_management/discover_slice.tsx b/src/plugins/discover/public/application/utils/state_management/discover_slice.tsx
@@ -11,6 +11,7 @@ import { RootState, DefaultViewState } from '../../../../../data_explorer/public
 import { buildColumns } from '../columns';
 import * as utils from './common';
 import { SortOrder } from '../../../saved_searches/types';
+import { PLUGIN_ID } from '../../../../common';
 
 export interface DiscoverState {
   /**
@@ -79,6 +80,7 @@ export const getPreloadedState = async ({
       preloadedState.root = {
         metadata: {
           indexPattern: indexPatternId,
+          view: PLUGIN_ID,
         },
       };
 

diff --git a/src/plugins/discover/public/application/utils/state_management/index.ts b/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 };
diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss b/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;
+        }
+      }
+    }
+  }
+}