@perses-dev/plugin-system 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-explorer-plugin-c4a7621

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 { VariableDefinition, ListVariableDefinition, Action } 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 { useImmer } from 'use-immer';\nimport { getSubmitText, getTitleAction } from '../../../utils';\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { PluginEditor } from '../../PluginEditor';\nimport { variableEditorValidationSchema, VariableEditorValidationType } from '../../../validation';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\nimport { getVariableDefinitionFromState, getInitialState, VariableEditorState } 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<VariableEditorValidationType>({\n    resolver: zodResolver(variableEditorValidationSchema),\n    mode: 'onBlur',\n    defaultValues: initialState,\n  });\n\n  const processForm: SubmitHandler<VariableEditorValidationType> = () => {\n    // reset display attributes to undefined when empty, because we don't want to save empty strings\n    onSave(\n      getVariableDefinitionFromState({\n        ...state,\n        title: state.title === '' ? undefined : state.title,\n        description: state.description === '' ? undefined : state.description,\n      })\n    );\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  }, [initialState, state, 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' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={state.name}\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                  value={state.title ?? ''}\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                  value={state.description ?? ''}\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                  value={state.kind}\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              <Controller\n                name=\"textVariableFields.value\"\n                render={({ field, fieldState }) => (\n                  <TextField\n                    {...field}\n                    label=\"Value\"\n                    InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                    InputProps={{\n                      readOnly: action === 'read',\n                    }}\n                    error={!!fieldState.error}\n                    helperText={fieldState.error?.message}\n                    value={state.textVariableFields.value}\n                    onChange={(event) => {\n                      field.onChange(event);\n                      setState((draft) => {\n                        draft.textVariableFields.value = event.target.value;\n                      });\n                    }}\n                  />\n                )}\n              />\n              <Controller\n                name=\"textVariableFields.constant\"\n                render={({ field }) => (\n                  <FormControlLabel\n                    label=\"Constant\"\n                    control={\n                      <Switch\n                        {...field}\n                        checked={!!field.value}\n                        readOnly={action === 'read'}\n                        value={state.textVariableFields.constant}\n                        onChange={(event) => {\n                          if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                          field.onChange(event);\n                          setState((draft) => {\n                            draft.textVariableFields.constant = event.target.checked;\n                          });\n                        }}\n                      />\n                    }\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                <Controller\n                  name=\"listVariableFields.plugin\"\n                  render={({ field }) => (\n                    <PluginEditor\n                      width=\"100%\"\n                      pluginType=\"Variable\"\n                      pluginKindLabel=\"Source\"\n                      isReadonly={action === 'read'}\n                      value={state.listVariableFields.plugin}\n                      onChange={(val) => {\n                        field.onChange(val);\n                        setState((draft) => {\n                          draft.listVariableFields.plugin = val;\n                        });\n                      }}\n                    />\n                  )}\n                />\n              </Stack>\n\n              <Stack>\n                <Controller\n                  name=\"listVariableFields.capturingRegexp\"\n                  render={({ field, fieldState }) => (\n                    <TextField\n                      {...field}\n                      label=\"Capturing Regexp Filter\"\n                      InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                      InputProps={{\n                        readOnly: action === 'read',\n                      }}\n                      error={!!fieldState.error}\n                      value={state.listVariableFields.capturingRegexp ?? ''}\n                      onChange={(event) => {\n                        field.onChange(event);\n                        setState((draft) => {\n                          if (event.target.value) {\n                            // TODO: do a better fix, if empty string => it should skip the filter\n                            draft.listVariableFields.capturingRegexp = event.target.value;\n                          } else {\n                            draft.listVariableFields.capturingRegexp = undefined;\n                          }\n                        });\n                      }}\n                      helperText={\n                        fieldState.error?.message\n                          ? fieldState.error.message\n                          : 'Optional, if you want to filter on captured result.'\n                      }\n                    />\n                  )}\n                />\n              </Stack>\n\n              <Stack>\n                <Controller\n                  name=\"listVariableFields.sort\"\n                  render={({ field, fieldState }) => (\n                    <TextField\n                      select\n                      {...field}\n                      fullWidth\n                      label=\"Sort\"\n                      InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                      InputProps={{\n                        readOnly: action === 'read',\n                      }}\n                      error={!!fieldState.error}\n                      helperText={fieldState.error?.message}\n                      value={state.listVariableFields.sort ?? 'none'}\n                      onChange={(event) => {\n                        field.onChange(event);\n                        setState((draft) => {\n                          draft.listVariableFields.sort = event.target.value;\n                        });\n                      }}\n                    >\n                      <MenuItem value=\"none\">None</MenuItem>\n                      <MenuItem value=\"alphabetical-asc\">Alphabetical, asc</MenuItem>\n                      <MenuItem value=\"alphabetical-desc\">Alphabetical, desc</MenuItem>\n                      <MenuItem value=\"numerical-asc\">Numerical, asc</MenuItem>\n                      <MenuItem value=\"numerical-desc\">Numerical, desc</MenuItem>\n                      <MenuItem value=\"alphabetical-ci-asc\">Alphabetical, case-insensitive, asc</MenuItem>\n                      <MenuItem value=\"alphabetical-ci-desc\">Alphabetical, case-insensitive, desc</MenuItem>\n                    </TextField>\n                  )}\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                <Controller\n                  name=\"listVariableFields.allowMultiple\"\n                  render={({ field }) => (\n                    <FormControlLabel\n                      label=\"Allow Multiple Values\"\n                      control={\n                        <Switch\n                          {...field}\n                          checked={!!field.value}\n                          readOnly={action === 'read'}\n                          value={state.listVariableFields.allowMultiple}\n                          onChange={(event) => {\n                            if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                            field.onChange(event);\n                            setState((draft) => {\n                              draft.listVariableFields.allowMultiple = event.target.checked;\n                            });\n                          }}\n                        />\n                      }\n                    />\n                  )}\n                />\n                <Typography variant=\"caption\">Enables multiple values to be selected at the same time</Typography>\n              </Stack>\n              <Stack>\n                <Controller\n                  name=\"listVariableFields.allowAllValue\"\n                  render={({ field }) => (\n                    <FormControlLabel\n                      label=\"Allow All option\"\n                      control={\n                        <Switch\n                          {...field}\n                          checked={!!field.value}\n                          readOnly={action === 'read'}\n                          value={state.listVariableFields.allowAllValue}\n                          onChange={(event) => {\n                            if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                            field.onChange(event);\n                            setState((draft) => {\n                              draft.listVariableFields.allowAllValue = event.target.checked;\n                            });\n                          }}\n                        />\n                      }\n                    />\n                  )}\n                />\n                <Typography mb={1} variant=\"caption\">\n                  Enables an option to include all variable values\n                </Typography>\n                {state.listVariableFields.allowAllValue && (\n                  <Controller\n                    name=\"listVariableFields.customAllValue\"\n                    render={({ field, fieldState }) => (\n                      <TextField\n                        {...field}\n                        fullWidth\n                        label=\"Custom All Value\"\n                        InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                        InputProps={{\n                          readOnly: action === 'read',\n                        }}\n                        error={!!fieldState.error}\n                        helperText={\n                          fieldState.error?.message\n                            ? fieldState.error.message\n                            : 'When All is selected, this value will be used'\n                        }\n                        value={state.listVariableFields.customAllValue ?? ''}\n                        onChange={(event) => {\n                          field.onChange(event);\n                          setState((draft) => {\n                            if (event.target.value) {\n                              draft.listVariableFields.customAllValue = event.target.value;\n                            } else {\n                              draft.listVariableFields.customAllValue = undefined;\n                            }\n                          });\n                        }}\n                      />\n                    )}\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","DiscardChangesConfirmationDialog","ErrorBoundary","Controller","FormProvider","useForm","zodResolver","useImmer","getSubmitText","getTitleAction","VARIABLE_TYPES","PluginEditor","variableEditorValidationSchema","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","title","undefined","description","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","InputProps","readOnly","error","helperText","message","value","onChange","event","draft","target","select","kind","map","v","py","values","textVariableFields","control","checked","constant","listVariableFields","plugin","FallbackComponent","resetKeys","definition","onRefresh","isLoading","onClickAway","width","pluginType","pluginKindLabel","val","capturingRegexp","sort","allowMultiple","allowAllValue","customAllValue","isOpen","onCancel","onDiscardChanges"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,SAAgCC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AACrF,SACEC,GAAG,EACHC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,IAAI,EACJC,gBAAgB,EAChBC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,iBAAiB,EACjBC,OAAO,QACF,gBAAgB;AAEvB,SAASC,gCAAgC,EAAEC,aAAa,QAAQ,yBAAyB;AACzF,SAASC,UAAU,EAAEC,YAAY,EAAiBC,OAAO,QAAQ,kBAAkB;AACnF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,aAAa,EAAEC,cAAc,QAAQ,iBAAiB;AAC/D,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,8BAA8B,QAAsC,sBAAsB;AACnG,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,oBAAoB;AACzE,SAASC,8BAA8B,EAAEC,eAAe,QAA6B,+BAA+B;AAEpH,SAASC;IACP,qBAAO,KAACC;kBAAI;;AACd;AAYA,OAAO,SAASC,mBAAmBC,KAA8B;IAC/D,MAAM,EAAEC,0BAAyB,EAAEC,cAAa,EAAEC,QAAO,EAAEC,WAAU,EAAEC,OAAM,EAAEC,QAAO,EAAEC,SAAQ,EAAE,GAAGP;IAErG,MAAMQ,eAAeZ,gBAAgBK;IACrC,MAAM,CAACQ,OAAOC,SAAS,GAAGvB,SAASqB;IACnC,MAAM,CAACG,uBAAuBC,uBAAuB,GAAG3C,SAAkB;IAC1E,MAAM,CAAC4C,YAAYC,cAAc,GAAG7C,SAAS;IAC7C,MAAM,CAAC8C,QAAQC,UAAU,GAAG/C,SAASiC;IAErC,MAAMe,iBAAiB;QACrBH,cAAc,CAACI,OAASA,OAAO;IACjC;IAEA;;;GAGC,GACD,MAAMC,cAAcnD,QAAQ;QAC1B,OAAO2B,+BAA+Bc;IACtC,uDAAuD;IACzD,GAAG;QAACI;KAAW;IAEf,MAAMO,cAAc/B,eAAe0B,QAAQZ;IAC3C,MAAMkB,aAAajC,cAAc2B,QAAQZ;IAEzC,MAAMmB,OAAOrC,QAAsC;QACjDsC,UAAUrC,YAAYM;QACtBgC,MAAM;QACNC,eAAejB;IACjB;IAEA,MAAMkB,cAA2D;QAC/D,gGAAgG;QAChGrB,OACEV,+BAA+B;YAC7B,GAAGc,KAAK;YACRkB,OAAOlB,MAAMkB,UAAU,KAAKC,YAAYnB,MAAMkB;YAC9CE,aAAapB,MAAMoB,gBAAgB,KAAKD,YAAYnB,MAAMoB;QAC5D;IAEJ;IAEA,oDAAoD;IACpD,4CAA4C;IAC5C,uDAAuD;IACvD,gDAAgD;IAChD,MAAMC,eAAe/D,YAAY;QAC/B,IAAIgE,KAAKC,UAAUxB,kBAAkBuB,KAAKC,UAAUvB,QAAQ;YAC1DG,uBAAuB;QACzB,OAAO;YACLN;QACF;IACF,GAAG;QAACE;QAAcC;QAAOH;KAAQ;QAiGVG,cAyBAA,oBA+JIA,2CAqCAA,gCAkGEA;IA9Z7B,qBACE,MAACzB;QAAc,GAAGsC,IAAI;;0BACpB,MAACpD;gBACC+D,IAAI;oBACFC,SAAS;oBACTC,YAAY;oBACZC,SAAS,CAACC,QAAUA,MAAMC,QAAQ,GAAG;oBACrCC,cAAc,CAACF,QAAU,CAAC,UAAU,EAAEA,MAAMG,QAAQC,QAAQ,CAAC;gBAC/D;;kCAEA,MAACtE;wBAAWuE,SAAQ;;4BAAMtB;4BAAY;;;kCACtC,KAAC1C;wBAAMiE,WAAU;wBAAML,SAAS;wBAAGL,IAAI;4BAAEW,YAAY;wBAAO;kCACzD7B,WAAW,uBACV;;8CACE,KAACtC;oCAAOoE,UAAUzC;oCAAYsC,SAAQ;oCAAYI,SAAS,IAAM9B,UAAU;8CAAW;;8CAGtF,KAACvC;oCAAOsE,OAAM;oCAAQF,UAAUzC;oCAAYsC,SAAQ;oCAAWI,SAASvC;8CAAU;;8CAGlF,KAAC3B;oCACCoE,aAAY;oCACZC,QAAQ;oCACRhB,IAAI,CAACI,QAAW,CAAA;4CACda,aAAab,MAAMG,QAAQW,IAAI,CAAC,MAAM;4CACtC,qBAAqB;gDACnBP,YAAY;gDACZQ,aAAa;4CACf;wCACF,CAAA;;8CAEF,KAAC3E;oCAAOsE,OAAM;oCAAYL,SAAQ;oCAAWI,SAASxC;8CAAS;;;2CAKjE;;8CACE,KAAC7B;oCACC4E,MAAK;oCACLX,SAAQ;oCACRG,UAAU,CAACvB,KAAKgC,UAAUC;oCAC1BT,SAASxB,KAAKkC,aAAa9B;8CAE1BL;;8CAEH,KAAC5C;oCAAOsE,OAAM;oCAAYL,SAAQ;oCAAWI,SAAShB;8CAAc;;;;;;;0BAO5E,MAAC5D;gBAAIkE,SAAS;gBAAGH,IAAI;oBAAEwB,WAAW;gBAAS;;kCACzC,MAACnF;wBAAKoF,SAAS;wBAACpB,SAAS;wBAAGqB,IAAI;;0CAC9B,KAACrF;gCAAKsF,IAAI;gCAACC,IAAI;0CACb,cAAA,KAAC9E;oCACC+E,MAAK;oCACLC,QAAQ,CAAC,EAAEC,MAAK,EAAEC,WAAU,EAAE;4CAYdA;sDAXd,OAAA,KAAC5F;4CACE,GAAG2F,KAAK;4CACTE,QAAQ;4CACRC,SAAS;4CACTC,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQvD,WAAW,SAAS,OAAOa;4CAAU;4CAChE2C,YAAY;gDACV1B,UAAU9B,WAAW,YAAY,CAACZ;gDAClCqE,UAAUzD,WAAW;4CACvB;4CACA0D,OAAO,CAAC,CAACR,WAAWQ;4CACpBC,YAAYT,CAAAA,oBAAAA,WAAWQ,mBAAXR,+BAAAA,KAAAA,IAAAA,kBAAkBU;4CAC9BC,OAAOnE,MAAMqD;4CACbe,UAAU,CAACC;gDACTd,MAAMa,SAASC;gDACfpE,SAAS,CAACqE;oDACRA,MAAMjB,OAAOgB,MAAME,OAAOJ;gDAC5B;4CACF;;;;;0CAKR,KAACtG;gCAAKsF,IAAI;gCAACC,IAAI;0CACb,cAAA,KAAC9E;oCACC+E,MAAK;oCACLC,QAAQ,CAAC,EAAEC,MAAK,EAAEC,WAAU,EAAE;4CAUdA;sDATd,OAAA,KAAC5F;4CACE,GAAG2F,KAAK;4CACTG,SAAS;4CACTC,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQvD,WAAW,SAAS,OAAOa;4CAAU;4CAChE2C,YAAY;gDACVC,UAAUzD,WAAW;4CACvB;4CACA0D,OAAO,CAAC,CAACR,WAAWQ;4CACpBC,YAAYT,CAAAA,oBAAAA,WAAWQ,mBAAXR,+BAAAA,KAAAA,IAAAA,kBAAkBU;4CAC9BC,OAAOnE,CAAAA,eAAAA,MAAMkB,mBAANlB,0BAAAA,eAAe;4CACtBoE,UAAU,CAACC;gDACTd,MAAMa,SAASC;gDACfpE,SAAS,CAACqE;oDACRA,MAAMpD,QAAQmD,MAAME,OAAOJ;gDAC7B;4CACF;;;;;0CAKR,KAACtG;gCAAKsF,IAAI;gCAACC,IAAI;0CACb,cAAA,KAAC9E;oCACC+E,MAAK;oCACLC,QAAQ,CAAC,EAAEC,MAAK,EAAEC,WAAU,EAAE;4CAUdA;sDATd,OAAA,KAAC5F;4CACE,GAAG2F,KAAK;4CACTG,SAAS;4CACTC,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQvD,WAAW,SAAS,OAAOa;4CAAU;4CAChE2C,YAAY;gDACVC,UAAUzD,WAAW;4CACvB;4CACA0D,OAAO,CAAC,CAACR,WAAWQ;4CACpBC,YAAYT,CAAAA,oBAAAA,WAAWQ,mBAAXR,+BAAAA,KAAAA,IAAAA,kBAAkBU;4CAC9BC,OAAOnE,CAAAA,qBAAAA,MAAMoB,yBAANpB,gCAAAA,qBAAqB;4CAC5BoE,UAAU,CAACC;gDACTd,MAAMa,SAASC;gDACfpE,SAAS,CAACqE;oDACRA,MAAMlD,cAAciD,MAAME,OAAOJ;gDACnC;4CACF;;;;;0CAKR,KAACtG;gCAAKsF,IAAI;gCAACC,IAAI;0CACb,cAAA,KAAC9E;oCACC+E,MAAK;oCACLC,QAAQ,CAAC,EAAEC,MAAK,EAAEC,WAAU,EAAE;4CAWdA;sDAVd,OAAA,KAAC5F;4CACC4G,MAAM;4CACL,GAAGjB,KAAK;4CACTG,SAAS;4CACTC,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQvD,WAAW,SAAS,OAAOa;4CAAU;4CAChE2C,YAAY;gDACVC,UAAUzD,WAAW;4CACvB;4CACA0D,OAAO,CAAC,CAACR,WAAWQ;4CACpBC,YAAYT,CAAAA,oBAAAA,WAAWQ,mBAAXR,+BAAAA,KAAAA,IAAAA,kBAAkBU;4CAC9BC,OAAOnE,MAAMyE;4CACbL,UAAU,CAACC;gDACTd,MAAMa,SAASC;gDACfpE,SAAS,CAACqE;oDACRA,MAAMG,OAAOJ,MAAME,OAAOJ;gDAC5B;4CACF;sDAECtF,eAAe6F,IAAI,CAACC,kBACnB,KAAC5G;oDAAsBoG,OAAOQ,EAAEF;8DAC7BE,EAAEhB;mDADUgB,EAAEF;;;;;;;kCAU7B,KAACtG;oBAEA6B,MAAMyE,SAAS,gCACd;;0CACE,KAAC/G;gCAAWkH,IAAI;gCAAG3C,SAAQ;0CAAY;;0CAGvC,MAAChE;gCAAM4D,SAAS;;kDACd,KAACpE;kDACC,cAAA,KAACwB;4CAAgB4F,QAAQ;gDAAC7E,MAAM8E,mBAAmBX;6CAAM;;;kDAE3D,KAAC7F;wCACC+E,MAAK;wCACLC,QAAQ,CAAC,EAAEC,MAAK,EAAEC,WAAU,EAAE;gDASdA;0DARd,OAAA,KAAC5F;gDACE,GAAG2F,KAAK;gDACTI,OAAM;gDACNC,iBAAiB;oDAAEC,QAAQvD,WAAW,SAAS,OAAOa;gDAAU;gDAChE2C,YAAY;oDACVC,UAAUzD,WAAW;gDACvB;gDACA0D,OAAO,CAAC,CAACR,WAAWQ;gDACpBC,YAAYT,CAAAA,oBAAAA,WAAWQ,mBAAXR,+BAAAA,KAAAA,IAAAA,kBAAkBU;gDAC9BC,OAAOnE,MAAM8E,mBAAmBX;gDAChCC,UAAU,CAACC;oDACTd,MAAMa,SAASC;oDACfpE,SAAS,CAACqE;wDACRA,MAAMQ,mBAAmBX,QAAQE,MAAME,OAAOJ;oDAChD;gDACF;;;;kDAIN,KAAC7F;wCACC+E,MAAK;wCACLC,QAAQ,CAAC,EAAEC,MAAK,EAAE,iBAChB,KAACzF;gDACC6F,OAAM;gDACNoB,uBACE,KAACpH;oDACE,GAAG4F,KAAK;oDACTyB,SAAS,CAAC,CAACzB,MAAMY;oDACjBJ,UAAUzD,WAAW;oDACrB6D,OAAOnE,MAAM8E,mBAAmBG;oDAChCb,UAAU,CAACC;wDACT,IAAI/D,WAAW,QAAQ,QAAQ,oDAAoD;wDACnFiD,MAAMa,SAASC;wDACfpE,SAAS,CAACqE;4DACRA,MAAMQ,mBAAmBG,WAAWZ,MAAME,OAAOS;wDACnD;oDACF;;;;;;;;oBAUfhF,MAAMyE,SAAS,gCACd;;0CACE,KAAC/G;gCAAWkH,IAAI;gCAAG3C,SAAQ;0CAAY;;0CAGvC,MAAChE;gCAAM4D,SAAS;gCAAGqB,IAAI;;oCACpBlD,MAAMkF,mBAAmBC,OAAOV,qBAC/B,KAAChH;kDACC,cAAA,KAACY;4CAAc+G,mBAAmBhG;4CAAiBiG,WAAW;gDAAC3E;6CAAY;sDACzE,cAAA,KAAC1B;gDAAoBsG,YAAY5E;gDAAa6E,WAAW/E;;;uDAI7D,KAACvB;wCAAgBuG,WAAW;;kDAG9B,MAACvH;;0DAEC,KAACC;gDAAkBuH,aAAa,IAAMjF;0DACpC,cAAA,KAAC/C;;0DAGH,KAACa;gDACC+E,MAAK;gDACLC,QAAQ,CAAC,EAAEC,MAAK,EAAE,iBAChB,KAACzE;wDACC4G,OAAM;wDACNC,YAAW;wDACXC,iBAAgB;wDAChBjG,YAAYW,WAAW;wDACvB6D,OAAOnE,MAAMkF,mBAAmBC;wDAChCf,UAAU,CAACyB;4DACTtC,MAAMa,SAASyB;4DACf5F,SAAS,CAACqE;gEACRA,MAAMY,mBAAmBC,SAASU;4DACpC;wDACF;;;;;kDAMR,KAAC5H;kDACC,cAAA,KAACK;4CACC+E,MAAK;4CACLC,QAAQ,CAAC,EAAEC,MAAK,EAAEC,WAAU,EAAE;oDAsBxBA;8DArBJ,OAAA,KAAC5F;oDACE,GAAG2F,KAAK;oDACTI,OAAM;oDACNC,iBAAiB;wDAAEC,QAAQvD,WAAW,SAAS,OAAOa;oDAAU;oDAChE2C,YAAY;wDACVC,UAAUzD,WAAW;oDACvB;oDACA0D,OAAO,CAAC,CAACR,WAAWQ;oDACpBG,OAAOnE,CAAAA,4CAAAA,MAAMkF,mBAAmBY,6BAAzB9F,uDAAAA,4CAA4C;oDACnDoE,UAAU,CAACC;wDACTd,MAAMa,SAASC;wDACfpE,SAAS,CAACqE;4DACR,IAAID,MAAME,OAAOJ,OAAO;gEACtB,sEAAsE;gEACtEG,MAAMY,mBAAmBY,kBAAkBzB,MAAME,OAAOJ;4DAC1D,OAAO;gEACLG,MAAMY,mBAAmBY,kBAAkB3E;4DAC7C;wDACF;oDACF;oDACA8C,YACET,CAAAA,CAAAA,oBAAAA,WAAWQ,mBAAXR,+BAAAA,KAAAA,IAAAA,kBAAkBU,OAAM,IACpBV,WAAWQ,MAAME,UACjB;;;;;kDAOd,KAACjG;kDACC,cAAA,KAACK;4CACC+E,MAAK;4CACLC,QAAQ,CAAC,EAAEC,MAAK,EAAEC,WAAU,EAAE;oDAWdA;8DAVd,OAAA,MAAC5F;oDACC4G,MAAM;oDACL,GAAGjB,KAAK;oDACTG,SAAS;oDACTC,OAAM;oDACNC,iBAAiB;wDAAEC,QAAQvD,WAAW,SAAS,OAAOa;oDAAU;oDAChE2C,YAAY;wDACVC,UAAUzD,WAAW;oDACvB;oDACA0D,OAAO,CAAC,CAACR,WAAWQ;oDACpBC,YAAYT,CAAAA,oBAAAA,WAAWQ,mBAAXR,+BAAAA,KAAAA,IAAAA,kBAAkBU;oDAC9BC,OAAOnE,CAAAA,iCAAAA,MAAMkF,mBAAmBa,kBAAzB/F,4CAAAA,iCAAiC;oDACxCoE,UAAU,CAACC;wDACTd,MAAMa,SAASC;wDACfpE,SAAS,CAACqE;4DACRA,MAAMY,mBAAmBa,OAAO1B,MAAME,OAAOJ;wDAC/C;oDACF;;sEAEA,KAACpG;4DAASoG,OAAM;sEAAO;;sEACvB,KAACpG;4DAASoG,OAAM;sEAAmB;;sEACnC,KAACpG;4DAASoG,OAAM;sEAAoB;;sEACpC,KAACpG;4DAASoG,OAAM;sEAAgB;;sEAChC,KAACpG;4DAASoG,OAAM;sEAAiB;;sEACjC,KAACpG;4DAASoG,OAAM;sEAAsB;;sEACtC,KAACpG;4DAASoG,OAAM;sEAAuB;;;;;;;;;0CAOjD,KAAChG;0CAED,KAACT;gCAAWkH,IAAI;gCAAG3C,SAAQ;0CAAY;;0CAGvC,MAAChE;gCAAM4D,SAAQ;;kDACb,MAAC5D;;0DACC,KAACK;gDACC+E,MAAK;gDACLC,QAAQ,CAAC,EAAEC,MAAK,EAAE,iBAChB,KAACzF;wDACC6F,OAAM;wDACNoB,uBACE,KAACpH;4DACE,GAAG4F,KAAK;4DACTyB,SAAS,CAAC,CAACzB,MAAMY;4DACjBJ,UAAUzD,WAAW;4DACrB6D,OAAOnE,MAAMkF,mBAAmBc;4DAChC5B,UAAU,CAACC;gEACT,IAAI/D,WAAW,QAAQ,QAAQ,oDAAoD;gEACnFiD,MAAMa,SAASC;gEACfpE,SAAS,CAACqE;oEACRA,MAAMY,mBAAmBc,gBAAgB3B,MAAME,OAAOS;gEACxD;4DACF;;;;0DAMV,KAACtH;gDAAWuE,SAAQ;0DAAU;;;;kDAEhC,MAAChE;;0DACC,KAACK;gDACC+E,MAAK;gDACLC,QAAQ,CAAC,EAAEC,MAAK,EAAE,iBAChB,KAACzF;wDACC6F,OAAM;wDACNoB,uBACE,KAACpH;4DACE,GAAG4F,KAAK;4DACTyB,SAAS,CAAC,CAACzB,MAAMY;4DACjBJ,UAAUzD,WAAW;4DACrB6D,OAAOnE,MAAMkF,mBAAmBe;4DAChC7B,UAAU,CAACC;gEACT,IAAI/D,WAAW,QAAQ,QAAQ,oDAAoD;gEACnFiD,MAAMa,SAASC;gEACfpE,SAAS,CAACqE;oEACRA,MAAMY,mBAAmBe,gBAAgB5B,MAAME,OAAOS;gEACxD;4DACF;;;;0DAMV,KAACtH;gDAAWwF,IAAI;gDAAGjB,SAAQ;0DAAU;;4CAGpCjC,MAAMkF,mBAAmBe,+BACxB,KAAC3H;gDACC+E,MAAK;gDACLC,QAAQ,CAAC,EAAEC,MAAK,EAAEC,WAAU,EAAE;wDAWxBA;kEAVJ,OAAA,KAAC5F;wDACE,GAAG2F,KAAK;wDACTG,SAAS;wDACTC,OAAM;wDACNC,iBAAiB;4DAAEC,QAAQvD,WAAW,SAAS,OAAOa;wDAAU;wDAChE2C,YAAY;4DACVC,UAAUzD,WAAW;wDACvB;wDACA0D,OAAO,CAAC,CAACR,WAAWQ;wDACpBC,YACET,CAAAA,CAAAA,oBAAAA,WAAWQ,mBAAXR,+BAAAA,KAAAA,IAAAA,kBAAkBU,OAAM,IACpBV,WAAWQ,MAAME,UACjB;wDAENC,OAAOnE,CAAAA,2CAAAA,MAAMkF,mBAAmBgB,4BAAzBlG,sDAAAA,2CAA2C;wDAClDoE,UAAU,CAACC;4DACTd,MAAMa,SAASC;4DACfpE,SAAS,CAACqE;gEACR,IAAID,MAAME,OAAOJ,OAAO;oEACtBG,MAAMY,mBAAmBgB,iBAAiB7B,MAAME,OAAOJ;gEACzD,OAAO;oEACLG,MAAMY,mBAAmBgB,iBAAiB/E;gEAC5C;4DACF;wDACF;;;;;;;;;;;;0BAUlB,KAAC/C;gBACCgD,aAAY;gBACZ+E,QAAQjG;gBACRkG,UAAU;oBACRjG,uBAAuB;gBACzB;gBACAkG,kBAAkB;oBAChBlG,uBAAuB;oBACvBN;gBACF;;;;AAIR"}
+{"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, ReactElement, useState } from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControlLabel,\n  MenuItem,\n  Stack,\n  ClickAwayListener,\n  Divider,\n} from '@mui/material';\nimport { VariableDefinition, ListVariableDefinition, Action } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions } from '@perses-dev/components';\nimport { Control, Controller, FormProvider, SubmitHandler, useForm, useFormContext, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { getSubmitText, getTitleAction } from '../../../utils';\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { PluginEditor } from '../../PluginEditor';\nimport { useValidationSchemas } from '../../../context';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\n\nfunction FallbackPreview(): ReactElement {\n  return <div>Error previewing values</div>;\n}\n\ninterface KindVariableEditorFormProps {\n  action: Action;\n  control: Control<VariableDefinition>;\n}\n\nfunction TextVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n  return (\n    <>\n      <Typography py={1} variant=\"subtitle1\">\n        Text Options\n      </Typography>\n      <Stack spacing={2}>\n        <Controller\n          control={control}\n          name=\"spec.value\"\n          render={({ field, fieldState }) => (\n            <>\n              <Box>\n                <VariablePreview values={[field.value]} />\n              </Box>\n              <TextField\n                {...field}\n                label=\"Value\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                value={field.value ?? ''}\n                onChange={(event) => {\n                  field.onChange(event);\n                }}\n              />\n            </>\n          )}\n        />\n        <Controller\n          control={control}\n          name=\"spec.constant\"\n          render={({ field }) => (\n            <FormControlLabel\n              label=\"Constant\"\n              control={\n                <Switch\n                  {...field}\n                  checked={!!field.value}\n                  readOnly={action === 'read'}\n                  value={field.value ?? false}\n                  onChange={(event) => {\n                    if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                    field.onChange(event);\n                  }}\n                />\n              }\n            />\n          )}\n        />\n      </Stack>\n    </>\n  );\n}\n\nfunction ListVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n  const form = useFormContext<VariableDefinition>();\n  /** We use `previewSpec` 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, setPreviewSpec] = useState<ListVariableDefinition>(form.getValues() as ListVariableDefinition);\n  const refreshPreview = (): void => {\n    setPreviewSpec(form.getValues() as ListVariableDefinition);\n  };\n\n  const kind = useWatch<VariableDefinition, 'spec.plugin.kind'>({ control: control, name: 'spec.plugin.kind' });\n  const _allowAllValue = useWatch<VariableDefinition, 'spec.allowAllValue'>({\n    control: control,\n    name: 'spec.allowAllValue',\n  });\n\n  // When variable kind is selected we need to provide default values\n  // TODO: check if react-hook-form has a better way to do this\n  const values = form.getValues() as ListVariableDefinition;\n  if (values.spec.allowAllValue === undefined) {\n    form.setValue('spec.allowAllValue', false);\n  }\n\n  if (values.spec.allowMultiple === undefined) {\n    form.setValue('spec.allowMultiple', false);\n  }\n\n  return (\n    <>\n      <Typography py={1} variant=\"subtitle1\">\n        List Options\n      </Typography>\n      <Stack spacing={2} mb={2}>\n        {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          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <Controller\n              control={control}\n              name=\"spec.plugin\"\n              render={({ field }) => (\n                <PluginEditor\n                  width=\"100%\"\n                  pluginTypes={['Variable']}\n                  pluginKindLabel=\"Source\"\n                  value={{\n                    selection: {\n                      type: 'Variable',\n                      kind: field.value?.kind ?? 'StaticListVariable',\n                    },\n                    spec: field.value?.spec ?? { values: [] },\n                  }}\n                  isReadonly={action === 'read'}\n                  onChange={(v) => {\n                    field.onChange({ kind: v.selection.kind, spec: v.spec });\n                  }}\n                />\n              )}\n            />\n          </ErrorBoundary>\n        </Stack>\n\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.capturingRegexp\"\n            render={({ field, fieldState }) => (\n              <TextField\n                {...field}\n                label=\"Capturing Regexp Filter\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                value={field.value ?? ''}\n                onChange={(event) => {\n                  if (event.target.value === '') {\n                    field.onChange(undefined);\n                  } else {\n                    field.onChange(event);\n                  }\n                }}\n                helperText={\n                  fieldState.error?.message\n                    ? fieldState.error.message\n                    : 'Optional, if you want to filter on captured result.'\n                }\n              />\n            )}\n          />\n        </Stack>\n\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.sort\"\n            render={({ field, fieldState }) => (\n              <TextField\n                select\n                {...field}\n                fullWidth\n                label=\"Sort\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                value={field.value ?? 'none'}\n                onChange={(event) => {\n                  field.onChange(event);\n                }}\n              >\n                <MenuItem value=\"none\">None</MenuItem>\n                <MenuItem value=\"alphabetical-asc\">Alphabetical, asc</MenuItem>\n                <MenuItem value=\"alphabetical-desc\">Alphabetical, desc</MenuItem>\n                <MenuItem value=\"numerical-asc\">Numerical, asc</MenuItem>\n                <MenuItem value=\"numerical-desc\">Numerical, desc</MenuItem>\n                <MenuItem value=\"alphabetical-ci-asc\">Alphabetical, case-insensitive, asc</MenuItem>\n                <MenuItem value=\"alphabetical-ci-desc\">Alphabetical, case-insensitive, desc</MenuItem>\n              </TextField>\n            )}\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          <Controller\n            control={control}\n            name=\"spec.allowMultiple\"\n            render={({ field }) => (\n              <FormControlLabel\n                label=\"Allow Multiple Values\"\n                control={\n                  <Switch\n                    {...field}\n                    checked={!!field.value}\n                    readOnly={action === 'read'}\n                    value={field.value ?? false}\n                    onChange={(event) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      field.onChange(event);\n                    }}\n                  />\n                }\n              />\n            )}\n          />\n          <Typography variant=\"caption\">Enables multiple values to be selected at the same time</Typography>\n        </Stack>\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.allowAllValue\"\n            render={({ field }) => (\n              <FormControlLabel\n                label=\"Allow All option\"\n                control={\n                  <Switch\n                    {...field}\n                    checked={!!field.value}\n                    readOnly={action === 'read'}\n                    value={field.value ?? false}\n                    onChange={(event) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      field.onChange(event);\n                    }}\n                  />\n                }\n              />\n            )}\n          />\n          <Typography mb={1} variant=\"caption\">\n            Enables an option to include all variable values\n          </Typography>\n          {_allowAllValue && (\n            <Controller\n              control={control}\n              name=\"spec.customAllValue\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Custom All Value\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={\n                    fieldState.error?.message\n                      ? fieldState.error.message\n                      : 'When All is selected, this value will be used'\n                  }\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    if (event.target.value === '') {\n                      field.onChange(undefined);\n                    } else {\n                      field.onChange(event);\n                    }\n                  }}\n                />\n              )}\n            />\n          )}\n        </Stack>\n      </Stack>\n    </>\n  );\n}\n\ninterface VariableEditorFormProps {\n  initialVariableDefinition: VariableDefinition;\n  action: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSave: (def: VariableDefinition) => void;\n  onClose: () => void;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function VariableEditorForm({\n  initialVariableDefinition,\n  action,\n  isDraft,\n  isReadonly,\n  onActionChange,\n  onSave,\n  onClose,\n  onDelete,\n}: VariableEditorFormProps): ReactElement {\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const { variableEditorSchema } = useValidationSchemas();\n  const form = useForm<VariableDefinition>({\n    resolver: zodResolver(variableEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialVariableDefinition,\n  });\n\n  const kind = useWatch({ control: form.control, name: 'kind' });\n\n  function clearFormData(data: VariableDefinition): VariableDefinition {\n    const result = { ...data };\n    if (\n      result.spec.display?.name === undefined &&\n      result.spec.display?.description === undefined &&\n      result.spec.display?.hidden === undefined\n    ) {\n      delete result.spec.display;\n    }\n    return result;\n  }\n\n  const processForm: SubmitHandler<VariableDefinition> = (data: VariableDefinition) => {\n    // reset display attributes to undefined when empty, because we don't want to save empty strings\n    onSave(clearFormData(data));\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  function handleCancel(): void {\n    if (JSON.stringify(initialVariableDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\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        <FormActions\n          action={action}\n          submitText={submitText}\n          isReadonly={isReadonly}\n          isValid={form.formState.isValid}\n          onActionChange={onActionChange}\n          onSubmit={form.handleSubmit(processForm)}\n          onDelete={onDelete}\n          onCancel={handleCancel}\n        />\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.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' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.name\"\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                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.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                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\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                  value={field.value ?? 'TextVariable'}\n                  onChange={(event) => {\n                    field.onChange(event);\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        {kind === 'TextVariable' && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <TextVariableEditorForm action={action} control={form.control} />\n          </ErrorBoundary>\n        )}\n        {kind === 'ListVariable' && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <ListVariableEditorForm action={action} control={form.control} />\n          </ErrorBoundary>\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","useState","Box","Typography","Switch","TextField","Grid","FormControlLabel","MenuItem","Stack","ClickAwayListener","Divider","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","FormActions","Controller","FormProvider","useForm","useFormContext","useWatch","zodResolver","getSubmitText","getTitleAction","VARIABLE_TYPES","PluginEditor","useValidationSchemas","VariableListPreview","VariablePreview","FallbackPreview","div","TextVariableEditorForm","action","control","py","variant","spacing","name","render","field","fieldState","values","value","label","InputLabelProps","shrink","undefined","InputProps","readOnly","error","helperText","message","onChange","event","checked","ListVariableEditorForm","form","previewSpec","setPreviewSpec","getValues","refreshPreview","kind","_allowAllValue","spec","allowAllValue","setValue","allowMultiple","mb","FallbackComponent","resetKeys","definition","onRefresh","isLoading","onClickAway","width","pluginTypes","pluginKindLabel","selection","type","isReadonly","v","target","select","fullWidth","VariableEditorForm","initialVariableDefinition","isDraft","onActionChange","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","variableEditorSchema","resolver","mode","defaultValues","clearFormData","data","result","display","description","hidden","processForm","handleCancel","JSON","stringify","sx","alignItems","padding","theme","borderBottom","palette","divider","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","item","xs","required","disabled","map","isOpen","onDiscardChanges"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,SAA8CC,QAAQ,QAAQ,QAAQ;AAC7E,SACEC,GAAG,EACHC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,IAAI,EACJC,gBAAgB,EAChBC,QAAQ,EACRC,KAAK,EACLC,iBAAiB,EACjBC,OAAO,QACF,gBAAgB;AAEvB,SAASC,gCAAgC,EAAEC,UAAU,EAAEC,aAAa,EAAEC,WAAW,QAAQ,yBAAyB;AAClH,SAAkBC,UAAU,EAAEC,YAAY,EAAiBC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,kBAAkB;AACtH,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,aAAa,EAAEC,cAAc,QAAQ,iBAAiB;AAC/D,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,mBAAmB;AACxD,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,oBAAoB;AAEzE,SAASC;IACP,qBAAO,KAACC;kBAAI;;AACd;AAOA,SAASC,uBAAuB,EAAEC,MAAM,EAAEC,OAAO,EAA+B;IAC9E,qBACE;;0BACE,KAAC9B;gBAAW+B,IAAI;gBAAGC,SAAQ;0BAAY;;0BAGvC,MAAC1B;gBAAM2B,SAAS;;kCACd,KAACpB;wBACCiB,SAASA;wBACTI,MAAK;wBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B;;kDACE,KAACtC;kDACC,cAAA,KAAC0B;4CAAgBa,QAAQ;gDAACF,MAAMG,KAAK;6CAAC;;;kDAExC,KAACrC;wCACE,GAAGkC,KAAK;wCACTI,OAAM;wCACNC,iBAAiB;4CAAEC,QAAQb,WAAW,SAAS,OAAOc;wCAAU;wCAChEC,YAAY;4CACVC,UAAUhB,WAAW;wCACvB;wCACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;wCACzBC,YAAYV,WAAWS,KAAK,EAAEE;wCAC9BT,OAAOH,MAAMG,KAAK,IAAI;wCACtBU,UAAU,CAACC;4CACTd,MAAMa,QAAQ,CAACC;wCACjB;;;;;kCAKR,KAACrC;wBACCiB,SAASA;wBACTI,MAAK;wBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAAChC;gCACCoC,OAAM;gCACNV,uBACE,KAAC7B;oCACE,GAAGmC,KAAK;oCACTe,SAAS,CAAC,CAACf,MAAMG,KAAK;oCACtBM,UAAUhB,WAAW;oCACrBU,OAAOH,MAAMG,KAAK,IAAI;oCACtBU,UAAU,CAACC;wCACT,IAAIrB,WAAW,QAAQ,QAAQ,oDAAoD;wCACnFO,MAAMa,QAAQ,CAACC;oCACjB;;;;;;;;AASlB;AAEA,SAASE,uBAAuB,EAAEvB,MAAM,EAAEC,OAAO,EAA+B;IAC9E,MAAMuB,OAAOrC;IACb;;;GAGC,GACD,MAAM,CAACsC,aAAaC,eAAe,GAAGzD,SAAiCuD,KAAKG,SAAS;IACrF,MAAMC,iBAAiB;QACrBF,eAAeF,KAAKG,SAAS;IAC/B;IAEA,MAAME,OAAOzC,SAAiD;QAAEa,SAASA;QAASI,MAAM;IAAmB;IAC3G,MAAMyB,iBAAiB1C,SAAmD;QACxEa,SAASA;QACTI,MAAM;IACR;IAEA,mEAAmE;IACnE,6DAA6D;IAC7D,MAAMI,SAASe,KAAKG,SAAS;IAC7B,IAAIlB,OAAOsB,IAAI,CAACC,aAAa,KAAKlB,WAAW;QAC3CU,KAAKS,QAAQ,CAAC,sBAAsB;IACtC;IAEA,IAAIxB,OAAOsB,IAAI,CAACG,aAAa,KAAKpB,WAAW;QAC3CU,KAAKS,QAAQ,CAAC,sBAAsB;IACtC;IAEA,qBACE;;0BACE,KAAC9D;gBAAW+B,IAAI;gBAAGC,SAAQ;0BAAY;;0BAGvC,MAAC1B;gBAAM2B,SAAS;gBAAG+B,IAAI;;oBACpBN,qBACC,KAAC3D;kCACC,cAAA,KAACY;4BAAcsD,mBAAmBvC;4BAAiBwC,WAAW;gCAACZ;6BAAY;sCACzE,cAAA,KAAC9B;gCAAoB2C,YAAYb;gCAAac,WAAWX;;;uCAI7D,KAAChC;wBAAgB4C,WAAW;;kCAG9B,MAAC/D;;0CAEC,KAACC;gCAAkB+D,aAAa,IAAMb;0CACpC,cAAA,KAAC1D;;0CAGH,KAACY;gCAAcsD,mBAAmBvD;0CAChC,cAAA,KAACG;oCACCiB,SAASA;oCACTI,MAAK;oCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACd;4CACCiD,OAAM;4CACNC,aAAa;gDAAC;6CAAW;4CACzBC,iBAAgB;4CAChBlC,OAAO;gDACLmC,WAAW;oDACTC,MAAM;oDACNjB,MAAMtB,MAAMG,KAAK,EAAEmB,QAAQ;gDAC7B;gDACAE,MAAMxB,MAAMG,KAAK,EAAEqB,QAAQ;oDAAEtB,QAAQ,EAAE;gDAAC;4CAC1C;4CACAsC,YAAY/C,WAAW;4CACvBoB,UAAU,CAAC4B;gDACTzC,MAAMa,QAAQ,CAAC;oDAAES,MAAMmB,EAAEH,SAAS,CAAChB,IAAI;oDAAEE,MAAMiB,EAAEjB,IAAI;gDAAC;4CACxD;;;;;;kCAOV,KAACtD;kCACC,cAAA,KAACO;4BACCiB,SAASA;4BACTI,MAAK;4BACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACnC;oCACE,GAAGkC,KAAK;oCACTI,OAAM;oCACNC,iBAAiB;wCAAEC,QAAQb,WAAW,SAAS,OAAOc;oCAAU;oCAChEC,YAAY;wCACVC,UAAUhB,WAAW;oCACvB;oCACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;oCACzBP,OAAOH,MAAMG,KAAK,IAAI;oCACtBU,UAAU,CAACC;wCACT,IAAIA,MAAM4B,MAAM,CAACvC,KAAK,KAAK,IAAI;4CAC7BH,MAAMa,QAAQ,CAACN;wCACjB,OAAO;4CACLP,MAAMa,QAAQ,CAACC;wCACjB;oCACF;oCACAH,YACEV,WAAWS,KAAK,EAAEE,UACdX,WAAWS,KAAK,CAACE,OAAO,GACxB;;;;kCAOd,KAAC1C;kCACC,cAAA,KAACO;4BACCiB,SAASA;4BACTI,MAAK;4BACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,MAACnC;oCACC6E,MAAM;oCACL,GAAG3C,KAAK;oCACT4C,SAAS;oCACTxC,OAAM;oCACNC,iBAAiB;wCAAEC,QAAQb,WAAW,SAAS,OAAOc;oCAAU;oCAChEC,YAAY;wCACVC,UAAUhB,WAAW;oCACvB;oCACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;oCACzBC,YAAYV,WAAWS,KAAK,EAAEE;oCAC9BT,OAAOH,MAAMG,KAAK,IAAI;oCACtBU,UAAU,CAACC;wCACTd,MAAMa,QAAQ,CAACC;oCACjB;;sDAEA,KAAC7C;4CAASkC,OAAM;sDAAO;;sDACvB,KAAClC;4CAASkC,OAAM;sDAAmB;;sDACnC,KAAClC;4CAASkC,OAAM;sDAAoB;;sDACpC,KAAClC;4CAASkC,OAAM;sDAAgB;;sDAChC,KAAClC;4CAASkC,OAAM;sDAAiB;;sDACjC,KAAClC;4CAASkC,OAAM;sDAAsB;;sDACtC,KAAClC;4CAASkC,OAAM;sDAAuB;;;;;;;;0BAOjD,KAAC/B;0BAED,KAACR;gBAAW+B,IAAI;gBAAGC,SAAQ;0BAAY;;0BAGvC,MAAC1B;gBAAM2B,SAAQ;;kCACb,MAAC3B;;0CACC,KAACO;gCACCiB,SAASA;gCACTI,MAAK;gCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAAChC;wCACCoC,OAAM;wCACNV,uBACE,KAAC7B;4CACE,GAAGmC,KAAK;4CACTe,SAAS,CAAC,CAACf,MAAMG,KAAK;4CACtBM,UAAUhB,WAAW;4CACrBU,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACT,IAAIrB,WAAW,QAAQ,QAAQ,oDAAoD;gDACnFO,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAMV,KAAClD;gCAAWgC,SAAQ;0CAAU;;;;kCAEhC,MAAC1B;;0CACC,KAACO;gCACCiB,SAASA;gCACTI,MAAK;gCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAAChC;wCACCoC,OAAM;wCACNV,uBACE,KAAC7B;4CACE,GAAGmC,KAAK;4CACTe,SAAS,CAAC,CAACf,MAAMG,KAAK;4CACtBM,UAAUhB,WAAW;4CACrBU,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACT,IAAIrB,WAAW,QAAQ,QAAQ,oDAAoD;gDACnFO,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAMV,KAAClD;gCAAWgE,IAAI;gCAAGhC,SAAQ;0CAAU;;4BAGpC2B,gCACC,KAAC9C;gCACCiB,SAASA;gCACTI,MAAK;gCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACnC;wCACE,GAAGkC,KAAK;wCACT4C,SAAS;wCACTxC,OAAM;wCACNC,iBAAiB;4CAAEC,QAAQb,WAAW,SAAS,OAAOc;wCAAU;wCAChEC,YAAY;4CACVC,UAAUhB,WAAW;wCACvB;wCACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;wCACzBC,YACEV,WAAWS,KAAK,EAAEE,UACdX,WAAWS,KAAK,CAACE,OAAO,GACxB;wCAENT,OAAOH,MAAMG,KAAK,IAAI;wCACtBU,UAAU,CAACC;4CACT,IAAIA,MAAM4B,MAAM,CAACvC,KAAK,KAAK,IAAI;gDAC7BH,MAAMa,QAAQ,CAACN;4CACjB,OAAO;gDACLP,MAAMa,QAAQ,CAACC;4CACjB;wCACF;;;;;;;;;AASlB;AAaA,OAAO,SAAS+B,mBAAmB,EACjCC,yBAAyB,EACzBrD,MAAM,EACNsD,OAAO,EACPP,UAAU,EACVQ,cAAc,EACdC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACgB;IACxB,MAAM,CAACC,uBAAuBC,uBAAuB,GAAG3F,SAAkB;IAC1E,MAAM4F,cAActE,eAAeS,QAAQsD;IAC3C,MAAMQ,aAAaxE,cAAcU,QAAQsD;IAEzC,MAAM,EAAES,oBAAoB,EAAE,GAAGrE;IACjC,MAAM8B,OAAOtC,QAA4B;QACvC8E,UAAU3E,YAAY0E;QACtBE,MAAM;QACNC,eAAeb;IACjB;IAEA,MAAMxB,OAAOzC,SAAS;QAAEa,SAASuB,KAAKvB,OAAO;QAAEI,MAAM;IAAO;IAE5D,SAAS8D,cAAcC,IAAwB;QAC7C,MAAMC,SAAS;YAAE,GAAGD,IAAI;QAAC;QACzB,IACEC,OAAOtC,IAAI,CAACuC,OAAO,EAAEjE,SAASS,aAC9BuD,OAAOtC,IAAI,CAACuC,OAAO,EAAEC,gBAAgBzD,aACrCuD,OAAOtC,IAAI,CAACuC,OAAO,EAAEE,WAAW1D,WAChC;YACA,OAAOuD,OAAOtC,IAAI,CAACuC,OAAO;QAC5B;QACA,OAAOD;IACT;IAEA,MAAMI,cAAiD,CAACL;QACtD,gGAAgG;QAChGZ,OAAOW,cAAcC;IACvB;IAEA,oDAAoD;IACpD,4CAA4C;IAC5C,uDAAuD;IACvD,gDAAgD;IAChD,SAASM;QACP,IAAIC,KAAKC,SAAS,CAACvB,+BAA+BsB,KAAKC,SAAS,CAACT,cAAc3C,KAAKG,SAAS,MAAM;YACjGiC,uBAAuB;QACzB,OAAO;YACLH;QACF;IACF;IAEA,qBACE,MAACxE;QAAc,GAAGuC,IAAI;;0BACpB,MAACtD;gBACC2G,IAAI;oBACFP,SAAS;oBACTQ,YAAY;oBACZC,SAAS,CAACC,QAAUA,MAAM5E,OAAO,CAAC,GAAG;oBACrC6E,cAAc,CAACD,QAAU,CAAC,UAAU,EAAEA,MAAME,OAAO,CAACC,OAAO,CAAC,CAAC;gBAC/D;;kCAEA,MAAChH;wBAAWgC,SAAQ;;4BAAM0D;4BAAY;;;kCACtC,KAAC9E;wBACCiB,QAAQA;wBACR8D,YAAYA;wBACZf,YAAYA;wBACZqC,SAAS5D,KAAK6D,SAAS,CAACD,OAAO;wBAC/B7B,gBAAgBA;wBAChB+B,UAAU9D,KAAK+D,YAAY,CAACd;wBAC5Bf,UAAUA;wBACV8B,UAAUd;;;;0BAGd,MAACxG;gBAAI6G,SAAS;gBAAGF,IAAI;oBAAEY,WAAW;gBAAS;;kCACzC,MAACnH;wBAAKoH,SAAS;wBAACtF,SAAS;wBAAG+B,IAAI;;0CAC9B,KAAC7D;gCAAKqH,IAAI;gCAACC,IAAI;0CACb,cAAA,KAAC5G;oCACCiB,SAASuB,KAAKvB,OAAO;oCACrBI,MAAK;oCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACnC;4CACE,GAAGkC,KAAK;4CACTsF,QAAQ;4CACR1C,SAAS;4CACTxC,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQb,WAAW,SAAS,OAAOc;4CAAU;4CAChEC,YAAY;gDACV+E,UAAU9F,WAAW,YAAY,CAACsD;gDAClCtC,UAAUhB,WAAW;4CACvB;4CACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;4CACzBC,YAAYV,WAAWS,KAAK,EAAEE;4CAC9BT,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACTd,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAKR,KAAC/C;gCAAKqH,IAAI;gCAACC,IAAI;0CACb,cAAA,KAAC5G;oCACCiB,SAASuB,KAAKvB,OAAO;oCACrBI,MAAK;oCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACnC;4CACE,GAAGkC,KAAK;4CACT4C,SAAS;4CACTxC,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQb,WAAW,SAAS,OAAOc;4CAAU;4CAChEC,YAAY;gDACVC,UAAUhB,WAAW;4CACvB;4CACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;4CACzBC,YAAYV,WAAWS,KAAK,EAAEE;4CAC9BT,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACTd,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAKR,KAAC/C;gCAAKqH,IAAI;gCAACC,IAAI;0CACb,cAAA,KAAC5G;oCACCiB,SAASuB,KAAKvB,OAAO;oCACrBI,MAAK;oCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACnC;4CACE,GAAGkC,KAAK;4CACT4C,SAAS;4CACTxC,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQb,WAAW,SAAS,OAAOc;4CAAU;4CAChEC,YAAY;gDACVC,UAAUhB,WAAW;4CACvB;4CACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;4CACzBC,YAAYV,WAAWS,KAAK,EAAEE;4CAC9BT,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACTd,MAAMa,QAAQ,CAACC;4CACjB;;;;0CAKR,KAAC/C;gCAAKqH,IAAI;gCAACC,IAAI;0CACb,cAAA,KAAC5G;oCACCiB,SAASuB,KAAKvB,OAAO;oCACrBI,MAAK;oCACLC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACnC;4CACC6E,MAAM;4CACL,GAAG3C,KAAK;4CACT4C,SAAS;4CACTxC,OAAM;4CACNC,iBAAiB;gDAAEC,QAAQb,WAAW,SAAS,OAAOc;4CAAU;4CAChEC,YAAY;gDACVC,UAAUhB,WAAW;4CACvB;4CACAiB,OAAO,CAAC,CAACT,WAAWS,KAAK;4CACzBC,YAAYV,WAAWS,KAAK,EAAEE;4CAC9BT,OAAOH,MAAMG,KAAK,IAAI;4CACtBU,UAAU,CAACC;gDACTd,MAAMa,QAAQ,CAACC;4CACjB;sDAEC7B,eAAeuG,GAAG,CAAC,CAAC/C,kBACnB,KAACxE;oDAAsBkC,OAAOsC,EAAEnB,IAAI;8DACjCmB,EAAErC,KAAK;mDADKqC,EAAEnB,IAAI;;;;;;kCAUjC,KAAClD;oBAEAkD,SAAS,gCACR,KAAC/C;wBAAcsD,mBAAmBvD;kCAChC,cAAA,KAACkB;4BAAuBC,QAAQA;4BAAQC,SAASuB,KAAKvB,OAAO;;;oBAGhE4B,SAAS,gCACR,KAAC/C;wBAAcsD,mBAAmBvD;kCAChC,cAAA,KAAC0C;4BAAuBvB,QAAQA;4BAAQC,SAASuB,KAAKvB,OAAO;;;;;0BAInE,KAACrB;gBACC2F,aAAY;gBACZyB,QAAQrC;gBACR6B,UAAU;oBACR5B,uBAAuB;gBACzB;gBACAqC,kBAAkB;oBAChBrC,uBAAuB;oBACvBH;gBACF;;;;AAIR"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"VariablePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"names":[],"mappings":";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"}
+{"version":3,"file":"VariablePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAKtD,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,GAAG,YAAY,CAqDzE;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CAajF"}

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

@@ -20,14 +20,14 @@ 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 { values, onRefresh, isLoading, error } = props;
     const [maxValues, setMaxValues] = useState(DEFAULT_MAX_PREVIEW_VALUES);
-    const { infoSnackbar  } = useSnackbar();
+    const { infoSnackbar } = useSnackbar();
     const showAll = ()=>{
         setMaxValues(undefined);
     };
     let notShown = 0;
-    if (values && (values === null || values === void 0 ? void 0 : values.length) > 0 && maxValues) {
+    if (values && values?.length > 0 && maxValues) {
         notShown = values.length - maxValues;
     }
     return /*#__PURE__*/ _jsxs(Box, {
@@ -54,7 +54,7 @@ export function VariablePreview(props) {
                         description: TOOLTIP_TEXT.copyVariableValues,
                         children: /*#__PURE__*/ _jsx(IconButton, {
                             onClick: async ()=>{
-                                if (values === null || values === void 0 ? void 0 : values.length) {
+                                if (values?.length) {
                                     await navigator.clipboard.writeText(values.map((value)=>value).join(', '));
                                     infoSnackbar('Preview values copied to clipboard!');
                                 }
@@ -79,7 +79,7 @@ export function VariablePreview(props) {
                             severity: "error",
                             children: error
                         }),
-                        (values === null || values === void 0 ? void 0 : values.length) === 0 && /*#__PURE__*/ _jsx(Alert, {
+                        values?.length === 0 && /*#__PURE__*/ _jsx(Alert, {
                             severity: "info",
                             children: "No results"
                         }),
@@ -91,10 +91,10 @@ export function VariablePreview(props) {
                             },
                             children: /*#__PURE__*/ _jsx(CircularProgress, {})
                         }),
-                        values === null || values === void 0 ? void 0 : values.slice(0, maxValues).map((val)=>/*#__PURE__*/ _jsx(Chip, {
+                        values?.slice(0, maxValues).map((val, index)=>/*#__PURE__*/ _jsx(Chip, {
                                 size: "small",
                                 label: val
-                            }, val)),
+                            }, index)),
                         notShown > 0 && /*#__PURE__*/ _jsx(Chip, {
                             onClick: showAll,
                             variant: "outlined",
@@ -108,11 +108,11 @@ export function VariablePreview(props) {
     });
 }
 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;
+    const { definition, onRefresh } = props;
+    const { data, isFetching, error } = useListVariablePluginValues(definition);
+    const errorMessage = error?.message;
     return /*#__PURE__*/ _jsx(VariablePreview, {
-        values: (data === null || data === void 0 ? void 0 : data.map((val)=>val.value)) || [],
+        values: data?.map((val)=>val.value) || [],
         onRefresh: onRefresh,
         isLoading: isFetching,
         error: errorMessage

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

@@ -1 +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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"}
+{"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, { ReactElement, 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): ReactElement {\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 = (): void => {\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, index) => <Chip size=\"small\" key={index} label={val} />)}\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): ReactElement {\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","index","label","VariableListPreview","definition","data","isFetching","errorMessage","message"],"mappings":"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"}

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.d.ts

@@ -1,10 +1,10 @@
-import { ListVariableSpec, TextVariableSpec, UnknownSpec, VariableDefinition } from '@perses-dev/core';
-export declare type VariableEditorState = {
+import { ListVariableSpec, TextVariableSpec, VariableDefinition } from '@perses-dev/core';
+export type VariableEditorState = {
     name: string;
     title?: string;
     kind: 'TextVariable' | 'ListVariable' | 'BuiltinVariable';
     description?: string;
-    listVariableFields: Omit<ListVariableSpec<UnknownSpec>, 'name' | 'display'>;
+    listVariableFields: Omit<ListVariableSpec, 'name' | 'display'>;
     textVariableFields: Omit<TextVariableSpec, 'name' | 'display'>;
 };
 export declare function getInitialState(initialVariableDefinition: VariableDefinition): VariableEditorState;

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

@@ -1 +1 @@
-{"version":3,"file":"variable-editor-form-model.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.ts"],"names":[],"mappings":"AAaA,OAAO,EACL,gBAAgB,EAEhB,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EACnB,MAAM,kBAAkB,CAAC;AAE1B,oBAAY,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,cAAc,GAAG,cAAc,GAAG,iBAAiB,CAAC;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAC5E,kBAAkB,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;CAChE,CAAC;AAEF,wBAAgB,eAAe,CAAC,yBAAyB,EAAE,kBAAkB,GAAG,mBAAmB,CAkClG;AAED,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,mBAAmB,GAAG,kBAAkB,CAgC7F"}
+{"version":3,"file":"variable-editor-form-model.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAA0B,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAElH,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,cAAc,GAAG,cAAc,GAAG,iBAAiB,CAAC;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAC/D,kBAAkB,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;CAChE,CAAC;AAEF,wBAAgB,eAAe,CAAC,yBAAyB,EAAE,kBAAkB,GAAG,mBAAmB,CAkClG;AAED,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,mBAAmB,GAAG,kBAAkB,CAgC7F"}

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -11,11 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export function getInitialState(initialVariableDefinition) {
-    var _initialVariableDefinition_spec_display, _initialVariableDefinition_spec_display1;
-    var _initialVariableDefinition_spec_value, _initialVariableDefinition_spec_constant;
     const textVariableFields = {
-        value: (_initialVariableDefinition_spec_value = initialVariableDefinition.spec.value) !== null && _initialVariableDefinition_spec_value !== void 0 ? _initialVariableDefinition_spec_value : '',
-        constant: (_initialVariableDefinition_spec_constant = initialVariableDefinition.spec.constant) !== null && _initialVariableDefinition_spec_constant !== void 0 ? _initialVariableDefinition_spec_constant : false
+        value: initialVariableDefinition.spec.value ?? '',
+        constant: initialVariableDefinition.spec.constant ?? false
     };
     const listVariableFields = {
         allowMultiple: false,
@@ -29,27 +27,24 @@ export function getInitialState(initialVariableDefinition) {
         }
     };
     if (initialVariableDefinition.kind === 'ListVariable') {
-        var _initialVariableDefinition_spec_allowMultiple;
-        listVariableFields.allowMultiple = (_initialVariableDefinition_spec_allowMultiple = initialVariableDefinition.spec.allowMultiple) !== null && _initialVariableDefinition_spec_allowMultiple !== void 0 ? _initialVariableDefinition_spec_allowMultiple : false;
-        var _initialVariableDefinition_spec_allowAllValue;
-        listVariableFields.allowAllValue = (_initialVariableDefinition_spec_allowAllValue = initialVariableDefinition.spec.allowAllValue) !== null && _initialVariableDefinition_spec_allowAllValue !== void 0 ? _initialVariableDefinition_spec_allowAllValue : false;
+        listVariableFields.allowMultiple = initialVariableDefinition.spec.allowMultiple ?? false;
+        listVariableFields.allowAllValue = initialVariableDefinition.spec.allowAllValue ?? false;
         listVariableFields.customAllValue = initialVariableDefinition.spec.customAllValue;
         listVariableFields.capturingRegexp = initialVariableDefinition.spec.capturingRegexp;
         listVariableFields.sort = initialVariableDefinition.spec.sort;
         listVariableFields.plugin = initialVariableDefinition.spec.plugin;
     }
-    var _initialVariableDefinition_spec_display_name, _initialVariableDefinition_spec_display_description;
     return {
         name: initialVariableDefinition.spec.name,
-        title: (_initialVariableDefinition_spec_display_name = (_initialVariableDefinition_spec_display = initialVariableDefinition.spec.display) === null || _initialVariableDefinition_spec_display === void 0 ? void 0 : _initialVariableDefinition_spec_display.name) !== null && _initialVariableDefinition_spec_display_name !== void 0 ? _initialVariableDefinition_spec_display_name : '',
+        title: initialVariableDefinition.spec.display?.name ?? '',
         kind: initialVariableDefinition.kind,
-        description: (_initialVariableDefinition_spec_display_description = (_initialVariableDefinition_spec_display1 = initialVariableDefinition.spec.display) === null || _initialVariableDefinition_spec_display1 === void 0 ? void 0 : _initialVariableDefinition_spec_display1.description) !== null && _initialVariableDefinition_spec_display_description !== void 0 ? _initialVariableDefinition_spec_display_description : '',
+        description: initialVariableDefinition.spec.display?.description ?? '',
         listVariableFields,
         textVariableFields
     };
 }
 export function getVariableDefinitionFromState(state) {
-    const { name , title , kind , description  } = state;
+    const { name, title, kind, description } = state;
     const display = {
         name: title,
         description: description

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.ts"],"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 {\n  ListVariableSpec,\n  TextVariableDefinition,\n  TextVariableSpec,\n  UnknownSpec,\n  VariableDefinition,\n} from '@perses-dev/core';\n\nexport type VariableEditorState = {\n  name: string;\n  title?: string;\n  kind: 'TextVariable' | 'ListVariable' | 'BuiltinVariable';\n  description?: string;\n  listVariableFields: Omit<ListVariableSpec<UnknownSpec>, 'name' | 'display'>;\n  textVariableFields: Omit<TextVariableSpec, 'name' | 'display'>;\n};\n\nexport function getInitialState(initialVariableDefinition: VariableDefinition): VariableEditorState {\n  const textVariableFields: Omit<TextVariableSpec, 'name' | 'display'> = {\n    value: (initialVariableDefinition as TextVariableDefinition).spec.value ?? '',\n    constant: (initialVariableDefinition as TextVariableDefinition).spec.constant ?? false,\n  };\n\n  const listVariableFields: Omit<ListVariableSpec<UnknownSpec>, 'name' | 'display'> = {\n    allowMultiple: false,\n    allowAllValue: false,\n    customAllValue: undefined,\n    capturingRegexp: undefined,\n    sort: undefined,\n    plugin: {\n      kind: '',\n      spec: {},\n    },\n  };\n  if (initialVariableDefinition.kind === 'ListVariable') {\n    listVariableFields.allowMultiple = initialVariableDefinition.spec.allowMultiple ?? false;\n    listVariableFields.allowAllValue = initialVariableDefinition.spec.allowAllValue ?? false;\n    listVariableFields.customAllValue = initialVariableDefinition.spec.customAllValue;\n    listVariableFields.capturingRegexp = initialVariableDefinition.spec.capturingRegexp;\n    listVariableFields.sort = initialVariableDefinition.spec.sort;\n    listVariableFields.plugin = initialVariableDefinition.spec.plugin;\n  }\n\n  return {\n    name: initialVariableDefinition.spec.name,\n    title: initialVariableDefinition.spec.display?.name ?? '',\n    kind: initialVariableDefinition.kind,\n    description: initialVariableDefinition.spec.display?.description ?? '',\n    listVariableFields,\n    textVariableFields,\n  };\n}\n\nexport function getVariableDefinitionFromState(state: VariableEditorState): VariableDefinition {\n  const { name, title, kind, description } = state;\n\n  const display = { name: title, description: description };\n\n  if (kind === 'TextVariable') {\n    return {\n      kind,\n      spec: {\n        name,\n        display,\n        ...state.textVariableFields,\n      },\n    };\n  }\n\n  if (kind === 'ListVariable') {\n    return {\n      kind,\n      spec: {\n        name,\n        display,\n        allowMultiple: state.listVariableFields.allowMultiple,\n        allowAllValue: state.listVariableFields.allowAllValue,\n        customAllValue: state.listVariableFields.customAllValue,\n        capturingRegexp: state.listVariableFields.capturingRegexp,\n        sort: state.listVariableFields.sort,\n        plugin: state.listVariableFields.plugin,\n      },\n    };\n  }\n  throw new Error(`Unknown variable kind: ${kind}`);\n}\n"],"names":["getInitialState","initialVariableDefinition","textVariableFields","value","spec","constant","listVariableFields","allowMultiple","allowAllValue","customAllValue","undefined","capturingRegexp","sort","plugin","kind","name","title","display","description","getVariableDefinitionFromState","state","Error"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAmBjC,OAAO,SAASA,gBAAgBC,yBAA6C;QA4BlEA,yCAEMA;QA5BN,uCACG;IAFZ,MAAMC,qBAAiE;QACrEC,OAAO,CAAA,wCAAA,AAACF,0BAAqDG,KAAKD,mBAA3D,mDAAA,wCAAoE;QAC3EE,UAAU,CAAA,2CAAA,AAACJ,0BAAqDG,KAAKC,sBAA3D,sDAAA,2CAAuE;IACnF;IAEA,MAAMC,qBAA8E;QAClFC,eAAe;QACfC,eAAe;QACfC,gBAAgBC;QAChBC,iBAAiBD;QACjBE,MAAMF;QACNG,QAAQ;YACNC,MAAM;YACNV,MAAM,CAAC;QACT;IACF;IACA,IAAIH,0BAA0Ba,SAAS,gBAAgB;YAClBb;QAAnCK,mBAAmBC,gBAAgBN,CAAAA,gDAAAA,0BAA0BG,KAAKG,2BAA/BN,2DAAAA,gDAAgD;YAChDA;QAAnCK,mBAAmBE,gBAAgBP,CAAAA,gDAAAA,0BAA0BG,KAAKI,2BAA/BP,2DAAAA,gDAAgD;QACnFK,mBAAmBG,iBAAiBR,0BAA0BG,KAAKK;QACnEH,mBAAmBK,kBAAkBV,0BAA0BG,KAAKO;QACpEL,mBAAmBM,OAAOX,0BAA0BG,KAAKQ;QACzDN,mBAAmBO,SAASZ,0BAA0BG,KAAKS;IAC7D;QAISZ,8CAEMA;IAJf,OAAO;QACLc,MAAMd,0BAA0BG,KAAKW;QACrCC,OAAOf,CAAAA,+CAAAA,CAAAA,0CAAAA,0BAA0BG,KAAKa,qBAA/BhB,qDAAAA,KAAAA,IAAAA,wCAAwCc,kBAAxCd,0DAAAA,+CAAgD;QACvDa,MAAMb,0BAA0Ba;QAChCI,aAAajB,CAAAA,sDAAAA,CAAAA,2CAAAA,0BAA0BG,KAAKa,qBAA/BhB,sDAAAA,KAAAA,IAAAA,yCAAwCiB,yBAAxCjB,iEAAAA,sDAAuD;QACpEK;QACAJ;IACF;AACF;AAEA,OAAO,SAASiB,+BAA+BC,KAA0B;IACvE,MAAM,EAAEL,KAAI,EAAEC,MAAK,EAAEF,KAAI,EAAEI,YAAW,EAAE,GAAGE;IAE3C,MAAMH,UAAU;QAAEF,MAAMC;QAAOE,aAAaA;IAAY;IAExD,IAAIJ,SAAS,gBAAgB;QAC3B,OAAO;YACLA;YACAV,MAAM;gBACJW;gBACAE;gBACA,GAAGG,MAAMlB,kBAAkB;YAC7B;QACF;IACF;IAEA,IAAIY,SAAS,gBAAgB;QAC3B,OAAO;YACLA;YACAV,MAAM;gBACJW;gBACAE;gBACAV,eAAea,MAAMd,mBAAmBC;gBACxCC,eAAeY,MAAMd,mBAAmBE;gBACxCC,gBAAgBW,MAAMd,mBAAmBG;gBACzCE,iBAAiBS,MAAMd,mBAAmBK;gBAC1CC,MAAMQ,MAAMd,mBAAmBM;gBAC/BC,QAAQO,MAAMd,mBAAmBO;YACnC;QACF;IACF;IACA,MAAM,IAAIQ,MAAM,CAAC,uBAAuB,EAAEP,KAAK,CAAC;AAClD"}
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.ts"],"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 { ListVariableSpec, TextVariableDefinition, TextVariableSpec, VariableDefinition } from '@perses-dev/core';\n\nexport type VariableEditorState = {\n  name: string;\n  title?: string;\n  kind: 'TextVariable' | 'ListVariable' | 'BuiltinVariable';\n  description?: string;\n  listVariableFields: Omit<ListVariableSpec, 'name' | 'display'>;\n  textVariableFields: Omit<TextVariableSpec, 'name' | 'display'>;\n};\n\nexport function getInitialState(initialVariableDefinition: VariableDefinition): VariableEditorState {\n  const textVariableFields: Omit<TextVariableSpec, 'name' | 'display'> = {\n    value: (initialVariableDefinition as TextVariableDefinition).spec.value ?? '',\n    constant: (initialVariableDefinition as TextVariableDefinition).spec.constant ?? false,\n  };\n\n  const listVariableFields: Omit<ListVariableSpec, 'name' | 'display'> = {\n    allowMultiple: false,\n    allowAllValue: false,\n    customAllValue: undefined,\n    capturingRegexp: undefined,\n    sort: undefined,\n    plugin: {\n      kind: '',\n      spec: {},\n    },\n  };\n  if (initialVariableDefinition.kind === 'ListVariable') {\n    listVariableFields.allowMultiple = initialVariableDefinition.spec.allowMultiple ?? false;\n    listVariableFields.allowAllValue = initialVariableDefinition.spec.allowAllValue ?? false;\n    listVariableFields.customAllValue = initialVariableDefinition.spec.customAllValue;\n    listVariableFields.capturingRegexp = initialVariableDefinition.spec.capturingRegexp;\n    listVariableFields.sort = initialVariableDefinition.spec.sort;\n    listVariableFields.plugin = initialVariableDefinition.spec.plugin;\n  }\n\n  return {\n    name: initialVariableDefinition.spec.name,\n    title: initialVariableDefinition.spec.display?.name ?? '',\n    kind: initialVariableDefinition.kind,\n    description: initialVariableDefinition.spec.display?.description ?? '',\n    listVariableFields,\n    textVariableFields,\n  };\n}\n\nexport function getVariableDefinitionFromState(state: VariableEditorState): VariableDefinition {\n  const { name, title, kind, description } = state;\n\n  const display = { name: title, description: description };\n\n  if (kind === 'TextVariable') {\n    return {\n      kind,\n      spec: {\n        name,\n        display,\n        ...state.textVariableFields,\n      },\n    };\n  }\n\n  if (kind === 'ListVariable') {\n    return {\n      kind,\n      spec: {\n        name,\n        display,\n        allowMultiple: state.listVariableFields.allowMultiple,\n        allowAllValue: state.listVariableFields.allowAllValue,\n        customAllValue: state.listVariableFields.customAllValue,\n        capturingRegexp: state.listVariableFields.capturingRegexp,\n        sort: state.listVariableFields.sort,\n        plugin: state.listVariableFields.plugin,\n      },\n    };\n  }\n  throw new Error(`Unknown variable kind: ${kind}`);\n}\n"],"names":["getInitialState","initialVariableDefinition","textVariableFields","value","spec","constant","listVariableFields","allowMultiple","allowAllValue","customAllValue","undefined","capturingRegexp","sort","plugin","kind","name","title","display","description","getVariableDefinitionFromState","state","Error"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAajC,OAAO,SAASA,gBAAgBC,yBAA6C;IAC3E,MAAMC,qBAAiE;QACrEC,OAAO,AAACF,0BAAqDG,IAAI,CAACD,KAAK,IAAI;QAC3EE,UAAU,AAACJ,0BAAqDG,IAAI,CAACC,QAAQ,IAAI;IACnF;IAEA,MAAMC,qBAAiE;QACrEC,eAAe;QACfC,eAAe;QACfC,gBAAgBC;QAChBC,iBAAiBD;QACjBE,MAAMF;QACNG,QAAQ;YACNC,MAAM;YACNV,MAAM,CAAC;QACT;IACF;IACA,IAAIH,0BAA0Ba,IAAI,KAAK,gBAAgB;QACrDR,mBAAmBC,aAAa,GAAGN,0BAA0BG,IAAI,CAACG,aAAa,IAAI;QACnFD,mBAAmBE,aAAa,GAAGP,0BAA0BG,IAAI,CAACI,aAAa,IAAI;QACnFF,mBAAmBG,cAAc,GAAGR,0BAA0BG,IAAI,CAACK,cAAc;QACjFH,mBAAmBK,eAAe,GAAGV,0BAA0BG,IAAI,CAACO,eAAe;QACnFL,mBAAmBM,IAAI,GAAGX,0BAA0BG,IAAI,CAACQ,IAAI;QAC7DN,mBAAmBO,MAAM,GAAGZ,0BAA0BG,IAAI,CAACS,MAAM;IACnE;IAEA,OAAO;QACLE,MAAMd,0BAA0BG,IAAI,CAACW,IAAI;QACzCC,OAAOf,0BAA0BG,IAAI,CAACa,OAAO,EAAEF,QAAQ;QACvDD,MAAMb,0BAA0Ba,IAAI;QACpCI,aAAajB,0BAA0BG,IAAI,CAACa,OAAO,EAAEC,eAAe;QACpEZ;QACAJ;IACF;AACF;AAEA,OAAO,SAASiB,+BAA+BC,KAA0B;IACvE,MAAM,EAAEL,IAAI,EAAEC,KAAK,EAAEF,IAAI,EAAEI,WAAW,EAAE,GAAGE;IAE3C,MAAMH,UAAU;QAAEF,MAAMC;QAAOE,aAAaA;IAAY;IAExD,IAAIJ,SAAS,gBAAgB;QAC3B,OAAO;YACLA;YACAV,MAAM;gBACJW;gBACAE;gBACA,GAAGG,MAAMlB,kBAAkB;YAC7B;QACF;IACF;IAEA,IAAIY,SAAS,gBAAgB;QAC3B,OAAO;YACLA;YACAV,MAAM;gBACJW;gBACAE;gBACAV,eAAea,MAAMd,kBAAkB,CAACC,aAAa;gBACrDC,eAAeY,MAAMd,kBAAkB,CAACE,aAAa;gBACrDC,gBAAgBW,MAAMd,kBAAkB,CAACG,cAAc;gBACvDE,iBAAiBS,MAAMd,kBAAkB,CAACK,eAAe;gBACzDC,MAAMQ,MAAMd,kBAAkB,CAACM,IAAI;gBACnCC,QAAQO,MAAMd,kBAAkB,CAACO,MAAM;YACzC;QACF;IACF;IACA,MAAM,IAAIQ,MAAM,CAAC,uBAAuB,EAAEP,KAAK,CAAC;AAClD"}

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

@@ -1,8 +1,9 @@
 import { ListVariableDefinition } from '@perses-dev/core';
+import { UseQueryResult } from '@tanstack/react-query';
 import { VariableOption } from '../../model';
 import { VariableStateMap } from '../../runtime';
 export declare function filterVariableList(data: VariableOption[], capturedRegexp: RegExp): VariableOption[];
-export declare function useListVariablePluginValues(definition: ListVariableDefinition): import("@tanstack/react-query").UseQueryResult<VariableOption[], unknown>;
+export declare function useListVariablePluginValues(definition: ListVariableDefinition): UseQueryResult<VariableOption[]>;
 /**
  * Returns a serialized string of the current state of variable values.
  */

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

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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useQuery } from '@tanstack/react-query';
-import { useDatasourceStore, usePlugin, useTemplateVariableValues, useTimeRange } from '../../runtime';
+import { useDatasourceStore, usePlugin, useTimeRange, useAllVariableValues } from '../../runtime';
 export function filterVariableList(data, capturedRegexp) {
     const result = [];
     const filteredSet = new Set();
@@ -38,10 +38,10 @@ export function filterVariableList(data, capturedRegexp) {
     return result;
 }
 export function useListVariablePluginValues(definition) {
-    const { data: variablePlugin  } = usePlugin('Variable', definition.spec.plugin.kind);
+    const { data: variablePlugin } = usePlugin('Variable', definition.spec.plugin.kind);
     const datasourceStore = useDatasourceStore();
-    const allVariables = useTemplateVariableValues();
-    const { absoluteTimeRange: timeRange , refreshKey  } = useTimeRange();
+    const allVariables = useAllVariableValues();
+    const { absoluteTimeRange: timeRange, refreshKey } = useTimeRange();
     const variablePluginCtx = {
         timeRange,
         datasourceStore,
@@ -50,39 +50,37 @@ export function useListVariablePluginValues(definition) {
     const spec = definition.spec.plugin.spec;
     const capturingRegexp = definition.spec.capturingRegexp !== undefined ? new RegExp(definition.spec.capturingRegexp, 'g') : undefined;
     let dependsOnVariables;
-    if (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.dependsOn) {
+    if (variablePlugin?.dependsOn) {
         const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);
         dependsOnVariables = dependencies.variables;
     }
-    const variables = useTemplateVariableValues(dependsOnVariables);
+    const variables = useAllVariableValues(dependsOnVariables);
     let waitToLoad = false;
     if (dependsOnVariables) {
-        waitToLoad = dependsOnVariables.some((v)=>{
-            var _variables_v;
-            return (_variables_v = variables[v]) === null || _variables_v === void 0 ? void 0 : _variables_v.loading;
-        });
+        waitToLoad = dependsOnVariables.some((v)=>variables[v]?.loading);
     }
     const variablesValueKey = getVariableValuesKey(variables);
-    return useQuery([
-        name,
-        definition,
-        variablesValueKey,
-        timeRange,
-        refreshKey
-    ], async ()=>{
-        const resp = await (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.getVariableOptions(spec, {
-            datasourceStore,
-            variables,
-            timeRange
-        }));
-        if (resp === undefined) {
-            return [];
-        }
-        if (capturingRegexp === undefined) {
-            return resp.data;
-        }
-        return filterVariableList(resp.data, capturingRegexp);
-    }, {
+    return useQuery({
+        queryKey: [
+            definition,
+            variablesValueKey,
+            timeRange,
+            refreshKey
+        ],
+        queryFn: async ()=>{
+            const resp = await variablePlugin?.getVariableOptions(spec, {
+                datasourceStore,
+                variables,
+                timeRange
+            });
+            if (resp === undefined) {
+                return [];
+            }
+            if (!capturingRegexp) {
+                return resp.data;
+            }
+            return filterVariableList(resp.data, capturingRegexp);
+        },
         enabled: !!variablePlugin || waitToLoad
     });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/variable-model.ts"],"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 { ListVariableDefinition } from '@perses-dev/core';\nimport { useQuery } from '@tanstack/react-query';\nimport { VariableOption } from '../../model';\nimport {\n  useDatasourceStore,\n  usePlugin,\n  useTemplateVariableValues,\n  useTimeRange,\n  VariableStateMap,\n} from '../../runtime';\n\nexport function filterVariableList(data: VariableOption[], capturedRegexp: RegExp): VariableOption[] {\n  const result: VariableOption[] = [];\n  const filteredSet = new Set<string>();\n  for (const variableValue of data) {\n    const matches = variableValue.value.matchAll(capturedRegexp);\n    let concat = '';\n    for (const match of matches) {\n      for (let i = 1; i < match.length; i++) {\n        const m = match[i];\n        if (m !== undefined) {\n          concat = `${concat}${m}`;\n        }\n      }\n    }\n    if (concat !== '' && !filteredSet.has(concat)) {\n      // like that we are avoiding to have duplicating variable value\n      filteredSet.add(concat);\n      result.push({ label: variableValue.label, value: concat });\n    }\n  }\n  return result;\n}\n\nexport function useListVariablePluginValues(definition: ListVariableDefinition) {\n  const { data: variablePlugin } = usePlugin('Variable', definition.spec.plugin.kind);\n  const datasourceStore = useDatasourceStore();\n  const allVariables = useTemplateVariableValues();\n  const { absoluteTimeRange: timeRange, refreshKey } = useTimeRange();\n\n  const variablePluginCtx = { timeRange, datasourceStore, variables: allVariables };\n\n  const spec = definition.spec.plugin.spec;\n  const capturingRegexp =\n    definition.spec.capturingRegexp !== undefined ? new RegExp(definition.spec.capturingRegexp, 'g') : undefined;\n\n  let dependsOnVariables: string[] | undefined;\n  if (variablePlugin?.dependsOn) {\n    const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);\n    dependsOnVariables = dependencies.variables;\n  }\n\n  const variables = useTemplateVariableValues(dependsOnVariables);\n\n  let waitToLoad = false;\n  if (dependsOnVariables) {\n    waitToLoad = dependsOnVariables.some((v) => variables[v]?.loading);\n  }\n\n  const variablesValueKey = getVariableValuesKey(variables);\n\n  return useQuery(\n    [name, definition, variablesValueKey, timeRange, refreshKey],\n    async () => {\n      const resp = await variablePlugin?.getVariableOptions(spec, { datasourceStore, variables, timeRange });\n      if (resp === undefined) {\n        return [];\n      }\n      if (capturingRegexp === undefined) {\n        return resp.data;\n      }\n      return filterVariableList(resp.data, capturingRegexp);\n    },\n    { enabled: !!variablePlugin || waitToLoad }\n  );\n}\n\n/**\n * Returns a serialized string of the current state of variable values.\n */\nexport function getVariableValuesKey(v: VariableStateMap) {\n  return Object.values(v)\n    .map((v) => JSON.stringify(v.value))\n    .join(',');\n}\n\nexport const VARIABLE_TYPES = [\n  { label: 'List', kind: 'ListVariable' },\n  { label: 'Text', kind: 'TextVariable' },\n] as const;\n"],"names":["useQuery","useDatasourceStore","usePlugin","useTemplateVariableValues","useTimeRange","filterVariableList","data","capturedRegexp","result","filteredSet","Set","variableValue","matches","value","matchAll","concat","match","i","length","m","undefined","has","add","push","label","useListVariablePluginValues","definition","variablePlugin","spec","plugin","kind","datasourceStore","allVariables","absoluteTimeRange","timeRange","refreshKey","variablePluginCtx","variables","capturingRegexp","RegExp","dependsOnVariables","dependsOn","dependencies","waitToLoad","some","v","loading","variablesValueKey","getVariableValuesKey","name","resp","getVariableOptions","enabled","Object","values","map","JSON","stringify","join","VARIABLE_TYPES"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/variable-model.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ListVariableDefinition } from '@perses-dev/core';\nimport { useQuery, UseQueryResult } from '@tanstack/react-query';\nimport { VariableOption } from '../../model';\nimport { useDatasourceStore, usePlugin, useTimeRange, useAllVariableValues, VariableStateMap } from '../../runtime';\n\nexport function filterVariableList(data: VariableOption[], capturedRegexp: RegExp): VariableOption[] {\n  const result: VariableOption[] = [];\n  const filteredSet = new Set<string>();\n  for (const variableValue of data) {\n    const matches = variableValue.value.matchAll(capturedRegexp);\n    let concat = '';\n    for (const match of matches) {\n      for (let i = 1; i < match.length; i++) {\n        const m = match[i];\n        if (m !== undefined) {\n          concat = `${concat}${m}`;\n        }\n      }\n    }\n    if (concat !== '' && !filteredSet.has(concat)) {\n      // like that we are avoiding to have duplicating variable value\n      filteredSet.add(concat);\n      result.push({ label: variableValue.label, value: concat });\n    }\n  }\n  return result;\n}\n\nexport function useListVariablePluginValues(definition: ListVariableDefinition): UseQueryResult<VariableOption[]> {\n  const { data: variablePlugin } = usePlugin('Variable', definition.spec.plugin.kind);\n  const datasourceStore = useDatasourceStore();\n  const allVariables = useAllVariableValues();\n  const { absoluteTimeRange: timeRange, refreshKey } = useTimeRange();\n\n  const variablePluginCtx = { timeRange, datasourceStore, variables: allVariables };\n\n  const spec = definition.spec.plugin.spec;\n  const capturingRegexp =\n    definition.spec.capturingRegexp !== undefined ? new RegExp(definition.spec.capturingRegexp, 'g') : undefined;\n\n  let dependsOnVariables: string[] | undefined;\n  if (variablePlugin?.dependsOn) {\n    const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);\n    dependsOnVariables = dependencies.variables;\n  }\n\n  const variables = useAllVariableValues(dependsOnVariables);\n\n  let waitToLoad = false;\n  if (dependsOnVariables) {\n    waitToLoad = dependsOnVariables.some((v) => variables[v]?.loading);\n  }\n\n  const variablesValueKey = getVariableValuesKey(variables);\n\n  return useQuery({\n    queryKey: [definition, variablesValueKey, timeRange, refreshKey],\n    queryFn: async () => {\n      const resp = await variablePlugin?.getVariableOptions(spec, { datasourceStore, variables, timeRange });\n      if (resp === undefined) {\n        return [];\n      }\n      if (!capturingRegexp) {\n        return resp.data;\n      }\n      return filterVariableList(resp.data, capturingRegexp);\n    },\n    enabled: !!variablePlugin || waitToLoad,\n  });\n}\n\n/**\n * Returns a serialized string of the current state of variable values.\n */\nexport function getVariableValuesKey(v: VariableStateMap): string {\n  return Object.values(v)\n    .map((v) => JSON.stringify(v.value))\n    .join(',');\n}\n\nexport const VARIABLE_TYPES = [\n  { label: 'List', kind: 'ListVariable' },\n  { label: 'Text', kind: 'TextVariable' },\n] as const;\n"],"names":["useQuery","useDatasourceStore","usePlugin","useTimeRange","useAllVariableValues","filterVariableList","data","capturedRegexp","result","filteredSet","Set","variableValue","matches","value","matchAll","concat","match","i","length","m","undefined","has","add","push","label","useListVariablePluginValues","definition","variablePlugin","spec","plugin","kind","datasourceStore","allVariables","absoluteTimeRange","timeRange","refreshKey","variablePluginCtx","variables","capturingRegexp","RegExp","dependsOnVariables","dependsOn","dependencies","waitToLoad","some","v","loading","variablesValueKey","getVariableValuesKey","queryKey","queryFn","resp","getVariableOptions","enabled","Object","values","map","JSON","stringify","join","VARIABLE_TYPES"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -1,7 +1,9 @@
 export * from './CalculationSelector';
 export * from './DatasourceEditorForm';
 export * from './DatasourceSelect';
+export * from './HTTPSettingsEditor';
 export * from './LegendOptionsEditor';
+export * from './MultiQueryEditor';
 export * from './OptionsEditorRadios';
 export * from './OptionsEditorTabs';
 export * from './PanelSpecEditor';
@@ -9,7 +11,8 @@ export * from './PluginEditor';
 export * from './PluginKindSelect';
 export * from './PluginRegistry';
 export * from './PluginSpecEditor';
-export * from './TimeSeriesQueryEditor';
+export * from './TimeRangeControls';
 export * from './Variables';
 export * from './ProjectSelect';
+export * from './MetricLabelInput';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}