elastic · dej611 · Apr 12, 2023 · Mar 22, 2023 · Mar 22, 2023 · Mar 22, 2023
@@ -100,7 +100,7 @@ export const downloadCsvShareProvider = ({
   formatFactoryFn,
 }: DownloadPanelShareOpts): ShareMenuProvider => {
   const getShareMenuItems = ({ objectType, sharingData, onClose }: ShareContext) => {
-    if ('lens_visualization' !== objectType) {
+    if ('lens' !== objectType) {
       return [];
     }
 

@@ -15,6 +15,7 @@ import { getEsQueryConfig } from '@kbn/data-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { DataViewPickerProps } from '@kbn/unified-search-plugin/public';
+import { LENS_APP_LOCATOR } from '../../common/locator/locator';
 import { ENABLE_SQL } from '../../common';
 import { LensAppServices, LensTopNavActions, LensTopNavMenuProps } from './types';
 import { toggleSettingsMenuOpen } from './settings_menu';
@@ -574,13 +575,8 @@ export const LensTopNavMenu = ({
             if (!share) {
               return;
             }
-            const sharingData = {
-              activeData,
-              csvEnabled,
-              title: title || unsavedTitle,
-            };
 
-            const { shareableUrl, savedObjectURL } = await getShareURL(
+            const { shareableUrl, savedObjectURL, locatorParams } = await getShareURL(
               shortUrlService,
               { application, data },
               {
@@ -595,6 +591,16 @@ export const LensTopNavMenu = ({
                 adHocDataViews: adHocDataViews.map((dataView) => dataView.toSpec()),
               }
             );
+            const sharingData = {
+              activeData,
+              csvEnabled,
+              reportingDisabled: !csvEnabled,
+              title: title || unsavedTitle,
+              locatorParams: {
+                id: LENS_APP_LOCATOR,
+                params: locatorParams,
+              },
+            };
 
             share.toggleShareContextMenu({
               anchorElement,
@@ -603,7 +609,7 @@ export const LensTopNavMenu = ({
               shareableUrl: shareableUrl || '',
               shareableUrlForSavedObject: savedObjectURL.href,
               objectId: currentDoc?.savedObjectId,
-              objectType: 'lens_visualization',
+              objectType: 'lens',
               objectTypeTitle: i18n.translate('xpack.lens.app.share.panelTitle', {
                 defaultMessage: 'visualization',
               }),
@@ -1072,6 +1078,7 @@ export const LensTopNavMenu = ({
       screenTitle={'lens'}
       appName={'lens'}
       displayStyle="detached"
+      className="hide-for-sharing"
     />
   );
 };
@@ -45,8 +45,7 @@ function getShareURLForSavedObject(
   );
 }
 
-function getShortShareableURL(
-  shortUrlService: (params: LensAppLocatorParams) => Promise<string>,
+export function getLocatorParams(
   data: LensAppServices['data'],
   {
     filters,
@@ -80,7 +79,7 @@ function getShortShareableURL(
   const serializableDatasourceStates = datasourceStates as LensAppState['datasourceStates'] &
     SerializableRecord;
 
-  return shortUrlService({
+  return {
     filters,
     query,
     resolvedDateRange: getResolvedDateRange(data.query.timefilter.timefilter),
@@ -90,16 +89,18 @@ function getShortShareableURL(
     searchSessionId: data.search.session.getSessionId(),
     references,
     dataViewSpecs: adHocDataViews,
-  });
+  };
 }
 
 export async function getShareURL(
   shortUrlService: (params: LensAppLocatorParams) => Promise<string>,
   services: Pick<LensAppServices, 'application' | 'data'>,
   configuration: ShareableConfiguration
 ) {
+  const locatorParams = getLocatorParams(services.data, configuration);
   return {
-    shareableUrl: await getShortShareableURL(shortUrlService, services.data, configuration),
+    shareableUrl: await shortUrlService(locatorParams),
     savedObjectURL: getShareURLForSavedObject(services, configuration.currentDoc),
+    locatorParams,
   };
 }
@@ -53,7 +53,7 @@ export function FrameLayout(props: FrameLayoutProps) {
             aria-labelledby="lns_ChartTitle"
           >
             <section
-              className={classNames('lnsFrameLayout__sidebar lnsFrameLayout__sidebar--left', {})}
+              className={'lnsFrameLayout__sidebar lnsFrameLayout__sidebar--left hide-for-sharing'}
               aria-labelledby="dataPanelId"
             >
               <EuiScreenReaderOnly>
@@ -79,12 +79,18 @@ export function FrameLayout(props: FrameLayoutProps) {
                 </h2>
               </EuiScreenReaderOnly>
               {props.workspacePanel}
-              <div className="lnsFrameLayout__suggestionPanel">{props.suggestionsPanel}</div>
+              <div className="lnsFrameLayout__suggestionPanel hide-for-sharing">
+                {props.suggestionsPanel}
+              </div>
             </section>
             <section
-              className={classNames('lnsFrameLayout__sidebar lnsFrameLayout__sidebar--right', {
-                'lnsFrameLayout__sidebar-isFullscreen': isFullscreen,
-              })}
+              className={classNames(
+                'lnsFrameLayout__sidebar lnsFrameLayout__sidebar--right',
+                'hide-for-sharing',
+                {
+                  'lnsFrameLayout__sidebar-isFullscreen': isFullscreen,
+                }
+              )}
               aria-labelledby="configPanel"
             >
               <EuiScreenReaderOnly>

@@ -624,6 +624,12 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
   );
 });
 
+function dispatchRenderComplete(node: HTMLDivElement | null) {
+  if (node) {
+    node.dispatchEvent(new CustomEvent('renderComplete', { bubbles: true }));
+  }
+}
+
 export const VisualizationWrapper = ({
   expression,
   framePublicAPI,
@@ -654,6 +660,9 @@ export const VisualizationWrapper = ({
   onData$: (data: unknown, adapters?: Partial<DefaultInspectorAdapters>) => void;
 }) => {
   const context = useLensSelector(selectExecutionContext);
+  // Used for reporting
+  const [isLoading, setIsLoading] = useState(true);
+  const nodeRef = useRef<HTMLDivElement>(null);
   const searchContext: ExecutionContextSearch = useMemo(
     () => ({
       query: context.query,
@@ -719,7 +728,13 @@ export const VisualizationWrapper = ({
   }
 
   return (
-    <div className="lnsExpressionRenderer">
+    <div
+      className="lnsExpressionRenderer"
+      data-shared-items-container
+      data-render-complete={!isLoading}
+      data-shared-item=""
+      ref={nodeRef}
+    >
       <ExpressionRendererComponent
         className="lnsExpressionRenderer__component"
         padding="m"
@@ -729,7 +744,11 @@ export const VisualizationWrapper = ({
         onEvent={onEvent}
         hasCompatibleActions={hasCompatibleActions}
         onData$={onData$}
-        onRender$={onRender$}
+        onRender$={() => {
+          setIsLoading(false);
+          onRender$();
+          dispatchRenderComplete(nodeRef.current);
+        }}
         inspectorAdapters={lensInspector.adapters}
         executionContext={executionContext}
         renderMode="edit"

@@ -91,7 +91,11 @@ export function WorkspacePanelWrapper({
       mainProps={{ component: 'div' } as unknown as {}}
     >
       {!(isFullscreen && (autoApplyEnabled || userMessages?.length)) && (
-        <EuiPageTemplate.Section paddingSize="none" color="transparent">
+        <EuiPageTemplate.Section
+          paddingSize="none"
+          color="transparent"
+          className="hide-for-sharing"
+        >
           <EuiFlexGroup
             alignItems="flexEnd"
             gutterSize="s"
@@ -170,7 +174,7 @@ export function WorkspacePanelWrapper({
         contentProps={{
           className: 'lnsWorkspacePanelWrapper__content',
         }}
-        className={classNames('lnsWorkspacePanelWrapper', {
+        className={classNames('lnsWorkspacePanelWrapper stretch-for-sharing', {
           'lnsWorkspacePanelWrapper--fullscreen': isFullscreen,
         })}
         color="transparent"

@@ -25,6 +25,8 @@ export const guessAppIconTypeFromObjectType = (type: string): IconType => {
       return 'visualizeApp';
     case 'canvas workpad':
       return 'canvasApp';
+    case 'lens':
+      return 'lensApp';
     default:
       return 'apps';
   }

@@ -28,6 +28,7 @@ export interface ExportPanelShareOpts {
 export interface ReportingSharingData {
   title: string;
   layout: LayoutParams;
+  reportingDisabled?: boolean;
   [key: string]: unknown;
 }
 

@@ -71,6 +71,7 @@ export const reportingScreenshotShareProvider = ({
     isDirty,
     onClose,
     shareableUrl,
+    shareableUrlForSavedObject,
     ...shareOpts
   }: ShareContext) => {
     const { enableLinks, showLinks, message } = checkLicense(license.check('reporting', 'gold'));
@@ -95,16 +96,17 @@ export const reportingScreenshotShareProvider = ({
     if (!licenseHasScreenshotReporting) {
       return [];
     }
+    const isSupportedType = ['dashboard', 'visualization', 'lens'].includes(objectType);
 
-    if (!['dashboard', 'visualization'].includes(objectType)) {
+    if (!isSupportedType) {
       return [];
     }
 
     if (objectType === 'dashboard' && !capabilityHasDashboardScreenshotReporting) {
       return [];
     }
 
-    if (objectType === 'visualize' && !capabilityHasVisualizeScreenshotReporting) {
+    if (isSupportedType && !capabilityHasVisualizeScreenshotReporting) {
       return [];
     }
 
@@ -116,7 +118,7 @@ export const reportingScreenshotShareProvider = ({
     });
 
     const jobProviderOptions: JobParamsProviderOptions = {
-      shareableUrl,
+      shareableUrl: shareableUrlForSavedObject ?? shareableUrl,
       objectType,
       sharingData,
     };
@@ -131,7 +133,7 @@ export const reportingScreenshotShareProvider = ({
         name: pngPanelTitle,
         icon: 'document',
         toolTipContent: licenseToolTipContent,
-        disabled: licenseDisabled,
+        disabled: licenseDisabled || sharingData.reportingDisabled,
         ['data-test-subj']: 'PNGReports',
         sortOrder: 10,
       },
@@ -166,7 +168,7 @@ export const reportingScreenshotShareProvider = ({
         name: pdfPanelTitle,
         icon: 'document',
         toolTipContent: licenseToolTipContent,
-        disabled: licenseDisabled,
+        disabled: licenseDisabled || sharingData.reportingDisabled,
         ['data-test-subj']: 'PDFReports',
         sortOrder: 10,
       },

@@ -7,6 +7,11 @@
   display: none !important;
 }
 
+/* some elements needs to be stretched to be shared */
+.stretch-for-sharing {
+  margin: 0px;
+}
+
 /**
 * Global overrides
 */