@perses-dev/dashboards 0.47.0 → 0.48.0-rc.1

package/dist/cjs/components/PanelDrawer/PanelEditorForm.js

@@ -57,6 +57,10 @@ function PanelEditorForm(props) {
             spec: plugin.spec
         },
         onChange: (plugin)=>{
+            form.setValue('panelDefinition.spec.plugin', {
+                kind: plugin.selection.kind,
+                spec: plugin.spec
+            });
             setPlugin({
                 kind: plugin.selection.kind,
                 spec: plugin.spec
@@ -163,10 +167,10 @@ function PanelEditorForm(props) {
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                 control: form.control,
                                 name: "panelDefinition.spec.display.name",
-                                render: ({ field, fieldState })=>/*#__PURE__*/ {
+                                render: ({ field, fieldState })=>{
                                     var _fieldState_error;
                                     var _field_value;
-                                    return (0, _jsxruntime.jsx)(_material.TextField, {
+                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                         ...field,
                                         required: true,
                                         fullWidth: true,
@@ -201,9 +205,9 @@ function PanelEditorForm(props) {
                                         onChange: (event)=>{
                                             field.onChange(event);
                                         },
-                                        children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ {
+                                        children: panelGroups.map((panelGroup, index)=>{
                                             var _panelGroup_title;
-                                            return (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                                                 value: panelGroup.id,
                                                 children: (_panelGroup_title = panelGroup.title) !== null && _panelGroup_title !== void 0 ? _panelGroup_title : `Group ${index + 1}`
                                             }, panelGroup.id);
@@ -218,10 +222,10 @@ function PanelEditorForm(props) {
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                 control: form.control,
                                 name: "panelDefinition.spec.display.description",
-                                render: ({ field, fieldState })=>/*#__PURE__*/ {
+                                render: ({ field, fieldState })=>{
                                     var _fieldState_error;
                                     var _field_value;
-                                    return (0, _jsxruntime.jsx)(_material.TextField, {
+                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                         ...field,
                                         fullWidth: true,
                                         label: "Description",
@@ -242,10 +246,10 @@ function PanelEditorForm(props) {
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                 control: form.control,
                                 name: "panelDefinition.spec.plugin.kind",
-                                render: ({ field, fieldState })=>/*#__PURE__*/ {
+                                render: ({ field, fieldState })=>{
                                     var _pluginEditor_error, _fieldState_error;
                                     var _pluginEditor_error_message;
-                                    return (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
+                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
                                         ...field,
                                         pluginTypes: [
                                             'Panel'

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

@@ -59,9 +59,9 @@ function BuiltinVariableAccordions({ builtinVariableDefinitions }) {
         builtinVariablesBySource
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-        children: sources.map((source)=>/*#__PURE__*/ {
+        children: sources.map((source)=>{
             var _builtinVariablesBySource_source;
-            return (0, _jsxruntime.jsxs)(_material.Accordion, {
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Accordion, {
                 sx: (theme)=>({
                         '.MuiAccordionSummary-root': {
                             backgroundColor: theme.palette.background.lighter
@@ -110,10 +110,10 @@ function BuiltinVariableAccordions({ builtinVariableDefinitions }) {
                                         })
                                     }),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
-                                        children: ((_builtinVariablesBySource_source = builtinVariablesBySource[source]) !== null && _builtinVariablesBySource_source !== void 0 ? _builtinVariablesBySource_source : []).map((v)=>/*#__PURE__*/ {
+                                        children: ((_builtinVariablesBySource_source = builtinVariablesBySource[source]) !== null && _builtinVariablesBySource_source !== void 0 ? _builtinVariablesBySource_source : []).map((v)=>{
                                             var _v_spec_display;
                                             var _v_spec_display_description;
-                                            return (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
                                                 children: [
                                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
                                                         component: "th",

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

@@ -267,10 +267,10 @@ function VariableEditor(props) {
                                                         })
                                                     }),
                                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
-                                                        children: variableDefinitions.map((v, idx)=>/*#__PURE__*/ {
+                                                        children: variableDefinitions.map((v, idx)=>{
                                                             var _v_spec_display, _v_spec_display1;
                                                             var _getVariableLabelByKind, _v_spec_display_description;
-                                                            return (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                                            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
                                                                 children: [
                                                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
                                                                         component: "th",
@@ -429,10 +429,10 @@ function VariableEditor(props) {
                                                                 })
                                                             }),
                                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
-                                                                children: extVar.definitions.map((v)=>/*#__PURE__*/ {
+                                                                children: extVar.definitions.map((v)=>{
                                                                     var _v_spec_display, _v_spec_display1;
                                                                     var _getVariableLabelByKind, _v_spec_display_description;
-                                                                    return (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                                                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
                                                                         children: [
                                                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
                                                                                 component: "th",

package/dist/components/PanelDrawer/PanelEditorForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,MAAM,EAAmB,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAgB9E,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAyN1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}
+{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,MAAM,EAAmB,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAgB9E,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CA0N1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -39,6 +39,10 @@ export function PanelEditorForm(props) {
             spec: plugin.spec
         },
         onChange: (plugin)=>{
+            form.setValue('panelDefinition.spec.plugin', {
+                kind: plugin.selection.kind,
+                spec: plugin.spec
+            });
             setPlugin({
                 kind: plugin.selection.kind,
                 spec: plugin.spec
@@ -145,10 +149,10 @@ export function PanelEditorForm(props) {
                             children: /*#__PURE__*/ _jsx(Controller, {
                                 control: form.control,
                                 name: "panelDefinition.spec.display.name",
-                                render: ({ field, fieldState })=>/*#__PURE__*/ {
+                                render: ({ field, fieldState })=>{
                                     var _fieldState_error;
                                     var _field_value;
-                                    return _jsx(TextField, {
+                                    return /*#__PURE__*/ _jsx(TextField, {
                                         ...field,
                                         required: true,
                                         fullWidth: true,
@@ -183,9 +187,9 @@ export function PanelEditorForm(props) {
                                         onChange: (event)=>{
                                             field.onChange(event);
                                         },
-                                        children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ {
+                                        children: panelGroups.map((panelGroup, index)=>{
                                             var _panelGroup_title;
-                                            return _jsx(MenuItem, {
+                                            return /*#__PURE__*/ _jsx(MenuItem, {
                                                 value: panelGroup.id,
                                                 children: (_panelGroup_title = panelGroup.title) !== null && _panelGroup_title !== void 0 ? _panelGroup_title : `Group ${index + 1}`
                                             }, panelGroup.id);
@@ -200,10 +204,10 @@ export function PanelEditorForm(props) {
                             children: /*#__PURE__*/ _jsx(Controller, {
                                 control: form.control,
                                 name: "panelDefinition.spec.display.description",
-                                render: ({ field, fieldState })=>/*#__PURE__*/ {
+                                render: ({ field, fieldState })=>{
                                     var _fieldState_error;
                                     var _field_value;
-                                    return _jsx(TextField, {
+                                    return /*#__PURE__*/ _jsx(TextField, {
                                         ...field,
                                         fullWidth: true,
                                         label: "Description",
@@ -224,10 +228,10 @@ export function PanelEditorForm(props) {
                             children: /*#__PURE__*/ _jsx(Controller, {
                                 control: form.control,
                                 name: "panelDefinition.spec.plugin.kind",
-                                render: ({ field, fieldState })=>/*#__PURE__*/ {
+                                render: ({ field, fieldState })=>{
                                     var _pluginEditor_error, _fieldState_error;
                                     var _pluginEditor_error_message;
-                                    return _jsx(PluginKindSelect, {
+                                    return /*#__PURE__*/ _jsx(PluginKindSelect, {
                                         ...field,
                                         pluginTypes: [
                                             'Panel'

package/dist/components/PanelDrawer/PanelEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.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 { useEffect, useState } from 'react';\nimport { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { Action, PanelDefinition, PanelEditorValues } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport {\n  PluginKindSelect,\n  usePluginEditor,\n  PanelSpecEditor,\n  getTitleAction,\n  getSubmitText,\n  useValidationSchemas,\n} from '@perses-dev/plugin-system';\nimport { Controller, FormProvider, SubmitHandler, useForm, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useListPanelGroups } from '../../context';\nimport { PanelPreview } from './PanelPreview';\nimport { usePanelEditor } from './usePanelEditor';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  initialAction: Action;\n  onSave: (values: PanelEditorValues) => void;\n  onClose: () => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const { initialValues, initialAction, onSave, onClose } = props;\n  const panelGroups = useListPanelGroups();\n  const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } =\n    usePanelEditor(initialValues.panelDefinition);\n  const { plugin } = panelDefinition.spec;\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginTypes: ['Panel'],\n    value: { selection: { kind: plugin.kind, type: 'Panel' }, spec: plugin.spec },\n    onChange: (plugin) => {\n      setPlugin({\n        kind: plugin.selection.kind,\n        spec: plugin.spec,\n      });\n    },\n    onHideQueryEditorChange: (isHidden) => {\n      setQueries(undefined, isHidden);\n    },\n  });\n\n  const titleAction = getTitleAction(initialAction, true);\n  const submitText = getSubmitText(initialAction, true);\n\n  const { panelEditorSchema } = useValidationSchemas();\n  const form = useForm<PanelEditorValues>({\n    resolver: zodResolver(panelEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialValues,\n  });\n\n  const links = useWatch({ control: form.control, name: 'panelDefinition.spec.links' });\n  useEffect(() => {\n    setLinks(links);\n  }, [setLinks, links]);\n\n  const processForm: SubmitHandler<PanelEditorValues> = (data) => {\n    onSave(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() {\n    if (JSON.stringify(initialValues) !== JSON.stringify(form.getValues())) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  const handlePanelDefinitionChange = (nextPanelDefStr: string) => {\n    const nextPanelDef: PanelDefinition = JSON.parse(nextPanelDefStr);\n    const { kind: pluginKind, spec: pluginSpec } = nextPanelDef.spec.plugin;\n    // if panel plugin kind and spec are modified, then need to save current spec\n    if (\n      panelDefinition.spec.plugin.kind !== pluginKind &&\n      JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)\n    ) {\n      pluginEditor.rememberCurrentSpecState();\n    }\n    setPanelDefinition(nextPanelDef);\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} Panel</Typography>\n        <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n          <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={form.handleSubmit(processForm)}>\n            {submitText}\n          </Button>\n          <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n            Cancel\n          </Button>\n        </Stack>\n      </Box>\n      <Box id={panelEditorFormId} sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}>\n        <Grid container spacing={2}>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"panelDefinition.spec.display.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Name\"\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setName(event.target.value);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"groupId\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  select\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Group\"\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                >\n                  {panelGroups.map((panelGroup, index) => (\n                    <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                      {panelGroup.title ?? `Group ${index + 1}`}\n                    </MenuItem>\n                  ))}\n                </TextField>\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"panelDefinition.spec.display.description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Description\"\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setDescription(event.target.value);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"panelDefinition.spec.plugin.kind\"\n              render={({ field, fieldState }) => (\n                <PluginKindSelect\n                  {...field}\n                  pluginTypes={['Panel']}\n                  required\n                  fullWidth\n                  label=\"Type\"\n                  disabled={pluginEditor.isLoading}\n                  error={!!pluginEditor.error || !!fieldState.error}\n                  helperText={pluginEditor.error?.message ?? fieldState.error?.message}\n                  value={{ type: 'Panel', kind: field.value }}\n                  onChange={(event) => {\n                    field.onChange(event.kind);\n                    pluginEditor.onSelectionChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Typography variant=\"h4\" marginBottom={1}>\n              Preview\n            </Typography>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <PanelPreview panelDefinition={panelDefinition} />\n            </ErrorBoundary>\n          </Grid>\n          <Grid item xs={12}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <PanelSpecEditor\n                control={form.control}\n                panelDefinition={panelDefinition}\n                onJSONChange={handlePanelDefinitionChange}\n                onQueriesChange={(queries) => {\n                  setQueries(queries);\n                }}\n                onPluginSpecChange={(spec) => {\n                  pluginEditor.onSpecChange(spec);\n                }}\n              />\n            </ErrorBoundary>\n          </Grid>\n        </Grid>\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"You have unapplied changes in this panel. 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\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useEffect","useState","Box","Button","Grid","MenuItem","Stack","TextField","Typography","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","PanelSpecEditor","getTitleAction","getSubmitText","useValidationSchemas","Controller","FormProvider","useForm","useWatch","zodResolver","useListPanelGroups","PanelPreview","usePanelEditor","PanelEditorForm","props","initialValues","initialAction","onSave","onClose","panelGroups","panelDefinition","setName","setDescription","setLinks","setQueries","setPlugin","setPanelDefinition","plugin","spec","isDiscardDialogOpened","setDiscardDialogOpened","pluginEditor","pluginTypes","value","selection","kind","type","onChange","onHideQueryEditorChange","isHidden","undefined","titleAction","submitText","panelEditorSchema","form","resolver","mode","defaultValues","links","control","name","processForm","data","handleCancel","JSON","stringify","getValues","handlePanelDefinitionChange","nextPanelDefStr","nextPanelDef","parse","pluginKind","pluginSpec","rememberCurrentSpecState","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","formState","isValid","onClick","handleSubmit","color","id","panelEditorFormId","flex","overflowY","container","item","xs","render","field","fieldState","required","fullWidth","label","error","helperText","message","event","target","select","map","panelGroup","index","title","isLoading","onSelectionChange","marginBottom","FallbackComponent","onJSONChange","onQueriesChange","queries","onPluginSpecChange","onSpecChange","description","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.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 { useEffect, useState } from 'react';\nimport { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { Action, PanelDefinition, PanelEditorValues } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport {\n  PluginKindSelect,\n  usePluginEditor,\n  PanelSpecEditor,\n  getTitleAction,\n  getSubmitText,\n  useValidationSchemas,\n} from '@perses-dev/plugin-system';\nimport { Controller, FormProvider, SubmitHandler, useForm, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useListPanelGroups } from '../../context';\nimport { PanelPreview } from './PanelPreview';\nimport { usePanelEditor } from './usePanelEditor';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  initialAction: Action;\n  onSave: (values: PanelEditorValues) => void;\n  onClose: () => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const { initialValues, initialAction, onSave, onClose } = props;\n  const panelGroups = useListPanelGroups();\n  const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } =\n    usePanelEditor(initialValues.panelDefinition);\n  const { plugin } = panelDefinition.spec;\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginTypes: ['Panel'],\n    value: { selection: { kind: plugin.kind, type: 'Panel' }, spec: plugin.spec },\n    onChange: (plugin) => {\n      form.setValue('panelDefinition.spec.plugin', { kind: plugin.selection.kind, spec: plugin.spec });\n      setPlugin({\n        kind: plugin.selection.kind,\n        spec: plugin.spec,\n      });\n    },\n    onHideQueryEditorChange: (isHidden) => {\n      setQueries(undefined, isHidden);\n    },\n  });\n\n  const titleAction = getTitleAction(initialAction, true);\n  const submitText = getSubmitText(initialAction, true);\n\n  const { panelEditorSchema } = useValidationSchemas();\n  const form = useForm<PanelEditorValues>({\n    resolver: zodResolver(panelEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialValues,\n  });\n\n  const links = useWatch({ control: form.control, name: 'panelDefinition.spec.links' });\n  useEffect(() => {\n    setLinks(links);\n  }, [setLinks, links]);\n\n  const processForm: SubmitHandler<PanelEditorValues> = (data) => {\n    onSave(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() {\n    if (JSON.stringify(initialValues) !== JSON.stringify(form.getValues())) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  const handlePanelDefinitionChange = (nextPanelDefStr: string) => {\n    const nextPanelDef: PanelDefinition = JSON.parse(nextPanelDefStr);\n    const { kind: pluginKind, spec: pluginSpec } = nextPanelDef.spec.plugin;\n    // if panel plugin kind and spec are modified, then need to save current spec\n    if (\n      panelDefinition.spec.plugin.kind !== pluginKind &&\n      JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)\n    ) {\n      pluginEditor.rememberCurrentSpecState();\n    }\n    setPanelDefinition(nextPanelDef);\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} Panel</Typography>\n        <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n          <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={form.handleSubmit(processForm)}>\n            {submitText}\n          </Button>\n          <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n            Cancel\n          </Button>\n        </Stack>\n      </Box>\n      <Box id={panelEditorFormId} sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}>\n        <Grid container spacing={2}>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"panelDefinition.spec.display.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Name\"\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setName(event.target.value);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"groupId\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  select\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Group\"\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                >\n                  {panelGroups.map((panelGroup, index) => (\n                    <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                      {panelGroup.title ?? `Group ${index + 1}`}\n                    </MenuItem>\n                  ))}\n                </TextField>\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"panelDefinition.spec.display.description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Description\"\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setDescription(event.target.value);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"panelDefinition.spec.plugin.kind\"\n              render={({ field, fieldState }) => (\n                <PluginKindSelect\n                  {...field}\n                  pluginTypes={['Panel']}\n                  required\n                  fullWidth\n                  label=\"Type\"\n                  disabled={pluginEditor.isLoading}\n                  error={!!pluginEditor.error || !!fieldState.error}\n                  helperText={pluginEditor.error?.message ?? fieldState.error?.message}\n                  value={{ type: 'Panel', kind: field.value }}\n                  onChange={(event) => {\n                    field.onChange(event.kind);\n                    pluginEditor.onSelectionChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Typography variant=\"h4\" marginBottom={1}>\n              Preview\n            </Typography>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <PanelPreview panelDefinition={panelDefinition} />\n            </ErrorBoundary>\n          </Grid>\n          <Grid item xs={12}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <PanelSpecEditor\n                control={form.control}\n                panelDefinition={panelDefinition}\n                onJSONChange={handlePanelDefinitionChange}\n                onQueriesChange={(queries) => {\n                  setQueries(queries);\n                }}\n                onPluginSpecChange={(spec) => {\n                  pluginEditor.onSpecChange(spec);\n                }}\n              />\n            </ErrorBoundary>\n          </Grid>\n        </Grid>\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"You have unapplied changes in this panel. 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\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useEffect","useState","Box","Button","Grid","MenuItem","Stack","TextField","Typography","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","PanelSpecEditor","getTitleAction","getSubmitText","useValidationSchemas","Controller","FormProvider","useForm","useWatch","zodResolver","useListPanelGroups","PanelPreview","usePanelEditor","PanelEditorForm","props","initialValues","initialAction","onSave","onClose","panelGroups","panelDefinition","setName","setDescription","setLinks","setQueries","setPlugin","setPanelDefinition","plugin","spec","isDiscardDialogOpened","setDiscardDialogOpened","pluginEditor","pluginTypes","value","selection","kind","type","onChange","form","setValue","onHideQueryEditorChange","isHidden","undefined","titleAction","submitText","panelEditorSchema","resolver","mode","defaultValues","links","control","name","processForm","data","handleCancel","JSON","stringify","getValues","handlePanelDefinitionChange","nextPanelDefStr","nextPanelDef","parse","pluginKind","pluginSpec","rememberCurrentSpecState","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","formState","isValid","onClick","handleSubmit","color","id","panelEditorFormId","flex","overflowY","container","item","xs","render","field","fieldState","required","fullWidth","label","error","helperText","message","event","target","select","map","panelGroup","index","title","isLoading","onSelectionChange","marginBottom","FallbackComponent","onJSONChange","onQueriesChange","queries","onPluginSpecChange","onSpecChange","description","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}

package/dist/components/Variables/BuiltinVariableAccordions.js

@@ -44,9 +44,9 @@ export function BuiltinVariableAccordions({ builtinVariableDefinitions }) {
         builtinVariablesBySource
     ]);
     return /*#__PURE__*/ _jsx(_Fragment, {
-        children: sources.map((source)=>/*#__PURE__*/ {
+        children: sources.map((source)=>{
             var _builtinVariablesBySource_source;
-            return _jsxs(Accordion, {
+            return /*#__PURE__*/ _jsxs(Accordion, {
                 sx: (theme)=>({
                         '.MuiAccordionSummary-root': {
                             backgroundColor: theme.palette.background.lighter
@@ -95,10 +95,10 @@ export function BuiltinVariableAccordions({ builtinVariableDefinitions }) {
                                         })
                                     }),
                                     /*#__PURE__*/ _jsx(TableBody, {
-                                        children: ((_builtinVariablesBySource_source = builtinVariablesBySource[source]) !== null && _builtinVariablesBySource_source !== void 0 ? _builtinVariablesBySource_source : []).map((v)=>/*#__PURE__*/ {
+                                        children: ((_builtinVariablesBySource_source = builtinVariablesBySource[source]) !== null && _builtinVariablesBySource_source !== void 0 ? _builtinVariablesBySource_source : []).map((v)=>{
                                             var _v_spec_display;
                                             var _v_spec_display_description;
-                                            return _jsxs(TableRow, {
+                                            return /*#__PURE__*/ _jsxs(TableRow, {
                                                 children: [
                                                     /*#__PURE__*/ _jsx(TableCell, {
                                                         component: "th",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/BuiltinVariableAccordions.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 { BuiltinVariableDefinition } from '@perses-dev/core';\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material';\nimport ExpandMoreIcon from 'mdi-material-ui/ChevronUp';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { useMemo } from 'react';\n\ntype BuiltinVariableAccordionsProps = {\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n};\n\nexport function BuiltinVariableAccordions({ builtinVariableDefinitions }: BuiltinVariableAccordionsProps) {\n  const builtinVariablesBySource = useMemo(() => {\n    const result: Record<string, BuiltinVariableDefinition[]> = {};\n    for (const definition of builtinVariableDefinitions) {\n      const value = result[definition.spec.source];\n      if (value) {\n        value.push(definition);\n        continue;\n      }\n      result[definition.spec.source] = [definition];\n    }\n    return result;\n  }, [builtinVariableDefinitions]);\n\n  const sources = useMemo(() => {\n    const result: string[] = [];\n    for (const source in builtinVariablesBySource) {\n      if (!result.includes(source)) {\n        result.push(source);\n      }\n    }\n    return result;\n  }, [builtinVariablesBySource]);\n\n  return (\n    <>\n      {sources.map((source) => (\n        <Accordion\n          key={source}\n          sx={(theme) => ({\n            '.MuiAccordionSummary-root': {\n              backgroundColor: theme.palette.background.lighter,\n            },\n            '.MuiAccordionDetails-root': {\n              backgroundColor: theme.palette.background.lighter,\n            },\n          })}\n        >\n          <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls=\"builtin\" id=\"builtin\">\n            <Typography variant=\"h2\">\n              <InfoTooltip\n                title={`${source} Builtin Variables`}\n                description=\"Variables computed during dashboard rendering.\"\n              >\n                <span>{source} Builtin Variables</span>\n              </InfoTooltip>\n            </Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <TableContainer>\n              <Table sx={{ minWidth: 650 }} aria-label=\"table of external variables\">\n                <TableHead>\n                  <TableRow>\n                    <TableCell>Name</TableCell>\n                    <TableCell>Description</TableCell>\n                  </TableRow>\n                </TableHead>\n                <TableBody>\n                  {(builtinVariablesBySource[source] ?? []).map((v) => (\n                    <TableRow key={source + '-' + v.spec.name}>\n                      <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                        {v.spec.name}\n                      </TableCell>\n                      <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                    </TableRow>\n                  ))}\n                </TableBody>\n              </Table>\n            </TableContainer>\n          </AccordionDetails>\n        </Accordion>\n      ))}\n    </>\n  );\n}\n"],"names":["Accordion","AccordionDetails","AccordionSummary","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","ExpandMoreIcon","InfoTooltip","useMemo","BuiltinVariableAccordions","builtinVariableDefinitions","builtinVariablesBySource","result","definition","value","spec","source","push","sources","includes","map","sx","theme","backgroundColor","palette","background","lighter","expandIcon","aria-controls","id","variant","title","description","span","minWidth","aria-label","v","component","scope","fontWeight","name","display"],"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;;AAGjC,SACEA,SAAS,EACTC,gBAAgB,EAChBC,gBAAgB,EAChBC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,UAAU,QACL,gBAAgB;AACvB,OAAOC,oBAAoB,4BAA4B;AACvD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,OAAO,QAAQ,QAAQ;AAMhC,OAAO,SAASC,0BAA0B,EAAEC,0BAA0B,EAAkC;IACtG,MAAMC,2BAA2BH,QAAQ;QACvC,MAAMI,SAAsD,CAAC;QAC7D,KAAK,MAAMC,cAAcH,2BAA4B;YACnD,MAAMI,QAAQF,MAAM,CAACC,WAAWE,IAAI,CAACC,MAAM,CAAC;YAC5C,IAAIF,OAAO;gBACTA,MAAMG,IAAI,CAACJ;gBACX;YACF;YACAD,MAAM,CAACC,WAAWE,IAAI,CAACC,MAAM,CAAC,GAAG;gBAACH;aAAW;QAC/C;QACA,OAAOD;IACT,GAAG;QAACF;KAA2B;IAE/B,MAAMQ,UAAUV,QAAQ;QACtB,MAAMI,SAAmB,EAAE;QAC3B,IAAK,MAAMI,UAAUL,yBAA0B;YAC7C,IAAI,CAACC,OAAOO,QAAQ,CAACH,SAAS;gBAC5BJ,OAAOK,IAAI,CAACD;YACd;QACF;QACA,OAAOJ;IACT,GAAG;QAACD;KAAyB;IAE7B,qBACE;kBACGO,QAAQE,GAAG,CAAC,CAACJ;gBAgCAL;mBA/BZ,MAACf;gBAECyB,IAAI,CAACC,QAAW,CAAA;wBACd,6BAA6B;4BAC3BC,iBAAiBD,MAAME,OAAO,CAACC,UAAU,CAACC,OAAO;wBACnD;wBACA,6BAA6B;4BAC3BH,iBAAiBD,MAAME,OAAO,CAACC,UAAU,CAACC,OAAO;wBACnD;oBACF,CAAA;;kCAEA,KAAC5B;wBAAiB6B,0BAAY,KAACrB;wBAAmBsB,iBAAc;wBAAUC,IAAG;kCAC3E,cAAA,KAACxB;4BAAWyB,SAAQ;sCAClB,cAAA,KAACvB;gCACCwB,OAAO,CAAC,EAAEf,OAAO,kBAAkB,CAAC;gCACpCgB,aAAY;0CAEZ,cAAA,MAACC;;wCAAMjB;wCAAO;;;;;;kCAIpB,KAACnB;kCACC,cAAA,KAACK;sCACC,cAAA,MAACH;gCAAMsB,IAAI;oCAAEa,UAAU;gCAAI;gCAAGC,cAAW;;kDACvC,KAAChC;kDACC,cAAA,MAACC;;8DACC,KAACH;8DAAU;;8DACX,KAACA;8DAAU;;;;;kDAGf,KAACD;kDACE,AAACW,CAAAA,CAAAA,mCAAAA,wBAAwB,CAACK,OAAO,cAAhCL,8CAAAA,mCAAoC,EAAE,AAAD,EAAGS,GAAG,CAAC,CAACgB;gDAK/BA;gDAAAA;mDAJd,MAAChC;;kEACC,KAACH;wDAAUoC,WAAU;wDAAKC,OAAM;wDAAMjB,IAAI;4DAAEkB,YAAY;wDAAO;kEAC5DH,EAAErB,IAAI,CAACyB,IAAI;;kEAEd,KAACvC;kEAAWmC,CAAAA,+BAAAA,kBAAAA,EAAErB,IAAI,CAAC0B,OAAO,cAAdL,sCAAAA,gBAAgBJ,WAAW,cAA3BI,yCAAAA,8BAA+B;;;+CAJ9BpB,SAAS,MAAMoB,EAAErB,IAAI,CAACyB,IAAI;wCAK/B;;;;;;;eApCfxB;QA0CI;;AAInB"}
+{"version":3,"sources":["../../../src/components/Variables/BuiltinVariableAccordions.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 { BuiltinVariableDefinition } from '@perses-dev/core';\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material';\nimport ExpandMoreIcon from 'mdi-material-ui/ChevronUp';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { useMemo } from 'react';\n\ntype BuiltinVariableAccordionsProps = {\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n};\n\nexport function BuiltinVariableAccordions({ builtinVariableDefinitions }: BuiltinVariableAccordionsProps) {\n  const builtinVariablesBySource = useMemo(() => {\n    const result: Record<string, BuiltinVariableDefinition[]> = {};\n    for (const definition of builtinVariableDefinitions) {\n      const value = result[definition.spec.source];\n      if (value) {\n        value.push(definition);\n        continue;\n      }\n      result[definition.spec.source] = [definition];\n    }\n    return result;\n  }, [builtinVariableDefinitions]);\n\n  const sources = useMemo(() => {\n    const result: string[] = [];\n    for (const source in builtinVariablesBySource) {\n      if (!result.includes(source)) {\n        result.push(source);\n      }\n    }\n    return result;\n  }, [builtinVariablesBySource]);\n\n  return (\n    <>\n      {sources.map((source) => (\n        <Accordion\n          key={source}\n          sx={(theme) => ({\n            '.MuiAccordionSummary-root': {\n              backgroundColor: theme.palette.background.lighter,\n            },\n            '.MuiAccordionDetails-root': {\n              backgroundColor: theme.palette.background.lighter,\n            },\n          })}\n        >\n          <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls=\"builtin\" id=\"builtin\">\n            <Typography variant=\"h2\">\n              <InfoTooltip\n                title={`${source} Builtin Variables`}\n                description=\"Variables computed during dashboard rendering.\"\n              >\n                <span>{source} Builtin Variables</span>\n              </InfoTooltip>\n            </Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <TableContainer>\n              <Table sx={{ minWidth: 650 }} aria-label=\"table of external variables\">\n                <TableHead>\n                  <TableRow>\n                    <TableCell>Name</TableCell>\n                    <TableCell>Description</TableCell>\n                  </TableRow>\n                </TableHead>\n                <TableBody>\n                  {(builtinVariablesBySource[source] ?? []).map((v) => (\n                    <TableRow key={source + '-' + v.spec.name}>\n                      <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                        {v.spec.name}\n                      </TableCell>\n                      <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                    </TableRow>\n                  ))}\n                </TableBody>\n              </Table>\n            </TableContainer>\n          </AccordionDetails>\n        </Accordion>\n      ))}\n    </>\n  );\n}\n"],"names":["Accordion","AccordionDetails","AccordionSummary","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","ExpandMoreIcon","InfoTooltip","useMemo","BuiltinVariableAccordions","builtinVariableDefinitions","builtinVariablesBySource","result","definition","value","spec","source","push","sources","includes","map","sx","theme","backgroundColor","palette","background","lighter","expandIcon","aria-controls","id","variant","title","description","span","minWidth","aria-label","v","component","scope","fontWeight","name","display"],"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;;AAGjC,SACEA,SAAS,EACTC,gBAAgB,EAChBC,gBAAgB,EAChBC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,UAAU,QACL,gBAAgB;AACvB,OAAOC,oBAAoB,4BAA4B;AACvD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,OAAO,QAAQ,QAAQ;AAMhC,OAAO,SAASC,0BAA0B,EAAEC,0BAA0B,EAAkC;IACtG,MAAMC,2BAA2BH,QAAQ;QACvC,MAAMI,SAAsD,CAAC;QAC7D,KAAK,MAAMC,cAAcH,2BAA4B;YACnD,MAAMI,QAAQF,MAAM,CAACC,WAAWE,IAAI,CAACC,MAAM,CAAC;YAC5C,IAAIF,OAAO;gBACTA,MAAMG,IAAI,CAACJ;gBACX;YACF;YACAD,MAAM,CAACC,WAAWE,IAAI,CAACC,MAAM,CAAC,GAAG;gBAACH;aAAW;QAC/C;QACA,OAAOD;IACT,GAAG;QAACF;KAA2B;IAE/B,MAAMQ,UAAUV,QAAQ;QACtB,MAAMI,SAAmB,EAAE;QAC3B,IAAK,MAAMI,UAAUL,yBAA0B;YAC7C,IAAI,CAACC,OAAOO,QAAQ,CAACH,SAAS;gBAC5BJ,OAAOK,IAAI,CAACD;YACd;QACF;QACA,OAAOJ;IACT,GAAG;QAACD;KAAyB;IAE7B,qBACE;kBACGO,QAAQE,GAAG,CAAC,CAACJ;gBAgCAL;iCA/BZ,MAACf;gBAECyB,IAAI,CAACC,QAAW,CAAA;wBACd,6BAA6B;4BAC3BC,iBAAiBD,MAAME,OAAO,CAACC,UAAU,CAACC,OAAO;wBACnD;wBACA,6BAA6B;4BAC3BH,iBAAiBD,MAAME,OAAO,CAACC,UAAU,CAACC,OAAO;wBACnD;oBACF,CAAA;;kCAEA,KAAC5B;wBAAiB6B,0BAAY,KAACrB;wBAAmBsB,iBAAc;wBAAUC,IAAG;kCAC3E,cAAA,KAACxB;4BAAWyB,SAAQ;sCAClB,cAAA,KAACvB;gCACCwB,OAAO,CAAC,EAAEf,OAAO,kBAAkB,CAAC;gCACpCgB,aAAY;0CAEZ,cAAA,MAACC;;wCAAMjB;wCAAO;;;;;;kCAIpB,KAACnB;kCACC,cAAA,KAACK;sCACC,cAAA,MAACH;gCAAMsB,IAAI;oCAAEa,UAAU;gCAAI;gCAAGC,cAAW;;kDACvC,KAAChC;kDACC,cAAA,MAACC;;8DACC,KAACH;8DAAU;;8DACX,KAACA;8DAAU;;;;;kDAGf,KAACD;kDACE,AAACW,CAAAA,CAAAA,mCAAAA,wBAAwB,CAACK,OAAO,cAAhCL,8CAAAA,mCAAoC,EAAE,AAAD,EAAGS,GAAG,CAAC,CAACgB;gDAK/BA;gDAAAA;iEAJd,MAAChC;;kEACC,KAACH;wDAAUoC,WAAU;wDAAKC,OAAM;wDAAMjB,IAAI;4DAAEkB,YAAY;wDAAO;kEAC5DH,EAAErB,IAAI,CAACyB,IAAI;;kEAEd,KAACvC;kEAAWmC,CAAAA,+BAAAA,kBAAAA,EAAErB,IAAI,CAAC0B,OAAO,cAAdL,sCAAAA,gBAAgBJ,WAAW,cAA3BI,yCAAAA,8BAA+B;;;+CAJ9BpB,SAAS,MAAMoB,EAAErB,IAAI,CAACyB,IAAI;;;;;;;;eA/B9CxB;;;AA8Cf"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/Variable.tsx"],"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 { useEffect, useMemo, useState } from 'react';\nimport { LinearProgress, TextField, Autocomplete, Popper, PopperProps } from '@mui/material';\nimport {\n  DEFAULT_ALL_VALUE,\n  ListVariableDefinition,\n  ListVariableSpec,\n  TextVariableDefinition,\n  UnknownSpec,\n  VariableName,\n  VariableValue,\n} from '@perses-dev/core';\nimport { useListVariablePluginValues, VariableOption, VariableState } from '@perses-dev/plugin-system';\nimport { UseQueryResult } from '@tanstack/react-query';\nimport { useVariableDefinitionAndState, useVariableDefinitionActions } from '../../context';\nimport { MAX_VARIABLE_WIDTH, MIN_VARIABLE_WIDTH } from '../../constants';\n\ntype VariableProps = {\n  name: VariableName;\n  source?: string;\n};\n\nfunction variableOptionToVariableValue(options: VariableOption | VariableOption[] | null): VariableValue {\n  if (options === null) {\n    return null;\n  }\n  if (Array.isArray(options)) {\n    return options.map((v) => {\n      return v.value;\n    });\n  }\n  return options.value;\n}\n\nexport function Variable({ name, source }: VariableProps) {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} source={source} />;\n    case 'ListVariable':\n      return <ListVariable name={name} source={source} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\nexport function useListVariableState(\n  spec: ListVariableSpec<UnknownSpec> | undefined,\n  state: VariableState | undefined,\n  variablesOptionsQuery: Partial<UseQueryResult<VariableOption[]>>\n): {\n  // Value, Loading, Options are modified only when we want to save the changes made\n  value: VariableValue | undefined;\n  loading: boolean;\n  options: VariableOption[] | undefined;\n  // selectedOptions is/are the option(s) selected in the view\n  selectedOptions: VariableOption | VariableOption[];\n  // viewOptions are the options used in the view only (= options + All if allowed)\n  viewOptions: VariableOption[];\n} {\n  const allowMultiple = spec?.allowMultiple === true;\n  const allowAllValue = spec?.allowAllValue === true;\n  const sort = spec?.sort;\n  const loading = useMemo(() => variablesOptionsQuery.isFetching ?? false, [variablesOptionsQuery.isFetching]);\n  const options = useMemo(() => variablesOptionsQuery.data ?? [], [variablesOptionsQuery.data]);\n\n  let value = state?.value;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  // Sort the provided list of options according to the method defined\n  const sortedOptions = useMemo((): VariableOption[] => {\n    const opts = options ? [...options] : [];\n\n    if (!sort || sort === 'none') return opts;\n\n    switch (sort) {\n      case 'alphabetical-asc':\n        return opts.sort((a, b) => (a.label > b.label ? 1 : -1));\n      case 'alphabetical-desc':\n        return opts.sort((a, b) => (a.label > b.label ? -1 : 1));\n      case 'numerical-asc':\n        return opts.sort((a, b) => (parseInt(a.label) > parseInt(b.label) ? 1 : -1));\n      case 'numerical-desc':\n        return opts.sort((a, b) => (parseInt(a.label) < parseInt(b.label) ? 1 : -1));\n      case 'alphabetical-ci-asc':\n        return opts.sort((a, b) => (a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1));\n      case 'alphabetical-ci-desc':\n        return opts.sort((a, b) => (a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1));\n      default:\n        return opts;\n    }\n  }, [options, sort]);\n\n  const viewOptions = useMemo(() => {\n    let computedOptions = sortedOptions;\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [allowAllValue, sortedOptions]);\n\n  const valueIsInOptions = useMemo(\n    () =>\n      Boolean(\n        viewOptions.find((v) => {\n          if (allowMultiple) {\n            return (value as string[]).includes(v.value);\n          }\n          return value === v.value;\n        })\n      ),\n    [viewOptions, value, allowMultiple]\n  );\n\n  value = useMemo(() => {\n    const firstOptionValue = viewOptions?.[allowAllValue ? 1 : 0]?.value;\n\n    // If there is no value but there are options, or the value is not in options, we set the value to the first option.\n    if (firstOptionValue) {\n      if (!valueIsInOptions || !value || value.length === 0) {\n        return allowMultiple ? [firstOptionValue] : firstOptionValue;\n      }\n    }\n\n    return value;\n  }, [viewOptions, value, valueIsInOptions, allowMultiple, allowAllValue]);\n\n  const selectedOptions = useMemo(() => {\n    // In the case Autocomplete.multiple equals false, Autocomplete.value expects a single object, not\n    // an array, hence this conditional\n    if (Array.isArray(value)) {\n      return viewOptions.filter((o) => {\n        return value?.includes(o.value);\n      });\n    } else {\n      return (\n        viewOptions.find((o) => {\n          return value === o.value;\n        }) ?? { value: '', label: '' }\n      );\n    }\n  }, [value, viewOptions]);\n\n  return { value, loading, options, selectedOptions, viewOptions };\n}\n\nconst StyledPopper = (props: PopperProps) => (\n  <Popper {...props} sx={{ minWidth: 'fit-content' }} placement=\"bottom-start\" />\n);\n\nconst LETTER_HSIZE = 8; // approximation\nconst ARROW_OFFSET = 40; // right offset for list variables (= take into account the dropdown toggle size)\nconst getWidthPx = (inputValue: string, kind: 'list' | 'text'): number => {\n  const width = (inputValue.length + 1) * LETTER_HSIZE + (kind === 'list' ? ARROW_OFFSET : 0);\n  if (width < MIN_VARIABLE_WIDTH) {\n    return MIN_VARIABLE_WIDTH;\n  } else if (width > MAX_VARIABLE_WIDTH) {\n    return MAX_VARIABLE_WIDTH;\n  } else {\n    return width;\n  }\n};\n\nfunction ListVariable({ name, source }: VariableProps) {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const definition = ctx.definition as ListVariableDefinition;\n  const variablesOptionsQuery = useListVariablePluginValues(definition);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useVariableDefinitionActions();\n  const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(\n    definition?.spec,\n    ctx.state,\n    variablesOptionsQuery\n  );\n  const [inputValue, setInputValue] = useState<string>('');\n  const [inputWidth, setInputWidth] = useState(MIN_VARIABLE_WIDTH);\n\n  const title = definition?.spec.display?.name ?? name;\n  const allowMultiple = definition?.spec.allowMultiple === true;\n  const allowAllValue = definition?.spec.allowAllValue === true;\n\n  // Update value when changed\n  useEffect(() => {\n    if (value) {\n      setVariableValue(name, value, source);\n    }\n  }, [setVariableValue, name, value, source]);\n\n  // Update loading when changed\n  useEffect(() => {\n    setVariableLoading(name, loading, source);\n  }, [setVariableLoading, name, loading, source]);\n\n  // Update options when changed\n  useEffect(() => {\n    if (options) {\n      setVariableOptions(name, options, source);\n    }\n  }, [setVariableOptions, name, options, source]);\n\n  return (\n    <>\n      <Autocomplete\n        disablePortal\n        disableCloseOnSelect={allowMultiple}\n        multiple={allowMultiple}\n        fullWidth\n        limitTags={3}\n        size=\"small\"\n        disableClearable\n        PopperComponent={StyledPopper}\n        renderInput={(params) => {\n          return allowMultiple ? (\n            <TextField {...params} label={title} />\n          ) : (\n            <TextField {...params} label={title} style={{ width: `${inputWidth}px` }} />\n          );\n        }}\n        sx={{\n          '& .MuiInputBase-root': {\n            minHeight: '38px',\n          },\n          '& .MuiAutocomplete-tag': {\n            margin: '1px 2px', // Default margin of 2px (Y axis) make min height of the autocomplete 40px\n          },\n        }}\n        value={selectedOptions}\n        onChange={(_, value) => {\n          if ((value === null || (Array.isArray(value) && value.length === 0)) && allowAllValue) {\n            setVariableValue(name, DEFAULT_ALL_VALUE, source);\n          } else {\n            setVariableValue(name, variableOptionToVariableValue(value), source);\n          }\n        }}\n        inputValue={inputValue}\n        onInputChange={(_, newInputValue) => {\n          setInputValue(newInputValue);\n          if (!allowMultiple) {\n            setInputWidth(getWidthPx(newInputValue, 'list'));\n          }\n        }}\n        options={viewOptions}\n      />\n      {loading && <LinearProgress />}\n    </>\n  );\n}\n\nfunction TextVariable({ name, source }: VariableProps) {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const state = ctx.state;\n  const definition = ctx.definition as TextVariableDefinition;\n  const [tempValue, setTempValue] = useState(state?.value ?? '');\n  const [inputWidth, setInputWidth] = useState(getWidthPx(tempValue as string, 'text'));\n  const { setVariableValue } = useVariableDefinitionActions();\n\n  useEffect(() => {\n    setTempValue(state?.value ?? '');\n  }, [state?.value]);\n\n  return (\n    <TextField\n      title={tempValue as string}\n      value={tempValue}\n      onChange={(e) => {\n        setTempValue(e.target.value);\n        setInputWidth(getWidthPx(e.target.value, 'text'));\n      }}\n      onBlur={() => setVariableValue(name, tempValue, source)}\n      placeholder={name}\n      label={definition?.spec.display?.name ?? name}\n      InputProps={{\n        readOnly: definition?.spec.constant ?? false,\n      }}\n      sx={{\n        width: `${inputWidth}px`,\n        '& .MuiInputBase-root': {\n          minHeight: '38px',\n        },\n        '& .MuiInputBase-input': {\n          textOverflow: 'ellipsis',\n        },\n      }}\n    />\n  );\n}\n"],"names":["useEffect","useMemo","useState","LinearProgress","TextField","Autocomplete","Popper","DEFAULT_ALL_VALUE","useListVariablePluginValues","useVariableDefinitionAndState","useVariableDefinitionActions","MAX_VARIABLE_WIDTH","MIN_VARIABLE_WIDTH","variableOptionToVariableValue","options","Array","isArray","map","v","value","Variable","name","source","ctx","kind","definition","TextVariable","ListVariable","div","useListVariableState","spec","state","variablesOptionsQuery","allowMultiple","allowAllValue","sort","loading","isFetching","data","sortedOptions","opts","a","b","label","parseInt","toLowerCase","viewOptions","computedOptions","valueIsInOptions","Boolean","find","includes","firstOptionValue","length","selectedOptions","filter","o","StyledPopper","props","sx","minWidth","placement","LETTER_HSIZE","ARROW_OFFSET","getWidthPx","inputValue","width","setVariableValue","setVariableLoading","setVariableOptions","setInputValue","inputWidth","setInputWidth","title","display","disablePortal","disableCloseOnSelect","multiple","fullWidth","limitTags","size","disableClearable","PopperComponent","renderInput","params","style","minHeight","margin","onChange","_","onInputChange","newInputValue","tempValue","setTempValue","e","target","onBlur","placeholder","InputProps","readOnly","constant","textOverflow"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/Variable.tsx"],"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 { useEffect, useMemo, useState } from 'react';\nimport { LinearProgress, TextField, Autocomplete, Popper, PopperProps } from '@mui/material';\nimport {\n  DEFAULT_ALL_VALUE,\n  ListVariableDefinition,\n  ListVariableSpec,\n  TextVariableDefinition,\n  UnknownSpec,\n  VariableName,\n  VariableValue,\n} from '@perses-dev/core';\nimport { useListVariablePluginValues, VariableOption, VariableState } from '@perses-dev/plugin-system';\nimport { UseQueryResult } from '@tanstack/react-query';\nimport { useVariableDefinitionAndState, useVariableDefinitionActions } from '../../context';\nimport { MAX_VARIABLE_WIDTH, MIN_VARIABLE_WIDTH } from '../../constants';\n\ntype VariableProps = {\n  name: VariableName;\n  source?: string;\n};\n\nfunction variableOptionToVariableValue(options: VariableOption | VariableOption[] | null): VariableValue {\n  if (options === null) {\n    return null;\n  }\n  if (Array.isArray(options)) {\n    return options.map((v) => {\n      return v.value;\n    });\n  }\n  return options.value;\n}\n\nexport function Variable({ name, source }: VariableProps) {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} source={source} />;\n    case 'ListVariable':\n      return <ListVariable name={name} source={source} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\nexport function useListVariableState(\n  spec: ListVariableSpec<UnknownSpec> | undefined,\n  state: VariableState | undefined,\n  variablesOptionsQuery: Partial<UseQueryResult<VariableOption[]>>\n): {\n  // Value, Loading, Options are modified only when we want to save the changes made\n  value: VariableValue | undefined;\n  loading: boolean;\n  options: VariableOption[] | undefined;\n  // selectedOptions is/are the option(s) selected in the view\n  selectedOptions: VariableOption | VariableOption[];\n  // viewOptions are the options used in the view only (= options + All if allowed)\n  viewOptions: VariableOption[];\n} {\n  const allowMultiple = spec?.allowMultiple === true;\n  const allowAllValue = spec?.allowAllValue === true;\n  const sort = spec?.sort;\n  const loading = useMemo(() => variablesOptionsQuery.isFetching ?? false, [variablesOptionsQuery.isFetching]);\n  const options = useMemo(() => variablesOptionsQuery.data ?? [], [variablesOptionsQuery.data]);\n\n  let value = state?.value;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  // Sort the provided list of options according to the method defined\n  const sortedOptions = useMemo((): VariableOption[] => {\n    const opts = options ? [...options] : [];\n\n    if (!sort || sort === 'none') return opts;\n\n    switch (sort) {\n      case 'alphabetical-asc':\n        return opts.sort((a, b) => (a.label > b.label ? 1 : -1));\n      case 'alphabetical-desc':\n        return opts.sort((a, b) => (a.label > b.label ? -1 : 1));\n      case 'numerical-asc':\n        return opts.sort((a, b) => (parseInt(a.label) > parseInt(b.label) ? 1 : -1));\n      case 'numerical-desc':\n        return opts.sort((a, b) => (parseInt(a.label) < parseInt(b.label) ? 1 : -1));\n      case 'alphabetical-ci-asc':\n        return opts.sort((a, b) => (a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1));\n      case 'alphabetical-ci-desc':\n        return opts.sort((a, b) => (a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1));\n      default:\n        return opts;\n    }\n  }, [options, sort]);\n\n  const viewOptions = useMemo(() => {\n    let computedOptions = sortedOptions;\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [allowAllValue, sortedOptions]);\n\n  const valueIsInOptions = useMemo(\n    () =>\n      Boolean(\n        viewOptions.find((v) => {\n          if (allowMultiple) {\n            return (value as string[]).includes(v.value);\n          }\n          return value === v.value;\n        })\n      ),\n    [viewOptions, value, allowMultiple]\n  );\n\n  value = useMemo(() => {\n    const firstOptionValue = viewOptions?.[allowAllValue ? 1 : 0]?.value;\n\n    // If there is no value but there are options, or the value is not in options, we set the value to the first option.\n    if (firstOptionValue) {\n      if (!valueIsInOptions || !value || value.length === 0) {\n        return allowMultiple ? [firstOptionValue] : firstOptionValue;\n      }\n    }\n\n    return value;\n  }, [viewOptions, value, valueIsInOptions, allowMultiple, allowAllValue]);\n\n  const selectedOptions = useMemo(() => {\n    // In the case Autocomplete.multiple equals false, Autocomplete.value expects a single object, not\n    // an array, hence this conditional\n    if (Array.isArray(value)) {\n      return viewOptions.filter((o) => {\n        return value?.includes(o.value);\n      });\n    } else {\n      return (\n        viewOptions.find((o) => {\n          return value === o.value;\n        }) ?? { value: '', label: '' }\n      );\n    }\n  }, [value, viewOptions]);\n\n  return { value, loading, options, selectedOptions, viewOptions };\n}\n\nconst StyledPopper = (props: PopperProps) => (\n  <Popper {...props} sx={{ minWidth: 'fit-content' }} placement=\"bottom-start\" />\n);\n\nconst LETTER_HSIZE = 8; // approximation\nconst ARROW_OFFSET = 40; // right offset for list variables (= take into account the dropdown toggle size)\nconst getWidthPx = (inputValue: string, kind: 'list' | 'text'): number => {\n  const width = (inputValue.length + 1) * LETTER_HSIZE + (kind === 'list' ? ARROW_OFFSET : 0);\n  if (width < MIN_VARIABLE_WIDTH) {\n    return MIN_VARIABLE_WIDTH;\n  } else if (width > MAX_VARIABLE_WIDTH) {\n    return MAX_VARIABLE_WIDTH;\n  } else {\n    return width;\n  }\n};\n\nfunction ListVariable({ name, source }: VariableProps) {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const definition = ctx.definition as ListVariableDefinition;\n  const variablesOptionsQuery = useListVariablePluginValues(definition);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useVariableDefinitionActions();\n  const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(\n    definition?.spec,\n    ctx.state,\n    variablesOptionsQuery\n  );\n  const [inputValue, setInputValue] = useState<string>('');\n  const [inputWidth, setInputWidth] = useState(MIN_VARIABLE_WIDTH);\n\n  const title = definition?.spec.display?.name ?? name;\n  const allowMultiple = definition?.spec.allowMultiple === true;\n  const allowAllValue = definition?.spec.allowAllValue === true;\n\n  // Update value when changed\n  useEffect(() => {\n    if (value) {\n      setVariableValue(name, value, source);\n    }\n  }, [setVariableValue, name, value, source]);\n\n  // Update loading when changed\n  useEffect(() => {\n    setVariableLoading(name, loading, source);\n  }, [setVariableLoading, name, loading, source]);\n\n  // Update options when changed\n  useEffect(() => {\n    if (options) {\n      setVariableOptions(name, options, source);\n    }\n  }, [setVariableOptions, name, options, source]);\n\n  return (\n    <>\n      <Autocomplete\n        disablePortal\n        disableCloseOnSelect={allowMultiple}\n        multiple={allowMultiple}\n        fullWidth\n        limitTags={3}\n        size=\"small\"\n        disableClearable\n        PopperComponent={StyledPopper}\n        renderInput={(params) => {\n          return allowMultiple ? (\n            <TextField {...params} label={title} />\n          ) : (\n            <TextField {...params} label={title} style={{ width: `${inputWidth}px` }} />\n          );\n        }}\n        sx={{\n          '& .MuiInputBase-root': {\n            minHeight: '38px',\n          },\n          '& .MuiAutocomplete-tag': {\n            margin: '1px 2px', // Default margin of 2px (Y axis) make min height of the autocomplete 40px\n          },\n        }}\n        value={selectedOptions}\n        onChange={(_, value) => {\n          if ((value === null || (Array.isArray(value) && value.length === 0)) && allowAllValue) {\n            setVariableValue(name, DEFAULT_ALL_VALUE, source);\n          } else {\n            setVariableValue(name, variableOptionToVariableValue(value), source);\n          }\n        }}\n        inputValue={inputValue}\n        onInputChange={(_, newInputValue) => {\n          setInputValue(newInputValue);\n          if (!allowMultiple) {\n            setInputWidth(getWidthPx(newInputValue, 'list'));\n          }\n        }}\n        options={viewOptions}\n      />\n      {loading && <LinearProgress />}\n    </>\n  );\n}\n\nfunction TextVariable({ name, source }: VariableProps) {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const state = ctx.state;\n  const definition = ctx.definition as TextVariableDefinition;\n  const [tempValue, setTempValue] = useState(state?.value ?? '');\n  const [inputWidth, setInputWidth] = useState(getWidthPx(tempValue as string, 'text'));\n  const { setVariableValue } = useVariableDefinitionActions();\n\n  useEffect(() => {\n    setTempValue(state?.value ?? '');\n  }, [state?.value]);\n\n  return (\n    <TextField\n      title={tempValue as string}\n      value={tempValue}\n      onChange={(e) => {\n        setTempValue(e.target.value);\n        setInputWidth(getWidthPx(e.target.value, 'text'));\n      }}\n      onBlur={() => setVariableValue(name, tempValue, source)}\n      placeholder={name}\n      label={definition?.spec.display?.name ?? name}\n      InputProps={{\n        readOnly: definition?.spec.constant ?? false,\n      }}\n      sx={{\n        width: `${inputWidth}px`,\n        '& .MuiInputBase-root': {\n          minHeight: '38px',\n        },\n        '& .MuiInputBase-input': {\n          textOverflow: 'ellipsis',\n        },\n      }}\n    />\n  );\n}\n"],"names":["useEffect","useMemo","useState","LinearProgress","TextField","Autocomplete","Popper","DEFAULT_ALL_VALUE","useListVariablePluginValues","useVariableDefinitionAndState","useVariableDefinitionActions","MAX_VARIABLE_WIDTH","MIN_VARIABLE_WIDTH","variableOptionToVariableValue","options","Array","isArray","map","v","value","Variable","name","source","ctx","kind","definition","TextVariable","ListVariable","div","useListVariableState","spec","state","variablesOptionsQuery","allowMultiple","allowAllValue","sort","loading","isFetching","data","sortedOptions","opts","a","b","label","parseInt","toLowerCase","viewOptions","computedOptions","valueIsInOptions","Boolean","find","includes","firstOptionValue","length","selectedOptions","filter","o","StyledPopper","props","sx","minWidth","placement","LETTER_HSIZE","ARROW_OFFSET","getWidthPx","inputValue","width","setVariableValue","setVariableLoading","setVariableOptions","setInputValue","inputWidth","setInputWidth","title","display","disablePortal","disableCloseOnSelect","multiple","fullWidth","limitTags","size","disableClearable","PopperComponent","renderInput","params","style","minHeight","margin","onChange","_","onInputChange","newInputValue","tempValue","setTempValue","e","target","onBlur","placeholder","InputProps","readOnly","constant","textOverflow"],"mappings":"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"}

package/dist/components/Variables/VariableEditor.js

@@ -244,10 +244,10 @@ export function VariableEditor(props) {
                                                         })
                                                     }),
                                                     /*#__PURE__*/ _jsx(TableBody, {
-                                                        children: variableDefinitions.map((v, idx)=>/*#__PURE__*/ {
+                                                        children: variableDefinitions.map((v, idx)=>{
                                                             var _v_spec_display, _v_spec_display1;
                                                             var _getVariableLabelByKind, _v_spec_display_description;
-                                                            return _jsxs(TableRow, {
+                                                            return /*#__PURE__*/ _jsxs(TableRow, {
                                                                 children: [
                                                                     /*#__PURE__*/ _jsx(TableCell, {
                                                                         component: "th",
@@ -406,10 +406,10 @@ export function VariableEditor(props) {
                                                                 })
                                                             }),
                                                             /*#__PURE__*/ _jsx(TableBody, {
-                                                                children: extVar.definitions.map((v)=>/*#__PURE__*/ {
+                                                                children: extVar.definitions.map((v)=>{
                                                                     var _v_spec_display, _v_spec_display1;
                                                                     var _getVariableLabelByKind, _v_spec_display_description;
-                                                                    return _jsxs(TableRow, {
+                                                                    return /*#__PURE__*/ _jsxs(TableRow, {
                                                                         children: [
                                                                             /*#__PURE__*/ _jsx(TableCell, {
                                                                                 component: "th",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/VariableEditor.tsx"],"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 { useState, useMemo } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell as MuiTableCell,\n  Table,\n  TableHead,\n  Switch,\n  Typography,\n  IconButton,\n  Alert,\n  styled,\n  capitalize,\n  Tooltip,\n  Accordion,\n  AccordionSummary,\n  AccordionDetails,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { Action, BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\nimport ContentDuplicate from 'mdi-material-ui/ContentDuplicate';\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport ExpandMoreIcon from 'mdi-material-ui/ChevronUp';\n\nimport { ValidationProvider, VariableEditorForm, VariableState, VARIABLE_TYPES } from '@perses-dev/plugin-system';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ExternalVariableDefinition, useDiscardChangesConfirmationDialog } from '../../context';\nimport { hydrateVariableDefinitionStates } from '../../context/VariableProvider/hydrationUtils';\nimport { BuiltinVariableAccordions } from './BuiltinVariableAccordions';\n\nfunction getVariableLabelByKind(kind: string) {\n  return VARIABLE_TYPES.find((variableType) => variableType.kind === kind)?.label;\n}\n\nfunction getValidation(variableDefinitions: VariableDefinition[]) {\n  const errors = [];\n\n  /**  Variable names must be unique */\n  const variableNames = variableDefinitions.map((variableDefinition) => variableDefinition.spec.name);\n  const uniqueVariableNames = new Set(variableNames);\n  if (variableNames.length !== uniqueVariableNames.size) {\n    errors.push('Variable names must be unique');\n  }\n  return {\n    errors: errors,\n    isValid: errors.length === 0,\n  };\n}\n\nexport function VariableEditor(props: {\n  variableDefinitions: VariableDefinition[];\n  externalVariableDefinitions: ExternalVariableDefinition[];\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n  onChange: (variableDefinitions: VariableDefinition[]) => void;\n  onCancel: () => void;\n}) {\n  const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n  const [variableEditIdx, setVariableEditIdx] = useState<number | null>(null);\n  const [variableFormAction, setVariableFormAction] = useState<Action>('update');\n\n  const externalVariableDefinitions = props.externalVariableDefinitions;\n  const builtinVariableDefinitions = props.builtinVariableDefinitions;\n  const validation = useMemo(() => getValidation(variableDefinitions), [variableDefinitions]);\n  const [variableState] = useMemo(() => {\n    return [hydrateVariableDefinitionStates(variableDefinitions, {}, externalVariableDefinitions)];\n  }, [externalVariableDefinitions, variableDefinitions]);\n  const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n  const handleCancel = () => {\n    if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeVariable = (index: number) => {\n    setVariableDefinitions((draft) => {\n      draft.splice(index, 1);\n    });\n  };\n\n  const addVariable = () => {\n    setVariableFormAction('create');\n    setVariableDefinitions((draft) => {\n      draft.push({\n        kind: 'TextVariable',\n        spec: {\n          name: 'NewVariable',\n          value: '',\n        },\n      });\n    });\n    setVariableEditIdx(variableDefinitions.length);\n  };\n\n  const editVariable = (index: number) => {\n    setVariableFormAction('update');\n    setVariableEditIdx(index);\n  };\n\n  const toggleVariableVisibility = (index: number, visible: boolean) => {\n    setVariableDefinitions((draft) => {\n      const v = draft[index];\n      if (!v) {\n        return;\n      }\n      if (!v.spec.display) {\n        v.spec.display = {\n          name: v.spec.name,\n          hidden: false,\n        };\n      }\n      v.spec.display.hidden = visible === false;\n    });\n  };\n\n  const changeVariableOrder = (index: number, direction: 'up' | 'down') => {\n    setVariableDefinitions((draft) => {\n      if (direction === 'up') {\n        const prevElement = draft[index - 1];\n        const currentElement = draft[index];\n        if (index === 0 || !prevElement || !currentElement) {\n          return;\n        }\n        draft[index - 1] = currentElement;\n        draft[index] = prevElement;\n      } else {\n        const nextElement = draft[index + 1];\n        const currentElement = draft[index];\n        if (index === draft.length - 1 || !nextElement || !currentElement) {\n          return;\n        }\n        draft[index + 1] = currentElement;\n        draft[index] = nextElement;\n      }\n    });\n  };\n\n  const overrideVariable = (v: VariableDefinition) => {\n    setVariableDefinitions((draft) => {\n      draft.push(v);\n    });\n  };\n\n  return (\n    <>\n      {currentEditingVariableDefinition && (\n        <ValidationProvider>\n          <VariableEditorForm\n            initialVariableDefinition={currentEditingVariableDefinition}\n            initialAction={variableFormAction}\n            isDraft={true}\n            onSave={(definition: VariableDefinition) => {\n              setVariableDefinitions((draft) => {\n                draft[variableEditIdx] = definition;\n                setVariableEditIdx(null);\n              });\n            }}\n            onClose={() => {\n              if (variableFormAction === 'create') {\n                removeVariable(variableEditIdx);\n              }\n              setVariableEditIdx(null);\n            }}\n          />\n        </ValidationProvider>\n      )}\n      {!currentEditingVariableDefinition && (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">Edit Dashboard Variables</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.variableDefinitions === variableDefinitions || !validation.isValid}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(variableDefinitions);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                {!validation.isValid &&\n                  validation.errors.map((error) => (\n                    <Alert severity=\"error\" key={error}>\n                      {error}\n                    </Alert>\n                  ))}\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of variables\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Visibility</TableCell>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {variableDefinitions.map((v, idx) => (\n                        <TableRow key={v.spec.name}>\n                          <TableCell component=\"th\" scope=\"row\">\n                            <Switch\n                              checked={v.spec.display?.hidden !== true}\n                              onChange={(e) => {\n                                toggleVariableVisibility(idx, e.target.checked);\n                              }}\n                            />\n                          </TableCell>\n                          <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                            <VariableName name={v.spec.name} state={variableState.get({ name: v.spec.name })} />\n                          </TableCell>\n                          <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                          <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                          <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                            <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n                              <ArrowUp />\n                            </IconButton>\n                            <IconButton\n                              onClick={() => changeVariableOrder(idx, 'down')}\n                              disabled={idx === variableDefinitions.length - 1}\n                            >\n                              <ArrowDown />\n                            </IconButton>\n                            <IconButton onClick={() => editVariable(idx)}>\n                              <PencilIcon />\n                            </IconButton>\n                            <IconButton onClick={() => removeVariable(idx)}>\n                              <TrashIcon />\n                            </IconButton>\n                          </TableCell>\n                        </TableRow>\n                      ))}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginLeft: 'auto' }} onClick={addVariable}>\n                    Add Variable\n                  </Button>\n                </Box>\n              </Stack>\n              {externalVariableDefinitions &&\n                !externalVariableDefinitions.every((v) => v.definitions.length === 0) &&\n                externalVariableDefinitions.map(\n                  (extVar, key) =>\n                    extVar.definitions.length > 0 && (\n                      <Accordion\n                        key={key}\n                        sx={(theme) => ({\n                          '.MuiAccordionSummary-root': {\n                            backgroundColor: theme.palette.background.lighter,\n                          },\n                          '.MuiAccordionDetails-root': {\n                            backgroundColor: theme.palette.background.lighter,\n                          },\n                        })}\n                      >\n                        <AccordionSummary\n                          expandIcon={<ExpandMoreIcon />}\n                          aria-controls={extVar.source}\n                          id={extVar.source}\n                        >\n                          <Stack flexDirection=\"row\" alignItems=\"center\" justifyContent=\"start\">\n                            <>\n                              {extVar.tooltip ? (\n                                <Typography variant=\"h2\">\n                                  <InfoTooltip\n                                    title={extVar.tooltip.title || ''}\n                                    description={extVar.tooltip.description || ''}\n                                  >\n                                    <span>{capitalize(extVar.source)} Variables</span>\n                                  </InfoTooltip>\n                                </Typography>\n                              ) : (\n                                <Typography variant=\"h2\">{capitalize(extVar.source)} Variables</Typography>\n                              )}\n                              {extVar.editLink && (\n                                <IconButton href={extVar.editLink} target=\"_blank\">\n                                  <OpenInNewIcon fontSize=\"small\" />\n                                </IconButton>\n                              )}\n                            </>\n                          </Stack>\n                        </AccordionSummary>\n                        <AccordionDetails>\n                          <TableContainer>\n                            <Table sx={{ minWidth: 650 }} aria-label=\"table of external variables\">\n                              <TableHead>\n                                <TableRow>\n                                  <TableCell>Visibility</TableCell>\n                                  <TableCell>Name</TableCell>\n                                  <TableCell>Type</TableCell>\n                                  <TableCell>Description</TableCell>\n                                  <TableCell align=\"right\">Actions</TableCell>\n                                </TableRow>\n                              </TableHead>\n                              <TableBody>\n                                {extVar.definitions.map((v) => (\n                                  <TableRow key={v.spec.name}>\n                                    <TableCell component=\"th\" scope=\"row\">\n                                      <Switch checked={v.spec.display?.hidden !== true} disabled />\n                                    </TableCell>\n\n                                    <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                                      <VariableName\n                                        name={v.spec.name}\n                                        state={variableState.get({ name: v.spec.name, source: extVar.source })}\n                                      />\n                                    </TableCell>\n                                    <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                                    <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                                    <TableCell align=\"right\">\n                                      <Tooltip title=\"Override\">\n                                        <IconButton\n                                          onClick={() => overrideVariable(v)}\n                                          disabled={!!variableState.get({ name: v.spec.name })}\n                                        >\n                                          <ContentDuplicate />\n                                        </IconButton>\n                                      </Tooltip>\n                                      <IconButton disabled>\n                                        <ArrowUp />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <ArrowDown />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <PencilIcon />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <TrashIcon />\n                                      </IconButton>\n                                    </TableCell>\n                                  </TableRow>\n                                ))}\n                              </TableBody>\n                            </Table>\n                          </TableContainer>\n                        </AccordionDetails>\n                      </Accordion>\n                    )\n                )}\n              {builtinVariableDefinitions && (\n                <BuiltinVariableAccordions builtinVariableDefinitions={builtinVariableDefinitions} />\n              )}\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n  borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n\nexport function VariableName(props: { name: string; state: VariableState | undefined }) {\n  const { name, state } = props;\n  return (\n    <>\n      {!state?.overridden && `${name} `}\n      {!state?.overridden && state?.overriding && (\n        <Box fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {state?.overridden && (\n        <>\n          <Box color={(theme) => theme.palette.grey[500]}>{name}</Box>\n          <Box fontWeight=\"normal\" color={(theme) => theme.palette.grey[500]}>\n            (overridden)\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","MuiTableCell","Table","TableHead","Switch","Typography","IconButton","Alert","styled","capitalize","Tooltip","Accordion","AccordionSummary","AccordionDetails","AddIcon","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","ContentDuplicate","OpenInNewIcon","ExpandMoreIcon","ValidationProvider","VariableEditorForm","VARIABLE_TYPES","InfoTooltip","useDiscardChangesConfirmationDialog","hydrateVariableDefinitionStates","BuiltinVariableAccordions","getVariableLabelByKind","kind","find","variableType","label","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","variableFormAction","setVariableFormAction","externalVariableDefinitions","builtinVariableDefinitions","validation","variableState","currentEditingVariableDefinition","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeVariable","index","draft","splice","addVariable","value","editVariable","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","overrideVariable","initialVariableDefinition","initialAction","isDraft","onSave","definition","onClose","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","onChange","color","overflowY","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight","VariableName","state","get","whiteSpace","startIcon","every","definitions","extVar","key","backgroundColor","background","lighter","expandIcon","aria-controls","source","id","flexDirection","justifyContent","tooltip","title","span","editLink","href","fontSize","overridden","overriding","primary","main","grey"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/VariableEditor.tsx"],"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 { useState, useMemo } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell as MuiTableCell,\n  Table,\n  TableHead,\n  Switch,\n  Typography,\n  IconButton,\n  Alert,\n  styled,\n  capitalize,\n  Tooltip,\n  Accordion,\n  AccordionSummary,\n  AccordionDetails,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { Action, BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\nimport ContentDuplicate from 'mdi-material-ui/ContentDuplicate';\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport ExpandMoreIcon from 'mdi-material-ui/ChevronUp';\n\nimport { ValidationProvider, VariableEditorForm, VariableState, VARIABLE_TYPES } from '@perses-dev/plugin-system';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ExternalVariableDefinition, useDiscardChangesConfirmationDialog } from '../../context';\nimport { hydrateVariableDefinitionStates } from '../../context/VariableProvider/hydrationUtils';\nimport { BuiltinVariableAccordions } from './BuiltinVariableAccordions';\n\nfunction getVariableLabelByKind(kind: string) {\n  return VARIABLE_TYPES.find((variableType) => variableType.kind === kind)?.label;\n}\n\nfunction getValidation(variableDefinitions: VariableDefinition[]) {\n  const errors = [];\n\n  /**  Variable names must be unique */\n  const variableNames = variableDefinitions.map((variableDefinition) => variableDefinition.spec.name);\n  const uniqueVariableNames = new Set(variableNames);\n  if (variableNames.length !== uniqueVariableNames.size) {\n    errors.push('Variable names must be unique');\n  }\n  return {\n    errors: errors,\n    isValid: errors.length === 0,\n  };\n}\n\nexport function VariableEditor(props: {\n  variableDefinitions: VariableDefinition[];\n  externalVariableDefinitions: ExternalVariableDefinition[];\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n  onChange: (variableDefinitions: VariableDefinition[]) => void;\n  onCancel: () => void;\n}) {\n  const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n  const [variableEditIdx, setVariableEditIdx] = useState<number | null>(null);\n  const [variableFormAction, setVariableFormAction] = useState<Action>('update');\n\n  const externalVariableDefinitions = props.externalVariableDefinitions;\n  const builtinVariableDefinitions = props.builtinVariableDefinitions;\n  const validation = useMemo(() => getValidation(variableDefinitions), [variableDefinitions]);\n  const [variableState] = useMemo(() => {\n    return [hydrateVariableDefinitionStates(variableDefinitions, {}, externalVariableDefinitions)];\n  }, [externalVariableDefinitions, variableDefinitions]);\n  const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n  const handleCancel = () => {\n    if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeVariable = (index: number) => {\n    setVariableDefinitions((draft) => {\n      draft.splice(index, 1);\n    });\n  };\n\n  const addVariable = () => {\n    setVariableFormAction('create');\n    setVariableDefinitions((draft) => {\n      draft.push({\n        kind: 'TextVariable',\n        spec: {\n          name: 'NewVariable',\n          value: '',\n        },\n      });\n    });\n    setVariableEditIdx(variableDefinitions.length);\n  };\n\n  const editVariable = (index: number) => {\n    setVariableFormAction('update');\n    setVariableEditIdx(index);\n  };\n\n  const toggleVariableVisibility = (index: number, visible: boolean) => {\n    setVariableDefinitions((draft) => {\n      const v = draft[index];\n      if (!v) {\n        return;\n      }\n      if (!v.spec.display) {\n        v.spec.display = {\n          name: v.spec.name,\n          hidden: false,\n        };\n      }\n      v.spec.display.hidden = visible === false;\n    });\n  };\n\n  const changeVariableOrder = (index: number, direction: 'up' | 'down') => {\n    setVariableDefinitions((draft) => {\n      if (direction === 'up') {\n        const prevElement = draft[index - 1];\n        const currentElement = draft[index];\n        if (index === 0 || !prevElement || !currentElement) {\n          return;\n        }\n        draft[index - 1] = currentElement;\n        draft[index] = prevElement;\n      } else {\n        const nextElement = draft[index + 1];\n        const currentElement = draft[index];\n        if (index === draft.length - 1 || !nextElement || !currentElement) {\n          return;\n        }\n        draft[index + 1] = currentElement;\n        draft[index] = nextElement;\n      }\n    });\n  };\n\n  const overrideVariable = (v: VariableDefinition) => {\n    setVariableDefinitions((draft) => {\n      draft.push(v);\n    });\n  };\n\n  return (\n    <>\n      {currentEditingVariableDefinition && (\n        <ValidationProvider>\n          <VariableEditorForm\n            initialVariableDefinition={currentEditingVariableDefinition}\n            initialAction={variableFormAction}\n            isDraft={true}\n            onSave={(definition: VariableDefinition) => {\n              setVariableDefinitions((draft) => {\n                draft[variableEditIdx] = definition;\n                setVariableEditIdx(null);\n              });\n            }}\n            onClose={() => {\n              if (variableFormAction === 'create') {\n                removeVariable(variableEditIdx);\n              }\n              setVariableEditIdx(null);\n            }}\n          />\n        </ValidationProvider>\n      )}\n      {!currentEditingVariableDefinition && (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">Edit Dashboard Variables</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.variableDefinitions === variableDefinitions || !validation.isValid}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(variableDefinitions);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                {!validation.isValid &&\n                  validation.errors.map((error) => (\n                    <Alert severity=\"error\" key={error}>\n                      {error}\n                    </Alert>\n                  ))}\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of variables\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Visibility</TableCell>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {variableDefinitions.map((v, idx) => (\n                        <TableRow key={v.spec.name}>\n                          <TableCell component=\"th\" scope=\"row\">\n                            <Switch\n                              checked={v.spec.display?.hidden !== true}\n                              onChange={(e) => {\n                                toggleVariableVisibility(idx, e.target.checked);\n                              }}\n                            />\n                          </TableCell>\n                          <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                            <VariableName name={v.spec.name} state={variableState.get({ name: v.spec.name })} />\n                          </TableCell>\n                          <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                          <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                          <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                            <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n                              <ArrowUp />\n                            </IconButton>\n                            <IconButton\n                              onClick={() => changeVariableOrder(idx, 'down')}\n                              disabled={idx === variableDefinitions.length - 1}\n                            >\n                              <ArrowDown />\n                            </IconButton>\n                            <IconButton onClick={() => editVariable(idx)}>\n                              <PencilIcon />\n                            </IconButton>\n                            <IconButton onClick={() => removeVariable(idx)}>\n                              <TrashIcon />\n                            </IconButton>\n                          </TableCell>\n                        </TableRow>\n                      ))}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginLeft: 'auto' }} onClick={addVariable}>\n                    Add Variable\n                  </Button>\n                </Box>\n              </Stack>\n              {externalVariableDefinitions &&\n                !externalVariableDefinitions.every((v) => v.definitions.length === 0) &&\n                externalVariableDefinitions.map(\n                  (extVar, key) =>\n                    extVar.definitions.length > 0 && (\n                      <Accordion\n                        key={key}\n                        sx={(theme) => ({\n                          '.MuiAccordionSummary-root': {\n                            backgroundColor: theme.palette.background.lighter,\n                          },\n                          '.MuiAccordionDetails-root': {\n                            backgroundColor: theme.palette.background.lighter,\n                          },\n                        })}\n                      >\n                        <AccordionSummary\n                          expandIcon={<ExpandMoreIcon />}\n                          aria-controls={extVar.source}\n                          id={extVar.source}\n                        >\n                          <Stack flexDirection=\"row\" alignItems=\"center\" justifyContent=\"start\">\n                            <>\n                              {extVar.tooltip ? (\n                                <Typography variant=\"h2\">\n                                  <InfoTooltip\n                                    title={extVar.tooltip.title || ''}\n                                    description={extVar.tooltip.description || ''}\n                                  >\n                                    <span>{capitalize(extVar.source)} Variables</span>\n                                  </InfoTooltip>\n                                </Typography>\n                              ) : (\n                                <Typography variant=\"h2\">{capitalize(extVar.source)} Variables</Typography>\n                              )}\n                              {extVar.editLink && (\n                                <IconButton href={extVar.editLink} target=\"_blank\">\n                                  <OpenInNewIcon fontSize=\"small\" />\n                                </IconButton>\n                              )}\n                            </>\n                          </Stack>\n                        </AccordionSummary>\n                        <AccordionDetails>\n                          <TableContainer>\n                            <Table sx={{ minWidth: 650 }} aria-label=\"table of external variables\">\n                              <TableHead>\n                                <TableRow>\n                                  <TableCell>Visibility</TableCell>\n                                  <TableCell>Name</TableCell>\n                                  <TableCell>Type</TableCell>\n                                  <TableCell>Description</TableCell>\n                                  <TableCell align=\"right\">Actions</TableCell>\n                                </TableRow>\n                              </TableHead>\n                              <TableBody>\n                                {extVar.definitions.map((v) => (\n                                  <TableRow key={v.spec.name}>\n                                    <TableCell component=\"th\" scope=\"row\">\n                                      <Switch checked={v.spec.display?.hidden !== true} disabled />\n                                    </TableCell>\n\n                                    <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                                      <VariableName\n                                        name={v.spec.name}\n                                        state={variableState.get({ name: v.spec.name, source: extVar.source })}\n                                      />\n                                    </TableCell>\n                                    <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                                    <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                                    <TableCell align=\"right\">\n                                      <Tooltip title=\"Override\">\n                                        <IconButton\n                                          onClick={() => overrideVariable(v)}\n                                          disabled={!!variableState.get({ name: v.spec.name })}\n                                        >\n                                          <ContentDuplicate />\n                                        </IconButton>\n                                      </Tooltip>\n                                      <IconButton disabled>\n                                        <ArrowUp />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <ArrowDown />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <PencilIcon />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <TrashIcon />\n                                      </IconButton>\n                                    </TableCell>\n                                  </TableRow>\n                                ))}\n                              </TableBody>\n                            </Table>\n                          </TableContainer>\n                        </AccordionDetails>\n                      </Accordion>\n                    )\n                )}\n              {builtinVariableDefinitions && (\n                <BuiltinVariableAccordions builtinVariableDefinitions={builtinVariableDefinitions} />\n              )}\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n  borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n\nexport function VariableName(props: { name: string; state: VariableState | undefined }) {\n  const { name, state } = props;\n  return (\n    <>\n      {!state?.overridden && `${name} `}\n      {!state?.overridden && state?.overriding && (\n        <Box fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {state?.overridden && (\n        <>\n          <Box color={(theme) => theme.palette.grey[500]}>{name}</Box>\n          <Box fontWeight=\"normal\" color={(theme) => theme.palette.grey[500]}>\n            (overridden)\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","MuiTableCell","Table","TableHead","Switch","Typography","IconButton","Alert","styled","capitalize","Tooltip","Accordion","AccordionSummary","AccordionDetails","AddIcon","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","ContentDuplicate","OpenInNewIcon","ExpandMoreIcon","ValidationProvider","VariableEditorForm","VARIABLE_TYPES","InfoTooltip","useDiscardChangesConfirmationDialog","hydrateVariableDefinitionStates","BuiltinVariableAccordions","getVariableLabelByKind","kind","find","variableType","label","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","variableFormAction","setVariableFormAction","externalVariableDefinitions","builtinVariableDefinitions","validation","variableState","currentEditingVariableDefinition","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeVariable","index","draft","splice","addVariable","value","editVariable","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","overrideVariable","initialVariableDefinition","initialAction","isDraft","onSave","definition","onClose","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","onChange","color","overflowY","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight","VariableName","state","get","whiteSpace","startIcon","every","definitions","extVar","key","backgroundColor","background","lighter","expandIcon","aria-controls","source","id","flexDirection","justifyContent","tooltip","title","span","editLink","href","fontSize","overridden","overriding","primary","main","grey"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.47.0",
+  "version": "0.48.0-rc.1",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -29,9 +29,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "0.47.0",
-    "@perses-dev/core": "0.47.0",
-    "@perses-dev/plugin-system": "0.47.0",
+    "@perses-dev/components": "0.48.0-rc.1",
+    "@perses-dev/core": "0.48.0-rc.1",
+    "@perses-dev/plugin-system": "0.48.0-rc.1",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^2.28.0",
     "immer": "^9.0.15",
@@ -45,8 +45,8 @@
     "zustand": "^4.3.3"
   },
   "devDependencies": {
-    "@perses-dev/internal-utils": "0.47.0",
-    "@perses-dev/storybook": "0.47.0",
+    "@perses-dev/internal-utils": "0.48.0-rc.1",
+    "@perses-dev/storybook": "0.48.0-rc.1",
     "history": "^5.3.0",
     "intersection-observer": "^0.12.2"
   },