@perses-dev/plugin-system 0.55.0-beta.3 → 0.55.0-beta.7

package/dist/components/SelectionOptionsEditor/index.js

@@ -10,6 +10,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-export * from './SelectionOptionsEditor';
+export * from "./SelectionOptionsEditor.js";
 
 //# sourceMappingURL=index.js.map

package/dist/components/SelectionOptionsEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SelectionOptionsEditor/index.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './SelectionOptionsEditor';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,2BAA2B"}
+{"version":3,"sources":["../../../src/components/SelectionOptionsEditor/index.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './SelectionOptionsEditor';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,8BAA2B"}

package/dist/components/TimeRangeControls/TimeRangeControls.d.ts

@@ -1,6 +1,5 @@
-import { TimeOption, TimeZoneOption } from '@perses-dev/components';
-import { ReactElement } from 'react';
-export declare const DEFAULT_REFRESH_INTERVAL_OPTIONS: TimeOption[];
+import type { TimeOption, TimeZoneOption } from '@perses-dev/components';
+import type { ReactElement } from 'react';
 interface TimeRangeControlsProps {
     heightPx?: number;
     showTimeRangeSelector?: boolean;
@@ -9,9 +8,10 @@ interface TimeRangeControlsProps {
     showCustomTimeRange?: boolean;
     showZoomButtons?: boolean;
     timePresets?: TimeOption[];
+    refreshIntervalOptions?: TimeOption[];
     timeZone: string;
     onTimeZoneChange: (timeZone: TimeZoneOption) => void;
 }
-export declare function TimeRangeControls({ heightPx, showTimeRangeSelector, showRefreshButton, showRefreshInterval, showCustomTimeRange, showZoomButtons, timePresets, timeZone, onTimeZoneChange, }: TimeRangeControlsProps): ReactElement;
+export declare function TimeRangeControls({ heightPx, showTimeRangeSelector, showRefreshButton, showRefreshInterval, showCustomTimeRange, showZoomButtons, timePresets, timeZone, refreshIntervalOptions, onTimeZoneChange, }: TimeRangeControlsProps): ReactElement;
 export {};
 //# sourceMappingURL=TimeRangeControls.d.ts.map

package/dist/components/TimeRangeControls/TimeRangeControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":"AAcA,OAAO,EAGL,UAAU,EAGV,cAAc,EAGf,MAAM,wBAAwB,CAAC;AAQhC,OAAO,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AAUlD,eAAO,MAAM,gCAAgC,EAAE,UAAU,EAOxD,CAAC;AAIF,UAAU,sBAAsB;IAE9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CACtD;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,qBAA4B,EAC5B,iBAAwB,EACxB,mBAA0B,EAC1B,mBAAmB,EACnB,eAAsB,EACtB,WAAW,EACX,QAAQ,EACR,gBAAgB,GACjB,EAAE,sBAAsB,GAAG,YAAY,CAoKvC"}
+{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAiBzE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAe1C,UAAU,sBAAsB;IAE9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,sBAAsB,CAAC,EAAE,UAAU,EAAE,CAAC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CACtD;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,qBAA4B,EAC5B,iBAAwB,EACxB,mBAA0B,EAC1B,mBAAmB,EACnB,eAAsB,EACtB,WAAW,EACX,QAAQ,EACR,sBAAsB,EACtB,gBAAgB,GACjB,EAAE,sBAAsB,GAAG,YAAY,CAqKvC"}

package/dist/components/TimeRangeControls/TimeRangeControls.js

@@ -11,63 +11,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Stack } from '@mui/material';
-import { RefreshIntervalPicker, InfoTooltip, ToolbarIconButton, TimeRangeSelector, getTimeZoneOptions, buildRelativeTimeOption } from '@perses-dev/components';
-import { parseDurationString } from '@perses-dev/spec';
-import { milliseconds } from 'date-fns';
+import { Stack } from "@mui/material";
+import { RefreshIntervalPicker, InfoTooltip, ToolbarIconButton, TimeRangeSelector, getTimeZoneOptions, buildRelativeTimeOption } from "@perses-dev/components";
+import { parseDurationString } from "@perses-dev/spec";
+import { milliseconds } from "date-fns";
 // eslint-disable-next-line import/no-duplicates
-import ZoomOut from 'mdi-material-ui/MinusCircleOutline';
+import ZoomOut from "mdi-material-ui/MinusCircleOutline";
 // eslint-disable-next-line import/no-duplicates
-import ZoomIn from 'mdi-material-ui/PlusCircleOutline';
-import RefreshIcon from 'mdi-material-ui/Refresh';
-import { useCallback } from 'react';
-import { TOOLTIP_TEXT } from '../../constants';
-import { useTimeRange, useShowCustomTimeRangeSetting, useTimeRangeOptionsSetting, useShowZoomRangeSetting, useDisableAutoRefreshSetting } from '../../runtime';
-export const DEFAULT_REFRESH_INTERVAL_OPTIONS = [
-    {
-        value: {
-            pastDuration: '0s'
-        },
-        display: 'Off'
-    },
-    {
-        value: {
-            pastDuration: '5s'
-        },
-        display: '5s'
-    },
-    {
-        value: {
-            pastDuration: '10s'
-        },
-        display: '10s'
-    },
-    {
-        value: {
-            pastDuration: '15s'
-        },
-        display: '15s'
-    },
-    {
-        value: {
-            pastDuration: '30s'
-        },
-        display: '30s'
-    },
-    {
-        value: {
-            pastDuration: '60s'
-        },
-        display: '1m'
-    }
-];
+import ZoomIn from "mdi-material-ui/PlusCircleOutline";
+import RefreshIcon from "mdi-material-ui/Refresh";
+import { useCallback } from "react";
+import { TOOLTIP_TEXT } from "../../constants/user-interface-text.js";
+import { useTimeRange } from "../../runtime/TimeRangeProvider/TimeRangeProvider.js";
+import { useShowCustomTimeRangeSetting, useTimeRangeOptionsSetting, useShowZoomRangeSetting, useDisableAutoRefreshSetting, useAutoRefreshIntervalsOptions } from "../../runtime/TimeRangeProvider/TimeRangeSettingsProvider.js";
 const DEFAULT_HEIGHT = '34px';
-export function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefreshButton = true, showRefreshInterval = true, showCustomTimeRange, showZoomButtons = true, timePresets, timeZone, onTimeZoneChange }) {
+export function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefreshButton = true, showRefreshInterval = true, showCustomTimeRange, showZoomButtons = true, timePresets, timeZone, refreshIntervalOptions, onTimeZoneChange }) {
     const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = useTimeRange();
     const showCustomTimeRangeValue = useShowCustomTimeRangeSetting(showCustomTimeRange);
     const showZoomInOutButtons = useShowZoomRangeSetting(showZoomButtons);
     const isAutoRefreshDisabled = useDisableAutoRefreshSetting();
     const timePresetsValue = useTimeRangeOptionsSetting(timePresets);
+    const autoRefreshIntervalOptions = useAutoRefreshIntervalsOptions(refreshIntervalOptions);
     // Convert height to a string, then use the string for styling
     const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
     // add time preset if one does not match duration given in time range, keeping the list ordered by duration
@@ -199,12 +163,12 @@ export function TimeRangeControls({ heightPx, showTimeRangeSelector = true, show
             showRefreshInterval && !isAutoRefreshDisabled && /*#__PURE__*/ _jsx(InfoTooltip, {
                 description: TOOLTIP_TEXT.refreshInterval,
                 children: /*#__PURE__*/ _jsx(RefreshIntervalPicker, {
-                    timeOptions: DEFAULT_REFRESH_INTERVAL_OPTIONS,
+                    timeOptions: autoRefreshIntervalOptions,
                     value: /* TODO: There is a bug here which should be fixed in a proper way. (This is only a quick remedy)
                  display: 1m has the pastDuration of 60s. Initially (if the persisted value is 1m) when the page is loaded, instead of 60s, 1m is passed down.              
                  This only happens for 1m, because for other items the display and the pastDuration are the same.  Example 30s-30s
                  HERE The value MUST always be pastDuration, otherwise the component would not work as expected. 
-              */ DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i)=>i.value.pastDuration === refreshInterval) ? refreshInterval : DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i)=>i.display === refreshInterval)?.value.pastDuration,
+              */ autoRefreshIntervalOptions.some((i)=>i.value.pastDuration === refreshInterval) ? refreshInterval : autoRefreshIntervalOptions.find((i)=>i.display === refreshInterval)?.value.pastDuration,
                     onChange: handleRefreshIntervalChange,
                     height: height
                 })

package/dist/components/TimeRangeControls/TimeRangeControls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Stack } from '@mui/material';\nimport {\n  RefreshIntervalPicker,\n  InfoTooltip,\n  TimeOption,\n  ToolbarIconButton,\n  TimeRangeSelector,\n  TimeZoneOption,\n  getTimeZoneOptions,\n  buildRelativeTimeOption,\n} from '@perses-dev/components';\nimport { AbsoluteTimeRange, DurationString, parseDurationString, RelativeTimeRange } from '@perses-dev/spec';\nimport { milliseconds } from 'date-fns';\n// eslint-disable-next-line import/no-duplicates\nimport ZoomOut from 'mdi-material-ui/MinusCircleOutline';\n// eslint-disable-next-line import/no-duplicates\nimport ZoomIn from 'mdi-material-ui/PlusCircleOutline';\nimport RefreshIcon from 'mdi-material-ui/Refresh';\nimport { ReactElement, useCallback } from 'react';\n\nimport { TOOLTIP_TEXT } from '../../constants';\nimport {\n  useTimeRange,\n  useShowCustomTimeRangeSetting,\n  useTimeRangeOptionsSetting,\n  useShowZoomRangeSetting,\n  useDisableAutoRefreshSetting,\n} from '../../runtime';\nexport const DEFAULT_REFRESH_INTERVAL_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '0s' }, display: 'Off' },\n  { value: { pastDuration: '5s' }, display: '5s' },\n  { value: { pastDuration: '10s' }, display: '10s' },\n  { value: { pastDuration: '15s' }, display: '15s' },\n  { value: { pastDuration: '30s' }, display: '30s' },\n  { value: { pastDuration: '60s' }, display: '1m' },\n];\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n  // The controls look best at heights >= 28 pixels\n  heightPx?: number;\n  showTimeRangeSelector?: boolean;\n  showRefreshButton?: boolean;\n  showRefreshInterval?: boolean;\n  showCustomTimeRange?: boolean;\n  showZoomButtons?: boolean;\n  timePresets?: TimeOption[];\n  timeZone: string;\n  onTimeZoneChange: (timeZone: TimeZoneOption) => void;\n}\n\nexport function TimeRangeControls({\n  heightPx,\n  showTimeRangeSelector = true,\n  showRefreshButton = true,\n  showRefreshInterval = true,\n  showCustomTimeRange,\n  showZoomButtons = true,\n  timePresets,\n  timeZone,\n  onTimeZoneChange,\n}: TimeRangeControlsProps): ReactElement {\n  const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = useTimeRange();\n\n  const showCustomTimeRangeValue = useShowCustomTimeRangeSetting(showCustomTimeRange);\n  const showZoomInOutButtons = useShowZoomRangeSetting(showZoomButtons);\n  const isAutoRefreshDisabled = useDisableAutoRefreshSetting();\n  const timePresetsValue = useTimeRangeOptionsSetting(timePresets);\n\n  // Convert height to a string, then use the string for styling\n  const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;\n\n  // add time preset if one does not match duration given in time range, keeping the list ordered by duration\n  if (\n    'pastDuration' in timeRange &&\n    !timePresetsValue.some((option) => option.value.pastDuration === timeRange['pastDuration'])\n  ) {\n    const durationMs = milliseconds(parseDurationString(timeRange['pastDuration']));\n    const insertionIndex = timePresetsValue.findIndex(\n      (option) => milliseconds(parseDurationString(option.value.pastDuration)) > durationMs,\n    );\n    timePresetsValue.splice(\n      insertionIndex === -1 ? timePresetsValue.length : insertionIndex,\n      0,\n      buildRelativeTimeOption(timeRange['pastDuration']),\n    );\n  }\n\n  // set the new refresh interval both in the dashboard context & as query param\n  const handleRefreshIntervalChange = useCallback(\n    (duration: DurationString) => {\n      setRefreshInterval(duration);\n    },\n    [setRefreshInterval],\n  );\n\n  const fromDurationToMillis = (strDuration: string): number => {\n    const duration = parseDurationString(strDuration);\n    const millis =\n      ((duration.seconds ?? 0) +\n        (duration.minutes ?? 0) * 60 +\n        (duration.hours ?? 0) * 3600 +\n        (duration.days ?? 0) * 86400 +\n        (duration.weeks ?? 0) * 7 * 86400 +\n        (duration.months ?? 0) * 30.436875 * 86400 + // avg month duration is ok for zoom purposes\n        (duration.years ?? 0) * 365.2425 * 86400) * // avg year duration is ok for zoom purposes\n      1000; // to milliseconds\n    return millis;\n  };\n\n  // Function to double current time range, adding 50% before current start and 50% after current end\n  const doubleTimeRange = (): AbsoluteTimeRange => {\n    let newStart, newEnd, extendEndsBy;\n    const now = new Date();\n    if (Object.hasOwn(timeRange, 'start')) {\n      // current range is absolute\n      const absVal = timeRange as AbsoluteTimeRange;\n      extendEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 2; // half it to add 50% before current start and after current end\n      newStart = new Date(absVal.start.getTime() - extendEndsBy);\n      newEnd = new Date(absVal.end.getTime() + extendEndsBy);\n    } else {\n      // current range is relative\n      const relVal = timeRange as RelativeTimeRange;\n      extendEndsBy = fromDurationToMillis(relVal.pastDuration) / 2;\n      newEnd = typeof relVal.end === 'undefined' ? now : new Date(relVal.end.getTime() + extendEndsBy);\n      newStart = new Date(newEnd.getTime() - extendEndsBy * 4);\n    }\n    if (newEnd.getTime() > now.getTime()) {\n      // if the new computed end is in the future\n      newEnd = now;\n      newStart.setTime(now.getTime() - extendEndsBy * 4);\n    }\n    if (newStart.getTime() < 1) {\n      newStart.setTime(1);\n    }\n    return { start: newStart, end: newEnd };\n  };\n\n  // Function to half current time range, cutting 25% before current start and 25% after current end\n  const halfTimeRange = (): AbsoluteTimeRange => {\n    let newStart, newEnd;\n    if (Object.hasOwn(timeRange, 'start')) {\n      const absVal = timeRange as AbsoluteTimeRange;\n      const shrinkEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 4;\n      newStart = new Date(absVal.start.getTime() + shrinkEndsBy);\n      newEnd = new Date(absVal.end.getTime() - shrinkEndsBy);\n    } else {\n      const relVal = timeRange as RelativeTimeRange;\n      const shrinkEndsBy = fromDurationToMillis(relVal.pastDuration) / 4; // 25% of it to cut after current start and before current end\n      const endIsAbsolute = typeof relVal.end !== 'undefined';\n      newEnd = endIsAbsolute ? new Date(relVal.end!.getTime() - shrinkEndsBy) : new Date();\n      newStart = new Date(newEnd.getTime() - shrinkEndsBy * 2);\n    }\n    if (newStart.getTime() >= newEnd.getTime() - 1000) {\n      newStart.setTime(newEnd.getTime() - 1000);\n    }\n    return { start: newStart, end: newEnd };\n  };\n\n  const setHalfTimeRange = (): void => setTimeRange(halfTimeRange());\n  const setDoubleTimeRange = (): void => setTimeRange(doubleTimeRange());\n\n  const handleTimeZoneChange = useCallback(\n    (tz: TimeZoneOption) => {\n      onTimeZoneChange(tz);\n    },\n    [onTimeZoneChange],\n  );\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      {showTimeRangeSelector && (\n        <TimeRangeSelector\n          timeOptions={timePresetsValue}\n          value={timeRange}\n          onChange={setTimeRange}\n          height={height}\n          showCustomTimeRange={showCustomTimeRangeValue}\n          timeZone={timeZone}\n          timeZoneOptions={getTimeZoneOptions()}\n          onTimeZoneChange={handleTimeZoneChange}\n        />\n      )}\n      {showZoomInOutButtons && (\n        <InfoTooltip description={TOOLTIP_TEXT.zoomOut}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.zoomOut} onClick={setDoubleTimeRange} sx={{ height }}>\n            <ZoomOut />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showZoomInOutButtons && (\n        <InfoTooltip description={TOOLTIP_TEXT.zoomIn}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.zoomIn} onClick={setHalfTimeRange} sx={{ height }}>\n            <ZoomIn />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showRefreshButton && (\n        <InfoTooltip description={TOOLTIP_TEXT.refresh}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.refresh} onClick={refresh} sx={{ height }}>\n            <RefreshIcon />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showRefreshInterval && !isAutoRefreshDisabled && (\n        <InfoTooltip description={TOOLTIP_TEXT.refreshInterval}>\n          <RefreshIntervalPicker\n            timeOptions={DEFAULT_REFRESH_INTERVAL_OPTIONS}\n            value={\n              /* TODO: There is a bug here which should be fixed in a proper way. (This is only a quick remedy)\n                 display: 1m has the pastDuration of 60s. Initially (if the persisted value is 1m) when the page is loaded, instead of 60s, 1m is passed down.              \n                 This only happens for 1m, because for other items the display and the pastDuration are the same.  Example 30s-30s\n                 HERE The value MUST always be pastDuration, otherwise the component would not work as expected. \n              */\n              DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i) => i.value.pastDuration === refreshInterval)\n                ? refreshInterval\n                : DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i) => i.display === refreshInterval)?.value.pastDuration\n            }\n            onChange={handleRefreshIntervalChange}\n            height={height}\n          />\n        </InfoTooltip>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Stack","RefreshIntervalPicker","InfoTooltip","ToolbarIconButton","TimeRangeSelector","getTimeZoneOptions","buildRelativeTimeOption","parseDurationString","milliseconds","ZoomOut","ZoomIn","RefreshIcon","useCallback","TOOLTIP_TEXT","useTimeRange","useShowCustomTimeRangeSetting","useTimeRangeOptionsSetting","useShowZoomRangeSetting","useDisableAutoRefreshSetting","DEFAULT_REFRESH_INTERVAL_OPTIONS","value","pastDuration","display","DEFAULT_HEIGHT","TimeRangeControls","heightPx","showTimeRangeSelector","showRefreshButton","showRefreshInterval","showCustomTimeRange","showZoomButtons","timePresets","timeZone","onTimeZoneChange","timeRange","setTimeRange","refresh","refreshInterval","setRefreshInterval","showCustomTimeRangeValue","showZoomInOutButtons","isAutoRefreshDisabled","timePresetsValue","height","undefined","some","option","durationMs","insertionIndex","findIndex","splice","length","handleRefreshIntervalChange","duration","fromDurationToMillis","strDuration","millis","seconds","minutes","hours","days","weeks","months","years","doubleTimeRange","newStart","newEnd","extendEndsBy","now","Date","Object","hasOwn","absVal","end","getTime","start","relVal","setTime","halfTimeRange","shrinkEndsBy","endIsAbsolute","setHalfTimeRange","setDoubleTimeRange","handleTimeZoneChange","tz","direction","spacing","timeOptions","onChange","timeZoneOptions","description","zoomOut","aria-label","onClick","sx","zoomIn","i","find"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Stack } from '@mui/material';\nimport type { TimeOption, TimeZoneOption } from '@perses-dev/components';\nimport {\n  RefreshIntervalPicker,\n  InfoTooltip,\n  ToolbarIconButton,\n  TimeRangeSelector,\n  getTimeZoneOptions,\n  buildRelativeTimeOption,\n} from '@perses-dev/components';\nimport type { AbsoluteTimeRange, DurationString, RelativeTimeRange } from '@perses-dev/spec';\nimport { parseDurationString } from '@perses-dev/spec';\nimport { milliseconds } from 'date-fns';\n// eslint-disable-next-line import/no-duplicates\nimport ZoomOut from 'mdi-material-ui/MinusCircleOutline';\n// eslint-disable-next-line import/no-duplicates\nimport ZoomIn from 'mdi-material-ui/PlusCircleOutline';\nimport RefreshIcon from 'mdi-material-ui/Refresh';\nimport type { ReactElement } from 'react';\nimport { useCallback } from 'react';\n\nimport { TOOLTIP_TEXT } from '../../constants/user-interface-text';\nimport { useTimeRange } from '../../runtime/TimeRangeProvider/TimeRangeProvider';\nimport {\n  useShowCustomTimeRangeSetting,\n  useTimeRangeOptionsSetting,\n  useShowZoomRangeSetting,\n  useDisableAutoRefreshSetting,\n  useAutoRefreshIntervalsOptions,\n} from '../../runtime/TimeRangeProvider/TimeRangeSettingsProvider';\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n  // The controls look best at heights >= 28 pixels\n  heightPx?: number;\n  showTimeRangeSelector?: boolean;\n  showRefreshButton?: boolean;\n  showRefreshInterval?: boolean;\n  showCustomTimeRange?: boolean;\n  showZoomButtons?: boolean;\n  timePresets?: TimeOption[];\n  refreshIntervalOptions?: TimeOption[];\n  timeZone: string;\n  onTimeZoneChange: (timeZone: TimeZoneOption) => void;\n}\n\nexport function TimeRangeControls({\n  heightPx,\n  showTimeRangeSelector = true,\n  showRefreshButton = true,\n  showRefreshInterval = true,\n  showCustomTimeRange,\n  showZoomButtons = true,\n  timePresets,\n  timeZone,\n  refreshIntervalOptions,\n  onTimeZoneChange,\n}: TimeRangeControlsProps): ReactElement {\n  const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = useTimeRange();\n\n  const showCustomTimeRangeValue = useShowCustomTimeRangeSetting(showCustomTimeRange);\n  const showZoomInOutButtons = useShowZoomRangeSetting(showZoomButtons);\n  const isAutoRefreshDisabled = useDisableAutoRefreshSetting();\n  const timePresetsValue = useTimeRangeOptionsSetting(timePresets);\n  const autoRefreshIntervalOptions = useAutoRefreshIntervalsOptions(refreshIntervalOptions);\n\n  // Convert height to a string, then use the string for styling\n  const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;\n\n  // add time preset if one does not match duration given in time range, keeping the list ordered by duration\n  if (\n    'pastDuration' in timeRange &&\n    !timePresetsValue.some((option) => option.value.pastDuration === timeRange['pastDuration'])\n  ) {\n    const durationMs = milliseconds(parseDurationString(timeRange['pastDuration']));\n    const insertionIndex = timePresetsValue.findIndex(\n      (option) => milliseconds(parseDurationString(option.value.pastDuration)) > durationMs,\n    );\n    timePresetsValue.splice(\n      insertionIndex === -1 ? timePresetsValue.length : insertionIndex,\n      0,\n      buildRelativeTimeOption(timeRange['pastDuration']),\n    );\n  }\n\n  // set the new refresh interval both in the dashboard context & as query param\n  const handleRefreshIntervalChange = useCallback(\n    (duration: DurationString) => {\n      setRefreshInterval(duration);\n    },\n    [setRefreshInterval],\n  );\n\n  const fromDurationToMillis = (strDuration: string): number => {\n    const duration = parseDurationString(strDuration);\n    const millis =\n      ((duration.seconds ?? 0) +\n        (duration.minutes ?? 0) * 60 +\n        (duration.hours ?? 0) * 3600 +\n        (duration.days ?? 0) * 86400 +\n        (duration.weeks ?? 0) * 7 * 86400 +\n        (duration.months ?? 0) * 30.436875 * 86400 + // avg month duration is ok for zoom purposes\n        (duration.years ?? 0) * 365.2425 * 86400) * // avg year duration is ok for zoom purposes\n      1000; // to milliseconds\n    return millis;\n  };\n\n  // Function to double current time range, adding 50% before current start and 50% after current end\n  const doubleTimeRange = (): AbsoluteTimeRange => {\n    let newStart, newEnd, extendEndsBy;\n    const now = new Date();\n    if (Object.hasOwn(timeRange, 'start')) {\n      // current range is absolute\n      const absVal = timeRange as AbsoluteTimeRange;\n      extendEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 2; // half it to add 50% before current start and after current end\n      newStart = new Date(absVal.start.getTime() - extendEndsBy);\n      newEnd = new Date(absVal.end.getTime() + extendEndsBy);\n    } else {\n      // current range is relative\n      const relVal = timeRange as RelativeTimeRange;\n      extendEndsBy = fromDurationToMillis(relVal.pastDuration) / 2;\n      newEnd = typeof relVal.end === 'undefined' ? now : new Date(relVal.end.getTime() + extendEndsBy);\n      newStart = new Date(newEnd.getTime() - extendEndsBy * 4);\n    }\n    if (newEnd.getTime() > now.getTime()) {\n      // if the new computed end is in the future\n      newEnd = now;\n      newStart.setTime(now.getTime() - extendEndsBy * 4);\n    }\n    if (newStart.getTime() < 1) {\n      newStart.setTime(1);\n    }\n    return { start: newStart, end: newEnd };\n  };\n\n  // Function to half current time range, cutting 25% before current start and 25% after current end\n  const halfTimeRange = (): AbsoluteTimeRange => {\n    let newStart, newEnd;\n    if (Object.hasOwn(timeRange, 'start')) {\n      const absVal = timeRange as AbsoluteTimeRange;\n      const shrinkEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 4;\n      newStart = new Date(absVal.start.getTime() + shrinkEndsBy);\n      newEnd = new Date(absVal.end.getTime() - shrinkEndsBy);\n    } else {\n      const relVal = timeRange as RelativeTimeRange;\n      const shrinkEndsBy = fromDurationToMillis(relVal.pastDuration) / 4; // 25% of it to cut after current start and before current end\n      const endIsAbsolute = typeof relVal.end !== 'undefined';\n      newEnd = endIsAbsolute ? new Date(relVal.end!.getTime() - shrinkEndsBy) : new Date();\n      newStart = new Date(newEnd.getTime() - shrinkEndsBy * 2);\n    }\n    if (newStart.getTime() >= newEnd.getTime() - 1000) {\n      newStart.setTime(newEnd.getTime() - 1000);\n    }\n    return { start: newStart, end: newEnd };\n  };\n\n  const setHalfTimeRange = (): void => setTimeRange(halfTimeRange());\n  const setDoubleTimeRange = (): void => setTimeRange(doubleTimeRange());\n\n  const handleTimeZoneChange = useCallback(\n    (tz: TimeZoneOption) => {\n      onTimeZoneChange(tz);\n    },\n    [onTimeZoneChange],\n  );\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      {showTimeRangeSelector && (\n        <TimeRangeSelector\n          timeOptions={timePresetsValue}\n          value={timeRange}\n          onChange={setTimeRange}\n          height={height}\n          showCustomTimeRange={showCustomTimeRangeValue}\n          timeZone={timeZone}\n          timeZoneOptions={getTimeZoneOptions()}\n          onTimeZoneChange={handleTimeZoneChange}\n        />\n      )}\n      {showZoomInOutButtons && (\n        <InfoTooltip description={TOOLTIP_TEXT.zoomOut}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.zoomOut} onClick={setDoubleTimeRange} sx={{ height }}>\n            <ZoomOut />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showZoomInOutButtons && (\n        <InfoTooltip description={TOOLTIP_TEXT.zoomIn}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.zoomIn} onClick={setHalfTimeRange} sx={{ height }}>\n            <ZoomIn />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showRefreshButton && (\n        <InfoTooltip description={TOOLTIP_TEXT.refresh}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.refresh} onClick={refresh} sx={{ height }}>\n            <RefreshIcon />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showRefreshInterval && !isAutoRefreshDisabled && (\n        <InfoTooltip description={TOOLTIP_TEXT.refreshInterval}>\n          <RefreshIntervalPicker\n            timeOptions={autoRefreshIntervalOptions}\n            value={\n              /* TODO: There is a bug here which should be fixed in a proper way. (This is only a quick remedy)\n                 display: 1m has the pastDuration of 60s. Initially (if the persisted value is 1m) when the page is loaded, instead of 60s, 1m is passed down.              \n                 This only happens for 1m, because for other items the display and the pastDuration are the same.  Example 30s-30s\n                 HERE The value MUST always be pastDuration, otherwise the component would not work as expected. \n              */\n              autoRefreshIntervalOptions.some((i) => i.value.pastDuration === refreshInterval)\n                ? refreshInterval\n                : autoRefreshIntervalOptions.find((i) => i.display === refreshInterval)?.value.pastDuration\n            }\n            onChange={handleRefreshIntervalChange}\n            height={height}\n          />\n        </InfoTooltip>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Stack","RefreshIntervalPicker","InfoTooltip","ToolbarIconButton","TimeRangeSelector","getTimeZoneOptions","buildRelativeTimeOption","parseDurationString","milliseconds","ZoomOut","ZoomIn","RefreshIcon","useCallback","TOOLTIP_TEXT","useTimeRange","useShowCustomTimeRangeSetting","useTimeRangeOptionsSetting","useShowZoomRangeSetting","useDisableAutoRefreshSetting","useAutoRefreshIntervalsOptions","DEFAULT_HEIGHT","TimeRangeControls","heightPx","showTimeRangeSelector","showRefreshButton","showRefreshInterval","showCustomTimeRange","showZoomButtons","timePresets","timeZone","refreshIntervalOptions","onTimeZoneChange","timeRange","setTimeRange","refresh","refreshInterval","setRefreshInterval","showCustomTimeRangeValue","showZoomInOutButtons","isAutoRefreshDisabled","timePresetsValue","autoRefreshIntervalOptions","height","undefined","some","option","value","pastDuration","durationMs","insertionIndex","findIndex","splice","length","handleRefreshIntervalChange","duration","fromDurationToMillis","strDuration","millis","seconds","minutes","hours","days","weeks","months","years","doubleTimeRange","newStart","newEnd","extendEndsBy","now","Date","Object","hasOwn","absVal","end","getTime","start","relVal","setTime","halfTimeRange","shrinkEndsBy","endIsAbsolute","setHalfTimeRange","setDoubleTimeRange","handleTimeZoneChange","tz","direction","spacing","timeOptions","onChange","timeZoneOptions","description","zoomOut","aria-label","onClick","sx","zoomIn","i","find","display"],"mappings":"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"}

package/dist/components/TimeRangeControls/index.js

@@ -10,6 +10,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-export * from './TimeRangeControls';
+export * from "./TimeRangeControls.js";
 
 //# sourceMappingURL=index.js.map

package/dist/components/TimeRangeControls/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeRangeControls/index.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './TimeRangeControls';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,sBAAsB"}
+{"version":3,"sources":["../../../src/components/TimeRangeControls/index.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './TimeRangeControls';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,yBAAsB"}

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts

@@ -1,6 +1,6 @@
-import { Action } from '@perses-dev/client';
-import { VariableDefinition } from '@perses-dev/spec';
-import { DispatchWithoutAction, ReactElement } from 'react';
+import type { Action } from '@perses-dev/client';
+import type { VariableDefinition } from '@perses-dev/spec';
+import type { DispatchWithoutAction, ReactElement } from 'react';
 interface VariableEditorFormProps {
     initialVariableDefinition: VariableDefinition;
     action: Action;

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAS5C,OAAO,EAAE,kBAAkB,EAA0B,MAAM,kBAAkB,CAAC;AAE9E,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAyB,MAAM,OAAO,CAAC;AA+VnF,UAAU,uBAAuB;IAC/B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,yBAAyB,EACzB,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,GAAG,YAAY,CAoMxC"}
+{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AASjD,OAAO,KAAK,EAAE,kBAAkB,EAA0B,MAAM,kBAAkB,CAAC;AAEnF,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAkWjE,UAAU,uBAAuB;IAC/B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,yBAAyB,EACzB,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,GAAG,YAAY,CAoMxC"}

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js

@@ -11,17 +11,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Stack, Divider } from '@mui/material';
-import { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions, getSubmitText, getTitleAction } from '@perses-dev/components';
-import { useQueryClient } from '@tanstack/react-query';
-import { useCallback, useState } from 'react';
-import { Controller, FormProvider, useForm, useFormContext, useWatch } from 'react-hook-form';
-import { useValidationSchemas } from '../../../context';
-import { PluginEditor } from '../../PluginEditor';
-import { VARIABLE_TYPES } from '../variable-model';
-import { SORT_METHODS } from './variable-editor-form-model';
-import { VariableListPreview, VariablePreview } from './VariablePreview';
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Stack, Divider } from "@mui/material";
+import { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions, getSubmitText, getTitleAction } from "@perses-dev/components";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useState } from "react";
+import { Controller, FormProvider, useForm, useFormContext, useWatch } from "react-hook-form";
+import { useValidationSchemas } from "../../../context/index.js";
+import { PluginEditor } from "../../PluginEditor/index.js";
+import { VARIABLE_TYPES } from "../variable-model.js";
+import { SORT_METHODS } from "./variable-editor-form-model.js";
+import { VariableListPreview, VariablePreview } from "./VariablePreview.js";
 function FallbackPreview() {
     return /*#__PURE__*/ _jsx("div", {
         children: "Error previewing values"

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Stack, Divider } from '@mui/material';\nimport { Action } from '@perses-dev/client';\nimport {\n  DiscardChangesConfirmationDialog,\n  ErrorAlert,\n  ErrorBoundary,\n  FormActions,\n  getSubmitText,\n  getTitleAction,\n} from '@perses-dev/components';\nimport { VariableDefinition, ListVariableDefinition } from '@perses-dev/spec';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { DispatchWithoutAction, ReactElement, useCallback, useState } from 'react';\nimport { Control, Controller, FormProvider, SubmitHandler, useForm, useFormContext, useWatch } from 'react-hook-form';\n\nimport { useValidationSchemas } from '../../../context';\nimport { PluginEditor } from '../../PluginEditor';\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { SORT_METHODS, SortMethodName } from './variable-editor-form-model';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\n\nfunction FallbackPreview(): ReactElement {\n  return <div>Error previewing values</div>;\n}\n\ninterface KindVariableEditorFormProps {\n  action: Action;\n  control: Control<VariableDefinition>;\n}\n\nfunction TextVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n  return (\n    <>\n      <Typography py={1} variant=\"subtitle1\">\n        Text Options\n      </Typography>\n      <Stack spacing={2}>\n        <Controller\n          control={control}\n          name=\"spec.value\"\n          render={({ field, fieldState }) => (\n            <>\n              <Box>\n                <VariablePreview values={[field.value]} />\n              </Box>\n              <TextField\n                {...field}\n                label=\"Value\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                value={field.value ?? ''}\n                onChange={(event) => {\n                  field.onChange(event);\n                }}\n              />\n            </>\n          )}\n        />\n        <Controller\n          control={control}\n          name=\"spec.constant\"\n          render={({ field }) => (\n            <FormControlLabel\n              label=\"Constant\"\n              control={\n                <Switch\n                  {...field}\n                  checked={!!field.value}\n                  readOnly={action === 'read'}\n                  value={field.value ?? false}\n                  onChange={(event) => {\n                    if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                    field.onChange(event);\n                  }}\n                />\n              }\n            />\n          )}\n        />\n      </Stack>\n    </>\n  );\n}\n\nfunction ListVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n  const form = useFormContext<VariableDefinition>();\n  const queryClient = useQueryClient();\n\n  const values = form.getValues() as ListVariableDefinition;\n  /* We use `previewDefinition` to explicitly update the spec\n   * that will be used for preview when running query. The reason why we do this is to avoid\n   * having to re-fetch the values when the user is still editing the spec.\n   * Using structuredClone to not have reference issues with nested objects.\n   */\n  const [previewDefinition, setPreviewDefinition] = useState(structuredClone(values));\n\n  const handleRunQuery = useCallback(async () => {\n    if (JSON.stringify(previewDefinition) === JSON.stringify(values)) {\n      await queryClient.invalidateQueries({ queryKey: ['variable', previewDefinition] });\n    } else {\n      setPreviewDefinition(structuredClone(values));\n    }\n  }, [previewDefinition, queryClient, values]);\n\n  const plugin = useWatch<VariableDefinition, 'spec.plugin'>({ control, name: 'spec.plugin' });\n  const kind = plugin?.kind;\n  const pluginSpec = plugin?.spec;\n\n  const _allowAllValue = useWatch<VariableDefinition, 'spec.allowAllValue'>({\n    control: control,\n    name: 'spec.allowAllValue',\n  });\n\n  const _customAllValue = useWatch<VariableDefinition, 'spec.customAllValue'>({\n    control: control,\n    name: 'spec.customAllValue',\n  });\n\n  const sortMethod = useWatch<VariableDefinition, 'spec.sort'>({\n    control: control,\n    name: 'spec.sort',\n  }) as SortMethodName;\n\n  // When variable kind is selected we need to provide default values\n  // TODO: check if react-hook-form has a better way to do this\n  if (values.spec.allowAllValue === undefined) {\n    form.setValue('spec.allowAllValue', false);\n  }\n\n  if (values.spec.allowMultiple === undefined) {\n    form.setValue('spec.allowMultiple', false);\n  }\n\n  if (!values.spec.plugin) {\n    form.setValue('spec.plugin', { kind: 'StaticListVariable', spec: {} });\n  }\n\n  if (!values.spec.sort) {\n    form.setValue('spec.sort', 'none');\n  }\n\n  return (\n    <>\n      <Typography py={1} variant=\"subtitle1\">\n        List Options\n      </Typography>\n      <Stack spacing={2} mb={2}>\n        <Box>\n          <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewDefinition]}>\n            <VariableListPreview sortMethod={sortMethod} definition={previewDefinition} />\n          </ErrorBoundary>\n        </Box>\n        <Stack>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <Controller\n              control={control}\n              name=\"spec.plugin\"\n              render={({ field }) => {\n                return (\n                  <PluginEditor\n                    withRunQueryButton\n                    width=\"100%\"\n                    pluginTypes={['Variable']}\n                    pluginKindLabel=\"Source\"\n                    value={{\n                      selection: {\n                        type: 'Variable',\n                        kind: kind ?? 'StaticListVariable',\n                      },\n                      spec: pluginSpec ?? {},\n                    }}\n                    isReadonly={action === 'read'}\n                    onChange={(v) => {\n                      field.onChange({ kind: v.selection.kind, spec: v.spec });\n                    }}\n                    onRunQuery={handleRunQuery}\n                  />\n                );\n              }}\n            />\n          </ErrorBoundary>\n        </Stack>\n\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.capturingRegexp\"\n            render={({ field, fieldState }) => (\n              <TextField\n                {...field}\n                label=\"Capturing Regexp Filter\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                value={field.value ?? ''}\n                onChange={(event) => {\n                  if (event.target.value === '') {\n                    field.onChange(undefined);\n                  } else {\n                    field.onChange(event);\n                  }\n                }}\n                helperText={\n                  fieldState.error?.message\n                    ? fieldState.error.message\n                    : 'Optional, if you want to filter on captured result.'\n                }\n              />\n            )}\n          />\n        </Stack>\n\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.sort\"\n            render={({ field, fieldState }) => (\n              <TextField\n                select\n                {...field}\n                fullWidth\n                label=\"Sort\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                value={field.value ?? 'none'}\n                onChange={(event) => {\n                  field.onChange(event);\n                }}\n              >\n                {Object.keys(SORT_METHODS).map((key) => {\n                  if (!SORT_METHODS[key as SortMethodName]) return null;\n                  const { label } = SORT_METHODS[key as SortMethodName];\n                  return (\n                    <MenuItem key={key} value={key}>\n                      {label}\n                    </MenuItem>\n                  );\n                })}\n              </TextField>\n            )}\n          />\n        </Stack>\n      </Stack>\n\n      <Divider />\n\n      <Typography py={1} variant=\"subtitle1\">\n        Dropdown Options\n      </Typography>\n      <Stack spacing=\"2\">\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.allowMultiple\"\n            render={({ field }) => (\n              <FormControlLabel\n                label=\"Allow Multiple Values\"\n                control={\n                  <Switch\n                    {...field}\n                    checked={!!field.value}\n                    readOnly={action === 'read'}\n                    value={field.value ?? false}\n                    onChange={(event) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      field.onChange(event);\n                    }}\n                  />\n                }\n              />\n            )}\n          />\n          <Typography variant=\"caption\">Enables multiple values to be selected at the same time</Typography>\n        </Stack>\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.allowAllValue\"\n            render={({ field }) => (\n              <FormControlLabel\n                label=\"Allow All option\"\n                control={\n                  <Switch\n                    {...field}\n                    checked={!!field.value}\n                    readOnly={action === 'read'}\n                    value={field.value ?? false}\n                    onChange={(event) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      field.onChange(event);\n                    }}\n                  />\n                }\n              />\n            )}\n          />\n          <Typography mb={1} variant=\"caption\">\n            Enables an option to include all variable values\n          </Typography>\n          {_allowAllValue && (\n            <Stack spacing={1}>\n              <FormControlLabel\n                label=\"Use Custom All Value\"\n                control={\n                  <Switch\n                    checked={_customAllValue !== undefined}\n                    readOnly={action === 'read'}\n                    onChange={(event) => {\n                      if (action === 'read') return;\n                      const isEnabled = event.target.checked;\n                      if (isEnabled) {\n                        form.setValue('spec.customAllValue', '');\n                      } else {\n                        form.setValue('spec.customAllValue', undefined);\n                      }\n                    }}\n                  />\n                }\n              />\n              <Typography variant=\"caption\" sx={{ mt: -0.5 }}>\n                Enable to set a custom value when &quot;All&quot; is selected\n              </Typography>\n              {_customAllValue !== undefined && (\n                <Controller\n                  control={control}\n                  name=\"spec.customAllValue\"\n                  render={({ field, fieldState }) => (\n                    <TextField\n                      {...field}\n                      fullWidth\n                      label=\"Custom All Value\"\n                      InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                      InputProps={{\n                        readOnly: action === 'read',\n                      }}\n                      error={!!fieldState.error}\n                      helperText={fieldState.error?.message}\n                      value={field.value ?? ''}\n                      onChange={(event) => {\n                        field.onChange(event.target.value || '');\n                      }}\n                    />\n                  )}\n                />\n              )}\n            </Stack>\n          )}\n        </Stack>\n      </Stack>\n    </>\n  );\n}\n\ninterface VariableEditorFormProps {\n  initialVariableDefinition: VariableDefinition;\n  action: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSave: (def: VariableDefinition) => void;\n  onClose: () => void;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function VariableEditorForm({\n  initialVariableDefinition,\n  action,\n  isDraft,\n  isReadonly,\n  onActionChange,\n  onSave,\n  onClose,\n  onDelete,\n}: VariableEditorFormProps): ReactElement {\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const { variableEditorSchema } = useValidationSchemas();\n  const form = useForm<VariableDefinition>({\n    resolver: zodResolver(variableEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialVariableDefinition,\n  });\n\n  const kind = useWatch({ control: form.control, name: 'kind' });\n\n  function clearFormData(data: VariableDefinition): VariableDefinition {\n    const result = { ...data };\n    if (\n      result.spec.display?.name === undefined &&\n      result.spec.display?.description === undefined &&\n      result.spec.display?.hidden === undefined\n    ) {\n      delete result.spec.display;\n    }\n    return result;\n  }\n\n  const processForm: SubmitHandler<VariableDefinition> = (data: VariableDefinition) => {\n    // reset display attributes to undefined when empty, because we don't want to save empty strings\n    onSave(clearFormData(data));\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  function handleCancel(): void {\n    if (JSON.stringify(initialVariableDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Variable</Typography>\n        <FormActions\n          action={action}\n          submitText={submitText}\n          isReadonly={isReadonly}\n          isValid={form.formState.isValid}\n          onActionChange={onActionChange}\n          onSubmit={form.handleSubmit(processForm)}\n          onDelete={onDelete}\n          onCancel={handleCancel}\n        />\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Display Label\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Description\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"kind\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  select\n                  {...field}\n                  fullWidth\n                  label=\"Type\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? 'TextVariable'}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                >\n                  {VARIABLE_TYPES.map((v) => (\n                    <MenuItem key={v.kind} value={v.kind}>\n                      {v.label}\n                    </MenuItem>\n                  ))}\n                </TextField>\n              )}\n            />\n          </Grid>\n        </Grid>\n\n        <Divider />\n\n        {kind === 'TextVariable' && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <TextVariableEditorForm action={action} control={form.control} />\n          </ErrorBoundary>\n        )}\n        {kind === 'ListVariable' && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <ListVariableEditorForm action={action} control={form.control} />\n          </ErrorBoundary>\n        )}\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard these changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => {\n          setDiscardDialogOpened(false);\n        }}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["zodResolver","Box","Typography","Switch","TextField","Grid","FormControlLabel","MenuItem","Stack","Divider","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","FormActions","getSubmitText","getTitleAction","useQueryClient","useCallback","useState","Controller","FormProvider","useForm","useFormContext","useWatch","useValidationSchemas","PluginEditor","VARIABLE_TYPES","SORT_METHODS","VariableListPreview","VariablePreview","FallbackPreview","div","TextVariableEditorForm","action","control","py","variant","spacing","name","render","field","fieldState","values","value","label","InputLabelProps","shrink","undefined","InputProps","readOnly","error","helperText","message","onChange","event","checked","ListVariableEditorForm","form","queryClient","getValues","previewDefinition","setPreviewDefinition","structuredClone","handleRunQuery","JSON","stringify","invalidateQueries","queryKey","plugin","kind","pluginSpec","spec","_allowAllValue","_customAllValue","sortMethod","allowAllValue","setValue","allowMultiple","sort","mb","FallbackComponent","resetKeys","definition","withRunQueryButton","width","pluginTypes","pluginKindLabel","selection","type","isReadonly","v","onRunQuery","target","select","fullWidth","Object","keys","map","key","isEnabled","sx","mt","VariableEditorForm","initialVariableDefinition","isDraft","onActionChange","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","variableEditorSchema","resolver","mode","defaultValues","clearFormData","data","result","display","description","hidden","processForm","handleCancel","alignItems","padding","theme","borderBottom","palette","divider","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","item","xs","required","disabled","isOpen","onDiscardChanges"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Stack, Divider } from '@mui/material';\nimport type { Action } from '@perses-dev/client';\nimport {\n  DiscardChangesConfirmationDialog,\n  ErrorAlert,\n  ErrorBoundary,\n  FormActions,\n  getSubmitText,\n  getTitleAction,\n} from '@perses-dev/components';\nimport type { VariableDefinition, ListVariableDefinition } from '@perses-dev/spec';\nimport { useQueryClient } from '@tanstack/react-query';\nimport type { DispatchWithoutAction, ReactElement } from 'react';\nimport { useCallback, useState } from 'react';\nimport type { Control, SubmitHandler } from 'react-hook-form';\nimport { Controller, FormProvider, useForm, useFormContext, useWatch } from 'react-hook-form';\n\nimport { useValidationSchemas } from '../../../context';\nimport { PluginEditor } from '../../PluginEditor';\nimport { VARIABLE_TYPES } from '../variable-model';\nimport type { SortMethodName } from './variable-editor-form-model';\nimport { SORT_METHODS } from './variable-editor-form-model';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\n\nfunction FallbackPreview(): ReactElement {\n  return <div>Error previewing values</div>;\n}\n\ninterface KindVariableEditorFormProps {\n  action: Action;\n  control: Control<VariableDefinition>;\n}\n\nfunction TextVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n  return (\n    <>\n      <Typography py={1} variant=\"subtitle1\">\n        Text Options\n      </Typography>\n      <Stack spacing={2}>\n        <Controller\n          control={control}\n          name=\"spec.value\"\n          render={({ field, fieldState }) => (\n            <>\n              <Box>\n                <VariablePreview values={[field.value]} />\n              </Box>\n              <TextField\n                {...field}\n                label=\"Value\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                value={field.value ?? ''}\n                onChange={(event) => {\n                  field.onChange(event);\n                }}\n              />\n            </>\n          )}\n        />\n        <Controller\n          control={control}\n          name=\"spec.constant\"\n          render={({ field }) => (\n            <FormControlLabel\n              label=\"Constant\"\n              control={\n                <Switch\n                  {...field}\n                  checked={!!field.value}\n                  readOnly={action === 'read'}\n                  value={field.value ?? false}\n                  onChange={(event) => {\n                    if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                    field.onChange(event);\n                  }}\n                />\n              }\n            />\n          )}\n        />\n      </Stack>\n    </>\n  );\n}\n\nfunction ListVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n  const form = useFormContext<VariableDefinition>();\n  const queryClient = useQueryClient();\n\n  const values = form.getValues() as ListVariableDefinition;\n  /* We use `previewDefinition` to explicitly update the spec\n   * that will be used for preview when running query. The reason why we do this is to avoid\n   * having to re-fetch the values when the user is still editing the spec.\n   * Using structuredClone to not have reference issues with nested objects.\n   */\n  const [previewDefinition, setPreviewDefinition] = useState(structuredClone(values));\n\n  const handleRunQuery = useCallback(async () => {\n    if (JSON.stringify(previewDefinition) === JSON.stringify(values)) {\n      await queryClient.invalidateQueries({ queryKey: ['variable', previewDefinition] });\n    } else {\n      setPreviewDefinition(structuredClone(values));\n    }\n  }, [previewDefinition, queryClient, values]);\n\n  const plugin = useWatch<VariableDefinition, 'spec.plugin'>({ control, name: 'spec.plugin' });\n  const kind = plugin?.kind;\n  const pluginSpec = plugin?.spec;\n\n  const _allowAllValue = useWatch<VariableDefinition, 'spec.allowAllValue'>({\n    control: control,\n    name: 'spec.allowAllValue',\n  });\n\n  const _customAllValue = useWatch<VariableDefinition, 'spec.customAllValue'>({\n    control: control,\n    name: 'spec.customAllValue',\n  });\n\n  const sortMethod = useWatch<VariableDefinition, 'spec.sort'>({\n    control: control,\n    name: 'spec.sort',\n  }) as SortMethodName;\n\n  // When variable kind is selected we need to provide default values\n  // TODO: check if react-hook-form has a better way to do this\n  if (values.spec.allowAllValue === undefined) {\n    form.setValue('spec.allowAllValue', false);\n  }\n\n  if (values.spec.allowMultiple === undefined) {\n    form.setValue('spec.allowMultiple', false);\n  }\n\n  if (!values.spec.plugin) {\n    form.setValue('spec.plugin', { kind: 'StaticListVariable', spec: {} });\n  }\n\n  if (!values.spec.sort) {\n    form.setValue('spec.sort', 'none');\n  }\n\n  return (\n    <>\n      <Typography py={1} variant=\"subtitle1\">\n        List Options\n      </Typography>\n      <Stack spacing={2} mb={2}>\n        <Box>\n          <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewDefinition]}>\n            <VariableListPreview sortMethod={sortMethod} definition={previewDefinition} />\n          </ErrorBoundary>\n        </Box>\n        <Stack>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <Controller\n              control={control}\n              name=\"spec.plugin\"\n              render={({ field }) => {\n                return (\n                  <PluginEditor\n                    withRunQueryButton\n                    width=\"100%\"\n                    pluginTypes={['Variable']}\n                    pluginKindLabel=\"Source\"\n                    value={{\n                      selection: {\n                        type: 'Variable',\n                        kind: kind ?? 'StaticListVariable',\n                      },\n                      spec: pluginSpec ?? {},\n                    }}\n                    isReadonly={action === 'read'}\n                    onChange={(v) => {\n                      field.onChange({ kind: v.selection.kind, spec: v.spec });\n                    }}\n                    onRunQuery={handleRunQuery}\n                  />\n                );\n              }}\n            />\n          </ErrorBoundary>\n        </Stack>\n\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.capturingRegexp\"\n            render={({ field, fieldState }) => (\n              <TextField\n                {...field}\n                label=\"Capturing Regexp Filter\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                value={field.value ?? ''}\n                onChange={(event) => {\n                  if (event.target.value === '') {\n                    field.onChange(undefined);\n                  } else {\n                    field.onChange(event);\n                  }\n                }}\n                helperText={\n                  fieldState.error?.message\n                    ? fieldState.error.message\n                    : 'Optional, if you want to filter on captured result.'\n                }\n              />\n            )}\n          />\n        </Stack>\n\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.sort\"\n            render={({ field, fieldState }) => (\n              <TextField\n                select\n                {...field}\n                fullWidth\n                label=\"Sort\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                value={field.value ?? 'none'}\n                onChange={(event) => {\n                  field.onChange(event);\n                }}\n              >\n                {Object.keys(SORT_METHODS).map((key) => {\n                  if (!SORT_METHODS[key as SortMethodName]) return null;\n                  const { label } = SORT_METHODS[key as SortMethodName];\n                  return (\n                    <MenuItem key={key} value={key}>\n                      {label}\n                    </MenuItem>\n                  );\n                })}\n              </TextField>\n            )}\n          />\n        </Stack>\n      </Stack>\n\n      <Divider />\n\n      <Typography py={1} variant=\"subtitle1\">\n        Dropdown Options\n      </Typography>\n      <Stack spacing=\"2\">\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.allowMultiple\"\n            render={({ field }) => (\n              <FormControlLabel\n                label=\"Allow Multiple Values\"\n                control={\n                  <Switch\n                    {...field}\n                    checked={!!field.value}\n                    readOnly={action === 'read'}\n                    value={field.value ?? false}\n                    onChange={(event) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      field.onChange(event);\n                    }}\n                  />\n                }\n              />\n            )}\n          />\n          <Typography variant=\"caption\">Enables multiple values to be selected at the same time</Typography>\n        </Stack>\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.allowAllValue\"\n            render={({ field }) => (\n              <FormControlLabel\n                label=\"Allow All option\"\n                control={\n                  <Switch\n                    {...field}\n                    checked={!!field.value}\n                    readOnly={action === 'read'}\n                    value={field.value ?? false}\n                    onChange={(event) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      field.onChange(event);\n                    }}\n                  />\n                }\n              />\n            )}\n          />\n          <Typography mb={1} variant=\"caption\">\n            Enables an option to include all variable values\n          </Typography>\n          {_allowAllValue && (\n            <Stack spacing={1}>\n              <FormControlLabel\n                label=\"Use Custom All Value\"\n                control={\n                  <Switch\n                    checked={_customAllValue !== undefined}\n                    readOnly={action === 'read'}\n                    onChange={(event) => {\n                      if (action === 'read') return;\n                      const isEnabled = event.target.checked;\n                      if (isEnabled) {\n                        form.setValue('spec.customAllValue', '');\n                      } else {\n                        form.setValue('spec.customAllValue', undefined);\n                      }\n                    }}\n                  />\n                }\n              />\n              <Typography variant=\"caption\" sx={{ mt: -0.5 }}>\n                Enable to set a custom value when &quot;All&quot; is selected\n              </Typography>\n              {_customAllValue !== undefined && (\n                <Controller\n                  control={control}\n                  name=\"spec.customAllValue\"\n                  render={({ field, fieldState }) => (\n                    <TextField\n                      {...field}\n                      fullWidth\n                      label=\"Custom All Value\"\n                      InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                      InputProps={{\n                        readOnly: action === 'read',\n                      }}\n                      error={!!fieldState.error}\n                      helperText={fieldState.error?.message}\n                      value={field.value ?? ''}\n                      onChange={(event) => {\n                        field.onChange(event.target.value || '');\n                      }}\n                    />\n                  )}\n                />\n              )}\n            </Stack>\n          )}\n        </Stack>\n      </Stack>\n    </>\n  );\n}\n\ninterface VariableEditorFormProps {\n  initialVariableDefinition: VariableDefinition;\n  action: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSave: (def: VariableDefinition) => void;\n  onClose: () => void;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function VariableEditorForm({\n  initialVariableDefinition,\n  action,\n  isDraft,\n  isReadonly,\n  onActionChange,\n  onSave,\n  onClose,\n  onDelete,\n}: VariableEditorFormProps): ReactElement {\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const { variableEditorSchema } = useValidationSchemas();\n  const form = useForm<VariableDefinition>({\n    resolver: zodResolver(variableEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialVariableDefinition,\n  });\n\n  const kind = useWatch({ control: form.control, name: 'kind' });\n\n  function clearFormData(data: VariableDefinition): VariableDefinition {\n    const result = { ...data };\n    if (\n      result.spec.display?.name === undefined &&\n      result.spec.display?.description === undefined &&\n      result.spec.display?.hidden === undefined\n    ) {\n      delete result.spec.display;\n    }\n    return result;\n  }\n\n  const processForm: SubmitHandler<VariableDefinition> = (data: VariableDefinition) => {\n    // reset display attributes to undefined when empty, because we don't want to save empty strings\n    onSave(clearFormData(data));\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  function handleCancel(): void {\n    if (JSON.stringify(initialVariableDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Variable</Typography>\n        <FormActions\n          action={action}\n          submitText={submitText}\n          isReadonly={isReadonly}\n          isValid={form.formState.isValid}\n          onActionChange={onActionChange}\n          onSubmit={form.handleSubmit(processForm)}\n          onDelete={onDelete}\n          onCancel={handleCancel}\n        />\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Display Label\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Description\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"kind\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  select\n                  {...field}\n                  fullWidth\n                  label=\"Type\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? 'TextVariable'}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                >\n                  {VARIABLE_TYPES.map((v) => (\n                    <MenuItem key={v.kind} value={v.kind}>\n                      {v.label}\n                    </MenuItem>\n                  ))}\n                </TextField>\n              )}\n            />\n          </Grid>\n        </Grid>\n\n        <Divider />\n\n        {kind === 'TextVariable' && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <TextVariableEditorForm action={action} control={form.control} />\n          </ErrorBoundary>\n        )}\n        {kind === 'ListVariable' && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <ListVariableEditorForm action={action} control={form.control} />\n          </ErrorBoundary>\n        )}\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard these changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => {\n          setDiscardDialogOpened(false);\n        }}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["zodResolver","Box","Typography","Switch","TextField","Grid","FormControlLabel","MenuItem","Stack","Divider","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","FormActions","getSubmitText","getTitleAction","useQueryClient","useCallback","useState","Controller","FormProvider","useForm","useFormContext","useWatch","useValidationSchemas","PluginEditor","VARIABLE_TYPES","SORT_METHODS","VariableListPreview","VariablePreview","FallbackPreview","div","TextVariableEditorForm","action","control","py","variant","spacing","name","render","field","fieldState","values","value","label","InputLabelProps","shrink","undefined","InputProps","readOnly","error","helperText","message","onChange","event","checked","ListVariableEditorForm","form","queryClient","getValues","previewDefinition","setPreviewDefinition","structuredClone","handleRunQuery","JSON","stringify","invalidateQueries","queryKey","plugin","kind","pluginSpec","spec","_allowAllValue","_customAllValue","sortMethod","allowAllValue","setValue","allowMultiple","sort","mb","FallbackComponent","resetKeys","definition","withRunQueryButton","width","pluginTypes","pluginKindLabel","selection","type","isReadonly","v","onRunQuery","target","select","fullWidth","Object","keys","map","key","isEnabled","sx","mt","VariableEditorForm","initialVariableDefinition","isDraft","onActionChange","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","variableEditorSchema","resolver","mode","defaultValues","clearFormData","data","result","display","description","hidden","processForm","handleCancel","alignItems","padding","theme","borderBottom","palette","divider","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","item","xs","required","disabled","isOpen","onDiscardChanges"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,WAAW,QAAQ,0BAA0B;AACtD,SAASC,GAAG,EAAEC,UAAU,EAAEC,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,QAAQ,gBAAgB;AAErH,SACEC,gCAAgC,EAChCC,UAAU,EACVC,aAAa,EACbC,WAAW,EACXC,aAAa,EACbC,cAAc,QACT,yBAAyB;AAEhC,SAASC,cAAc,QAAQ,wBAAwB;AAEvD,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAE9C,SAASC,UAAU,EAAEC,YAAY,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,kBAAkB;AAE9F,SAASC,oBAAoB,QAAQ,4BAAmB;AACxD,SAASC,YAAY,QAAQ,8BAAqB;AAClD,SAASC,cAAc,QAAQ,uBAAoB;AAEnD,SAASC,YAAY,QAAQ,kCAA+B;AAC5D,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,uBAAoB;AAEzE,SAASC;IACP,qBAAO,KAACC;kBAAI;;AACd;AAOA,SAASC,uBAAuB,EAAEC,MAAM,EAAEC,OAAO,EAA+B;IAC9E,qBACE;;0BACE,KAAChC;gBAAWiC,IAAI;gBAAGC,SAAQ;0BAAY;;0BAGvC,MAAC5B;gBAAM6B,SAAS;;kCACd,KAAClB;wBACCe,SAASA;wBACTI,MAAK;wBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B;;kDACE,KAACxC;kDACC,cAAA,KAAC4B;4CAAgBa,QAAQ;gDAACF,MAAMG,KAAK;6CAAC;;;kDAExC,KAACvC;wCACE,GAAGoC,KAAK;wCACTI,OAAM;wCACNC,iBAAiB;4CAAEC,QAAQb,WAAW,SAAS,OAAOc;wCAAU;wCAChEC,YAAY;4CACVC,UAAUhB,WAAW;wCACvB;wCACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;wCACzBC,YAAYV,WAAWS,KAAK,EAAEE;wCAC9BT,OAAOH,MAAMG,KAAK,IAAI;wCACtBU,UAAU,CAACC;4CACTd,MAAMa,QAAQ,CAACC;wCACjB;;;;;kCAKR,KAACnC;wBACCe,SAASA;wBACTI,MAAK;wBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAAClC;gCACCsC,OAAM;gCACNV,uBACE,KAAC/B;oCACE,GAAGqC,KAAK;oCACTe,SAAS,CAAC,CAACf,MAAMG,KAAK;oCACtBM,UAAUhB,WAAW;oCACrBU,OAAOH,MAAMG,KAAK,IAAI;oCACtBU,UAAU,CAACC;wCACT,IAAIrB,WAAW,QAAQ,QAAQ,oDAAoD;wCACnFO,MAAMa,QAAQ,CAACC;oCACjB;;;;;;;;AASlB;AAEA,SAASE,uBAAuB,EAAEvB,MAAM,EAAEC,OAAO,EAA+B;IAC9E,MAAMuB,OAAOnC;IACb,MAAMoC,cAAc1C;IAEpB,MAAM0B,SAASe,KAAKE,SAAS;IAC7B;;;;GAIC,GACD,MAAM,CAACC,mBAAmBC,qBAAqB,GAAG3C,SAAS4C,gBAAgBpB;IAE3E,MAAMqB,iBAAiB9C,YAAY;QACjC,IAAI+C,KAAKC,SAAS,CAACL,uBAAuBI,KAAKC,SAAS,CAACvB,SAAS;YAChE,MAAMgB,YAAYQ,iBAAiB,CAAC;gBAAEC,UAAU;oBAAC;oBAAYP;iBAAkB;YAAC;QAClF,OAAO;YACLC,qBAAqBC,gBAAgBpB;QACvC;IACF,GAAG;QAACkB;QAAmBF;QAAahB;KAAO;IAE3C,MAAM0B,SAAS7C,SAA4C;QAAEW;QAASI,MAAM;IAAc;IAC1F,MAAM+B,OAAOD,QAAQC;IACrB,MAAMC,aAAaF,QAAQG;IAE3B,MAAMC,iBAAiBjD,SAAmD;QACxEW,SAASA;QACTI,MAAM;IACR;IAEA,MAAMmC,kBAAkBlD,SAAoD;QAC1EW,SAASA;QACTI,MAAM;IACR;IAEA,MAAMoC,aAAanD,SAA0C;QAC3DW,SAASA;QACTI,MAAM;IACR;IAEA,mEAAmE;IACnE,6DAA6D;IAC7D,IAAII,OAAO6B,IAAI,CAACI,aAAa,KAAK5B,WAAW;QAC3CU,KAAKmB,QAAQ,CAAC,sBAAsB;IACtC;IAEA,IAAIlC,OAAO6B,IAAI,CAACM,aAAa,KAAK9B,WAAW;QAC3CU,KAAKmB,QAAQ,CAAC,sBAAsB;IACtC;IAEA,IAAI,CAAClC,OAAO6B,IAAI,CAACH,MAAM,EAAE;QACvBX,KAAKmB,QAAQ,CAAC,eAAe;YAAEP,MAAM;YAAsBE,MAAM,CAAC;QAAE;IACtE;IAEA,IAAI,CAAC7B,OAAO6B,IAAI,CAACO,IAAI,EAAE;QACrBrB,KAAKmB,QAAQ,CAAC,aAAa;IAC7B;IAEA,qBACE;;0BACE,KAAC1E;gBAAWiC,IAAI;gBAAGC,SAAQ;0BAAY;;0BAGvC,MAAC5B;gBAAM6B,SAAS;gBAAG0C,IAAI;;kCACrB,KAAC9E;kCACC,cAAA,KAACW;4BAAcoE,mBAAmBlD;4BAAiBmD,WAAW;gCAACrB;6BAAkB;sCAC/E,cAAA,KAAChC;gCAAoB8C,YAAYA;gCAAYQ,YAAYtB;;;;kCAG7D,KAACpD;kCACC,cAAA,KAACI;4BAAcoE,mBAAmBrE;sCAChC,cAAA,KAACQ;gCACCe,SAASA;gCACTI,MAAK;gCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE;oCAChB,qBACE,KAACf;wCACC0D,kBAAkB;wCAClBC,OAAM;wCACNC,aAAa;4CAAC;yCAAW;wCACzBC,iBAAgB;wCAChB3C,OAAO;4CACL4C,WAAW;gDACTC,MAAM;gDACNnB,MAAMA,QAAQ;4CAChB;4CACAE,MAAMD,cAAc,CAAC;wCACvB;wCACAmB,YAAYxD,WAAW;wCACvBoB,UAAU,CAACqC;4CACTlD,MAAMa,QAAQ,CAAC;gDAAEgB,MAAMqB,EAAEH,SAAS,CAAClB,IAAI;gDAAEE,MAAMmB,EAAEnB,IAAI;4CAAC;wCACxD;wCACAoB,YAAY5B;;gCAGlB;;;;kCAKN,KAACvD;kCACC,cAAA,KAACW;4BACCe,SAASA;4BACTI,MAAK;4BACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACrC;oCACE,GAAGoC,KAAK;oCACTI,OAAM;oCACNC,iBAAiB;wCAAEC,QAAQb,WAAW,SAAS,OAAOc;oCAAU;oCAChEC,YAAY;wCACVC,UAAUhB,WAAW;oCACvB;oCACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;oCACzBP,OAAOH,MAAMG,KAAK,IAAI;oCACtBU,UAAU,CAACC;wCACT,IAAIA,MAAMsC,MAAM,CAACjD,KAAK,KAAK,IAAI;4CAC7BH,MAAMa,QAAQ,CAACN;wCACjB,OAAO;4CACLP,MAAMa,QAAQ,CAACC;wCACjB;oCACF;oCACAH,YACEV,WAAWS,KAAK,EAAEE,UACdX,WAAWS,KAAK,CAACE,OAAO,GACxB;;;;kCAOd,KAAC5C;kCACC,cAAA,KAACW;4BACCe,SAASA;4BACTI,MAAK;4BACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACrC;oCACCyF,MAAM;oCACL,GAAGrD,KAAK;oCACTsD,SAAS;oCACTlD,OAAM;oCACNC,iBAAiB;wCAAEC,QAAQb,WAAW,SAAS,OAAOc;oCAAU;oCAChEC,YAAY;wCACVC,UAAUhB,WAAW;oCACvB;oCACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;oCACzBC,YAAYV,WAAWS,KAAK,EAAEE;oCAC9BT,OAAOH,MAAMG,KAAK,IAAI;oCACtBU,UAAU,CAACC;wCACTd,MAAMa,QAAQ,CAACC;oCACjB;8CAECyC,OAAOC,IAAI,CAACrE,cAAcsE,GAAG,CAAC,CAACC;wCAC9B,IAAI,CAACvE,YAAY,CAACuE,IAAsB,EAAE,OAAO;wCACjD,MAAM,EAAEtD,KAAK,EAAE,GAAGjB,YAAY,CAACuE,IAAsB;wCACrD,qBACE,KAAC3F;4CAAmBoC,OAAOuD;sDACxBtD;2CADYsD;oCAInB;;;;;;0BAOV,KAACzF;0BAED,KAACP;gBAAWiC,IAAI;gBAAGC,SAAQ;0BAAY;;0BAGvC,MAAC5B;gBAAM6B,SAAQ;;kCACb,MAAC7B;;0CACC,KAACW;gCACCe,SAASA;gCACTI,MAAK;gCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAAClC;wCACCsC,OAAM;wCACNV,uBACE,KAAC/B;4CACE,GAAGqC,KAAK;4CACTe,SAAS,CAAC,CAACf,MAAMG,KAAK;4CACtBM,UAAUhB,WAAW;4CACrBU,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACT,IAAIrB,WAAW,QAAQ,QAAQ,oDAAoD;gDACnFO,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAMV,KAACpD;gCAAWkC,SAAQ;0CAAU;;;;kCAEhC,MAAC5B;;0CACC,KAACW;gCACCe,SAASA;gCACTI,MAAK;gCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAAClC;wCACCsC,OAAM;wCACNV,uBACE,KAAC/B;4CACE,GAAGqC,KAAK;4CACTe,SAAS,CAAC,CAACf,MAAMG,KAAK;4CACtBM,UAAUhB,WAAW;4CACrBU,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACT,IAAIrB,WAAW,QAAQ,QAAQ,oDAAoD;gDACnFO,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAMV,KAACpD;gCAAW6E,IAAI;gCAAG3C,SAAQ;0CAAU;;4BAGpCoC,gCACC,MAAChE;gCAAM6B,SAAS;;kDACd,KAAC/B;wCACCsC,OAAM;wCACNV,uBACE,KAAC/B;4CACCoD,SAASkB,oBAAoB1B;4CAC7BE,UAAUhB,WAAW;4CACrBoB,UAAU,CAACC;gDACT,IAAIrB,WAAW,QAAQ;gDACvB,MAAMkE,YAAY7C,MAAMsC,MAAM,CAACrC,OAAO;gDACtC,IAAI4C,WAAW;oDACb1C,KAAKmB,QAAQ,CAAC,uBAAuB;gDACvC,OAAO;oDACLnB,KAAKmB,QAAQ,CAAC,uBAAuB7B;gDACvC;4CACF;;;kDAIN,KAAC7C;wCAAWkC,SAAQ;wCAAUgE,IAAI;4CAAEC,IAAI,CAAC;wCAAI;kDAAG;;oCAG/C5B,oBAAoB1B,2BACnB,KAAC5B;wCACCe,SAASA;wCACTI,MAAK;wCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACrC;gDACE,GAAGoC,KAAK;gDACTsD,SAAS;gDACTlD,OAAM;gDACNC,iBAAiB;oDAAEC,QAAQb,WAAW,SAAS,OAAOc;gDAAU;gDAChEC,YAAY;oDACVC,UAAUhB,WAAW;gDACvB;gDACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;gDACzBC,YAAYV,WAAWS,KAAK,EAAEE;gDAC9BT,OAAOH,MAAMG,KAAK,IAAI;gDACtBU,UAAU,CAACC;oDACTd,MAAMa,QAAQ,CAACC,MAAMsC,MAAM,CAACjD,KAAK,IAAI;gDACvC;;;;;;;;;;;AAWtB;AAaA,OAAO,SAAS2D,mBAAmB,EACjCC,yBAAyB,EACzBtE,MAAM,EACNuE,OAAO,EACPf,UAAU,EACVgB,cAAc,EACdC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACgB;IACxB,MAAM,CAACC,uBAAuBC,uBAAuB,GAAG5F,SAAkB;IAC1E,MAAM6F,cAAchG,eAAekB,QAAQuE;IAC3C,MAAMQ,aAAalG,cAAcmB,QAAQuE;IAEzC,MAAM,EAAES,oBAAoB,EAAE,GAAGzF;IACjC,MAAMiC,OAAOpC,QAA4B;QACvC6F,UAAUlH,YAAYiH;QACtBE,MAAM;QACNC,eAAeb;IACjB;IAEA,MAAMlC,OAAO9C,SAAS;QAAEW,SAASuB,KAAKvB,OAAO;QAAEI,MAAM;IAAO;IAE5D,SAAS+E,cAAcC,IAAwB;QAC7C,MAAMC,SAAS;YAAE,GAAGD,IAAI;QAAC;QACzB,IACEC,OAAOhD,IAAI,CAACiD,OAAO,EAAElF,SAASS,aAC9BwE,OAAOhD,IAAI,CAACiD,OAAO,EAAEC,gBAAgB1E,aACrCwE,OAAOhD,IAAI,CAACiD,OAAO,EAAEE,WAAW3E,WAChC;YACA,OAAOwE,OAAOhD,IAAI,CAACiD,OAAO;QAC5B;QACA,OAAOD;IACT;IAEA,MAAMI,cAAiD,CAACL;QACtD,gGAAgG;QAChGZ,OAAOW,cAAcC;IACvB;IAEA,oDAAoD;IACpD,4CAA4C;IAC5C,uDAAuD;IACvD,gDAAgD;IAChD,SAASM;QACP,IAAI5D,KAAKC,SAAS,CAACsC,+BAA+BvC,KAAKC,SAAS,CAACoD,cAAc5D,KAAKE,SAAS,MAAM;YACjGmD,uBAAuB;QACzB,OAAO;YACLH;QACF;IACF;IAEA,qBACE,MAACvF;QAAc,GAAGqC,IAAI;;0BACpB,MAACxD;gBACCmG,IAAI;oBACFoB,SAAS;oBACTK,YAAY;oBACZC,SAAS,CAACC,QAAUA,MAAM1F,OAAO,CAAC,GAAG;oBACrC2F,cAAc,CAACD,QAAU,CAAC,UAAU,EAAEA,MAAME,OAAO,CAACC,OAAO,EAAE;gBAC/D;;kCAEA,MAAChI;wBAAWkC,SAAQ;;4BAAM2E;4BAAY;;;kCACtC,KAAClG;wBACCoB,QAAQA;wBACR+E,YAAYA;wBACZvB,YAAYA;wBACZ0C,SAAS1E,KAAK2E,SAAS,CAACD,OAAO;wBAC/B1B,gBAAgBA;wBAChB4B,UAAU5E,KAAK6E,YAAY,CAACX;wBAC5Bf,UAAUA;wBACV2B,UAAUX;;;;0BAGd,MAAC3H;gBAAI6H,SAAS;gBAAG1B,IAAI;oBAAEoC,WAAW;gBAAS;;kCACzC,MAACnI;wBAAKoI,SAAS;wBAACpG,SAAS;wBAAG0C,IAAI;;0CAC9B,KAAC1E;gCAAKqI,IAAI;gCAACC,IAAI;0CACb,cAAA,KAACxH;oCACCe,SAASuB,KAAKvB,OAAO;oCACrBI,MAAK;oCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACrC;4CACE,GAAGoC,KAAK;4CACToG,QAAQ;4CACR9C,SAAS;4CACTlD,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQb,WAAW,SAAS,OAAOc;4CAAU;4CAChEC,YAAY;gDACV6F,UAAU5G,WAAW,YAAY,CAACuE;gDAClCvD,UAAUhB,WAAW;4CACvB;4CACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;4CACzBC,YAAYV,WAAWS,KAAK,EAAEE;4CAC9BT,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACTd,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAKR,KAACjD;gCAAKqI,IAAI;gCAACC,IAAI;0CACb,cAAA,KAACxH;oCACCe,SAASuB,KAAKvB,OAAO;oCACrBI,MAAK;oCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACrC;4CACE,GAAGoC,KAAK;4CACTsD,SAAS;4CACTlD,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQb,WAAW,SAAS,OAAOc;4CAAU;4CAChEC,YAAY;gDACVC,UAAUhB,WAAW;4CACvB;4CACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;4CACzBC,YAAYV,WAAWS,KAAK,EAAEE;4CAC9BT,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACTd,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAKR,KAACjD;gCAAKqI,IAAI;gCAACC,IAAI;0CACb,cAAA,KAACxH;oCACCe,SAASuB,KAAKvB,OAAO;oCACrBI,MAAK;oCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACrC;4CACE,GAAGoC,KAAK;4CACTsD,SAAS;4CACTlD,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQb,WAAW,SAAS,OAAOc;4CAAU;4CAChEC,YAAY;gDACVC,UAAUhB,WAAW;4CACvB;4CACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;4CACzBC,YAAYV,WAAWS,KAAK,EAAEE;4CAC9BT,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACTd,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAKR,KAACjD;gCAAKqI,IAAI;gCAACC,IAAI;0CACb,cAAA,KAACxH;oCACCe,SAASuB,KAAKvB,OAAO;oCACrBI,MAAK;oCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACrC;4CACCyF,MAAM;4CACL,GAAGrD,KAAK;4CACTsD,SAAS;4CACTlD,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQb,WAAW,SAAS,OAAOc;4CAAU;4CAChEC,YAAY;gDACVC,UAAUhB,WAAW;4CACvB;4CACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;4CACzBC,YAAYV,WAAWS,KAAK,EAAEE;4CAC9BT,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACTd,MAAMa,QAAQ,CAACC;4CACjB;sDAEC5B,eAAeuE,GAAG,CAAC,CAACP,kBACnB,KAACnF;oDAAsBoC,OAAO+C,EAAErB,IAAI;8DACjCqB,EAAE9C,KAAK;mDADK8C,EAAErB,IAAI;;;;;;kCAUjC,KAAC5D;oBAEA4D,SAAS,gCACR,KAACzD;wBAAcoE,mBAAmBrE;kCAChC,cAAA,KAACqB;4BAAuBC,QAAQA;4BAAQC,SAASuB,KAAKvB,OAAO;;;oBAGhEmC,SAAS,gCACR,KAACzD;wBAAcoE,mBAAmBrE;kCAChC,cAAA,KAAC6C;4BAAuBvB,QAAQA;4BAAQC,SAASuB,KAAKvB,OAAO;;;;;0BAInE,KAACxB;gBACC+G,aAAY;gBACZqB,QAAQjC;gBACR0B,UAAU;oBACRzB,uBAAuB;gBACzB;gBACAiC,kBAAkB;oBAChBjC,uBAAuB;oBACvBH;gBACF;;;;AAIR"}

package/dist/components/Variables/VariableEditorForm/VariablePreview.d.ts

@@ -1,5 +1,5 @@
-import { ListVariableDefinition } from '@perses-dev/spec';
-import { ReactElement } from 'react';
+import type { ListVariableDefinition } from '@perses-dev/spec';
+import type { ReactElement } from 'react';
 import { SORT_METHODS } from './variable-editor-form-model';
 interface VariablePreviewProps {
     values?: string[];

package/dist/components/Variables/VariableEditorForm/VariablePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariablePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAI/D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAI5D,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA4DzE;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,sBAAsB,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;CACxC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CAmBjF"}
+{"version":3,"file":"VariablePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAI5D,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA4DzE;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,sBAAsB,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;CACxC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CAoBjF"}

package/dist/components/Variables/VariableEditorForm/VariablePreview.js

@@ -11,13 +11,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Alert, Box, Card, Chip, CircularProgress, IconButton, Stack, Typography } from '@mui/material';
-import { InfoTooltip, useSnackbar } from '@perses-dev/components';
-import Clipboard from 'mdi-material-ui/ClipboardOutline';
-import React, { useMemo, useState } from 'react';
-import { TOOLTIP_TEXT } from '../../../constants';
-import { useListVariablePluginValues } from '../variable-model';
-import { SORT_METHODS } from './variable-editor-form-model';
+import { Alert, Box, Card, Chip, CircularProgress, IconButton, Stack, Typography } from "@mui/material";
+import { InfoTooltip, useSnackbar } from "@perses-dev/components";
+import Clipboard from "mdi-material-ui/ClipboardOutline";
+import React, { useMemo, useState } from "react";
+import { TOOLTIP_TEXT } from "../../../constants/index.js";
+import { useListVariablePluginValues } from "../variable-model.js";
+import { SORT_METHODS } from "./variable-editor-form-model.js";
 const DEFAULT_MAX_PREVIEW_VALUES = 50;
 export function VariablePreview(props) {
     const { values, isLoading, error } = props;
@@ -115,6 +115,7 @@ export function VariableListPreview(props) {
     const { definition, sortMethod } = props;
     const { data, isFetching, error } = useListVariablePluginValues(definition);
     const errorMessage = error?.message;
+    // oxlint-disable-next-line unicorn/no-array-sort Calling sort of object, not the built-in array sort function
     const result = !sortMethod || sortMethod === 'none' || !data ? data : SORT_METHODS[sortMethod].sort(data);
     const variablePreview = useMemo(()=>/*#__PURE__*/ _jsx(VariablePreview, {
             values: result?.map((val)=>val.label || val.value),

package/dist/components/Variables/VariableEditorForm/VariablePreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Alert, Box, Card, Chip, CircularProgress, IconButton, Stack, Typography } from '@mui/material';\nimport { InfoTooltip, useSnackbar } from '@perses-dev/components';\nimport { ListVariableDefinition } from '@perses-dev/spec';\nimport Clipboard from 'mdi-material-ui/ClipboardOutline';\nimport React, { ReactElement, useMemo, useState } from 'react';\n\nimport { TOOLTIP_TEXT } from '../../../constants';\nimport { useListVariablePluginValues } from '../variable-model';\nimport { SORT_METHODS } from './variable-editor-form-model';\n\nconst DEFAULT_MAX_PREVIEW_VALUES = 50;\n\ninterface VariablePreviewProps {\n  values?: string[];\n  isLoading?: boolean;\n  error?: string;\n}\n\nexport function VariablePreview(props: VariablePreviewProps): ReactElement {\n  const { values, isLoading, error } = props;\n  const [maxValues, setMaxValues] = useState<number | undefined>(DEFAULT_MAX_PREVIEW_VALUES);\n  const { infoSnackbar } = useSnackbar();\n  const showAll = (): void => {\n    setMaxValues(undefined);\n  };\n  let notShown = 0;\n\n  if (values && values?.length > 0 && maxValues) {\n    notShown = values.length - maxValues;\n  }\n\n  const variablePreviewState = useMemo((): ReactElement | null => {\n    if (isLoading) {\n      return (\n        <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n          <CircularProgress />\n        </Stack>\n      );\n    } else if (error) {\n      return <Alert severity=\"error\">{error}</Alert>;\n    } else if (!values?.length) {\n      return <Alert severity=\"info\">No results</Alert>;\n    }\n    return null;\n  }, [error, isLoading, values]);\n\n  return (\n    <Box>\n      <Stack direction=\"row\" spacing={1} alignItems=\"center\" mb={1}>\n        <Typography variant=\"h4\">Preview Values</Typography>\n        <InfoTooltip description={TOOLTIP_TEXT.copyVariableValues}>\n          <IconButton\n            onClick={async () => {\n              if (values?.length) {\n                await navigator.clipboard.writeText(values.map((value) => value).join(', '));\n                infoSnackbar('Preview values copied to clipboard!');\n              }\n            }}\n            size=\"small\"\n          >\n            <Clipboard />\n          </IconButton>\n        </InfoTooltip>\n      </Stack>\n      <Card variant=\"outlined\">\n        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, m: 2 }}>\n          {variablePreviewState}\n          {values\n            ?.slice(0, maxValues)\n            .filter((val) => val)\n            .map((val, index) => (\n              <Chip size=\"small\" key={index} label={val} />\n            ))}\n          {notShown > 0 && <Chip onClick={showAll} variant=\"outlined\" size=\"small\" label={`+${notShown} more`} />}\n        </Box>\n      </Card>\n    </Box>\n  );\n}\n\ninterface VariableListPreviewProps {\n  definition: ListVariableDefinition;\n  sortMethod?: keyof typeof SORT_METHODS;\n}\n\nexport function VariableListPreview(props: VariableListPreviewProps): ReactElement {\n  const { definition, sortMethod } = props;\n  const { data, isFetching, error } = useListVariablePluginValues(definition);\n  const errorMessage = (error as Error)?.message;\n\n  const result = !sortMethod || sortMethod === 'none' || !data ? data : SORT_METHODS[sortMethod].sort(data);\n\n  const variablePreview = useMemo(\n    () => (\n      <VariablePreview\n        values={result?.map((val) => val.label || val.value)}\n        isLoading={isFetching}\n        error={errorMessage}\n      />\n    ),\n    [errorMessage, isFetching, result],\n  );\n\n  return variablePreview;\n}\n"],"names":["Alert","Box","Card","Chip","CircularProgress","IconButton","Stack","Typography","InfoTooltip","useSnackbar","Clipboard","React","useMemo","useState","TOOLTIP_TEXT","useListVariablePluginValues","SORT_METHODS","DEFAULT_MAX_PREVIEW_VALUES","VariablePreview","props","values","isLoading","error","maxValues","setMaxValues","infoSnackbar","showAll","undefined","notShown","length","variablePreviewState","width","sx","alignItems","justifyContent","severity","direction","spacing","mb","variant","description","copyVariableValues","onClick","navigator","clipboard","writeText","map","value","join","size","display","flexWrap","gap","m","slice","filter","val","index","label","VariableListPreview","definition","sortMethod","data","isFetching","errorMessage","message","result","sort","variablePreview"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,KAAK,EAAEC,GAAG,EAAEC,IAAI,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,UAAU,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AACxG,SAASC,WAAW,EAAEC,WAAW,QAAQ,yBAAyB;AAElE,OAAOC,eAAe,mCAAmC;AACzD,OAAOC,SAAuBC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAE/D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,2BAA2B,QAAQ,oBAAoB;AAChE,SAASC,YAAY,QAAQ,+BAA+B;AAE5D,MAAMC,6BAA6B;AAQnC,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGH;IACrC,MAAM,CAACI,WAAWC,aAAa,GAAGX,SAA6BI;IAC/D,MAAM,EAAEQ,YAAY,EAAE,GAAGhB;IACzB,MAAMiB,UAAU;QACdF,aAAaG;IACf;IACA,IAAIC,WAAW;IAEf,IAAIR,UAAUA,QAAQS,SAAS,KAAKN,WAAW;QAC7CK,WAAWR,OAAOS,MAAM,GAAGN;IAC7B;IAEA,MAAMO,uBAAuBlB,QAAQ;QACnC,IAAIS,WAAW;YACb,qBACE,KAACf;gBAAMyB,OAAM;gBAAOC,IAAI;oBAAEC,YAAY;oBAAUC,gBAAgB;gBAAS;0BACvE,cAAA,KAAC9B;;QAGP,OAAO,IAAIkB,OAAO;YAChB,qBAAO,KAACtB;gBAAMmC,UAAS;0BAASb;;QAClC,OAAO,IAAI,CAACF,QAAQS,QAAQ;YAC1B,qBAAO,KAAC7B;gBAAMmC,UAAS;0BAAO;;QAChC;QACA,OAAO;IACT,GAAG;QAACb;QAAOD;QAAWD;KAAO;IAE7B,qBACE,MAACnB;;0BACC,MAACK;gBAAM8B,WAAU;gBAAMC,SAAS;gBAAGJ,YAAW;gBAASK,IAAI;;kCACzD,KAAC/B;wBAAWgC,SAAQ;kCAAK;;kCACzB,KAAC/B;wBAAYgC,aAAa1B,aAAa2B,kBAAkB;kCACvD,cAAA,KAACpC;4BACCqC,SAAS;gCACP,IAAItB,QAAQS,QAAQ;oCAClB,MAAMc,UAAUC,SAAS,CAACC,SAAS,CAACzB,OAAO0B,GAAG,CAAC,CAACC,QAAUA,OAAOC,IAAI,CAAC;oCACtEvB,aAAa;gCACf;4BACF;4BACAwB,MAAK;sCAEL,cAAA,KAACvC;;;;;0BAIP,KAACR;gBAAKqC,SAAQ;0BACZ,cAAA,MAACtC;oBAAI+B,IAAI;wBAAEkB,SAAS;wBAAQC,UAAU;wBAAQC,KAAK;wBAAGC,GAAG;oBAAE;;wBACxDvB;wBACAV,QACGkC,MAAM,GAAG/B,WACVgC,OAAO,CAACC,MAAQA,KAChBV,IAAI,CAACU,KAAKC,sBACT,KAACtD;gCAAK8C,MAAK;gCAAoBS,OAAOF;+BAAdC;wBAE3B7B,WAAW,mBAAK,KAACzB;4BAAKuC,SAAShB;4BAASa,SAAQ;4BAAWU,MAAK;4BAAQS,OAAO,CAAC,CAAC,EAAE9B,SAAS,KAAK,CAAC;;;;;;;AAK7G;AAOA,OAAO,SAAS+B,oBAAoBxC,KAA+B;IACjE,MAAM,EAAEyC,UAAU,EAAEC,UAAU,EAAE,GAAG1C;IACnC,MAAM,EAAE2C,IAAI,EAAEC,UAAU,EAAEzC,KAAK,EAAE,GAAGP,4BAA4B6C;IAChE,MAAMI,eAAgB1C,OAAiB2C;IAEvC,MAAMC,SAAS,CAACL,cAAcA,eAAe,UAAU,CAACC,OAAOA,OAAO9C,YAAY,CAAC6C,WAAW,CAACM,IAAI,CAACL;IAEpG,MAAMM,kBAAkBxD,QACtB,kBACE,KAACM;YACCE,QAAQ8C,QAAQpB,IAAI,CAACU,MAAQA,IAAIE,KAAK,IAAIF,IAAIT,KAAK;YACnD1B,WAAW0C;YACXzC,OAAO0C;YAGX;QAACA;QAAcD;QAAYG;KAAO;IAGpC,OAAOE;AACT"}
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Alert, Box, Card, Chip, CircularProgress, IconButton, Stack, Typography } from '@mui/material';\nimport { InfoTooltip, useSnackbar } from '@perses-dev/components';\nimport type { ListVariableDefinition } from '@perses-dev/spec';\nimport Clipboard from 'mdi-material-ui/ClipboardOutline';\nimport type { ReactElement } from 'react';\nimport React, { useMemo, useState } from 'react';\n\nimport { TOOLTIP_TEXT } from '../../../constants';\nimport { useListVariablePluginValues } from '../variable-model';\nimport { SORT_METHODS } from './variable-editor-form-model';\n\nconst DEFAULT_MAX_PREVIEW_VALUES = 50;\n\ninterface VariablePreviewProps {\n  values?: string[];\n  isLoading?: boolean;\n  error?: string;\n}\n\nexport function VariablePreview(props: VariablePreviewProps): ReactElement {\n  const { values, isLoading, error } = props;\n  const [maxValues, setMaxValues] = useState<number | undefined>(DEFAULT_MAX_PREVIEW_VALUES);\n  const { infoSnackbar } = useSnackbar();\n  const showAll = (): void => {\n    setMaxValues(undefined);\n  };\n  let notShown = 0;\n\n  if (values && values?.length > 0 && maxValues) {\n    notShown = values.length - maxValues;\n  }\n\n  const variablePreviewState = useMemo((): ReactElement | null => {\n    if (isLoading) {\n      return (\n        <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n          <CircularProgress />\n        </Stack>\n      );\n    } else if (error) {\n      return <Alert severity=\"error\">{error}</Alert>;\n    } else if (!values?.length) {\n      return <Alert severity=\"info\">No results</Alert>;\n    }\n    return null;\n  }, [error, isLoading, values]);\n\n  return (\n    <Box>\n      <Stack direction=\"row\" spacing={1} alignItems=\"center\" mb={1}>\n        <Typography variant=\"h4\">Preview Values</Typography>\n        <InfoTooltip description={TOOLTIP_TEXT.copyVariableValues}>\n          <IconButton\n            onClick={async () => {\n              if (values?.length) {\n                await navigator.clipboard.writeText(values.map((value) => value).join(', '));\n                infoSnackbar('Preview values copied to clipboard!');\n              }\n            }}\n            size=\"small\"\n          >\n            <Clipboard />\n          </IconButton>\n        </InfoTooltip>\n      </Stack>\n      <Card variant=\"outlined\">\n        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, m: 2 }}>\n          {variablePreviewState}\n          {values\n            ?.slice(0, maxValues)\n            .filter((val) => val)\n            .map((val, index) => (\n              <Chip size=\"small\" key={index} label={val} />\n            ))}\n          {notShown > 0 && <Chip onClick={showAll} variant=\"outlined\" size=\"small\" label={`+${notShown} more`} />}\n        </Box>\n      </Card>\n    </Box>\n  );\n}\n\ninterface VariableListPreviewProps {\n  definition: ListVariableDefinition;\n  sortMethod?: keyof typeof SORT_METHODS;\n}\n\nexport function VariableListPreview(props: VariableListPreviewProps): ReactElement {\n  const { definition, sortMethod } = props;\n  const { data, isFetching, error } = useListVariablePluginValues(definition);\n  const errorMessage = (error as Error)?.message;\n\n  // oxlint-disable-next-line unicorn/no-array-sort Calling sort of object, not the built-in array sort function\n  const result = !sortMethod || sortMethod === 'none' || !data ? data : SORT_METHODS[sortMethod].sort(data);\n\n  const variablePreview = useMemo(\n    () => (\n      <VariablePreview\n        values={result?.map((val) => val.label || val.value)}\n        isLoading={isFetching}\n        error={errorMessage}\n      />\n    ),\n    [errorMessage, isFetching, result],\n  );\n\n  return variablePreview;\n}\n"],"names":["Alert","Box","Card","Chip","CircularProgress","IconButton","Stack","Typography","InfoTooltip","useSnackbar","Clipboard","React","useMemo","useState","TOOLTIP_TEXT","useListVariablePluginValues","SORT_METHODS","DEFAULT_MAX_PREVIEW_VALUES","VariablePreview","props","values","isLoading","error","maxValues","setMaxValues","infoSnackbar","showAll","undefined","notShown","length","variablePreviewState","width","sx","alignItems","justifyContent","severity","direction","spacing","mb","variant","description","copyVariableValues","onClick","navigator","clipboard","writeText","map","value","join","size","display","flexWrap","gap","m","slice","filter","val","index","label","VariableListPreview","definition","sortMethod","data","isFetching","errorMessage","message","result","sort","variablePreview"],"mappings":"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"}

package/dist/components/Variables/VariableEditorForm/index.js

@@ -10,8 +10,8 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-export * from './VariableEditorForm';
-export * from './VariablePreview';
-export * from './variable-editor-form-model';
+export * from "./VariableEditorForm.js";
+export * from "./VariablePreview.js";
+export * from "./variable-editor-form-model.js";
 
 //# sourceMappingURL=index.js.map

package/dist/components/Variables/VariableEditorForm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/index.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './VariableEditorForm';\nexport * from './VariablePreview';\nexport * from './variable-editor-form-model';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,uBAAuB;AACrC,cAAc,oBAAoB;AAClC,cAAc,+BAA+B"}
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/index.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './VariableEditorForm';\nexport * from './VariablePreview';\nexport * from './variable-editor-form-model';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,0BAAuB;AACrC,cAAc,uBAAoB;AAClC,cAAc,kCAA+B"}

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.d.ts

@@ -1,5 +1,5 @@
-import { ListVariableSpec, TextVariableSpec, VariableDefinition } from '@perses-dev/spec';
-import { VariableOption } from '../../../model';
+import type { ListVariableSpec, TextVariableSpec, VariableDefinition } from '@perses-dev/spec';
+import type { VariableOption } from '../../../model';
 export type SortMethodName = 'none' | 'alphabetical-asc' | 'alphabetical-desc' | 'numerical-asc' | 'numerical-desc' | 'alphabetical-ci-asc' | 'alphabetical-ci-desc';
 export declare const SORT_METHODS: Record<SortMethodName, {
     label: string;