@dynatrace/strato-components 3.8.0 → 3.9.0

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelect.css

@@ -1,83 +1,83 @@
-._1fuxi5m0-3-8-0 {
+._1fuxi5m0-3-9-0 {
   grid-area: segment;
 }
-._1jgl8s50-3-8-0 ._1fuxi5m0-3-8-0 {
+._1jgl8s50-3-9-0 ._1fuxi5m0-3-9-0 {
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-8-0 ._1fuxi5m0-3-8-0:hover, ._1jgl8s50-3-8-0 ._1fuxi5m0-3-8-0:active, ._1jgl8s50-3-8-0 ._1fuxi5m0-3-8-0:focus-within {
+._1jgl8s50-3-9-0 ._1fuxi5m0-3-9-0:hover, ._1jgl8s50-3-9-0 ._1fuxi5m0-3-9-0:active, ._1jgl8s50-3-9-0 ._1fuxi5m0-3-9-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m2-3-8-0._1fuxi5m2-3-8-0 {
+._1fuxi5m2-3-9-0._1fuxi5m2-3-9-0 {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1fuxi5m3-3-8-0 {
+._1fuxi5m3-3-9-0 {
   grid-area: variables;
 }
-._1jgl8s50-3-8-0 ._1fuxi5m3-3-8-0 {
+._1jgl8s50-3-9-0 ._1fuxi5m3-3-9-0 {
   margin-left: -1px;
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-8-0 ._1fuxi5m3-3-8-0:hover, ._1jgl8s50-3-8-0 ._1fuxi5m3-3-8-0:active, ._1jgl8s50-3-8-0 ._1fuxi5m3-3-8-0:focus-within {
+._1jgl8s50-3-9-0 ._1fuxi5m3-3-9-0:hover, ._1jgl8s50-3-9-0 ._1fuxi5m3-3-9-0:active, ._1jgl8s50-3-9-0 ._1fuxi5m3-3-9-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m4-3-8-0 {
+._1fuxi5m4-3-9-0 {
   width: 100%;
   border-top-left-radius: 0;
 }
-._1fuxi5m5-3-8-0 {
+._1fuxi5m5-3-9-0 {
   grid-area: clear;
   grid-row-start: 1;
 }
-._1fuxi5m5-3-8-0._1fuxi5m5-3-8-0 {
+._1fuxi5m5-3-9-0._1fuxi5m5-3-9-0 {
   height: 100%;
   border-radius: 0 var(--dt-borders-radius-field-default, 6px) var(--dt-borders-radius-field-default, 6px) 0;
 }
-._1jgl8s50-3-8-0 ._1fuxi5m5-3-8-0 {
+._1jgl8s50-3-9-0 ._1fuxi5m5-3-9-0 {
   margin-left: -1px;
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-8-0 ._1fuxi5m5-3-8-0:hover, ._1jgl8s50-3-8-0 ._1fuxi5m5-3-8-0:active, ._1jgl8s50-3-8-0 ._1fuxi5m5-3-8-0:focus-within {
+._1jgl8s50-3-9-0 ._1fuxi5m5-3-9-0:hover, ._1jgl8s50-3-9-0 ._1fuxi5m5-3-9-0:active, ._1jgl8s50-3-9-0 ._1fuxi5m5-3-9-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m6-3-8-0 {
+._1fuxi5m6-3-9-0 {
   gap: var(--dt-spacings-size-2, 2px);
   width: 100%;
   grid-template-columns: 40% auto max-content;
 }
-._1jgl8s50-3-8-0 ._1fuxi5m6-3-8-0 {
+._1jgl8s50-3-9-0 ._1fuxi5m6-3-9-0 {
   gap: var(--dt-spacings-size-0, 0);
 }
-._1fuxi5m7-3-8-0 {
+._1fuxi5m7-3-9-0 {
   grid-template-areas: "segment variables clear";
 }
-._1fuxi5m8-3-8-0 {
+._1fuxi5m8-3-9-0 {
   grid-template-areas: "segment variables";
   grid-template-columns: 40% auto;
 }
-._1fuxi5m9-3-8-0 {
+._1fuxi5m9-3-9-0 {
   grid-template-areas: "segment segment clear";
 }
-._1fuxi5ma-3-8-0 {
+._1fuxi5ma-3-9-0 {
   grid-template-areas: "segment segment";
 }
 @media screen and (max-width: 640px) {
-  ._1fuxi5m1-3-8-0 {
+  ._1fuxi5m1-3-9-0 {
     border-bottom-left-radius: 0;
   }
-  ._1jgl8s50-3-8-0 ._1fuxi5m3-3-8-0 {
+  ._1jgl8s50-3-9-0 ._1fuxi5m3-3-9-0 {
     margin-left: 0;
     margin-top: -1px;
   }
-  ._1fuxi5m7-3-8-0 {
+  ._1fuxi5m7-3-9-0 {
     grid-template-areas: "segment segment clear" "variables variables clear";
   }
 }
 @media screen and (min-width: 641px) {
-  ._1fuxi5m4-3-8-0 {
+  ._1fuxi5m4-3-9-0 {
     border-bottom-left-radius: 0;
   }
 }

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelect.sty.js

@@ -1,13 +1,13 @@
 import "../../../../core/components/app-root/AppRoot.css";
 import "./SegmentSelect.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var clearButtonCSS = "_1fuxi5m5-3-8-0";
-var noBorderRadiusRight = "_1fuxi5m2-3-8-0";
-var segmentsSelectCSS = "_1fuxi5m0-3-8-0";
-var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m6-3-8-0", variantClassNames: { layout: { full: "_1fuxi5m7-3-8-0", "full-readonly": "_1fuxi5m8-3-8-0", "no-variables": "_1fuxi5m9-3-8-0", "no-variables-readonly": "_1fuxi5ma-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
-var segmentsSelectTriggerCSS = "_1fuxi5m1-3-8-0";
-var variablesSelectCSS = "_1fuxi5m3-3-8-0";
-var variablesSelectTriggerCSS = "_1fuxi5m4-3-8-0";
+var clearButtonCSS = "_1fuxi5m5-3-9-0";
+var noBorderRadiusRight = "_1fuxi5m2-3-9-0";
+var segmentsSelectCSS = "_1fuxi5m0-3-9-0";
+var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m6-3-9-0", variantClassNames: { layout: { full: "_1fuxi5m7-3-9-0", "full-readonly": "_1fuxi5m8-3-9-0", "no-variables": "_1fuxi5m9-3-9-0", "no-variables-readonly": "_1fuxi5ma-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
+var segmentsSelectTriggerCSS = "_1fuxi5m1-3-9-0";
+var variablesSelectCSS = "_1fuxi5m3-3-9-0";
+var variablesSelectTriggerCSS = "_1fuxi5m4-3-9-0";
 export {
   clearButtonCSS,
   noBorderRadiusRight,

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelect.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SegmentSelect.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport './SegmentSelect.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearButtonCSS = '_1fuxi5m5-3-8-0';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-8-0';\nexport var segmentsSelectCSS = '_1fuxi5m0-3-8-0';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m6-3-8-0',variantClassNames:{layout:{full:'_1fuxi5m7-3-8-0','full-readonly':'_1fuxi5m8-3-8-0','no-variables':'_1fuxi5m9-3-8-0','no-variables-readonly':'_1fuxi5ma-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var segmentsSelectTriggerCSS = '_1fuxi5m1-3-8-0';\nexport var variablesSelectCSS = '_1fuxi5m3-3-8-0';\nexport var variablesSelectTriggerCSS = '_1fuxi5m4-3-8-0';"],
+  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport './SegmentSelect.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearButtonCSS = '_1fuxi5m5-3-9-0';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-9-0';\nexport var segmentsSelectCSS = '_1fuxi5m0-3-9-0';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m6-3-9-0',variantClassNames:{layout:{full:'_1fuxi5m7-3-9-0','full-readonly':'_1fuxi5m8-3-9-0','no-variables':'_1fuxi5m9-3-9-0','no-variables-readonly':'_1fuxi5ma-3-9-0'}},defaultVariants:{},compoundVariants:[]});\nexport var segmentsSelectTriggerCSS = '_1fuxi5m1-3-9-0';\nexport var variablesSelectCSS = '_1fuxi5m3-3-9-0';\nexport var variablesSelectTriggerCSS = '_1fuxi5m4-3-9-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB;AACrB,IAAI,sBAAsB;AAC1B,IAAI,oBAAoB;AACxB,IAAI,wBAAwB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,mBAAkB,iBAAgB,mBAAkB,gBAAe,mBAAkB,yBAAwB,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/Q,IAAI,2BAA2B;AAC/B,IAAI,qBAAqB;AACzB,IAAI,4BAA4B;",
   "names": []
 }

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.css

@@ -1,3 +1,3 @@
-._1e5el1o0-3-8-0 {
+._1e5el1o0-3-9-0 {
   max-width: 400px;
 }

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.sty.js

@@ -1,5 +1,5 @@
 import "./SegmentSelectorTrigger.css";
-var trigger = "_1e5el1o0-3-8-0";
+var trigger = "_1e5el1o0-3-9-0";
 export {
   trigger
 };

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.css.ts"],
-  "sourcesContent": ["import './SegmentSelectorTrigger.css';\nexport var trigger = '_1e5el1o0-3-8-0';"],
+  "sourcesContent": ["import './SegmentSelectorTrigger.css';\nexport var trigger = '_1e5el1o0-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/filters/segment-selector/parts/selectionBar/SelectionBar.js

@@ -13,6 +13,7 @@ import { SegmentSelect } from "./SegmentSelect.js";
 import { ValueSelect } from "./ValueSelect.js";
 import { Button } from "../../../../buttons/button/Button.js";
 import { useOverlayStacking } from "../../../../core/hooks/useOverlayStacking.js";
+import { FormFieldMessageContextProvider } from "../../../../forms/forms-core/components/form-field/FormFieldMessageContextProvider.js";
 import { FormFieldMessages } from "../../../../forms/forms-core/components/form-field-messages/FormFieldMessages.js";
 import { useFormFieldMessagesContext } from "../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js";
 import {
@@ -53,6 +54,9 @@ function getErrorMessageFromKey(errorKey) {
   if (errorKey?.equals(StratoValidityStateKeys.unavailable)) {
     return SEGMENTSELECTOR_MESSAGES.unavailableSegmentError;
   }
+  if (errorKey?.equals(StratoValidityStateKeys.invalidVariables)) {
+    return SEGMENTSELECTOR_MESSAGES.invalidVariablesError;
+  }
   if (errorKey?.equals(StratoValidityStateKeys.needsUpdate)) {
     return SEGMENTSELECTOR_MESSAGES.removedVariablesError;
   }
@@ -165,6 +169,22 @@ const SelectionBar = (props) => {
   const segment = propSegment ?? fetchedSegment;
   const showDeleteButton = clearable && !readOnly && segmentsClient.hasAccessRights !== false;
   const stackingContext = useOverlayStacking(void 0, "overlay");
+  const hasVariables = !!segment?.segment?.variables;
+  const segmentSelectElement = /* @__PURE__ */ jsx(
+    SegmentSelect,
+    {
+      readOnly,
+      availableSegments,
+      segment,
+      id,
+      overlayWidth: `${gridRef.current?.clientWidth}px`,
+      triggerClassName: clsx({
+        [noBorderRadiusRight]: showDeleteButton || hasVariables
+      }),
+      isPlaceholder,
+      autoFocus
+    }
+  );
   return /* @__PURE__ */ jsxs("li", { className: listStyles.segmentSelectorListItem, children: [
     /* @__PURE__ */ jsx(
       Tooltip,
@@ -179,28 +199,18 @@ const SelectionBar = (props) => {
           {
             ref: gridRef,
             className: segmentsSelectGridCSS({
-              layout: getLayout(
-                !!segment?.segment?.variables,
-                !!showDeleteButton
-              )
+              layout: getLayout(hasVariables, !!showDeleteButton)
             }),
             children: [
-              /* @__PURE__ */ jsx(
-                SegmentSelect,
+              hasVariables ? /* @__PURE__ */ jsx(
+                FormFieldMessageContextProvider,
                 {
-                  readOnly,
-                  availableSegments,
-                  segment,
                   id,
-                  overlayWidth: `${gridRef.current?.clientWidth}px`,
-                  triggerClassName: clsx({
-                    [noBorderRadiusRight]: showDeleteButton || segment?.segment?.variables
-                  }),
-                  isPlaceholder,
-                  autoFocus
+                  showError: state.showError,
+                  children: segmentSelectElement
                 }
-              ),
-              segment?.segment?.variables && /* @__PURE__ */ jsx(
+              ) : segmentSelectElement,
+              hasVariables && /* @__PURE__ */ jsx(
                 ValueSelect,
                 {
                   readOnly,

package/esm/filters/segment-selector/parts/selectionBar/SelectionBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SelectionBar.tsx"],
-  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { useContext, useRef, type RefObject } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\nimport type { FilterSegment } from '@dynatrace-sdk/client-query';\n\nimport {\n  clearButtonCSS,\n  noBorderRadiusRight,\n  segmentsSelectGridCSS,\n} from './SegmentSelect.sty.js';\nimport { SegmentSelect } from './SegmentSelect.js';\nimport { ValueSelect } from './ValueSelect.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useOverlayStacking } from '../../../../core/hooks/useOverlayStacking.js';\nimport { FormFieldMessages } from '../../../../forms/forms-core/components/form-field-messages/FormFieldMessages.js';\nimport { useFormFieldMessagesContext } from '../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  StratoValidityStateKeys,\n  type StratoValidityStateKey,\n} from '../../../../forms/validation/types.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\n  type CachedSegment,\n} from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport {\n  UISegmentsContext,\n  useSegmentsUIContext,\n} from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { getErrorKey } from '../../contexts/SegmentsUI/segmentValidationHelper.js';\nimport type { UISegment } from '../../contexts/SegmentsUI/UISegments.types.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\nimport * as listStyles from '../../SegmentSelector.sty.js';\n\ntype SelectionBarProps = {\n  availableSegments: CachedSegment['segment'][];\n  clearable?: boolean;\n  readOnly?: boolean;\n  autoFocus?: boolean;\n  returnFocusTo: RefObject<null | HTMLButtonElement>;\n  segment?: CachedSegment;\n  uiSegment: UISegment;\n};\n\nfunction getVariables(segment: FilterSegment | undefined) {\n  if (segment?.variables && segment.variables.length > 0) {\n    return segment.variables[0].values;\n  }\n\n  return undefined;\n}\n\nfunction getLayout(hasVariables: boolean, hasClearButton: boolean) {\n  if (!hasVariables && !hasClearButton) {\n    return 'no-variables-readonly';\n  }\n\n  if (!hasVariables && hasClearButton) {\n    return 'no-variables';\n  }\n\n  if (hasVariables && !hasClearButton) {\n    return 'full-readonly';\n  }\n  return 'full';\n}\n\nfunction getErrorMessageFromKey(\n  errorKey: StratoValidityStateKey | null | undefined,\n) {\n  if (errorKey?.equals(StratoValidityStateKeys.unavailable)) {\n    return SEGMENTSELECTOR_MESSAGES.unavailableSegmentError;\n  }\n  if (errorKey?.equals(StratoValidityStateKeys.needsUpdate)) {\n    return SEGMENTSELECTOR_MESSAGES.removedVariablesError;\n  }\n  if (errorKey?.equals(StratoValidityStateKeys.missingVariables)) {\n    return SEGMENTSELECTOR_MESSAGES.valueMissingError;\n  }\n  return null;\n}\n\n/**\n * Error messages for the SelectionBar component.\n * @internal\n */\nexport const ErrorMessages = ({ uiSegment }: { uiSegment: UISegment }) => {\n  const {\n    data: errorKey,\n    isLoading,\n    error,\n  } = useQuery(\n    {\n      queryKey: ['errorKey', uiSegment],\n      queryFn: () => getErrorKey(uiSegment),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const { arrayIdentifierErrorIds } = useContext(UISegmentsContext);\n  const hasArrayIdentifierError = arrayIdentifierErrorIds?.includes(\n    uiSegment.id,\n  );\n\n  if (segmentsClient.hasAccessRights === false || isLoading || error) {\n    return null;\n  }\n\n  const errorMessage = getErrorMessageFromKey(errorKey);\n\n  return (\n    <FormFieldMessages>\n      {(messages) => {\n        if (hasArrayIdentifierError) {\n          return (\n            <FormFieldMessages.Item\n              validityStateKey=\"customError\"\n              variant=\"error\"\n              key=\"array-identifier\"\n            >\n              <FormattedMessage\n                {...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError}\n              />\n            </FormFieldMessages.Item>\n          );\n        }\n\n        if (errorKey) {\n          return (\n            <FormFieldMessages.Item\n              validityStateKey=\"customError\"\n              variant=\"error\"\n              key={errorKey.value}\n            >\n              <FormattedMessage {...errorMessage} />\n            </FormFieldMessages.Item>\n          );\n        }\n\n        return messages.map((props) => {\n          // If it is valueMissing error from the variable select we show a custom error message.\n          if (\n            props.controlId !== uiSegment.id &&\n            props.validityStateKey === 'valueMissing'\n          ) {\n            return (\n              <FormFieldMessages.Item\n                key={`${props.controlId}-valueMissing`}\n                {...props}\n              >\n                <FormattedMessage\n                  {...SEGMENTSELECTOR_MESSAGES.valueMissingError}\n                />\n              </FormFieldMessages.Item>\n            );\n          }\n\n          return (\n            <FormFieldMessages.Item\n              key={`${props.controlId}-${props.validityStateKey}`}\n              {...props}\n            />\n          );\n        });\n      }}\n    </FormFieldMessages>\n  );\n};\n\n/**\n * SelectionBar component\n * @internal\n */\nexport const SelectionBar = (props: SelectionBarProps) => {\n  const {\n    availableSegments,\n    clearable,\n    readOnly,\n    autoFocus,\n    uiSegment,\n    returnFocusTo,\n    segment: propSegment,\n  } = props;\n  const intl = useIntl();\n  const gridRef = useRef<HTMLDivElement | null>(null);\n  const isPlaceholder = uiSegment.isPlaceholder ?? false;\n  const id = uiSegment.id;\n  const variables = getVariables(uiSegment);\n\n  const { removeUISegment } = useSegmentsUIContext();\n  const { state } = useFormFieldMessagesContext();\n  const { getSegment } = useSegmentsCache();\n\n  // If the segment was already fetched, we use the segment prop and don't fetch.\n  // However, private segments are not listed in the available segments\n  // and need to be fetched individually.\n  const { data: fetchedSegment } = useQuery<CachedSegment>(\n    {\n      queryKey: ['getSegment', id],\n      queryFn: () => getSegment(id),\n      enabled:\n        segmentsClient.hasAccessRights !== false &&\n        !isPlaceholder &&\n        propSegment === undefined,\n      retryOnMount: false,\n    },\n    segmentsClient.queryClient,\n  );\n\n  const segment = propSegment ?? fetchedSegment;\n\n  const showDeleteButton =\n    clearable && !readOnly && segmentsClient.hasAccessRights !== false;\n\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  return (\n    <li className={listStyles.segmentSelectorListItem}>\n      <Tooltip\n        text={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.unlistedSegmentTooltip,\n        )}\n        style={{ zIndex: Number(stackingContext.style.zIndex) + 1 }}\n        disabled={!segment?.temporarilyApplied}\n      >\n        <Grid\n          ref={gridRef}\n          className={segmentsSelectGridCSS({\n            layout: getLayout(\n              !!segment?.segment?.variables,\n              !!showDeleteButton,\n            ),\n          })}\n        >\n          <SegmentSelect\n            readOnly={readOnly}\n            availableSegments={availableSegments}\n            segment={segment}\n            id={id}\n            overlayWidth={`${gridRef.current?.clientWidth}px`}\n            triggerClassName={clsx({\n              [noBorderRadiusRight]:\n                showDeleteButton || segment?.segment?.variables,\n            })}\n            isPlaceholder={isPlaceholder}\n            autoFocus={autoFocus}\n          />\n          {segment?.segment?.variables && (\n            <ValueSelect\n              readOnly={readOnly}\n              segment={segment}\n              variables={variables}\n              triggerClassName={clsx({\n                [noBorderRadiusRight]: clearable && !readOnly,\n              })}\n            />\n          )}\n          {showDeleteButton && (\n            <Button\n              onClick={() => {\n                removeUISegment(id);\n                returnFocusTo.current?.focus();\n              }}\n              color={state.showError ? 'critical' : 'neutral'}\n              variant=\"emphasized\"\n              className={clearButtonCSS}\n              aria-label={intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.removeSegmentButton,\n              )}\n              data-dt-name=\"Remove\"\n            >\n              <Button.Prefix>\n                <XmarkIcon />\n              </Button.Prefix>\n            </Button>\n          )}\n        </Grid>\n      </Tooltip>\n\n      <ErrorMessages uiSegment={uiSegment} />\n    </li>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { useContext, useRef, type RefObject } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\nimport type { FilterSegment } from '@dynatrace-sdk/client-query';\n\nimport {\n  clearButtonCSS,\n  noBorderRadiusRight,\n  segmentsSelectGridCSS,\n} from './SegmentSelect.sty.js';\nimport { SegmentSelect } from './SegmentSelect.js';\nimport { ValueSelect } from './ValueSelect.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useOverlayStacking } from '../../../../core/hooks/useOverlayStacking.js';\nimport { FormFieldMessageContextProvider } from '../../../../forms/forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport { FormFieldMessages } from '../../../../forms/forms-core/components/form-field-messages/FormFieldMessages.js';\nimport { useFormFieldMessagesContext } from '../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  StratoValidityStateKeys,\n  type StratoValidityStateKey,\n} from '../../../../forms/validation/types.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\n  type CachedSegment,\n} from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport {\n  UISegmentsContext,\n  useSegmentsUIContext,\n} from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { getErrorKey } from '../../contexts/SegmentsUI/segmentValidationHelper.js';\nimport type { UISegment } from '../../contexts/SegmentsUI/UISegments.types.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\nimport * as listStyles from '../../SegmentSelector.sty.js';\n\ntype SelectionBarProps = {\n  availableSegments: CachedSegment['segment'][];\n  clearable?: boolean;\n  readOnly?: boolean;\n  autoFocus?: boolean;\n  returnFocusTo: RefObject<null | HTMLButtonElement>;\n  segment?: CachedSegment;\n  uiSegment: UISegment;\n};\n\nfunction getVariables(segment: FilterSegment | undefined) {\n  if (segment?.variables && segment.variables.length > 0) {\n    return segment.variables[0].values;\n  }\n\n  return undefined;\n}\n\nfunction getLayout(hasVariables: boolean, hasClearButton: boolean) {\n  if (!hasVariables && !hasClearButton) {\n    return 'no-variables-readonly';\n  }\n\n  if (!hasVariables && hasClearButton) {\n    return 'no-variables';\n  }\n\n  if (hasVariables && !hasClearButton) {\n    return 'full-readonly';\n  }\n  return 'full';\n}\n\nfunction getErrorMessageFromKey(\n  errorKey: StratoValidityStateKey | null | undefined,\n) {\n  if (errorKey?.equals(StratoValidityStateKeys.unavailable)) {\n    return SEGMENTSELECTOR_MESSAGES.unavailableSegmentError;\n  }\n  if (errorKey?.equals(StratoValidityStateKeys.invalidVariables)) {\n    return SEGMENTSELECTOR_MESSAGES.invalidVariablesError;\n  }\n  if (errorKey?.equals(StratoValidityStateKeys.needsUpdate)) {\n    return SEGMENTSELECTOR_MESSAGES.removedVariablesError;\n  }\n  if (errorKey?.equals(StratoValidityStateKeys.missingVariables)) {\n    return SEGMENTSELECTOR_MESSAGES.valueMissingError;\n  }\n  return null;\n}\n\n/**\n * Error messages for the SelectionBar component.\n * @internal\n */\nexport const ErrorMessages = ({ uiSegment }: { uiSegment: UISegment }) => {\n  const {\n    data: errorKey,\n    isLoading,\n    error,\n  } = useQuery(\n    {\n      queryKey: ['errorKey', uiSegment],\n      queryFn: () => getErrorKey(uiSegment),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const { arrayIdentifierErrorIds } = useContext(UISegmentsContext);\n  const hasArrayIdentifierError = arrayIdentifierErrorIds?.includes(\n    uiSegment.id,\n  );\n\n  if (segmentsClient.hasAccessRights === false || isLoading || error) {\n    return null;\n  }\n\n  const errorMessage = getErrorMessageFromKey(errorKey);\n\n  return (\n    <FormFieldMessages>\n      {(messages) => {\n        if (hasArrayIdentifierError) {\n          return (\n            <FormFieldMessages.Item\n              validityStateKey=\"customError\"\n              variant=\"error\"\n              key=\"array-identifier\"\n            >\n              <FormattedMessage\n                {...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError}\n              />\n            </FormFieldMessages.Item>\n          );\n        }\n\n        if (errorKey) {\n          return (\n            <FormFieldMessages.Item\n              validityStateKey=\"customError\"\n              variant=\"error\"\n              key={errorKey.value}\n            >\n              <FormattedMessage {...errorMessage} />\n            </FormFieldMessages.Item>\n          );\n        }\n\n        return messages.map((props) => {\n          // If it is valueMissing error from the variable select we show a custom error message.\n          if (\n            props.controlId !== uiSegment.id &&\n            props.validityStateKey === 'valueMissing'\n          ) {\n            return (\n              <FormFieldMessages.Item\n                key={`${props.controlId}-valueMissing`}\n                {...props}\n              >\n                <FormattedMessage\n                  {...SEGMENTSELECTOR_MESSAGES.valueMissingError}\n                />\n              </FormFieldMessages.Item>\n            );\n          }\n\n          return (\n            <FormFieldMessages.Item\n              key={`${props.controlId}-${props.validityStateKey}`}\n              {...props}\n            />\n          );\n        });\n      }}\n    </FormFieldMessages>\n  );\n};\n\n/**\n * SelectionBar component\n * @internal\n */\nexport const SelectionBar = (props: SelectionBarProps) => {\n  const {\n    availableSegments,\n    clearable,\n    readOnly,\n    autoFocus,\n    uiSegment,\n    returnFocusTo,\n    segment: propSegment,\n  } = props;\n  const intl = useIntl();\n  const gridRef = useRef<HTMLDivElement | null>(null);\n  const isPlaceholder = uiSegment.isPlaceholder ?? false;\n  const id = uiSegment.id;\n  const variables = getVariables(uiSegment);\n\n  const { removeUISegment } = useSegmentsUIContext();\n  const { state } = useFormFieldMessagesContext();\n  const { getSegment } = useSegmentsCache();\n\n  // If the segment was already fetched, we use the segment prop and don't fetch.\n  // However, private segments are not listed in the available segments\n  // and need to be fetched individually.\n  const { data: fetchedSegment } = useQuery<CachedSegment>(\n    {\n      queryKey: ['getSegment', id],\n      queryFn: () => getSegment(id),\n      enabled:\n        segmentsClient.hasAccessRights !== false &&\n        !isPlaceholder &&\n        propSegment === undefined,\n      retryOnMount: false,\n    },\n    segmentsClient.queryClient,\n  );\n\n  const segment = propSegment ?? fetchedSegment;\n\n  const showDeleteButton =\n    clearable && !readOnly && segmentsClient.hasAccessRights !== false;\n\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  const hasVariables = !!segment?.segment?.variables;\n\n  const segmentSelectElement = (\n    <SegmentSelect\n      readOnly={readOnly}\n      availableSegments={availableSegments}\n      segment={segment}\n      id={id}\n      overlayWidth={`${gridRef.current?.clientWidth}px`}\n      triggerClassName={clsx({\n        [noBorderRadiusRight]: showDeleteButton || hasVariables,\n      })}\n      isPlaceholder={isPlaceholder}\n      autoFocus={autoFocus}\n    />\n  );\n\n  return (\n    <li className={listStyles.segmentSelectorListItem}>\n      <Tooltip\n        text={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.unlistedSegmentTooltip,\n        )}\n        style={{ zIndex: Number(stackingContext.style.zIndex) + 1 }}\n        disabled={!segment?.temporarilyApplied}\n      >\n        <Grid\n          ref={gridRef}\n          className={segmentsSelectGridCSS({\n            layout: getLayout(hasVariables, !!showDeleteButton),\n          })}\n        >\n          {hasVariables ? (\n            <FormFieldMessageContextProvider\n              id={id}\n              showError={state.showError}\n            >\n              {segmentSelectElement}\n            </FormFieldMessageContextProvider>\n          ) : (\n            segmentSelectElement\n          )}\n          {hasVariables && (\n            <ValueSelect\n              readOnly={readOnly}\n              segment={segment}\n              variables={variables}\n              triggerClassName={clsx({\n                [noBorderRadiusRight]: clearable && !readOnly,\n              })}\n            />\n          )}\n          {showDeleteButton && (\n            <Button\n              onClick={() => {\n                removeUISegment(id);\n                returnFocusTo.current?.focus();\n              }}\n              color={state.showError ? 'critical' : 'neutral'}\n              variant=\"emphasized\"\n              className={clearButtonCSS}\n              aria-label={intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.removeSegmentButton,\n              )}\n              data-dt-name=\"Remove\"\n            >\n              <Button.Prefix>\n                <XmarkIcon />\n              </Button.Prefix>\n            </Button>\n          )}\n        </Grid>\n      </Tooltip>\n\n      <ErrorMessages uiSegment={uiSegment} />\n    </li>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/filters/segment-selector/parts/selectionBar/ValueSelect.js

@@ -50,6 +50,7 @@ const ValueSelect = (props) => {
   const {
     data: faasResult,
     isLoading: isFaasLoading,
+    error: faasError,
     refetch: refetchFaas
   } = useQuery(
     {
@@ -62,11 +63,12 @@ const ValueSelect = (props) => {
   const {
     data,
     isLoading: isDqlLoading,
+    error: dqlError,
     forceRefetch
   } = useDql(
     {
       query,
-      maxResultRecords: 1e4,
+      maxResultRecords: 15e3,
       maxResultBytes: 5242880,
       // 5 MB
       dtClientContext
@@ -75,11 +77,12 @@ const ValueSelect = (props) => {
   );
   const effectiveRecords = faasVariables ?? data?.records;
   const isLoading = isFaasLoading || isDqlLoading;
+  const error = faasError ?? dqlError;
   useEffect(() => {
-    if (!isDqlLoading && data?.records?.length === 0) {
+    if (!isLoading && effectiveRecords?.length === 0) {
       stratoLogger?.info(
         "Failed to retrieve segment variables: query returned no records.",
-        null,
+        error,
         {
           query: query.split("|")[0],
           // log query until first pipe to avoid reporting sensitive data.
@@ -87,7 +90,7 @@ const ValueSelect = (props) => {
         }
       );
     }
-  }, [query, isDqlLoading]);
+  }, [query, isLoading]);
   useEffect(() => {
     if (faasResult?.accessible === true && "error" in faasResult) {
       stratoLogger?.warn(
@@ -106,42 +109,46 @@ const ValueSelect = (props) => {
       return variables?.filter((variable) => !dataRecordIds.has(variable));
     }
   }, [effectiveRecords, variables]);
-  const availableVariables = useMemo(() => {
-    if (effectiveRecords) {
-      let hasArrayIdentifier = false;
-      const recordsArray = effectiveRecords.map((singleRow) => {
-        const firstKey = singleRow ? Object.keys(singleRow)[0] : null;
-        if (!singleRow || !firstKey) {
-          return null;
-        }
-        if (isArray(singleRow[firstKey])) {
-          hasArrayIdentifier = true;
-        }
-        return `${singleRow[firstKey]}`;
-      }).filter((value) => value !== "null" && value !== null);
-      queueMicrotask(() => {
-        if (hasArrayIdentifier) {
-          messagesDispatch?.({
-            type: FormFieldMessagesAction.ADDMESSAGE,
-            payload: {
-              variant: "error",
-              messageType: "formcontrol",
-              id: "array-identifier",
-              validityStateKey: "customError",
-              message: /* @__PURE__ */ jsx(
-                FormattedMessage,
-                {
-                  ...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError
-                }
-              )
+  const { availableVariables, hasArrayIdentifier } = useMemo(() => {
+    if (!effectiveRecords || effectiveRecords.length === 0) {
+      return { availableVariables: void 0, hasArrayIdentifier: false };
+    }
+    let hasArrayIdentifier2 = false;
+    const recordsArray = effectiveRecords.map((singleRow) => {
+      const firstKey = singleRow ? Object.keys(singleRow)[0] : null;
+      if (!singleRow || !firstKey) {
+        return null;
+      }
+      if (isArray(singleRow[firstKey])) {
+        hasArrayIdentifier2 = true;
+      }
+      return `${singleRow[firstKey]}`;
+    }).filter((value) => value !== "null" && value !== null);
+    return {
+      availableVariables: Array.from(new Set(recordsArray)),
+      hasArrayIdentifier: hasArrayIdentifier2
+    };
+  }, [effectiveRecords]);
+  useEffect(() => {
+    if (hasArrayIdentifier) {
+      messagesDispatch?.({
+        type: FormFieldMessagesAction.ADDMESSAGE,
+        payload: {
+          variant: "error",
+          messageType: "formcontrol",
+          id: "array-identifier",
+          validityStateKey: "customError",
+          message: /* @__PURE__ */ jsx(
+            FormattedMessage,
+            {
+              ...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError
             }
-          });
+          )
         }
-        setArrayIdentifierError(hasArrayIdentifier, segment.segment.id);
       });
-      return Array.from(new Set(recordsArray));
     }
-  }, [effectiveRecords]);
+    setArrayIdentifierError(hasArrayIdentifier, segment.segment.id);
+  }, [hasArrayIdentifier]);
   const shouldOpen = focusedSegmentId === segment.segment.id && variables.length === 0 && isTouched;
   useEffect(() => {
     shouldOpen && variableSelectRef.current?.open();

package/esm/filters/segment-selector/parts/selectionBar/ValueSelect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/ValueSelect.tsx"],
-  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { isArray } from 'lodash-es';\nimport { useContext, useEffect, useMemo, useRef } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport type { ResultRecord } from '@dynatrace-sdk/client-query';\nimport { useDql } from '@dynatrace-sdk/react-hooks';\nimport { getSegmentVariables } from '@dynatrace-sdk/segments-presets';\n\nimport * as styles from './SegmentSelect.sty.js';\nimport { StratoLoggerContext } from '../../../../core/sdk/StratoLoggerContext.js';\nimport { useFormFieldMessagesContext } from '../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { FormControlWithOverlayRef } from '../../../../forms/shared-types.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Link } from '../../../../typography/link/Link.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TextEllipsis } from '../../../../typography/text-ellipsis/TextEllipsis.js';\nimport {\n  segmentsClient,\n  type CachedSegment,\n} from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport {\n  UISegmentsContext,\n  useSegmentsUIContext,\n} from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\nimport {\n  convertQueryRecordToStoreSegmentVariables,\n  getReadableValue,\n} from '../../utils.js';\nimport { getSegmentHref } from '../segmentManagementHref.js';\n\ntype ValueSelectProps = {\n  readOnly?: boolean;\n  segment: CachedSegment;\n  variables?: string[];\n  triggerClassName?: string;\n};\n\n/**\n * ValueSelect component that allows the selection of variables of the segment\n * @internal\n */\nexport const ValueSelect = (props: ValueSelectProps) => {\n  const { triggerClassName, readOnly, segment, variables = [] } = props;\n  const variableSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n\n  const { focusedSegmentId, isTouched } = useContext(UISegmentsContext);\n  const { updateUISegment, setArrayIdentifierError } = useSegmentsUIContext();\n  const { dispatch: messagesDispatch } = useFormFieldMessagesContext();\n\n  const intl = useIntl();\n\n  const stratoLogger = useContext(StratoLoggerContext);\n\n  const segmentId = segment?.segment?.id;\n\n  const dtClientContext = useMemo(\n    () =>\n      JSON.stringify({\n        source: 'SegmentSelector',\n        package: '@dynatrace/strato-components',\n        segmentId,\n      }),\n    [segmentId],\n  );\n\n  const query =\n    segment?.segment?.variables !== undefined &&\n    segment?.segment?.variables?.type === 'query'\n      ? segment.segment.variables.value\n      : '';\n\n  const {\n    data: faasResult,\n    isLoading: isFaasLoading,\n    refetch: refetchFaas,\n  } = useQuery(\n    {\n      queryKey: ['getSegmentVariables', segment.segment.id],\n      queryFn: () => getSegmentVariables(segment.segment.id),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const faasVariables =\n    faasResult !== null && faasResult !== undefined && 'variables' in faasResult\n      ? faasResult.variables\n      : undefined;\n\n  const {\n    data,\n    isLoading: isDqlLoading,\n    forceRefetch,\n  } = useDql(\n    {\n      query,\n      maxResultRecords: 10_000,\n      maxResultBytes: 5_242_880, // 5 MB\n      dtClientContext,\n    },\n    { enabled: faasResult?.accessible === false },\n  );\n\n  const effectiveRecords: ResultRecord[] | undefined =\n    faasVariables ?? data?.records;\n  const isLoading = isFaasLoading || isDqlLoading;\n  useEffect(() => {\n    if (!isDqlLoading && data?.records?.length === 0) {\n      stratoLogger?.info(\n        'Failed to retrieve segment variables: query returned no records.',\n        null,\n        {\n          query: query.split('|')[0], // log query until first pipe to avoid reporting sensitive data.\n          id: segmentId,\n        },\n      );\n    }\n    // only update when the query changed and is not loading, to prevent multiple logs.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [query, isDqlLoading]);\n\n  // `accessible: true` with an `error` envelope does not trigger the useDql fallback,\n  // so the dropdown would silently show the empty state. Log so the failure is observable.\n  useEffect(() => {\n    if (faasResult?.accessible === true && 'error' in faasResult) {\n      stratoLogger?.warn(\n        'getSegmentVariables FaaS returned an error response.',\n        faasResult.error,\n        { id: segment?.segment?.id, code: faasResult.error.code },\n      );\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [faasResult]);\n\n  /** Checks which variables are already selected but no longer available. */\n  const unavailableVariables = useMemo(() => {\n    if (effectiveRecords) {\n      const firstKey = Object.keys(effectiveRecords?.[0] ?? {})[0];\n      const dataRecordIds = new Set(\n        effectiveRecords.map((record) => record?.[firstKey]),\n      );\n\n      return variables?.filter((variable) => !dataRecordIds.has(variable));\n    }\n  }, [effectiveRecords, variables]);\n\n  /** Filters for all unique variable ids and strips duplicates. */\n  const availableVariables = useMemo(() => {\n    if (effectiveRecords) {\n      let hasArrayIdentifier = false;\n      const recordsArray = effectiveRecords\n        .map((singleRow) => {\n          const firstKey = singleRow ? Object.keys(singleRow)[0] : null;\n\n          if (!singleRow || !firstKey) {\n            return null;\n          }\n\n          if (isArray(singleRow[firstKey])) {\n            hasArrayIdentifier = true;\n          }\n\n          return `${singleRow[firstKey]}`;\n        })\n        .filter((value) => value !== 'null' && value !== null);\n\n      /**\n       * The array identifier error can only be detected when the variables are compared to\n       * the fetched data, as for all further usages we flatten the array. Therefore, we need\n       * to handle the error specifically. As the immediate dispatch would lead to a bad state\n       * but we want to avoid to iterate over the variables again, the state update is delayed here.\n       */\n      queueMicrotask(() => {\n        if (hasArrayIdentifier) {\n          messagesDispatch?.({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              variant: 'error',\n              messageType: 'formcontrol',\n              id: 'array-identifier',\n              validityStateKey: 'customError',\n              message: (\n                <FormattedMessage\n                  {...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError}\n                />\n              ),\n            },\n          });\n        }\n        setArrayIdentifierError(hasArrayIdentifier, segment.segment.id);\n      });\n\n      return Array.from(new Set(recordsArray));\n    }\n    // messagesDispatch and setArrayIdentifierError are stable context refs; segment.segment.id is\n    // captured by effectiveRecords which already re-evaluates when the segment changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [effectiveRecords]);\n\n  const shouldOpen =\n    focusedSegmentId === segment.segment.id &&\n    variables.length === 0 &&\n    isTouched;\n\n  useEffect(() => {\n    shouldOpen && variableSelectRef.current?.open();\n  }, [shouldOpen]);\n\n  useEffect(() => {\n    // initially\n    !isTouched && variableSelectRef.current?.validate();\n    // we need to validate the select when the variables change\n    // this needs to be properly resolved in the select component,\n    // as this one needs to validate controlled values automatically.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isTouched, JSON.stringify(variables)]);\n\n  return (\n    <Select\n      ref={variableSelectRef}\n      multiple\n      className={styles.variablesSelectCSS}\n      required\n      readOnly={readOnly || segment?.temporarilyApplied}\n      clearable={false}\n      onOpenChange={(isOpen) => {\n        if (isOpen && query.length > 0) {\n          refetchFaas().catch(() => undefined);\n          if (faasResult?.accessible === false) {\n            forceRefetch().catch(() => undefined);\n          }\n        }\n      }}\n      value={variables}\n      onChange={(newVariables) => {\n        if (!newVariables || newVariables.length === 0) {\n          updateUISegment(\n            {\n              ...segment.segment,\n              variables: [],\n            },\n            {\n              ...segment.segment,\n              variables: [],\n            },\n          );\n          return;\n        }\n\n        // get all variable values from the actual data\n        const firstKey = Object.keys(effectiveRecords?.[0] ?? {})[0];\n        const dataEnrichedVariables = newVariables\n          .map((variable) => {\n            return (\n              effectiveRecords?.find((singleRow) => {\n                if (isArray(singleRow?.[firstKey])) {\n                  const values = singleRow?.[firstKey].includes(variable);\n                  return values;\n                }\n\n                return singleRow && singleRow[firstKey] === variable;\n              }) ?? null\n            );\n          })\n          .filter((value) => value !== null);\n\n        const segmentVariables = convertQueryRecordToStoreSegmentVariables(\n          dataEnrichedVariables,\n        );\n\n        if (segmentVariables) {\n          updateUISegment(\n            {\n              ...segment.segment,\n              variables: [],\n            },\n            {\n              ...segment.segment,\n              variables: segmentVariables,\n            },\n          );\n        }\n      }}\n      data-dt-name=\"segment-variable-select\"\n    >\n      <Select.Trigger\n        className={clsx(styles.variablesSelectTriggerCSS, triggerClassName)}\n        placeholder={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.segmentsVariableTriggerPlaceholder,\n        )}\n      >\n        {variables?.length > 0 && (\n          <Select.DisplayValue>\n            <TextEllipsis>\n              {variables\n                .map((variable) => getReadableValue(variable, intl))\n                .join(', ')}\n            </TextEllipsis>\n          </Select.DisplayValue>\n        )}\n      </Select.Trigger>\n      <Select.Filter />\n      <Select.Content\n        loading={isLoading}\n        showSelectedOptionsFirst\n        width=\"trigger\"\n      >\n        {!effectiveRecords &&\n          variables?.map((variable) => (\n            <Select.Option\n              key={variable}\n              value={variable}\n              textValue={getReadableValue(variable, intl) ?? undefined}\n            >\n              {getReadableValue(variable, intl)}\n            </Select.Option>\n          ))}\n        {unavailableVariables?.map((unlistedVariable) => (\n          <Select.Option\n            key={unlistedVariable}\n            value={unlistedVariable}\n            textValue={getReadableValue(unlistedVariable, intl) ?? undefined}\n          >\n            <Grid\n              gridTemplateColumns=\"auto auto\"\n              width=\"100%\"\n              alignItems=\"baseline\"\n            >\n              <Text>{getReadableValue(unlistedVariable, intl)}</Text>\n              <Text\n                textStyle=\"small\"\n                style={{\n                  color: Colors.Text.Neutral.Subdued,\n                  textAlign: 'right',\n                  textWrap: 'nowrap',\n                }}\n              >\n                {intl.formatMessage(SEGMENTSELECTOR_MESSAGES.unavailable)}\n              </Text>\n            </Grid>\n          </Select.Option>\n        ))}\n        {availableVariables?.map((variable) => (\n          <Select.Option\n            key={variable}\n            value={variable}\n            textValue={getReadableValue(variable, intl) ?? undefined}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}{' '}\n            <Text>{getReadableValue(variable, intl)}</Text>\n          </Select.Option>\n        ))}\n        <Select.EmptyState>\n          {effectiveRecords?.length ? (\n            <FormattedMessage\n              id=\"nIw/xeiGNJsj+a+5\"\n              defaultMessage=\"No matching values for this segment found.\"\n              description=\"Hint shown when searching for a segment variable that isn't in the list.\"\n            />\n          ) : (\n            <FormattedMessage\n              defaultMessage=\"No values for this segment available. You can manage this segment in {link}.\"\n              id=\"72DlIwYKB9UTEzlA\"\n              description=\"Empty state message if no variables for the segment are available.\"\n              values={{\n                link: (\n                  <Link\n                    href={getSegmentHref(segment.segment.id)}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                  >\n                    <FormattedMessage\n                      defaultMessage=\"settings\"\n                      id=\"u55UYpLvXi//xGEn\"\n                      description=\"Link text to segments app in empty state message if no variables for the segment are available.\"\n                    />\n                  </Link>\n                ),\n              }}\n            />\n          )}\n        </Select.EmptyState>\n      </Select.Content>\n    </Select>\n  );\n};\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { isArray } from 'lodash-es';\nimport { useContext, useEffect, useMemo, useRef } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport type { ResultRecord } from '@dynatrace-sdk/client-query';\nimport { useDql } from '@dynatrace-sdk/react-hooks';\nimport { getSegmentVariables } from '@dynatrace-sdk/segments-presets';\n\nimport * as styles from './SegmentSelect.sty.js';\nimport { StratoLoggerContext } from '../../../../core/sdk/StratoLoggerContext.js';\nimport { useFormFieldMessagesContext } from '../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { FormControlWithOverlayRef } from '../../../../forms/shared-types.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Link } from '../../../../typography/link/Link.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TextEllipsis } from '../../../../typography/text-ellipsis/TextEllipsis.js';\nimport {\n  segmentsClient,\n  type CachedSegment,\n} from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport {\n  UISegmentsContext,\n  useSegmentsUIContext,\n} from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\nimport {\n  convertQueryRecordToStoreSegmentVariables,\n  getReadableValue,\n} from '../../utils.js';\nimport { getSegmentHref } from '../segmentManagementHref.js';\n\ntype ValueSelectProps = {\n  readOnly?: boolean;\n  segment: CachedSegment;\n  variables?: string[];\n  triggerClassName?: string;\n};\n\n/**\n * ValueSelect component that allows the selection of variables of the segment\n * @internal\n */\nexport const ValueSelect = (props: ValueSelectProps) => {\n  const { triggerClassName, readOnly, segment, variables = [] } = props;\n  const variableSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n\n  const { focusedSegmentId, isTouched } = useContext(UISegmentsContext);\n  const { updateUISegment, setArrayIdentifierError } = useSegmentsUIContext();\n  const { dispatch: messagesDispatch } = useFormFieldMessagesContext();\n\n  const intl = useIntl();\n\n  const stratoLogger = useContext(StratoLoggerContext);\n\n  const segmentId = segment?.segment?.id;\n\n  const dtClientContext = useMemo(\n    () =>\n      JSON.stringify({\n        source: 'SegmentSelector',\n        package: '@dynatrace/strato-components',\n        segmentId,\n      }),\n    [segmentId],\n  );\n\n  const query =\n    segment?.segment?.variables !== undefined &&\n    segment?.segment?.variables?.type === 'query'\n      ? segment.segment.variables.value\n      : '';\n\n  const {\n    data: faasResult,\n    isLoading: isFaasLoading,\n    error: faasError,\n    refetch: refetchFaas,\n  } = useQuery(\n    {\n      queryKey: ['getSegmentVariables', segment.segment.id],\n      queryFn: () => getSegmentVariables(segment.segment.id),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const faasVariables =\n    faasResult !== null && faasResult !== undefined && 'variables' in faasResult\n      ? faasResult.variables\n      : undefined;\n\n  const {\n    data,\n    isLoading: isDqlLoading,\n    error: dqlError,\n    forceRefetch,\n  } = useDql(\n    {\n      query,\n      maxResultRecords: 15_000,\n      maxResultBytes: 5_242_880, // 5 MB\n      dtClientContext,\n    },\n    { enabled: faasResult?.accessible === false },\n  );\n\n  const effectiveRecords: ResultRecord[] | undefined =\n    faasVariables ?? data?.records;\n  const isLoading = isFaasLoading || isDqlLoading;\n  const error = faasError ?? dqlError;\n\n  useEffect(() => {\n    if (!isLoading && effectiveRecords?.length === 0) {\n      stratoLogger?.info(\n        'Failed to retrieve segment variables: query returned no records.',\n        error,\n        {\n          query: query.split('|')[0], // log query until first pipe to avoid reporting sensitive data.\n          id: segmentId,\n        },\n      );\n    }\n    // only update when the query changed and is not loading, to prevent multiple logs.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [query, isLoading]);\n\n  // `accessible: true` with an `error` envelope does not trigger the useDql fallback,\n  // so the dropdown would silently show the empty state. Log so the failure is observable.\n  useEffect(() => {\n    if (faasResult?.accessible === true && 'error' in faasResult) {\n      stratoLogger?.warn(\n        'getSegmentVariables FaaS returned an error response.',\n        faasResult.error,\n        { id: segment?.segment?.id, code: faasResult.error.code },\n      );\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [faasResult]);\n\n  /** Checks which variables are already selected but no longer available. */\n  const unavailableVariables = useMemo(() => {\n    if (effectiveRecords) {\n      const firstKey = Object.keys(effectiveRecords?.[0] ?? {})[0];\n      const dataRecordIds = new Set(\n        effectiveRecords.map((record) => record?.[firstKey]),\n      );\n\n      return variables?.filter((variable) => !dataRecordIds.has(variable));\n    }\n  }, [effectiveRecords, variables]);\n\n  /** Filters for all unique variable ids, strips duplicates, and tracks whether any identifier value is an array. */\n  const { availableVariables, hasArrayIdentifier } = useMemo(() => {\n    if (!effectiveRecords || effectiveRecords.length === 0) {\n      return { availableVariables: undefined, hasArrayIdentifier: false };\n    }\n\n    let hasArrayIdentifier = false;\n    const recordsArray = effectiveRecords\n      .map((singleRow) => {\n        const firstKey = singleRow ? Object.keys(singleRow)[0] : null;\n\n        if (!singleRow || !firstKey) {\n          return null;\n        }\n\n        if (isArray(singleRow[firstKey])) {\n          hasArrayIdentifier = true;\n        }\n\n        return `${singleRow[firstKey]}`;\n      })\n      .filter((value) => value !== 'null' && value !== null);\n\n    return {\n      availableVariables: Array.from(new Set(recordsArray)),\n      hasArrayIdentifier,\n    };\n  }, [effectiveRecords]);\n\n  useEffect(() => {\n    if (hasArrayIdentifier) {\n      messagesDispatch?.({\n        type: FormFieldMessagesAction.ADDMESSAGE,\n        payload: {\n          variant: 'error',\n          messageType: 'formcontrol',\n          id: 'array-identifier',\n          validityStateKey: 'customError',\n          message: (\n            <FormattedMessage\n              {...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError}\n            />\n          ),\n        },\n      });\n    }\n    setArrayIdentifierError(hasArrayIdentifier, segment.segment.id);\n    // we only want to react to updates to the hasArrayIdentifier value to not run into an infinite loop.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [hasArrayIdentifier]);\n\n  const shouldOpen =\n    focusedSegmentId === segment.segment.id &&\n    variables.length === 0 &&\n    isTouched;\n\n  useEffect(() => {\n    shouldOpen && variableSelectRef.current?.open();\n  }, [shouldOpen]);\n\n  useEffect(() => {\n    // initially\n    !isTouched && variableSelectRef.current?.validate();\n    // we need to validate the select when the variables change\n    // this needs to be properly resolved in the select component,\n    // as this one needs to validate controlled values automatically.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isTouched, JSON.stringify(variables)]);\n\n  return (\n    <Select\n      ref={variableSelectRef}\n      multiple\n      className={styles.variablesSelectCSS}\n      required\n      readOnly={readOnly || segment?.temporarilyApplied}\n      clearable={false}\n      onOpenChange={(isOpen) => {\n        if (isOpen && query.length > 0) {\n          refetchFaas().catch(() => undefined);\n          if (faasResult?.accessible === false) {\n            forceRefetch().catch(() => undefined);\n          }\n        }\n      }}\n      value={variables}\n      onChange={(newVariables) => {\n        if (!newVariables || newVariables.length === 0) {\n          updateUISegment(\n            {\n              ...segment.segment,\n              variables: [],\n            },\n            {\n              ...segment.segment,\n              variables: [],\n            },\n          );\n          return;\n        }\n\n        // get all variable values from the actual data\n        const firstKey = Object.keys(effectiveRecords?.[0] ?? {})[0];\n        const dataEnrichedVariables = newVariables\n          .map((variable) => {\n            return (\n              effectiveRecords?.find((singleRow) => {\n                if (isArray(singleRow?.[firstKey])) {\n                  const values = singleRow?.[firstKey].includes(variable);\n                  return values;\n                }\n\n                return singleRow && singleRow[firstKey] === variable;\n              }) ?? null\n            );\n          })\n          .filter((value) => value !== null);\n\n        const segmentVariables = convertQueryRecordToStoreSegmentVariables(\n          dataEnrichedVariables,\n        );\n\n        if (segmentVariables) {\n          updateUISegment(\n            {\n              ...segment.segment,\n              variables: [],\n            },\n            {\n              ...segment.segment,\n              variables: segmentVariables,\n            },\n          );\n        }\n      }}\n      data-dt-name=\"segment-variable-select\"\n    >\n      <Select.Trigger\n        className={clsx(styles.variablesSelectTriggerCSS, triggerClassName)}\n        placeholder={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.segmentsVariableTriggerPlaceholder,\n        )}\n      >\n        {variables?.length > 0 && (\n          <Select.DisplayValue>\n            <TextEllipsis>\n              {variables\n                .map((variable) => getReadableValue(variable, intl))\n                .join(', ')}\n            </TextEllipsis>\n          </Select.DisplayValue>\n        )}\n      </Select.Trigger>\n      <Select.Filter />\n      <Select.Content\n        loading={isLoading}\n        showSelectedOptionsFirst\n        width=\"trigger\"\n      >\n        {!effectiveRecords &&\n          variables?.map((variable) => (\n            <Select.Option\n              key={variable}\n              value={variable}\n              textValue={getReadableValue(variable, intl) ?? undefined}\n            >\n              {getReadableValue(variable, intl)}\n            </Select.Option>\n          ))}\n        {unavailableVariables?.map((unlistedVariable) => (\n          <Select.Option\n            key={unlistedVariable}\n            value={unlistedVariable}\n            textValue={getReadableValue(unlistedVariable, intl) ?? undefined}\n          >\n            <Grid\n              gridTemplateColumns=\"auto auto\"\n              width=\"100%\"\n              alignItems=\"baseline\"\n            >\n              <Text>{getReadableValue(unlistedVariable, intl)}</Text>\n              <Text\n                textStyle=\"small\"\n                style={{\n                  color: Colors.Text.Neutral.Subdued,\n                  textAlign: 'right',\n                  textWrap: 'nowrap',\n                }}\n              >\n                {intl.formatMessage(SEGMENTSELECTOR_MESSAGES.unavailable)}\n              </Text>\n            </Grid>\n          </Select.Option>\n        ))}\n        {availableVariables?.map((variable) => (\n          <Select.Option\n            key={variable}\n            value={variable}\n            textValue={getReadableValue(variable, intl) ?? undefined}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}{' '}\n            <Text>{getReadableValue(variable, intl)}</Text>\n          </Select.Option>\n        ))}\n        <Select.EmptyState>\n          {effectiveRecords?.length ? (\n            <FormattedMessage\n              id=\"nIw/xeiGNJsj+a+5\"\n              defaultMessage=\"No matching values for this segment found.\"\n              description=\"Hint shown when searching for a segment variable that isn't in the list.\"\n            />\n          ) : (\n            <FormattedMessage\n              defaultMessage=\"No values for this segment available. You can manage this segment in {link}.\"\n              id=\"72DlIwYKB9UTEzlA\"\n              description=\"Empty state message if no variables for the segment are available.\"\n              values={{\n                link: (\n                  <Link\n                    href={getSegmentHref(segment.segment.id)}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                  >\n                    <FormattedMessage\n                      defaultMessage=\"settings\"\n                      id=\"u55UYpLvXi//xGEn\"\n                      description=\"Link text to segments app in empty state message if no variables for the segment are available.\"\n                    />\n                  </Link>\n                ),\n              }}\n            />\n          )}\n        </Select.EmptyState>\n      </Select.Content>\n    </Select>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["hasArrayIdentifier"]
 }

package/esm/filters/segment-selector/segmentMessages.js

@@ -65,6 +65,11 @@ const SEGMENTSELECTOR_MESSAGES = defineMessages({
     description: "Error message indicating that something with the current selection is wrong and, therefore, should be checked.",
     id: "LhnAiI2sqynNbsba"
   },
+  invalidVariablesError: {
+    defaultMessage: "One or more variables don't match the segment's filter criteria. Please update the variables or select a different segment.",
+    description: "Error message shown when the selected variables are not valid for this segment. They don't match the segment's includes filter.",
+    id: "U8ktDsKphISwBpaV"
+  },
   legend: {
     defaultMessage: "Filter by segments",
     description: "FieldSet Label in SegmentSelector Overlay.",