[Lens] Export lens save modal (#100381)

Co-authored-by: Kibana Machine <[email protected]>

src/plugins/presentation_util/public/mocks.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { CoreStart } from 'kibana/public';
+import { PresentationUtilPluginStart } from './types';
+import { pluginServices } from './services';
+import { registry } from './services/kibana';
+
+const createStartContract = (coreStart: CoreStart): PresentationUtilPluginStart => {
+  pluginServices.setRegistry(registry.start({ coreStart, startPlugins: {} as any }));
+
+  const startContract: PresentationUtilPluginStart = {
+    ContextProvider: pluginServices.getContextProvider(),
+    labsService: pluginServices.getServices().labs,
+  };
+  return startContract;
+};
+
+export const presentationUtilPluginMock = {
+  createStartContract,
+};

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

@@ -24,6 +24,7 @@ import {
   TypedLensByValueInput,
   PersistedIndexPatternLayer,
   XYState,
+  LensEmbeddableInput,
 } from '../../../plugins/lens/public';
 import { StartDependencies } from './plugin';
 
@@ -112,12 +113,15 @@ export const App = (props: {
 }) => {
   const [color, setColor] = useState('green');
   const [isLoading, setIsLoading] = useState(false);
+  const [isSaveModalVisible, setIsSaveModalVisible] = useState(false);
   const LensComponent = props.plugins.lens.EmbeddableComponent;
+  const LensSaveModalComponent = props.plugins.lens.SaveModalComponent;
 
   const [time, setTime] = useState({
     from: 'now-5d',
     to: 'now',
   });
+
   return (
     <EuiPage>
       <EuiPageBody style={{ maxWidth: 1200, margin: '0 auto' }}>
@@ -172,7 +176,18 @@ export const App = (props: {
                         setColor(newColor);
                       }}
                     >
-                      Edit
+                      Edit in Lens
+                    </EuiButton>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButton
+                      aria-label="Save visualization into library or embed directly into any dashboard"
+                      isDisabled={!getLensAttributes(props.defaultIndexPattern, color)}
+                      onClick={() => {
+                        setIsSaveModalVisible(true);
+                      }}
+                    >
+                      Save Visualization
                     </EuiButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
@@ -197,6 +212,19 @@ export const App = (props: {
                     // call back event for on table row click event
                   }}
                 />
+                {isSaveModalVisible && (
+                  <LensSaveModalComponent
+                    initialInput={
+                      (getLensAttributes(
+                        props.defaultIndexPattern,
+                        color
+                      ) as unknown) as LensEmbeddableInput
+                    }
+                    isVisible={isSaveModalVisible}
+                    onSave={() => {}}
+                    onClose={() => setIsSaveModalVisible(false)}
+                  />
+                )}
               </>
             ) : (
               <p>This demo only works if your default index pattern is set and time based</p>

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

@@ -23,7 +23,13 @@ export const mount = (coreSetup: CoreSetup<StartDependencies>) => async ({
 
   const defaultIndexPattern = await plugins.data.indexPatterns.getDefault();
 
-  const reactElement = <App {...deps} defaultIndexPattern={defaultIndexPattern} />;
+  const i18nCore = core.i18n;
+
+  const reactElement = (
+    <i18nCore.Context>
+      <App {...deps} defaultIndexPattern={defaultIndexPattern} />
+    </i18nCore.Context>
+  );
   render(reactElement, element);
   return () => unmountComponentAtNode(element);
 };