@perses-dev/dashboards 0.19.0 → 0.21.0

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

@@ -12,17 +12,14 @@
 // 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, InputLabel, MenuItem, Select, Button, Stack, Alert, Chip, IconButton, ClickAwayListener, Tooltip } from '@mui/material';
 import { useImmer } from 'use-immer';
 import { PluginEditor } from '@perses-dev/plugin-system';
 import { ErrorBoundary } from '@perses-dev/components';
 import Refresh from 'mdi-material-ui/Refresh';
-import { useListVariablePluginValues } from '../variable-model';
+import Clipboard from 'mdi-material-ui/ClipboardOutline';
+import { useListVariablePluginValues, VARIABLE_TYPES } from '../variable-model';
 import { getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';
-const VARIABLE_TYPES = [
-    'ListVariable',
-    'TextVariable'
-];
 const DEFAULT_MAX_PREVIEW_VALUES = 50;
 // TODO: Replace with proper validation library
 function getValidation(state) {
@@ -44,7 +41,7 @@ const SectionHeader = ({ children  })=>/*#__PURE__*/ _jsx(Typography, {
         variant: "subtitle1",
         children: children
     });
-function VariableListPreview({ definition  }) {
+function VariableListPreview({ definition , onRefresh  }) {
     const { data , isFetching , error  } = useListVariablePluginValues(definition);
     const [maxValues, setMaxValues] = useState(DEFAULT_MAX_PREVIEW_VALUES);
     const showAll = ()=>{
@@ -57,6 +54,40 @@ function VariableListPreview({ definition  }) {
     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(Tooltip, {
+                        title: "Refresh Values",
+                        placement: "right",
+                        children: /*#__PURE__*/ _jsx(IconButton, {
+                            onClick: onRefresh,
+                            size: "small",
+                            children: /*#__PURE__*/ _jsx(Refresh, {})
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Tooltip, {
+                        title: "Copy Values to Clipboard",
+                        placement: "right",
+                        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
@@ -116,12 +147,12 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                     display: 'flex',
                     alignItems: 'center',
                     padding: (theme)=>theme.spacing(1, 2),
-                    borderBottom: (theme)=>`1px solid ${theme.palette.grey[100]}`
+                    borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
                 },
                 children: [
                     /*#__PURE__*/ _jsx(Typography, {
                         variant: "h2",
-                        children: "Template Variables / Edit Variable"
+                        children: "Edit Variable"
                     }),
                     /*#__PURE__*/ _jsxs(Stack, {
                         direction: "row",
@@ -139,6 +170,7 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                                 children: "Update"
                             }),
                             /*#__PURE__*/ _jsx(Button, {
+                                color: "secondary",
                                 variant: "outlined",
                                 onClick: ()=>{
                                     onCancel();
@@ -155,11 +187,6 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                     overflowY: 'scroll'
                 },
                 children: [
-                    /*#__PURE__*/ _jsx(Typography, {
-                        variant: "h3",
-                        mb: 2,
-                        children: "Edit Variable"
-                    }),
                     /*#__PURE__*/ _jsx(SectionHeader, {
                         children: "General"
                     }),
@@ -206,9 +233,9 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                                                 });
                                             },
                                             children: VARIABLE_TYPES.map((v)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                                    value: v,
-                                                    children: v
-                                                }, v))
+                                                    value: v.kind,
+                                                    children: v.label
+                                                }, v.kind))
                                         })
                                     ]
                                 })
@@ -218,7 +245,7 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                                 xs: 6,
                                 children: /*#__PURE__*/ _jsx(TextField, {
                                     fullWidth: true,
-                                    label: "Label",
+                                    label: "Display Label",
                                     value: state.title,
                                     onChange: (v)=>{
                                         setState((draft)=>{
@@ -282,18 +309,6 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                                         item: true,
                                         xs: 6,
                                         children: [
-                                            /*#__PURE__*/ _jsx(TextField, {
-                                                sx: {
-                                                    mb: 1
-                                                },
-                                                label: "Capturing Regexp",
-                                                value: state.listVariableFields.capturing_regexp,
-                                                onChange: (e)=>{
-                                                    setState((draft)=>{
-                                                        draft.listVariableFields.capturing_regexp = e.target.value;
-                                                    });
-                                                }
-                                            }),
                                             /*#__PURE__*/ _jsx(ClickAwayListener, {
                                                 onClickAway: ()=>refreshPreview(),
                                                 children: /*#__PURE__*/ _jsx(Box, {})
@@ -311,38 +326,35 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                                             })
                                         ]
                                     }),
-                                    state.listVariableFields.plugin.kind && /*#__PURE__*/ _jsx(Grid, {
+                                    state.listVariableFields.plugin.kind && /*#__PURE__*/ _jsxs(Grid, {
                                         item: true,
                                         xs: 12,
-                                        children: /*#__PURE__*/ _jsxs(ErrorBoundary, {
-                                            FallbackComponent: ()=>/*#__PURE__*/ _jsx("div", {
-                                                    children: "Error previewing values"
-                                                }),
-                                            resetKeys: [
-                                                previewSpec
-                                            ],
-                                            children: [
-                                                /*#__PURE__*/ _jsxs(Stack, {
-                                                    direction: 'row',
-                                                    spacing: 1,
-                                                    alignItems: "center",
-                                                    children: [
-                                                        /*#__PURE__*/ _jsx(Typography, {
-                                                            variant: "caption",
-                                                            children: "Preview Values"
-                                                        }),
-                                                        /*#__PURE__*/ _jsx(IconButton, {
-                                                            onClick: refreshPreview,
-                                                            size: "small",
-                                                            children: /*#__PURE__*/ _jsx(Refresh, {})
-                                                        })
-                                                    ]
-                                                }),
-                                                /*#__PURE__*/ _jsx(VariableListPreview, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TextField, {
+                                                sx: {
+                                                    mb: 1
+                                                },
+                                                label: "Capturing Regexp Filter",
+                                                value: state.listVariableFields.capturing_regexp,
+                                                onChange: (e)=>{
+                                                    setState((draft)=>{
+                                                        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
                                                 })
-                                            ]
-                                        })
+                                            })
+                                        ]
                                     })
                                 ]
                             }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"sourcesContent":["// Copyright 2022 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 React, { useMemo, useState } from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControl,\n  InputLabel,\n  MenuItem,\n  Select,\n  Button,\n  Stack,\n  Alert,\n  Chip,\n  IconButton,\n  ClickAwayListener,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { PluginEditor } from '@perses-dev/plugin-system';\nimport { VariableDefinition, ListVariableDefinition } from '@perses-dev/core';\nimport { ErrorBoundary } from '@perses-dev/components';\nimport Refresh from 'mdi-material-ui/Refresh';\n\nimport { useListVariablePluginValues } from '../variable-model';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\nconst VARIABLE_TYPES = ['ListVariable', 'TextVariable'] as const;\nconst DEFAULT_MAX_PREVIEW_VALUES = 50;\n\n// TODO: Replace with proper validation library\nfunction getValidation(state: ReturnType<typeof getInitialState>) {\n  /** Name validation */\n  let name = null;\n  if (!state.name) {\n    name = 'Name is required';\n  }\n  // name can only contain alphanumeric characters and underscores and no spaces\n  if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {\n    name = 'Name can only contain alphanumeric characters, underscores, and dashes';\n  }\n\n  return {\n    name,\n    isValid: !name,\n  };\n}\n\nconst SectionHeader = ({ children }: React.PropsWithChildren) => (\n  <Typography pb={2} variant=\"subtitle1\">\n    {children}\n  </Typography>\n);\n\nfunction VariableListPreview({ definition }: { definition: ListVariableDefinition }) {\n  const { data, isFetching, error } = useListVariablePluginValues(definition);\n  const [maxValues, setMaxValues] = useState<number | undefined>(DEFAULT_MAX_PREVIEW_VALUES);\n  const showAll = () => {\n    setMaxValues(undefined);\n  };\n  let notShown = 0;\n\n  if (data && data?.length > 0 && maxValues) {\n    notShown = data.length - maxValues;\n  }\n  const errorMessage = (error as Error)?.message;\n\n  return (\n    <Box>\n      {errorMessage && <Alert severity=\"error\">{errorMessage}</Alert>}\n      {isFetching && 'Loading...'}\n      {data?.length === 0 && <Alert severity=\"info\">No results</Alert>}\n      <>\n        {data?.slice(0, maxValues).map((val) => (\n          <Chip sx={{ mr: 1, mb: 1 }} size=\"small\" key={val.value} label={val.label} />\n        ))}\n        {notShown > 0 && (\n          <Chip onClick={showAll} variant=\"outlined\" sx={{ mr: 1, mb: 1 }} size=\"small\" label={`+${notShown} more`} />\n        )}\n      </>\n    </Box>\n  );\n}\n\nexport function VariableEditForm({\n  initialVariableDefinition,\n  onChange,\n  onCancel,\n}: {\n  initialVariableDefinition: VariableDefinition;\n  onChange: (def: VariableDefinition) => void;\n  onCancel: () => void;\n}) {\n  const [state, setState] = useImmer(getInitialState(initialVariableDefinition));\n  const validation = useMemo(() => getValidation(state), [state]);\n\n  const [previewKey, setPreviewKey] = React.useState(0);\n\n  const refreshPreview = () => {\n    setPreviewKey((prev) => prev + 1);\n  };\n\n  /** We use the `previewKey` that we increment to know when to explicity update the\n   * spec that will be used for preview. The reason why we do this is to avoid\n   * having to re-fetch the values when the user is still editing the spec.\n   */\n  const previewSpec = useMemo(() => {\n    return getVariableDefinitionFromState(state) as ListVariableDefinition;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [previewKey]);\n\n  return (\n    <>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.grey[100]}`,\n        }}\n      >\n        <Typography variant=\"h2\">Template Variables / Edit Variable</Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          <Button\n            disabled={!validation.isValid}\n            variant=\"contained\"\n            onClick={() => {\n              onChange(getVariableDefinitionFromState(state));\n            }}\n          >\n            Update\n          </Button>\n          <Button\n            variant=\"outlined\"\n            onClick={() => {\n              onCancel();\n            }}\n          >\n            Cancel\n          </Button>\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Typography variant=\"h3\" mb={2}>\n          Edit Variable\n        </Typography>\n        <SectionHeader>General</SectionHeader>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={6}>\n            <TextField\n              required\n              error={!!validation.name}\n              fullWidth\n              label=\"Name\"\n              value={state.name}\n              helperText={validation.name}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.name = v.target.value as string;\n                });\n              }}\n            />\n          </Grid>\n          <Grid item xs={6}>\n            <FormControl fullWidth>\n              <InputLabel id=\"variable-type-select-label\">Type</InputLabel>\n              <Select\n                labelId=\"variable-type-select-label\"\n                id=\"variable-type-select\"\n                label=\"Type\"\n                value={state.kind}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.kind = v.target.value as VariableEditorState['kind'];\n                  });\n                }}\n              >\n                {VARIABLE_TYPES.map((v) => (\n                  <MenuItem key={v} value={v}>\n                    {v}\n                  </MenuItem>\n                ))}\n              </Select>\n            </FormControl>\n          </Grid>\n          <Grid item xs={6}>\n            <TextField\n              fullWidth\n              label=\"Label\"\n              value={state.title}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.title = v.target.value;\n                });\n              }}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <TextField\n              fullWidth\n              label=\"Description\"\n              value={state.description}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.description = v.target.value;\n                });\n              }}\n            />\n          </Grid>\n        </Grid>\n\n        {state.kind === 'TextVariable' && (\n          <>\n            <SectionHeader>Text Options</SectionHeader>\n            <Grid container spacing={2} mb={2}>\n              <Grid item xs={12}>\n                <TextField\n                  label=\"Value\"\n                  value={state.textVariableFields.value}\n                  onChange={(v) => {\n                    setState((draft) => {\n                      draft.textVariableFields.value = v.target.value;\n                    });\n                  }}\n                />\n              </Grid>\n            </Grid>\n          </>\n        )}\n\n        {state.kind === 'ListVariable' && (\n          <>\n            <SectionHeader>List Options</SectionHeader>\n            <Grid container spacing={2} mb={2}>\n              <Grid item xs={6}>\n                <TextField\n                  sx={{ mb: 1 }}\n                  label=\"Capturing Regexp\"\n                  value={state.listVariableFields.capturing_regexp}\n                  onChange={(e) => {\n                    setState((draft) => {\n                      draft.listVariableFields.capturing_regexp = e.target.value;\n                    });\n                  }}\n                />\n                {/** Hack?: Cool technique to refresh the preview to simulate onBlur event */}\n                <ClickAwayListener onClickAway={() => refreshPreview()}>\n                  <Box />\n                </ClickAwayListener>\n                {/** */}\n                <PluginEditor\n                  width={500}\n                  pluginType=\"Variable\"\n                  pluginKindLabel=\"Source\"\n                  value={state.listVariableFields.plugin}\n                  onChange={(val) => {\n                    setState((draft) => {\n                      draft.listVariableFields.plugin = val;\n                    });\n                  }}\n                />\n              </Grid>\n              {state.listVariableFields.plugin.kind && (\n                <Grid item xs={12}>\n                  <ErrorBoundary FallbackComponent={() => <div>Error previewing values</div>} resetKeys={[previewSpec]}>\n                    <Stack direction={'row'} spacing={1} alignItems=\"center\">\n                      <Typography variant=\"caption\">Preview Values</Typography>\n                      <IconButton onClick={refreshPreview} size=\"small\">\n                        <Refresh />\n                      </IconButton>\n                    </Stack>\n                    <VariableListPreview definition={previewSpec} />\n                  </ErrorBoundary>\n                </Grid>\n              )}\n            </Grid>\n\n            <SectionHeader>Dropdown Options</SectionHeader>\n            <Grid container spacing={1} mb={1}>\n              <Grid item xs={12}>\n                Allow Multiple\n                <Switch\n                  checked={state.listVariableFields.allowMultiple}\n                  onChange={(e) => {\n                    setState((draft) => {\n                      draft.listVariableFields.allowMultiple = e.target.checked;\n                    });\n                  }}\n                />\n              </Grid>\n              <Grid item xs={12}>\n                Allow All\n                <Switch\n                  checked={state.listVariableFields.allowAll}\n                  onChange={(e) => {\n                    setState((draft) => {\n                      draft.listVariableFields.allowAll = e.target.checked;\n                    });\n                  }}\n                />\n              </Grid>\n            </Grid>\n          </>\n        )}\n      </Box>\n    </>\n  );\n}\n"],"names":["React","useMemo","useState","Box","Typography","Switch","TextField","Grid","FormControl","InputLabel","MenuItem","Select","Button","Stack","Alert","Chip","IconButton","ClickAwayListener","useImmer","PluginEditor","ErrorBoundary","Refresh","useListVariablePluginValues","getVariableDefinitionFromState","getInitialState","VARIABLE_TYPES","DEFAULT_MAX_PREVIEW_VALUES","getValidation","state","name","test","isValid","SectionHeader","children","pb","variant","VariableListPreview","definition","data","isFetching","error","maxValues","setMaxValues","showAll","undefined","notShown","length","errorMessage","message","severity","slice","map","val","sx","mr","mb","size","label","value","onClick","VariableEditForm","initialVariableDefinition","onChange","onCancel","setState","validation","previewKey","setPreviewKey","refreshPreview","prev","previewSpec","display","alignItems","padding","theme","spacing","borderBottom","palette","grey","direction","marginLeft","disabled","overflowY","container","item","xs","required","fullWidth","helperText","v","draft","target","id","labelId","kind","title","description","textVariableFields","listVariableFields","capturing_regexp","e","onClickAway","width","pluginType","pluginKindLabel","plugin","FallbackComponent","div","resetKeys","checked","allowMultiple","allowAll"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"sourcesContent":["// Copyright 2022 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 React, { useMemo, useState } from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControl,\n  InputLabel,\n  MenuItem,\n  Select,\n  Button,\n  Stack,\n  Alert,\n  Chip,\n  IconButton,\n  ClickAwayListener,\n  Tooltip,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { PluginEditor } from '@perses-dev/plugin-system';\nimport { VariableDefinition, ListVariableDefinition } from '@perses-dev/core';\nimport { ErrorBoundary } from '@perses-dev/components';\nimport Refresh from 'mdi-material-ui/Refresh';\nimport Clipboard from 'mdi-material-ui/ClipboardOutline';\n\nimport { useListVariablePluginValues, VARIABLE_TYPES } from '../variable-model';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\nconst DEFAULT_MAX_PREVIEW_VALUES = 50;\n\n// TODO: Replace with proper validation library\nfunction getValidation(state: ReturnType<typeof getInitialState>) {\n  /** Name validation */\n  let name = null;\n  if (!state.name) {\n    name = 'Name is required';\n  }\n  // name can only contain alphanumeric characters and underscores and no spaces\n  if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {\n    name = 'Name can only contain alphanumeric characters, underscores, and dashes';\n  }\n\n  return {\n    name,\n    isValid: !name,\n  };\n}\n\nconst SectionHeader = ({ children }: React.PropsWithChildren) => (\n  <Typography pb={2} variant=\"subtitle1\">\n    {children}\n  </Typography>\n);\n\nfunction VariableListPreview({ definition, onRefresh }: { definition: ListVariableDefinition; onRefresh: () => void }) {\n  const { data, isFetching, error } = useListVariablePluginValues(definition);\n  const [maxValues, setMaxValues] = useState<number | undefined>(DEFAULT_MAX_PREVIEW_VALUES);\n  const showAll = () => {\n    setMaxValues(undefined);\n  };\n  let notShown = 0;\n\n  if (data && data?.length > 0 && maxValues) {\n    notShown = data.length - maxValues;\n  }\n  const errorMessage = (error as Error)?.message;\n\n  return (\n    <Box>\n      <Stack direction={'row'} spacing={1} alignItems=\"center\">\n        <Typography variant=\"caption\">Preview Values</Typography>\n        <Tooltip title=\"Refresh Values\" placement=\"right\">\n          <IconButton onClick={onRefresh} size=\"small\">\n            <Refresh />\n          </IconButton>\n        </Tooltip>\n        <Tooltip title=\"Copy Values to Clipboard\" placement=\"right\">\n          <IconButton\n            onClick={async () => {\n              if (data?.length) {\n                await navigator.clipboard.writeText(data.map((d) => d.label).join(','));\n                alert('Copied to clipboard!');\n              }\n            }}\n            size=\"small\"\n          >\n            <Clipboard />\n          </IconButton>\n        </Tooltip>\n      </Stack>\n      {errorMessage && <Alert severity=\"error\">{errorMessage}</Alert>}\n      {isFetching && 'Loading...'}\n      {data?.length === 0 && <Alert severity=\"info\">No results</Alert>}\n      <>\n        {data?.slice(0, maxValues).map((val) => (\n          <Chip sx={{ mr: 1, mb: 1 }} size=\"small\" key={val.value} label={val.label} />\n        ))}\n        {notShown > 0 && (\n          <Chip onClick={showAll} variant=\"outlined\" sx={{ mr: 1, mb: 1 }} size=\"small\" label={`+${notShown} more`} />\n        )}\n      </>\n    </Box>\n  );\n}\n\nexport function VariableEditForm({\n  initialVariableDefinition,\n  onChange,\n  onCancel,\n}: {\n  initialVariableDefinition: VariableDefinition;\n  onChange: (def: VariableDefinition) => void;\n  onCancel: () => void;\n}) {\n  const [state, setState] = useImmer(getInitialState(initialVariableDefinition));\n  const validation = useMemo(() => getValidation(state), [state]);\n\n  const [previewKey, setPreviewKey] = React.useState(0);\n\n  const refreshPreview = () => {\n    setPreviewKey((prev) => prev + 1);\n  };\n\n  /** We use the `previewKey` that we increment to know when to explicity update the\n   * spec that will be used for preview. The reason why we do this is to avoid\n   * having to re-fetch the values when the user is still editing the spec.\n   */\n  const previewSpec = useMemo(() => {\n    return getVariableDefinitionFromState(state) as ListVariableDefinition;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [previewKey]);\n\n  return (\n    <>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">Edit Variable</Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          <Button\n            disabled={!validation.isValid}\n            variant=\"contained\"\n            onClick={() => {\n              onChange(getVariableDefinitionFromState(state));\n            }}\n          >\n            Update\n          </Button>\n          <Button\n            color=\"secondary\"\n            variant=\"outlined\"\n            onClick={() => {\n              onCancel();\n            }}\n          >\n            Cancel\n          </Button>\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <SectionHeader>General</SectionHeader>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={6}>\n            <TextField\n              required\n              error={!!validation.name}\n              fullWidth\n              label=\"Name\"\n              value={state.name}\n              helperText={validation.name}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.name = v.target.value as string;\n                });\n              }}\n            />\n          </Grid>\n          <Grid item xs={6}>\n            <FormControl fullWidth>\n              <InputLabel id=\"variable-type-select-label\">Type</InputLabel>\n              <Select\n                labelId=\"variable-type-select-label\"\n                id=\"variable-type-select\"\n                label=\"Type\"\n                value={state.kind}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.kind = v.target.value as VariableEditorState['kind'];\n                  });\n                }}\n              >\n                {VARIABLE_TYPES.map((v) => (\n                  <MenuItem key={v.kind} value={v.kind}>\n                    {v.label}\n                  </MenuItem>\n                ))}\n              </Select>\n            </FormControl>\n          </Grid>\n          <Grid item xs={6}>\n            <TextField\n              fullWidth\n              label=\"Display Label\"\n              value={state.title}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.title = v.target.value;\n                });\n              }}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <TextField\n              fullWidth\n              label=\"Description\"\n              value={state.description}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.description = v.target.value;\n                });\n              }}\n            />\n          </Grid>\n        </Grid>\n\n        {state.kind === 'TextVariable' && (\n          <>\n            <SectionHeader>Text Options</SectionHeader>\n            <Grid container spacing={2} mb={2}>\n              <Grid item xs={12}>\n                <TextField\n                  label=\"Value\"\n                  value={state.textVariableFields.value}\n                  onChange={(v) => {\n                    setState((draft) => {\n                      draft.textVariableFields.value = v.target.value;\n                    });\n                  }}\n                />\n              </Grid>\n            </Grid>\n          </>\n        )}\n\n        {state.kind === 'ListVariable' && (\n          <>\n            <SectionHeader>List Options</SectionHeader>\n            <Grid container spacing={2} mb={2}>\n              <Grid item xs={6}>\n                {/** Hack?: Cool technique to refresh the preview to simulate onBlur event */}\n                <ClickAwayListener onClickAway={() => refreshPreview()}>\n                  <Box />\n                </ClickAwayListener>\n                {/** */}\n                <PluginEditor\n                  width={500}\n                  pluginType=\"Variable\"\n                  pluginKindLabel=\"Source\"\n                  value={state.listVariableFields.plugin}\n                  onChange={(val) => {\n                    setState((draft) => {\n                      draft.listVariableFields.plugin = val;\n                    });\n                  }}\n                />\n              </Grid>\n\n              {state.listVariableFields.plugin.kind && (\n                <Grid item xs={12}>\n                  <TextField\n                    sx={{ mb: 1 }}\n                    label=\"Capturing Regexp Filter\"\n                    value={state.listVariableFields.capturing_regexp}\n                    onChange={(e) => {\n                      setState((draft) => {\n                        draft.listVariableFields.capturing_regexp = e.target.value;\n                      });\n                    }}\n                  />\n                  <ErrorBoundary FallbackComponent={() => <div>Error previewing values</div>} resetKeys={[previewSpec]}>\n                    <VariableListPreview onRefresh={refreshPreview} definition={previewSpec} />\n                  </ErrorBoundary>\n                </Grid>\n              )}\n            </Grid>\n\n            <SectionHeader>Dropdown Options</SectionHeader>\n            <Grid container spacing={1} mb={1}>\n              <Grid item xs={12}>\n                Allow Multiple\n                <Switch\n                  checked={state.listVariableFields.allowMultiple}\n                  onChange={(e) => {\n                    setState((draft) => {\n                      draft.listVariableFields.allowMultiple = e.target.checked;\n                    });\n                  }}\n                />\n              </Grid>\n              <Grid item xs={12}>\n                Allow All\n                <Switch\n                  checked={state.listVariableFields.allowAll}\n                  onChange={(e) => {\n                    setState((draft) => {\n                      draft.listVariableFields.allowAll = e.target.checked;\n                    });\n                  }}\n                />\n              </Grid>\n            </Grid>\n          </>\n        )}\n      </Box>\n    </>\n  );\n}\n"],"names":["React","useMemo","useState","Box","Typography","Switch","TextField","Grid","FormControl","InputLabel","MenuItem","Select","Button","Stack","Alert","Chip","IconButton","ClickAwayListener","Tooltip","useImmer","PluginEditor","ErrorBoundary","Refresh","Clipboard","useListVariablePluginValues","VARIABLE_TYPES","getVariableDefinitionFromState","getInitialState","DEFAULT_MAX_PREVIEW_VALUES","getValidation","state","name","test","isValid","SectionHeader","children","pb","variant","VariableListPreview","definition","onRefresh","data","isFetching","error","maxValues","setMaxValues","showAll","undefined","notShown","length","errorMessage","message","direction","spacing","alignItems","title","placement","onClick","size","navigator","clipboard","writeText","map","d","label","join","alert","severity","slice","val","sx","mr","mb","value","VariableEditForm","initialVariableDefinition","onChange","onCancel","setState","validation","previewKey","setPreviewKey","refreshPreview","prev","previewSpec","display","padding","theme","borderBottom","palette","divider","marginLeft","disabled","color","overflowY","container","item","xs","required","fullWidth","helperText","v","draft","target","id","labelId","kind","description","textVariableFields","onClickAway","width","pluginType","pluginKindLabel","listVariableFields","plugin","capturing_regexp","e","FallbackComponent","div","resetKeys","checked","allowMultiple","allowAll"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":";AAcA,OAAO,EAA4D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAUzG,UAAU,yBAAyB;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eA4DpE"}
+{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":";AAcA,OAAO,EAA4D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AASzG,UAAU,yBAAyB;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAsDpE"}

package/dist/components/Variables/VariableList.js

@@ -13,7 +13,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import { Button, Stack, Box, AppBar, useScrollTrigger, IconButton } from '@mui/material';
-import EyeIcon from 'mdi-material-ui/Eye';
 import PencilIcon from 'mdi-material-ui/Pencil';
 import PinOutline from 'mdi-material-ui/PinOutline';
 import PinOffOutline from 'mdi-material-ui/PinOffOutline';
@@ -26,8 +25,6 @@ export function TemplateVariableList(props) {
     const [isPin, setIsPin] = useState(props.initialVariableIsSticky);
     const variableDefinitions = useTemplateVariableDefinitions();
     const { isEditMode  } = useEditMode();
-    const [showVariablesInEditMode, setShowVariablesInEditMode] = useState(true);
-    const showVariables = isEditMode ? showVariablesInEditMode : true;
     const { setVariableDefinitions  } = useTemplateVariableActions();
     const scrollTrigger = useScrollTrigger({
         disableHysteresis: true
@@ -55,23 +52,13 @@ export function TemplateVariableList(props) {
                     }
                 })
             }),
-            isEditMode && /*#__PURE__*/ _jsxs(Box, {
+            isEditMode && /*#__PURE__*/ _jsx(Box, {
                 pb: 2,
-                children: [
-                    /*#__PURE__*/ _jsxs(Button, {
-                        onClick: ()=>setShowVariablesInEditMode(!showVariablesInEditMode),
-                        startIcon: /*#__PURE__*/ _jsx(EyeIcon, {}),
-                        children: [
-                            showVariablesInEditMode ? 'Hide' : 'Show',
-                            " Variables"
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsx(Button, {
-                        onClick: ()=>setIsEditing(true),
-                        startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),
-                        children: "Edit Variables"
-                    })
-                ]
+                children: /*#__PURE__*/ _jsx(Button, {
+                    onClick: ()=>setIsEditing(true),
+                    startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),
+                    children: "Edit Variables"
+                })
             }),
             /*#__PURE__*/ _jsx(AppBar, {
                 color: 'inherit',
@@ -89,7 +76,7 @@ export function TemplateVariableList(props) {
                         /*#__PURE__*/ _jsx(Stack, {
                             direction: "row",
                             spacing: 1,
-                            children: showVariables && variableDefinitions.map((v)=>{
+                            children: variableDefinitions.map((v)=>{
                                 var ref;
                                 /*#__PURE__*/ return _jsx(Box, {
                                     display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/VariableList.tsx"],"sourcesContent":["// Copyright 2022 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 React, { useState } from 'react';\nimport { Button, Stack, Box, AppBar, useScrollTrigger, IconButton, SxProps, Theme } from '@mui/material';\nimport EyeIcon from 'mdi-material-ui/Eye';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { Drawer } from '@perses-dev/components';\nimport { useTemplateVariableDefinitions, useEditMode, useTemplateVariableActions } from '../../context';\nimport { TemplateVariable } from './Variable';\nimport { VariableEditor } from './VariableEditor';\n\ninterface TemplateVariableListProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function TemplateVariableList(props: TemplateVariableListProps) {\n  const [isEditing, setIsEditing] = useState(false);\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n  const variableDefinitions = useTemplateVariableDefinitions();\n  const { isEditMode } = useEditMode();\n  const [showVariablesInEditMode, setShowVariablesInEditMode] = useState(true);\n  const showVariables = isEditMode ? showVariablesInEditMode : true;\n  const { setVariableDefinitions } = useTemplateVariableActions();\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  const onClose = () => {\n    setIsEditing(false);\n  };\n\n  return (\n    <Box>\n      <Drawer isOpen={isEditing} onClose={onClose} PaperProps={{ sx: { width: '50%' } }}>\n        <VariableEditor\n          variableDefinitions={variableDefinitions}\n          onCancel={onClose}\n          onChange={(v) => {\n            setVariableDefinitions(v);\n            setIsEditing(false);\n          }}\n        />\n      </Drawer>\n      {isEditMode && (\n        <Box pb={2}>\n          <Button onClick={() => setShowVariablesInEditMode(!showVariablesInEditMode)} startIcon={<EyeIcon />}>\n            {showVariablesInEditMode ? 'Hide' : 'Show'} Variables\n          </Button>\n          <Button onClick={() => setIsEditing(true)} startIcon={<PencilIcon />}>\n            Edit Variables\n          </Button>\n        </Box>\n      )}\n\n      <AppBar\n        color={'inherit'}\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ ...props.sx }}\n      >\n        <Box display={'flex'} justifyContent=\"space-between\" my={isSticky ? 2 : 0} ml={isSticky ? 2 : 0}>\n          <Stack direction=\"row\" spacing={1}>\n            {showVariables &&\n              variableDefinitions.map((v) => (\n                <Box key={v.spec.name} display={v.spec.display?.hidden ? 'none' : undefined}>\n                  <TemplateVariable key={v.spec.name} name={v.spec.name} />\n                </Box>\n              ))}\n          </Stack>\n          {props.initialVariableIsSticky && (\n            <IconButton onClick={() => setIsPin(!isPin)}>{isPin ? <PinOutline /> : <PinOffOutline />}</IconButton>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["React","useState","Button","Stack","Box","AppBar","useScrollTrigger","IconButton","EyeIcon","PencilIcon","PinOutline","PinOffOutline","Drawer","useTemplateVariableDefinitions","useEditMode","useTemplateVariableActions","TemplateVariable","VariableEditor","TemplateVariableList","props","isEditing","setIsEditing","isPin","setIsPin","initialVariableIsSticky","variableDefinitions","isEditMode","showVariablesInEditMode","setShowVariablesInEditMode","showVariables","setVariableDefinitions","scrollTrigger","disableHysteresis","isSticky","onClose","isOpen","PaperProps","sx","width","onCancel","onChange","v","pb","onClick","startIcon","color","position","elevation","display","justifyContent","my","ml","direction","spacing","map","spec","hidden","undefined","name"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/VariableList.tsx"],"sourcesContent":["// Copyright 2022 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 React, { useState } from 'react';\nimport { Button, Stack, Box, AppBar, useScrollTrigger, IconButton, SxProps, Theme } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { Drawer } from '@perses-dev/components';\nimport { useTemplateVariableDefinitions, useEditMode, useTemplateVariableActions } from '../../context';\nimport { TemplateVariable } from './Variable';\nimport { VariableEditor } from './VariableEditor';\n\ninterface TemplateVariableListProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function TemplateVariableList(props: TemplateVariableListProps) {\n  const [isEditing, setIsEditing] = useState(false);\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n  const variableDefinitions = useTemplateVariableDefinitions();\n  const { isEditMode } = useEditMode();\n  const { setVariableDefinitions } = useTemplateVariableActions();\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  const onClose = () => {\n    setIsEditing(false);\n  };\n\n  return (\n    <Box>\n      <Drawer isOpen={isEditing} onClose={onClose} PaperProps={{ sx: { width: '50%' } }}>\n        <VariableEditor\n          variableDefinitions={variableDefinitions}\n          onCancel={onClose}\n          onChange={(v) => {\n            setVariableDefinitions(v);\n            setIsEditing(false);\n          }}\n        />\n      </Drawer>\n      {isEditMode && (\n        <Box pb={2}>\n          <Button onClick={() => setIsEditing(true)} startIcon={<PencilIcon />}>\n            Edit Variables\n          </Button>\n        </Box>\n      )}\n\n      <AppBar\n        color={'inherit'}\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ ...props.sx }}\n      >\n        <Box display={'flex'} justifyContent=\"space-between\" my={isSticky ? 2 : 0} ml={isSticky ? 2 : 0}>\n          <Stack direction=\"row\" spacing={1}>\n            {variableDefinitions.map((v) => (\n              <Box key={v.spec.name} display={v.spec.display?.hidden ? 'none' : undefined}>\n                <TemplateVariable key={v.spec.name} name={v.spec.name} />\n              </Box>\n            ))}\n          </Stack>\n          {props.initialVariableIsSticky && (\n            <IconButton onClick={() => setIsPin(!isPin)}>{isPin ? <PinOutline /> : <PinOffOutline />}</IconButton>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["React","useState","Button","Stack","Box","AppBar","useScrollTrigger","IconButton","PencilIcon","PinOutline","PinOffOutline","Drawer","useTemplateVariableDefinitions","useEditMode","useTemplateVariableActions","TemplateVariable","VariableEditor","TemplateVariableList","props","isEditing","setIsEditing","isPin","setIsPin","initialVariableIsSticky","variableDefinitions","isEditMode","setVariableDefinitions","scrollTrigger","disableHysteresis","isSticky","onClose","isOpen","PaperProps","sx","width","onCancel","onChange","v","pb","onClick","startIcon","color","position","elevation","display","justifyContent","my","ml","direction","spacing","map","spec","hidden","undefined","name"],"mappings":"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"}

package/dist/components/Variables/variable-model.d.ts

@@ -6,4 +6,11 @@ export declare function useListVariablePluginValues(definition: ListVariableDefi
  * Returns a serialized string of the current state of variable values.
  */
 export declare function getVariableValuesKey(v: VariableStateMap): string;
+export declare const VARIABLE_TYPES: readonly [{
+    readonly label: "List";
+    readonly kind: "ListVariable";
+}, {
+    readonly label: "Text";
+    readonly kind: "TextVariable";
+}];
 //# sourceMappingURL=variable-model.d.ts.map

package/dist/components/Variables/variable-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variable-model.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/variable-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAKL,cAAc,EACd,gBAAgB,EACjB,MAAM,2BAA2B,CAAC;AAGnC,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,cAAc,EAAE,EAAE,cAAc,EAAE,MAAM,GAAG,cAAc,EAAE,CAqBnG;AAED,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,sBAAsB,6EAyC7E;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,gBAAgB,UAIvD"}
+{"version":3,"file":"variable-model.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/variable-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAKL,cAAc,EACd,gBAAgB,EACjB,MAAM,2BAA2B,CAAC;AAGnC,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,cAAc,EAAE,EAAE,cAAc,EAAE,MAAM,GAAG,cAAc,EAAE,CAqBnG;AAED,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,sBAAsB,6EAyC7E;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,gBAAgB,UAIvD;AAED,eAAO,MAAM,cAAc;;;;;;EAGjB,CAAC"}

package/dist/components/Variables/variable-model.js

@@ -91,5 +91,15 @@ export function useListVariablePluginValues(definition) {
  */ export function getVariableValuesKey(v) {
     return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
 }
+export const VARIABLE_TYPES = [
+    {
+        label: 'List',
+        kind: 'ListVariable'
+    },
+    {
+        label: 'Text',
+        kind: 'TextVariable'
+    }
+];
 
 //# sourceMappingURL=variable-model.js.map

package/dist/components/Variables/variable-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/variable-model.ts"],"sourcesContent":["// Copyright 2022 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 { ListVariableDefinition } from '@perses-dev/core';\nimport {\n  useDatasourceStore,\n  usePlugin,\n  useTemplateVariableValues,\n  useTimeRange,\n  VariableOption,\n  VariableStateMap,\n} from '@perses-dev/plugin-system';\nimport { useQuery } from '@tanstack/react-query';\n\nexport function filterVariableList(data: VariableOption[], capturedRegexp: RegExp): VariableOption[] {\n  const result: VariableOption[] = [];\n  const filteredSet = new Set<string>();\n  for (const variableValue of data) {\n    const matches = variableValue.value.matchAll(capturedRegexp);\n    let concat = '';\n    for (const match of matches) {\n      for (let i = 1; i < match.length; i++) {\n        const m = match[i];\n        if (m !== undefined) {\n          concat = `${concat}${m}`;\n        }\n      }\n    }\n    if (concat !== '' && !filteredSet.has(concat)) {\n      // like that we are avoiding to have duplicating variable value\n      filteredSet.add(concat);\n      result.push({ label: variableValue.label, value: concat });\n    }\n  }\n  return result;\n}\n\nexport function useListVariablePluginValues(definition: ListVariableDefinition) {\n  const { data: variablePlugin } = usePlugin('Variable', definition.spec.plugin.kind);\n  const datasourceStore = useDatasourceStore();\n  const allVariables = useTemplateVariableValues();\n  const { absoluteTimeRange: timeRange, refreshKey } = useTimeRange();\n\n  const variablePluginCtx = { timeRange, datasourceStore, variables: allVariables };\n\n  const spec = definition.spec.plugin.spec;\n  const capturingRegexp =\n    definition.spec.capturing_regexp !== undefined ? new RegExp(definition.spec.capturing_regexp, 'g') : undefined;\n\n  let dependsOnVariables: string[] | undefined;\n  if (variablePlugin?.dependsOn) {\n    const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);\n    dependsOnVariables = dependencies.variables;\n  }\n\n  const variables = useTemplateVariableValues(dependsOnVariables);\n\n  let waitToLoad = false;\n  if (dependsOnVariables) {\n    waitToLoad = dependsOnVariables.some((v) => variables[v]?.loading);\n  }\n\n  const variablesValueKey = getVariableValuesKey(variables);\n\n  return useQuery(\n    [name, definition, variablesValueKey, timeRange, refreshKey],\n    async () => {\n      const resp = await variablePlugin?.getVariableOptions(spec, { datasourceStore, variables, timeRange });\n      if (resp === undefined) {\n        return [];\n      }\n      if (capturingRegexp === undefined) {\n        return resp.data;\n      }\n      return filterVariableList(resp.data, capturingRegexp);\n    },\n    { enabled: !!variablePlugin || waitToLoad }\n  );\n}\n\n/**\n * Returns a serialized string of the current state of variable values.\n */\nexport function getVariableValuesKey(v: VariableStateMap) {\n  return Object.values(v)\n    .map((v) => JSON.stringify(v.value))\n    .join(',');\n}\n"],"names":["useDatasourceStore","usePlugin","useTemplateVariableValues","useTimeRange","useQuery","filterVariableList","data","capturedRegexp","result","filteredSet","Set","variableValue","matches","value","matchAll","concat","match","i","length","m","undefined","has","add","push","label","useListVariablePluginValues","definition","variablePlugin","spec","plugin","kind","datasourceStore","allVariables","absoluteTimeRange","timeRange","refreshKey","variablePluginCtx","variables","capturingRegexp","capturing_regexp","RegExp","dependsOnVariables","dependsOn","dependencies","waitToLoad","some","v","loading","variablesValueKey","getVariableValuesKey","name","resp","getVariableOptions","enabled","Object","values","map","JSON","stringify","join"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/variable-model.ts"],"sourcesContent":["// Copyright 2022 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 { ListVariableDefinition } from '@perses-dev/core';\nimport {\n  useDatasourceStore,\n  usePlugin,\n  useTemplateVariableValues,\n  useTimeRange,\n  VariableOption,\n  VariableStateMap,\n} from '@perses-dev/plugin-system';\nimport { useQuery } from '@tanstack/react-query';\n\nexport function filterVariableList(data: VariableOption[], capturedRegexp: RegExp): VariableOption[] {\n  const result: VariableOption[] = [];\n  const filteredSet = new Set<string>();\n  for (const variableValue of data) {\n    const matches = variableValue.value.matchAll(capturedRegexp);\n    let concat = '';\n    for (const match of matches) {\n      for (let i = 1; i < match.length; i++) {\n        const m = match[i];\n        if (m !== undefined) {\n          concat = `${concat}${m}`;\n        }\n      }\n    }\n    if (concat !== '' && !filteredSet.has(concat)) {\n      // like that we are avoiding to have duplicating variable value\n      filteredSet.add(concat);\n      result.push({ label: variableValue.label, value: concat });\n    }\n  }\n  return result;\n}\n\nexport function useListVariablePluginValues(definition: ListVariableDefinition) {\n  const { data: variablePlugin } = usePlugin('Variable', definition.spec.plugin.kind);\n  const datasourceStore = useDatasourceStore();\n  const allVariables = useTemplateVariableValues();\n  const { absoluteTimeRange: timeRange, refreshKey } = useTimeRange();\n\n  const variablePluginCtx = { timeRange, datasourceStore, variables: allVariables };\n\n  const spec = definition.spec.plugin.spec;\n  const capturingRegexp =\n    definition.spec.capturing_regexp !== undefined ? new RegExp(definition.spec.capturing_regexp, 'g') : undefined;\n\n  let dependsOnVariables: string[] | undefined;\n  if (variablePlugin?.dependsOn) {\n    const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);\n    dependsOnVariables = dependencies.variables;\n  }\n\n  const variables = useTemplateVariableValues(dependsOnVariables);\n\n  let waitToLoad = false;\n  if (dependsOnVariables) {\n    waitToLoad = dependsOnVariables.some((v) => variables[v]?.loading);\n  }\n\n  const variablesValueKey = getVariableValuesKey(variables);\n\n  return useQuery(\n    [name, definition, variablesValueKey, timeRange, refreshKey],\n    async () => {\n      const resp = await variablePlugin?.getVariableOptions(spec, { datasourceStore, variables, timeRange });\n      if (resp === undefined) {\n        return [];\n      }\n      if (capturingRegexp === undefined) {\n        return resp.data;\n      }\n      return filterVariableList(resp.data, capturingRegexp);\n    },\n    { enabled: !!variablePlugin || waitToLoad }\n  );\n}\n\n/**\n * Returns a serialized string of the current state of variable values.\n */\nexport function getVariableValuesKey(v: VariableStateMap) {\n  return Object.values(v)\n    .map((v) => JSON.stringify(v.value))\n    .join(',');\n}\n\nexport const VARIABLE_TYPES = [\n  { label: 'List', kind: 'ListVariable' },\n  { label: 'Text', kind: 'TextVariable' },\n] as const;\n"],"names":["useDatasourceStore","usePlugin","useTemplateVariableValues","useTimeRange","useQuery","filterVariableList","data","capturedRegexp","result","filteredSet","Set","variableValue","matches","value","matchAll","concat","match","i","length","m","undefined","has","add","push","label","useListVariablePluginValues","definition","variablePlugin","spec","plugin","kind","datasourceStore","allVariables","absoluteTimeRange","timeRange","refreshKey","variablePluginCtx","variables","capturingRegexp","capturing_regexp","RegExp","dependsOnVariables","dependsOn","dependencies","waitToLoad","some","v","loading","variablesValueKey","getVariableValuesKey","name","resp","getVariableOptions","enabled","Object","values","map","JSON","stringify","join","VARIABLE_TYPES"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -8,6 +8,6 @@ export * from './Panel';
 export * from './PanelDrawer';
 export * from './PanelGroupDialog';
 export * from './TimeRangeControls';
-export * from './UnsavedChangesConfirmationDialog';
+export * from './DiscardChangesConfirmationDialog';
 export * from './Variables';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.js

@@ -20,7 +20,7 @@ export * from './Panel';
 export * from './PanelDrawer';
 export * from './PanelGroupDialog';
 export * from './TimeRangeControls';
-export * from './UnsavedChangesConfirmationDialog';
+export * from './DiscardChangesConfirmationDialog';
 export * from './Variables';
 
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["// Copyright 2022 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 './Dashboard';\nexport * from './DashboardToolbar';\nexport * from './DeletePanelDialog';\nexport * from './DeletePanelGroupDialog';\nexport * from './DownloadButton';\nexport * from './GridLayout';\nexport * from './Panel';\nexport * from './PanelDrawer';\nexport * from './PanelGroupDialog';\nexport * from './TimeRangeControls';\nexport * from './UnsavedChangesConfirmationDialog';\nexport * from './Variables';\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,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oCAAoC,CAAC;AACnD,cAAc,aAAa,CAAC"}
+{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["// Copyright 2022 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 './Dashboard';\nexport * from './DashboardToolbar';\nexport * from './DeletePanelDialog';\nexport * from './DeletePanelGroupDialog';\nexport * from './DownloadButton';\nexport * from './GridLayout';\nexport * from './Panel';\nexport * from './PanelDrawer';\nexport * from './PanelGroupDialog';\nexport * from './TimeRangeControls';\nexport * from './DiscardChangesConfirmationDialog';\nexport * from './Variables';\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,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oCAAoC,CAAC;AACnD,cAAc,aAAa,CAAC"}

package/dist/context/DashboardProvider/DashboardProvider.d.ts

@@ -7,7 +7,8 @@ import { PanelEditorSlice } from './panel-editor-slice';
 import { PanelSlice } from './panel-slice';
 import { DeletePanelGroupSlice } from './delete-panel-group-slice';
 import { DeletePanelSlice } from './delete-panel-slice';
-export interface DashboardStoreState extends PanelGroupSlice, PanelSlice, PanelGroupEditorSlice, DeletePanelGroupSlice, PanelEditorSlice, DeletePanelSlice {
+import { DiscardChangesConfirmationDialogSlice } from './discard-changes-dialog-slice';
+export interface DashboardStoreState extends PanelGroupSlice, PanelSlice, PanelGroupEditorSlice, DeletePanelGroupSlice, PanelEditorSlice, DeletePanelSlice, DiscardChangesConfirmationDialogSlice {
     isEditMode: boolean;
     setEditMode: (isEditMode: boolean) => void;
     defaultTimeRange: RelativeTimeRange;

package/dist/context/DashboardProvider/DashboardProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/DashboardProvider.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKxC,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACzF,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAAsD,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC1G,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAoB,UAAU,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAEhF,MAAM,WAAW,mBACf,SAAQ,eAAe,EACrB,UAAU,EACV,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EAChB,gBAAgB;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,YAAY,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACrD,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB,oEAAsE,CAAC;AAEpG,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,KAM/E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAU9D"}
+{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/DashboardProvider.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKxC,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACzF,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAAsD,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC1G,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAoB,UAAU,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAmC,qCAAqC,EAAE,MAAM,gCAAgC,CAAC;AAExH,MAAM,WAAW,mBACf,SAAQ,eAAe,EACrB,UAAU,EACV,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EAChB,gBAAgB,EAChB,qCAAqC;IACvC,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,YAAY,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACrD,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB,oEAAsE,CAAC;AAEpG,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,KAM/E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAU9D"}

package/dist/context/DashboardProvider/DashboardProvider.js

@@ -22,6 +22,7 @@ import { createPanelEditorSlice } from './panel-editor-slice';
 import { createPanelSlice } from './panel-slice';
 import { createDeletePanelGroupSlice } from './delete-panel-group-slice';
 import { createDeletePanelSlice } from './delete-panel-slice';
+import { createDiscardChangesDialogSlice } from './discard-changes-dialog-slice';
 export const DashboardContext = /*#__PURE__*/ createContext(undefined);
 export function useDashboardStore(selector) {
     const store = useContext(DashboardContext);
@@ -52,6 +53,7 @@ function initStore(props) {
             ...createDeletePanelGroupSlice(...args),
             ...createPanelEditorSlice()(...args),
             ...createDeletePanelSlice()(...args),
+            ...createDiscardChangesDialogSlice(...args),
             metadata,
             defaultTimeRange: {
                 pastDuration: duration