npm - @dynatrace/strato-components - Versions diffs - 3.2.1 → 3.3.1 - Mend

@dynatrace/strato-components 3.2.1 → 3.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3378) hide show

package/esm/filters/segment-selector/parts/segmentsPresets/SegmentsPreset.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/segmentsPresets/SegmentsPreset.tsx"],
-  "sourcesContent": ["import { useMutation, useQuery } from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { motion, useReducedMotion } from 'framer-motion';\nimport { Fragment, useContext, useRef, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\nimport { PinIcon, PinOffIcon } from '@dynatrace/strato-icons';\nimport { getAppName } from '@dynatrace-sdk/app-environment';\nimport type { FilterSegment } from '@dynatrace-sdk/client-query';\nimport {\n  pinSegmentsPreset,\n  unpinSegmentsPreset,\n  type SegmentsPreset as SegmentsPresetType,\n  type UserSegmentsPresets,\n} from '@dynatrace-sdk/segments-presets';\n\nimport * as styles from './SegmentsPresets.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useOverlayStacking } from '../../../../core/hooks/useOverlayStacking.js';\nimport { expandCollapseEasing } from '../../../../core/utils/framer-motion-easings.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { InputGroup } from '../../../../layouts/input-group/InputGroup.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { textStyle as textStyleCSS } from '../../../../styles/textStyle.sty.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport {\n  handleFailedOptimisticMutation,\n  handleSettledOptimisticMutation,\n  runOptimisticMutation,\n} from '../../../helper/queryHelper.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\n} from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport { useSegmentsUIContext } from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { UISegmentsDispatchContext } from '../../contexts/SegmentsUI/SegmentsUIDispatchContext.js';\nimport { areUiSegmentsValid } from '../../contexts/SegmentsUI/segmentValidationHelper.js';\nimport { useSegments } from '../../hooks/useSegments.js';\nimport { flattenQueryResultToValues, getReadableValue } from '../../utils.js';\nimport * as animationHelperStyles from '../Overlay.sty.js';\n\n/** @internal */\ninterface SegmentsPresetProps {\n  uiPreset: SegmentsPresetType;\n  id: string;\n  pinLimitReached: boolean;\n  isPinned: boolean;\n  isSelected: boolean;\n}\n\n/** @internal */\nexport const expandAndCollapseAnimationVariants = {\n  enter: {\n    height: 'auto',\n    opacity: 1,\n    translateY: 0,\n    transition: {\n      duration: AnimationsJS.ExpandCollapse.Duration.Base,\n      ease: expandCollapseEasing,\n    },\n  },\n  exit: {\n    height: 0,\n    opacity: 0,\n    translateY: -10,\n    transition: {\n      duration: AnimationsJS.ExpandCollapse.Duration.Base,\n      ease: expandCollapseEasing,\n    },\n  },\n};\n\n/**\n * @internal\n */\nconst SegmentsPresetText = ({\n  segment,\n  isFirst,\n}: {\n  segment: FilterSegment;\n  isFirst: boolean;\n}) => {\n  const andText = (\n    <Text textStyle=\"base\" className={styles.and}>\n      &nbsp;\n      <FormattedMessage\n        defaultMessage=\"and\"\n        description=\"Text that is separating between multiple Segments in one preset.\"\n        id=\"GeQL1Mbr4RzmlFJk\"\n      />\n      &nbsp;\n    </Text>\n  );\n\n  const connectingString = isFirst ? '' : andText;\n\n  return (\n    <Fragment key={segment.id}>\n      {connectingString}\n      <SegmentText segment={segment} />\n    </Fragment>\n  );\n};\n\nfunction usePinningTooltipText(\n  pinLimitReached: boolean,\n  isPinned: boolean,\n): string {\n  const intl = useIntl();\n\n  if (pinLimitReached && !isPinned) {\n    return intl.formatMessage({\n      defaultMessage: \"You can't pin more than 10 items.\",\n      id: 'Y/6wwuz1ueL+7V2j',\n      description: 'Tooltip text for pinning limit.',\n    });\n  }\n\n  if (!isPinned) {\n    return intl.formatMessage(\n      {\n        defaultMessage: 'Pin in {appName}',\n        id: 'RPdRdtDJumoOO3os',\n        description: 'Tooltip text for pin button.',\n      },\n      { appName: getAppName() },\n    );\n  }\n\n  return intl.formatMessage({\n    defaultMessage: 'Unpin',\n    id: 'uCbwlgMp2BNGzNro',\n    description: 'Text for the unpin button of a segment preset.',\n  });\n}\n\nfunction updateCachePinMutation(\n  old: UserSegmentsPresets,\n  id: string,\n  segments: FilterSegment[],\n): UserSegmentsPresets {\n  // We always want to add the newly pinned one at the top.\n  const pinnedPresets = old.pinnedPresets;\n  pinnedPresets.unshift({ id, segments });\n\n  return {\n    ...old,\n    pinnedPresets,\n  };\n}\n\nfunction updateCacheUnpinMutation(\n  old: UserSegmentsPresets,\n  id: string,\n): UserSegmentsPresets {\n  const pinnedPresets = old.pinnedPresets;\n  const pinnedPresetIndex = pinnedPresets.findIndex(\n    (preset) => preset.id === id,\n  );\n\n  if (pinnedPresetIndex === -1) {\n    return old;\n  }\n\n  pinnedPresets.splice(pinnedPresetIndex, 1);\n\n  return {\n    recentPresets: old.recentPresets,\n    pinnedPresets,\n  };\n}\n\n/**\n * @internal\n */\nconst PresetTooltipText = ({ segments }: { segments: FilterSegment[] }) => {\n  return (\n    <Flex flexDirection=\"column\" gap={4}>\n      {segments.map((segment) => {\n        return (\n          <SegmentText\n            key={segment.id}\n            segment={segment}\n            variableClassName={textStyleCSS({\n              fontStyle: 'text',\n              textStyle: 'small',\n            })}\n          />\n        );\n      })}\n    </Flex>\n  );\n};\n\n/**\n * @internal\n */\nconst SegmentText = ({\n  segment,\n  variableClassName,\n}: {\n  segment: FilterSegment;\n  variableClassName?: string;\n}) => {\n  const { getSegment } = useSegmentsCache();\n  const intl = useIntl();\n  const { data } = useQuery(\n    {\n      queryKey: ['getSegment', segment.id],\n      queryFn: () => getSegment(segment.id),\n      notifyOnChangeProps: ['dataUpdatedAt'],\n    },\n    segmentsClient.queryClient,\n  );\n\n  let variables = '';\n  if (segment.variables && segment.variables.length > 0) {\n    variables = `: ${segment.variables[0].values\n      .map((variable) => getReadableValue(variable, intl))\n      .join(', ')}`;\n  }\n\n  if (variableClassName) {\n    return (\n      <span>\n        {data?.segment.name ?? segment.id}\n        <span className={variableClassName}>{variables}</span>\n      </span>\n    );\n  }\n\n  return `${data?.segment.name ?? segment.id}${variables}`;\n};\n\n/**\n * LoadingState-component for SegmentSelector Overlay\n * @internal\n */\nexport const SegmentsPreset = (props: SegmentsPresetProps) => {\n  const shouldReduceMotion = useReducedMotion();\n  const {\n    uiPreset,\n    id,\n    isPinned,\n    isSelected,\n    pinLimitReached,\n  }: SegmentsPresetProps = props;\n  const { segments } = uiPreset;\n  const [isAnimating, setIsAnimating] = useState(false);\n\n  const { setUISegments } = useSegmentsUIContext();\n  const { overlayState } = useContext(UISegmentsDispatchContext);\n  const { setSegments } = useSegments();\n\n  const pin = useMutation(\n    {\n      mutationKey: ['pin-segment-preset', id],\n      mutationFn: pinSegmentsPreset,\n      onMutate: async () =>\n        runOptimisticMutation<UserSegmentsPresets>(\n          'getSegmentsPresets',\n          (prevState) => updateCachePinMutation(prevState, id, segments),\n          [\n            'pin-segment-preset',\n            'unpin-segment-preset',\n            id,\n            'getSegmentsPresets',\n          ],\n        ),\n      onError: (error, _, context) =>\n        handleFailedOptimisticMutation('getSegmentsPresets', error, context),\n      onSettled: () =>\n        handleSettledOptimisticMutation(\n          ['getSegmentsPresets'],\n          ['pin-segment-preset', 'unpin-segment-preset', id],\n        ),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const unpin = useMutation(\n    {\n      mutationKey: ['unpin-segment-preset', id],\n      mutationFn: unpinSegmentsPreset,\n      onMutate: async () =>\n        runOptimisticMutation<UserSegmentsPresets>(\n          'getSegmentsPresets',\n          (prevState) => updateCacheUnpinMutation(prevState, id),\n          [\n            'pin-segment-preset',\n            'unpin-segment-preset',\n            id,\n            'getSegmentsPresets',\n          ],\n        ),\n      onError: (error, _, context) =>\n        handleFailedOptimisticMutation('getSegmentsPresets', error, context),\n      onSettled: () =>\n        handleSettledOptimisticMutation(\n          ['getSegmentsPresets'],\n          ['pin-segment-preset', 'unpin-segment-preset', id],\n        ),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const applyPreset = useMutation(\n    {\n      mutationKey: ['apply-segment-preset', id],\n      mutationFn: () => {\n        // We changed the syntax of the values, formerly they could be a stringified array and now we flatten any arrays inside.\n        // Some of the presets still follow the old syntax, so we need to convert them here before applying.\n        const flattenedSegments = segments.map((segment) => {\n          if (segment.variables) {\n            const flattenedVariables = segment.variables.map((variable) => {\n              const values = flattenQueryResultToValues([], variable.values);\n\n              return {\n                ...variable,\n                values,\n              };\n            });\n\n            return { ...segment, variables: flattenedVariables };\n          }\n\n          return segment;\n        });\n\n        setUISegments(flattenedSegments, true);\n        return setSegments(flattenedSegments);\n      },\n      onSuccess: async () => {\n        const isValid = await areUiSegmentsValid(segments);\n        if (isValid) {\n          overlayState?.close();\n        }\n      },\n    },\n    segmentsClient.queryClient,\n  );\n\n  const color = isSelected ? 'primary' : 'neutral';\n\n  const pinningTooltipText = usePinningTooltipText(pinLimitReached, isPinned);\n  const icon = isPinned ? <PinOffIcon /> : <PinIcon />;\n  const pinButtonDataDtName = isPinned ? 'Unpin' : 'Pin';\n\n  const onClick = () =>\n    isPinned ? unpin.mutate(uiPreset.id) : pin.mutate(segments);\n\n  const labelRef = useRef<HTMLDivElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  return (\n    <motion.div\n      variants={shouldReduceMotion ? {} : expandAndCollapseAnimationVariants}\n      initial=\"exit\"\n      animate=\"enter\"\n      exit=\"exit\"\n      className={clsx({\n        [animationHelperStyles.isAnimating]: isAnimating,\n      })}\n      onAnimationStart={() => setIsAnimating(true)}\n      onAnimationComplete={() => setIsAnimating(false)}\n    >\n      <InputGroup\n        className={clsx([\n          styles.inputGroup,\n          { [styles.inputGroupSelected]: isSelected },\n        ])}\n      >\n        <Tooltip\n          placement=\"left\"\n          fallbackPlacements={['top', 'bottom', 'right']}\n          text={<PresetTooltipText segments={segments} />}\n          open={showTooltip}\n          onOpenChange={(isOpen) => {\n            const hasOverFlow =\n              (labelRef.current?.scrollWidth ?? 0) >\n              (labelRef.current?.clientWidth ?? 0);\n\n            setShowTooltip(isOpen && hasOverFlow);\n          }}\n          className={textStyleCSS({\n            fontStyle: 'text',\n            textStyle: 'small-emphasized',\n          })}\n          style={{ zIndex: Number(stackingContext.style.zIndex) + 1 }}\n        >\n          <Button\n            color={color}\n            width=\"100%\"\n            textAlign=\"start\"\n            className={clsx(styles.presetButton, {\n              [styles.selectionMark]: isSelected,\n            })}\n            onClick={() => applyPreset.mutate()}\n          >\n            <Button.Label className={styles.buttonLabel} ref={labelRef}>\n              {segments.map((segment, index) => (\n                <SegmentsPresetText\n                  segment={segment}\n                  isFirst={index === 0}\n                  key={segment.id}\n                />\n              ))}\n            </Button.Label>\n          </Button>\n        </Tooltip>\n        <Tooltip\n          placement=\"right\"\n          text={pinningTooltipText}\n          className={textStyleCSS({\n            fontStyle: 'text',\n            textStyle: 'small-emphasized',\n          })}\n          style={{ zIndex: Number(stackingContext.style.zIndex) + 1 }}\n        >\n          <Button\n            color={color}\n            className={styles.suffixButton}\n            onClick={onClick}\n            disabled={pinLimitReached && !isPinned}\n            aria-label={pinningTooltipText}\n            data-dt-name={pinButtonDataDtName}\n          >\n            {icon}\n          </Button>\n        </Tooltip>\n      </InputGroup>\n    </motion.div>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useMutation, useQuery } from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { motion, useReducedMotion } from 'framer-motion';\nimport { Fragment, useContext, useRef, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\nimport { PinIcon, PinOffIcon } from '@dynatrace/strato-icons';\nimport { getAppName } from '@dynatrace-sdk/app-environment';\nimport type { FilterSegment } from '@dynatrace-sdk/client-query';\nimport {\n  pinSegmentsPreset,\n  unpinSegmentsPreset,\n  type SegmentsPreset as SegmentsPresetType,\n  type UserSegmentsPresets,\n} from '@dynatrace-sdk/segments-presets';\n\nimport * as styles from './SegmentsPresets.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useOverlayStacking } from '../../../../core/hooks/useOverlayStacking.js';\nimport { expandCollapseEasing } from '../../../../core/utils/framer-motion-easings.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { InputGroup } from '../../../../layouts/input-group/InputGroup.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { textStyle as textStyleCSS } from '../../../../styles/textStyle.sty.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport {\n  handleFailedOptimisticMutation,\n  handleSettledOptimisticMutation,\n  runOptimisticMutation,\n} from '../../../helper/queryHelper.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\n} from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport { useSegmentsUIContext } from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { UISegmentsDispatchContext } from '../../contexts/SegmentsUI/SegmentsUIDispatchContext.js';\nimport { areUiSegmentsValid } from '../../contexts/SegmentsUI/segmentValidationHelper.js';\nimport { useSegments } from '../../hooks/useSegments.js';\nimport { flattenQueryResultToValues, getReadableValue } from '../../utils.js';\nimport * as animationHelperStyles from '../Overlay.sty.js';\n\n/** @internal */\ninterface SegmentsPresetProps {\n  uiPreset: SegmentsPresetType;\n  id: string;\n  pinLimitReached: boolean;\n  isPinned: boolean;\n  isSelected: boolean;\n}\n\n/** @internal */\nexport const expandAndCollapseAnimationVariants = {\n  enter: {\n    height: 'auto',\n    opacity: 1,\n    translateY: 0,\n    transition: {\n      duration: AnimationsJS.ExpandCollapse.Duration.Base,\n      ease: expandCollapseEasing,\n    },\n  },\n  exit: {\n    height: 0,\n    opacity: 0,\n    translateY: -10,\n    transition: {\n      duration: AnimationsJS.ExpandCollapse.Duration.Base,\n      ease: expandCollapseEasing,\n    },\n  },\n};\n\n/**\n * @internal\n */\nconst SegmentsPresetText = ({\n  segment,\n  isFirst,\n}: {\n  segment: FilterSegment;\n  isFirst: boolean;\n}) => {\n  const andText = (\n    <Text textStyle=\"base\" className={styles.and}>\n      &nbsp;\n      <FormattedMessage\n        defaultMessage=\"and\"\n        description=\"Text that is separating between multiple Segments in one preset.\"\n        id=\"GeQL1Mbr4RzmlFJk\"\n      />\n      &nbsp;\n    </Text>\n  );\n\n  const connectingString = isFirst ? '' : andText;\n\n  return (\n    <Fragment key={segment.id}>\n      {connectingString}\n      <SegmentText segment={segment} />\n    </Fragment>\n  );\n};\n\nfunction usePinningTooltipText(\n  pinLimitReached: boolean,\n  isPinned: boolean,\n): string {\n  const intl = useIntl();\n\n  if (pinLimitReached && !isPinned) {\n    return intl.formatMessage({\n      defaultMessage: \"You can't pin more than 10 items.\",\n      id: 'Y/6wwuz1ueL+7V2j',\n      description: 'Tooltip text for pinning limit.',\n    });\n  }\n\n  if (!isPinned) {\n    return intl.formatMessage(\n      {\n        defaultMessage: 'Pin in {appName}',\n        id: 'RPdRdtDJumoOO3os',\n        description: 'Tooltip text for pin button.',\n      },\n      { appName: getAppName() },\n    );\n  }\n\n  return intl.formatMessage({\n    defaultMessage: 'Unpin',\n    id: 'uCbwlgMp2BNGzNro',\n    description: 'Text for the unpin button of a segment preset.',\n  });\n}\n\nfunction updateCachePinMutation(\n  old: UserSegmentsPresets,\n  id: string,\n  segments: FilterSegment[],\n): UserSegmentsPresets {\n  // We always want to add the newly pinned one at the top.\n  const pinnedPresets = old.pinnedPresets;\n  pinnedPresets.unshift({ id, segments });\n\n  return {\n    ...old,\n    pinnedPresets,\n  };\n}\n\nfunction updateCacheUnpinMutation(\n  old: UserSegmentsPresets,\n  id: string,\n): UserSegmentsPresets {\n  const pinnedPresets = old.pinnedPresets;\n  const pinnedPresetIndex = pinnedPresets.findIndex(\n    (preset) => preset.id === id,\n  );\n\n  if (pinnedPresetIndex === -1) {\n    return old;\n  }\n\n  pinnedPresets.splice(pinnedPresetIndex, 1);\n\n  return {\n    recentPresets: old.recentPresets,\n    pinnedPresets,\n  };\n}\n\n/**\n * @internal\n */\nconst PresetTooltipText = ({ segments }: { segments: FilterSegment[] }) => {\n  return (\n    <Flex flexDirection=\"column\" gap={4}>\n      {segments.map((segment) => {\n        return (\n          <SegmentText\n            key={segment.id}\n            segment={segment}\n            variableClassName={textStyleCSS({\n              fontStyle: 'text',\n              textStyle: 'small',\n            })}\n          />\n        );\n      })}\n    </Flex>\n  );\n};\n\n/**\n * @internal\n */\nconst SegmentText = ({\n  segment,\n  variableClassName,\n}: {\n  segment: FilterSegment;\n  variableClassName?: string;\n}) => {\n  const { getSegment } = useSegmentsCache();\n  const intl = useIntl();\n  const { data } = useQuery(\n    {\n      queryKey: ['getSegment', segment.id],\n      queryFn: () => getSegment(segment.id),\n      notifyOnChangeProps: ['dataUpdatedAt'],\n    },\n    segmentsClient.queryClient,\n  );\n\n  let variables = '';\n  if (segment.variables && segment.variables.length > 0) {\n    variables = `: ${segment.variables[0].values\n      .map((variable) => getReadableValue(variable, intl))\n      .join(', ')}`;\n  }\n\n  if (variableClassName) {\n    return (\n      <span>\n        {data?.segment.name ?? segment.id}\n        <span className={variableClassName}>{variables}</span>\n      </span>\n    );\n  }\n\n  return `${data?.segment.name ?? segment.id}${variables}`;\n};\n\n/**\n * LoadingState-component for SegmentSelector Overlay\n * @internal\n */\nexport const SegmentsPreset = (props: SegmentsPresetProps) => {\n  const shouldReduceMotion = useReducedMotion();\n  const {\n    uiPreset,\n    id,\n    isPinned,\n    isSelected,\n    pinLimitReached,\n  }: SegmentsPresetProps = props;\n  const { segments } = uiPreset;\n  const [isAnimating, setIsAnimating] = useState(false);\n\n  const { setUISegments } = useSegmentsUIContext();\n  const { overlayState } = useContext(UISegmentsDispatchContext);\n  const { setSegments } = useSegments();\n\n  const pin = useMutation(\n    {\n      mutationKey: ['pin-segment-preset', id],\n      mutationFn: pinSegmentsPreset,\n      onMutate: async () =>\n        runOptimisticMutation<UserSegmentsPresets>(\n          'getSegmentsPresets',\n          (prevState) => updateCachePinMutation(prevState, id, segments),\n          [\n            'pin-segment-preset',\n            'unpin-segment-preset',\n            id,\n            'getSegmentsPresets',\n          ],\n        ),\n      onError: (error, _, context) =>\n        handleFailedOptimisticMutation('getSegmentsPresets', error, context),\n      onSettled: () =>\n        handleSettledOptimisticMutation(\n          ['getSegmentsPresets'],\n          ['pin-segment-preset', 'unpin-segment-preset', id],\n        ),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const unpin = useMutation(\n    {\n      mutationKey: ['unpin-segment-preset', id],\n      mutationFn: unpinSegmentsPreset,\n      onMutate: async () =>\n        runOptimisticMutation<UserSegmentsPresets>(\n          'getSegmentsPresets',\n          (prevState) => updateCacheUnpinMutation(prevState, id),\n          [\n            'pin-segment-preset',\n            'unpin-segment-preset',\n            id,\n            'getSegmentsPresets',\n          ],\n        ),\n      onError: (error, _, context) =>\n        handleFailedOptimisticMutation('getSegmentsPresets', error, context),\n      onSettled: () =>\n        handleSettledOptimisticMutation(\n          ['getSegmentsPresets'],\n          ['pin-segment-preset', 'unpin-segment-preset', id],\n        ),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const applyPreset = useMutation(\n    {\n      mutationKey: ['apply-segment-preset', id],\n      mutationFn: () => {\n        // We changed the syntax of the values, formerly they could be a stringified array and now we flatten any arrays inside.\n        // Some of the presets still follow the old syntax, so we need to convert them here before applying.\n        const flattenedSegments = segments.map((segment) => {\n          if (segment.variables) {\n            const flattenedVariables = segment.variables.map((variable) => {\n              const values = flattenQueryResultToValues([], variable.values);\n\n              return {\n                ...variable,\n                values,\n              };\n            });\n\n            return { ...segment, variables: flattenedVariables };\n          }\n\n          return segment;\n        });\n\n        setUISegments(flattenedSegments, true);\n        return setSegments(flattenedSegments);\n      },\n      onSuccess: async () => {\n        const isValid = await areUiSegmentsValid(segments);\n        if (isValid) {\n          overlayState?.close();\n        }\n      },\n    },\n    segmentsClient.queryClient,\n  );\n\n  const color = isSelected ? 'primary' : 'neutral';\n\n  const pinningTooltipText = usePinningTooltipText(pinLimitReached, isPinned);\n  const icon = isPinned ? <PinOffIcon /> : <PinIcon />;\n  const pinButtonDataDtProperties = `state:${isPinned ? 'unpin' : 'pin'}`;\n\n  const onClick = () =>\n    isPinned ? unpin.mutate(uiPreset.id) : pin.mutate(segments);\n\n  const labelRef = useRef<HTMLDivElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  return (\n    <motion.div\n      variants={shouldReduceMotion ? {} : expandAndCollapseAnimationVariants}\n      initial=\"exit\"\n      animate=\"enter\"\n      exit=\"exit\"\n      className={clsx({\n        [animationHelperStyles.isAnimating]: isAnimating,\n      })}\n      onAnimationStart={() => setIsAnimating(true)}\n      onAnimationComplete={() => setIsAnimating(false)}\n    >\n      <InputGroup\n        className={clsx([\n          styles.inputGroup,\n          { [styles.inputGroupSelected]: isSelected },\n        ])}\n      >\n        <Tooltip\n          placement=\"left\"\n          fallbackPlacements={['top', 'bottom', 'right']}\n          text={<PresetTooltipText segments={segments} />}\n          open={showTooltip}\n          onOpenChange={(isOpen) => {\n            const hasOverFlow =\n              (labelRef.current?.scrollWidth ?? 0) >\n              (labelRef.current?.clientWidth ?? 0);\n\n            setShowTooltip(isOpen && hasOverFlow);\n          }}\n          className={textStyleCSS({\n            fontStyle: 'text',\n            textStyle: 'small-emphasized',\n          })}\n          style={{ zIndex: Number(stackingContext.style.zIndex) + 1 }}\n        >\n          <Button\n            color={color}\n            width=\"100%\"\n            textAlign=\"start\"\n            className={clsx(styles.presetButton, {\n              [styles.selectionMark]: isSelected,\n            })}\n            onClick={() => applyPreset.mutate()}\n          >\n            <Button.Label className={styles.buttonLabel} ref={labelRef}>\n              {segments.map((segment, index) => (\n                <SegmentsPresetText\n                  segment={segment}\n                  isFirst={index === 0}\n                  key={segment.id}\n                />\n              ))}\n            </Button.Label>\n          </Button>\n        </Tooltip>\n        <Tooltip\n          placement=\"right\"\n          text={pinningTooltipText}\n          className={textStyleCSS({\n            fontStyle: 'text',\n            textStyle: 'small-emphasized',\n          })}\n          style={{ zIndex: Number(stackingContext.style.zIndex) + 1 }}\n        >\n          <Button\n            color={color}\n            className={styles.suffixButton}\n            onClick={onClick}\n            disabled={pinLimitReached && !isPinned}\n            aria-label={pinningTooltipText}\n            data-dt-name=\"PinUnpin\"\n            data-dt-properties={pinButtonDataDtProperties}\n          >\n            {icon}\n          </Button>\n        </Tooltip>\n      </InputGroup>\n    </motion.div>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.css CHANGED Viewed

@@ -1,27 +1,27 @@
-._1oehqvw3-3-2-1 {
+._1oehqvw3-3-3-1 {
   all: unset;
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1oehqvw4-3-2-1 {
+._1oehqvw4-3-3-1 {
   all: unset;
   display: block;
 }
-._1oehqvw5-3-2-1._1oehqvw5-3-2-1 {
-  color: var(--_1oehqvw2-3-2-1);
+._1oehqvw5-3-3-1._1oehqvw5-3-3-1 {
+  color: var(--_1oehqvw2-3-3-1);
 }
-._1oehqvw6-3-2-1 {
+._1oehqvw6-3-3-1 {
   align-items: center;
   display: inline-block;
   text-wrap: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1oehqvw7-3-2-1._1oehqvw7-3-2-1 {
+._1oehqvw7-3-3-1._1oehqvw7-3-3-1 {
   padding-left: var(--dt-spacings-size-12, 12px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1oehqvw8-3-2-1::before {
+._1oehqvw8-3-3-1::before {
   content: " ";
   position: absolute;
   display: block;
@@ -32,38 +32,38 @@
   left: 0px;
   transform: translate(4px);
 }
-._1oehqvw9-3-2-1 {
-  --_1oehqvw0-3-2-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1oehqvw1-3-2-1: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
-  --_1oehqvw2-3-2-1: var(--dt-colors-text-neutral-subdued, #595a7d);
+._1oehqvw9-3-3-1 {
+  --_1oehqvw0-3-3-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1oehqvw1-3-3-1: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+  --_1oehqvw2-3-3-1: var(--dt-colors-text-neutral-subdued, #595a7d);
   grid-template-columns: 1fr max-content;
 }
-._1oehqvwa-3-2-1 {
-  --_1oehqvw0-3-2-1: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-  --_1oehqvw1-3-2-1: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
-  --_1oehqvw2-3-2-1: var(--dt-colors-text-primary-default, #464cce);
+._1oehqvwa-3-3-1 {
+  --_1oehqvw0-3-3-1: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+  --_1oehqvw1-3-3-1: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
+  --_1oehqvw2-3-3-1: var(--dt-colors-text-primary-default, #464cce);
 }
-._1oehqvwb-3-2-1:hover._1oehqvwb-3-2-1:hover, ._1oehqvwb-3-2-1:focus-visible._1oehqvwb-3-2-1:focus-visible {
-  background-color: var(--_1oehqvw1-3-2-1);
+._1oehqvwb-3-3-1:hover._1oehqvwb-3-3-1:hover, ._1oehqvwb-3-3-1:focus-visible._1oehqvwb-3-3-1:focus-visible {
+  background-color: var(--_1oehqvw1-3-3-1);
 }
-._1oehqvwc-3-2-1._1oehqvwc-3-2-1 {
+._1oehqvwc-3-3-1._1oehqvwc-3-3-1 {
   opacity: 0;
-  background-color: var(--_1oehqvw0-3-2-1);
+  background-color: var(--_1oehqvw0-3-3-1);
 }
-._1oehqvwc-3-2-1:hover._1oehqvwc-3-2-1:hover, ._1oehqvwc-3-2-1:focus-visible._1oehqvwc-3-2-1:focus-visible {
-  background-color: var(--_1oehqvw1-3-2-1);
+._1oehqvwc-3-3-1:hover._1oehqvwc-3-3-1:hover, ._1oehqvwc-3-3-1:focus-visible._1oehqvwc-3-3-1:focus-visible {
+  background-color: var(--_1oehqvw1-3-3-1);
 }
-._1oehqvwc-3-2-1:disabled, ._1oehqvwc-3-2-1:disabled:hover._1oehqvwc-3-2-1:disabled:hover {
+._1oehqvwc-3-3-1:disabled, ._1oehqvwc-3-3-1:disabled:hover._1oehqvwc-3-3-1:disabled:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1oehqvw9-3-2-1:has(button:focus-visible) ._1oehqvwc-3-2-1, ._1oehqvw9-3-2-1:hover ._1oehqvwc-3-2-1 {
+._1oehqvw9-3-3-1:has(button:focus-visible) ._1oehqvwc-3-3-1, ._1oehqvw9-3-3-1:hover ._1oehqvwc-3-3-1 {
   opacity: 1;
 }
-._1oehqvw9-3-2-1:has(._1oehqvwc-3-2-1:focus-visible) ._1oehqvwb-3-2-1, ._1oehqvw9-3-2-1:hover ._1oehqvwb-3-2-1:not(:hover) {
-  background-color: var(--_1oehqvw0-3-2-1);
+._1oehqvw9-3-3-1:has(._1oehqvwc-3-3-1:focus-visible) ._1oehqvwb-3-3-1, ._1oehqvw9-3-3-1:hover ._1oehqvwb-3-3-1:not(:hover) {
+  background-color: var(--_1oehqvw0-3-3-1);
 }
-._1oehqvw9-3-2-1 button, ._1oehqvw9-3-2-1:hover button {
+._1oehqvw9-3-3-1 button, ._1oehqvw9-3-3-1:hover button {
   transition-timing-function: unset;
   transition-duration: 0s;
   transition: none;

package/esm/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.sty.js CHANGED Viewed

@@ -1,14 +1,14 @@
 import "./SegmentsPresets.css";
-var and = "_1oehqvw5-3-2-1";
-var buttonLabel = "_1oehqvw6-3-2-1";
-var inputGroup = "_1oehqvw9-3-2-1";
-var inputGroupSelected = "_1oehqvwa-3-2-1";
-var list = "_1oehqvw3-3-2-1";
-var listItem = "_1oehqvw4-3-2-1";
-var presetButton = "_1oehqvwb-3-2-1";
-var sectionHeadline = "_1oehqvw7-3-2-1";
-var selectionMark = "_1oehqvw8-3-2-1";
-var suffixButton = "_1oehqvwc-3-2-1";
+var and = "_1oehqvw5-3-3-1";
+var buttonLabel = "_1oehqvw6-3-3-1";
+var inputGroup = "_1oehqvw9-3-3-1";
+var inputGroupSelected = "_1oehqvwa-3-3-1";
+var list = "_1oehqvw3-3-3-1";
+var listItem = "_1oehqvw4-3-3-1";
+var presetButton = "_1oehqvwb-3-3-1";
+var sectionHeadline = "_1oehqvw7-3-3-1";
+var selectionMark = "_1oehqvw8-3-3-1";
+var suffixButton = "_1oehqvwc-3-3-1";
 export {
   and,
   buttonLabel,

package/esm/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.css.ts"],
-  "sourcesContent": ["import './SegmentsPresets.css';\nexport var and = '_1oehqvw5-3-2-1';\nexport var buttonLabel = '_1oehqvw6-3-2-1';\nexport var inputGroup = '_1oehqvw9-3-2-1';\nexport var inputGroupSelected = '_1oehqvwa-3-2-1';\nexport var list = '_1oehqvw3-3-2-1';\nexport var listItem = '_1oehqvw4-3-2-1';\nexport var presetButton = '_1oehqvwb-3-2-1';\nexport var sectionHeadline = '_1oehqvw7-3-2-1';\nexport var selectionMark = '_1oehqvw8-3-2-1';\nexport var suffixButton = '_1oehqvwc-3-2-1';"],
+  "sourcesContent": ["import './SegmentsPresets.css';\nexport var and = '_1oehqvw5-3-3-1';\nexport var buttonLabel = '_1oehqvw6-3-3-1';\nexport var inputGroup = '_1oehqvw9-3-3-1';\nexport var inputGroupSelected = '_1oehqvwa-3-3-1';\nexport var list = '_1oehqvw3-3-3-1';\nexport var listItem = '_1oehqvw4-3-3-1';\nexport var presetButton = '_1oehqvwb-3-3-1';\nexport var sectionHeadline = '_1oehqvw7-3-3-1';\nexport var selectionMark = '_1oehqvw8-3-3-1';\nexport var suffixButton = '_1oehqvwc-3-3-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,MAAM;AACV,IAAI,cAAc;AAClB,IAAI,aAAa;AACjB,IAAI,qBAAqB;AACzB,IAAI,OAAO;AACX,IAAI,WAAW;AACf,IAAI,eAAe;AACnB,IAAI,kBAAkB;AACtB,IAAI,gBAAgB;AACpB,IAAI,eAAe;",
   "names": []
 }

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

@@ -1,47 +1,47 @@
-._1fuxi5m0-3-2-1 {
+._1fuxi5m0-3-3-1 {
   width: 100%;
   border-top-left-radius: 0;
 }
-._1fuxi5m2-3-2-1._1fuxi5m2-3-2-1 {
+._1fuxi5m2-3-3-1._1fuxi5m2-3-3-1 {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1fuxi5m3-3-2-1 {
+._1fuxi5m3-3-3-1 {
   grid-area: clear;
   grid-row-start: 1;
 }
-._1fuxi5m3-3-2-1._1fuxi5m3-3-2-1 {
+._1fuxi5m3-3-3-1._1fuxi5m3-3-3-1 {
   height: 100%;
   border-radius: 0 var(--dt-borders-radius-field-default, 6px) var(--dt-borders-radius-field-default, 6px) 0;
 }
-._1fuxi5m4-3-2-1 {
+._1fuxi5m4-3-3-1 {
   gap: 2px;
   width: 100%;
   grid-template-columns: 40% auto max-content;
 }
-._1fuxi5m5-3-2-1 {
+._1fuxi5m5-3-3-1 {
   grid-template-areas: "segment variables clear";
 }
-._1fuxi5m6-3-2-1 {
+._1fuxi5m6-3-3-1 {
   grid-template-areas: "segment variables";
   grid-template-columns: 40% auto;
 }
-._1fuxi5m7-3-2-1 {
+._1fuxi5m7-3-3-1 {
   grid-template-areas: "segment segment clear";
 }
-._1fuxi5m8-3-2-1 {
+._1fuxi5m8-3-3-1 {
   grid-template-areas: "segment segment";
 }
 @media screen and (min-width: 641px) {
-  ._1fuxi5m0-3-2-1 {
+  ._1fuxi5m0-3-3-1 {
     border-bottom-left-radius: 0;
   }
 }
 @media screen and (max-width: 640px) {
-  ._1fuxi5m1-3-2-1 {
+  ._1fuxi5m1-3-3-1 {
     border-bottom-left-radius: 0;
   }
-  ._1fuxi5m5-3-2-1 {
+  ._1fuxi5m5-3-3-1 {
     grid-template-areas: "segment segment clear" "variables variables clear";
   }
 }

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

@@ -1,10 +1,10 @@
 import "./SegmentSelect.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var clearButtonCSS = "_1fuxi5m3-3-2-1";
-var noBorderRadiusRight = "_1fuxi5m2-3-2-1";
-var segmentsSelectCSS = "_1fuxi5m1-3-2-1";
-var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m4-3-2-1", variantClassNames: { layout: { full: "_1fuxi5m5-3-2-1", "full-readonly": "_1fuxi5m6-3-2-1", "no-variables": "_1fuxi5m7-3-2-1", "no-variables-readonly": "_1fuxi5m8-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
-var variablesSelectCSS = "_1fuxi5m0-3-2-1";
+var clearButtonCSS = "_1fuxi5m3-3-3-1";
+var noBorderRadiusRight = "_1fuxi5m2-3-3-1";
+var segmentsSelectCSS = "_1fuxi5m1-3-3-1";
+var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m4-3-3-1", variantClassNames: { layout: { full: "_1fuxi5m5-3-3-1", "full-readonly": "_1fuxi5m6-3-3-1", "no-variables": "_1fuxi5m7-3-3-1", "no-variables-readonly": "_1fuxi5m8-3-3-1" } }, defaultVariants: {}, compoundVariants: [] });
+var variablesSelectCSS = "_1fuxi5m0-3-3-1";
 export {
   clearButtonCSS,
   noBorderRadiusRight,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SegmentSelect.css.ts"],
-  "sourcesContent": ["import './SegmentSelect.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearButtonCSS = '_1fuxi5m3-3-2-1';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-2-1';\nexport var segmentsSelectCSS = '_1fuxi5m1-3-2-1';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m4-3-2-1',variantClassNames:{layout:{full:'_1fuxi5m5-3-2-1','full-readonly':'_1fuxi5m6-3-2-1','no-variables':'_1fuxi5m7-3-2-1','no-variables-readonly':'_1fuxi5m8-3-2-1'}},defaultVariants:{},compoundVariants:[]});\nexport var variablesSelectCSS = '_1fuxi5m0-3-2-1';"],
+  "sourcesContent": ["import './SegmentSelect.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearButtonCSS = '_1fuxi5m3-3-3-1';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-3-1';\nexport var segmentsSelectCSS = '_1fuxi5m1-3-3-1';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m4-3-3-1',variantClassNames:{layout:{full:'_1fuxi5m5-3-3-1','full-readonly':'_1fuxi5m6-3-3-1','no-variables':'_1fuxi5m7-3-3-1','no-variables-readonly':'_1fuxi5m8-3-3-1'}},defaultVariants:{},compoundVariants:[]});\nexport var variablesSelectCSS = '_1fuxi5m0-3-3-1';"],
   "mappings": "AAAA,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,qBAAqB;",
   "names": []
 }

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

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

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

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

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

@@ -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-2-1';"],
+  "sourcesContent": ["import './SegmentSelectorTrigger.css';\nexport var trigger = '_1e5el1o0-3-3-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

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

@@ -24,6 +24,10 @@ import {
   getReadableValue
 } from "../../utils.js";
 import { sendManagementAddOnIntent } from "../sendSegmentManagementAddOnIntent.js";
+const dtClientContext = JSON.stringify({
+  source: "SegmentSelector",
+  package: "@dynatrace/strato-components"
+});
 const ValueSelect = (props) => {
   const { triggerClassName, readOnly, segment, variables = [] } = props;
   const variableSelectRef = useRef(null);
@@ -40,8 +44,9 @@ const ValueSelect = (props) => {
   } = useDql({
     query,
     maxResultRecords: 1e4,
-    maxResultBytes: 5242880
+    maxResultBytes: 5242880,
     // 5 MB
+    dtClientContext
   });
   useEffect(() => {
     if (!isDqlLoading && data?.records?.length === 0) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/ValueSelect.tsx"],
-  "sourcesContent": ["import 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 { useDql } from '@dynatrace-sdk/react-hooks';\n\nimport { variablesSelectCSS } 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 { type CachedSegment } 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 { sendManagementAddOnIntent } from '../sendSegmentManagementAddOnIntent.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 query =\n    segment?.segment?.variables !== undefined &&\n    segment?.segment?.variables?.type === 'query'\n      ? segment.segment.variables.value\n      : '';\n\n  const {\n    data,\n    isLoading: isDqlLoading,\n    forceRefetch,\n  } = useDql({\n    query,\n    maxResultRecords: 10_000,\n    maxResultBytes: 5_242_880, // 5 MB\n  });\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: segment?.segment?.id,\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  /** Checks which variables are already selected but no longer available. */\n  const unavailableVariables = useMemo(() => {\n    if (data) {\n      const firstKey = Object.keys(data.records?.[0] ?? {})[0];\n      const dataRecordIds = data.records.map((record) => record?.[firstKey]);\n\n      return variables?.filter((variable) => !dataRecordIds.includes(variable));\n    }\n  }, [data, variables]);\n\n  /** Filters for all unique variable ids and strips duplicates. */\n  const availableVariables = useMemo(() => {\n    if (data?.records) {\n      let hasArrayIdentifier = false;\n      const recordsArray = data?.records\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  }, [data]);\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      style={{ gridArea: 'variables' }}\n      required\n      readOnly={readOnly || segment?.temporarilyApplied}\n      clearable={false}\n      onOpenChange={(isOpen) => {\n        if (query.length > 0 && isOpen) {\n          forceRefetch();\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(data?.records[0] ?? {})[0];\n        const dataEnrichedVariables = newVariables\n          .map((variable) => {\n            return (\n              data?.records.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    >\n      <Select.Trigger\n        className={clsx(variablesSelectCSS, 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={isDqlLoading}\n        showSelectedOptionsFirst\n        width=\"trigger\"\n      >\n        {!data &&\n          variables?.map((variable) => (\n            <Select.Option key={variable} value={variable}>\n              {getReadableValue(variable, intl)}\n            </Select.Option>\n          ))}\n        {unavailableVariables?.map((unlistedVariable) => (\n          <Select.Option\n            key={unlistedVariable}\n            value={unlistedVariable}\n            textValue={unlistedVariable ?? 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 key={variable} value={variable}>\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          {data?.records.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 onClick={sendManagementAddOnIntent}>\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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",
+  "sourcesContent": ["import 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 { useDql } from '@dynatrace-sdk/react-hooks';\n\nimport { variablesSelectCSS } 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 { type CachedSegment } 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 { sendManagementAddOnIntent } from '../sendSegmentManagementAddOnIntent.js';\n\ntype ValueSelectProps = {\n  readOnly?: boolean;\n  segment: CachedSegment;\n  variables?: string[];\n  triggerClassName?: string;\n};\n\nconst dtClientContext = JSON.stringify({\n  source: 'SegmentSelector',\n  package: '@dynatrace/strato-components',\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 query =\n    segment?.segment?.variables !== undefined &&\n    segment?.segment?.variables?.type === 'query'\n      ? segment.segment.variables.value\n      : '';\n\n  const {\n    data,\n    isLoading: isDqlLoading,\n    forceRefetch,\n  } = useDql({\n    query,\n    maxResultRecords: 10_000,\n    maxResultBytes: 5_242_880, // 5 MB\n    dtClientContext,\n  });\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: segment?.segment?.id,\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  /** Checks which variables are already selected but no longer available. */\n  const unavailableVariables = useMemo(() => {\n    if (data) {\n      const firstKey = Object.keys(data.records?.[0] ?? {})[0];\n      const dataRecordIds = data.records.map((record) => record?.[firstKey]);\n\n      return variables?.filter((variable) => !dataRecordIds.includes(variable));\n    }\n  }, [data, variables]);\n\n  /** Filters for all unique variable ids and strips duplicates. */\n  const availableVariables = useMemo(() => {\n    if (data?.records) {\n      let hasArrayIdentifier = false;\n      const recordsArray = data?.records\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  }, [data]);\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      style={{ gridArea: 'variables' }}\n      required\n      readOnly={readOnly || segment?.temporarilyApplied}\n      clearable={false}\n      onOpenChange={(isOpen) => {\n        if (query.length > 0 && isOpen) {\n          forceRefetch();\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(data?.records[0] ?? {})[0];\n        const dataEnrichedVariables = newVariables\n          .map((variable) => {\n            return (\n              data?.records.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    >\n      <Select.Trigger\n        className={clsx(variablesSelectCSS, 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={isDqlLoading}\n        showSelectedOptionsFirst\n        width=\"trigger\"\n      >\n        {!data &&\n          variables?.map((variable) => (\n            <Select.Option key={variable} value={variable}>\n              {getReadableValue(variable, intl)}\n            </Select.Option>\n          ))}\n        {unavailableVariables?.map((unlistedVariable) => (\n          <Select.Option\n            key={unlistedVariable}\n            value={unlistedVariable}\n            textValue={unlistedVariable ?? 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 key={variable} value={variable}>\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          {data?.records.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 onClick={sendManagementAddOnIntent}>\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/timeframe-selector/TimeframeSelector.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._1sqhmjg0-3-2-1 {
+._1sqhmjg0-3-3-1 {
   min-width: 0;
   box-sizing: border-box;
 }