add permission method and some documentation

elastic · Jan 5, 2021 · cf1fd9f · cf1fd9f
1 parent 0d4b99e
commit cf1fd9f
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 28 deletions.
diff --git a/x-pack/examples/embedded_lens_example/README.md b/x-pack/examples/embedded_lens_example/README.md
@@ -2,4 +2,12 @@
 
 To run this example plugin, use the command `yarn start --run-examples`.
 
-TODO
+This example shows how to embed Lens into other applications. Using the `EmbeddableComponent` of the `lens` start plugin,
+you can pass in a valid Lens configuration which will get rendered the same way Lens dashboard panels work. Updating the
+configuration will reload the embedded visualization.
+
+## Link to editor
+
+It is possible to use the same configuration and the `navigateToPrefilledEditor` method to navigate the current user to a
+prefilled Lens editor so they can manipulate the configuration on their own and even save the results to a dashboard.
+Make sure to always check permissions using `canUseEditor` whether the current user has permissions to access Lens.
diff --git a/x-pack/examples/embedded_lens_example/public/app.tsx b/x-pack/examples/embedded_lens_example/public/app.tsx
@@ -7,6 +7,8 @@
 import React, { useState } from 'react';
 import {
   EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiPage,
   EuiPageBody,
   EuiPageContent,
@@ -108,32 +110,51 @@ export const App = (props: { core: CoreStart; plugins: StartDependencies }) => {
         </EuiPageHeader>
         <EuiPageContent>
           <EuiPageContentBody style={{ maxWidth: 800, margin: '0 auto' }}>
-            <EuiButton
-              onClick={() => {
-                // eslint-disable-next-line no-bitwise
-                const newColor = '#' + ((Math.random() * 0xffffff) << 0).toString(16);
-                setColor(newColor);
-              }}
-            >
-              Change color
-            </EuiButton>
-            <EuiButton
-              onClick={() => {
-                props.plugins.lens.navigateToPrefilledEditor({
-                  id: '',
-                  timeRange: {
-                    from: 'now-5d',
-                    to: 'now',
-                  },
-                  attributes: getLensAttributes(props.core.uiSettings.get('defaultIndex'), color),
-                });
-                // eslint-disable-next-line no-bitwise
-                const newColor = '#' + ((Math.random() * 0xffffff) << 0).toString(16);
-                setColor(newColor);
-              }}
-            >
-              Edit
-            </EuiButton>
+            <p>
+              This app embeds a Lens visualization by specifying the configuration. Data fetching
+              and rendering is completely managed by Lens itself.
+            </p>
+            <p>
+              The Change color button will update the configuration by picking a new random color of
+              the series which causes Lens to re-render. The Edit button will take the current
+              configuration and navigate to a prefilled editor.
+            </p>
+            <EuiFlexGroup>
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  onClick={() => {
+                    // eslint-disable-next-line no-bitwise
+                    const newColor = '#' + ((Math.random() * 0xffffff) << 0).toString(16);
+                    setColor(newColor);
+                  }}
+                >
+                  Change color
+                </EuiButton>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  isDisabled={!props.plugins.lens.canUseEditor()}
+                  onClick={() => {
+                    props.plugins.lens.navigateToPrefilledEditor({
+                      id: '',
+                      timeRange: {
+                        from: 'now-5d',
+                        to: 'now',
+                      },
+                      attributes: getLensAttributes(
+                        props.core.uiSettings.get('defaultIndex'),
+                        color
+                      ),
+                    });
+                    // eslint-disable-next-line no-bitwise
+                    const newColor = '#' + ((Math.random() * 0xffffff) << 0).toString(16);
+                    setColor(newColor);
+                  }}
+                >
+                  Edit
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
             <LensComponent
               id=""
               style={{ height: 500 }}

diff --git a/x-pack/examples/embedded_lens_example/public/plugin.ts b/x-pack/examples/embedded_lens_example/public/plugin.ts
@@ -32,7 +32,8 @@ export class EmbeddedLensExamplePlugin
     developerExamples.register({
       appId: 'embedded_lens_example',
       title: 'Embedded Lens',
-      description: 'Examples of how to use Lens in other apps.',
+      description:
+        'Embed Lens visualizations into other applications and link to a pre-configured Lens editor to allow users to use visualizations in your app as starting points for further explorations.',
       links: [
         {
           label: 'README',

diff --git a/x-pack/plugins/lens/public/plugin.ts b/x-pack/plugins/lens/public/plugin.ts
@@ -93,6 +93,10 @@ export interface LensPublicStart {
    * @experimental
    */
   navigateToPrefilledEditor: (input: LensEmbeddableInput) => void;
+  /**
+   * Method which returns true if the user has permission to use Lens as defined by application capabilities.
+   */
+  canUseEditor: () => boolean;
 }
 
 export class LensPlugin {
@@ -233,6 +237,9 @@ export class LensPlugin {
           },
         });
       },
+      canUseEditor: () => {
+        return Boolean(core.application.capabilities.visualize?.show);
+      },
     };
   }