@dynatrace/strato-components 3.11.3 → 3.12.0

package/editors/base-code-editor/configuration/configure-critical-gutter-lines.d.ts

@@ -0,0 +1,26 @@
+import type { Diagnostic } from '@codemirror/lint';
+import { RangeSet } from '@codemirror/state';
+import type { Extension, Text } from '@codemirror/state';
+import { GutterMarker } from '@codemirror/view';
+/**
+ * Class applied to every gutter cell on a line with an `error` diagnostic.
+ *
+ * @internal
+ */
+export declare const criticalGutterLineClass = "cm-gutterElement-critical";
+/**
+ * Builds gutter markers for the lines where `error` diagnostics start.
+ *
+ * @param doc - The document associated with the diagnostics.
+ * @param diagnostics - The diagnostics to inspect.
+ * @returns The gutter markers for lines containing errors.
+ * @internal
+ */
+export declare function _buildCriticalGutterLineMarkers(doc: Text, diagnostics: readonly Diagnostic[]): RangeSet<GutterMarker>;
+/**
+ * Marks the gutter cells of the lines carrying an `error` diagnostic.
+ *
+ * @internal
+ */
+export declare const criticalGutterLines: Extension;
+//# sourceMappingURL=configure-critical-gutter-lines.d.ts.map

package/editors/base-code-editor/configuration/configure-critical-gutter-lines.js

@@ -0,0 +1,64 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var configure_critical_gutter_lines_exports = {};
+__export(configure_critical_gutter_lines_exports, {
+  _buildCriticalGutterLineMarkers: () => _buildCriticalGutterLineMarkers,
+  criticalGutterLineClass: () => criticalGutterLineClass,
+  criticalGutterLines: () => criticalGutterLines
+});
+module.exports = __toCommonJS(configure_critical_gutter_lines_exports);
+var import_lint = require("@codemirror/lint");
+var import_state = require("@codemirror/state");
+var import_view = require("@codemirror/view");
+const criticalGutterLineClass = "cm-gutterElement-critical";
+class CriticalGutterLineMarker extends import_view.GutterMarker {
+  elementClass = criticalGutterLineClass;
+}
+const criticalGutterLineMarker = new CriticalGutterLineMarker();
+function _buildCriticalGutterLineMarkers(doc, diagnostics) {
+  const lineStarts = /* @__PURE__ */ new Set();
+  for (const diagnostic of diagnostics) {
+    if (diagnostic.severity !== "error") {
+      continue;
+    }
+    if (diagnostic.from < 0 || diagnostic.from > doc.length) {
+      continue;
+    }
+    lineStarts.add(doc.lineAt(diagnostic.from).from);
+  }
+  return import_state.RangeSet.of(
+    [...lineStarts].map((from) => criticalGutterLineMarker.range(from)),
+    true
+  );
+}
+const criticalGutterLines = import_state.StateField.define({
+  create: () => import_state.RangeSet.empty,
+  update(markers, transaction) {
+    let updated = transaction.docChanged ? markers.map(transaction.changes) : markers;
+    for (const effect of transaction.effects) {
+      if (effect.is(import_lint.setDiagnosticsEffect)) {
+        updated = _buildCriticalGutterLineMarkers(
+          transaction.newDoc,
+          effect.value
+        );
+      }
+    }
+    return updated;
+  },
+  provide: (field) => import_view.gutterLineClass.from(field)
+});

package/editors/base-code-editor/configuration/configure-lint-gutter.d.ts

@@ -1,7 +1,6 @@
 import type { Compartment } from '@codemirror/state';
 import type { EditorView } from '@codemirror/view';
 import type { RefObject } from 'react';
-import type { InlineDiagnostic } from '../../code-editor/inline-diagnostic.js';
 type GutterSeverity = 'error' | 'warning';
 /**
  * Minimal shape shared by CodeMirror's `Diagnostic` and our `InlineDiagnostic`,
@@ -34,8 +33,11 @@ export declare function getLintGutterExtension(shouldShowMarkers: boolean): impo
  * Updates the lint gutter extension in `lintGutterCompartment` to show or hide markers.
  * The gutter column itself is always installed; only marker visibility toggles.
  *
+ * Markers are driven by whatever diagnostics currently exist in CodeMirror's shared
+ * lint state, regardless of which linter populated it.
+ *
  * @internal
  */
-export declare function configureLintGutter(showLintGutter: boolean | undefined, diagnostics: InlineDiagnostic[] | undefined, editorViewRef: RefObject<EditorView>, lintGutterCompartment: Compartment, isLintGutterMarkersShownRef: RefObject<boolean>): void;
+export declare function configureLintGutter(showLintGutter: boolean | undefined, editorViewRef: RefObject<EditorView>, lintGutterCompartment: Compartment, isLintGutterMarkersShownRef: RefObject<boolean>): void;
 export {};
 //# sourceMappingURL=configure-lint-gutter.d.ts.map

package/editors/base-code-editor/configuration/configure-lint-gutter.js

@@ -82,9 +82,12 @@ function getLintGutterExtension(shouldShowMarkers) {
       if (!shouldShowMarkers) {
         return null;
       }
+      const docLength = view.state.doc.length;
       const all = [];
       (0, import_lint.forEachDiagnostic)(view.state, (d) => {
-        all.push(d);
+        if (d.from >= 0 && d.from < docLength) {
+          all.push(d);
+        }
       });
       const severity = _buildLineMarker(
         all,
@@ -96,8 +99,8 @@ function getLintGutterExtension(shouldShowMarkers) {
     lineMarkerChange: () => true
   });
 }
-function configureLintGutter(showLintGutter, diagnostics, editorViewRef, lintGutterCompartment, isLintGutterMarkersShownRef) {
-  const shouldShow = showLintGutter === true && diagnostics !== void 0 && diagnostics.length > 0;
+function configureLintGutter(showLintGutter, editorViewRef, lintGutterCompartment, isLintGutterMarkersShownRef) {
+  const shouldShow = showLintGutter === true;
   if (shouldShow === isLintGutterMarkersShownRef.current) {
     return;
   }

package/editors/base-code-editor/configuration/getDefaultConfigurations.js

@@ -48,6 +48,7 @@ var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
 var import_spacings = __toESM(require("@dynatrace/strato-design-tokens/spacings"));
 var import_typography = __toESM(require("@dynatrace/strato-design-tokens/typography"));
 var import_strato_icons = require("@dynatrace/strato-icons");
+var import_configure_active_line = require("./configure-active-line.js");
 var import_Text = require("../../../typography/text/Text.js");
 var editorStyles = __toESM(require("../BaseCodeEditor.sty.js"));
 var import_testIds = require("../testIds.js");
@@ -186,8 +187,7 @@ const getDefaultConfiguration = (intlProps, options = {
     // empty linter to enable theme for linter errors
     (0, import_language.syntaxHighlighting)(import_highlight.classHighlighter),
     (0, import_view.rectangularSelection)(),
-    (0, import_view.highlightActiveLine)(),
-    (0, import_view.highlightActiveLineGutter)(),
+    import_configure_active_line.activeLineHighlight,
     (0, import_search.highlightSelectionMatches)(),
     import_view.EditorView.domEventObservers({
       keydown: (event) => {
@@ -253,7 +253,8 @@ const getDefaultConfiguration = (intlProps, options = {
         marginBottom: import_spacings.default.Size4
       },
       '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section:has(+ li[role="option"].cm-empty-option)': {
-        borderBottom: "0 !important"
+        borderBottom: "0 !important",
+        marginBottom: 0
       },
       '.cm-tooltip-autocomplete > ul > li[role="option"]': {
         display: "flex",
@@ -325,11 +326,10 @@ const getDefaultConfiguration = (intlProps, options = {
         outline: "none"
       },
       ".cm-tooltip.cm-completionInfo": {
-        padding: `calc(${import_spacings.default.Size4} + ${import_spacings.default.Size6}) ${import_spacings.default.Size16} !important`,
+        padding: `${import_spacings.default.Size12} ${import_spacings.default.Size16} !important`,
         marginLeft: import_spacings.default.Size4,
         marginRight: import_spacings.default.Size4,
-        maxWidth: "500px",
-        minWidth: "200px"
+        width: "360px !important"
       },
       ".cm-tooltip-autocomplete > ul > li.cm-completionOption-action > div": {
         width: "100%"

package/editors/base-code-editor/utils/format-diagnostics-summary.js

@@ -22,7 +22,7 @@ __export(format_diagnostics_summary_exports, {
 module.exports = __toCommonJS(format_diagnostics_summary_exports);
 var import_baseCodeEditorMessages = require("../baseCodeEditorMessages.js");
 function formatDiagnosticsSummary(diagnostics, intl, doc) {
-  const lineNumberFor = (offset) => doc.lineAt(Math.min(offset, doc.length)).number;
+  const lineNumberFor = (offset) => doc.lineAt(Math.max(0, Math.min(offset, doc.length))).number;
   const severityMessages = {
     error: import_baseCodeEditorMessages.BASE_CODE_EDITOR_MESSAGES.diagnosticsSeverityError,
     warning: import_baseCodeEditorMessages.BASE_CODE_EDITOR_MESSAGES.diagnosticsSeverityWarning,

package/editors/dql-editor/DQLEditor.d.ts

@@ -21,6 +21,12 @@ export interface DQLEditorBaseProps extends SharedBaseCodeEditorProps, WithChild
      * This can be used to get the validation result from outside the editor.
      */
     onValidityChange?: (validityInfo: DQLEditorValidityInfo[]) => void;
+    /**
+     * When `true`, shows a severity marker in a gutter column next to each line with a
+     * validation problem. Has no effect while the query has no current validation problems.
+     * @defaultValue false
+     */
+    showLintGutter?: boolean;
 }
 /**
  * Props for the `DQLEditor` in controlled usage.

package/editors/dql-editor/DQLEditor.js

@@ -75,6 +75,7 @@ const DQLEditorFwd = /* @__PURE__ */ (0, import_react.forwardRef)(
       onValidationStart,
       onValidationEnd,
       onValidityChange,
+      showLintGutter = false,
       onFocus,
       onBlur,
       size = "default",
@@ -171,6 +172,7 @@ const DQLEditorFwd = /* @__PURE__ */ (0, import_react.forwardRef)(
         folding,
         onFoldingChange,
         configuration: editorConfig,
+        showLintGutter,
         onFocus,
         onBlur,
         size,

package/editors/dql-editor/actions-menu/ActionsMenu.css

@@ -1,42 +1,42 @@
-._1okebta0-3-11-3 {
+._1okebta0-3-12-0 {
   position: relative;
   width: 100%;
 }
-._1okebta1-3-11-3 {
+._1okebta1-3-12-0 {
   display: flex;
   flex-grow: 1;
   max-height: 100%;
   min-height: 100%;
 }
-._1okebta2-3-11-3 {
+._1okebta2-3-12-0 {
   position: absolute;
   z-index: var(--dt-elevations-default, 1);
   top: 0;
   right: 0;
 }
-._1okebta3-3-11-3 {
+._1okebta3-3-12-0 {
   top: calc(var(--dt-spacings-size-6, 6px) + var(--dt-borders-width-emphasized, 2px));
   right: calc(var(--dt-spacings-size-6, 6px) + var(--dt-borders-width-emphasized, 2px));
 }
-._1jgl8s50-3-11-3 ._1okebta3-3-11-3 {
+._1jgl8s50-3-12-0 ._1okebta3-3-12-0 {
   top: calc(var(--dt-spacings-size-6, 6px) + var(--dt-borders-width-default, 1px));
   right: calc(var(--dt-spacings-size-6, 6px) + var(--dt-borders-width-default, 1px));
 }
-._1okebta4-3-11-3 {
+._1okebta4-3-12-0 {
   top: calc(var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-emphasized, 2px));
   right: calc(var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-emphasized, 2px));
 }
-._1jgl8s50-3-11-3 ._1okebta4-3-11-3 {
+._1jgl8s50-3-12-0 ._1okebta4-3-12-0 {
   top: calc(var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-default, 1px));
   right: calc(var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-default, 1px));
 }
-._1okebta5-3-11-3 .cm-editor {
+._1okebta5-3-12-0 .cm-editor {
   padding-right: calc(var(--dt-spacings-size-40, 40px) + var(--dt-spacings-size-4, 4px));
 }
-._1okebta6-3-11-3 .cm-editor {
+._1okebta6-3-12-0 .cm-editor {
   padding-right: calc(var(--dt-spacings-size-28, 28px) + var(--dt-spacings-size-4, 4px));
 }
-._1okebta7-3-11-3 {
+._1okebta7-3-12-0 {
   white-space: nowrap;
   margin-left: var(--dt-spacings-size-8, 8px);
 }

package/editors/dql-editor/actions-menu/ActionsMenu.sty.js

@@ -27,8 +27,8 @@ module.exports = __toCommonJS(ActionsMenu_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/AppRoot.css");
 var import_ActionsMenu_css_ts_vanilla = require("./ActionsMenu.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var actionsMenuWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1okebta2-3-11-3", variantClassNames: { size: { "default": "_1okebta3-3-11-3", condensed: "_1okebta4-3-11-3" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var editorWithActionsMenu = { "default": "_1okebta5-3-11-3", condensed: "_1okebta6-3-11-3" };
-var editorWrapper = "_1okebta0-3-11-3";
-var editorWrapperFullHeight = "_1okebta1-3-11-3";
-var formatQueryShortcut = "_1okebta7-3-11-3";
+var actionsMenuWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1okebta2-3-12-0", variantClassNames: { size: { "default": "_1okebta3-3-12-0", condensed: "_1okebta4-3-12-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var editorWithActionsMenu = { "default": "_1okebta5-3-12-0", condensed: "_1okebta6-3-12-0" };
+var editorWrapper = "_1okebta0-3-12-0";
+var editorWrapperFullHeight = "_1okebta1-3-12-0";
+var formatQueryShortcut = "_1okebta7-3-12-0";

package/{esm/editors/dql-editor/dql → editors/dql-editor/autocomplete}/SuggestionsInfoSection.css

@@ -1,8 +1,8 @@
 .cm-tooltip.cm-tooltip-autocomplete {
   container-type: inline-size;
-  container-name: _cpuf060-3-11-3;
+  container-name: _1pyam7v0-3-12-0;
 }
-._cpuf061-3-11-3 {
+._1pyam7v1-3-12-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
@@ -15,20 +15,20 @@
   align-items: center;
   gap: var(--dt-spacings-size-16, 16px);
 }
-._cpuf062-3-11-3 {
+._1pyam7v2-3-12-0 {
   align-items: center;
   gap: var(--dt-spacings-size-16, 16px);
 }
-._cpuf063-3-11-3 {
+._1pyam7v3-3-12-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-@container _cpuf060-3-11-3 (max-width: 289px) {
-  ._cpuf061-3-11-3 {
+@container _1pyam7v0-3-12-0 (max-width: 289px) {
+  ._1pyam7v1-3-12-0 {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--dt-spacings-size-8, 8px);
   }
-  ._cpuf062-3-11-3 {
+  ._1pyam7v2-3-12-0 {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--dt-spacings-size-8, 8px);

package/editors/dql-editor/autocomplete/SuggestionsInfoSection.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Footer rendered below the DQL autocomplete dropdown.
+ */
+export declare const SuggestionsInfoSection: () => import("react").JSX.Element;
+//# sourceMappingURL=SuggestionsInfoSection.d.ts.map

package/editors/dql-editor/{dql → autocomplete}/SuggestionsInfoSection.sty.js

@@ -23,6 +23,6 @@ __export(SuggestionsInfoSection_css_exports, {
 });
 module.exports = __toCommonJS(SuggestionsInfoSection_css_exports);
 var import_SuggestionsInfoSection_css_ts_vanilla = require("./SuggestionsInfoSection.css");
-var container = "_cpuf061-3-11-3";
-var shortcutLabel = "_cpuf063-3-11-3";
-var shortcutsGroup = "_cpuf062-3-11-3";
+var container = "_1pyam7v1-3-12-0";
+var shortcutLabel = "_1pyam7v3-3-12-0";
+var shortcutsGroup = "_1pyam7v2-3-12-0";

package/editors/dql-editor/{dql → autocomplete}/messages.d.ts

@@ -14,5 +14,15 @@ export declare const dqlEditorMessages: {
         id: string;
         description: string;
     };
+    suggestionDocumentationLink: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
+    suggestionSyntaxLabel: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
 };
 //# sourceMappingURL=messages.d.ts.map

package/editors/dql-editor/{dql → autocomplete}/messages.js

@@ -36,5 +36,15 @@ const dqlEditorMessages = (0, import_react_intl.defineMessages)({
     defaultMessage: "DQL syntax",
     id: "anCkyfyzovTz3qtv",
     description: "Link text in the DQL editor autocomplete info section, pointing to the external DQL syntax documentation."
+  },
+  suggestionDocumentationLink: {
+    defaultMessage: "Documentation",
+    id: "VimibV2KF+yA1+4y",
+    description: "Link text in the DQL editor autocomplete suggestion detail tooltip, pointing to the external documentation for the selected command, function, or timeseries aggregation."
+  },
+  suggestionSyntaxLabel: {
+    defaultMessage: "Syntax:",
+    id: "bIs/Bx2b6NyF7Hpe",
+    description: "Label preceding the DQL syntax code example in the DQL editor autocomplete suggestion detail tooltip."
   }
 });

package/editors/dql-editor/{dql → autocomplete}/open-autocomplete.js

@@ -22,7 +22,7 @@ __export(open_autocomplete_exports, {
 });
 module.exports = __toCommonJS(open_autocomplete_exports);
 var import_autocomplete = require("@codemirror/autocomplete");
-var import_dql_linter = require("./dql-linter.js");
+var import_dql_linter = require("../dql/dql-linter.js");
 const SUBQUERY_PREFIX_LOOKBACK_CHARS = 100;
 function isStartOfCommandOrParameter(context) {
   return context.matchBefore(/[,|]\s+$/) !== null;

package/editors/dql-editor/autocomplete/suggestion-autocompletions.d.ts

@@ -0,0 +1,24 @@
+import { AutocompleteSuggestion } from '@dynatrace-sdk/client-query';
+import { type SuggestionCache } from './get-suggestions.js';
+import type { AutocompleteProvider } from '../../base-code-editor/auto-completion/autocompletion.extension.js';
+type FilteredSuggestion = AutocompleteSuggestion & {
+    score: number;
+    startPos: number;
+};
+/**
+ * Derives the tooltip title for a suggestion by finding the first part that
+ * produces a token type label, then combining that part's suggestion text
+ * (capitalized) with the lower-cased label (e.g. part `"arrayAvg"` + `"Function"` → `"ArrayAvg function"`).
+ * @param suggestion - the suggestion to derive the title for.
+ * @returns the derived title string, or `undefined` when no part produces a token type label.
+ */
+export declare function getSuggestionTitle(suggestion: FilteredSuggestion): string | undefined;
+/**
+ * Creates the DQL autocomplete provider bound to a `cache` owned by the calling
+ * editor instance. Keeping the cache per-instance ensures suggestions never
+ * outlive the editor or leak between editors (or between dev-app stories).
+ * @param cache - the suggestion cache owned by the editor instance.
+ */
+export declare const createSuggestionAutocompletion: (cache: SuggestionCache) => AutocompleteProvider;
+export {};
+//# sourceMappingURL=suggestion-autocompletions.d.ts.map

package/editors/dql-editor/{dql → autocomplete}/suggestion-autocompletions.js

@@ -17,18 +17,19 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var suggestion_autocompletions_exports = {};
 __export(suggestion_autocompletions_exports, {
-  createSuggestionAutocompletion: () => createSuggestionAutocompletion
+  createSuggestionAutocompletion: () => createSuggestionAutocompletion,
+  getSuggestionTitle: () => getSuggestionTitle
 });
 module.exports = __toCommonJS(suggestion_autocompletions_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_dql_linter = require("./dql-linter.js");
 var import_fuzzy_match = require("./fuzzy-match.js");
 var import_get_suggestions = require("./get-suggestions.js");
-var import_SuggestionPart = require("./SuggestionPart.js");
+var import_SuggestionPart = require("./suggestion-popup/SuggestionPart.js");
 var import_token_type_label = require("./token-type-label.js");
 var import_dql_common = require("../../../core/dql/dql-common.js");
 var import_Flex = require("../../../layouts/flex/Flex.js");
 var import_Text = require("../../../typography/text/Text.js");
+var import_dql_linter = require("../dql/dql-linter.js");
 function extractWordToken(content) {
   const rawCapture = /\W?([\w.]*)$/.exec(content)?.[1] ?? "";
   const trimmedCapture = rawCapture.replace(/^\d+(\.\d+)?/, "");
@@ -41,6 +42,11 @@ const TOKEN_TYPES = {
   ANCHOR: "FIELD_VALUE",
   SYNOPSIS_INFO: "SYNOPSIS_INFO"
 };
+const TITLE_TYPES = /* @__PURE__ */ new Set([
+  "COMMAND_NAME",
+  "FUNCTION_NAME",
+  "TIMESERIES_AGGREGATION"
+]);
 function isHiddenPart(part) {
   const type = part.type;
   return type === TOKEN_TYPES.ANCHOR || type === TOKEN_TYPES.SYNOPSIS_INFO;
@@ -109,6 +115,20 @@ async function getFilteredSuggestions(autocompleteContent, patternLength, explic
     explicit
   );
 }
+function getSuggestionTitle(suggestion) {
+  for (const part of suggestion.parts) {
+    if (!TITLE_TYPES.has(part.type)) {
+      continue;
+    }
+    const label = (0, import_token_type_label.getTokenTypeLabel)([part]);
+    if (label !== void 0) {
+      const { suggestion: text } = part;
+      return `${text.charAt(0).toUpperCase()}${text.slice(
+        1
+      )} ${label.toLowerCase()}`;
+    }
+  }
+}
 function buildSuggestionInfoPopup(suggestion) {
   const infoParts = suggestion.parts.filter(
     (part) => !!part.info && !isHiddenPart(part)
@@ -116,7 +136,15 @@ function buildSuggestionInfoPopup(suggestion) {
   if (infoParts.length === 0) {
     return void 0;
   }
-  return () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Flex.Flex, { flexDirection: "column", gap: 16, children: infoParts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SuggestionPart.SuggestionPart, { suggestionPart: part }, part.info)) });
+  const title = getSuggestionTitle(suggestion);
+  if (infoParts.length === 1) {
+    return () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SuggestionPart.SuggestionPart, { suggestionPart: infoParts[0], title });
+  }
+  const [firstPart, ...remainingParts] = infoParts;
+  return () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { flexDirection: "column", gap: 16, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SuggestionPart.SuggestionPart, { suggestionPart: firstPart, title }),
+    remainingParts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SuggestionPart.SuggestionPart, { suggestionPart: part }, part.info))
+  ] });
 }
 function buildSuggestionPopup(label, truncated, infoPopup) {
   if (label.length === 0) {

package/editors/dql-editor/autocomplete/suggestion-popup/DocumentationLink.d.ts

@@ -0,0 +1,15 @@
+import type { AutocompleteSuggestionPart } from '@dynatrace-sdk/client-query';
+/**
+ * Generates a documentation URL for a DQL suggestion part, or `undefined` if
+ * the part's token type has no corresponding docs page.
+ * @param suggestion - the autocomplete suggestion part as returned by the endpoint
+ */
+export declare function generateDocumentationLink(suggestion: AutocompleteSuggestionPart | undefined): string | undefined;
+/**
+ * Renders a small "Documentation" external link for a DQL suggestion part,
+ * or nothing when the part's token type has no associated docs page.
+ */
+export declare const DocumentationLink: ({ suggestionPart, }: {
+    suggestionPart: AutocompleteSuggestionPart | undefined;
+}) => import("react").JSX.Element | null;
+//# sourceMappingURL=DocumentationLink.d.ts.map

package/editors/dql-editor/{dql → autocomplete/suggestion-popup}/DocumentationLink.js

@@ -22,24 +22,28 @@ __export(DocumentationLink_exports, {
 });
 module.exports = __toCommonJS(DocumentationLink_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_external_links = require("../../../core/external-links.js");
-var import_ExternalLink = require("../../../typography/external-link/ExternalLink.js");
+var import_react_intl = require("react-intl");
+var import_external_links = require("../../../../core/external-links.js");
+var import_ExternalLink = require("../../../../typography/external-link/ExternalLink.js");
+var import_Text = require("../../../../typography/text/Text.js");
+var import_messages = require("../messages.js");
+const DOCUMENTATION_URL_PARTS = /* @__PURE__ */ new Map([
+  ["COMMAND_NAME", "command"],
+  ["FUNCTION_NAME", "function"],
+  ["TIMESERIES_AGGREGATION", "timeseries"]
+]);
 function generateDocumentationLink(suggestion) {
-  const supportedTypes = /* @__PURE__ */ new Map();
-  supportedTypes.set("COMMAND_NAME", "command");
-  supportedTypes.set("FUNCTION_NAME", "function");
-  supportedTypes.set("TIMESERIES_AGGREGATION", "timeseries");
-  if (!suggestion?.type || !Array.from(supportedTypes.keys()).includes(suggestion.type)) {
+  const urlPart = suggestion?.type && DOCUMENTATION_URL_PARTS.get(suggestion.type);
+  if (!urlPart) {
     return void 0;
   }
-  const encoded = encodeURI(
-    `${supportedTypes.get(suggestion.type)}_${suggestion.suggestion}`
-  );
+  const encoded = encodeURI(`${urlPart}_${suggestion.suggestion}`);
   return `${import_external_links.DQL_DOCUMENTATION_URL_PREFIX}${encoded}`;
 }
 const DocumentationLink = ({
   suggestionPart
 }) => {
+  const intl = (0, import_react_intl.useIntl)();
   const docUrl = generateDocumentationLink(suggestionPart);
-  return docUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ExternalLink.ExternalLink, { href: docUrl, "data-dt-name": "LearnMore", children: "Learn more" }) : null;
+  return docUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "small", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ExternalLink.ExternalLink, { href: docUrl, "data-dt-name": "LearnMore", children: intl.formatMessage(import_messages.dqlEditorMessages.suggestionDocumentationLink) }) }) : null;
 };

package/editors/dql-editor/autocomplete/suggestion-popup/SuggestionPart.d.ts

@@ -0,0 +1,17 @@
+import type { AutocompleteSuggestionPart } from '@dynatrace-sdk/client-query';
+type SuggestionPartProps = {
+    /**
+     * The autocomplete suggestion part supplying the info text and optional synopsis.
+     */
+    suggestionPart: AutocompleteSuggestionPart;
+    /**
+     * Optional heading displayed above the info text.
+     */
+    title?: string;
+};
+/**
+ * Renders the detail body for a single autocomplete suggestion info part.
+ */
+export declare const SuggestionPart: ({ suggestionPart, title, }: SuggestionPartProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SuggestionPart.d.ts.map

package/editors/dql-editor/autocomplete/suggestion-popup/SuggestionPart.js

@@ -0,0 +1,55 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SuggestionPart_exports = {};
+__export(SuggestionPart_exports, {
+  SuggestionPart: () => SuggestionPart
+});
+module.exports = __toCommonJS(SuggestionPart_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_intl = require("react-intl");
+var import_DocumentationLink = require("./DocumentationLink.js");
+var import_CodeSnippet = require("../../../../content/code-snippet/CodeSnippet.js");
+var import_Flex = require("../../../../layouts/flex/Flex.js");
+var import_Text = require("../../../../typography/text/Text.js");
+var import_messages = require("../messages.js");
+const SuggestionPart = ({
+  suggestionPart,
+  title
+}) => {
+  const intl = (0, import_react_intl.useIntl)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { flexDirection: "column", gap: 8, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { flexDirection: "column", gap: 4, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "base-emphasized", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "base", children: suggestionPart.info })
+    ] }),
+    suggestionPart.synopsis && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { flexDirection: "column", gap: 4, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "small", children: intl.formatMessage(import_messages.dqlEditorMessages.suggestionSyntaxLabel) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_CodeSnippet.CodeSnippet,
+        {
+          language: "dql",
+          showLineNumbers: false,
+          showCopyAction: false,
+          lineBreaks: true,
+          children: suggestionPart.synopsis
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DocumentationLink.DocumentationLink, { suggestionPart })
+  ] });
+};