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

package/dist/components/ItemSelectionActionsOptionsEditor/ItemSelectionActionsOptionsEditor.js

@@ -65,11 +65,11 @@ const CONTENT_TYPES = [
         label: 'Text'
     }
 ];
-const BODY_METHODS = [
+const BODY_METHODS = new Set([
     'POST',
     'PUT',
     'PATCH'
-];
+]);
 const BODY_CLEAR_CONFIRM_MESSAGE = 'Changing this option will remove the current body template. Continue?';
 /** Available action icons with their display components */ export const ACTION_ICONS = [
     {
@@ -553,7 +553,7 @@ function WebhookActionEditor({ action, index, onChange, onRemove, onMoveUp, onMo
     const [pendingChange, setPendingChange] = useState(null);
     const contentTypeValue = webhookAction.contentType ?? 'none';
     const hasBodyTemplate = (webhookAction.bodyTemplate ?? '').trim().length > 0;
-    const supportsBody = BODY_METHODS.includes(webhookAction.method);
+    const supportsBody = BODY_METHODS.has(webhookAction.method);
     const [isCollapsed, setIsCollapsed] = useState(true);
     const handleBodyTemplateChange = useCallback((template)=>{
         onChange(index, {
@@ -603,7 +603,7 @@ function WebhookActionEditor({ action, index, onChange, onRemove, onMoveUp, onMo
         if (nextMethod === webhookAction.method) {
             return;
         }
-        const nextSupportsBody = BODY_METHODS.includes(nextMethod);
+        const nextSupportsBody = BODY_METHODS.has(nextMethod);
         if (!nextSupportsBody && hasBodyTemplate) {
             setPendingChange({
                 kind: 'method',

package/dist/components/ItemSelectionActionsOptionsEditor/ItemSelectionActionsOptionsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ItemSelectionActionsOptionsEditor/ItemSelectionActionsOptionsEditor.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 type { SwitchProps } from '@mui/material';\nimport {\n  Box,\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogContentText,\n  DialogTitle,\n  FormControl,\n  FormControlLabel,\n  FormLabel,\n  IconButton,\n  InputLabel,\n  MenuItem,\n  Radio,\n  RadioGroup,\n  Select,\n  Stack,\n  Switch,\n  TextField,\n  Typography,\n} from '@mui/material';\nimport type { SelectChangeEvent } from '@mui/material/Select';\nimport {\n  DragAndDropElement,\n  DragButton,\n  handleMoveDown,\n  handleMoveUp,\n  InfoTooltip,\n  JSONEditor,\n  OptionsEditorControl,\n  OptionsEditorGroup,\n  useDragAndDropMonitor,\n} from '@perses-dev/components';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport CheckIcon from 'mdi-material-ui/Check';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport SettingsIcon from 'mdi-material-ui/Cog';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DownloadIcon from 'mdi-material-ui/Download';\nimport InfoIcon from 'mdi-material-ui/InformationOutline';\nimport LinkIcon from 'mdi-material-ui/Link';\nimport MagnifyScan from 'mdi-material-ui/MagnifyScan';\nimport PauseIcon from 'mdi-material-ui/Pause';\nimport PlayIcon from 'mdi-material-ui/Play';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport RefreshIcon from 'mdi-material-ui/Refresh';\nimport RobotOutline from 'mdi-material-ui/RobotOutline';\nimport SendIcon from 'mdi-material-ui/Send';\nimport StopIcon from 'mdi-material-ui/Stop';\nimport SyncIcon from 'mdi-material-ui/Sync';\nimport UploadIcon from 'mdi-material-ui/Upload';\nimport type { ReactElement } from 'react';\nimport { useCallback, useMemo, useState } from 'react';\n\nexport type ActionIcon =\n  | 'play'\n  | 'pause'\n  | 'stop'\n  | 'delete'\n  | 'refresh'\n  | 'send'\n  | 'download'\n  | 'upload'\n  | 'check'\n  | 'close'\n  | 'alert'\n  | 'info'\n  | 'settings'\n  | 'link'\n  | 'sync'\n  | 'troubleshoot'\n  | 'ask-ai';\n\nexport interface BaseAction {\n  type: 'event' | 'webhook';\n  name: string;\n  confirmMessage?: string;\n  icon?: ActionIcon;\n  enabled?: boolean;\n  batchMode: BatchMode;\n  bodyTemplate?: string;\n}\n\nexport type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';\n\nexport type BatchMode = 'batch' | 'individual';\n\nexport type ContentType = 'none' | 'json' | 'text';\n\nexport interface WebhookAction extends BaseAction {\n  type: 'webhook';\n  url: string;\n  method: HttpMethod;\n  contentType: ContentType;\n  headers?: Record<string, string>;\n}\n\nexport interface EventAction extends BaseAction {\n  type: 'event';\n  eventName: string;\n}\n\nexport type ItemAction = EventAction | WebhookAction;\n\nexport interface ActionOptions {\n  enabled?: boolean;\n  actionsList?: ItemAction[];\n  displayInHeader?: boolean;\n  displayWithItem?: boolean;\n}\n\nexport interface SelectionOptions {\n  enabled?: boolean;\n}\n\nexport interface ItemSelectionActionsEditorProps {\n  actionOptions?: ActionOptions;\n  selectionOptions?: SelectionOptions;\n  onChangeActions: (actions?: ActionOptions) => void;\n  onChangeSelection: (selection?: SelectionOptions) => void;\n}\n\nconst HTTP_METHODS: HttpMethod[] = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];\nconst BATCH_MODES: Array<{ value: BatchMode; label: string }> = [\n  { value: 'individual', label: 'Individual (one request per selection)' },\n  { value: 'batch', label: 'Batch (single request with all selections)' },\n];\nconst CONTENT_TYPES: Array<{ value: ContentType; label: string }> = [\n  { value: 'none', label: 'None' },\n  { value: 'json', label: 'JSON' },\n  { value: 'text', label: 'Text' },\n];\nconst BODY_METHODS: HttpMethod[] = ['POST', 'PUT', 'PATCH'];\nconst BODY_CLEAR_CONFIRM_MESSAGE = 'Changing this option will remove the current body template. Continue?';\n\n/** Available action icons with their display components */\nexport const ACTION_ICONS: Array<{ value: ActionIcon; label: string; icon: ReactElement }> = [\n  { value: 'play', label: 'Play', icon: <PlayIcon fontSize=\"inherit\" /> },\n  { value: 'pause', label: 'Pause', icon: <PauseIcon fontSize=\"inherit\" /> },\n  { value: 'stop', label: 'Stop', icon: <StopIcon fontSize=\"inherit\" /> },\n  { value: 'delete', label: 'Delete', icon: <DeleteIcon fontSize=\"inherit\" /> },\n  { value: 'refresh', label: 'Refresh', icon: <RefreshIcon fontSize=\"inherit\" /> },\n  { value: 'send', label: 'Send', icon: <SendIcon fontSize=\"inherit\" /> },\n  { value: 'download', label: 'Download', icon: <DownloadIcon fontSize=\"inherit\" /> },\n  { value: 'upload', label: 'Upload', icon: <UploadIcon fontSize=\"inherit\" /> },\n  { value: 'check', label: 'Check', icon: <CheckIcon fontSize=\"inherit\" /> },\n  { value: 'close', label: 'Close', icon: <CloseIcon fontSize=\"inherit\" /> },\n  { value: 'alert', label: 'Alert', icon: <AlertIcon fontSize=\"inherit\" /> },\n  { value: 'info', label: 'Info', icon: <InfoIcon fontSize=\"inherit\" /> },\n  { value: 'settings', label: 'Settings', icon: <SettingsIcon fontSize=\"inherit\" /> },\n  { value: 'link', label: 'Link', icon: <LinkIcon fontSize=\"inherit\" /> },\n  { value: 'sync', label: 'Sync', icon: <SyncIcon fontSize=\"inherit\" /> },\n  { value: 'troubleshoot', label: 'Troubleshoot', icon: <MagnifyScan fontSize=\"inherit\" /> },\n  { value: 'ask-ai', label: 'Ask AI', icon: <RobotOutline fontSize=\"inherit\" /> },\n];\n\nconst URL_HELPER_TEXT = 'Supports interpolation: ${__data.fields[\"fieldName\"]}, ${__data.index}, ${__data.count}';\n\nfunction createDefaultEventAction(): EventAction {\n  return {\n    type: 'event',\n    name: 'New Event Action',\n    eventName: 'selection-action',\n    batchMode: 'individual',\n    enabled: true,\n  };\n}\n\nfunction createDefaultWebhookAction(): WebhookAction {\n  return {\n    type: 'webhook',\n    name: 'New Webhook Action',\n    url: '',\n    method: 'POST',\n    contentType: 'none',\n    batchMode: 'individual',\n    enabled: true,\n  };\n}\n\ninterface ItemActionEditorProps {\n  action: ItemAction;\n  index: number;\n  onChange: (index: number, action: ItemAction) => void;\n  onRemove: (index: number) => void;\n  onMoveUp: () => void;\n  onMoveDown: () => void;\n}\n\ninterface InterpolationHelperProps {\n  batchMode: BatchMode;\n}\n\nfunction InterpolationHelper({ batchMode }: InterpolationHelperProps): ReactElement {\n  let content: ReactElement = (\n    <div>\n      Individual mode patterns: <code>{'${__data.fields[\"field\"]}'}</code>, <code>{'${__data.index}'}</code>,{' '}\n      <code>{'${__data.count}'}</code>\n    </div>\n  );\n\n  if (batchMode === 'batch') {\n    content = (\n      <div>\n        Batch mode patterns: <code>{'${__data}'}</code>, <code>{\"${__data[0].fields['field']}\"}</code>,{' '}\n        <code>{\"${__data.fields['field']:csv}\"}</code>, <code>{'${__data.count}'}</code>\n      </div>\n    );\n  }\n\n  return (\n    <Typography variant=\"caption\" color=\"text.secondary\" sx={{ mb: 1, display: 'block' }}>\n      {content}\n    </Typography>\n  );\n}\n\nfunction EventActionEditor({\n  action,\n  index,\n  onChange,\n  onRemove,\n  onMoveDown,\n  onMoveUp,\n}: ItemActionEditorProps): ReactElement {\n  const eventAction = action as EventAction;\n\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const hasBodyTemplate = (eventAction.bodyTemplate ?? '').trim().length > 0;\n\n  const handleIncludesTemplateChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const nextContentType = event.target.value as 'custom' | 'none';\n\n      const bodyTemplate = nextContentType === 'custom' ? JSON.stringify({}) : undefined;\n\n      onChange(index, { ...eventAction, bodyTemplate: bodyTemplate });\n    },\n    [index, onChange, eventAction],\n  );\n\n  const handleBodyTemplateChange = useCallback(\n    (template: string) => {\n      onChange(index, { ...eventAction, bodyTemplate: template || undefined });\n    },\n    [index, onChange, eventAction],\n  );\n\n  const jsonDataTemplate = useMemo(() => {\n    if (eventAction.bodyTemplate) {\n      try {\n        return JSON.parse(eventAction.bodyTemplate);\n      } catch {\n        return {};\n      }\n    }\n  }, [eventAction.bodyTemplate]);\n\n  return (\n    <DragAndDropElement data={eventAction as unknown as Record<string, unknown>}>\n      <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" gap={4}>\n        <Stack direction=\"row\" gap={1}>\n          <IconButton\n            data-testid={`event-action-toggle#${eventAction.name}`}\n            size=\"small\"\n            onClick={() => setIsCollapsed(!isCollapsed)}\n          >\n            {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n          </IconButton>\n          <Typography variant=\"overline\" component=\"h4\" sx={{ textTransform: 'none' }}>\n            EVENT ACTION:{' '}\n            {eventAction.name ? (\n              <span>\n                <strong>{eventAction.name}</strong>\n              </span>\n            ) : (\n              <strong>{eventAction.name}</strong>\n            )}\n          </Typography>\n        </Stack>\n\n        <Stack direction=\"row\" gap={1}>\n          <InfoTooltip description=\"Remove action settings\" placement=\"top\">\n            <IconButton\n              size=\"small\"\n              sx={{ marginLeft: 'auto' }}\n              onClick={() => onRemove(index)}\n              key=\"delete-action-button\"\n            >\n              <DeleteIcon />\n            </IconButton>\n          </InfoTooltip>\n          <InfoTooltip description=\"Reorder action settings\" placement=\"top\">\n            <DragButton\n              onMoveUp={onMoveUp}\n              onMoveDown={onMoveDown}\n              menuSx={{\n                '.MuiPaper-root': { backgroundColor: (theme) => theme.palette.background.lighter },\n              }}\n              key=\"reorder-action-button\"\n            />\n          </InfoTooltip>\n        </Stack>\n      </Stack>\n\n      {!isCollapsed && (\n        <Stack spacing={2}>\n          <OptionsEditorControl\n            label=\"Enabled\"\n            control={\n              <Switch\n                checked={eventAction?.enabled ?? false}\n                onChange={(e) => onChange(index, { ...eventAction, enabled: e.target.checked })}\n              />\n            }\n          />\n\n          <Stack direction=\"row\" spacing={2}>\n            <TextField\n              label=\"Action Name\"\n              size=\"small\"\n              value={eventAction.name}\n              onChange={(e) => onChange(index, { ...eventAction, name: e.target.value })}\n              sx={{ flexGrow: 1 }}\n            />\n\n            <FormControl size=\"small\" sx={{ minWidth: 120 }}>\n              <InputLabel>Icon</InputLabel>\n              <Select\n                value={eventAction.icon || ''}\n                label=\"Icon\"\n                onChange={(e) => onChange(index, { ...eventAction, icon: (e.target.value as ActionIcon) || undefined })}\n              >\n                <MenuItem value=\"\">\n                  <em>None</em>\n                </MenuItem>\n                {ACTION_ICONS.map((iconOption) => (\n                  <MenuItem key={iconOption.value} value={iconOption.value}>\n                    <Stack direction=\"row\" alignItems=\"center\" spacing={1}>\n                      {iconOption.icon}\n                      <span>{iconOption.label}</span>\n                    </Stack>\n                  </MenuItem>\n                ))}\n              </Select>\n            </FormControl>\n          </Stack>\n\n          <Stack direction=\"row\" spacing={2}>\n            <TextField\n              label=\"Event Name\"\n              size=\"small\"\n              value={eventAction.eventName}\n              onChange={(e) => onChange(index, { ...eventAction, eventName: e.target.value })}\n              helperText=\"Name of the CustomEvent to dispatch (e.g., 'selection-action')\"\n              fullWidth\n            />\n\n            <FormControl size=\"small\" sx={{ flexGrow: 1, minWidth: 280 }}>\n              <InputLabel>Batch Mode</InputLabel>\n              <Select\n                value={eventAction.batchMode ?? 'individual'}\n                label=\"Batch Mode\"\n                onChange={(e) => onChange(index, { ...eventAction, batchMode: e.target.value as BatchMode })}\n              >\n                {BATCH_MODES.map((mode) => (\n                  <MenuItem key={mode.value} value={mode.value}>\n                    {mode.label}\n                  </MenuItem>\n                ))}\n              </Select>\n            </FormControl>\n          </Stack>\n\n          <FormControl component=\"fieldset\" size=\"small\">\n            <FormLabel component=\"legend\">Template</FormLabel>\n            <RadioGroup row value={hasBodyTemplate ? 'custom' : 'none'} onChange={handleIncludesTemplateChange}>\n              <FormControlLabel value=\"none\" control={<Radio size=\"small\" />} label=\"None\" />\n              <FormControlLabel value=\"custom\" control={<Radio size=\"small\" />} label=\"JSON template\" />\n            </RadioGroup>\n          </FormControl>\n\n          {hasBodyTemplate && (\n            <>\n              <InterpolationHelper batchMode={eventAction.batchMode} />\n              <JSONEditor\n                value={jsonDataTemplate || ''}\n                onChange={handleBodyTemplateChange}\n                minHeight=\"100px\"\n                maxHeight=\"200px\"\n              />\n            </>\n          )}\n\n          <TextField\n            label=\"Confirmation Message (optional)\"\n            size=\"small\"\n            value={eventAction.confirmMessage || ''}\n            onChange={(e) => onChange(index, { ...eventAction, confirmMessage: e.target.value || undefined })}\n            helperText=\"If set, shows a confirmation dialog before executing the action\"\n            fullWidth\n            multiline\n            rows={2}\n          />\n        </Stack>\n      )}\n    </DragAndDropElement>\n  );\n}\n\nfunction WebhookActionEditor({\n  action,\n  index,\n  onChange,\n  onRemove,\n  onMoveUp,\n  onMoveDown,\n}: ItemActionEditorProps): ReactElement {\n  const webhookAction = action as WebhookAction;\n  const [pendingChange, setPendingChange] = useState<\n    { kind: 'contentType'; value: ContentType } | { kind: 'method'; value: HttpMethod } | null\n  >(null);\n  const contentTypeValue = webhookAction.contentType ?? 'none';\n  const hasBodyTemplate = (webhookAction.bodyTemplate ?? '').trim().length > 0;\n  const supportsBody = BODY_METHODS.includes(webhookAction.method);\n\n  const [isCollapsed, setIsCollapsed] = useState(true);\n\n  const handleBodyTemplateChange = useCallback(\n    (template: string) => {\n      onChange(index, { ...webhookAction, bodyTemplate: template || undefined });\n    },\n    [index, onChange, webhookAction],\n  );\n\n  const handleTextTemplateChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(index, { ...webhookAction, bodyTemplate: event.target.value || undefined });\n    },\n    [index, onChange, webhookAction],\n  );\n\n  const handleContentTypeChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const nextContentType = event.target.value as ContentType;\n      if (nextContentType === contentTypeValue) {\n        return;\n      }\n\n      if (hasBodyTemplate) {\n        setPendingChange({ kind: 'contentType', value: nextContentType });\n        return;\n      }\n\n      onChange(index, { ...webhookAction, contentType: nextContentType });\n    },\n    [contentTypeValue, hasBodyTemplate, index, onChange, webhookAction],\n  );\n\n  const handleMethodChange = useCallback(\n    (event: SelectChangeEvent<HttpMethod>) => {\n      const nextMethod = event.target.value as HttpMethod;\n      if (nextMethod === webhookAction.method) {\n        return;\n      }\n\n      const nextSupportsBody = BODY_METHODS.includes(nextMethod);\n      if (!nextSupportsBody && hasBodyTemplate) {\n        setPendingChange({ kind: 'method', value: nextMethod });\n        return;\n      }\n\n      onChange(index, { ...webhookAction, method: nextMethod });\n    },\n    [hasBodyTemplate, index, onChange, webhookAction],\n  );\n\n  const handleConfirmClose = useCallback(() => {\n    setPendingChange(null);\n  }, []);\n\n  const handleConfirmApply = useCallback(() => {\n    if (!pendingChange) {\n      return;\n    }\n\n    if (pendingChange.kind === 'contentType') {\n      onChange(index, { ...webhookAction, contentType: pendingChange.value, bodyTemplate: undefined });\n    } else {\n      onChange(index, { ...webhookAction, method: pendingChange.value, bodyTemplate: undefined });\n    }\n\n    setPendingChange(null);\n  }, [index, onChange, pendingChange, webhookAction]);\n\n  const jsonBodyTemplate = useMemo(() => {\n    if (webhookAction.contentType === 'json' && webhookAction.bodyTemplate) {\n      try {\n        return JSON.parse(webhookAction.bodyTemplate);\n      } catch {\n        return {};\n      }\n    }\n  }, [webhookAction.bodyTemplate, webhookAction.contentType]);\n\n  return (\n    <DragAndDropElement data={webhookAction as unknown as Record<string, unknown>}>\n      <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" gap={4}>\n        <Stack direction=\"row\" gap={1}>\n          <IconButton\n            data-testid={`column-toggle#${webhookAction.name}`}\n            size=\"small\"\n            onClick={() => setIsCollapsed(!isCollapsed)}\n          >\n            {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n          </IconButton>\n          <Typography variant=\"overline\" component=\"h4\" sx={{ textTransform: 'none' }}>\n            WEBHOOK ACTION: <strong>{webhookAction.name}</strong>\n          </Typography>\n        </Stack>\n\n        <Stack direction=\"row\" gap={1}>\n          <InfoTooltip description=\"Remove action settings\" placement=\"top\">\n            <IconButton\n              size=\"small\"\n              sx={{ marginLeft: 'auto' }}\n              onClick={() => onRemove(index)}\n              key=\"delete-action-button\"\n            >\n              <DeleteIcon />\n            </IconButton>\n          </InfoTooltip>\n          <InfoTooltip description=\"Reorder action settings\" placement=\"top\">\n            <DragButton\n              onMoveUp={onMoveUp}\n              onMoveDown={onMoveDown}\n              menuSx={{\n                '.MuiPaper-root': { backgroundColor: (theme) => theme.palette.background.lighter },\n              }}\n              key=\"reorder-action-button\"\n            />\n          </InfoTooltip>\n        </Stack>\n      </Stack>\n\n      {!isCollapsed && (\n        <Stack spacing={2}>\n          <OptionsEditorControl\n            label=\"Enabled\"\n            control={\n              <Switch\n                checked={action?.enabled ?? false}\n                onChange={(e) => onChange(index, { ...webhookAction, enabled: e.target.checked })}\n              />\n            }\n          />\n\n          <Stack direction=\"row\" spacing={2}>\n            <TextField\n              label=\"Action Name\"\n              size=\"small\"\n              value={webhookAction.name}\n              onChange={(e) => onChange(index, { ...webhookAction, name: e.target.value })}\n              sx={{ flexGrow: 1 }}\n            />\n\n            <FormControl size=\"small\" sx={{ minWidth: 120 }}>\n              <InputLabel>Icon</InputLabel>\n              <Select\n                value={webhookAction.icon || ''}\n                label=\"Icon\"\n                onChange={(e) =>\n                  onChange(index, { ...webhookAction, icon: (e.target.value as ActionIcon) || undefined })\n                }\n              >\n                <MenuItem value=\"\">\n                  <em>None</em>\n                </MenuItem>\n                {ACTION_ICONS.map((iconOption) => (\n                  <MenuItem key={iconOption.value} value={iconOption.value}>\n                    <Stack direction=\"row\" alignItems=\"center\" spacing={1}>\n                      {iconOption.icon}\n                      <span>{iconOption.label}</span>\n                    </Stack>\n                  </MenuItem>\n                ))}\n              </Select>\n            </FormControl>\n          </Stack>\n\n          <TextField\n            label=\"URL\"\n            size=\"small\"\n            value={webhookAction.url}\n            onChange={(e) => onChange(index, { ...webhookAction, url: e.target.value })}\n            helperText={URL_HELPER_TEXT}\n            fullWidth\n          />\n\n          <Stack direction=\"row\" spacing={2}>\n            <FormControl size=\"small\" sx={{ minWidth: 120 }}>\n              <InputLabel>Method</InputLabel>\n              <Select value={webhookAction.method} label=\"Method\" onChange={handleMethodChange}>\n                {HTTP_METHODS.map((method) => (\n                  <MenuItem key={method} value={method}>\n                    {method}\n                  </MenuItem>\n                ))}\n              </Select>\n            </FormControl>\n\n            <FormControl size=\"small\" sx={{ flexGrow: 1 }}>\n              <InputLabel>Batch Mode</InputLabel>\n              <Select\n                value={webhookAction.batchMode}\n                label=\"Batch Mode\"\n                onChange={(e) => onChange(index, { ...webhookAction, batchMode: e.target.value as BatchMode })}\n              >\n                {BATCH_MODES.map((mode) => (\n                  <MenuItem key={mode.value} value={mode.value}>\n                    {mode.label}\n                  </MenuItem>\n                ))}\n              </Select>\n            </FormControl>\n          </Stack>\n\n          <FormControl component=\"fieldset\" size=\"small\">\n            <FormLabel component=\"legend\">Content Type</FormLabel>\n            <RadioGroup row value={contentTypeValue} onChange={handleContentTypeChange}>\n              {CONTENT_TYPES.map((option) => (\n                <FormControlLabel\n                  key={option.value}\n                  value={option.value}\n                  control={<Radio size=\"small\" />}\n                  label={option.label}\n                />\n              ))}\n            </RadioGroup>\n          </FormControl>\n\n          {supportsBody && contentTypeValue !== 'none' && (\n            <Box>\n              <Typography variant=\"body2\" color=\"text.secondary\" sx={{ mb: 1 }}>\n                {contentTypeValue === 'json' ? 'Body Template (JSON)' : 'Body Template (Text)'}\n              </Typography>\n              <InterpolationHelper batchMode={webhookAction.batchMode} />\n              {contentTypeValue === 'json' ? (\n                <JSONEditor\n                  value={jsonBodyTemplate || ''}\n                  onChange={handleBodyTemplateChange}\n                  minHeight=\"100px\"\n                  maxHeight=\"200px\"\n                />\n              ) : (\n                <TextField\n                  value={webhookAction.bodyTemplate || ''}\n                  onChange={handleTextTemplateChange}\n                  fullWidth\n                  multiline\n                  rows={5}\n                />\n              )}\n            </Box>\n          )}\n\n          <TextField\n            label=\"Confirmation Message (optional)\"\n            size=\"small\"\n            value={webhookAction.confirmMessage || ''}\n            onChange={(e) => onChange(index, { ...webhookAction, confirmMessage: e.target.value || undefined })}\n            helperText=\"If set, shows a confirmation dialog before executing the action\"\n            fullWidth\n            multiline\n            rows={2}\n          />\n        </Stack>\n      )}\n\n      <Dialog open={Boolean(pendingChange)} onClose={handleConfirmClose} aria-labelledby=\"selection-body-clear-title\">\n        <DialogTitle id=\"selection-body-clear-title\">Remove Body Template?</DialogTitle>\n        <DialogContent>\n          <DialogContentText>{BODY_CLEAR_CONFIRM_MESSAGE}</DialogContentText>\n        </DialogContent>\n        <DialogActions>\n          <Button onClick={handleConfirmClose}>Cancel</Button>\n          <Button onClick={handleConfirmApply} variant=\"contained\" color=\"primary\">\n            Continue\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </DragAndDropElement>\n  );\n}\n\nexport function ItemSelectionActionsEditor({\n  actionOptions,\n  selectionOptions,\n  onChangeActions,\n  onChangeSelection,\n}: ItemSelectionActionsEditorProps): ReactElement {\n  const actions = useMemo(\n    () => actionOptions || { enabled: true, displayInHeader: true, displayWithItem: false },\n    [actionOptions],\n  );\n\n  const handleEnableActionsChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    onChangeActions({ ...actions, enabled: checked ? true : undefined });\n  };\n\n  const handleEnableSelectionChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    onChangeSelection({ ...selectionOptions, enabled: checked ? true : undefined });\n  };\n\n  const handleDisplayInHeaderChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    onChangeActions({ ...actions, displayInHeader: checked ? true : undefined });\n  };\n\n  const handleDisplayWithItemChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    onChangeActions({ ...actions, displayWithItem: checked ? true : undefined });\n  };\n\n  const handleAddEventAction = useCallback(() => {\n    onChangeActions({ ...actions, actionsList: [...(actions.actionsList ?? []), createDefaultEventAction()] });\n  }, [actions, onChangeActions]);\n\n  const handleAddWebhookAction = useCallback(() => {\n    onChangeActions({ ...actions, actionsList: [...(actions.actionsList ?? []), createDefaultWebhookAction()] });\n  }, [actions, onChangeActions]);\n\n  const handleActionChange = useCallback(\n    (index: number, updatedAction: ItemAction) => {\n      const newActions = actions.actionsList ? [...actions.actionsList] : [];\n      newActions[index] = updatedAction;\n      onChangeActions({ ...actions, actionsList: newActions });\n    },\n    [actions, onChangeActions],\n  );\n\n  const handleRemoveAction = useCallback(\n    (index: number) => {\n      const newActions = actions.actionsList ? actions.actionsList.filter((_, i) => i !== index) : [];\n      onChangeActions(newActions.length > 0 ? { ...actions, actionsList: newActions } : undefined);\n    },\n    [actions, onChangeActions],\n  );\n\n  useDragAndDropMonitor({\n    elements: actions.actionsList as unknown as Array<Record<string, unknown>>,\n    accessKey: 'name',\n    onChange: (newElements) => {\n      onChangeActions({ ...actions, actionsList: newElements as unknown as ItemAction[] });\n    },\n  });\n\n  return (\n    <Stack spacing={1}>\n      <OptionsEditorControl\n        label=\"Enable Item Selection\"\n        description=\"Allow selecting items\"\n        control={<Switch checked={selectionOptions?.enabled ?? false} onChange={handleEnableSelectionChange} />}\n      />\n      <OptionsEditorControl\n        label=\"Enable Item Actions\"\n        description=\"Allow executing actions on selected items\"\n        control={<Switch checked={actionOptions?.enabled ?? false} onChange={handleEnableActionsChange} />}\n      />\n      <OptionsEditorControl\n        label=\"Display Actions in Panel Header\"\n        description=\"Show action buttons in the panel header when items are selected\"\n        control={<Switch checked={actionOptions?.displayInHeader ?? false} onChange={handleDisplayInHeaderChange} />}\n      />\n      <OptionsEditorControl\n        label=\"Display Actions with Each Item\"\n        description=\"Show action buttons alongside each item when selected\"\n        control={<Switch checked={actionOptions?.displayWithItem ?? false} onChange={handleDisplayWithItemChange} />}\n      />\n      <OptionsEditorGroup title=\"Actions\">\n        <Stack spacing={3}>\n          {!actions.actionsList || actions.actionsList.length === 0 ? (\n            <Typography variant=\"body2\" color=\"text.secondary\" fontStyle=\"italic\">\n              No actions defined. Add an action to enable triggering events or webhooks on selected data.\n            </Typography>\n          ) : (\n            <Stack spacing={1} border=\"none\">\n              {actions.actionsList &&\n                actions.actionsList.map((action, index) => (\n                  <Box key={index} borderBottom={1} borderColor={(theme) => theme.palette.divider} pb={1}>\n                    {action.type === 'event' ? (\n                      <EventActionEditor\n                        action={action}\n                        index={index}\n                        onChange={handleActionChange}\n                        onRemove={handleRemoveAction}\n                        onMoveDown={() =>\n                          onChangeActions({ ...actions, actionsList: handleMoveDown(action, actions.actionsList!) })\n                        }\n                        onMoveUp={() =>\n                          onChangeActions({ ...actions, actionsList: handleMoveUp(action, actions.actionsList!) })\n                        }\n                      />\n                    ) : (\n                      <WebhookActionEditor\n                        action={action}\n                        index={index}\n                        onChange={handleActionChange}\n                        onRemove={handleRemoveAction}\n                        onMoveDown={() =>\n                          onChangeActions({ ...actions, actionsList: handleMoveDown(action, actions.actionsList!) })\n                        }\n                        onMoveUp={() =>\n                          onChangeActions({ ...actions, actionsList: handleMoveUp(action, actions.actionsList!) })\n                        }\n                      />\n                    )}\n                  </Box>\n                ))}\n            </Stack>\n          )}\n\n          <Stack direction=\"row\" spacing={1}>\n            <Button variant=\"contained\" startIcon={<PlusIcon />} onClick={handleAddEventAction}>\n              Add Event Action\n            </Button>\n            <Button variant=\"contained\" startIcon={<PlusIcon />} onClick={handleAddWebhookAction}>\n              Add Webhook Action\n            </Button>\n          </Stack>\n        </Stack>\n      </OptionsEditorGroup>\n    </Stack>\n  );\n}\n"],"names":["Box","Button","Dialog","DialogActions","DialogContent","DialogContentText","DialogTitle","FormControl","FormControlLabel","FormLabel","IconButton","InputLabel","MenuItem","Radio","RadioGroup","Select","Stack","Switch","TextField","Typography","DragAndDropElement","DragButton","handleMoveDown","handleMoveUp","InfoTooltip","JSONEditor","OptionsEditorControl","OptionsEditorGroup","useDragAndDropMonitor","AlertIcon","CheckIcon","ChevronDown","ChevronRight","CloseIcon","SettingsIcon","DeleteIcon","DownloadIcon","InfoIcon","LinkIcon","MagnifyScan","PauseIcon","PlayIcon","PlusIcon","RefreshIcon","RobotOutline","SendIcon","StopIcon","SyncIcon","UploadIcon","useCallback","useMemo","useState","HTTP_METHODS","BATCH_MODES","value","label","CONTENT_TYPES","BODY_METHODS","BODY_CLEAR_CONFIRM_MESSAGE","ACTION_ICONS","icon","fontSize","URL_HELPER_TEXT","createDefaultEventAction","type","name","eventName","batchMode","enabled","createDefaultWebhookAction","url","method","contentType","InterpolationHelper","content","div","code","variant","color","sx","mb","display","EventActionEditor","action","index","onChange","onRemove","onMoveDown","onMoveUp","eventAction","isCollapsed","setIsCollapsed","hasBodyTemplate","bodyTemplate","trim","length","handleIncludesTemplateChange","event","nextContentType","target","JSON","stringify","undefined","handleBodyTemplateChange","template","jsonDataTemplate","parse","data","direction","alignItems","justifyContent","gap","data-testid","size","onClick","component","textTransform","span","strong","description","placement","marginLeft","menuSx","backgroundColor","theme","palette","background","lighter","spacing","control","checked","e","flexGrow","minWidth","em","map","iconOption","helperText","fullWidth","mode","row","minHeight","maxHeight","confirmMessage","multiline","rows","WebhookActionEditor","webhookAction","pendingChange","setPendingChange","contentTypeValue","supportsBody","includes","handleTextTemplateChange","handleContentTypeChange","kind","handleMethodChange","nextMethod","nextSupportsBody","handleConfirmClose","handleConfirmApply","jsonBodyTemplate","option","open","Boolean","onClose","aria-labelledby","id","ItemSelectionActionsEditor","actionOptions","selectionOptions","onChangeActions","onChangeSelection","actions","displayInHeader","displayWithItem","handleEnableActionsChange","_","handleEnableSelectionChange","handleDisplayInHeaderChange","handleDisplayWithItemChange","handleAddEventAction","actionsList","handleAddWebhookAction","handleActionChange","updatedAction","newActions","handleRemoveAction","filter","i","elements","accessKey","newElements","title","fontStyle","border","borderBottom","borderColor","divider","pb","startIcon"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/ItemSelectionActionsOptionsEditor/ItemSelectionActionsOptionsEditor.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 type { SwitchProps } from '@mui/material';\nimport {\n  Box,\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogContentText,\n  DialogTitle,\n  FormControl,\n  FormControlLabel,\n  FormLabel,\n  IconButton,\n  InputLabel,\n  MenuItem,\n  Radio,\n  RadioGroup,\n  Select,\n  Stack,\n  Switch,\n  TextField,\n  Typography,\n} from '@mui/material';\nimport type { SelectChangeEvent } from '@mui/material/Select';\nimport {\n  DragAndDropElement,\n  DragButton,\n  handleMoveDown,\n  handleMoveUp,\n  InfoTooltip,\n  JSONEditor,\n  OptionsEditorControl,\n  OptionsEditorGroup,\n  useDragAndDropMonitor,\n} from '@perses-dev/components';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport CheckIcon from 'mdi-material-ui/Check';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport SettingsIcon from 'mdi-material-ui/Cog';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DownloadIcon from 'mdi-material-ui/Download';\nimport InfoIcon from 'mdi-material-ui/InformationOutline';\nimport LinkIcon from 'mdi-material-ui/Link';\nimport MagnifyScan from 'mdi-material-ui/MagnifyScan';\nimport PauseIcon from 'mdi-material-ui/Pause';\nimport PlayIcon from 'mdi-material-ui/Play';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport RefreshIcon from 'mdi-material-ui/Refresh';\nimport RobotOutline from 'mdi-material-ui/RobotOutline';\nimport SendIcon from 'mdi-material-ui/Send';\nimport StopIcon from 'mdi-material-ui/Stop';\nimport SyncIcon from 'mdi-material-ui/Sync';\nimport UploadIcon from 'mdi-material-ui/Upload';\nimport type { ReactElement } from 'react';\nimport { useCallback, useMemo, useState } from 'react';\n\nexport type ActionIcon =\n  | 'play'\n  | 'pause'\n  | 'stop'\n  | 'delete'\n  | 'refresh'\n  | 'send'\n  | 'download'\n  | 'upload'\n  | 'check'\n  | 'close'\n  | 'alert'\n  | 'info'\n  | 'settings'\n  | 'link'\n  | 'sync'\n  | 'troubleshoot'\n  | 'ask-ai';\n\nexport interface BaseAction {\n  type: 'event' | 'webhook';\n  name: string;\n  confirmMessage?: string;\n  icon?: ActionIcon;\n  enabled?: boolean;\n  batchMode: BatchMode;\n  bodyTemplate?: string;\n}\n\nexport type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';\n\nexport type BatchMode = 'batch' | 'individual';\n\nexport type ContentType = 'none' | 'json' | 'text';\n\nexport interface WebhookAction extends BaseAction {\n  type: 'webhook';\n  url: string;\n  method: HttpMethod;\n  contentType: ContentType;\n  headers?: Record<string, string>;\n}\n\nexport interface EventAction extends BaseAction {\n  type: 'event';\n  eventName: string;\n}\n\nexport type ItemAction = EventAction | WebhookAction;\n\nexport interface ActionOptions {\n  enabled?: boolean;\n  actionsList?: ItemAction[];\n  displayInHeader?: boolean;\n  displayWithItem?: boolean;\n}\n\nexport interface SelectionOptions {\n  enabled?: boolean;\n}\n\nexport interface ItemSelectionActionsEditorProps {\n  actionOptions?: ActionOptions;\n  selectionOptions?: SelectionOptions;\n  onChangeActions: (actions?: ActionOptions) => void;\n  onChangeSelection: (selection?: SelectionOptions) => void;\n}\n\nconst HTTP_METHODS: HttpMethod[] = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];\nconst BATCH_MODES: Array<{ value: BatchMode; label: string }> = [\n  { value: 'individual', label: 'Individual (one request per selection)' },\n  { value: 'batch', label: 'Batch (single request with all selections)' },\n];\nconst CONTENT_TYPES: Array<{ value: ContentType; label: string }> = [\n  { value: 'none', label: 'None' },\n  { value: 'json', label: 'JSON' },\n  { value: 'text', label: 'Text' },\n];\nconst BODY_METHODS: Set<HttpMethod> = new Set(['POST', 'PUT', 'PATCH']);\nconst BODY_CLEAR_CONFIRM_MESSAGE = 'Changing this option will remove the current body template. Continue?';\n\n/** Available action icons with their display components */\nexport const ACTION_ICONS: Array<{ value: ActionIcon; label: string; icon: ReactElement }> = [\n  { value: 'play', label: 'Play', icon: <PlayIcon fontSize=\"inherit\" /> },\n  { value: 'pause', label: 'Pause', icon: <PauseIcon fontSize=\"inherit\" /> },\n  { value: 'stop', label: 'Stop', icon: <StopIcon fontSize=\"inherit\" /> },\n  { value: 'delete', label: 'Delete', icon: <DeleteIcon fontSize=\"inherit\" /> },\n  { value: 'refresh', label: 'Refresh', icon: <RefreshIcon fontSize=\"inherit\" /> },\n  { value: 'send', label: 'Send', icon: <SendIcon fontSize=\"inherit\" /> },\n  { value: 'download', label: 'Download', icon: <DownloadIcon fontSize=\"inherit\" /> },\n  { value: 'upload', label: 'Upload', icon: <UploadIcon fontSize=\"inherit\" /> },\n  { value: 'check', label: 'Check', icon: <CheckIcon fontSize=\"inherit\" /> },\n  { value: 'close', label: 'Close', icon: <CloseIcon fontSize=\"inherit\" /> },\n  { value: 'alert', label: 'Alert', icon: <AlertIcon fontSize=\"inherit\" /> },\n  { value: 'info', label: 'Info', icon: <InfoIcon fontSize=\"inherit\" /> },\n  { value: 'settings', label: 'Settings', icon: <SettingsIcon fontSize=\"inherit\" /> },\n  { value: 'link', label: 'Link', icon: <LinkIcon fontSize=\"inherit\" /> },\n  { value: 'sync', label: 'Sync', icon: <SyncIcon fontSize=\"inherit\" /> },\n  { value: 'troubleshoot', label: 'Troubleshoot', icon: <MagnifyScan fontSize=\"inherit\" /> },\n  { value: 'ask-ai', label: 'Ask AI', icon: <RobotOutline fontSize=\"inherit\" /> },\n];\n\nconst URL_HELPER_TEXT = 'Supports interpolation: ${__data.fields[\"fieldName\"]}, ${__data.index}, ${__data.count}';\n\nfunction createDefaultEventAction(): EventAction {\n  return {\n    type: 'event',\n    name: 'New Event Action',\n    eventName: 'selection-action',\n    batchMode: 'individual',\n    enabled: true,\n  };\n}\n\nfunction createDefaultWebhookAction(): WebhookAction {\n  return {\n    type: 'webhook',\n    name: 'New Webhook Action',\n    url: '',\n    method: 'POST',\n    contentType: 'none',\n    batchMode: 'individual',\n    enabled: true,\n  };\n}\n\ninterface ItemActionEditorProps {\n  action: ItemAction;\n  index: number;\n  onChange: (index: number, action: ItemAction) => void;\n  onRemove: (index: number) => void;\n  onMoveUp: () => void;\n  onMoveDown: () => void;\n}\n\ninterface InterpolationHelperProps {\n  batchMode: BatchMode;\n}\n\nfunction InterpolationHelper({ batchMode }: InterpolationHelperProps): ReactElement {\n  let content: ReactElement = (\n    <div>\n      Individual mode patterns: <code>{'${__data.fields[\"field\"]}'}</code>, <code>{'${__data.index}'}</code>,{' '}\n      <code>{'${__data.count}'}</code>\n    </div>\n  );\n\n  if (batchMode === 'batch') {\n    content = (\n      <div>\n        Batch mode patterns: <code>{'${__data}'}</code>, <code>{\"${__data[0].fields['field']}\"}</code>,{' '}\n        <code>{\"${__data.fields['field']:csv}\"}</code>, <code>{'${__data.count}'}</code>\n      </div>\n    );\n  }\n\n  return (\n    <Typography variant=\"caption\" color=\"text.secondary\" sx={{ mb: 1, display: 'block' }}>\n      {content}\n    </Typography>\n  );\n}\n\nfunction EventActionEditor({\n  action,\n  index,\n  onChange,\n  onRemove,\n  onMoveDown,\n  onMoveUp,\n}: ItemActionEditorProps): ReactElement {\n  const eventAction = action as EventAction;\n\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const hasBodyTemplate = (eventAction.bodyTemplate ?? '').trim().length > 0;\n\n  const handleIncludesTemplateChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const nextContentType = event.target.value as 'custom' | 'none';\n\n      const bodyTemplate = nextContentType === 'custom' ? JSON.stringify({}) : undefined;\n\n      onChange(index, { ...eventAction, bodyTemplate: bodyTemplate });\n    },\n    [index, onChange, eventAction],\n  );\n\n  const handleBodyTemplateChange = useCallback(\n    (template: string) => {\n      onChange(index, { ...eventAction, bodyTemplate: template || undefined });\n    },\n    [index, onChange, eventAction],\n  );\n\n  const jsonDataTemplate = useMemo(() => {\n    if (eventAction.bodyTemplate) {\n      try {\n        return JSON.parse(eventAction.bodyTemplate);\n      } catch {\n        return {};\n      }\n    }\n  }, [eventAction.bodyTemplate]);\n\n  return (\n    <DragAndDropElement data={eventAction as unknown as Record<string, unknown>}>\n      <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" gap={4}>\n        <Stack direction=\"row\" gap={1}>\n          <IconButton\n            data-testid={`event-action-toggle#${eventAction.name}`}\n            size=\"small\"\n            onClick={() => setIsCollapsed(!isCollapsed)}\n          >\n            {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n          </IconButton>\n          <Typography variant=\"overline\" component=\"h4\" sx={{ textTransform: 'none' }}>\n            EVENT ACTION:{' '}\n            {eventAction.name ? (\n              <span>\n                <strong>{eventAction.name}</strong>\n              </span>\n            ) : (\n              <strong>{eventAction.name}</strong>\n            )}\n          </Typography>\n        </Stack>\n\n        <Stack direction=\"row\" gap={1}>\n          <InfoTooltip description=\"Remove action settings\" placement=\"top\">\n            <IconButton\n              size=\"small\"\n              sx={{ marginLeft: 'auto' }}\n              onClick={() => onRemove(index)}\n              key=\"delete-action-button\"\n            >\n              <DeleteIcon />\n            </IconButton>\n          </InfoTooltip>\n          <InfoTooltip description=\"Reorder action settings\" placement=\"top\">\n            <DragButton\n              onMoveUp={onMoveUp}\n              onMoveDown={onMoveDown}\n              menuSx={{\n                '.MuiPaper-root': { backgroundColor: (theme) => theme.palette.background.lighter },\n              }}\n              key=\"reorder-action-button\"\n            />\n          </InfoTooltip>\n        </Stack>\n      </Stack>\n\n      {!isCollapsed && (\n        <Stack spacing={2}>\n          <OptionsEditorControl\n            label=\"Enabled\"\n            control={\n              <Switch\n                checked={eventAction?.enabled ?? false}\n                onChange={(e) => onChange(index, { ...eventAction, enabled: e.target.checked })}\n              />\n            }\n          />\n\n          <Stack direction=\"row\" spacing={2}>\n            <TextField\n              label=\"Action Name\"\n              size=\"small\"\n              value={eventAction.name}\n              onChange={(e) => onChange(index, { ...eventAction, name: e.target.value })}\n              sx={{ flexGrow: 1 }}\n            />\n\n            <FormControl size=\"small\" sx={{ minWidth: 120 }}>\n              <InputLabel>Icon</InputLabel>\n              <Select\n                value={eventAction.icon || ''}\n                label=\"Icon\"\n                onChange={(e) => onChange(index, { ...eventAction, icon: (e.target.value as ActionIcon) || undefined })}\n              >\n                <MenuItem value=\"\">\n                  <em>None</em>\n                </MenuItem>\n                {ACTION_ICONS.map((iconOption) => (\n                  <MenuItem key={iconOption.value} value={iconOption.value}>\n                    <Stack direction=\"row\" alignItems=\"center\" spacing={1}>\n                      {iconOption.icon}\n                      <span>{iconOption.label}</span>\n                    </Stack>\n                  </MenuItem>\n                ))}\n              </Select>\n            </FormControl>\n          </Stack>\n\n          <Stack direction=\"row\" spacing={2}>\n            <TextField\n              label=\"Event Name\"\n              size=\"small\"\n              value={eventAction.eventName}\n              onChange={(e) => onChange(index, { ...eventAction, eventName: e.target.value })}\n              helperText=\"Name of the CustomEvent to dispatch (e.g., 'selection-action')\"\n              fullWidth\n            />\n\n            <FormControl size=\"small\" sx={{ flexGrow: 1, minWidth: 280 }}>\n              <InputLabel>Batch Mode</InputLabel>\n              <Select\n                value={eventAction.batchMode ?? 'individual'}\n                label=\"Batch Mode\"\n                onChange={(e) => onChange(index, { ...eventAction, batchMode: e.target.value as BatchMode })}\n              >\n                {BATCH_MODES.map((mode) => (\n                  <MenuItem key={mode.value} value={mode.value}>\n                    {mode.label}\n                  </MenuItem>\n                ))}\n              </Select>\n            </FormControl>\n          </Stack>\n\n          <FormControl component=\"fieldset\" size=\"small\">\n            <FormLabel component=\"legend\">Template</FormLabel>\n            <RadioGroup row value={hasBodyTemplate ? 'custom' : 'none'} onChange={handleIncludesTemplateChange}>\n              <FormControlLabel value=\"none\" control={<Radio size=\"small\" />} label=\"None\" />\n              <FormControlLabel value=\"custom\" control={<Radio size=\"small\" />} label=\"JSON template\" />\n            </RadioGroup>\n          </FormControl>\n\n          {hasBodyTemplate && (\n            <>\n              <InterpolationHelper batchMode={eventAction.batchMode} />\n              <JSONEditor\n                value={jsonDataTemplate || ''}\n                onChange={handleBodyTemplateChange}\n                minHeight=\"100px\"\n                maxHeight=\"200px\"\n              />\n            </>\n          )}\n\n          <TextField\n            label=\"Confirmation Message (optional)\"\n            size=\"small\"\n            value={eventAction.confirmMessage || ''}\n            onChange={(e) => onChange(index, { ...eventAction, confirmMessage: e.target.value || undefined })}\n            helperText=\"If set, shows a confirmation dialog before executing the action\"\n            fullWidth\n            multiline\n            rows={2}\n          />\n        </Stack>\n      )}\n    </DragAndDropElement>\n  );\n}\n\nfunction WebhookActionEditor({\n  action,\n  index,\n  onChange,\n  onRemove,\n  onMoveUp,\n  onMoveDown,\n}: ItemActionEditorProps): ReactElement {\n  const webhookAction = action as WebhookAction;\n  const [pendingChange, setPendingChange] = useState<\n    { kind: 'contentType'; value: ContentType } | { kind: 'method'; value: HttpMethod } | null\n  >(null);\n  const contentTypeValue = webhookAction.contentType ?? 'none';\n  const hasBodyTemplate = (webhookAction.bodyTemplate ?? '').trim().length > 0;\n  const supportsBody = BODY_METHODS.has(webhookAction.method);\n\n  const [isCollapsed, setIsCollapsed] = useState(true);\n\n  const handleBodyTemplateChange = useCallback(\n    (template: string) => {\n      onChange(index, { ...webhookAction, bodyTemplate: template || undefined });\n    },\n    [index, onChange, webhookAction],\n  );\n\n  const handleTextTemplateChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(index, { ...webhookAction, bodyTemplate: event.target.value || undefined });\n    },\n    [index, onChange, webhookAction],\n  );\n\n  const handleContentTypeChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const nextContentType = event.target.value as ContentType;\n      if (nextContentType === contentTypeValue) {\n        return;\n      }\n\n      if (hasBodyTemplate) {\n        setPendingChange({ kind: 'contentType', value: nextContentType });\n        return;\n      }\n\n      onChange(index, { ...webhookAction, contentType: nextContentType });\n    },\n    [contentTypeValue, hasBodyTemplate, index, onChange, webhookAction],\n  );\n\n  const handleMethodChange = useCallback(\n    (event: SelectChangeEvent<HttpMethod>) => {\n      const nextMethod = event.target.value as HttpMethod;\n      if (nextMethod === webhookAction.method) {\n        return;\n      }\n\n      const nextSupportsBody = BODY_METHODS.has(nextMethod);\n      if (!nextSupportsBody && hasBodyTemplate) {\n        setPendingChange({ kind: 'method', value: nextMethod });\n        return;\n      }\n\n      onChange(index, { ...webhookAction, method: nextMethod });\n    },\n    [hasBodyTemplate, index, onChange, webhookAction],\n  );\n\n  const handleConfirmClose = useCallback(() => {\n    setPendingChange(null);\n  }, []);\n\n  const handleConfirmApply = useCallback(() => {\n    if (!pendingChange) {\n      return;\n    }\n\n    if (pendingChange.kind === 'contentType') {\n      onChange(index, { ...webhookAction, contentType: pendingChange.value, bodyTemplate: undefined });\n    } else {\n      onChange(index, { ...webhookAction, method: pendingChange.value, bodyTemplate: undefined });\n    }\n\n    setPendingChange(null);\n  }, [index, onChange, pendingChange, webhookAction]);\n\n  const jsonBodyTemplate = useMemo(() => {\n    if (webhookAction.contentType === 'json' && webhookAction.bodyTemplate) {\n      try {\n        return JSON.parse(webhookAction.bodyTemplate);\n      } catch {\n        return {};\n      }\n    }\n  }, [webhookAction.bodyTemplate, webhookAction.contentType]);\n\n  return (\n    <DragAndDropElement data={webhookAction as unknown as Record<string, unknown>}>\n      <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" gap={4}>\n        <Stack direction=\"row\" gap={1}>\n          <IconButton\n            data-testid={`column-toggle#${webhookAction.name}`}\n            size=\"small\"\n            onClick={() => setIsCollapsed(!isCollapsed)}\n          >\n            {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n          </IconButton>\n          <Typography variant=\"overline\" component=\"h4\" sx={{ textTransform: 'none' }}>\n            WEBHOOK ACTION: <strong>{webhookAction.name}</strong>\n          </Typography>\n        </Stack>\n\n        <Stack direction=\"row\" gap={1}>\n          <InfoTooltip description=\"Remove action settings\" placement=\"top\">\n            <IconButton\n              size=\"small\"\n              sx={{ marginLeft: 'auto' }}\n              onClick={() => onRemove(index)}\n              key=\"delete-action-button\"\n            >\n              <DeleteIcon />\n            </IconButton>\n          </InfoTooltip>\n          <InfoTooltip description=\"Reorder action settings\" placement=\"top\">\n            <DragButton\n              onMoveUp={onMoveUp}\n              onMoveDown={onMoveDown}\n              menuSx={{\n                '.MuiPaper-root': { backgroundColor: (theme) => theme.palette.background.lighter },\n              }}\n              key=\"reorder-action-button\"\n            />\n          </InfoTooltip>\n        </Stack>\n      </Stack>\n\n      {!isCollapsed && (\n        <Stack spacing={2}>\n          <OptionsEditorControl\n            label=\"Enabled\"\n            control={\n              <Switch\n                checked={action?.enabled ?? false}\n                onChange={(e) => onChange(index, { ...webhookAction, enabled: e.target.checked })}\n              />\n            }\n          />\n\n          <Stack direction=\"row\" spacing={2}>\n            <TextField\n              label=\"Action Name\"\n              size=\"small\"\n              value={webhookAction.name}\n              onChange={(e) => onChange(index, { ...webhookAction, name: e.target.value })}\n              sx={{ flexGrow: 1 }}\n            />\n\n            <FormControl size=\"small\" sx={{ minWidth: 120 }}>\n              <InputLabel>Icon</InputLabel>\n              <Select\n                value={webhookAction.icon || ''}\n                label=\"Icon\"\n                onChange={(e) =>\n                  onChange(index, { ...webhookAction, icon: (e.target.value as ActionIcon) || undefined })\n                }\n              >\n                <MenuItem value=\"\">\n                  <em>None</em>\n                </MenuItem>\n                {ACTION_ICONS.map((iconOption) => (\n                  <MenuItem key={iconOption.value} value={iconOption.value}>\n                    <Stack direction=\"row\" alignItems=\"center\" spacing={1}>\n                      {iconOption.icon}\n                      <span>{iconOption.label}</span>\n                    </Stack>\n                  </MenuItem>\n                ))}\n              </Select>\n            </FormControl>\n          </Stack>\n\n          <TextField\n            label=\"URL\"\n            size=\"small\"\n            value={webhookAction.url}\n            onChange={(e) => onChange(index, { ...webhookAction, url: e.target.value })}\n            helperText={URL_HELPER_TEXT}\n            fullWidth\n          />\n\n          <Stack direction=\"row\" spacing={2}>\n            <FormControl size=\"small\" sx={{ minWidth: 120 }}>\n              <InputLabel>Method</InputLabel>\n              <Select value={webhookAction.method} label=\"Method\" onChange={handleMethodChange}>\n                {HTTP_METHODS.map((method) => (\n                  <MenuItem key={method} value={method}>\n                    {method}\n                  </MenuItem>\n                ))}\n              </Select>\n            </FormControl>\n\n            <FormControl size=\"small\" sx={{ flexGrow: 1 }}>\n              <InputLabel>Batch Mode</InputLabel>\n              <Select\n                value={webhookAction.batchMode}\n                label=\"Batch Mode\"\n                onChange={(e) => onChange(index, { ...webhookAction, batchMode: e.target.value as BatchMode })}\n              >\n                {BATCH_MODES.map((mode) => (\n                  <MenuItem key={mode.value} value={mode.value}>\n                    {mode.label}\n                  </MenuItem>\n                ))}\n              </Select>\n            </FormControl>\n          </Stack>\n\n          <FormControl component=\"fieldset\" size=\"small\">\n            <FormLabel component=\"legend\">Content Type</FormLabel>\n            <RadioGroup row value={contentTypeValue} onChange={handleContentTypeChange}>\n              {CONTENT_TYPES.map((option) => (\n                <FormControlLabel\n                  key={option.value}\n                  value={option.value}\n                  control={<Radio size=\"small\" />}\n                  label={option.label}\n                />\n              ))}\n            </RadioGroup>\n          </FormControl>\n\n          {supportsBody && contentTypeValue !== 'none' && (\n            <Box>\n              <Typography variant=\"body2\" color=\"text.secondary\" sx={{ mb: 1 }}>\n                {contentTypeValue === 'json' ? 'Body Template (JSON)' : 'Body Template (Text)'}\n              </Typography>\n              <InterpolationHelper batchMode={webhookAction.batchMode} />\n              {contentTypeValue === 'json' ? (\n                <JSONEditor\n                  value={jsonBodyTemplate || ''}\n                  onChange={handleBodyTemplateChange}\n                  minHeight=\"100px\"\n                  maxHeight=\"200px\"\n                />\n              ) : (\n                <TextField\n                  value={webhookAction.bodyTemplate || ''}\n                  onChange={handleTextTemplateChange}\n                  fullWidth\n                  multiline\n                  rows={5}\n                />\n              )}\n            </Box>\n          )}\n\n          <TextField\n            label=\"Confirmation Message (optional)\"\n            size=\"small\"\n            value={webhookAction.confirmMessage || ''}\n            onChange={(e) => onChange(index, { ...webhookAction, confirmMessage: e.target.value || undefined })}\n            helperText=\"If set, shows a confirmation dialog before executing the action\"\n            fullWidth\n            multiline\n            rows={2}\n          />\n        </Stack>\n      )}\n\n      <Dialog open={Boolean(pendingChange)} onClose={handleConfirmClose} aria-labelledby=\"selection-body-clear-title\">\n        <DialogTitle id=\"selection-body-clear-title\">Remove Body Template?</DialogTitle>\n        <DialogContent>\n          <DialogContentText>{BODY_CLEAR_CONFIRM_MESSAGE}</DialogContentText>\n        </DialogContent>\n        <DialogActions>\n          <Button onClick={handleConfirmClose}>Cancel</Button>\n          <Button onClick={handleConfirmApply} variant=\"contained\" color=\"primary\">\n            Continue\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </DragAndDropElement>\n  );\n}\n\nexport function ItemSelectionActionsEditor({\n  actionOptions,\n  selectionOptions,\n  onChangeActions,\n  onChangeSelection,\n}: ItemSelectionActionsEditorProps): ReactElement {\n  const actions = useMemo(\n    () => actionOptions || { enabled: true, displayInHeader: true, displayWithItem: false },\n    [actionOptions],\n  );\n\n  const handleEnableActionsChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    onChangeActions({ ...actions, enabled: checked ? true : undefined });\n  };\n\n  const handleEnableSelectionChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    onChangeSelection({ ...selectionOptions, enabled: checked ? true : undefined });\n  };\n\n  const handleDisplayInHeaderChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    onChangeActions({ ...actions, displayInHeader: checked ? true : undefined });\n  };\n\n  const handleDisplayWithItemChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    onChangeActions({ ...actions, displayWithItem: checked ? true : undefined });\n  };\n\n  const handleAddEventAction = useCallback(() => {\n    onChangeActions({ ...actions, actionsList: [...(actions.actionsList ?? []), createDefaultEventAction()] });\n  }, [actions, onChangeActions]);\n\n  const handleAddWebhookAction = useCallback(() => {\n    onChangeActions({ ...actions, actionsList: [...(actions.actionsList ?? []), createDefaultWebhookAction()] });\n  }, [actions, onChangeActions]);\n\n  const handleActionChange = useCallback(\n    (index: number, updatedAction: ItemAction) => {\n      const newActions = actions.actionsList ? [...actions.actionsList] : [];\n      newActions[index] = updatedAction;\n      onChangeActions({ ...actions, actionsList: newActions });\n    },\n    [actions, onChangeActions],\n  );\n\n  const handleRemoveAction = useCallback(\n    (index: number) => {\n      const newActions = actions.actionsList ? actions.actionsList.filter((_, i) => i !== index) : [];\n      onChangeActions(newActions.length > 0 ? { ...actions, actionsList: newActions } : undefined);\n    },\n    [actions, onChangeActions],\n  );\n\n  useDragAndDropMonitor({\n    elements: actions.actionsList as unknown as Array<Record<string, unknown>>,\n    accessKey: 'name',\n    onChange: (newElements) => {\n      onChangeActions({ ...actions, actionsList: newElements as unknown as ItemAction[] });\n    },\n  });\n\n  return (\n    <Stack spacing={1}>\n      <OptionsEditorControl\n        label=\"Enable Item Selection\"\n        description=\"Allow selecting items\"\n        control={<Switch checked={selectionOptions?.enabled ?? false} onChange={handleEnableSelectionChange} />}\n      />\n      <OptionsEditorControl\n        label=\"Enable Item Actions\"\n        description=\"Allow executing actions on selected items\"\n        control={<Switch checked={actionOptions?.enabled ?? false} onChange={handleEnableActionsChange} />}\n      />\n      <OptionsEditorControl\n        label=\"Display Actions in Panel Header\"\n        description=\"Show action buttons in the panel header when items are selected\"\n        control={<Switch checked={actionOptions?.displayInHeader ?? false} onChange={handleDisplayInHeaderChange} />}\n      />\n      <OptionsEditorControl\n        label=\"Display Actions with Each Item\"\n        description=\"Show action buttons alongside each item when selected\"\n        control={<Switch checked={actionOptions?.displayWithItem ?? false} onChange={handleDisplayWithItemChange} />}\n      />\n      <OptionsEditorGroup title=\"Actions\">\n        <Stack spacing={3}>\n          {!actions.actionsList || actions.actionsList.length === 0 ? (\n            <Typography variant=\"body2\" color=\"text.secondary\" fontStyle=\"italic\">\n              No actions defined. Add an action to enable triggering events or webhooks on selected data.\n            </Typography>\n          ) : (\n            <Stack spacing={1} border=\"none\">\n              {actions.actionsList &&\n                actions.actionsList.map((action, index) => (\n                  <Box key={index} borderBottom={1} borderColor={(theme) => theme.palette.divider} pb={1}>\n                    {action.type === 'event' ? (\n                      <EventActionEditor\n                        action={action}\n                        index={index}\n                        onChange={handleActionChange}\n                        onRemove={handleRemoveAction}\n                        onMoveDown={() =>\n                          onChangeActions({ ...actions, actionsList: handleMoveDown(action, actions.actionsList!) })\n                        }\n                        onMoveUp={() =>\n                          onChangeActions({ ...actions, actionsList: handleMoveUp(action, actions.actionsList!) })\n                        }\n                      />\n                    ) : (\n                      <WebhookActionEditor\n                        action={action}\n                        index={index}\n                        onChange={handleActionChange}\n                        onRemove={handleRemoveAction}\n                        onMoveDown={() =>\n                          onChangeActions({ ...actions, actionsList: handleMoveDown(action, actions.actionsList!) })\n                        }\n                        onMoveUp={() =>\n                          onChangeActions({ ...actions, actionsList: handleMoveUp(action, actions.actionsList!) })\n                        }\n                      />\n                    )}\n                  </Box>\n                ))}\n            </Stack>\n          )}\n\n          <Stack direction=\"row\" spacing={1}>\n            <Button variant=\"contained\" startIcon={<PlusIcon />} onClick={handleAddEventAction}>\n              Add Event Action\n            </Button>\n            <Button variant=\"contained\" startIcon={<PlusIcon />} onClick={handleAddWebhookAction}>\n              Add Webhook Action\n            </Button>\n          </Stack>\n        </Stack>\n      </OptionsEditorGroup>\n    </Stack>\n  );\n}\n"],"names":["Box","Button","Dialog","DialogActions","DialogContent","DialogContentText","DialogTitle","FormControl","FormControlLabel","FormLabel","IconButton","InputLabel","MenuItem","Radio","RadioGroup","Select","Stack","Switch","TextField","Typography","DragAndDropElement","DragButton","handleMoveDown","handleMoveUp","InfoTooltip","JSONEditor","OptionsEditorControl","OptionsEditorGroup","useDragAndDropMonitor","AlertIcon","CheckIcon","ChevronDown","ChevronRight","CloseIcon","SettingsIcon","DeleteIcon","DownloadIcon","InfoIcon","LinkIcon","MagnifyScan","PauseIcon","PlayIcon","PlusIcon","RefreshIcon","RobotOutline","SendIcon","StopIcon","SyncIcon","UploadIcon","useCallback","useMemo","useState","HTTP_METHODS","BATCH_MODES","value","label","CONTENT_TYPES","BODY_METHODS","Set","BODY_CLEAR_CONFIRM_MESSAGE","ACTION_ICONS","icon","fontSize","URL_HELPER_TEXT","createDefaultEventAction","type","name","eventName","batchMode","enabled","createDefaultWebhookAction","url","method","contentType","InterpolationHelper","content","div","code","variant","color","sx","mb","display","EventActionEditor","action","index","onChange","onRemove","onMoveDown","onMoveUp","eventAction","isCollapsed","setIsCollapsed","hasBodyTemplate","bodyTemplate","trim","length","handleIncludesTemplateChange","event","nextContentType","target","JSON","stringify","undefined","handleBodyTemplateChange","template","jsonDataTemplate","parse","data","direction","alignItems","justifyContent","gap","data-testid","size","onClick","component","textTransform","span","strong","description","placement","marginLeft","menuSx","backgroundColor","theme","palette","background","lighter","spacing","control","checked","e","flexGrow","minWidth","em","map","iconOption","helperText","fullWidth","mode","row","minHeight","maxHeight","confirmMessage","multiline","rows","WebhookActionEditor","webhookAction","pendingChange","setPendingChange","contentTypeValue","supportsBody","has","handleTextTemplateChange","handleContentTypeChange","kind","handleMethodChange","nextMethod","nextSupportsBody","handleConfirmClose","handleConfirmApply","jsonBodyTemplate","option","open","Boolean","onClose","aria-labelledby","id","ItemSelectionActionsEditor","actionOptions","selectionOptions","onChangeActions","onChangeSelection","actions","displayInHeader","displayWithItem","handleEnableActionsChange","_","handleEnableSelectionChange","handleDisplayInHeaderChange","handleDisplayWithItemChange","handleAddEventAction","actionsList","handleAddWebhookAction","handleActionChange","updatedAction","newActions","handleRemoveAction","filter","i","elements","accessKey","newElements","title","fontStyle","border","borderBottom","borderColor","divider","pb","startIcon"],"mappings":"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"}

package/dist/components/PluginKindSelect/PluginKindSelect.js

@@ -25,9 +25,9 @@ import { useListPluginMetadata } from "../../runtime/index.js";
     const { data, isLoading } = useListPluginMetadata(pluginTypes);
     const sortedData = useMemo(()=>{
         if (filteredQueryPlugins?.length) {
-            return data?.filter((i)=>filteredQueryPlugins.includes(i.spec.name))?.sort((a, b)=>a.spec.display.name.localeCompare(b.spec.display.name));
+            return data?.filter((i)=>filteredQueryPlugins.includes(i.spec.name))?.toSorted((a, b)=>a.spec.display.name.localeCompare(b.spec.display.name));
         }
-        return data?.sort((a, b)=>a.spec.display.name.localeCompare(b.spec.display.name));
+        return data?.toSorted((a, b)=>a.spec.display.name.localeCompare(b.spec.display.name));
     }, [
         data,
         filteredQueryPlugins

package/dist/components/PluginKindSelect/PluginKindSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginKindSelect/PluginKindSelect.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 type { TextFieldProps } from '@mui/material';\nimport { MenuItem, TextField } from '@mui/material';\nimport type { ReactElement } from 'react';\nimport { forwardRef, useCallback, useMemo } from 'react';\n\nimport type { PluginType } from '../../model';\nimport { useListPluginMetadata } from '../../runtime';\nimport type { PluginEditorSelection } from '../PluginEditor';\n\nexport interface PluginKindSelectProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'children'> {\n  filteredQueryPlugins?: string[];\n  pluginTypes: PluginType[];\n  value?: PluginEditorSelection;\n  onChange?: (s: PluginEditorSelection) => void;\n}\n\n/**\n * Displays a MUI Select input for selecting a plugin's kind from a list of all the available plugins of some specific\n * plugin types. (e.g. \"Show a list of all the Panel plugins\", or \"Show a list of all the Variable plugins\", or \"Show\n * a list of all the TimeSeriesQuery, TraceQuery, ProfileQuery, and LogQuery plugins\").\n * The value of the select is the kind of the plugin, but you can also listen to the `onPluginTypeChange` event to know\n * when the user changes the plugin type (it fires at start for the default value.)\n */\nexport const PluginKindSelect = forwardRef((props: PluginKindSelectProps, ref): ReactElement => {\n  const { pluginTypes, value: propValue, onChange, filteredQueryPlugins, ...others } = props;\n  const { data, isLoading } = useListPluginMetadata(pluginTypes);\n\n  const sortedData = useMemo(() => {\n    if (filteredQueryPlugins?.length) {\n      return data\n        ?.filter((i) => filteredQueryPlugins.includes(i.spec.name))\n        ?.sort((a, b) => a.spec.display.name.localeCompare(b.spec.display.name));\n    }\n\n    return data?.sort((a, b) => a.spec.display.name.localeCompare(b.spec.display.name));\n  }, [data, filteredQueryPlugins]);\n\n  // Pass an empty value while options are still loading so MUI doesn't complain about us using an \"out of range\" value\n  const value = !propValue || isLoading ? '' : selectionToOptionValue(propValue);\n\n  const handleChange = (event: { target: { value: string } }): void => {\n    onChange?.(optionValueToSelection(event.target.value));\n  };\n\n  const renderValue = useCallback(\n    (selected: unknown) => {\n      if (selected === '') {\n        return '';\n      }\n      const selectedValue = optionValueToSelection(selected as string);\n      return sortedData?.find((v) => v.kind === selectedValue.type && v.spec.name === selectedValue.kind)?.spec.display\n        .name;\n    },\n    [sortedData],\n  );\n\n  // TODO: Does this need a loading indicator of some kind?\n  return (\n    <TextField\n      select\n      inputRef={ref}\n      {...others}\n      value={value}\n      aria-label={value}\n      onChange={handleChange}\n      SelectProps={{ renderValue }}\n      data-testid=\"plugin-kind-select\"\n    >\n      {isLoading && <MenuItem value=\"\">Loading...</MenuItem>}\n      {sortedData?.map((metadata) => (\n        <MenuItem\n          data-testid=\"option\"\n          key={metadata.kind + metadata.spec.name}\n          value={selectionToOptionValue({ type: metadata.kind, kind: metadata.spec.name })}\n        >\n          {metadata.spec.display.name}\n        </MenuItem>\n      ))}\n    </TextField>\n  );\n});\nPluginKindSelect.displayName = 'PluginKindSelect';\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a PluginEditorSelection,\n * returns a string value like `{type}_____{kind}` that can be used as a Select input value.\n * @param selector\n */\nfunction selectionToOptionValue(selector: PluginEditorSelection): string {\n  return [selector.type, selector.kind].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{type}_____{kind}`,\n * returns a PluginEditorSelection to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelection(optionValue: string): PluginEditorSelection {\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const type = words[0] as PluginType | undefined;\n  const kind = words[1];\n  if (type === undefined || kind === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    type,\n    kind,\n  };\n}\n"],"names":["MenuItem","TextField","forwardRef","useCallback","useMemo","useListPluginMetadata","PluginKindSelect","props","ref","pluginTypes","value","propValue","onChange","filteredQueryPlugins","others","data","isLoading","sortedData","length","filter","i","includes","spec","name","sort","a","b","display","localeCompare","selectionToOptionValue","handleChange","event","optionValueToSelection","target","renderValue","selected","selectedValue","find","v","kind","type","select","inputRef","aria-label","SelectProps","data-testid","map","metadata","displayName","OPTION_VALUE_DELIMITER","selector","join","optionValue","words","split","undefined","Error"],"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;;AAGjC,SAASA,QAAQ,EAAEC,SAAS,QAAQ,gBAAgB;AAEpD,SAASC,UAAU,EAAEC,WAAW,EAAEC,OAAO,QAAQ,QAAQ;AAGzD,SAASC,qBAAqB,QAAQ,yBAAgB;AAUtD;;;;;;CAMC,GACD,OAAO,MAAMC,iCAAmBJ,WAAW,CAACK,OAA8BC;IACxE,MAAM,EAAEC,WAAW,EAAEC,OAAOC,SAAS,EAAEC,QAAQ,EAAEC,oBAAoB,EAAE,GAAGC,QAAQ,GAAGP;IACrF,MAAM,EAAEQ,IAAI,EAAEC,SAAS,EAAE,GAAGX,sBAAsBI;IAElD,MAAMQ,aAAab,QAAQ;QACzB,IAAIS,sBAAsBK,QAAQ;YAChC,OAAOH,MACHI,OAAO,CAACC,IAAMP,qBAAqBQ,QAAQ,CAACD,EAAEE,IAAI,CAACC,IAAI,IACvDC,KAAK,CAACC,GAAGC,IAAMD,EAAEH,IAAI,CAACK,OAAO,CAACJ,IAAI,CAACK,aAAa,CAACF,EAAEJ,IAAI,CAACK,OAAO,CAACJ,IAAI;QAC1E;QAEA,OAAOR,MAAMS,KAAK,CAACC,GAAGC,IAAMD,EAAEH,IAAI,CAACK,OAAO,CAACJ,IAAI,CAACK,aAAa,CAACF,EAAEJ,IAAI,CAACK,OAAO,CAACJ,IAAI;IACnF,GAAG;QAACR;QAAMF;KAAqB;IAE/B,qHAAqH;IACrH,MAAMH,QAAQ,CAACC,aAAaK,YAAY,KAAKa,uBAAuBlB;IAEpE,MAAMmB,eAAe,CAACC;QACpBnB,WAAWoB,uBAAuBD,MAAME,MAAM,CAACvB,KAAK;IACtD;IAEA,MAAMwB,cAAc/B,YAClB,CAACgC;QACC,IAAIA,aAAa,IAAI;YACnB,OAAO;QACT;QACA,MAAMC,gBAAgBJ,uBAAuBG;QAC7C,OAAOlB,YAAYoB,KAAK,CAACC,IAAMA,EAAEC,IAAI,KAAKH,cAAcI,IAAI,IAAIF,EAAEhB,IAAI,CAACC,IAAI,KAAKa,cAAcG,IAAI,GAAGjB,KAAKK,QACvGJ;IACL,GACA;QAACN;KAAW;IAGd,yDAAyD;IACzD,qBACE,MAAChB;QACCwC,MAAM;QACNC,UAAUlC;QACT,GAAGM,MAAM;QACVJ,OAAOA;QACPiC,cAAYjC;QACZE,UAAUkB;QACVc,aAAa;YAAEV;QAAY;QAC3BW,eAAY;;YAEX7B,2BAAa,KAAChB;gBAASU,OAAM;0BAAG;;YAChCO,YAAY6B,IAAI,CAACC,yBAChB,KAAC/C;oBACC6C,eAAY;oBAEZnC,OAAOmB,uBAAuB;wBAAEW,MAAMO,SAASR,IAAI;wBAAEA,MAAMQ,SAASzB,IAAI,CAACC,IAAI;oBAAC;8BAE7EwB,SAASzB,IAAI,CAACK,OAAO,CAACJ,IAAI;mBAHtBwB,SAASR,IAAI,GAAGQ,SAASzB,IAAI,CAACC,IAAI;;;AAQjD,GAAG;AACHjB,iBAAiB0C,WAAW,GAAG;AAE/B,kDAAkD;AAClD,MAAMC,yBAAyB;AAE/B;;;;CAIC,GACD,SAASpB,uBAAuBqB,QAA+B;IAC7D,OAAO;QAACA,SAASV,IAAI;QAAEU,SAASX,IAAI;KAAC,CAACY,IAAI,CAACF;AAC7C;AAEA;;;;CAIC,GACD,SAASjB,uBAAuBoB,WAAmB;IACjD,MAAMC,QAAQD,YAAYE,KAAK,CAACL;IAChC,MAAMT,OAAOa,KAAK,CAAC,EAAE;IACrB,MAAMd,OAAOc,KAAK,CAAC,EAAE;IACrB,IAAIb,SAASe,aAAahB,SAASgB,WAAW;QAC5C,MAAM,IAAIC,MAAM;IAClB;IACA,OAAO;QACLhB;QACAD;IACF;AACF"}
+{"version":3,"sources":["../../../src/components/PluginKindSelect/PluginKindSelect.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 type { TextFieldProps } from '@mui/material';\nimport { MenuItem, TextField } from '@mui/material';\nimport type { ReactElement } from 'react';\nimport { forwardRef, useCallback, useMemo } from 'react';\n\nimport type { PluginType } from '../../model';\nimport { useListPluginMetadata } from '../../runtime';\nimport type { PluginEditorSelection } from '../PluginEditor';\n\nexport interface PluginKindSelectProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'children'> {\n  filteredQueryPlugins?: string[];\n  pluginTypes: PluginType[];\n  value?: PluginEditorSelection;\n  onChange?: (s: PluginEditorSelection) => void;\n}\n\n/**\n * Displays a MUI Select input for selecting a plugin's kind from a list of all the available plugins of some specific\n * plugin types. (e.g. \"Show a list of all the Panel plugins\", or \"Show a list of all the Variable plugins\", or \"Show\n * a list of all the TimeSeriesQuery, TraceQuery, ProfileQuery, and LogQuery plugins\").\n * The value of the select is the kind of the plugin, but you can also listen to the `onPluginTypeChange` event to know\n * when the user changes the plugin type (it fires at start for the default value.)\n */\nexport const PluginKindSelect = forwardRef((props: PluginKindSelectProps, ref): ReactElement => {\n  const { pluginTypes, value: propValue, onChange, filteredQueryPlugins, ...others } = props;\n  const { data, isLoading } = useListPluginMetadata(pluginTypes);\n\n  const sortedData = useMemo(() => {\n    if (filteredQueryPlugins?.length) {\n      return data\n        ?.filter((i) => filteredQueryPlugins.includes(i.spec.name))\n        ?.toSorted((a, b) => a.spec.display.name.localeCompare(b.spec.display.name));\n    }\n\n    return data?.toSorted((a, b) => a.spec.display.name.localeCompare(b.spec.display.name));\n  }, [data, filteredQueryPlugins]);\n\n  // Pass an empty value while options are still loading so MUI doesn't complain about us using an \"out of range\" value\n  const value = !propValue || isLoading ? '' : selectionToOptionValue(propValue);\n\n  const handleChange = (event: { target: { value: string } }): void => {\n    onChange?.(optionValueToSelection(event.target.value));\n  };\n\n  const renderValue = useCallback(\n    (selected: unknown) => {\n      if (selected === '') {\n        return '';\n      }\n      const selectedValue = optionValueToSelection(selected as string);\n      return sortedData?.find((v) => v.kind === selectedValue.type && v.spec.name === selectedValue.kind)?.spec.display\n        .name;\n    },\n    [sortedData],\n  );\n\n  // TODO: Does this need a loading indicator of some kind?\n  return (\n    <TextField\n      select\n      inputRef={ref}\n      {...others}\n      value={value}\n      aria-label={value}\n      onChange={handleChange}\n      SelectProps={{ renderValue }}\n      data-testid=\"plugin-kind-select\"\n    >\n      {isLoading && <MenuItem value=\"\">Loading...</MenuItem>}\n      {sortedData?.map((metadata) => (\n        <MenuItem\n          data-testid=\"option\"\n          key={metadata.kind + metadata.spec.name}\n          value={selectionToOptionValue({ type: metadata.kind, kind: metadata.spec.name })}\n        >\n          {metadata.spec.display.name}\n        </MenuItem>\n      ))}\n    </TextField>\n  );\n});\nPluginKindSelect.displayName = 'PluginKindSelect';\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a PluginEditorSelection,\n * returns a string value like `{type}_____{kind}` that can be used as a Select input value.\n * @param selector\n */\nfunction selectionToOptionValue(selector: PluginEditorSelection): string {\n  return [selector.type, selector.kind].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{type}_____{kind}`,\n * returns a PluginEditorSelection to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelection(optionValue: string): PluginEditorSelection {\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const type = words[0] as PluginType | undefined;\n  const kind = words[1];\n  if (type === undefined || kind === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    type,\n    kind,\n  };\n}\n"],"names":["MenuItem","TextField","forwardRef","useCallback","useMemo","useListPluginMetadata","PluginKindSelect","props","ref","pluginTypes","value","propValue","onChange","filteredQueryPlugins","others","data","isLoading","sortedData","length","filter","i","includes","spec","name","toSorted","a","b","display","localeCompare","selectionToOptionValue","handleChange","event","optionValueToSelection","target","renderValue","selected","selectedValue","find","v","kind","type","select","inputRef","aria-label","SelectProps","data-testid","map","metadata","displayName","OPTION_VALUE_DELIMITER","selector","join","optionValue","words","split","undefined","Error"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
 import type { TimeOption, TimeZoneOption } from '@perses-dev/components';
 import type { ReactElement } from 'react';
-export declare const DEFAULT_REFRESH_INTERVAL_OPTIONS: TimeOption[];
 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,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAiBzE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAW1C,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

@@ -21,53 +21,17 @@ import ZoomOut from "mdi-material-ui/MinusCircleOutline";
 import ZoomIn from "mdi-material-ui/PlusCircleOutline";
 import RefreshIcon from "mdi-material-ui/Refresh";
 import { useCallback } from "react";
-import { TOOLTIP_TEXT } from "../../constants/index.js";
-import { useTimeRange, useShowCustomTimeRangeSetting, useTimeRangeOptionsSetting, useShowZoomRangeSetting, useDisableAutoRefreshSetting } from "../../runtime/index.js";
-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 { 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 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';\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/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,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,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

@@ -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),