@perses-dev/plugin-system 0.37.2 → 0.38.0

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

@@ -0,0 +1,414 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useMemo, useState } from 'react';
+import { Box, Typography, Switch, TextField, Grid, FormControl, FormControlLabel, InputLabel, MenuItem, Button, Stack, ClickAwayListener, Divider, Select, capitalize } from '@mui/material';
+import { useImmer } from 'use-immer';
+import { DiscardChangesConfirmationDialog, ErrorBoundary } from '@perses-dev/components';
+import { VARIABLE_TYPES } from '../variable-model';
+import { PluginEditor } from '../../PluginEditor';
+import { VariableListPreview, VariablePreview } from './VariablePreview';
+import { getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';
+// TODO: Replace with proper validation library
+function getValidation(state) {
+    /** Name validation */ let name = null;
+    if (!state.name) {
+        name = 'Name is required';
+    }
+    // name can only contain alphanumeric characters and underscores and no spaces
+    if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {
+        name = 'Name can only contain alphanumeric characters, underscores, and dashes';
+    }
+    return {
+        name,
+        isValid: !name
+    };
+}
+function FallbackPreview() {
+    return /*#__PURE__*/ _jsx("div", {
+        children: "Error previewing values"
+    });
+}
+export function VariableEditForm(props) {
+    const { initialVariableDefinition , onChange , onCancel , action ='update'  } = props;
+    const initialState = getInitialState(initialVariableDefinition);
+    const [state, setState] = useImmer(initialState);
+    const validation = useMemo(()=>getValidation(state), [
+        state
+    ]);
+    const [isDiscardDialogStateOpened, setDiscardDialogStateOpened] = useState(false);
+    const [previewKey, setPreviewKey] = useState(0);
+    const refreshPreview = ()=>{
+        setPreviewKey((prev)=>prev + 1);
+    };
+    /** 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(()=>{
+        return getVariableDefinitionFromState(state);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        previewKey
+    ]);
+    const title = useMemo(()=>{
+        if (action === 'read') return 'View Variable';
+        if (action === 'create') return 'Create Variable';
+        if (action === 'update') return 'Edit Variable';
+        return '';
+    }, [
+        action
+    ]);
+    // When user click on cancel, several possibilities:
+    // - create action: ask for discard approval
+    // - update action: ask for discard approval if changed
+    // - read action: don´t ask for discard approval
+    const handleCancel = useCallback(()=>{
+        if (action === 'create' || action === 'update' && JSON.stringify(initialState) !== JSON.stringify(state)) {
+            setDiscardDialogStateOpened(true);
+        } else {
+            onCancel();
+        }
+    }, [
+        state,
+        initialState,
+        action,
+        setDiscardDialogStateOpened,
+        onCancel
+    ]);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: (theme)=>theme.spacing(1, 2),
+                    borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h2",
+                        children: title
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            marginLeft: 'auto'
+                        },
+                        children: [
+                            action !== 'read' && /*#__PURE__*/ _jsx(Button, {
+                                disabled: !validation.isValid,
+                                variant: "contained",
+                                onClick: ()=>{
+                                    onChange(getVariableDefinitionFromState(state));
+                                },
+                                children: capitalize(action)
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                color: "secondary",
+                                variant: "outlined",
+                                onClick: handleCancel,
+                                children: action === 'read' ? 'Close' : 'Cancel'
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Box, {
+                padding: 2,
+                sx: {
+                    overflowY: 'scroll'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(Grid, {
+                        container: true,
+                        spacing: 2,
+                        mb: 2,
+                        children: [
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 8,
+                                children: /*#__PURE__*/ _jsx(TextField, {
+                                    required: true,
+                                    error: !!validation.name,
+                                    fullWidth: true,
+                                    label: "Name",
+                                    value: state.name,
+                                    helperText: validation.name,
+                                    InputProps: {
+                                        readOnly: action === 'update' || action === 'read'
+                                    },
+                                    onChange: (v)=>{
+                                        setState((draft)=>{
+                                            draft.name = v.target.value;
+                                        });
+                                    }
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 4,
+                                children: /*#__PURE__*/ _jsx(TextField, {
+                                    fullWidth: true,
+                                    label: "Display Label",
+                                    value: state.title || '',
+                                    InputProps: {
+                                        readOnly: action === 'read'
+                                    },
+                                    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,
+                                    InputProps: {
+                                        readOnly: action === 'read'
+                                    },
+                                    onChange: (v)=>{
+                                        setState((draft)=>{
+                                            draft.description = v.target.value;
+                                        });
+                                    }
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 4,
+                                children: /*#__PURE__*/ _jsxs(FormControl, {
+                                    fullWidth: true,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(InputLabel, {
+                                            id: "variable-type-select-label",
+                                            children: "Type"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Select, {
+                                            labelId: "variable-type-select-label",
+                                            id: "variable-type-select",
+                                            label: "Type",
+                                            value: state.kind,
+                                            readOnly: action === 'read',
+                                            onChange: (v)=>{
+                                                setState((draft)=>{
+                                                    draft.kind = v.target.value;
+                                                });
+                                            },
+                                            children: VARIABLE_TYPES.map((v)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: v.kind,
+                                                    children: v.label
+                                                }, v.kind))
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Divider, {}),
+                    state.kind === 'TextVariable' && /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                py: 1,
+                                variant: "subtitle1",
+                                children: "Text Options"
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                spacing: 2,
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        children: /*#__PURE__*/ _jsx(VariablePreview, {
+                                            values: [
+                                                state.textVariableFields.value
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Value",
+                                        value: state.textVariableFields.value,
+                                        InputProps: {
+                                            readOnly: action === 'read'
+                                        },
+                                        onChange: (v)=>{
+                                            setState((draft)=>{
+                                                draft.textVariableFields.value = v.target.value;
+                                            });
+                                        }
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    state.kind === 'ListVariable' && /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                py: 1,
+                                variant: "subtitle1",
+                                children: "List Options"
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                spacing: 2,
+                                mb: 2,
+                                children: [
+                                    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: "100%",
+                                                pluginType: "Variable",
+                                                pluginKindLabel: "Source",
+                                                value: state.listVariableFields.plugin,
+                                                isReadonly: action === 'read',
+                                                onChange: (val)=>{
+                                                    setState((draft)=>{
+                                                        draft.listVariableFields.plugin = val;
+                                                    });
+                                                }
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx(Stack, {
+                                        children: /*#__PURE__*/ _jsx(TextField, {
+                                            label: "Capturing Regexp Filter",
+                                            value: state.listVariableFields.capturing_regexp || '',
+                                            InputProps: {
+                                                readOnly: action === 'read'
+                                            },
+                                            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;
+                                                    } else {
+                                                        draft.listVariableFields.capturing_regexp = undefined;
+                                                    }
+                                                });
+                                            },
+                                            helperText: "Optional, if you want to filter on captured result."
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Divider, {}),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                py: 1,
+                                variant: "subtitle1",
+                                children: "Dropdown Options"
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                spacing: "2",
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(FormControlLabel, {
+                                                control: /*#__PURE__*/ _jsx(Switch, {
+                                                    checked: state.listVariableFields.allowMultiple,
+                                                    readOnly: action === 'read',
+                                                    onChange: (e)=>{
+                                                        if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
+                                                        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(Stack, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(FormControlLabel, {
+                                                control: /*#__PURE__*/ _jsx(Switch, {
+                                                    checked: state.listVariableFields.allowAll,
+                                                    readOnly: action === 'read',
+                                                    onChange: (e)=>{
+                                                        if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
+                                                        setState((draft)=>{
+                                                            draft.listVariableFields.allowAll = e.target.checked;
+                                                        });
+                                                    }
+                                                }),
+                                                label: "Allow All option"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                mb: 1,
+                                                variant: "caption",
+                                                children: "Enables an option to include all variable values"
+                                            }),
+                                            state.listVariableFields.allowAll && /*#__PURE__*/ _jsx(TextField, {
+                                                label: "Custom All Value",
+                                                value: state.listVariableFields.customAllValue,
+                                                InputProps: {
+                                                    readOnly: action === 'read'
+                                                },
+                                                onChange: (e)=>{
+                                                    setState((draft)=>{
+                                                        if (e.target.value) {
+                                                            draft.listVariableFields.customAllValue = e.target.value;
+                                                        } else {
+                                                            draft.listVariableFields.customAllValue = undefined;
+                                                        }
+                                                    });
+                                                },
+                                                helperText: "When All is selected, this value will be used"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(DiscardChangesConfirmationDialog, {
+                description: "Are you sure you want to discard these changes? Changes cannot be recovered.",
+                isOpen: isDiscardDialogStateOpened,
+                onCancel: ()=>{
+                    setDiscardDialogStateOpened(false);
+                },
+                onDiscardChanges: ()=>{
+                    setDiscardDialogStateOpened(false);
+                    onCancel();
+                }
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=VariableEditorForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.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 React, { useCallback, useMemo, useState } from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControl,\n  FormControlLabel,\n  InputLabel,\n  MenuItem,\n  Button,\n  Stack,\n  ClickAwayListener,\n  Divider,\n  Select,\n  capitalize,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { VariableDefinition, ListVariableDefinition } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorBoundary } from '@perses-dev/components';\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { PluginEditor } from '../../PluginEditor';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\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\nfunction FallbackPreview() {\n  return <div>Error previewing values</div>;\n}\n\nexport type Action = 'create' | 'read' | 'update';\n\ninterface VariableEditFormProps {\n  initialVariableDefinition: VariableDefinition;\n  onChange: (def: VariableDefinition) => void;\n  onCancel: () => void;\n  action?: Action;\n}\n\nexport function VariableEditForm(props: VariableEditFormProps) {\n  const { initialVariableDefinition, onChange, onCancel, action = 'update' } = props;\n  const initialState = getInitialState(initialVariableDefinition);\n  const [state, setState] = useImmer(initialState);\n  const validation = useMemo(() => getValidation(state), [state]);\n  const [isDiscardDialogStateOpened, setDiscardDialogStateOpened] = useState<boolean>(false);\n  const [previewKey, setPreviewKey] = 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 explicitly 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  const title = useMemo(() => {\n    if (action === 'read') return 'View Variable';\n    if (action === 'create') return 'Create Variable';\n    if (action === 'update') return 'Edit Variable';\n    return '';\n  }, [action]);\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  const handleCancel = useCallback(() => {\n    if (action === 'create' || (action === 'update' && JSON.stringify(initialState) !== JSON.stringify(state))) {\n      setDiscardDialogStateOpened(true);\n    } else {\n      onCancel();\n    }\n  }, [state, initialState, action, setDiscardDialogStateOpened, onCancel]);\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\">{title}</Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          {action !== 'read' && (\n            <Button\n              disabled={!validation.isValid}\n              variant=\"contained\"\n              onClick={() => {\n                onChange(getVariableDefinitionFromState(state));\n              }}\n            >\n              {capitalize(action)}\n            </Button>\n          )}\n          <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n            {action === 'read' ? 'Close' : 'Cancel'}\n          </Button>\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={8}>\n            <TextField\n              required\n              error={!!validation.name}\n              fullWidth\n              label=\"Name\"\n              value={state.name}\n              helperText={validation.name}\n              InputProps={{\n                readOnly: action === 'update' || action === 'read',\n              }}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.name = v.target.value;\n                });\n              }}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <TextField\n              fullWidth\n              label=\"Display Label\"\n              value={state.title || ''}\n              InputProps={{\n                readOnly: action === 'read',\n              }}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.title = v.target.value;\n                });\n              }}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <TextField\n              fullWidth\n              label=\"Description\"\n              value={state.description}\n              InputProps={{\n                readOnly: action === 'read',\n              }}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.description = v.target.value;\n                });\n              }}\n            />\n          </Grid>\n          <Grid item xs={4}>\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                readOnly={action === 'read'}\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>\n\n        <Divider />\n\n        {state.kind === 'TextVariable' && (\n          <>\n            <Typography py={1} variant=\"subtitle1\">\n              Text Options\n            </Typography>\n            <Stack spacing={2}>\n              <Box>\n                <VariablePreview values={[state.textVariableFields.value]} />\n              </Box>\n              <TextField\n                label=\"Value\"\n                value={state.textVariableFields.value}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.textVariableFields.value = v.target.value;\n                  });\n                }}\n              />\n            </Stack>\n          </>\n        )}\n\n        {state.kind === 'ListVariable' && (\n          <>\n            <Typography py={1} variant=\"subtitle1\">\n              List Options\n            </Typography>\n            <Stack spacing={2} mb={2}>\n              {state.listVariableFields.plugin.kind ? (\n                <Box>\n                  <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n                    <VariableListPreview definition={previewSpec} onRefresh={refreshPreview} />\n                  </ErrorBoundary>\n                </Box>\n              ) : (\n                <VariablePreview isLoading={true} />\n              )}\n\n              <Stack>\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=\"100%\"\n                  pluginType=\"Variable\"\n                  pluginKindLabel=\"Source\"\n                  value={state.listVariableFields.plugin}\n                  isReadonly={action === 'read'}\n                  onChange={(val) => {\n                    setState((draft) => {\n                      draft.listVariableFields.plugin = val;\n                    });\n                  }}\n                />\n              </Stack>\n\n              <Stack>\n                <TextField\n                  label=\"Capturing Regexp Filter\"\n                  value={state.listVariableFields.capturing_regexp || ''}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  onChange={(e) => {\n                    setState((draft) => {\n                      if (e.target.value) {\n                        // TODO: do a better fix, if empty string => it should skip the filter\n                        draft.listVariableFields.capturing_regexp = e.target.value;\n                      } else {\n                        draft.listVariableFields.capturing_regexp = undefined;\n                      }\n                    });\n                  }}\n                  helperText=\"Optional, if you want to filter on captured result.\"\n                />\n              </Stack>\n            </Stack>\n\n            <Divider />\n\n            <Typography py={1} variant=\"subtitle1\">\n              Dropdown Options\n            </Typography>\n            <Stack spacing=\"2\">\n              <Stack>\n                <FormControlLabel\n                  control={\n                    <Switch\n                      checked={state.listVariableFields.allowMultiple}\n                      readOnly={action === 'read'}\n                      onChange={(e) => {\n                        if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                        setState((draft) => {\n                          draft.listVariableFields.allowMultiple = e.target.checked;\n                        });\n                      }}\n                    />\n                  }\n                  label=\"Allow Multiple Values\"\n                />\n                <Typography variant=\"caption\">Enables multiple values to be selected at the same time</Typography>\n              </Stack>\n              <Stack>\n                <FormControlLabel\n                  control={\n                    <Switch\n                      checked={state.listVariableFields.allowAll}\n                      readOnly={action === 'read'}\n                      onChange={(e) => {\n                        if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                        setState((draft) => {\n                          draft.listVariableFields.allowAll = e.target.checked;\n                        });\n                      }}\n                    />\n                  }\n                  label=\"Allow All option\"\n                />\n                <Typography mb={1} variant=\"caption\">\n                  Enables an option to include all variable values\n                </Typography>\n                {state.listVariableFields.allowAll && (\n                  <TextField\n                    label=\"Custom All Value\"\n                    value={state.listVariableFields.customAllValue}\n                    InputProps={{\n                      readOnly: action === 'read',\n                    }}\n                    onChange={(e) => {\n                      setState((draft) => {\n                        if (e.target.value) {\n                          draft.listVariableFields.customAllValue = e.target.value;\n                        } else {\n                          draft.listVariableFields.customAllValue = undefined;\n                        }\n                      });\n                    }}\n                    helperText=\"When All is selected, this value will be used\"\n                  />\n                )}\n              </Stack>\n            </Stack>\n          </>\n        )}\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard these changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogStateOpened}\n        onCancel={() => {\n          setDiscardDialogStateOpened(false);\n        }}\n        onDiscardChanges={() => {\n          setDiscardDialogStateOpened(false);\n          onCancel();\n        }}\n      />\n    </>\n  );\n}\n"],"names":["React","useCallback","useMemo","useState","Box","Typography","Switch","TextField","Grid","FormControl","FormControlLabel","InputLabel","MenuItem","Button","Stack","ClickAwayListener","Divider","Select","capitalize","useImmer","DiscardChangesConfirmationDialog","ErrorBoundary","VARIABLE_TYPES","PluginEditor","VariableListPreview","VariablePreview","getVariableDefinitionFromState","getInitialState","getValidation","state","name","test","isValid","FallbackPreview","div","VariableEditForm","props","initialVariableDefinition","onChange","onCancel","action","initialState","setState","validation","isDiscardDialogStateOpened","setDiscardDialogStateOpened","previewKey","setPreviewKey","refreshPreview","prev","previewSpec","title","handleCancel","JSON","stringify","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","overflowY","container","mb","item","xs","required","error","fullWidth","label","value","helperText","InputProps","readOnly","v","draft","target","description","id","labelId","kind","map","py","values","textVariableFields","listVariableFields","plugin","FallbackComponent","resetKeys","definition","onRefresh","isLoading","onClickAway","width","pluginType","pluginKindLabel","isReadonly","val","capturing_regexp","e","undefined","control","checked","allowMultiple","allowAll","customAllValue","isOpen","onDiscardChanges"],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ListVariableDefinition } from '@perses-dev/core';
+interface VariablePreviewProps {
+    values?: string[];
+    onRefresh?: () => void;
+    isLoading?: boolean;
+    error?: string;
+}
+export declare function VariablePreview(props: VariablePreviewProps): JSX.Element;
+interface VariableListPreviewProps {
+    definition: ListVariableDefinition;
+    onRefresh: () => void;
+}
+export declare function VariableListPreview(props: VariableListPreviewProps): JSX.Element;
+export {};
+//# sourceMappingURL=VariablePreview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariablePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAM1D,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAuD1D;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAalE"}

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

@@ -0,0 +1,122 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { Alert, Box, Card, Chip, CircularProgress, IconButton, Stack, Typography } from '@mui/material';
+import { InfoTooltip, useSnackbar } 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 } from '../variable-model';
+const DEFAULT_MAX_PREVIEW_VALUES = 50;
+export function VariablePreview(props) {
+    const { values , onRefresh , isLoading , error  } = props;
+    const [maxValues, setMaxValues] = useState(DEFAULT_MAX_PREVIEW_VALUES);
+    const { infoSnackbar  } = useSnackbar();
+    const showAll = ()=>{
+        setMaxValues(undefined);
+    };
+    let notShown = 0;
+    if (values && (values === null || values === void 0 ? void 0 : values.length) > 0 && maxValues) {
+        notShown = values.length - maxValues;
+    }
+    return /*#__PURE__*/ _jsxs(Box, {
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                alignItems: "center",
+                mb: 1,
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h4",
+                        children: "Preview Values"
+                    }),
+                    onRefresh && /*#__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 (values === null || values === void 0 ? void 0 : values.length) {
+                                    await navigator.clipboard.writeText(values.map((value)=>value).join(', '));
+                                    infoSnackbar('Preview values copied to clipboard!');
+                                }
+                            },
+                            size: "small",
+                            children: /*#__PURE__*/ _jsx(Clipboard, {})
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Card, {
+                variant: "outlined",
+                children: /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                        gap: 1,
+                        m: 2
+                    },
+                    children: [
+                        error && /*#__PURE__*/ _jsx(Alert, {
+                            severity: "error",
+                            children: error
+                        }),
+                        (values === null || values === void 0 ? void 0 : values.length) === 0 && /*#__PURE__*/ _jsx(Alert, {
+                            severity: "info",
+                            children: "No results"
+                        }),
+                        isLoading && /*#__PURE__*/ _jsx(Stack, {
+                            width: "100%",
+                            sx: {
+                                alignItems: 'center',
+                                justifyContent: 'center'
+                            },
+                            children: /*#__PURE__*/ _jsx(CircularProgress, {})
+                        }),
+                        values === null || values === void 0 ? void 0 : values.slice(0, maxValues).map((val)=>/*#__PURE__*/ _jsx(Chip, {
+                                size: "small",
+                                label: val
+                            }, val)),
+                        notShown > 0 && /*#__PURE__*/ _jsx(Chip, {
+                            onClick: showAll,
+                            variant: "outlined",
+                            size: "small",
+                            label: `+${notShown} more`
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+export function VariableListPreview(props) {
+    const { definition , onRefresh  } = props;
+    const { data , isFetching , error  } = useListVariablePluginValues(definition);
+    const errorMessage = error === null || error === void 0 ? void 0 : error.message;
+    return /*#__PURE__*/ _jsx(VariablePreview, {
+        values: (data === null || data === void 0 ? void 0 : data.map((val)=>val.value)) || [],
+        onRefresh: onRefresh,
+        isLoading: isFetching,
+        error: errorMessage
+    });
+}
+
+//# sourceMappingURL=VariablePreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.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 React, { useState } from 'react';\nimport { Alert, Box, Card, Chip, CircularProgress, IconButton, Stack, Typography } from '@mui/material';\nimport { InfoTooltip, useSnackbar } from '@perses-dev/components';\nimport Refresh from 'mdi-material-ui/Refresh';\nimport Clipboard from 'mdi-material-ui/ClipboardOutline';\nimport { ListVariableDefinition } from '@perses-dev/core';\nimport { TOOLTIP_TEXT } from '../../../constants';\nimport { useListVariablePluginValues } from '../variable-model';\n\nconst DEFAULT_MAX_PREVIEW_VALUES = 50;\n\ninterface VariablePreviewProps {\n  values?: string[];\n  onRefresh?: () => void;\n  isLoading?: boolean;\n  error?: string;\n}\n\nexport function VariablePreview(props: VariablePreviewProps) {\n  const { values, onRefresh, isLoading, error } = props;\n  const [maxValues, setMaxValues] = useState<number | undefined>(DEFAULT_MAX_PREVIEW_VALUES);\n  const { infoSnackbar } = useSnackbar();\n  const showAll = () => {\n    setMaxValues(undefined);\n  };\n  let notShown = 0;\n\n  if (values && values?.length > 0 && maxValues) {\n    notShown = values.length - maxValues;\n  }\n\n  return (\n    <Box>\n      <Stack direction=\"row\" spacing={1} alignItems=\"center\" mb={1}>\n        <Typography variant=\"h4\">Preview Values</Typography>\n        {onRefresh && (\n          <InfoTooltip description={TOOLTIP_TEXT.refreshVariableValues}>\n            <IconButton onClick={onRefresh} size=\"small\">\n              <Refresh />\n            </IconButton>\n          </InfoTooltip>\n        )}\n        <InfoTooltip description={TOOLTIP_TEXT.copyVariableValues}>\n          <IconButton\n            onClick={async () => {\n              if (values?.length) {\n                await navigator.clipboard.writeText(values.map((value) => value).join(', '));\n                infoSnackbar('Preview values copied to clipboard!');\n              }\n            }}\n            size=\"small\"\n          >\n            <Clipboard />\n          </IconButton>\n        </InfoTooltip>\n      </Stack>\n      <Card variant=\"outlined\">\n        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, m: 2 }}>\n          {error && <Alert severity=\"error\">{error}</Alert>}\n          {values?.length === 0 && <Alert severity=\"info\">No results</Alert>}\n          {isLoading && (\n            <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n              <CircularProgress />\n            </Stack>\n          )}\n          {values?.slice(0, maxValues).map((val) => (\n            <Chip size=\"small\" key={val} label={val} />\n          ))}\n          {notShown > 0 && <Chip onClick={showAll} variant=\"outlined\" size=\"small\" label={`+${notShown} more`} />}\n        </Box>\n      </Card>\n    </Box>\n  );\n}\n\ninterface VariableListPreviewProps {\n  definition: ListVariableDefinition;\n  onRefresh: () => void;\n}\n\nexport function VariableListPreview(props: VariableListPreviewProps) {\n  const { definition, onRefresh } = props;\n  const { data, isFetching, error } = useListVariablePluginValues(definition);\n  const errorMessage = (error as Error)?.message;\n\n  return (\n    <VariablePreview\n      values={data?.map((val) => val.value) || []}\n      onRefresh={onRefresh}\n      isLoading={isFetching}\n      error={errorMessage}\n    />\n  );\n}\n"],"names":["React","useState","Alert","Box","Card","Chip","CircularProgress","IconButton","Stack","Typography","InfoTooltip","useSnackbar","Refresh","Clipboard","TOOLTIP_TEXT","useListVariablePluginValues","DEFAULT_MAX_PREVIEW_VALUES","VariablePreview","props","values","onRefresh","isLoading","error","maxValues","setMaxValues","infoSnackbar","showAll","undefined","notShown","length","direction","spacing","alignItems","mb","variant","description","refreshVariableValues","onClick","size","copyVariableValues","navigator","clipboard","writeText","map","value","join","sx","display","flexWrap","gap","m","severity","width","justifyContent","slice","val","label","VariableListPreview","definition","data","isFetching","errorMessage","message"],"mappings":"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"}

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

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