@dynatrace/strato-components 3.8.0 → 3.9.1

package/filters/filter-field/suggestions/SuggestionDetails.css

@@ -1,7 +1,7 @@
-._tn2lgm0-3-8-0 {
+._tn2lgm0-3-9-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   min-width: 0;
 }
-._tn2lgm1-3-8-0 {
+._tn2lgm1-3-9-1 {
   display: flex;
 }

package/filters/filter-field/suggestions/SuggestionDetails.sty.js

@@ -22,5 +22,5 @@ __export(SuggestionDetails_css_exports, {
 });
 module.exports = __toCommonJS(SuggestionDetails_css_exports);
 var import_SuggestionDetails_css_ts_vanilla = require("./SuggestionDetails.css");
-var suggestionDetails = "_tn2lgm0-3-8-0";
-var suggestionDetailsText = "_tn2lgm1-3-8-0";
+var suggestionDetails = "_tn2lgm0-3-9-1";
+var suggestionDetailsText = "_tn2lgm1-3-9-1";

package/filters/filter-field/suggestions/SuggestionGroup.css

@@ -1,4 +1,4 @@
-._1smjoa13-3-8-0:not(:first-child) > ._5cheea1-3-8-0::before {
+._1smjoa13-3-9-1:not(:first-child) > ._5cheea1-3-9-1::before {
   content: "";
   position: relative;
   display: block;
@@ -6,17 +6,17 @@
   padding-top: var(--dt-spacings-size-8, 8px);
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._5cheea2-3-8-0 {
+._5cheea2-3-9-1 {
   position: relative;
   margin: 0;
   padding: 0;
   list-style-type: none;
   height: fit-content;
 }
-._5cheea2-3-8-0:not(:first-child)::before,
-    ._5cheea0-3-8-0:not(:first-child) ._5cheea2-3-8-0::before,
-    ._ssu5rt2-3-8-0:not(._5cheea0-3-8-0) ._1smjoa13-3-8-0:has(._5cheea2-3-8-0):not(:first-child) ._5cheea2-3-8-0::before,
-    ._ssu5rt2-3-8-0:not(._5cheea0-3-8-0) ._1smjoa13-3-8-0:has(._5cheea2-3-8-0):has(+ ._1smjoa13-3-8-0 > :not(._5cheea2-3-8-0)) ._5cheea2-3-8-0::after
+._5cheea2-3-9-1:not(:first-child)::before,
+    ._5cheea0-3-9-1:not(:first-child) ._5cheea2-3-9-1::before,
+    ._ssu5rt2-3-9-1:not(._5cheea0-3-9-1) ._1smjoa13-3-9-1:has(._5cheea2-3-9-1):not(:first-child) ._5cheea2-3-9-1::before,
+    ._ssu5rt2-3-9-1:not(._5cheea0-3-9-1) ._1smjoa13-3-9-1:has(._5cheea2-3-9-1):has(+ ._1smjoa13-3-9-1 > :not(._5cheea2-3-9-1)) ._5cheea2-3-9-1::after
    {
   content: "";
   position: relative;

package/filters/filter-field/suggestions/SuggestionGroup.sty.js

@@ -27,6 +27,6 @@ var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/A
 var import_virtualFocus_css_ts_vanilla = require("../../../core/styles/virtualFocus.css");
 var import_Suggestion_css_ts_vanilla = require("./Suggestion.css");
 var import_SuggestionGroup_css_ts_vanilla = require("./SuggestionGroup.css");
-var builtInSuggestionsContainer = "_5cheea0-3-8-0";
-var groupHeaderSeparator = "_5cheea1-3-8-0";
-var suggestionGroup = "_5cheea2-3-8-0";
+var builtInSuggestionsContainer = "_5cheea0-3-9-1";
+var groupHeaderSeparator = "_5cheea1-3-9-1";
+var suggestionGroup = "_5cheea2-3-9-1";

package/filters/filter-field/suggestions/SuggestionGroupLabel.css

@@ -1,4 +1,4 @@
-._1mfalko0-3-8-0 {
+._1mfalko0-3-9-1 {
   padding: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);

package/filters/filter-field/suggestions/SuggestionGroupLabel.sty.js

@@ -21,4 +21,4 @@ __export(SuggestionGroupLabel_css_exports, {
 });
 module.exports = __toCommonJS(SuggestionGroupLabel_css_exports);
 var import_SuggestionGroupLabel_css_ts_vanilla = require("./SuggestionGroupLabel.css");
-var suggestionGroupLabel = "_1mfalko0-3-8-0";
+var suggestionGroupLabel = "_1mfalko0-3-9-1";

package/filters/filter-field/suggestions/SuggestionTips.css

@@ -1,22 +1,22 @@
-._1dx7u80-3-8-0 {
-  --_1igzksy0-3-8-0: var(--dt-borders-radius-surface-subdued, 9px);
+._1dx7u80-3-9-1 {
+  --_1igzksy0-3-9-1: var(--dt-borders-radius-surface-subdued, 9px);
 }
-._1dx7u81-3-8-0 {
+._1dx7u81-3-9-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   flex: 1;
 }
-._1dx7u82-3-8-0 {
+._1dx7u82-3-9-1 {
   width: 100%;
   overflow: hidden;
   transform-origin: center;
 }
-._1dx7u84-3-8-0 {
+._1dx7u84-3-9-1 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-@container _ssu5rt0-3-8-0 (max-width: 289px) {
-  ._1dx7u83-3-8-0 {
+@container _ssu5rt0-3-9-1 (max-width: 289px) {
+  ._1dx7u83-3-9-1 {
     flex-direction: column;
     width: 100%;
   }

package/filters/filter-field/suggestions/SuggestionTips.sty.js

@@ -26,8 +26,8 @@ __export(SuggestionTips_css_exports, {
 module.exports = __toCommonJS(SuggestionTips_css_exports);
 var import_SuggestionsOverlay_css_ts_vanilla = require("./SuggestionsOverlay.css");
 var import_SuggestionTips_css_ts_vanilla = require("./SuggestionTips.css");
-var docsLink = "_1dx7u84-3-8-0";
-var suggestionTips = "_1dx7u80-3-8-0";
-var suggestionTipsContent = "_1dx7u83-3-8-0";
-var suggestionTipsWrapper = "_1dx7u82-3-8-0";
-var suggstionTipsEllipsis = "_1dx7u81-3-8-0";
+var docsLink = "_1dx7u84-3-9-1";
+var suggestionTips = "_1dx7u80-3-9-1";
+var suggestionTipsContent = "_1dx7u83-3-9-1";
+var suggestionTipsWrapper = "_1dx7u82-3-9-1";
+var suggstionTipsEllipsis = "_1dx7u81-3-9-1";

package/filters/filter-field/suggestions/SuggestionsOverlay.css

@@ -1,23 +1,23 @@
-._ssu5rt1-3-8-0 {
+._ssu5rt1-3-9-1 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
   container-type: inline-size;
-  container-name: _ssu5rt0-3-8-0;
+  container-name: _ssu5rt0-3-9-1;
   transform-origin: top;
 }
-._ssu5rt2-3-8-0 {
+._ssu5rt2-3-9-1 {
   box-sizing: border-box;
   padding: 0;
 }
-._ssu5rt2-3-8-0._ssu5rt2-3-8-0 {
-  --_1igzksy0-3-8-0: var(--dt-borders-radius-surface-subdued, 9px);
+._ssu5rt2-3-9-1._ssu5rt2-3-9-1 {
+  --_1igzksy0-3-9-1: var(--dt-borders-radius-surface-subdued, 9px);
 }
-._ssu5rt3-3-8-0 {
+._ssu5rt3-3-9-1 {
   overflow: hidden;
   height: 100%;
 }
-._ssu5rt4-3-8-0 {
+._ssu5rt4-3-9-1 {
   padding: var(--dt-spacings-size-4, 4px);
   height: 100%;
   max-height: 101vh;

package/filters/filter-field/suggestions/SuggestionsOverlay.sty.js

@@ -25,8 +25,8 @@ __export(SuggestionsOverlay_css_exports, {
 });
 module.exports = __toCommonJS(SuggestionsOverlay_css_exports);
 var import_SuggestionsOverlay_css_ts_vanilla = require("./SuggestionsOverlay.css");
-var suggestionsOverlay = "_ssu5rt2-3-8-0";
-var suggestionsOverlayWrapper = "_ssu5rt1-3-8-0";
-var suggestionsOverlayWrapperContainer = "_ssu5rt0-3-8-0";
-var suggestionsScrollContainer = "_ssu5rt4-3-8-0";
-var suggestionsScrollContainerWrapper = "_ssu5rt3-3-8-0";
+var suggestionsOverlay = "_ssu5rt2-3-9-1";
+var suggestionsOverlayWrapper = "_ssu5rt1-3-9-1";
+var suggestionsOverlayWrapperContainer = "_ssu5rt0-3-9-1";
+var suggestionsScrollContainer = "_ssu5rt4-3-9-1";
+var suggestionsScrollContainerWrapper = "_ssu5rt3-3-9-1";

package/filters/filter-field/utils/conversion/lezer-tree-conversion/parent-node/group.js

@@ -23,6 +23,7 @@ module.exports = __toCommonJS(group_exports);
 var import_statement = require("./statement.js");
 var import_is_node_environment = require("../../../../../../core/utils/is-node-environment.js");
 var import_decoration_marks = require("../../../../decorations/decoration-marks.js");
+var import_statement_status_registry = require("../../../statement-status-registry.js");
 var import_validation_helper_functions = require("../../../validation-utils/validation-helper-functions.js");
 var import_logical_operator = require("../logical-operator.js");
 var import_error = require("../value/error.js");
@@ -69,7 +70,11 @@ function convertFilterGroup(node, doc, numberParser, internalValidatorMap, custo
       }
       case "FilterStatement": {
         hasChildNodes = true;
-        const { convertedNode: statementNode, errors: statementErrors } = (0, import_statement.convertFilterStatement)(
+        const {
+          convertedNode: statementNode,
+          errors: statementErrors,
+          status
+        } = (0, import_statement.convertFilterStatement)(
           childNode,
           doc,
           numberParser,
@@ -78,6 +83,7 @@ function convertFilterGroup(node, doc, numberParser, internalValidatorMap, custo
           parserConfig,
           context
         );
+        import_statement_status_registry.statementStatusRegistry.set(statementNode, status);
         convertedNode.children.push(statementNode);
         errors.push(...statementErrors);
         return false;

package/filters/filter-field/utils/conversion/lezer-tree-conversion/parent-node/statement.d.ts

@@ -9,4 +9,6 @@ import type { InternalValidatorMap } from '../../../../utils/validation-utils/no
  * Convert a filter field statement node.
  * @internal
  */
-export declare function convertFilterStatement(node: SyntaxNodeRef, doc: string, numberParser: NumberFormatParser, internalValidatorMap: InternalValidatorMap | undefined, customTypes?: FilterFieldCustomTypes, parserConfig?: FilterFieldProps['parserConfig'], context?: FilterFieldLezerNodeType): ConvertedLezerNode<FilterFieldStatementNode>;
+export declare function convertFilterStatement(node: SyntaxNodeRef, doc: string, numberParser: NumberFormatParser, internalValidatorMap: InternalValidatorMap | undefined, customTypes?: FilterFieldCustomTypes, parserConfig?: FilterFieldProps['parserConfig'], context?: FilterFieldLezerNodeType): ConvertedLezerNode<FilterFieldStatementNode, {
+    status: 'complete' | 'incomplete' | 'indeterminate';
+}>;

package/filters/filter-field/utils/conversion/lezer-tree-conversion/parent-node/statement.js

@@ -24,6 +24,7 @@ var import_inclusion = require("./inclusion.js");
 var import_is_node_environment = require("../../../../../../core/utils/is-node-environment.js");
 var import_decoration_marks = require("../../../../decorations/decoration-marks.js");
 var import_error_message_helpers = require("../../../error-utils/error-message-helpers.js");
+var import_get_statement_status = require("../../../get-statement-status.js");
 var import_get_text = require("../../../get-text.js");
 var import_suggestion_type = require("../../../suggestions-utils/suggestion-type.js");
 var import_validation_helper_functions = require("../../../validation-utils/validation-helper-functions.js");
@@ -394,7 +395,11 @@ function convertFilterStatement(node, doc, numberParser, internalValidatorMap, c
       }
     });
   }
-  return { convertedNode: convertedStatement, errors };
+  return {
+    convertedNode: convertedStatement,
+    errors,
+    status: (0, import_get_statement_status.getStatementStatus)(node.node.cursor(), doc)
+  };
 }
 function hasJSONPathTypePredicate(internalValidatorMap, key) {
   const config = internalValidatorMap.normalizedKeys.byKey.get(key);

package/filters/filter-field/utils/conversion/tree-precedence.js

@@ -82,7 +82,7 @@ function groupByLogicalOperators(data, group) {
   }
   for (const [index, child] of tree.children.entries()) {
     if (child.type === "Error" && !(0, import_tree_node_guards.isLogicalOperator)(child)) {
-      sortedTree.children.push(child);
+      (nestedTree ?? sortedTree).children.push(child);
     }
     if (child.type === "Statement" || child.type === "Group" && child.explicit) {
       const prevNode = tree.children[index - 1];

package/filters/filter-field/utils/statement-status-registry.d.ts

@@ -0,0 +1,3 @@
+import type { FilterFieldStatementNode } from '../types/tree-nodes.js';
+/** @internal */
+export declare const statementStatusRegistry: WeakMap<FilterFieldStatementNode, "indeterminate" | "complete" | "incomplete">;

package/{charts/histogram/components/annotations-histogram/constants.js → filters/filter-field/utils/statement-status-registry.js}

@@ -15,9 +15,9 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var constants_exports = {};
-__export(constants_exports, {
-  ANNOTATIONS_PADDING_BOTTOM: () => ANNOTATIONS_PADDING_BOTTOM
+var statement_status_registry_exports = {};
+__export(statement_status_registry_exports, {
+  statementStatusRegistry: () => statementStatusRegistry
 });
-module.exports = __toCommonJS(constants_exports);
-const ANNOTATIONS_PADDING_BOTTOM = 6;
+module.exports = __toCommonJS(statement_status_registry_exports);
+const statementStatusRegistry = /* @__PURE__ */ new WeakMap();

package/filters/segment-selector/SegmentSelector.css

@@ -1,22 +1,22 @@
-._11m6jkl0-3-8-0 {
+._11m6jkl0-3-9-1 {
   all: unset;
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-8, 8px);
 }
-._11m6jkl1-3-8-0 {
+._11m6jkl1-3-9-1 {
   all: unset;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._11m6jkl2-3-8-0 {
+._11m6jkl2-3-9-1 {
   max-height: 100px;
   overflow-y: auto;
   overflow-x: hidden;
   padding-right: var(--dt-spacings-size-12, 12px);
 }
-._11m6jkl3-3-8-0 > div {
+._11m6jkl3-3-9-1 > div {
   padding-right: var(--dt-spacings-size-0, 0);
 }

package/filters/segment-selector/SegmentSelector.js

@@ -34,7 +34,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_intl = require("react-intl");
 var import_react_is = require("react-is");
-var import_useSyncedFormControlProps = require("../../forms/forms-core/hooks/useSyncedFormControlProps.js");
+var import_useFormControl = require("../../forms/forms-core/hooks/useFormControl.js");
 var import_formfield_messages_state_reducer = require("../../forms/forms-core/state/formfield-messages-state-reducer.js");
 var import_SegmentsCache = require("./contexts/SegmentsCache/SegmentsCache.js");
 var import_SegmentsTriggerContext = require("./contexts/SegmentsUI/SegmentsTriggerContext.js");
@@ -60,7 +60,6 @@ var import_StratoLoggerContext = require("../../core/sdk/StratoLoggerContext.js"
 var import_is_node_environment = require("../../core/utils/is-node-environment.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
 var import_FormFieldMessageContextProvider = require("../../forms/forms-core/components/form-field/FormFieldMessageContextProvider.js");
-var import_useFormFieldMessagesContext = require("../../forms/forms-core/hooks/useFormFieldMessagesContext.js");
 var import_useFormFieldValidation = require("../../forms/forms-core/hooks/useFormFieldValidation.js");
 var import_useCustomMessageEmitter = require("../../forms/validation/useCustomMessageEmitter.js");
 var import_useValidationStateEmitter = require("../../forms/validation/useValidationStateEmitter.js");
@@ -113,7 +112,16 @@ const SegmentSelectorFwd = (0, import_react.forwardRef)((props, forwardedRef) =>
   const inputRef = (0, import_react.useRef)(null);
   const internalButtonRef = (0, import_react.useRef)(null);
   const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
-  const { disabled, required, id, ariaDisabled, readOnly } = (0, import_useSyncedFormControlProps.useSyncedFormControlProps)({
+  const {
+    disabled,
+    required,
+    id,
+    ariaDisabled,
+    readOnly,
+    showError,
+    messageState: formFieldMessagesState,
+    messageDispatch: formFieldMessagesDispatch
+  } = (0, import_useFormControl.useFormControl)({
     propDisabled,
     propRequired,
     propId,
@@ -132,7 +140,6 @@ const SegmentSelectorFwd = (0, import_react.forwardRef)((props, forwardedRef) =>
     triggerAriaProps,
     id
   );
-  const { state: formFieldMessagesState, dispatch: formFieldMessagesDispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
   const errorId = (0, import_useId.useId)();
   const { segments } = (0, import_useSegments.useSegments)();
   const stringifiedValue = JSON.stringify(segments);
@@ -342,7 +349,7 @@ const SegmentSelectorFwd = (0, import_react.forwardRef)((props, forwardedRef) =>
         onBlur: handleOnBlur
       },
       buttonRef,
-      showError: formFieldMessagesState.showError,
+      showError,
       ...ariaProps
     }),
     [
@@ -350,7 +357,7 @@ const SegmentSelectorFwd = (0, import_react.forwardRef)((props, forwardedRef) =>
       text,
       overlayTriggerProps,
       buttonRef,
-      formFieldMessagesState.showError,
+      showError,
       ariaProps,
       handleOnBlur
     ]

package/filters/segment-selector/SegmentSelector.sty.js

@@ -24,7 +24,7 @@ __export(SegmentSelector_css_exports, {
 });
 module.exports = __toCommonJS(SegmentSelector_css_exports);
 var import_SegmentSelector_css_ts_vanilla = require("./SegmentSelector.css");
-var overwriteTooltipElementPadding = "_11m6jkl3-3-8-0";
-var segmentSelectorList = "_11m6jkl0-3-8-0";
-var segmentSelectorListItem = "_11m6jkl1-3-8-0";
-var tooltipMaxHeight = "_11m6jkl2-3-8-0";
+var overwriteTooltipElementPadding = "_11m6jkl3-3-9-1";
+var segmentSelectorList = "_11m6jkl0-3-9-1";
+var segmentSelectorListItem = "_11m6jkl1-3-9-1";
+var tooltipMaxHeight = "_11m6jkl2-3-9-1";

package/filters/segment-selector/contexts/SegmentsCache/SegmentsCache.d.ts

@@ -1,7 +1,7 @@
 import { QueryClient } from '@tanstack/react-query';
-import { type FilterSegment, type DetailedFilterSegment } from '@dynatrace-sdk/client-filter-segment-management';
+import { type DetailedFilterSegment } from '@dynatrace-sdk/client-filter-segment-management';
 export type CachedSegment = {
-    segment: Omit<DetailedFilterSegment | FilterSegment, 'uid'> & {
+    segment: Omit<DetailedFilterSegment, 'uid'> & {
         id: string;
     };
     temporarilyApplied: boolean;
@@ -14,7 +14,11 @@ export declare const segmentsClient: {
     hasAccessRights: boolean | undefined;
 };
 /**
- * Returns a Promise<CachedSegment>.
+ * Returns a Promise<CachedSegment> with VARIABLES and INCLUDES always populated.
+ * The single-segment endpoint always returns INCLUDES; the bulk (getAllSegments)
+ * endpoint never does. A cached result is reused only when it already contains
+ * INCLUDES (i.e. it came from a prior direct fetch), otherwise a fresh
+ * getFilterSegment call is made.
  * @internal
  */
 export declare function getSegment(uid?: string): Promise<CachedSegment>;

package/filters/segment-selector/contexts/SegmentsCache/SegmentsCache.js

@@ -44,14 +44,6 @@ function catchError(error) {
     });
   }
 }
-function getSegmentFromCache(id) {
-  const allSegments = segmentsClient.queryClient.getQueryData(["getAllSegments"]);
-  const singleSegment = segmentsClient.queryClient.getQueryData([
-    "getSegment",
-    id
-  ]);
-  return allSegments?.get(id) ?? singleSegment ?? null;
-}
 const segmentsClient = {
   /** react-query's queryClient used for segments queries. */
   queryClient: segmentQueryClient,
@@ -72,18 +64,10 @@ async function getSegment(uid) {
   if (segmentsClient.hasAccessRights === false) {
     throw new Error("403");
   }
-  if (segmentsClient.queryClient.isFetching({ queryKey: ["getAllSegments"] }) === 0 && !segmentsClient.queryClient.getQueryState([
-    "getAllSegments"
-  ])?.isInvalidated) {
-    const cachedSegment = getSegmentFromCache(uid);
-    if (cachedSegment) {
-      return cachedSegment;
-    }
-  }
   return new Promise((resolve, reject) => {
     import_client_filter_segment_management.filterSegmentsClient.getFilterSegment({
       filterSegmentUid: uid,
-      addFields: ["VARIABLES"]
+      addFields: ["VARIABLES", "INCLUDES"]
     }).then((storeSegment) => {
       const newCachedSegment = processSegment(storeSegment);
       segmentsClient.hasAccessRights = true;

package/filters/segment-selector/contexts/SegmentsUI/SegmentsUIReducer.js

@@ -20,6 +20,12 @@ __export(SegmentsUIReducer_exports, {
   segmentsUIReducer: () => segmentsUIReducer
 });
 module.exports = __toCommonJS(SegmentsUIReducer_exports);
+function updateErrorIds(errorIds, id, hasError) {
+  if (hasError) {
+    return Array.from(/* @__PURE__ */ new Set([...errorIds ?? [], id]));
+  }
+  return errorIds?.filter((errorId) => errorId !== id) ?? [];
+}
 function segmentsUIReducer(state, action) {
   const { type } = action;
   switch (type) {
@@ -128,17 +134,14 @@ function segmentsUIReducer(state, action) {
     case "setArrayIdentifierError": {
       const { payload } = action;
       const { hasError, id } = payload;
-      if (hasError) {
-        const newState2 = {
-          ...state,
-          arrayIdentifierErrorIds: state.arrayIdentifierErrorIds ?? []
-        };
-        newState2.arrayIdentifierErrorIds.push(id);
-        return newState2;
-      }
-      const newState = { ...state };
-      newState.arrayIdentifierErrorIds?.filter((errorId) => errorId !== id);
-      return newState;
+      return {
+        ...state,
+        arrayIdentifierErrorIds: updateErrorIds(
+          state.arrayIdentifierErrorIds,
+          id,
+          hasError
+        )
+      };
     }
   }
 }

package/filters/segment-selector/contexts/SegmentsUI/segmentValidationHelper.d.ts

@@ -1,4 +1,5 @@
 import type { ChangeEvent, Dispatch } from 'react';
+import type { Include } from '@dynatrace-sdk/client-filter-segment-management';
 import type { FilterSegment } from '@dynatrace-sdk/client-query';
 import type { SegmentSelectorUIState } from './SegmentsUIReducer.js';
 import { type FormFieldMessagesReducerAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';
@@ -6,6 +7,14 @@ import type { FormFieldMessageContextState } from '../../../../forms/forms-core/
 import { type StratoValidityStateKey } from '../../../../forms/validation/types.js';
 import { type CachedSegment } from '../SegmentsCache/SegmentsCache.js';
 /** @internal */
+export type SegmentErrorKey = 'unavailable' | 'needs-variables' | 'needs-update' | 'incomplete-variables';
+/**
+ * Extracts variable names from the filter expressions in includes by parsing
+ * each filter JSON into a FilterFieldTree and collecting Variable nodes.
+ * @internal
+ */
+export declare function extractVariableNamesFromIncludes(includes: Include[] | undefined): Set<string>;
+/** @internal */
 export declare function getErrorKey(uiSegment: (FilterSegment | CachedSegment['segment']) & {
     isPlaceholder?: boolean;
 }): Promise<StratoValidityStateKey | null>;

package/filters/segment-selector/contexts/SegmentsUI/segmentValidationHelper.js

@@ -18,17 +18,58 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var segmentValidationHelper_exports = {};
 __export(segmentValidationHelper_exports, {
   areUiSegmentsValid: () => areUiSegmentsValid,
+  extractVariableNamesFromIncludes: () => extractVariableNamesFromIncludes,
   getErrorKey: () => getErrorKey,
   validateSegments: () => validateSegments
 });
 module.exports = __toCommonJS(segmentValidationHelper_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_lodash_es = require("lodash");
 var import_react_intl = require("react-intl");
 var import_formfield_messages_state_reducer = require("../../../../forms/forms-core/state/formfield-messages-state-reducer.js");
 var import_types = require("../../../../forms/validation/types.js");
+var import_tree_node_guards = require("../../../filter-field/utils/tree-node-guards.js");
 var import_segmentMessages = require("../../segmentMessages.js");
+var import_utils = require("../../utils.js");
 var import_SegmentsCache = require("../SegmentsCache/SegmentsCache.js");
+function collectVariableNames(node, names) {
+  if (!node) {
+    return;
+  }
+  if ((0, import_tree_node_guards.isFilterFieldVariableNode)(node)) {
+    names.add(node.value.replace(/^\$/, ""));
+    return;
+  }
+  if ((0, import_tree_node_guards.isFilterFieldGroupNode)(node)) {
+    for (const child of node.children) {
+      collectVariableNames(child, names);
+    }
+    return;
+  }
+  if ((0, import_tree_node_guards.isFilterFieldStatementNode)(node)) {
+    collectVariableNames(node.value, names);
+    return;
+  }
+  const asRecord = node;
+  if (Array.isArray(asRecord.value)) {
+    for (const item of asRecord.value) {
+      collectVariableNames(item, names);
+    }
+  }
+}
+function extractVariableNamesFromIncludes(includes) {
+  const names = /* @__PURE__ */ new Set();
+  if (!includes) {
+    return names;
+  }
+  for (const include of includes) {
+    const tree = (0, import_utils.parsePossibleJson)(include.filter);
+    if (typeof tree !== "object" || tree === null) {
+      continue;
+    }
+    collectVariableNames(tree, names);
+  }
+  return names;
+}
 async function getErrorKey(uiSegment) {
   if ("isPlaceholder" in uiSegment && uiSegment.isPlaceholder) {
     return null;
@@ -40,14 +81,27 @@ async function getErrorKey(uiSegment) {
   if (!cachedSegment) {
     return import_types.StratoValidityStateKeys.unavailable;
   }
-  const uiSegmentHasNoVariables = uiSegment.variables === void 0 || (0, import_lodash_es.isArray)(uiSegment.variables) && uiSegment.variables.length === 0;
-  const cachedSegmentHasNoVariables = !cachedSegment.segment.variables;
-  if (!cachedSegmentHasNoVariables && uiSegmentHasNoVariables) {
+  const serverVariableNames = extractVariableNamesFromIncludes(
+    cachedSegment.segment.includes
+  );
+  const uiVariableNames = new Set(
+    Array.isArray(uiSegment.variables) ? uiSegment.variables.map((v) => v.name) : []
+  );
+  const serverHasVariables = !!cachedSegment.segment.variables;
+  if (serverHasVariables && uiVariableNames.size === 0) {
     return import_types.StratoValidityStateKeys.missingVariables;
   }
-  if (!uiSegmentHasNoVariables && cachedSegmentHasNoVariables) {
+  if (!serverHasVariables && uiVariableNames.size > 0) {
     return import_types.StratoValidityStateKeys.needsUpdate;
   }
+  if (serverVariableNames.size > 0) {
+    for (const name of serverVariableNames) {
+      if (!uiVariableNames.has(name)) {
+        return import_types.StratoValidityStateKeys.invalidVariables;
+      }
+    }
+    return null;
+  }
   return null;
 }
 async function areUiSegmentsValid(uiSegments) {
@@ -100,7 +154,7 @@ async function validateSegments(segments, onChange, formFieldMessagesDispatch, f
       }
     });
   }
-  if (isValid === false && !hasFormControlError) {
+  if (isValid === false && (!hasFormControlError || showError)) {
     formFieldMessagesDispatch?.({
       type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDMESSAGE,
       payload: {
@@ -108,7 +162,7 @@ async function validateSegments(segments, onChange, formFieldMessagesDispatch, f
         variant: "error",
         validityStateKey: "customError",
         messageType: "formcontrol",
-        showError,
+        showError: showError ? true : void 0,
         message: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_segmentMessages.SEGMENTSELECTOR_MESSAGES.genericSegmentError })
       }
     });

package/filters/segment-selector/parts/EmptySegments.css

@@ -1,4 +1,4 @@
-._awal5d0-3-8-0._awal5d0-3-8-0 {
+._awal5d0-3-9-1._awal5d0-3-9-1 {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);

package/filters/segment-selector/parts/EmptySegments.sty.js

@@ -21,4 +21,4 @@ __export(EmptySegments_css_exports, {
 });
 module.exports = __toCommonJS(EmptySegments_css_exports);
 var import_EmptySegments_css_ts_vanilla = require("./EmptySegments.css");
-var AppLinkButtonCSS = "_awal5d0-3-8-0";
+var AppLinkButtonCSS = "_awal5d0-3-9-1";