[Lens] Move dataViews cache into main Lens state (#137309)

* Move lens dataViews state into main state * 🔥 Remove some old cruft from the code * 🐛 Fix dataViews layer change * 🐛 Fix datasourceLayers refs * 🔥 Remove more old cruft * 🐛 Fix bug when loading SO * 🐛 Fix initial existence flag * 🏷️ Fix type issues * 🏷️ Fix types and tests * 🏷️ Fix types issues * ✅ Fix more tests * ✅ Fix with new dataViews structure * ✅ Fix more test mocks * ✅ More tests fixed * 🔥 Removed unused prop * ✅ Down to single broken test suite * 🏷️ Fix type issue * 👌 Integrate selector feedback * ✅ Fix remaining unit tests * 🏷️ fix type issues * 🐛 Fix bug when creating dataview in place * 🐛 Fix edit + remove field flow * Update x-pack/plugins/lens/public/visualizations/xy/types.ts * 📸 Fix snapshot * 🐛 Fix the dataViews switch bug * 🔥 remove old cruft Co-authored-by: Joe Reuter <[email protected]>
elastic · Aug 12, 2022 · 137994f · 137994f
1 parent 339f906
commit 137994f
Show file tree

Hide file tree

Showing 145 changed files with 4,082 additions and 2,909 deletions.
diff --git a/x-pack/plugins/lens/public/app_plugin/__snapshots__/app.test.tsx.snap b/x-pack/plugins/lens/public/app_plugin/__snapshots__/app.test.tsx.snap
diff --git a/x-pack/plugins/lens/public/app_plugin/app.test.tsx b/x-pack/plugins/lens/public/app_plugin/app.test.tsx
@@ -477,7 +477,7 @@ describe('Lens App', () => {
       expect(services.navigation.ui.TopNavMenu).toHaveBeenCalledWith(
         expect.objectContaining({
           query: 'fake query',
-          indexPatterns: [{ id: 'mockip', isTimeBased: expect.any(Function) }],
+          indexPatterns: [{ id: 'mockip', isTimeBased: expect.any(Function), fields: [] }],
         }),
         {}
       );

diff --git a/x-pack/plugins/lens/public/app_plugin/app.tsx b/x-pack/plugins/lens/public/app_plugin/app.tsx
@@ -25,11 +25,13 @@ import {
   LensAppState,
   DispatchSetState,
   selectSavedObjectFormat,
+  updateIndexPatterns,
 } from '../state_management';
 import { SaveModalContainer, runSaveLensVisualization } from './save_modal_container';
 import { LensInspector } from '../lens_inspector_service';
 import { getEditPath } from '../../common';
 import { isLensEqual } from './lens_document_equality';
+import { IndexPatternServiceAPI, createIndexPatternService } from '../indexpattern_service/service';
 
 export type SaveProps = Omit<OnSaveProps, 'onTitleDuplicate' | 'newDescription'> & {
   returnToOrigin: boolean;
@@ -66,6 +68,7 @@ export function App({
     getOriginatingAppName,
     spaces,
     http,
+    notifications,
     executionContext,
     // Temporarily required until the 'by value' paradigm is default.
     dashboardFeatureFlag,
@@ -360,6 +363,22 @@ export function App({
     );
   }, [initialContext]);
 
+  const indexPatternService = useMemo(
+    () =>
+      createIndexPatternService({
+        dataViews: lensAppServices.dataViews,
+        uiSettings: lensAppServices.uiSettings,
+        core: { http, notifications },
+        updateIndexPatterns: (newIndexPatternsState, options) => {
+          dispatch(updateIndexPatterns(newIndexPatternsState));
+          if (options?.applyImmediately) {
+            dispatch(applyChanges());
+          }
+        },
+      }),
+    [dispatch, http, notifications, lensAppServices]
+  );
+
   return (
     <>
       <div className="lnsApp" data-test-subj="lnsApp">
@@ -381,13 +400,15 @@ export function App({
           topNavMenuEntryGenerators={topNavMenuEntryGenerators}
           initialContext={initialContext}
           theme$={theme$}
+          indexPatternService={indexPatternService}
         />
         {getLegacyUrlConflictCallout()}
         {(!isLoading || persistedDoc) && (
           <MemoizedEditorFrameWrapper
             editorFrame={editorFrame}
             showNoDataPopover={showNoDataPopover}
             lensInspector={lensInspector}
+            indexPatternService={indexPatternService}
           />
         )}
       </div>
@@ -449,13 +470,19 @@ const MemoizedEditorFrameWrapper = React.memo(function EditorFrameWrapper({
   editorFrame,
   showNoDataPopover,
   lensInspector,
+  indexPatternService,
 }: {
   editorFrame: EditorFrameInstance;
   lensInspector: LensInspector;
   showNoDataPopover: () => void;
+  indexPatternService: IndexPatternServiceAPI;
 }) {
   const { EditorFrameContainer } = editorFrame;
   return (
-    <EditorFrameContainer showNoDataPopover={showNoDataPopover} lensInspector={lensInspector} />
+    <EditorFrameContainer
+      showNoDataPopover={showNoDataPopover}
+      lensInspector={lensInspector}
+      indexPatternService={indexPatternService}
+    />
   );
 });
diff --git a/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx b/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx
@@ -15,7 +15,6 @@ import { tableHasFormulas } from '@kbn/data-plugin/common';
 import { exporters, getEsQueryConfig } from '@kbn/data-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import type { StateSetter } from '../types';
 import {
   LensAppServices,
   LensTopNavActions,
@@ -29,16 +28,15 @@ import {
   useLensDispatch,
   LensAppState,
   DispatchSetState,
-  updateDatasourceState,
 } from '../state_management';
 import {
   getIndexPatternsObjects,
   getIndexPatternsIds,
   getResolvedDateRange,
-  handleIndexPatternChange,
   refreshIndexPatternsList,
 } from '../utils';
 import { combineQueryAndFilters, getLayerMetaInfo } from './show_underlying_data';
+import { changeIndexPattern } from '../state_management/lens_slice';
 
 function getLensTopNavConfig(options: {
   showSaveAndReturn: boolean;
@@ -219,6 +217,7 @@ export const LensTopNavMenu = ({
   topNavMenuEntryGenerators,
   initialContext,
   theme$,
+  indexPatternService,
 }: LensTopNavMenuProps) => {
   const {
     data,
@@ -231,14 +230,59 @@ export const LensTopNavMenu = ({
     dashboardFeatureFlag,
     dataViewFieldEditor,
     dataViewEditor,
-    dataViews,
+    dataViews: dataViewsService,
   } = useKibana<LensAppServices>().services;
 
+  const {
+    isSaveable,
+    isLinkedToOriginatingApp,
+    query,
+    activeData,
+    savedQuery,
+    activeDatasourceId,
+    datasourceStates,
+    visualization,
+    filters,
+    dataViews,
+  } = useLensSelector((state) => state.lens);
+
   const dispatch = useLensDispatch();
   const dispatchSetState: DispatchSetState = React.useCallback(
     (state: Partial<LensAppState>) => dispatch(setState(state)),
     [dispatch]
   );
+  const dispatchChangeIndexPattern = React.useCallback(
+    async (indexPatternId) => {
+      const [newIndexPatternRefs, newIndexPatterns] = await Promise.all([
+        // Reload refs in case it's a new indexPattern created on the spot
+        dataViews.indexPatternRefs[indexPatternId]
+          ? dataViews.indexPatternRefs
+          : indexPatternService.loadIndexPatternRefs({
+              isFullEditor: true,
+            }),
+        indexPatternService.ensureIndexPattern({
+          id: indexPatternId,
+          cache: dataViews.indexPatterns,
+        }),
+      ]);
+      dispatch(
+        changeIndexPattern({
+          dataViews: { indexPatterns: newIndexPatterns, indexPatternRefs: newIndexPatternRefs },
+          datasourceIds: Object.keys(datasourceStates),
+          visualizationIds: visualization.activeId ? [visualization.activeId] : [],
+          indexPatternId,
+        })
+      );
+    },
+    [
+      dataViews.indexPatternRefs,
+      dataViews.indexPatterns,
+      datasourceStates,
+      dispatch,
+      indexPatternService,
+      visualization.activeId,
+    ]
+  );
 
   const [indexPatterns, setIndexPatterns] = useState<DataView[]>([]);
   const [currentIndexPattern, setCurrentIndexPattern] = useState<DataView>();
@@ -247,18 +291,6 @@ export const LensTopNavMenu = ({
   const closeFieldEditor = useRef<() => void | undefined>();
   const closeDataViewEditor = useRef<() => void | undefined>();
 
-  const {
-    isSaveable,
-    isLinkedToOriginatingApp,
-    query,
-    activeData,
-    savedQuery,
-    activeDatasourceId,
-    datasourceStates,
-    visualization,
-    filters,
-  } = useLensSelector((state) => state.lens);
-
   const allLoaded = Object.values(datasourceStates).every(({ isLoading }) => isLoading === false);
 
   useEffect(() => {
@@ -290,7 +322,7 @@ export const LensTopNavMenu = ({
 
     // Update the cached index patterns if the user made a change to any of them
     if (hasIndexPatternsChanged) {
-      getIndexPatternsObjects(indexPatternIds, dataViews).then(
+      getIndexPatternsObjects(indexPatternIds, dataViewsService).then(
         ({ indexPatterns: indexPatternObjects, rejectedIds }) => {
           setIndexPatterns(indexPatternObjects);
           setRejectedIndexPatterns(rejectedIds);
@@ -303,7 +335,7 @@ export const LensTopNavMenu = ({
     rejectedIndexPatterns,
     datasourceMap,
     indexPatterns,
-    dataViews,
+    dataViewsService,
   ]);
 
   useEffect(() => {
@@ -366,6 +398,7 @@ export const LensTopNavMenu = ({
       datasourceMap[activeDatasourceId],
       datasourceStates[activeDatasourceId].state,
       activeData,
+      dataViews.indexPatterns,
       data.query.timefilter.timefilter.getTime(),
       application.capabilities
     );
@@ -375,6 +408,7 @@ export const LensTopNavMenu = ({
     datasourceMap,
     datasourceStates,
     activeData,
+    dataViews.indexPatterns,
     data.query.timefilter.timefilter,
     application.capabilities,
   ]);
@@ -604,20 +638,8 @@ export const LensTopNavMenu = ({
     });
   }, [data.query.filterManager, data.query.queryString, dispatchSetState]);
 
-  const setDatasourceState: StateSetter<unknown> = useMemo(() => {
-    return (updater) => {
-      dispatch(
-        updateDatasourceState({
-          updater,
-          datasourceId: activeDatasourceId!,
-          clearStagedPreview: true,
-        })
-      );
-    };
-  }, [activeDatasourceId, dispatch]);
-
   const refreshFieldList = useCallback(async () => {
-    if (currentIndexPattern && currentIndexPattern.id) {
+    if (currentIndexPattern?.id) {
       refreshIndexPatternsList({
         activeDatasources: Object.keys(datasourceStates).reduce(
           (acc, datasourceId) => ({
@@ -627,7 +649,8 @@ export const LensTopNavMenu = ({
           {}
         ),
         indexPatternId: currentIndexPattern.id,
-        setDatasourceState,
+        indexPatternService,
+        indexPatternsCache: dataViews.indexPatterns,
       });
     }
     // start a new session so all charts are refreshed
@@ -637,7 +660,8 @@ export const LensTopNavMenu = ({
     data.search.session,
     datasourceMap,
     datasourceStates,
-    setDatasourceState,
+    indexPatternService,
+    dataViews.indexPatterns,
   ]);
 
   const editField = useMemo(
@@ -679,32 +703,14 @@ export const LensTopNavMenu = ({
             closeDataViewEditor.current = dataViewEditor.openEditor({
               onSave: async (dataView) => {
                 if (dataView.id) {
-                  handleIndexPatternChange({
-                    activeDatasources: Object.keys(datasourceStates).reduce(
-                      (acc, datasourceId) => ({
-                        ...acc,
-                        [datasourceId]: datasourceMap[datasourceId],
-                      }),
-                      {}
-                    ),
-                    datasourceStates,
-                    indexPatternId: dataView.id,
-                    setDatasourceState,
-                  });
+                  dispatchChangeIndexPattern(dataView.id);
                   refreshFieldList();
                 }
               },
             });
           }
         : undefined,
-    [
-      dataViewEditor,
-      canEditDataView,
-      datasourceMap,
-      datasourceStates,
-      refreshFieldList,
-      setDatasourceState,
-    ]
+    [canEditDataView, dataViewEditor, dispatchChangeIndexPattern, refreshFieldList]
   );
 
   const dataViewPickerProps = {
@@ -721,18 +727,7 @@ export const LensTopNavMenu = ({
         (indexPattern) => indexPattern.id === newIndexPatternId
       );
       setCurrentIndexPattern(currentDataView);
-      handleIndexPatternChange({
-        activeDatasources: Object.keys(datasourceStates).reduce(
-          (acc, datasourceId) => ({
-            ...acc,
-            [datasourceId]: datasourceMap[datasourceId],
-          }),
-          {}
-        ),
-        datasourceStates,
-        indexPatternId: newIndexPatternId,
-        setDatasourceState,
-      });
+      dispatchChangeIndexPattern(newIndexPatternId);
     },
   };
 
@@ -759,7 +754,8 @@ export const LensTopNavMenu = ({
           allLoaded &&
             activeDatasourceId &&
             datasourceMap[activeDatasourceId].isTimeBased(
-              datasourceStates[activeDatasourceId].state
+              datasourceStates[activeDatasourceId].state,
+              dataViews.indexPatterns
             )
         )
       }

diff --git a/x-pack/plugins/lens/public/app_plugin/mounter.tsx b/x-pack/plugins/lens/public/app_plugin/mounter.tsx
@@ -223,7 +223,7 @@ export async function mountApp(
   };
   const lensStore: LensRootStore = makeConfigureStore(storeDeps, {
     lens: getPreloadedState(storeDeps) as LensAppState,
-  } as PreloadedState<LensState>);
+  } as unknown as PreloadedState<LensState>);
 
   const EditorRenderer = React.memo(
     (props: { id?: string; history: History<unknown>; editByValue?: boolean }) => {