Merge branch 'main' into 7382_data_quality_dashboard_persistence

x-pack/plugins/cases/public/components/visualizations/actions/utils.test.ts

@@ -59,6 +59,7 @@ describe('utils', () => {
         Object {
           "persistableStateAttachmentState": Object {
             "attributes": Object {},
+            "metadata": undefined,
             "timeRange": Object {},
           },
           "persistableStateAttachmentTypeId": ".lens",

x-pack/plugins/cases/public/components/visualizations/actions/utils.ts

@@ -5,11 +5,12 @@
  * 2.0.
  */
 import type { IEmbeddable } from '@kbn/embeddable-plugin/public';
-import type { LensEmbeddableInput, LensSavedObjectAttributes } from '@kbn/lens-plugin/public';
+import type { LensSavedObjectAttributes } from '@kbn/lens-plugin/public';
 import { LENS_EMBEDDABLE_TYPE, type Embeddable as LensEmbeddable } from '@kbn/lens-plugin/public';
 import { LENS_ATTACHMENT_TYPE } from '../../../../common/constants/visualizations';
 import type { PersistableStateAttachmentPayload } from '../../../../common/types/domain';
 import { AttachmentType } from '../../../../common/types/domain';
+import type { LensProps } from '../types';
 
 export const isLensEmbeddable = (embeddable: IEmbeddable): embeddable is LensEmbeddable => {
   return embeddable.type === LENS_EMBEDDABLE_TYPE;
@@ -26,12 +27,14 @@ type PersistableStateAttachmentWithoutOwner = Omit<PersistableStateAttachmentPay
 export const getLensCaseAttachment = ({
   timeRange,
   attributes,
+  metadata,
 }: {
-  timeRange: LensEmbeddableInput['timeRange'];
+  timeRange: LensProps['timeRange'];
   attributes: LensSavedObjectAttributes;
+  metadata?: LensProps['metadata'];
 }): PersistableStateAttachmentWithoutOwner =>
   ({
-    persistableStateAttachmentState: { attributes, timeRange },
+    persistableStateAttachmentState: { attributes, timeRange, metadata },
     persistableStateAttachmentTypeId: LENS_ATTACHMENT_TYPE,
     type: AttachmentType.persistableState,
   } as unknown as PersistableStateAttachmentWithoutOwner);

x-pack/plugins/cases/public/components/visualizations/attachment.tsx

@@ -26,6 +26,7 @@ function getOpenLensButton(attachmentId: string, props: LensProps) {
       attachmentId={attachmentId}
       attributes={props.attributes}
       timeRange={props.timeRange}
+      metadata={props.metadata}
     />
   );
 }
@@ -40,9 +41,10 @@ const getVisualizationAttachmentActions = (attachmentId: string, props: LensProp
 
 const LensAttachment = React.memo(
   (props: PersistableStateAttachmentViewProps) => {
-    const { attributes, timeRange } = props.persistableStateAttachmentState as unknown as LensProps;
+    const { attributes, timeRange, metadata } =
+      props.persistableStateAttachmentState as unknown as LensProps;
 
-    return <LensRenderer attributes={attributes} timeRange={timeRange} />;
+    return <LensRenderer attributes={attributes} timeRange={timeRange} metadata={metadata} />;
   },
   (prevProps, nextProps) =>
     deepEqual(prevProps.persistableStateAttachmentState, nextProps.persistableStateAttachmentState)

x-pack/plugins/cases/public/components/visualizations/lens_renderer.test.tsx

@@ -62,4 +62,13 @@ describe('LensRenderer', () => {
 
     expect(screen.queryByTestId('embeddableComponent')).not.toBeInTheDocument();
   });
+
+  it('renders the lens visualization with description', () => {
+    appMockRender.render(
+      // @ts-expect-error: props are correct
+      <LensRenderer {...lensVisualization} metadata={{ description: 'description' }} />
+    );
+
+    expect(screen.getByText('description')).toBeInTheDocument();
+  });
 });

x-pack/plugins/cases/public/components/visualizations/lens_renderer.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { createGlobalStyle } from '@kbn/kibana-react-plugin/common';
+import { EuiSpacer } from '@elastic/eui';
 import { useKibana } from '../../common/lib/kibana';
 import type { LensProps } from './types';
 
@@ -25,7 +26,7 @@ const LensChartTooltipFix = createGlobalStyle`
   }
 `;
 
-const LensRendererComponent: React.FC<LensProps> = ({ attributes, timeRange }) => {
+const LensRendererComponent: React.FC<LensProps> = ({ attributes, timeRange, metadata }) => {
   const {
     lens: { EmbeddableComponent },
   } = useKibana().services;
@@ -35,22 +36,30 @@ const LensRendererComponent: React.FC<LensProps> = ({ attributes, timeRange }) =
   }
 
   return (
-    <Container>
-      <EmbeddableComponent
-        id=""
-        style={{ height: LENS_VISUALIZATION_HEIGHT }}
-        timeRange={timeRange}
-        attributes={attributes}
-        renderMode="view"
-        disableTriggers
-        executionContext={{
-          type: 'cases',
-        }}
-        syncTooltips={false}
-        syncCursor={false}
-      />
-      <LensChartTooltipFix />
-    </Container>
+    <>
+      {metadata && metadata.description && (
+        <>
+          {metadata.description}
+          <EuiSpacer size="s" />
+        </>
+      )}
+      <Container>
+        <EmbeddableComponent
+          id=""
+          style={{ height: LENS_VISUALIZATION_HEIGHT }}
+          timeRange={timeRange}
+          attributes={attributes}
+          renderMode="view"
+          disableTriggers
+          executionContext={{
+            type: 'cases',
+          }}
+          syncTooltips={false}
+          syncCursor={false}
+        />
+        <LensChartTooltipFix />
+      </Container>
+    </>
   );
 };
 

x-pack/plugins/cases/public/components/visualizations/types.ts

@@ -7,4 +7,11 @@
 
 import type { TypedLensByValueInput } from '@kbn/lens-plugin/public';
 
-export type LensProps = Pick<TypedLensByValueInput, 'attributes' | 'timeRange'>;
+export type LensProps = Pick<TypedLensByValueInput, 'attributes' | 'timeRange'> & {
+  /**
+   * Optional metadata used to customize the Lens Attachment rendering.
+   */
+  metadata?: {
+    description?: string;
+  };
+};

x-pack/plugins/cases/public/types.ts

@@ -172,5 +172,6 @@ export type SupportedCaseAttachment =
 export type CaseAttachments = SupportedCaseAttachment[];
 export type CaseAttachmentWithoutOwner = DistributiveOmit<SupportedCaseAttachment, 'owner'>;
 export type CaseAttachmentsWithoutOwner = CaseAttachmentWithoutOwner[];
+export type { LensProps } from './components/visualizations/types';
 
 export type ServerError = IHttpFetchError<ResponseErrorBody>;

x-pack/plugins/enterprise_search/kibana.jsonc

@@ -22,7 +22,8 @@
       "esUiShared",
       "lens",
       "embeddable",
-      "share"
+      "share",
+      "console"
     ],
     "optionalPlugins": [
       "customIntegrations",

x-pack/plugins/enterprise_search/public/applications/__mocks__/kea_logic/kibana_logic.mock.ts

@@ -33,6 +33,7 @@ export const mockKibanaValues = {
     isCloudEnabled: false,
   },
   config: { host: 'http://localhost:3002' },
+  consolePlugin: {},
   data: dataPluginMock.createStartContract(),
   esConfig: { elasticsearch_host: 'https://your_deployment_url' },
   guidedOnboarding: {},

x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/page_template.tsx

@@ -26,6 +26,7 @@ export const AppSearchPageTemplate: React.FC<
       }}
       setPageChrome={pageChrome && <SetAppSearchChrome trail={pageChrome} />}
       useEndpointHeaderActions={false}
+      hideEmbeddedConsole
     >
       {pageViewTelemetry && <SendAppSearchTelemetry action="viewed" metric={pageViewTelemetry} />}
       {children}

x-pack/plugins/enterprise_search/public/applications/index.tsx

@@ -106,6 +106,7 @@ export const renderApp = (
     charts,
     cloud,
     config,
+    console: plugins.console,
     esConfig,
     data: plugins.data,
     guidedOnboarding,

x-pack/plugins/enterprise_search/public/applications/shared/kibana/kibana_logic.ts

@@ -11,6 +11,7 @@ import { kea, MakeLogicType } from 'kea';
 
 import { ChartsPluginStart } from '@kbn/charts-plugin/public';
 import { CloudSetup } from '@kbn/cloud-plugin/public';
+import { ConsolePluginStart } from '@kbn/console-plugin/public';
 import {
   ApplicationStart,
   Capabilities,
@@ -42,6 +43,7 @@ export interface KibanaLogicProps {
   charts: ChartsPluginStart;
   cloud?: CloudSetup;
   config: ClientConfigType;
+  console?: ConsolePluginStart;
   data: DataPublicPluginStart;
   esConfig: ESConfig;
   guidedOnboarding?: GuidedOnboardingPluginStart;
@@ -62,8 +64,9 @@ export interface KibanaLogicProps {
   user: AuthenticatedUser | null;
 }
 
-export interface KibanaValues extends Omit<KibanaLogicProps, 'cloud'> {
+export interface KibanaValues extends Omit<KibanaLogicProps, 'cloud' | 'console'> {
   cloud: Partial<CloudSetup>;
+  consolePlugin: Partial<ConsolePluginStart>;
   data: DataPublicPluginStart;
   isCloud: boolean;
   lens: LensPublicStart;
@@ -78,6 +81,7 @@ export const KibanaLogic = kea<MakeLogicType<KibanaValues>>({
     charts: [props.charts, {}],
     cloud: [props.cloud || {}, {}],
     config: [props.config || {}, {}],
+    consolePlugin: [props.console || {}, {}],
     data: [props.data, {}],
     esConfig: [props.esConfig || { elasticsearch_host: ELASTICSEARCH_URL_PLACEHOLDER }, {}],
     guidedOnboarding: [props.guidedOnboarding, {}],

x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.test.tsx

@@ -228,4 +228,41 @@ describe('EnterpriseSearchPageTemplateWrapper', () => {
       });
     });
   });
+
+  describe('Embedded Console', () => {
+    it('renders embedded console if available', () => {
+      const renderMock = jest.fn();
+      renderMock.mockReturnValue(null);
+
+      setMockValues({
+        readOnlyMode: false,
+        consolePlugin: { renderEmbeddableConsole: renderMock },
+      });
+
+      shallow(
+        <EnterpriseSearchPageTemplateWrapper>
+          <div className="hello">world</div>
+        </EnterpriseSearchPageTemplateWrapper>
+      );
+
+      expect(renderMock).toHaveBeenCalled();
+    });
+    it('Hides embedded console if available but page template prop set to hide', () => {
+      const renderMock = jest.fn();
+      renderMock.mockReturnValue(null);
+
+      setMockValues({
+        readOnlyMode: false,
+        consolePlugin: { renderEmbeddableConsole: renderMock },
+      });
+
+      shallow(
+        <EnterpriseSearchPageTemplateWrapper hideEmbeddedConsole>
+          <div className="hello">world</div>
+        </EnterpriseSearchPageTemplateWrapper>
+      );
+
+      expect(renderMock).not.toHaveBeenCalled();
+    });
+  });
 });

x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.tsx

@@ -47,6 +47,7 @@ export type PageTemplateProps = KibanaPageTemplateProps & {
   setPageChrome?: React.ReactNode;
   solutionNavIcon?: string;
   useEndpointHeaderActions?: boolean;
+  hideEmbeddedConsole?: boolean;
 };
 
 export const EnterpriseSearchPageTemplateWrapper: React.FC<PageTemplateProps> = ({
@@ -61,10 +62,11 @@ export const EnterpriseSearchPageTemplateWrapper: React.FC<PageTemplateProps> =
   solutionNav,
   solutionNavIcon,
   useEndpointHeaderActions = true,
+  hideEmbeddedConsole = false,
   ...pageTemplateProps
 }) => {
   const { readOnlyMode } = useValues(HttpLogic);
-  const { renderHeaderActions } = useValues(KibanaLogic);
+  const { renderHeaderActions, consolePlugin } = useValues(KibanaLogic);
 
   const hasCustomEmptyState = !!emptyState;
   const showCustomEmptyState = hasCustomEmptyState && isEmptyState;
@@ -118,6 +120,11 @@ export const EnterpriseSearchPageTemplateWrapper: React.FC<PageTemplateProps> =
       ) : (
         <KibanaPageTemplate.Section>{children}</KibanaPageTemplate.Section>
       )}
+      {!hideEmbeddedConsole && consolePlugin?.renderEmbeddableConsole !== undefined ? (
+        consolePlugin.renderEmbeddableConsole()
+      ) : (
+        <></>
+      )}
     </KibanaPageTemplate>
   );
 };

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/page_template.tsx

@@ -30,6 +30,7 @@ export const WorkplaceSearchPageTemplate: React.FC<PageTemplateProps> = ({
       }}
       setPageChrome={pageChrome && <SetWorkplaceSearchChrome trail={pageChrome} />}
       useEndpointHeaderActions={false}
+      hideEmbeddedConsole
     >
       {pageViewTelemetry && (
         <SendWorkplaceSearchTelemetry action="viewed" metric={pageViewTelemetry} />

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/gated_form_page.tsx

@@ -57,6 +57,7 @@ export const WorkplaceSearchGatePage: React.FC<PageTemplateProps> = ({ isLoading
         name: ENTERPRISE_SEARCH_CONTENT_PLUGIN.NAME,
       }}
       isLoading={isLoading}
+      hideEmbeddedConsole
     >
       <SendWorkplaceSearchTelemetry action="viewed" metric="Workplace Search Gate form" />
 

x-pack/plugins/enterprise_search/public/plugin.ts

@@ -7,6 +7,7 @@
 
 import { ChartsPluginStart } from '@kbn/charts-plugin/public';
 import { CloudSetup, CloudStart } from '@kbn/cloud-plugin/public';
+import { ConsolePluginStart } from '@kbn/console-plugin/public';
 import {
   AppMountParameters,
   CoreStart,
@@ -61,6 +62,7 @@ interface PluginsSetup {
 export interface PluginsStart {
   charts: ChartsPluginStart;
   cloud?: CloudSetup & CloudStart;
+  console?: ConsolePluginStart;
   data: DataPublicPluginStart;
   guidedOnboarding: GuidedOnboardingPluginStart;
   lens: LensPublicStart;

x-pack/plugins/enterprise_search/tsconfig.json

@@ -66,6 +66,7 @@
     "@kbn/core-application-browser",
     "@kbn/core-capabilities-common",
     "@kbn/react-kibana-context-theme",
-    "@kbn/code-editor"
+    "@kbn/code-editor",
+    "@kbn/console-plugin"
   ]
 }

x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx

@@ -53,6 +53,7 @@ const VisualizationActionsComponent: React.FC<VisualizationActionsProps> = ({
   scopeId = SourcererScopeName.default,
   stackByField,
   withActions = DEFAULT_ACTIONS,
+  casesAttachmentMetadata,
 }) => {
   const [isPopoverOpen, setPopover] = useState(false);
   const [isInspectModalOpen, setIsInspectModalOpen] = useState(false);
@@ -121,6 +122,7 @@ const VisualizationActionsComponent: React.FC<VisualizationActionsProps> = ({
     inspectActionProps,
     timeRange: timerange,
     withActions,
+    lensMetadata: casesAttachmentMetadata,
   });
 
   const panels = useAsync(

x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx

@@ -79,6 +79,7 @@ const LensEmbeddableComponent: React.FC<LensEmbeddableComponentProps> = ({
   width: wrapperWidth,
   withActions = DEFAULT_ACTIONS,
   disableOnClickFilter = false,
+  casesAttachmentMetadata,
 }) => {
   const style = useMemo(
     () => ({
@@ -152,6 +153,7 @@ const LensEmbeddableComponent: React.FC<LensEmbeddableComponentProps> = ({
     inspectActionProps,
     timeRange: timerange,
     withActions,
+    lensMetadata: casesAttachmentMetadata,
   });
 
   const updateDateRange = useCallback(
@@ -240,6 +242,7 @@ const LensEmbeddableComponent: React.FC<LensEmbeddableComponentProps> = ({
             timerange={timerange}
             title={inspectTitle}
             withActions={withActions}
+            casesAttachmentMetadata={casesAttachmentMetadata}
           />
         </EuiFlexItem>
       </EuiFlexGroup>