[Lens][Example] Change custom link example to point to playground (#126345)

* ✨ Change custom link to point to playground

* 🐛 Add filters when navigating to playground

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/examples/testing_embedded_lens/public/app.tsx

@@ -372,6 +372,7 @@ export const App = (props: {
   plugins: StartDependencies;
   defaultDataView: DataView;
   stateHelpers: Awaited<ReturnType<LensPublicStart['stateHelperApi']>>;
+  preloadedVisualization: TypedLensByValueInput['attributes'];
 }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [isSaveModalVisible, setIsSaveModalVisible] = useState(false);
@@ -380,7 +381,11 @@ export const App = (props: {
   const [enableTriggers, toggleTriggers] = useState(false);
   const [loadedCharts, addChartConfiguration] = useState<
     Array<{ id: string; attributes: TypedLensByValueInput['attributes'] }>
-  >([]);
+  >(
+    props.preloadedVisualization
+      ? [{ id: 'from_lens', attributes: props.preloadedVisualization }]
+      : []
+  );
   const [hasParsingError, setErrorFlag] = useState(false);
   const [hasParsingErrorDebounced, setErrorDebounced] = useState(hasParsingError);
   const LensComponent = props.plugins.lens.EmbeddableComponent;
@@ -414,8 +419,11 @@ export const App = (props: {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const charts = useMemo(() => [...defaultCharts, ...loadedCharts], [loadedCharts]);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const initialAttributes = useMemo(() => JSON.stringify(charts[0].attributes, null, 2), []);
+  const initialAttributes = useMemo(
+    () => JSON.stringify(props.preloadedVisualization ?? charts[0].attributes, null, 2),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
 
   const currentSO = useRef<string>(initialAttributes);
   const [currentValid, saveValidSO] = useState(initialAttributes);

x-pack/examples/testing_embedded_lens/public/mount.tsx

@@ -11,26 +11,30 @@ import { EuiCallOut } from '@elastic/eui';
 
 import type { CoreSetup, AppMountParameters } from 'kibana/public';
 import type { StartDependencies } from './plugin';
+import type { TypedLensByValueInput } from '../../../plugins/lens/public';
 
 export const mount =
   (coreSetup: CoreSetup<StartDependencies>) =>
-  async ({ element }: AppMountParameters) => {
+  async ({ element, history }: AppMountParameters) => {
     const [core, plugins] = await coreSetup.getStartServices();
     const { App } = await import('./app');
+    const preloadedVisualizationAttributes = history.location
+      ?.state as TypedLensByValueInput['attributes'];
 
-    const defaultDataView = await plugins.data.indexPatterns.getDefault();
+    const dataView = await plugins.data.indexPatterns.getDefault();
     const stateHelpers = await plugins.lens.stateHelperApi();
 
     const i18nCore = core.i18n;
 
     const reactElement = (
       <i18nCore.Context>
-        {defaultDataView ? (
+        {dataView ? (
           <App
             core={core}
             plugins={plugins}
-            defaultDataView={defaultDataView}
+            defaultDataView={dataView}
             stateHelpers={stateHelpers}
+            preloadedVisualization={preloadedVisualizationAttributes}
           />
         ) : (
           <EuiCallOut

x-pack/examples/third_party_lens_navigation_prompt/kibana.json

@@ -7,7 +7,6 @@
   "ui": true,
   "requiredPlugins": [
     "lens",
-    "discover",
     "data",
     "dataViews",
     "embeddable",

x-pack/examples/third_party_lens_navigation_prompt/public/plugin.ts

@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { DiscoverSetup } from 'src/plugins/discover/public';
 import { DataPublicPluginStart } from 'src/plugins/data/public';
 import { Plugin, CoreSetup, AppNavLinkStatus } from '../../../../src/core/public';
 import { DataViewsPublicPluginStart, DataView } from '../../../../src/plugins/data_views/public';
@@ -22,7 +21,6 @@ import image from './image.png';
 export interface SetupDependencies {
   developerExamples: DeveloperExamplesSetup;
   lens: LensPublicSetup;
-  discover: DiscoverSetup;
 }
 
 export interface StartDependencies {
@@ -94,10 +92,7 @@ function getLensAttributes(defaultDataView: DataView): TypedLensByValueInput['at
 export class EmbeddedLensExamplePlugin
   implements Plugin<void, void, SetupDependencies, StartDependencies>
 {
-  public setup(
-    core: CoreSetup<StartDependencies>,
-    { developerExamples, lens, discover }: SetupDependencies
-  ) {
+  public setup(core: CoreSetup<StartDependencies>, { developerExamples, lens }: SetupDependencies) {
     core.application.register({
       id: 'third_party_lens_navigation_prompt',
       title: 'Third party Lens navigation prompt',
@@ -123,7 +118,7 @@ export class EmbeddedLensExamplePlugin
       appId: 'third_party_lens_navigation_prompt',
       title: 'Third party Lens navigation prompt',
       description:
-        'Add custom menu entries to the Lens editor, like the "Go to discover" link in this example.',
+        'Add custom menu entries to the Lens editor, like the "Debug in Playground" link in this example.',
       image,
       links: [
         {
@@ -136,33 +131,54 @@ export class EmbeddedLensExamplePlugin
       ],
     });
 
-    if (!discover.locator) return;
-    lens.registerTopNavMenuEntryGenerator(({ datasourceStates, query, filters }) => {
-      if (!datasourceStates.indexpattern.state) return;
+    lens.registerTopNavMenuEntryGenerator(
+      ({ visualizationId, visualizationState, datasourceStates, query, filters }) => {
+        if (!datasourceStates.indexpattern.state || !visualizationState) return;
 
-      return {
-        label: 'Go to discover',
-        iconType: 'discoverApp',
-        run: async () => {
-          const [, { data }] = await core.getStartServices();
-          const firstLayer = Object.values(
-            (datasourceStates.indexpattern.state as IndexPatternPersistedState).layers
-          )[0] as PersistedIndexPatternLayer & { indexPatternId: string };
-          discover.locator!.navigate({
-            indexPatternId: firstLayer.indexPatternId,
-            timeRange: data.query.timefilter.timefilter.getTime(),
-            filters,
-            query,
-            columns: firstLayer.columnOrder
-              .map((columnId) => {
-                const column = firstLayer.columns[columnId];
-                if ('sourceField' in column) return column.sourceField;
-              })
-              .filter(Boolean) as string[],
-          });
-        },
-      };
-    });
+        return {
+          label: 'Debug in Playground',
+          iconType: 'wrench',
+          run: async () => {
+            const [coreStart] = await core.getStartServices();
+            const datasourceState = datasourceStates.indexpattern
+              .state as IndexPatternPersistedState;
+            const layersIds = Object.keys(datasourceState.layers);
+            const layers = Object.values(datasourceState.layers) as Array<
+              PersistedIndexPatternLayer & { indexPatternId: string }
+            >;
+            const serializedFilters = JSON.parse(JSON.stringify(filters));
+            coreStart.application.navigateToApp('testing_embedded_lens', {
+              state: {
+                visualizationType: visualizationId,
+                title: 'Lens visualization',
+                references: [
+                  {
+                    id: layers[0].indexPatternId,
+                    name: 'indexpattern-datasource-current-indexpattern',
+                    type: 'index-pattern',
+                  },
+                  ...layers.map(({ indexPatternId }, i) => ({
+                    id: indexPatternId,
+                    name: `indexpattern-datasource-layer-${layersIds[i]}`,
+                    type: 'index-pattern',
+                  })),
+                ],
+                state: {
+                  datasourceStates: {
+                    indexpattern: {
+                      layers: datasourceState.layers,
+                    },
+                  },
+                  visualization: visualizationState,
+                  filters: serializedFilters,
+                  query,
+                },
+              },
+            });
+          },
+        };
+      }
+    );
   }
 
   public start() {}