[Manual 2.x] De-angular backports collection

package.json

@@ -472,4 +472,4 @@
     "node": ">=14.20.1 <19",
     "yarn": "^1.22.10"
   }
-}
+}

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/data_explorer/public/utils/state_management/store.ts

@@ -9,6 +9,13 @@
 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 @@
 
 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 @@
   // 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,

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;

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}`,

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>
   );
 };

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;
   }
 }

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/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

src/plugins/discover/public/application/components/top_nav/open_search_panel.tsx

@@ -55,7 +55,7 @@
 export function OpenSearchPanel({ onClose, makeUrl }: Props) {
   const {
     services: {
-      core: { uiSettings, savedObjects },
+      core: { uiSettings, savedObjects, application },
       addBasePath,
     },
   } = useOpenSearchDashboards<DiscoverViewServices>();
@@ -90,12 +90,8 @@
             },
           ]}
           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}

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'),
     },
   ];
 }

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,
         },
       };
 

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;
+        }
+      }
+    }
+  }
+}