[Lens] Fix filters reappearing in the saved object when saving (#110460)

* bugs fixed * test for loading * fix workspace panel * Update x-pack/plugins/lens/public/xy_visualization/visualization.tsx * revert useEffect for external embeddables
elastic · Aug 31, 2021 · 0346951 · 0346951
1 parent 7ebed93
commit 0346951
Show file tree

Hide file tree

Showing 9 changed files with 177 additions and 135 deletions.
diff --git a/x-pack/plugins/lens/public/app_plugin/mounter.tsx b/x-pack/plugins/lens/public/app_plugin/mounter.tsx
@@ -37,6 +37,7 @@ import {
   navigateAway,
   LensRootStore,
   loadInitial,
+  LensAppState,
   LensState,
 } from '../state_management';
 import { getPreloadedState } from '../state_management/lens_slice';
@@ -186,8 +187,9 @@ export async function mountApp(
     embeddableEditorIncomingState,
     initialContext,
   };
+  const emptyState = getPreloadedState(storeDeps) as LensAppState;
   const lensStore: LensRootStore = makeConfigureStore(storeDeps, {
-    lens: getPreloadedState(storeDeps),
+    lens: emptyState,
   } as DeepPartial<LensState>);
 
   const EditorRenderer = React.memo(
@@ -200,7 +202,8 @@ export async function mountApp(
       );
       trackUiEvent('loaded');
       const initialInput = getInitialInput(props.id, props.editByValue);
-      lensStore.dispatch(loadInitial({ redirectCallback, initialInput }));
+
+      lensStore.dispatch(loadInitial({ redirectCallback, initialInput, emptyState }));
 
       return (
         <Provider store={lensStore}>

diff --git a/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx b/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx
@@ -10,18 +10,18 @@ import { i18n } from '@kbn/i18n';
 import { METRIC_TYPE } from '@kbn/analytics';
 import { partition } from 'lodash';
 
-import type { ChromeStart, NotificationsStart, SavedObjectReference } from 'kibana/public';
+import type { SavedObjectReference } from 'kibana/public';
 import { SaveModal } from './save_modal';
 import type { LensAppProps, LensAppServices } from './types';
 import type { SaveProps } from './app';
 import { Document, injectFilterReferences } from '../persistence';
 import type { LensByReferenceInput, LensEmbeddableInput } from '../embeddable';
-import type { LensAttributeService } from '../lens_attribute_service';
-import { DataPublicPluginStart, esFilters } from '../../../../../src/plugins/data/public';
+import { esFilters } from '../../../../../src/plugins/data/public';
 import { APP_ID, getFullPath, LENS_EMBEDDABLE_TYPE } from '../../common';
 import { trackUiEvent } from '../lens_ui_telemetry';
 import { checkForDuplicateTitle } from '../../../../../src/plugins/saved_objects/public';
 import type { LensAppState } from '../state_management';
+import { getPersisted } from '../state_management/init_middleware/load_initial';
 
 type ExtraProps = Pick<LensAppProps, 'initialInput'> &
   Partial<Pick<LensAppProps, 'redirectToOrigin' | 'redirectTo' | 'onAppLeave'>>;
@@ -51,54 +51,41 @@ export function SaveModalContainer({
   redirectToOrigin,
   getAppNameFromId = () => undefined,
   isSaveable = true,
-  lastKnownDoc: initLastKnowDoc,
+  lastKnownDoc: initLastKnownDoc,
   lensServices,
 }: SaveModalContainerProps) {
-  const [lastKnownDoc, setLastKnownDoc] = useState<Document | undefined>(initLastKnowDoc);
   let title = '';
   let description;
   let savedObjectId;
+  const [lastKnownDoc, setLastKnownDoc] = useState<Document | undefined>(initLastKnownDoc);
   if (lastKnownDoc) {
     title = lastKnownDoc.title;
     description = lastKnownDoc.description;
     savedObjectId = lastKnownDoc.savedObjectId;
   }
 
-  const {
-    attributeService,
-    notifications,
-    data,
-    chrome,
-    savedObjectsTagging,
-    application,
-    dashboardFeatureFlag,
-  } = lensServices;
+  const { attributeService, savedObjectsTagging, application, dashboardFeatureFlag } = lensServices;
 
   useEffect(() => {
-    setLastKnownDoc(initLastKnowDoc);
-  }, [initLastKnowDoc]);
+    setLastKnownDoc(initLastKnownDoc);
+  }, [initLastKnownDoc]);
 
   useEffect(() => {
     let isMounted = true;
-    async function loadPersistedDoc() {
-      if (initialInput) {
-        getPersistedDoc({
-          data,
-          initialInput,
-          chrome,
-          notifications,
-          attributeService,
-        }).then((doc) => {
-          if (doc && isMounted) setLastKnownDoc(doc);
-        });
-      }
+
+    if (initialInput) {
+      getPersisted({
+        initialInput,
+        lensServices,
+      }).then((persisted) => {
+        if (persisted?.doc && isMounted) setLastKnownDoc(persisted.doc);
+      });
     }
 
-    loadPersistedDoc();
     return () => {
       isMounted = false;
     };
-  }, [chrome, data, initialInput, notifications, attributeService]);
+  }, [initialInput, lensServices]);
 
   const tagsIds =
     persistedDoc && savedObjectsTagging
@@ -109,27 +96,25 @@ export function SaveModalContainer({
     if (runSave) {
       // inside lens, we use the function that's passed to it
       runSave(saveProps, options);
-    } else {
-      if (attributeService && lastKnownDoc) {
-        runSaveLensVisualization(
-          {
-            ...lensServices,
-            lastKnownDoc,
-            initialInput,
-            attributeService,
-            redirectTo,
-            redirectToOrigin,
-            originatingApp,
-            getIsByValueMode: () => false,
-            onAppLeave: () => {},
-          },
-          saveProps,
-          options
-        ).then(() => {
-          onSave?.();
-          onClose();
-        });
-      }
+    } else if (attributeService && lastKnownDoc) {
+      runSaveLensVisualization(
+        {
+          ...lensServices,
+          lastKnownDoc,
+          initialInput,
+          attributeService,
+          redirectTo,
+          redirectToOrigin,
+          originatingApp,
+          getIsByValueMode: () => false,
+          onAppLeave: () => {},
+        },
+        saveProps,
+        options
+      ).then(() => {
+        onSave?.();
+        onClose();
+      });
     }
   };
 
@@ -384,51 +369,5 @@ export function getLastKnownDocWithoutPinnedFilters(doc?: Document) {
     : doc;
 }
 
-export const getPersistedDoc = async ({
-  initialInput,
-  attributeService,
-  data,
-  notifications,
-  chrome,
-}: {
-  initialInput: LensEmbeddableInput;
-  attributeService: LensAttributeService;
-  data: DataPublicPluginStart;
-  notifications: NotificationsStart;
-  chrome: ChromeStart;
-}): Promise<Document | undefined> => {
-  let doc: Document;
-
-  try {
-    const attributes = await attributeService.unwrapAttributes(initialInput);
-
-    doc = {
-      ...initialInput,
-      ...attributes,
-      type: LENS_EMBEDDABLE_TYPE,
-    };
-
-    if (attributeService.inputIsRefType(initialInput)) {
-      chrome.recentlyAccessed.add(
-        getFullPath(initialInput.savedObjectId),
-        attributes.title,
-        initialInput.savedObjectId
-      );
-    }
-
-    // Don't overwrite any pinned filters
-    data.query.filterManager.setAppFilters(
-      injectFilterReferences(doc.state.filters, doc.references)
-    );
-    return doc;
-  } catch (e) {
-    notifications.toasts.addDanger(
-      i18n.translate('xpack.lens.app.docLoadingError', {
-        defaultMessage: 'Error loading saved document',
-      })
-    );
-  }
-};
-
 // eslint-disable-next-line import/no-default-export
 export default SaveModalContainer;
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx
@@ -230,7 +230,7 @@ describe('editor_frame', () => {
         await mountWithProvider(<EditorFrame {...props} />, {
           data: props.plugins.data,
           preloadedState: {
-            visualization: { activeId: 'testVis', state: null },
+            visualization: { activeId: 'testVis', state: {} },
             datasourceStates: {
               testDatasource: {
                 isLoading: false,
@@ -285,7 +285,7 @@ describe('editor_frame', () => {
         await mountWithProvider(<EditorFrame {...props} />, {
           data: props.plugins.data,
           preloadedState: {
-            visualization: { activeId: 'testVis', state: null },
+            visualization: { activeId: 'testVis', state: {} },
             datasourceStates: {
               testDatasource: {
                 isLoading: false,

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx
@@ -45,7 +45,8 @@ export function EditorFrame(props: EditorFrameProps) {
   const activeDatasourceId = useLensSelector(selectActiveDatasourceId);
   const datasourceStates = useLensSelector(selectDatasourceStates);
   const visualization = useLensSelector(selectVisualization);
-  const allLoaded = useLensSelector(selectAreDatasourcesLoaded);
+  const areDatasourcesLoaded = useLensSelector(selectAreDatasourcesLoaded);
+  const isVisualizationLoaded = !!visualization.state;
   const framePublicAPI: FramePublicAPI = useLensSelector((state) =>
     selectFramePublicAPI(state, datasourceMap)
   );
@@ -95,7 +96,7 @@ export function EditorFrame(props: EditorFrameProps) {
           />
         }
         configPanel={
-          allLoaded && (
+          areDatasourcesLoaded && (
             <ConfigPanelWrapper
               core={props.core}
               datasourceMap={datasourceMap}
@@ -105,7 +106,8 @@ export function EditorFrame(props: EditorFrameProps) {
           )
         }
         workspacePanel={
-          allLoaded && (
+          areDatasourcesLoaded &&
+          isVisualizationLoaded && (
             <WorkspacePanel
               core={props.core}
               plugins={props.plugins}
@@ -119,7 +121,7 @@ export function EditorFrame(props: EditorFrameProps) {
           )
         }
         suggestionsPanel={
-          allLoaded && (
+          areDatasourcesLoaded && (
             <SuggestionPanelWrapper
               ExpressionRenderer={props.ExpressionRenderer}
               datasourceMap={datasourceMap}

diff --git a/x-pack/plugins/lens/public/mocks.tsx b/x-pack/plugins/lens/public/mocks.tsx
@@ -208,12 +208,14 @@ export const defaultDoc = ({
   savedObjectId: '1234',
   title: 'An extremely cool default document!',
   expression: 'definitely a valid expression',
+  visualizationType: 'testVis',
   state: {
     query: 'kuery',
     filters: [{ query: { match_phrase: { src: 'test' } } }],
     datasourceStates: {
       testDatasource: 'datasource',
     },
+    visualization: {},
   },
   references: [{ type: 'index-pattern', id: '1', name: 'index-pattern-0' }],
 } as unknown) as Document;

diff --git a/x-pack/plugins/lens/public/state_management/init_middleware/index.ts b/x-pack/plugins/lens/public/state_management/init_middleware/index.ts
@@ -23,7 +23,8 @@ export const initMiddleware = (storeDeps: LensStoreDeps) => (store: MiddlewareAP
         store,
         storeDeps,
         action.payload.redirectCallback,
-        action.payload.initialInput
+        action.payload.initialInput,
+        action.payload.emptyState
       );
     } else if (lensSlice.actions.navigateAway.match(action)) {
       return unsubscribeFromExternalContext();