[Data Explorer] Persisted state and syncing, shared context, linking state to component + smaller changes

.github/workflows/build_and_test_workflow.yml

@@ -3,10 +3,10 @@
 
 name: Build and test
 
-# trigger on every commit push and PR for all branches except pushes for backport branches
+# trigger on every commit push and PR for all branches except pushes for backport branches and feature branches
 on:
   push:
-    branches: ['**', '!backport/**']
+    branches: ['**', '!backport/**', '!feature/**']
     paths-ignore:
       - '**/*.md'
       - 'docs/**'

.github/workflows/cypress_workflow.yml

@@ -1,9 +1,9 @@
 name: Run cypress tests
 
-# trigger on every PR for all branches
+# trigger on every PR for all branches except feature branches
 on:
   pull_request:
-    branches: [ '**' ]
+    branches: [ '**', '!feature/**' ]
     paths-ignore:
       - '**/*.md'
 

src/plugins/data_explorer/public/components/app.tsx

@@ -3,13 +3,34 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 import { AppMountParameters } from '../../../../core/public';
 import { useView } from '../utils/use';
 import { AppContainer } from './app_container';
+import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
+import { DataExplorerServices } from '../types';
+import { syncQueryStateWithUrl } from '../../../data/public';
 
 export const DataExplorerApp = ({ params }: { params: AppMountParameters }) => {
   const { view } = useView();
+  const {
+    services: {
+      data: { query },
+      osdUrlStateStorage,
+    },
+  } = useOpenSearchDashboards<DataExplorerServices>();
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    // syncs `_g` portion of url with query services
+    const { stop } = syncQueryStateWithUrl(query, osdUrlStateStorage);
+
+    return () => stop();
+
+    // this effect should re-run when pathname is changed to preserve querystring part,
+    // so the global state is always preserved
+  }, [query, osdUrlStateStorage, pathname]);
 
   return <AppContainer view={view} params={params} />;
 };

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

@@ -0,0 +1,4 @@
+.deSidebar {
+  max-width: 462px;
+  min-width: 400px;
+}

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

@@ -4,41 +4,36 @@
  */
 
 import React from 'react';
-import { EuiPageTemplate } from '@elastic/eui';
+import { EuiPage, EuiPageBody } from '@elastic/eui';
 import { Suspense } from 'react';
 import { AppMountParameters } from '../../../../core/public';
 import { Sidebar } from './sidebar';
 import { NoView } from './no_view';
 import { View } from '../services/view_service/view';
+import './app_container.scss';
 
 export const AppContainer = ({ view, params }: { view?: View; params: AppMountParameters }) => {
   // TODO: Make this more robust.
   if (!view) {
     return <NoView />;
   }
 
-  const { Canvas, Panel } = view;
+  const { Canvas, Panel, Context } = view;
 
   // Render the application DOM.
-  // Note that `navigation.ui.TopNavMenu` is a stateful component exported on the `navigation` plugin's start contract.
   return (
-    <EuiPageTemplate
-      pageSideBar={
-        <Sidebar>
-          <Suspense fallback={<div>Loading...</div>}>
-            <Panel {...params} />
-          </Suspense>
-        </Sidebar>
-      }
-      className="dePageTemplate"
-      template="default"
-      restrictWidth={false}
-      paddingSize="none"
-    >
+    <EuiPage className="dePage eui-fullHeight" paddingSize="none">
       {/* TODO: improve loading state */}
       <Suspense fallback={<div>Loading...</div>}>
-        <Canvas {...params} />
+        <Context {...params}>
+          <Sidebar>
+            <Panel {...params} />
+          </Sidebar>
+          <EuiPageBody className="eui-fullHeight">
+            <Canvas {...params} />
+          </EuiPageBody>
+        </Context>
       </Suspense>
-    </EuiPageTemplate>
+    </EuiPage>
   );
 };

src/plugins/data_explorer/public/components/sidebar/index.tsx

@@ -5,7 +5,14 @@
 
 import React, { useMemo, FC, useEffect, useState } from 'react';
 import { i18n } from '@osd/i18n';
-import { EuiPanel, EuiComboBox, EuiSelect, EuiComboBoxOptionOption } from '@elastic/eui';
+import {
+  EuiComboBox,
+  EuiSelect,
+  EuiComboBoxOptionOption,
+  EuiSpacer,
+  EuiSplitPanel,
+  EuiPageSideBar,
+} from '@elastic/eui';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { useView } from '../../utils/use';
 import { DataExplorerServices } from '../../types';
@@ -57,43 +64,50 @@
   }, [indexPatternId, options]);
 
   return (
-    <>
-      <EuiPanel borderRadius="none" hasShadow={false}>
-        <EuiComboBox
-          placeholder="Select a datasource"
-          singleSelection={{ asPlainText: true }}
-          options={options}
-          selectedOptions={selectedOption ? [selectedOption] : []}
-          onChange={(selected) => {
-            // TODO: There are many issues with this approach, but it's a start
-            // 1. Combo box can delete a selected index pattern. This should not be possible
-            // 2. Combo box is severely truncated. This should be fixed in the EUI component
-            // 3. The onchange can fire with a option that is not valid. discuss where to handle this.
-            // 4. value is optional. If the combobox needs to act as a slecet, this should be required.
-            const { value } = selected[0] || {};
+    <EuiPageSideBar className="deSidebar" sticky>
+      <EuiSplitPanel.Outer className="eui-yScroll" hasBorder={true} borderRadius="none">
+        <EuiSplitPanel.Inner paddingSize="s" grow={false}>
+          <EuiComboBox
+            placeholder="Select a datasource"
+            singleSelection={{ asPlainText: true }}
+            options={options}
+            selectedOptions={selectedOption ? [selectedOption] : []}
+            fullWidth
+            onChange={(selected) => {
+              // TODO: There are many issues with this approach, but it's a start
+              // 1. Combo box can delete a selected index pattern. This should not be possible
+              // 2. Combo box is severely truncated. This should be fixed in the EUI component
+              // 3. The onchange can fire with a option that is not valid. discuss where to handle this.
+              // 4. value is optional. If the combobox needs to act as a slecet, this should be required.
+              const { value } = selected[0] || {};
 
-            if (!value) {
-              toasts.addWarning({
-                id: 'index-pattern-not-found',
-                title: i18n.translate('dataExplorer.indexPatternError', {
-                  defaultMessage: 'Index pattern not found',
-                }),
-              });
-              return;
-            }
+              if (!value) {
+                toasts.addWarning({
+                  id: 'index-pattern-not-found',
+                  title: i18n.translate('dataExplorer.indexPatternError', {
+                    defaultMessage: 'Index pattern not found',
+                  }),
+                });
+                return;
+              }
 
-            dispatch(setIndexPattern(value));
-          }}
-        />
-        <EuiSelect
-          options={viewOptions}
-          value={view?.id}
-          onChange={(e) => {
-            dispatch(setView(e.target.value));
-          }}
-        />
-      </EuiPanel>
-      {children}
-    </>
+              dispatch(setIndexPattern(value));
+            }}
+          />
+          <EuiSpacer size="s" />
+          <EuiSelect
+            options={viewOptions}
+            value={view?.id}
+            onChange={(e) => {
+              dispatch(setView(e.target.value));
+            }}
+            fullWidth
+          />
+        </EuiSplitPanel.Inner>
+        <EuiSplitPanel.Inner paddingSize="none" color="subdued" className="eui-yScroll">
+          {children}
+        </EuiSplitPanel.Inner>
+      </EuiSplitPanel.Outer>
+    </EuiPageSideBar>
   );
 };

src/plugins/data_explorer/public/index.ts

@@ -12,6 +12,6 @@ import { DataExplorerPlugin } from './plugin';
 export function plugin() {
   return new DataExplorerPlugin();
 }
-export { DataExplorerPluginSetup, DataExplorerPluginStart, ViewRedirectParams } from './types';
+export { DataExplorerPluginSetup, DataExplorerPluginStart, DataExplorerServices } from './types';
 export { ViewProps, ViewDefinition } from './services/view_service';
 export { RootState, useTypedSelector, useTypedDispatch } from './utils/state_management';

src/plugins/data_explorer/public/services/view_service/types.ts

@@ -7,8 +7,6 @@ import { Slice } from '@reduxjs/toolkit';
 import { LazyExoticComponent } from 'react';
 import { AppMountParameters } from '../../../../../core/public';
 
-// TODO: State management props
-
 interface ViewListItem {
   id: string;
   label: string;
@@ -25,6 +23,9 @@ export interface ViewDefinition<T = any> {
   };
   readonly Canvas: LazyExoticComponent<(props: ViewProps) => React.ReactElement>;
   readonly Panel: LazyExoticComponent<(props: ViewProps) => React.ReactElement>;
+  readonly Context: LazyExoticComponent<
+    (props: React.PropsWithChildren<ViewProps>) => React.ReactElement
+  >;
   readonly defaultPath: string;
   readonly appExtentions: {
     savedObject: {

src/plugins/data_explorer/public/services/view_service/view.ts

@@ -15,6 +15,7 @@ export class View implements IView {
   readonly shouldShow?: (state: any) => boolean;
   readonly Canvas: IView['Canvas'];
   readonly Panel: IView['Panel'];
+  readonly Context: IView['Context'];
 
   constructor(options: ViewDefinition) {
     this.id = options.id;
@@ -25,5 +26,6 @@ export class View implements IView {
     this.shouldShow = options.shouldShow;
     this.Canvas = options.Canvas;
     this.Panel = options.Panel;
+    this.Context = options.Context;
   }
 }

src/plugins/data_explorer/public/types.ts

@@ -26,11 +26,6 @@ export interface DataExplorerPluginStartDependencies {
   data: DataPublicPluginStart;
 }
 
-export interface ViewRedirectParams {
-  view: string;
-  path?: string;
-}
-
 export interface DataExplorerServices extends CoreStart {
   store?: Store;
   viewRegistry: ViewServiceStart;

src/plugins/data_explorer/public/utils/state_management/store.ts

@@ -3,19 +3,21 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
 import { combineReducers, configureStore, PreloadedState, Reducer, Slice } from '@reduxjs/toolkit';
 import { isEqual } from 'lodash';
-import { Provider } from 'react-redux';
-import { reducer as metadataReducer, MetadataState } from './metadata_slice';
+import { reducer as metadataReducer } from './metadata_slice';
 import { loadReduxState, persistReduxState } from './redux_persistence';
 import { DataExplorerServices } from '../../types';
 
-const dynamicReducers: {
-  metadata: Reducer<MetadataState>;
+const commonReducers = {
+  metadata: metadataReducer,
+};
+
+let dynamicReducers: {
+  metadata: typeof metadataReducer;
   [key: string]: Reducer;
 } = {
-  metadata: metadataReducer,
+  ...commonReducers,
 };
 
 const rootReducer = combineReducers(dynamicReducers);
@@ -60,7 +62,15 @@
   // the store subscriber will automatically detect changes and call handleChange function
   const unsubscribe = store.subscribe(handleChange);
 
-  return { store, unsubscribe };
+  const onUnsubscribe = () => {
+    dynamicReducers = {
+      ...commonReducers,
+    };
+
+    unsubscribe();
+  };
+
+  return { store, unsubscribe: onUnsubscribe };
 };
 
 export const registerSlice = (slice: Slice) => {

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

@@ -10,7 +10,7 @@ import { fetchTableDataCell } from './data_grid_table_cell_value';
 import { buildDataGridColumns, computeVisibleColumns } from './data_grid_table_columns';
 import { DocViewExpandButton } from './data_grid_table_docview_expand_button';
 import { DataGridFlyout } from './data_grid_table_flyout';
-import { DataGridContext } from './data_grid_table_context';
+import { DiscoverGridContextProvider } from './data_grid_table_context';
 import { toolbarVisibility } from './constants';
 import { DocViewFilterFn } from '../../doc_views/doc_views_types';
 import { DiscoverServices } from '../../../build_services';
@@ -44,7 +44,7 @@ export const DataGridTable = ({
   displayTimeColumn,
   services,
 }: DataGridTableProps) => {
-  const [docViewExpand, setDocViewExpand] = useState(undefined);
+  const [expandedHit, setExpandedHit] = useState<OpenSearchSearchHit | undefined>();
   const rowCount = useMemo(() => (rows ? rows.length : 0), [rows]);
   const pagination = usePagination(rowCount);
 
@@ -94,11 +94,11 @@ export const DataGridTable = ({
   }, []);
 
   return (
-    <DataGridContext.Provider
+    <DiscoverGridContextProvider
       value={{
-        docViewExpand,
+        expandedHit,
         onFilter,
-        setDocViewExpand,
+        setExpandedHit,
         rows: rows || [],
         indexPattern,
       }}
@@ -116,19 +116,19 @@ export const DataGridTable = ({
           sorting={sorting}
           toolbarVisibility={toolbarVisibility}
         />
-        {docViewExpand && (
+        {expandedHit && (
           <DataGridFlyout
             indexPattern={indexPattern}
-            hit={docViewExpand}
+            hit={expandedHit}
             columns={columns}
             onRemoveColumn={onRemoveColumn}
             onAddColumn={onAddColumn}
             onFilter={onFilter}
-            onClose={() => setDocViewExpand(undefined)}
+            onClose={() => setExpandedHit(undefined)}
             services={services}
           />
         )}
       </>
-    </DataGridContext.Provider>
+    </DiscoverGridContextProvider>
   );
 };

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

@@ -5,13 +5,13 @@
 
 import React from 'react';
 import { IndexPattern } from '../../../opensearch_dashboards_services';
-import { DocViewFilterFn } from '../../doc_views/doc_views_types';
+import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types';
 
 export interface DataGridContextProps {
-  docViewExpand: any;
+  expandedHit?: OpenSearchSearchHit;
   onFilter: DocViewFilterFn;
-  setDocViewExpand: (hit: any) => void;
-  rows: any[];
+  setExpandedHit: (hit?: OpenSearchSearchHit) => void;
+  rows: OpenSearchSearchHit[];
   indexPattern: IndexPattern;
 }