Merge branch 'main' into sharedux/cleanup-tomountpoint-deprecations-x…

…ii-observabilitysolution

dev_docs/key_concepts/embeddables.mdx

@@ -7,5 +7,4 @@ date: 2024-05-09
 tags: ['kibana', 'dev', 'contributor', 'api docs']
 ---
 
-Embeddable documentation and examples are bundled with Kibana and accessable by running `yarn start --run-examples`.
-Navigate to `http://localhost:5601/app/embeddablesApp`.
+Embeddable documentation available at [/src/plugins/embeddable/README.md](https://github.com/elastic/kibana/blob/main/src/plugins/embeddable/README.md)

docs/developer/plugin-list.asciidoc

@@ -99,8 +99,7 @@ This API doesn't support angular, for registering angular dev tools, bootstrap a
 
 
 |{kib-repo}blob/{branch}/src/plugins/embeddable/README.md[embeddable]
-|Embeddable documentation and examples are bundled with Kibana and accessable by running yarn start --run-examples.
-Navigate to http://localhost:5601/app/embeddablesApp.
+|Embeddables are React components that manage their own state, can be serialized and deserialized, and return an API that can be used to interact with them imperatively.
 
 
 |{kib-repo}blob/{branch}/src/plugins/es_ui_shared/README.md[esUiShared]

examples/embeddable_examples/public/app/overview.tsx

@@ -7,16 +7,19 @@
  */
 
 import React from 'react';
-
-import { EuiText } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { EuiMarkdownFormat } from '@elastic/eui';
+// @ts-ignore
+import overviewMarkdown from '!!raw-loader!@kbn/embeddable-plugin/README.md';
 
 export const Overview = () => {
   return (
-    <EuiText>
-      <p>
-        Embeddables are React components that manage their own state, can be serialized and
-        deserialized, and return an API that can be used to interact with them imperatively.
-      </p>
-    </EuiText>
+    <EuiMarkdownFormat
+      css={css`
+        width: 75%;
+      `}
+    >
+      {overviewMarkdown}
+    </EuiMarkdownFormat>
   );
 };

examples/embeddable_examples/public/app/register_embeddable.tsx

@@ -24,9 +24,9 @@ export const RegisterEmbeddable = () => {
         <h2>Register a new embeddable type</h2>
         <p>
           This plugin registers several embeddable types with{' '}
-          <strong>registerReactEmbeddableFactory</strong> during plugin start. The code example
-          below shows Search embeddable registration. Notice how the embeddable factory is imported
-          asynchronously to limit initial page load size.
+          <strong>registerReactEmbeddableFactory</strong>. The code example below shows Search
+          embeddable registration. The embeddable factory is imported asynchronously to limit
+          initial page load size.
         </p>
       </EuiText>
       <EuiSpacer size="s" />

examples/embeddable_examples/public/react_embeddables/search/search_embeddable_renderer.tsx

@@ -41,13 +41,11 @@ export function SearchEmbeddableRenderer(props: Props) {
   }, [props.timeRange, parentApi.timeRange$]);
 
   return (
-    <div className="mapEmbeddableContainer">
-      <ReactEmbeddableRenderer<SearchSerializedState, SearchApi>
-        type={SEARCH_EMBEDDABLE_ID}
-        state={initialState}
-        parentApi={parentApi}
-        hidePanelChrome={true}
-      />
-    </div>
+    <ReactEmbeddableRenderer<SearchSerializedState, SearchApi>
+      type={SEARCH_EMBEDDABLE_ID}
+      state={initialState}
+      parentApi={parentApi}
+      hidePanelChrome={true}
+    />
   );
 }

package.json

@@ -1097,7 +1097,7 @@
     "pretty-ms": "6.0.0",
     "prop-types": "^15.8.1",
     "proxy-from-env": "1.0.0",
-    "puppeteer": "22.3.0",
+    "puppeteer": "22.8.1",
     "query-string": "^6.13.2",
     "rbush": "^3.0.1",
     "re-resizable": "^6.9.9",

packages/presentation/presentation_publishing/index.ts

@@ -109,6 +109,7 @@ export {
 export {
   apiPublishesPanelDescription,
   apiPublishesWritablePanelDescription,
+  getPanelDescription,
   type PublishesPanelDescription,
   type PublishesWritablePanelDescription,
 } from './interfaces/titles/publishes_panel_description';

packages/presentation/presentation_publishing/interfaces/titles/publishes_panel_description.test.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 { BehaviorSubject } from 'rxjs';
+import { getPanelDescription } from './publishes_panel_description';
+
+describe('getPanelDescription', () => {
+  test('should return default description when description is undefined', () => {
+    const api = {
+      panelDescription: new BehaviorSubject<string | undefined>(undefined),
+      defaultPanelDescription: new BehaviorSubject<string | undefined>('default description'),
+    };
+    expect(getPanelDescription(api)).toBe('default description');
+  });
+
+  test('should return empty description when description is empty string', () => {
+    const api = {
+      panelDescription: new BehaviorSubject<string | undefined>(''),
+      defaultPanelDescription: new BehaviorSubject<string | undefined>('default description'),
+    };
+    expect(getPanelDescription(api)).toBe('');
+  });
+
+  test('should return description when description is provided', () => {
+    const api = {
+      panelDescription: new BehaviorSubject<string | undefined>('custom description'),
+      defaultPanelDescription: new BehaviorSubject<string | undefined>('default description'),
+    };
+    expect(getPanelDescription(api)).toBe('custom description');
+  });
+});

packages/presentation/presentation_publishing/interfaces/titles/publishes_panel_description.ts

@@ -13,6 +13,10 @@ export interface PublishesPanelDescription {
   defaultPanelDescription?: PublishingSubject<string | undefined>;
 }
 
+export function getPanelDescription(api: Partial<PublishesPanelDescription>): string | undefined {
+  return api.panelDescription?.value ?? api.defaultPanelDescription?.value;
+}
+
 export type PublishesWritablePanelDescription = PublishesPanelDescription & {
   setPanelDescription: (newTitle: string | undefined) => void;
 };

packages/presentation/presentation_publishing/interfaces/titles/publishes_panel_title.test.ts

@@ -18,12 +18,12 @@ describe('getPanelTitle', () => {
     expect(getPanelTitle(api)).toBe('default title');
   });
 
-  test('should return default title when title is empty string', () => {
+  test('should return empty title when title is empty string', () => {
     const api = {
       panelTitle: new BehaviorSubject<string | undefined>(''),
       defaultPanelTitle: new BehaviorSubject<string | undefined>('default title'),
     };
-    expect(getPanelTitle(api)).toBe('default title');
+    expect(getPanelTitle(api)).toBe('');
   });
 
   test('should return title when title is provided', () => {

packages/presentation/presentation_publishing/interfaces/titles/publishes_panel_title.ts

@@ -15,7 +15,7 @@ export interface PublishesPanelTitle {
 }
 
 export function getPanelTitle(api: Partial<PublishesPanelTitle>): string | undefined {
-  return api.panelTitle?.value || api.defaultPanelTitle?.value;
+  return api.panelTitle?.value ?? api.defaultPanelTitle?.value;
 }
 
 export type PublishesWritablePanelTitle = PublishesPanelTitle & {

src/plugins/console/public/application/containers/editor/monaco/hooks/index.ts

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+export { useResizeCheckerUtils } from './use_resize_checker_utils';
+export { useSetInitialValue } from './use_set_initial_value';
+export { useSetupAutocompletePolling } from './use_setup_autocomplete_polling';
+export { useSetupAutosave } from './use_setup_autosave';

src/plugins/console/public/application/containers/editor/monaco/use_set_initial_value.ts → src/plugins/console/public/application/containers/editor/monaco/hooks/use_set_initial_value.ts

@@ -12,7 +12,7 @@ import { IToasts } from '@kbn/core-notifications-browser';
 import { decompressFromEncodedURIComponent } from 'lz-string';
 import { i18n } from '@kbn/i18n';
 import { useEffect } from 'react';
-import { DEFAULT_INPUT_VALUE } from '../../../../../common/constants';
+import { DEFAULT_INPUT_VALUE } from '../../../../../../common/constants';
 
 interface QueryParams {
   load_from: string;

src/plugins/console/public/application/containers/editor/monaco/use_setup_autocomplete_polling.ts → src/plugins/console/public/application/containers/editor/monaco/hooks/use_setup_autocomplete_polling.ts

@@ -7,7 +7,7 @@
  */
 
 import { useEffect } from 'react';
-import { AutocompleteInfo, Settings } from '../../../../services';
+import { AutocompleteInfo, Settings } from '../../../../../services';
 
 interface SetupAutocompletePollingParams {
   /** The Console autocomplete service. */

src/plugins/console/public/application/containers/editor/monaco/use_setup_autosave.ts → src/plugins/console/public/application/containers/editor/monaco/hooks/use_setup_autosave.ts

@@ -7,7 +7,7 @@
  */
 
 import { useEffect, useRef } from 'react';
-import { useSaveCurrentTextObject } from '../../../hooks';
+import { useSaveCurrentTextObject } from '../../../../hooks';
 import { readLoadFromParam } from './use_set_initial_value';
 
 interface SetupAutosaveParams {

src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx

@@ -18,12 +18,14 @@ import {
   useEditorReadContext,
   useRequestActionContext,
 } from '../../../contexts';
-import { useSetInitialValue } from './use_set_initial_value';
+import {
+  useSetInitialValue,
+  useSetupAutocompletePolling,
+  useSetupAutosave,
+  useResizeCheckerUtils,
+} from './hooks';
 import { MonacoEditorActionsProvider } from './monaco_editor_actions_provider';
-import { useSetupAutocompletePolling } from './use_setup_autocomplete_polling';
-import { useSetupAutosave } from './use_setup_autosave';
 import { getSuggestionProvider } from './monaco_editor_suggestion_provider';
-import { useResizeCheckerUtils } from './use_resize_checker_utils';
 
 export interface EditorProps {
   initialTextValue: string;

src/plugins/console/public/application/containers/editor/monaco/monaco_editor_actions_provider.ts

@@ -8,53 +8,35 @@
 
 import { CSSProperties, Dispatch } from 'react';
 import { debounce } from 'lodash';
-import {
-  ConsoleParsedRequestsProvider,
-  getParsedRequestsProvider,
-  monaco,
-  ParsedRequest,
-} from '@kbn/monaco';
+import { ConsoleParsedRequestsProvider, getParsedRequestsProvider, monaco } from '@kbn/monaco';
 import { IToasts } from '@kbn/core-notifications-browser';
 import { i18n } from '@kbn/i18n';
 import type { HttpSetup } from '@kbn/core-http-browser';
 import { DEFAULT_VARIABLES } from '../../../../../common/constants';
 import { getStorage, StorageKeys } from '../../../../services';
-import { sendRequest } from '../../../hooks/use_send_current_request/send_request';
+import { sendRequest } from '../../../hooks';
 import { MetricsTracker } from '../../../../types';
 import { Actions } from '../../../stores/request';
+
 import {
+  AutocompleteType,
   containsUrlParams,
+  getBodyCompletionItems,
   getCurlRequest,
-  getDocumentationLink,
+  getDocumentationLinkFromAutocomplete,
   getLineTokens,
   getMethodCompletionItems,
   getRequestEndLineNumber,
   getRequestStartLineNumber,
   getUrlParamsCompletionItems,
   getUrlPathCompletionItems,
   replaceRequestVariables,
+  SELECTED_REQUESTS_CLASSNAME,
   stringifyRequest,
   trackSentRequests,
 } from './utils';
 
-const selectedRequestsClass = 'console__monaco_editor__selectedRequests';
-
-export interface EditorRequest {
-  method: string;
-  url: string;
-  data: string[];
-}
-
-interface AdjustedParsedRequest extends ParsedRequest {
-  startLineNumber: number;
-  endLineNumber: number;
-}
-enum AutocompleteType {
-  PATH = 'path',
-  URL_PARAMS = 'url_params',
-  METHOD = 'method',
-  BODY = 'body',
-}
+import type { AdjustedParsedRequest } from './types';
 
 export class MonacoEditorActionsProvider {
   private parsedRequestsProvider: ConsoleParsedRequestsProvider;
@@ -125,7 +107,7 @@ export class MonacoEditorActionsProvider {
           range: selectedRange,
           options: {
             isWholeLine: true,
-            className: selectedRequestsClass,
+            className: SELECTED_REQUESTS_CLASSNAME,
           },
         },
       ]);
@@ -255,7 +237,7 @@ export class MonacoEditorActionsProvider {
     }
     const request = requests[0];
 
-    return getDocumentationLink(request, docLinkVersion);
+    return getDocumentationLinkFromAutocomplete(request, docLinkVersion);
   }
 
   private async getAutocompleteType(
@@ -302,7 +284,11 @@ export class MonacoEditorActionsProvider {
     return AutocompleteType.BODY;
   }
 
-  private async getSuggestions(model: monaco.editor.ITextModel, position: monaco.Position) {
+  private async getSuggestions(
+    model: monaco.editor.ITextModel,
+    position: monaco.Position,
+    context: monaco.languages.CompletionContext
+  ) {
     // determine autocomplete type
     const autocompleteType = await this.getAutocompleteType(model, position);
     if (!autocompleteType) {
@@ -328,6 +314,23 @@ export class MonacoEditorActionsProvider {
       };
     }
 
+    if (autocompleteType === AutocompleteType.BODY) {
+      // suggestions only when triggered by " or keyboard
+      if (context.triggerCharacter && context.triggerCharacter !== '"') {
+        return { suggestions: [] };
+      }
+      const requests = await this.getRequestsBetweenLines(
+        model,
+        position.lineNumber,
+        position.lineNumber
+      );
+      const requestStartLineNumber = requests[0].startLineNumber;
+      const suggestions = getBodyCompletionItems(model, position, requestStartLineNumber);
+      return {
+        suggestions,
+      };
+    }
+
     return {
       suggestions: [],
     };
@@ -338,6 +341,6 @@ export class MonacoEditorActionsProvider {
     context: monaco.languages.CompletionContext,
     token: monaco.CancellationToken
   ): monaco.languages.ProviderResult<monaco.languages.CompletionList> {
-    return this.getSuggestions(model, position);
+    return this.getSuggestions(model, position, context);
   }
 }

src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx

@@ -22,7 +22,7 @@ import {
   safeExpandLiteralStrings,
   languageForContentType,
 } from '../utilities';
-import { useResizeCheckerUtils } from './use_resize_checker_utils';
+import { useResizeCheckerUtils } from './hooks';
 
 export const MonacoEditorOutput: FunctionComponent = () => {
   const { settings: readOnlySettings } = useEditorReadContext();

src/plugins/console/public/application/containers/editor/monaco/monaco_editor_suggestion_provider.ts

@@ -15,7 +15,7 @@ export const getSuggestionProvider = (
 ): monaco.languages.CompletionItemProvider => {
   return {
     // force suggestions when these characters are used
-    triggerCharacters: ['/', '.', '_', ',', '?', '=', '&'],
+    triggerCharacters: ['/', '.', '_', ',', '?', '=', '&', '"'],
     provideCompletionItems: (...args) => {
       if (actionsProvider.current) {
         return actionsProvider.current?.provideCompletionItems(...args);

src/plugins/console/public/application/containers/editor/monaco/types.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 type { ParsedRequest } from '@kbn/monaco';
+
+export interface EditorRequest {
+  method: string;
+  url: string;
+  data: string[];
+}
+
+export interface AdjustedParsedRequest extends ParsedRequest {
+  startLineNumber: number;
+  endLineNumber: number;
+}