@perses-dev/dashboards 0.29.1 → 0.31.0

package/dist/components/SaveDashboardButton/SaveDashboardButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"sourcesContent":["// Copyright 2023 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 { useState } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport { DashboardResource, isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { useDashboard, useEditMode, useSaveChangesConfirmationDialog, useTemplateVariableActions } from '../../context';\n\nexport interface SaveDashboardButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  onSave?: (entity: DashboardResource) => Promise<DashboardResource>;\n  isDisabled: boolean;\n  variant?: 'contained' | 'text' | 'outlined';\n}\n\nexport const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' }: SaveDashboardButtonProps) => {\n  const [isSavingDashboard, setSavingDashboard] = useState<boolean>(false);\n  const { dashboard } = useDashboard();\n  const { getSavedVariablesStatus, setVariableDefaultValues } = useTemplateVariableActions();\n  const isSavedVariableModified = getSavedVariablesStatus();\n  const { timeRange } = useTimeRange();\n  const { setEditMode } = useEditMode();\n  const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();\n\n  const onSaveButtonClick = () => {\n    const isSavedDurationModified =\n      isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;\n\n    // Save dashboard if active timeRange from plugin-system is relative and different than currently saved\n    if (isSavedDurationModified || isSavedVariableModified) {\n      openSaveChangesConfirmationDialog({\n        onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables) => {\n          if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange === true) {\n            dashboard.spec.duration = timeRange.pastDuration;\n          }\n          if (saveDefaultVariables === true) {\n            const variables = setVariableDefaultValues();\n            dashboard.spec.variables = variables;\n          }\n          saveDashboard();\n        },\n        onCancel: () => {\n          closeSaveChangesConfirmationDialog();\n        },\n      });\n    } else {\n      saveDashboard();\n    }\n  };\n\n  const saveDashboard = () => {\n    if (onSave !== undefined) {\n      setSavingDashboard(true);\n      onSave(dashboard)\n        .then(() => {\n          setSavingDashboard(false);\n          closeSaveChangesConfirmationDialog();\n          setEditMode(false);\n        })\n        .catch(() => {\n          setSavingDashboard(false);\n        });\n    } else {\n      setEditMode(false);\n    }\n  };\n\n  return (\n    <Button variant={variant} onClick={onSaveButtonClick} disabled={isDisabled || isSavingDashboard}>\n      Save\n    </Button>\n  );\n};\n"],"names":["useState","Button","isRelativeTimeRange","useTimeRange","useDashboard","useEditMode","useSaveChangesConfirmationDialog","useTemplateVariableActions","SaveDashboardButton","onSave","isDisabled","variant","isSavingDashboard","setSavingDashboard","dashboard","getSavedVariablesStatus","setVariableDefaultValues","isSavedVariableModified","timeRange","setEditMode","openSaveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","onSaveButtonClick","isSavedDurationModified","spec","duration","pastDuration","onSaveChanges","saveDefaultTimeRange","saveDefaultVariables","variables","saveDashboard","onCancel","undefined","then","catch","onClick","disabled"],"mappings":"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"}

package/dist/components/SaveDashboardButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SaveDashboardButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SaveDashboardButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SaveDashboardButton/index.tsx"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC"}

package/dist/components/SaveDashboardButton/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './SaveDashboardButton';
+
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/TimeRangeControls/TimeRangeControls.js

@@ -17,7 +17,7 @@ import { DateTimeRangePicker, InfoTooltip } from '@perses-dev/components';
 import { useTimeRange } from '@perses-dev/plugin-system';
 import { isDurationString } from '@perses-dev/core';
 import { TOOLTIP_TEXT } from '../../constants';
-import { useDefaultTimeRange } from '../../context';
+import { useDashboardDuration } from '../../context';
 import { ToolbarIconButton } from '../ToolbarIconButton';
 export const TIME_OPTIONS = [
     {
@@ -79,17 +79,17 @@ const DEFAULT_HEIGHT = '34px';
 export function TimeRangeControls({ heightPx , showRefresh =true  }) {
     const { timeRange , setTimeRange , refresh  } = useTimeRange();
     // TODO: Remove this since it couples to the dashboard context
-    const defaultTimeRange = useDefaultTimeRange();
+    const dashboardDuration = useDashboardDuration();
     // Convert height to a string, then use the string for styling
     const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
     // add time shortcut if one does not match duration from dashboard JSON
-    if (!TIME_OPTIONS.some((option)=>option.value.pastDuration === defaultTimeRange.pastDuration)) {
-        if (isDurationString(defaultTimeRange.pastDuration)) {
+    if (!TIME_OPTIONS.some((option)=>option.value.pastDuration === dashboardDuration)) {
+        if (isDurationString(dashboardDuration)) {
             TIME_OPTIONS.push({
                 value: {
-                    pastDuration: defaultTimeRange.pastDuration
+                    pastDuration: dashboardDuration
                 },
-                display: `Last ${defaultTimeRange.pastDuration}`
+                display: `Last ${dashboardDuration}`
             });
         }
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright 2023 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 RefreshIcon from 'mdi-material-ui/Refresh';\nimport { Stack } from '@mui/material';\nimport { DateTimeRangePicker, InfoTooltip, TimeOption } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isDurationString } from '@perses-dev/core';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDefaultTimeRange } from '../../context';\nimport { ToolbarIconButton } from '../ToolbarIconButton';\n\nexport const TIME_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n  { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n  { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n  { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n  { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n  { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n  { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n  { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n  { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n  // The controls look best at heights >= 28 pixels\n  heightPx?: number;\n\n  // Whether to show the refresh button or not\n  showRefresh?: boolean;\n}\n\nexport function TimeRangeControls({ heightPx, showRefresh = true }: TimeRangeControlsProps) {\n  const { timeRange, setTimeRange, refresh } = useTimeRange();\n  // TODO: Remove this since it couples to the dashboard context\n  const defaultTimeRange = useDefaultTimeRange();\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 shortcut if one does not match duration from dashboard JSON\n  if (!TIME_OPTIONS.some((option) => option.value.pastDuration === defaultTimeRange.pastDuration)) {\n    if (isDurationString(defaultTimeRange.pastDuration)) {\n      TIME_OPTIONS.push({\n        value: { pastDuration: defaultTimeRange.pastDuration },\n        display: `Last ${defaultTimeRange.pastDuration}`,\n      });\n    }\n  }\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      <DateTimeRangePicker timeOptions={TIME_OPTIONS} value={timeRange} onChange={setTimeRange} height={height} />\n      {showRefresh && (\n        <InfoTooltip description={TOOLTIP_TEXT.refreshDashboard}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.refreshDashboard} onClick={refresh} sx={{ height }}>\n            <RefreshIcon />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n    </Stack>\n  );\n}\n"],"names":["RefreshIcon","Stack","DateTimeRangePicker","InfoTooltip","useTimeRange","isDurationString","TOOLTIP_TEXT","useDefaultTimeRange","ToolbarIconButton","TIME_OPTIONS","value","pastDuration","display","DEFAULT_HEIGHT","TimeRangeControls","heightPx","showRefresh","timeRange","setTimeRange","refresh","defaultTimeRange","height","undefined","some","option","push","direction","spacing","timeOptions","onChange","description","refreshDashboard","aria-label","onClick","sx"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright 2023 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 RefreshIcon from 'mdi-material-ui/Refresh';\nimport { Stack } from '@mui/material';\nimport { DateTimeRangePicker, InfoTooltip, TimeOption } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isDurationString } from '@perses-dev/core';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDashboardDuration } from '../../context';\nimport { ToolbarIconButton } from '../ToolbarIconButton';\n\nexport const TIME_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n  { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n  { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n  { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n  { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n  { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n  { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n  { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n  { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n  // The controls look best at heights >= 28 pixels\n  heightPx?: number;\n\n  // Whether to show the refresh button or not\n  showRefresh?: boolean;\n}\n\nexport function TimeRangeControls({ heightPx, showRefresh = true }: TimeRangeControlsProps) {\n  const { timeRange, setTimeRange, refresh } = useTimeRange();\n  // TODO: Remove this since it couples to the dashboard context\n  const dashboardDuration = useDashboardDuration();\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 shortcut if one does not match duration from dashboard JSON\n  if (!TIME_OPTIONS.some((option) => option.value.pastDuration === dashboardDuration)) {\n    if (isDurationString(dashboardDuration)) {\n      TIME_OPTIONS.push({\n        value: { pastDuration: dashboardDuration },\n        display: `Last ${dashboardDuration}`,\n      });\n    }\n  }\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      <DateTimeRangePicker timeOptions={TIME_OPTIONS} value={timeRange} onChange={setTimeRange} height={height} />\n      {showRefresh && (\n        <InfoTooltip description={TOOLTIP_TEXT.refreshDashboard}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.refreshDashboard} onClick={refresh} sx={{ height }}>\n            <RefreshIcon />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n    </Stack>\n  );\n}\n"],"names":["RefreshIcon","Stack","DateTimeRangePicker","InfoTooltip","useTimeRange","isDurationString","TOOLTIP_TEXT","useDashboardDuration","ToolbarIconButton","TIME_OPTIONS","value","pastDuration","display","DEFAULT_HEIGHT","TimeRangeControls","heightPx","showRefresh","timeRange","setTimeRange","refresh","dashboardDuration","height","undefined","some","option","push","direction","spacing","timeOptions","onChange","description","refreshDashboard","aria-label","onClick","sx"],"mappings":"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"}

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { VariableDefinition } from '@perses-dev/core';
-export declare function VariableEditForm({ initialVariableDefinition, onChange, onCancel, }: {
+interface VariableEditFormProps {
     initialVariableDefinition: VariableDefinition;
     onChange: (def: VariableDefinition) => void;
     onCancel: () => void;
-}): JSX.Element;
+}
+export declare function VariableEditForm(props: VariableEditFormProps): JSX.Element;
+export {};
 //# sourceMappingURL=VariableEditorForm.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":";AAiCA,OAAO,EAAE,kBAAkB,EAA0B,MAAM,kBAAkB,CAAC;AAsF9E,wBAAgB,gBAAgB,CAAC,EAC/B,yBAAyB,EACzB,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,QAAQ,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eAgNA"}
+{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":";AAgCA,OAAO,EAAE,kBAAkB,EAA0B,MAAM,kBAAkB,CAAC;AA6B9E,UAAU,qBAAqB;IAC7B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,QAAQ,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eA+O5D"}

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

@@ -12,16 +12,13 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useMemo, useState } from 'react';
-import { Box, Typography, Switch, TextField, Grid, FormControl, InputLabel, MenuItem, Select, Button, Stack, Alert, Chip, IconButton, ClickAwayListener } from '@mui/material';
+import { Box, Typography, Switch, TextField, Grid, FormControl, FormControlLabel, InputLabel, MenuItem, Select, Button, Stack, ClickAwayListener, Divider } from '@mui/material';
 import { useImmer } from 'use-immer';
 import { PluginEditor } from '@perses-dev/plugin-system';
-import { ErrorBoundary, InfoTooltip } from '@perses-dev/components';
-import Refresh from 'mdi-material-ui/Refresh';
-import Clipboard from 'mdi-material-ui/ClipboardOutline';
-import { TOOLTIP_TEXT } from '../../../constants';
-import { useListVariablePluginValues, VARIABLE_TYPES } from '../variable-model';
+import { ErrorBoundary } from '@perses-dev/components';
+import { VARIABLE_TYPES } from '../variable-model';
+import { VariableListPreview, VariablePreview } from './VariablePreview';
 import { getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';
-const DEFAULT_MAX_PREVIEW_VALUES = 50;
 // TODO: Replace with proper validation library
 function getValidation(state) {
     /** Name validation */ let name = null;
@@ -37,100 +34,22 @@ function getValidation(state) {
         isValid: !name
     };
 }
-const SectionHeader = ({ children  })=>/*#__PURE__*/ _jsx(Typography, {
-        pb: 2,
-        variant: "subtitle1",
-        children: children
-    });
-function VariableListPreview({ definition , onRefresh  }) {
-    const { data , isFetching , error  } = useListVariablePluginValues(definition);
-    const [maxValues, setMaxValues] = useState(DEFAULT_MAX_PREVIEW_VALUES);
-    const showAll = ()=>{
-        setMaxValues(undefined);
-    };
-    let notShown = 0;
-    if (data && (data === null || data === void 0 ? void 0 : data.length) > 0 && maxValues) {
-        notShown = data.length - maxValues;
-    }
-    const errorMessage = error === null || error === void 0 ? void 0 : error.message;
-    return /*#__PURE__*/ _jsxs(Box, {
-        children: [
-            /*#__PURE__*/ _jsxs(Stack, {
-                direction: 'row',
-                spacing: 1,
-                alignItems: "center",
-                children: [
-                    /*#__PURE__*/ _jsx(Typography, {
-                        variant: "caption",
-                        children: "Preview Values"
-                    }),
-                    /*#__PURE__*/ _jsx(InfoTooltip, {
-                        description: TOOLTIP_TEXT.refreshVariableValues,
-                        children: /*#__PURE__*/ _jsx(IconButton, {
-                            onClick: onRefresh,
-                            size: "small",
-                            children: /*#__PURE__*/ _jsx(Refresh, {})
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(InfoTooltip, {
-                        description: TOOLTIP_TEXT.copyVariableValues,
-                        children: /*#__PURE__*/ _jsx(IconButton, {
-                            onClick: async ()=>{
-                                if (data === null || data === void 0 ? void 0 : data.length) {
-                                    await navigator.clipboard.writeText(data.map((d)=>d.label).join(','));
-                                    alert('Copied to clipboard!');
-                                }
-                            },
-                            size: "small",
-                            children: /*#__PURE__*/ _jsx(Clipboard, {})
-                        })
-                    })
-                ]
-            }),
-            errorMessage && /*#__PURE__*/ _jsx(Alert, {
-                severity: "error",
-                children: errorMessage
-            }),
-            isFetching && 'Loading...',
-            (data === null || data === void 0 ? void 0 : data.length) === 0 && /*#__PURE__*/ _jsx(Alert, {
-                severity: "info",
-                children: "No results"
-            }),
-            /*#__PURE__*/ _jsxs(_Fragment, {
-                children: [
-                    data === null || data === void 0 ? void 0 : data.slice(0, maxValues).map((val)=>/*#__PURE__*/ _jsx(Chip, {
-                            sx: {
-                                mr: 1,
-                                mb: 1
-                            },
-                            size: "small",
-                            label: val.label
-                        }, val.value)),
-                    notShown > 0 && /*#__PURE__*/ _jsx(Chip, {
-                        onClick: showAll,
-                        variant: "outlined",
-                        sx: {
-                            mr: 1,
-                            mb: 1
-                        },
-                        size: "small",
-                        label: `+${notShown} more`
-                    })
-                ]
-            })
-        ]
+function FallbackPreview() {
+    return /*#__PURE__*/ _jsx("div", {
+        children: "Error previewing values"
     });
 }
-export function VariableEditForm({ initialVariableDefinition , onChange , onCancel  }) {
+export function VariableEditForm(props) {
+    const { initialVariableDefinition , onChange , onCancel  } = props;
     const [state, setState] = useImmer(getInitialState(initialVariableDefinition));
     const validation = useMemo(()=>getValidation(state), [
         state
     ]);
-    const [previewKey, setPreviewKey] = React.useState(0);
+    const [previewKey, setPreviewKey] = useState(0);
     const refreshPreview = ()=>{
         setPreviewKey((prev)=>prev + 1);
     };
-    /** We use the `previewKey` that we increment to know when to explicity update the
+    /** We use the `previewKey` that we increment to know when to explicitly update the
    * spec that will be used for preview. The reason why we do this is to avoid
    * having to re-fetch the values when the user is still editing the spec.
    */ const previewSpec = useMemo(()=>{
@@ -186,9 +105,6 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                     overflowY: 'scroll'
                 },
                 children: [
-                    /*#__PURE__*/ _jsx(SectionHeader, {
-                        children: "General"
-                    }),
                     /*#__PURE__*/ _jsxs(Grid, {
                         container: true,
                         spacing: 2,
@@ -196,7 +112,7 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                         children: [
                             /*#__PURE__*/ _jsx(Grid, {
                                 item: true,
-                                xs: 6,
+                                xs: 8,
                                 children: /*#__PURE__*/ _jsx(TextField, {
                                     required: true,
                                     error: !!validation.name,
@@ -213,7 +129,35 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                             }),
                             /*#__PURE__*/ _jsx(Grid, {
                                 item: true,
-                                xs: 6,
+                                xs: 4,
+                                children: /*#__PURE__*/ _jsx(TextField, {
+                                    fullWidth: true,
+                                    label: "Display Label",
+                                    value: state.title || '',
+                                    onChange: (v)=>{
+                                        setState((draft)=>{
+                                            draft.title = v.target.value;
+                                        });
+                                    }
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 8,
+                                children: /*#__PURE__*/ _jsx(TextField, {
+                                    fullWidth: true,
+                                    label: "Description",
+                                    value: state.description,
+                                    onChange: (v)=>{
+                                        setState((draft)=>{
+                                            draft.description = v.target.value;
+                                        });
+                                    }
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 4,
                                 children: /*#__PURE__*/ _jsxs(FormControl, {
                                     fullWidth: true,
                                     children: [
@@ -238,50 +182,28 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                                         })
                                     ]
                                 })
-                            }),
-                            /*#__PURE__*/ _jsx(Grid, {
-                                item: true,
-                                xs: 6,
-                                children: /*#__PURE__*/ _jsx(TextField, {
-                                    fullWidth: true,
-                                    label: "Display Label",
-                                    value: state.title || '',
-                                    onChange: (v)=>{
-                                        setState((draft)=>{
-                                            draft.title = v.target.value;
-                                        });
-                                    }
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Grid, {
-                                item: true,
-                                xs: 12,
-                                children: /*#__PURE__*/ _jsx(TextField, {
-                                    fullWidth: true,
-                                    label: "Description",
-                                    value: state.description,
-                                    onChange: (v)=>{
-                                        setState((draft)=>{
-                                            draft.description = v.target.value;
-                                        });
-                                    }
-                                })
                             })
                         ]
                     }),
+                    /*#__PURE__*/ _jsx(Divider, {}),
                     state.kind === 'TextVariable' && /*#__PURE__*/ _jsxs(_Fragment, {
                         children: [
-                            /*#__PURE__*/ _jsx(SectionHeader, {
+                            /*#__PURE__*/ _jsx(Typography, {
+                                py: 1,
+                                variant: "subtitle1",
                                 children: "Text Options"
                             }),
-                            /*#__PURE__*/ _jsx(Grid, {
-                                container: true,
+                            /*#__PURE__*/ _jsxs(Stack, {
                                 spacing: 2,
-                                mb: 2,
-                                children: /*#__PURE__*/ _jsx(Grid, {
-                                    item: true,
-                                    xs: 12,
-                                    children: /*#__PURE__*/ _jsx(TextField, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        children: /*#__PURE__*/ _jsx(VariablePreview, {
+                                            values: [
+                                                state.textVariableFields.value
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
                                         label: "Value",
                                         value: state.textVariableFields.value,
                                         onChange: (v)=>{
@@ -290,30 +212,43 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                                             });
                                         }
                                     })
-                                })
+                                ]
                             })
                         ]
                     }),
                     state.kind === 'ListVariable' && /*#__PURE__*/ _jsxs(_Fragment, {
                         children: [
-                            /*#__PURE__*/ _jsx(SectionHeader, {
+                            /*#__PURE__*/ _jsx(Typography, {
+                                py: 1,
+                                variant: "subtitle1",
                                 children: "List Options"
                             }),
-                            /*#__PURE__*/ _jsxs(Grid, {
-                                container: true,
+                            /*#__PURE__*/ _jsxs(Stack, {
                                 spacing: 2,
                                 mb: 2,
                                 children: [
-                                    /*#__PURE__*/ _jsxs(Grid, {
-                                        item: true,
-                                        xs: 6,
+                                    state.listVariableFields.plugin.kind ? /*#__PURE__*/ _jsx(Box, {
+                                        children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                                            FallbackComponent: FallbackPreview,
+                                            resetKeys: [
+                                                previewSpec
+                                            ],
+                                            children: /*#__PURE__*/ _jsx(VariableListPreview, {
+                                                definition: previewSpec,
+                                                onRefresh: refreshPreview
+                                            })
+                                        })
+                                    }) : /*#__PURE__*/ _jsx(VariablePreview, {
+                                        isLoading: true
+                                    }),
+                                    /*#__PURE__*/ _jsxs(Stack, {
                                         children: [
                                             /*#__PURE__*/ _jsx(ClickAwayListener, {
                                                 onClickAway: ()=>refreshPreview(),
                                                 children: /*#__PURE__*/ _jsx(Box, {})
                                             }),
                                             /*#__PURE__*/ _jsx(PluginEditor, {
-                                                width: 500,
+                                                width: "100%",
                                                 pluginType: "Variable",
                                                 pluginKindLabel: "Source",
                                                 value: state.listVariableFields.plugin,
@@ -325,73 +260,69 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                                             })
                                         ]
                                     }),
-                                    state.listVariableFields.plugin.kind && /*#__PURE__*/ _jsxs(Grid, {
-                                        item: true,
-                                        xs: 12,
-                                        children: [
-                                            /*#__PURE__*/ _jsx(TextField, {
-                                                sx: {
-                                                    mb: 1
-                                                },
-                                                label: "Capturing Regexp Filter",
-                                                value: state.listVariableFields.capturing_regexp || '',
-                                                onChange: (e)=>{
-                                                    setState((draft)=>{
+                                    /*#__PURE__*/ _jsx(Stack, {
+                                        children: /*#__PURE__*/ _jsx(TextField, {
+                                            label: "Capturing Regexp Filter",
+                                            value: state.listVariableFields.capturing_regexp || '',
+                                            onChange: (e)=>{
+                                                setState((draft)=>{
+                                                    if (e.target.value) {
+                                                        // TODO: do a better fix, if empty string => it should skip the filter
                                                         draft.listVariableFields.capturing_regexp = e.target.value;
-                                                    });
-                                                }
-                                            }),
-                                            /*#__PURE__*/ _jsx(ErrorBoundary, {
-                                                FallbackComponent: ()=>/*#__PURE__*/ _jsx("div", {
-                                                        children: "Error previewing values"
-                                                    }),
-                                                resetKeys: [
-                                                    previewSpec
-                                                ],
-                                                children: /*#__PURE__*/ _jsx(VariableListPreview, {
-                                                    onRefresh: refreshPreview,
-                                                    definition: previewSpec
-                                                })
-                                            })
-                                        ]
+                                                    } else {
+                                                        draft.listVariableFields.capturing_regexp = undefined;
+                                                    }
+                                                });
+                                            },
+                                            helperText: "Optional, if you want to filter on captured result."
+                                        })
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ _jsx(SectionHeader, {
+                            /*#__PURE__*/ _jsx(Divider, {}),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                py: 1,
+                                variant: "subtitle1",
                                 children: "Dropdown Options"
                             }),
-                            /*#__PURE__*/ _jsxs(Grid, {
-                                container: true,
-                                spacing: 1,
-                                mb: 1,
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                spacing: "2",
                                 children: [
-                                    /*#__PURE__*/ _jsxs(Grid, {
-                                        item: true,
-                                        xs: 12,
+                                    /*#__PURE__*/ _jsxs(Stack, {
                                         children: [
-                                            "Allow Multiple",
-                                            /*#__PURE__*/ _jsx(Switch, {
-                                                checked: state.listVariableFields.allowMultiple,
-                                                onChange: (e)=>{
-                                                    setState((draft)=>{
-                                                        draft.listVariableFields.allowMultiple = e.target.checked;
-                                                    });
-                                                }
+                                            /*#__PURE__*/ _jsx(FormControlLabel, {
+                                                control: /*#__PURE__*/ _jsx(Switch, {
+                                                    checked: state.listVariableFields.allowMultiple,
+                                                    onChange: (e)=>{
+                                                        setState((draft)=>{
+                                                            draft.listVariableFields.allowMultiple = e.target.checked;
+                                                        });
+                                                    }
+                                                }),
+                                                label: "Allow Multiple Values"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                children: "Enables multiple values to be selected at the same time"
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ _jsxs(Grid, {
-                                        item: true,
-                                        xs: 12,
+                                    /*#__PURE__*/ _jsxs(Stack, {
                                         children: [
-                                            "Allow All",
-                                            /*#__PURE__*/ _jsx(Switch, {
-                                                checked: state.listVariableFields.allowAll,
-                                                onChange: (e)=>{
-                                                    setState((draft)=>{
-                                                        draft.listVariableFields.allowAll = e.target.checked;
-                                                    });
-                                                }
+                                            /*#__PURE__*/ _jsx(FormControlLabel, {
+                                                control: /*#__PURE__*/ _jsx(Switch, {
+                                                    checked: state.listVariableFields.allowAll,
+                                                    onChange: (e)=>{
+                                                        setState((draft)=>{
+                                                            draft.listVariableFields.allowAll = e.target.checked;
+                                                        });
+                                                    }
+                                                }),
+                                                label: "Allow All option"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                children: "Enables an option to include all variable values"
                                             })
                                         ]
                                     })