@perses-dev/plugin-system 0.40.0 → 0.40.1

package/dist/cjs/components/DatasourceEditorForm/DatasourceEditorForm.js

@@ -159,6 +159,7 @@ function DatasourceEditorForm(props) {
                                 }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                                     color: "error",
+                                    disabled: isReadonly,
                                     variant: "outlined",
                                     onClick: onDelete,
                                     children: "Delete"

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

@@ -157,6 +157,7 @@ function VariableEditorForm(props) {
                                 }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                                     color: "error",
+                                    disabled: isReadonly,
                                     variant: "outlined",
                                     onClick: onDelete,
                                     children: "Delete"

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js

@@ -110,6 +110,7 @@ export function DatasourceEditorForm(props) {
                                 }),
                                 /*#__PURE__*/ _jsx(Button, {
                                     color: "error",
+                                    disabled: isReadonly,
                                     variant: "outlined",
                                     onClick: onDelete,
                                     children: "Delete"

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.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 { useImmer } from 'use-immer';\nimport { Display, Datasource } from '@perses-dev/core';\nimport { Box, Button, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport React, { Dispatch, DispatchWithoutAction, useCallback, useState } from 'react';\nimport { DiscardChangesConfirmationDialog } from '@perses-dev/components';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { PluginEditor } from '../PluginEditor';\nimport { Action, getSubmitText, getTitleAction } from '../../utils';\nimport { datasourceEditValidationSchema, DatasourceEditValidationType } from '../../validation';\n\n/**\n * This preprocessing ensures that we always have a defined object for the `display` property\n * @param datasource\n */\nfunction getInitialState<T extends Datasource>(datasource: T): T {\n  const patchedDisplay: Display = {\n    name: datasource.spec.display?.name ?? '',\n    description: datasource.spec.display?.description ?? '',\n  };\n\n  return {\n    ...datasource,\n    spec: {\n      ...datasource.spec,\n      display: patchedDisplay,\n    },\n  };\n}\n\ninterface DatasourceEditorFormProps<T extends Datasource> {\n  initialDatasource: T;\n  initialAction: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onSave: Dispatch<T>;\n  onClose: DispatchWithoutAction;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm<T extends Datasource>(props: DatasourceEditorFormProps<T>) {\n  const { initialDatasource, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;\n\n  const patchedInitialDatasource = getInitialState(initialDatasource);\n  const [state, setState] = useImmer(patchedInitialDatasource);\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const [action, setAction] = useState(initialAction);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const form = useForm<DatasourceEditValidationType>({\n    resolver: zodResolver(datasourceEditValidationSchema),\n    mode: 'onBlur',\n    defaultValues: {\n      name: state.metadata.name,\n      title: state.spec.display?.name,\n      description: state.spec.display?.description,\n      default: state.spec.default,\n    },\n  });\n\n  const processForm: SubmitHandler<DatasourceEditValidationType> = () => {\n    onSave(state);\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  const handleCancel = useCallback(() => {\n    if (JSON.stringify(patchedInitialDatasource) !== JSON.stringify(state)) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }, [state, patchedInitialDatasource, setDiscardDialogOpened, onClose]);\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Datasource</Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          {action === 'read' ? (\n            <>\n              <Button disabled={isReadonly} variant=\"contained\" onClick={() => setAction('update')}>\n                Edit\n              </Button>\n              <Button color=\"error\" variant=\"outlined\" onClick={onDelete}>\n                Delete\n              </Button>\n              <Divider\n                orientation=\"vertical\"\n                flexItem\n                sx={(theme) => ({\n                  borderColor: theme.palette.grey['500'],\n                  '&.MuiDivider-root': {\n                    marginLeft: 2,\n                    marginRight: 1,\n                  },\n                })}\n              />\n              <Button color=\"secondary\" variant=\"outlined\" onClick={onClose}>\n                Close\n              </Button>\n            </>\n          ) : (\n            <>\n              <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={form.handleSubmit(processForm)}>\n                {submitText}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </>\n          )}\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={4}>\n            <Controller\n              name=\"name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  name=\"name\"\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update',\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.metadata.name = event.target.value;\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              name=\"title\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"title\"\n                  label=\"Display Label\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    setState((draft) => {\n                      field.onChange(event);\n                      if (draft.spec.display) {\n                        draft.spec.display.name = event.target.value;\n                      }\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Controller\n              name=\"description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"description\"\n                  label=\"Description\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      if (draft.spec.display) {\n                        draft.spec.display.description = event.target.value;\n                      }\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n            <Stack>\n              <Controller\n                name=\"default\"\n                render={({ field }) => (\n                  <FormControlLabel\n                    {...field}\n                    control={\n                      <Switch\n                        checked={state.spec.default}\n                        readOnly={action === 'read'}\n                        onChange={(event) => {\n                          if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                          field.onChange(event);\n                          setState((draft) => {\n                            draft.spec.default = event.target.checked;\n                          });\n                        }}\n                      />\n                    }\n                    label=\"Set as default\"\n                  />\n                )}\n              />\n              <Typography variant=\"caption\">\n                Whether this datasource should be the default {state.spec.plugin.kind} to be used\n              </Typography>\n            </Stack>\n          </Grid>\n        </Grid>\n        <Divider />\n        <Typography py={1} variant=\"h3\">\n          Plugin Options\n        </Typography>\n        <PluginEditor\n          width=\"100%\"\n          pluginType=\"Datasource\"\n          pluginKindLabel=\"Source\"\n          value={state.spec.plugin}\n          isReadonly={action === 'read'}\n          onChange={(v) => {\n            setState((draft) => {\n              draft.spec.plugin = v;\n            });\n          }}\n        />\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard your changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => setDiscardDialogOpened(false)}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["useImmer","Box","Button","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","React","useCallback","useState","DiscardChangesConfirmationDialog","Controller","FormProvider","useForm","zodResolver","PluginEditor","getSubmitText","getTitleAction","datasourceEditValidationSchema","getInitialState","datasource","patchedDisplay","name","spec","display","description","DatasourceEditorForm","props","state","initialDatasource","initialAction","isDraft","isReadonly","onSave","onClose","onDelete","patchedInitialDatasource","setState","isDiscardDialogOpened","setDiscardDialogOpened","action","setAction","titleAction","submitText","form","resolver","mode","defaultValues","metadata","title","default","processForm","handleCancel","JSON","stringify","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","orientation","flexItem","borderColor","grey","marginRight","formState","isValid","handleSubmit","overflowY","container","mb","item","xs","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","undefined","InputProps","readOnly","error","helperText","message","onChange","event","draft","target","value","paddingTop","control","checked","plugin","kind","py","width","pluginType","pluginKindLabel","v","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.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 { useImmer } from 'use-immer';\nimport { Display, Datasource } from '@perses-dev/core';\nimport { Box, Button, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport React, { Dispatch, DispatchWithoutAction, useCallback, useState } from 'react';\nimport { DiscardChangesConfirmationDialog } from '@perses-dev/components';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { PluginEditor } from '../PluginEditor';\nimport { Action, getSubmitText, getTitleAction } from '../../utils';\nimport { datasourceEditValidationSchema, DatasourceEditValidationType } from '../../validation';\n\n/**\n * This preprocessing ensures that we always have a defined object for the `display` property\n * @param datasource\n */\nfunction getInitialState<T extends Datasource>(datasource: T): T {\n  const patchedDisplay: Display = {\n    name: datasource.spec.display?.name ?? '',\n    description: datasource.spec.display?.description ?? '',\n  };\n\n  return {\n    ...datasource,\n    spec: {\n      ...datasource.spec,\n      display: patchedDisplay,\n    },\n  };\n}\n\ninterface DatasourceEditorFormProps<T extends Datasource> {\n  initialDatasource: T;\n  initialAction: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onSave: Dispatch<T>;\n  onClose: DispatchWithoutAction;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm<T extends Datasource>(props: DatasourceEditorFormProps<T>) {\n  const { initialDatasource, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;\n\n  const patchedInitialDatasource = getInitialState(initialDatasource);\n  const [state, setState] = useImmer(patchedInitialDatasource);\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const [action, setAction] = useState(initialAction);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const form = useForm<DatasourceEditValidationType>({\n    resolver: zodResolver(datasourceEditValidationSchema),\n    mode: 'onBlur',\n    defaultValues: {\n      name: state.metadata.name,\n      title: state.spec.display?.name,\n      description: state.spec.display?.description,\n      default: state.spec.default,\n    },\n  });\n\n  const processForm: SubmitHandler<DatasourceEditValidationType> = () => {\n    onSave(state);\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  const handleCancel = useCallback(() => {\n    if (JSON.stringify(patchedInitialDatasource) !== JSON.stringify(state)) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }, [state, patchedInitialDatasource, setDiscardDialogOpened, onClose]);\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Datasource</Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          {action === 'read' ? (\n            <>\n              <Button disabled={isReadonly} variant=\"contained\" onClick={() => setAction('update')}>\n                Edit\n              </Button>\n              <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n                Delete\n              </Button>\n              <Divider\n                orientation=\"vertical\"\n                flexItem\n                sx={(theme) => ({\n                  borderColor: theme.palette.grey['500'],\n                  '&.MuiDivider-root': {\n                    marginLeft: 2,\n                    marginRight: 1,\n                  },\n                })}\n              />\n              <Button color=\"secondary\" variant=\"outlined\" onClick={onClose}>\n                Close\n              </Button>\n            </>\n          ) : (\n            <>\n              <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={form.handleSubmit(processForm)}>\n                {submitText}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </>\n          )}\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={4}>\n            <Controller\n              name=\"name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  name=\"name\"\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update',\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.metadata.name = event.target.value;\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              name=\"title\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"title\"\n                  label=\"Display Label\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    setState((draft) => {\n                      field.onChange(event);\n                      if (draft.spec.display) {\n                        draft.spec.display.name = event.target.value;\n                      }\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Controller\n              name=\"description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"description\"\n                  label=\"Description\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      if (draft.spec.display) {\n                        draft.spec.display.description = event.target.value;\n                      }\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n            <Stack>\n              <Controller\n                name=\"default\"\n                render={({ field }) => (\n                  <FormControlLabel\n                    {...field}\n                    control={\n                      <Switch\n                        checked={state.spec.default}\n                        readOnly={action === 'read'}\n                        onChange={(event) => {\n                          if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                          field.onChange(event);\n                          setState((draft) => {\n                            draft.spec.default = event.target.checked;\n                          });\n                        }}\n                      />\n                    }\n                    label=\"Set as default\"\n                  />\n                )}\n              />\n              <Typography variant=\"caption\">\n                Whether this datasource should be the default {state.spec.plugin.kind} to be used\n              </Typography>\n            </Stack>\n          </Grid>\n        </Grid>\n        <Divider />\n        <Typography py={1} variant=\"h3\">\n          Plugin Options\n        </Typography>\n        <PluginEditor\n          width=\"100%\"\n          pluginType=\"Datasource\"\n          pluginKindLabel=\"Source\"\n          value={state.spec.plugin}\n          isReadonly={action === 'read'}\n          onChange={(v) => {\n            setState((draft) => {\n              draft.spec.plugin = v;\n            });\n          }}\n        />\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard your changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => setDiscardDialogOpened(false)}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["useImmer","Box","Button","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","React","useCallback","useState","DiscardChangesConfirmationDialog","Controller","FormProvider","useForm","zodResolver","PluginEditor","getSubmitText","getTitleAction","datasourceEditValidationSchema","getInitialState","datasource","patchedDisplay","name","spec","display","description","DatasourceEditorForm","props","state","initialDatasource","initialAction","isDraft","isReadonly","onSave","onClose","onDelete","patchedInitialDatasource","setState","isDiscardDialogOpened","setDiscardDialogOpened","action","setAction","titleAction","submitText","form","resolver","mode","defaultValues","metadata","title","default","processForm","handleCancel","JSON","stringify","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","orientation","flexItem","borderColor","grey","marginRight","formState","isValid","handleSubmit","overflowY","container","mb","item","xs","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","undefined","InputProps","readOnly","error","helperText","message","onChange","event","draft","target","value","paddingTop","control","checked","plugin","kind","py","width","pluginType","pluginKindLabel","v","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}

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

@@ -108,6 +108,7 @@ export function VariableEditorForm(props) {
                                 }),
                                 /*#__PURE__*/ _jsx(Button, {
                                     color: "error",
+                                    disabled: isReadonly,
                                     variant: "outlined",
                                     onClick: onDelete,
                                     children: "Delete"

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

@@ -1 +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, { DispatchWithoutAction, useCallback, useMemo, useState } from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControlLabel,\n  MenuItem,\n  Button,\n  Stack,\n  ClickAwayListener,\n  Divider,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { VariableDefinition, ListVariableDefinition } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorBoundary } from '@perses-dev/components';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Action, getSubmitText, getTitleAction } from '../../../utils';\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { PluginEditor } from '../../PluginEditor';\nimport { variableEditValidationSchema, VariableEditValidationType } from '../../../validation';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\nfunction FallbackPreview() {\n  return <div>Error previewing values</div>;\n}\n\ninterface VariableEditorFormProps {\n  initialVariableDefinition: VariableDefinition;\n  initialAction: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onSave: (def: VariableDefinition) => void;\n  onClose: () => void;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function VariableEditorForm(props: VariableEditorFormProps) {\n  const { initialVariableDefinition, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;\n\n  const initialState = getInitialState(initialVariableDefinition);\n  const [state, setState] = useImmer(initialState);\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const [previewKey, setPreviewKey] = useState(0);\n  const [action, setAction] = useState(initialAction);\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 titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const form = useForm<VariableEditValidationType>({\n    resolver: zodResolver(variableEditValidationSchema),\n    mode: 'onBlur',\n    defaultValues: state,\n  });\n\n  const processForm: SubmitHandler<VariableEditValidationType> = () => {\n    onSave(getVariableDefinitionFromState(state));\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  const handleCancel = useCallback(() => {\n    if (JSON.stringify(initialState) !== JSON.stringify(state)) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }, [state, initialState, setDiscardDialogOpened, onClose]);\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Variable</Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          {action === 'read' ? (\n            <>\n              <Button disabled={isReadonly} variant=\"contained\" onClick={() => setAction('update')}>\n                Edit\n              </Button>\n              <Button color=\"error\" variant=\"outlined\" onClick={onDelete}>\n                Delete\n              </Button>\n              <Divider\n                orientation=\"vertical\"\n                flexItem\n                sx={(theme) => ({\n                  borderColor: theme.palette.grey['500'],\n                  '&.MuiDivider-root': {\n                    marginLeft: 2,\n                    marginRight: 1,\n                  },\n                })}\n              />\n              <Button color=\"secondary\" variant=\"outlined\" onClick={onClose}>\n                Close\n              </Button>\n            </>\n          ) : (\n            <>\n              <Button\n                type=\"submit\"\n                variant=\"contained\"\n                disabled={!form.formState.isValid}\n                onClick={form.handleSubmit(processForm)}\n              >\n                {submitText}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </>\n          )}\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={8}>\n            <Controller\n              name=\"name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update',\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.name = event.target.value;\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              name=\"title\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Display Label\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.title = event.target.value;\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              name=\"description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Description\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.description = event.target.value;\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              name=\"kind\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  select\n                  {...field}\n                  fullWidth\n                  label=\"Type\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.kind = event.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                </TextField>\n              )}\n            />\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                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.textVariableFields.value = v.target.value;\n                  });\n                }}\n              />\n              <FormControlLabel\n                control={\n                  <Switch\n                    checked={state.textVariableFields.constant ?? false}\n                    readOnly={action === 'read'}\n                    onChange={(e) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      setState((draft) => {\n                        draft.textVariableFields.constant = e.target.checked;\n                      });\n                    }}\n                  />\n                }\n                label=\"Constant\"\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.capturingRegexp || ''}\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\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.capturingRegexp = e.target.value;\n                      } else {\n                        draft.listVariableFields.capturingRegexp = 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                    InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\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={isDiscardDialogOpened}\n        onCancel={() => {\n          setDiscardDialogOpened(false);\n        }}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["React","useCallback","useMemo","useState","Box","Typography","Switch","TextField","Grid","FormControlLabel","MenuItem","Button","Stack","ClickAwayListener","Divider","useImmer","DiscardChangesConfirmationDialog","ErrorBoundary","Controller","FormProvider","useForm","zodResolver","getSubmitText","getTitleAction","VARIABLE_TYPES","PluginEditor","variableEditValidationSchema","VariableListPreview","VariablePreview","getVariableDefinitionFromState","getInitialState","FallbackPreview","div","VariableEditorForm","props","initialVariableDefinition","initialAction","isDraft","isReadonly","onSave","onClose","onDelete","initialState","state","setState","isDiscardDialogOpened","setDiscardDialogOpened","previewKey","setPreviewKey","action","setAction","refreshPreview","prev","previewSpec","titleAction","submitText","form","resolver","mode","defaultValues","processForm","handleCancel","JSON","stringify","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","orientation","flexItem","borderColor","grey","marginRight","type","formState","isValid","handleSubmit","overflowY","container","mb","item","xs","name","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","undefined","InputProps","readOnly","error","helperText","message","onChange","event","draft","target","value","title","description","select","kind","map","v","py","values","textVariableFields","control","checked","constant","e","listVariableFields","plugin","FallbackComponent","resetKeys","definition","onRefresh","isLoading","onClickAway","width","pluginType","pluginKindLabel","val","capturingRegexp","allowMultiple","allowAll","customAllValue","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}
+{"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, { DispatchWithoutAction, useCallback, useMemo, useState } from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControlLabel,\n  MenuItem,\n  Button,\n  Stack,\n  ClickAwayListener,\n  Divider,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { VariableDefinition, ListVariableDefinition } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorBoundary } from '@perses-dev/components';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Action, getSubmitText, getTitleAction } from '../../../utils';\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { PluginEditor } from '../../PluginEditor';\nimport { variableEditValidationSchema, VariableEditValidationType } from '../../../validation';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\nfunction FallbackPreview() {\n  return <div>Error previewing values</div>;\n}\n\ninterface VariableEditorFormProps {\n  initialVariableDefinition: VariableDefinition;\n  initialAction: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onSave: (def: VariableDefinition) => void;\n  onClose: () => void;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function VariableEditorForm(props: VariableEditorFormProps) {\n  const { initialVariableDefinition, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;\n\n  const initialState = getInitialState(initialVariableDefinition);\n  const [state, setState] = useImmer(initialState);\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const [previewKey, setPreviewKey] = useState(0);\n  const [action, setAction] = useState(initialAction);\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 titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const form = useForm<VariableEditValidationType>({\n    resolver: zodResolver(variableEditValidationSchema),\n    mode: 'onBlur',\n    defaultValues: state,\n  });\n\n  const processForm: SubmitHandler<VariableEditValidationType> = () => {\n    onSave(getVariableDefinitionFromState(state));\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  const handleCancel = useCallback(() => {\n    if (JSON.stringify(initialState) !== JSON.stringify(state)) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }, [state, initialState, setDiscardDialogOpened, onClose]);\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Variable</Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          {action === 'read' ? (\n            <>\n              <Button disabled={isReadonly} variant=\"contained\" onClick={() => setAction('update')}>\n                Edit\n              </Button>\n              <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n                Delete\n              </Button>\n              <Divider\n                orientation=\"vertical\"\n                flexItem\n                sx={(theme) => ({\n                  borderColor: theme.palette.grey['500'],\n                  '&.MuiDivider-root': {\n                    marginLeft: 2,\n                    marginRight: 1,\n                  },\n                })}\n              />\n              <Button color=\"secondary\" variant=\"outlined\" onClick={onClose}>\n                Close\n              </Button>\n            </>\n          ) : (\n            <>\n              <Button\n                type=\"submit\"\n                variant=\"contained\"\n                disabled={!form.formState.isValid}\n                onClick={form.handleSubmit(processForm)}\n              >\n                {submitText}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </>\n          )}\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={8}>\n            <Controller\n              name=\"name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update',\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.name = event.target.value;\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              name=\"title\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Display Label\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.title = event.target.value;\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              name=\"description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Description\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.description = event.target.value;\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              name=\"kind\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  select\n                  {...field}\n                  fullWidth\n                  label=\"Type\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.kind = event.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                </TextField>\n              )}\n            />\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                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.textVariableFields.value = v.target.value;\n                  });\n                }}\n              />\n              <FormControlLabel\n                control={\n                  <Switch\n                    checked={state.textVariableFields.constant ?? false}\n                    readOnly={action === 'read'}\n                    onChange={(e) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      setState((draft) => {\n                        draft.textVariableFields.constant = e.target.checked;\n                      });\n                    }}\n                  />\n                }\n                label=\"Constant\"\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.capturingRegexp || ''}\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\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.capturingRegexp = e.target.value;\n                      } else {\n                        draft.listVariableFields.capturingRegexp = 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                    InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\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={isDiscardDialogOpened}\n        onCancel={() => {\n          setDiscardDialogOpened(false);\n        }}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["React","useCallback","useMemo","useState","Box","Typography","Switch","TextField","Grid","FormControlLabel","MenuItem","Button","Stack","ClickAwayListener","Divider","useImmer","DiscardChangesConfirmationDialog","ErrorBoundary","Controller","FormProvider","useForm","zodResolver","getSubmitText","getTitleAction","VARIABLE_TYPES","PluginEditor","variableEditValidationSchema","VariableListPreview","VariablePreview","getVariableDefinitionFromState","getInitialState","FallbackPreview","div","VariableEditorForm","props","initialVariableDefinition","initialAction","isDraft","isReadonly","onSave","onClose","onDelete","initialState","state","setState","isDiscardDialogOpened","setDiscardDialogOpened","previewKey","setPreviewKey","action","setAction","refreshPreview","prev","previewSpec","titleAction","submitText","form","resolver","mode","defaultValues","processForm","handleCancel","JSON","stringify","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","orientation","flexItem","borderColor","grey","marginRight","type","formState","isValid","handleSubmit","overflowY","container","mb","item","xs","name","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","undefined","InputProps","readOnly","error","helperText","message","onChange","event","draft","target","value","title","description","select","kind","map","v","py","values","textVariableFields","control","checked","constant","e","listVariableFields","plugin","FallbackComponent","resetKeys","definition","onRefresh","isLoading","onClickAway","width","pluginType","pluginKindLabel","val","capturingRegexp","allowMultiple","allowAll","customAllValue","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/plugin-system",
-  "version": "0.40.0",
+  "version": "0.40.1",
   "description": "The plugin feature in Pereses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -28,8 +28,8 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "0.40.0",
-    "@perses-dev/core": "0.40.0",
+    "@perses-dev/components": "0.40.1",
+    "@perses-dev/core": "0.40.1",
     "immer": "^9.0.15",
     "react-hook-form": "^7.46.1",
     "use-immer": "^0.7.0",
@@ -37,7 +37,7 @@
     "zod": "^3.22.2"
   },
   "devDependencies": {
-    "@perses-dev/storybook": "0.40.0"
+    "@perses-dev/storybook": "0.40.1"
   },
   "peerDependencies": {
     "@mui/material": "^5.10.0",