@dynatrace/strato-components 3.10.1 → 3.11.0

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 { 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-children-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 { data: errorKey } = useQuery(\n    {\n      queryKey: ['errorKey', uiSegment],\n      queryFn: () => getErrorKey(uiSegment),\n      staleTime: Infinity, // only needs updates if the segment changes, which is handled by the query key\n    },\n    segmentsClient.queryClient,\n  );\n\n  const { arrayIdentifierErrorIds } = useContext(UISegmentsContext);\n  const hasArrayIdentifierError = arrayIdentifierErrorIds?.includes(\n    uiSegment.id,\n  );\n\n  // In case of missing access rights, we don't show any error messages, as most issues might relate with the missing rights.\n  if (segmentsClient.hasAccessRights === false) {\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              unavailableVariables={uiSegment.unavailableVariables}\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-children-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

@@ -30,11 +30,18 @@ import {
 } from "../../utils.js";
 import { getSegmentHref } from "../segmentManagementHref.js";
 const ValueSelect = (props) => {
-  const { triggerClassName, readOnly, segment, variables = [] } = props;
+  const {
+    triggerClassName,
+    readOnly,
+    segment,
+    variables = [],
+    unavailableVariables
+  } = props;
   const variableSelectRef = useRef(null);
   const { focusedSegmentId, isTouched } = useContext(UISegmentsContext);
-  const { updateUISegment, setArrayIdentifierError } = useSegmentsUIContext();
+  const { updateUISegment, setArrayIdentifierError, setUnavailableVariables } = useSegmentsUIContext();
   const { dispatch: messagesDispatch } = useFormFieldMessagesContext();
+  const hasSelectedUnavailableVariables = useRef(false);
   const intl = useIntl();
   const stratoLogger = useContext(StratoLoggerContext);
   const segmentId = segment?.segment?.id;
@@ -47,25 +54,27 @@ const ValueSelect = (props) => {
     [segmentId]
   );
   const query = segment?.segment?.variables !== void 0 && segment?.segment?.variables?.type === "query" ? segment.segment.variables.value : "";
-  const {
-    data: faasResult,
-    isLoading: isFaasLoading,
-    error: faasError,
-    refetch: refetchFaas
-  } = useQuery(
+  const { data: faasResult, isLoading: isFaasLoading } = useQuery(
+    // excluded segment.segment.version: keying on it would refetch on every segment edit,
+    // not just ones that change the query; overlay-reopen invalidation covers the rest.
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps
     {
-      queryKey: ["getSegmentVariables", segment.segment.id],
-      queryFn: () => getSegmentVariables(segment.segment.id)
+      queryKey: ["getSegmentVariables", segment.segment.id, query],
+      queryFn: () => getSegmentVariables(segment.segment.id, segment.segment.version)
     },
     segmentsClient.queryClient
   );
   const faasVariables = faasResult !== null && faasResult !== void 0 && "variables" in faasResult ? faasResult.variables : void 0;
-  const {
-    data,
-    isLoading: isDqlLoading,
-    error: dqlError,
-    forceRefetch
-  } = useDql(
+  useEffect(() => {
+    if (faasResult?.accessible === true && "error" in faasResult && faasResult.error) {
+      stratoLogger?.warn(
+        "getSegmentVariables FaaS returned an error response.",
+        faasResult.error,
+        { id: segmentId, code: faasResult.error.code }
+      );
+    }
+  }, [faasResult, segmentId, stratoLogger]);
+  const { data, isLoading: isDqlLoading } = useDql(
     {
       query,
       maxResultRecords: 15e3,
@@ -73,82 +82,118 @@ const ValueSelect = (props) => {
       // 5 MB
       dtClientContext
     },
-    { enabled: faasResult?.accessible === false }
+    {
+      enabled: faasResult?.accessible === false,
+      staleTime: 60 * 1e3
+      // 1 minute
+    }
   );
   const effectiveRecords = faasVariables ?? data?.records;
   const isLoading = isFaasLoading || isDqlLoading;
-  const error = faasError ?? dqlError;
   useEffect(() => {
-    if (!isLoading && effectiveRecords?.length === 0) {
+    if (!isLoading && !effectiveRecords?.length) {
       stratoLogger?.info(
         "Failed to retrieve segment variables: query returned no records.",
-        error,
         {
           query: query.split("|")[0],
           // log query until first pipe to avoid reporting sensitive data.
           id: segmentId
         }
       );
+      messagesDispatch?.({
+        type: FormFieldMessagesAction.ADDMESSAGE,
+        payload: {
+          variant: "hint",
+          messageType: "formcontrol",
+          id: "no-records",
+          validityStateKey: "customError",
+          message: /* @__PURE__ */ jsx(FormattedMessage, { ...SEGMENTSELECTOR_MESSAGES.noRecords })
+        }
+      });
     }
   }, [query, isLoading]);
-  useEffect(() => {
-    if (faasResult?.accessible === true && "error" in faasResult) {
-      stratoLogger?.warn(
-        "getSegmentVariables FaaS returned an error response.",
-        faasResult.error,
-        { id: segment?.segment?.id, code: faasResult.error.code }
-      );
+  const computedUnavailableVariables = useMemo(() => {
+    if (isLoading) {
+      return void 0;
     }
-  }, [faasResult]);
-  const unavailableVariables = useMemo(() => {
     if (effectiveRecords) {
       const firstKey = Object.keys(effectiveRecords?.[0] ?? {})[0];
       const dataRecordIds = new Set(
         effectiveRecords.map((record) => record?.[firstKey])
       );
-      return variables?.filter((variable) => !dataRecordIds.has(variable));
-    }
-  }, [effectiveRecords, variables]);
-  const { availableVariables, hasArrayIdentifier } = useMemo(() => {
-    if (!effectiveRecords || effectiveRecords.length === 0) {
-      return { availableVariables: void 0, hasArrayIdentifier: false };
+      const unavailable = variables.filter(
+        (variable) => !dataRecordIds.has(variable)
+      );
+      return /* @__PURE__ */ new Set([...unavailable, ...unavailableVariables ?? []]);
     }
-    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]);
+    return new Set(variables);
+  }, [effectiveRecords, isLoading]);
   useEffect(() => {
-    if (hasArrayIdentifier) {
-      messagesDispatch?.({
-        type: FormFieldMessagesAction.ADDMESSAGE,
-        payload: {
-          variant: "error",
-          messageType: "formcontrol",
-          id: "array-identifier",
-          validityStateKey: "customError",
-          message: /* @__PURE__ */ jsx(
-            FormattedMessage,
-            {
-              ...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError
+    if (!isLoading && computedUnavailableVariables && computedUnavailableVariables.size > 0) {
+      setUnavailableVariables(
+        segment.segment.id,
+        /* @__PURE__ */ new Set([
+          ...computedUnavailableVariables,
+          ...unavailableVariables ?? []
+        ])
+      );
+      if (!unavailableVariables && effectiveRecords) {
+        messagesDispatch?.({
+          type: FormFieldMessagesAction.ADDMESSAGE,
+          payload: {
+            variant: "hint",
+            messageType: "formcontrol",
+            id: "unavailable-variables",
+            validityStateKey: "customError",
+            message: /* @__PURE__ */ jsx(
+              FormattedMessage,
+              {
+                ...SEGMENTSELECTOR_MESSAGES.unavailableVariableValuesHint
+              }
+            )
+          }
+        });
+        hasSelectedUnavailableVariables.current = true;
+      }
+    }
+  }, [isLoading, computedUnavailableVariables, segment.segment.id]);
+  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
+                }
+              )
             }
-          )
+          });
         }
+        setArrayIdentifierError(hasArrayIdentifier, segment.segment.id);
       });
+      return Array.from(new Set(recordsArray));
     }
-    setArrayIdentifierError(hasArrayIdentifier, segment.segment.id);
-  }, [hasArrayIdentifier]);
+    return void 0;
+  }, [effectiveRecords, segment.segment.id]);
   const shouldOpen = focusedSegmentId === segment.segment.id && variables.length === 0 && isTouched;
   useEffect(() => {
     shouldOpen && variableSelectRef.current?.open();
@@ -165,14 +210,6 @@ const ValueSelect = (props) => {
       required: true,
       readOnly: readOnly || segment?.temporarilyApplied,
       clearable: false,
-      onOpenChange: (isOpen) => {
-        if (isOpen && query.length > 0) {
-          refetchFaas().catch(() => void 0);
-          if (faasResult?.accessible === false) {
-            forceRefetch().catch(() => void 0);
-          }
-        }
-      },
       value: variables,
       onChange: (newVariables) => {
         if (!newVariables || newVariables.length === 0) {
@@ -188,6 +225,9 @@ const ValueSelect = (props) => {
           );
           return;
         }
+        if (!effectiveRecords || effectiveRecords.length === 0) {
+          return;
+        }
         const firstKey = Object.keys(effectiveRecords?.[0] ?? {})[0];
         const dataEnrichedVariables = newVariables.map((variable) => {
           return effectiveRecords?.find((singleRow) => {
@@ -213,6 +253,32 @@ const ValueSelect = (props) => {
             }
           );
         }
+        if (segmentVariables && computedUnavailableVariables && computedUnavailableVariables.size > 0 && hasSelectedUnavailableVariables.current) {
+          hasSelectedUnavailableVariables.current = false;
+          messagesDispatch?.({
+            type: FormFieldMessagesAction.REMOVEMESSAGE,
+            payload: {
+              id: "unavailable-variables",
+              messageType: "formcontrol"
+            }
+          });
+          messagesDispatch?.({
+            type: FormFieldMessagesAction.ADDMESSAGE,
+            payload: {
+              variant: "hint",
+              messageType: "formcontrol",
+              id: "unavailable-variables",
+              validityStateKey: "customError",
+              message: /* @__PURE__ */ jsx(
+                FormattedMessage,
+                {
+                  ...SEGMENTSELECTOR_MESSAGES.unavailableRemovedHint,
+                  values: { count: computedUnavailableVariables?.size ?? 0 }
+                }
+              )
+            }
+          });
+        }
       },
       "data-dt-name": "segment-variable-select",
       children: [
@@ -243,37 +309,41 @@ const ValueSelect = (props) => {
                 },
                 variable
               )),
-              unavailableVariables?.map((unlistedVariable) => /* @__PURE__ */ jsx(
-                Select.Option,
-                {
-                  value: unlistedVariable,
-                  textValue: getReadableValue(unlistedVariable, intl) ?? void 0,
-                  children: /* @__PURE__ */ jsxs(
-                    Grid,
-                    {
-                      gridTemplateColumns: "auto auto",
-                      width: "100%",
-                      alignItems: "baseline",
-                      children: [
-                        /* @__PURE__ */ jsx(Text, { children: getReadableValue(unlistedVariable, intl) }),
-                        /* @__PURE__ */ jsx(
-                          Text,
-                          {
-                            textStyle: "small",
-                            style: {
-                              color: Colors.Text.Neutral.Subdued,
-                              textAlign: "right",
-                              textWrap: "nowrap"
-                            },
-                            children: intl.formatMessage(SEGMENTSELECTOR_MESSAGES.unavailable)
-                          }
-                        )
-                      ]
-                    }
-                  )
-                },
-                unlistedVariable
-              )),
+              Array.from(computedUnavailableVariables ?? []).map(
+                (unlistedVariable) => /* @__PURE__ */ jsx(
+                  Select.Option,
+                  {
+                    value: unlistedVariable,
+                    textValue: getReadableValue(unlistedVariable, intl) ?? void 0,
+                    "aria-label": `${getReadableValue(unlistedVariable, intl) ?? unlistedVariable} ${intl.formatMessage(SEGMENTSELECTOR_MESSAGES.unavailable)}`,
+                    disabled: true,
+                    children: /* @__PURE__ */ jsxs(
+                      Grid,
+                      {
+                        gridTemplateColumns: "auto auto",
+                        width: "100%",
+                        alignItems: "baseline",
+                        children: [
+                          /* @__PURE__ */ jsx(Text, { children: getReadableValue(unlistedVariable, intl) }),
+                          /* @__PURE__ */ jsx(
+                            Text,
+                            {
+                              textStyle: "small",
+                              style: {
+                                color: Colors.Text.Neutral.Subdued,
+                                textAlign: "right",
+                                textWrap: "nowrap"
+                              },
+                              children: intl.formatMessage(SEGMENTSELECTOR_MESSAGES.unavailable)
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  },
+                  unlistedVariable
+                )
+              ),
               availableVariables?.map((variable) => /* @__PURE__ */ jsxs(
                 Select.Option,
                 {

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    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"]
+  "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  unavailableVariables?: Set<string>;\n};\n\n/**\n * ValueSelect component that allows the selection of variables of the segment.\n * Handles DQL-based segment variable loading, permission validation, and unavailable variable tracking.\n * @internal\n */\nexport const ValueSelect = (props: ValueSelectProps) => {\n  const {\n    triggerClassName,\n    readOnly,\n    segment,\n    variables = [],\n    unavailableVariables,\n  } = props;\n  const variableSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n\n  const { focusedSegmentId, isTouched } = useContext(UISegmentsContext);\n  const { updateUISegment, setArrayIdentifierError, setUnavailableVariables } =\n    useSegmentsUIContext();\n  const { dispatch: messagesDispatch } = useFormFieldMessagesContext();\n  // Tracks whether unavailable variable hint was shown in this session\n  const hasSelectedUnavailableVariables = useRef(false);\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  /* Extract DQL query if segment uses query-based variables; empty string triggers no fetch */\n  const query =\n    segment?.segment?.variables !== undefined &&\n    segment?.segment?.variables?.type === 'query'\n      ? segment.segment.variables.value\n      : '';\n\n  const { data: faasResult, isLoading: isFaasLoading } = useQuery(\n    // excluded segment.segment.version: keying on it would refetch on every segment edit,\n    // not just ones that change the query; overlay-reopen invalidation covers the rest.\n    // eslint-disable-next-line @tanstack/query/exhaustive-deps\n    {\n      queryKey: ['getSegmentVariables', segment.segment.id, query],\n      queryFn: () =>\n        getSegmentVariables(segment.segment.id, segment.segment.version),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const faasVariables =\n    faasResult !== null && faasResult !== undefined && 'variables' in faasResult\n      ? faasResult.variables\n      : undefined;\n\n  useEffect(() => {\n    if (\n      faasResult?.accessible === true &&\n      'error' in faasResult &&\n      faasResult.error\n    ) {\n      stratoLogger?.warn(\n        'getSegmentVariables FaaS returned an error response.',\n        faasResult.error,\n        { id: segmentId, code: faasResult.error.code },\n      );\n    }\n  }, [faasResult, segmentId, stratoLogger]);\n\n  const { data, isLoading: isDqlLoading } = useDql(\n    {\n      query,\n      maxResultRecords: 15_000,\n      maxResultBytes: 5_242_880, // 5 MB\n      dtClientContext,\n    },\n    {\n      enabled: faasResult?.accessible === false,\n      staleTime: 60 * 1000, // 1 minute\n    },\n  );\n\n  const effectiveRecords: ResultRecord[] | undefined =\n    faasVariables ?? data?.records;\n  const isLoading = isFaasLoading || isDqlLoading;\n\n  /* Log and display hint when query completes with no records (typically permission denied) */\n  useEffect(() => {\n    if (!isLoading && !effectiveRecords?.length) {\n      stratoLogger?.info(\n        'Failed to retrieve segment variables: query returned no records.',\n        {\n          query: query.split('|')[0], // log query until first pipe to avoid reporting sensitive data.\n          id: segmentId,\n        },\n      );\n\n      messagesDispatch?.({\n        type: FormFieldMessagesAction.ADDMESSAGE,\n        payload: {\n          variant: 'hint',\n          messageType: 'formcontrol',\n          id: 'no-records',\n          validityStateKey: 'customError',\n          message: <FormattedMessage {...SEGMENTSELECTOR_MESSAGES.noRecords} />,\n        },\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  /**\n   * Identifies variables that were previously selected but are no longer available.\n   * Returns three states:\n   * - undefined: query is still loading\n   * - Set with items: variables no longer in query results (permission lost or deleted)\n   * - Set empty: all variables available\n   */\n  const computedUnavailableVariables = useMemo(() => {\n    if (isLoading) {\n      return undefined;\n    }\n\n    if (effectiveRecords) {\n      const firstKey = Object.keys(effectiveRecords?.[0] ?? {})[0];\n      const dataRecordIds = new Set(\n        effectiveRecords.map((record) => record?.[firstKey]),\n      );\n      const unavailable = variables.filter(\n        (variable) => !dataRecordIds.has(variable),\n      );\n      return new Set([...unavailable, ...(unavailableVariables ?? [])]);\n    }\n\n    // DQL failed or forbidden \u2014 all initially-applied variables are unavailable\n    return new Set(variables);\n    // excluded variables as the selection doesn't change while open (avoids unexpected re-renders).\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [effectiveRecords, isLoading]);\n\n  /* Update parent state with unavailable variables once DQL settles; ref guards against duplicate dispatches */\n  useEffect(() => {\n    if (\n      !isLoading &&\n      computedUnavailableVariables &&\n      computedUnavailableVariables.size > 0\n    ) {\n      setUnavailableVariables(\n        segment.segment.id,\n        new Set([\n          ...computedUnavailableVariables,\n          ...(unavailableVariables ?? []),\n        ]),\n      );\n\n      // Show hint only once when unavailable variables are first detected (with data present)\n      if (!unavailableVariables && effectiveRecords) {\n        messagesDispatch?.({\n          type: FormFieldMessagesAction.ADDMESSAGE,\n          payload: {\n            variant: 'hint',\n            messageType: 'formcontrol',\n            id: 'unavailable-variables',\n            validityStateKey: 'customError',\n            message: (\n              <FormattedMessage\n                {...SEGMENTSELECTOR_MESSAGES.unavailableVariableValuesHint}\n              />\n            ),\n          },\n        });\n        hasSelectedUnavailableVariables.current = true;\n      }\n    }\n    // excluded propUnavailableVariables as it is derrived from the created state and might cause unnecessary re-renders. The state is only set once when the DQL settles, and then managed internally.\n    // excluded messagesDispatch from deps to avoid re-adding the hint when the parent component re-renders with a new prop value. The state is only set once when the DQL settles, and then managed internally.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isLoading, computedUnavailableVariables, segment.segment.id]);\n\n  /**\n   * Extracts all unique variable identifiers from DQL results and validates for unsupported array fields.\n   * Uses queueMicrotask to delay array error dispatch, ensuring state consistency before render.\n   */\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          // Detect if query returns array-type fields (not supported for segment selection)\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       * Array field detection requires iterating over data; to avoid re-examining data,\n       * dispatch error via queueMicrotask after this render to maintain state consistency.\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\n    return undefined;\n    // Excluded messagesDispatch and setArrayIdentifierError from deps to avoid rerenders due to unstable function references.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [effectiveRecords, segment.segment.id]);\n\n  // Auto-open select dropdown when segment is focused and user is interacting\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  // Validate select when touched state changes or selected variables change\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      value={variables}\n      onChange={(newVariables) => {\n        // Clear selection when user removes all variables\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        if (!effectiveRecords || effectiveRecords.length === 0) {\n          return;\n        }\n\n        // Enrich selected variable IDs with full record containing all fields\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        if (\n          segmentVariables &&\n          computedUnavailableVariables &&\n          computedUnavailableVariables.size > 0 &&\n          hasSelectedUnavailableVariables.current\n        ) {\n          hasSelectedUnavailableVariables.current = false;\n          // Replace hint about unavailable variables during selection with summary after close\n          messagesDispatch?.({\n            type: FormFieldMessagesAction.REMOVEMESSAGE,\n            payload: {\n              id: 'unavailable-variables',\n              messageType: 'formcontrol',\n            },\n          });\n\n          messagesDispatch?.({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              variant: 'hint',\n              messageType: 'formcontrol',\n              id: 'unavailable-variables',\n              validityStateKey: 'customError',\n              message: (\n                <FormattedMessage\n                  {...SEGMENTSELECTOR_MESSAGES.unavailableRemovedHint}\n                  values={{ count: computedUnavailableVariables?.size ?? 0 }}\n                />\n              ),\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        {/** Show currently selected variables while DQL loads (prevents flicker) */}\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        {/** Always render unavailable variables as disabled options (shows user why selections are locked) */}\n        {Array.from(computedUnavailableVariables ?? []).map(\n          (unlistedVariable) => (\n            <Select.Option\n              key={unlistedVariable}\n              value={unlistedVariable}\n              textValue={getReadableValue(unlistedVariable, intl) ?? undefined}\n              aria-label={`${\n                getReadableValue(unlistedVariable, intl) ?? unlistedVariable\n              } ${intl.formatMessage(SEGMENTSELECTOR_MESSAGES.unavailable)}`}\n              disabled={true}\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        )}\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": []
 }

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

@@ -110,6 +110,21 @@ const SEGMENTSELECTOR_MESSAGES = defineMessages({
     defaultMessage: "Your assigned access control policies don't permit you to read or apply segments.",
     description: "Message shown when access control permissions are missing but a query with segments was run."
   },
+  noRecords: {
+    id: "ZWPrrKMJtr2S3Kx9",
+    defaultMessage: "The segment values couldn't be fetched. Either keep the selection or remove the segment.",
+    description: "Message shown when the segment values could not be fetched."
+  },
+  unavailableRemovedHint: {
+    id: "XsT/ArefqqEMgoPr",
+    defaultMessage: "{count} unavailable options were removed from your selection.",
+    description: "Message after removing unavailable options from the selection."
+  },
+  unavailableVariableValuesHint: {
+    id: "zZkRTFU9Br/4kme+",
+    defaultMessage: "Some selected segment values are no longer available and will be removed upon selection.",
+    description: "Message shown when some selected segment values are no longer available."
+  },
   noSegmentsConfigured: {
     defaultMessage: "No segments configured.",
     description: "Message shown in the empty state of the segmentsSelector.",