@perses-dev/dashboards 0.50.0 → 0.51.0-beta.0

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Drawer } from '@perses-dev/components';
+import { Drawer, ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { usePanelEditor } from '../../context';
 import { PanelEditorForm } from './PanelEditorForm';
 /**
@@ -36,7 +36,7 @@ import { PanelEditorForm } from './PanelEditorForm';
     };
     // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state
     const handleExited = ()=>{
-        panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.close();
+        panelEditor?.close();
         setIsClosing(false);
     };
     // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.
@@ -50,11 +50,14 @@ import { PanelEditorForm } from './PanelEditorForm';
             onExited: handleExited
         },
         "data-testid": "panel-editor",
-        children: panelEditor && /*#__PURE__*/ _jsx(PanelEditorForm, {
-            initialAction: panelEditor.mode,
-            initialValues: panelEditor.initialValues,
-            onSave: handleSave,
-            onClose: handleClose
+        children: panelEditor && /*#__PURE__*/ _jsx(ErrorBoundary, {
+            FallbackComponent: ErrorAlert,
+            children: /*#__PURE__*/ _jsx(PanelEditorForm, {
+                initialAction: panelEditor.mode,
+                initialValues: panelEditor.initialValues,
+                onSave: handleSave,
+                onClose: handleClose
+            })
         })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n// 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 { ReactElement, useState } from 'react';\nimport { Drawer } from '@perses-dev/components';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { usePanelEditor } from '../../context';\nimport { PanelEditorForm } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = (): ReactElement => {\n  const panelEditor = usePanelEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  function handleSave(values: PanelEditorValues): void {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelEditor === undefined || values === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelEditor.applyChanges(values);\n    setIsClosing(true);\n  }\n\n  const handleClose = (): void => {\n    setIsClosing(true);\n  };\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state\n  const handleExited = (): void => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.\n  // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up\n  const handleClickOut = (): void => {\n    /* do nothing */\n  };\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClickOut} SlideProps={{ onExited: handleExited }} data-testid=\"panel-editor\">\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor && (\n        <PanelEditorForm\n          initialAction={panelEditor.mode}\n          initialValues={panelEditor.initialValues}\n          onSave={handleSave}\n          onClose={handleClose}\n        />\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useState","Drawer","usePanelEditor","PanelEditorForm","PanelDrawer","panelEditor","isClosing","setIsClosing","isOpen","undefined","handleSave","values","Error","applyChanges","handleClose","handleExited","close","handleClickOut","onClose","SlideProps","onExited","data-testid","initialAction","mode","initialValues","onSave"],"mappings":"AAAA,uDAAuD,GACvD,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,eAAe,QAAQ,oBAAoB;AAEpD;;CAEC,GACD,OAAO,MAAMC,cAAc;IACzB,MAAMC,cAAcH;IAEpB,iHAAiH;IACjH,MAAM,CAACI,WAAWC,aAAa,GAAGP,SAAS;IAE3C,oEAAoE;IACpE,MAAMQ,SAASH,gBAAgBI,aAAaH,cAAc;IAE1D,SAASI,WAAWC,MAAyB;QAC3C,kHAAkH;QAClH,IAAIN,gBAAgBI,aAAaE,WAAWF,WAAW;YACrD,MAAM,IAAIG,MAAM;QAClB;QACAP,YAAYQ,YAAY,CAACF;QACzBJ,aAAa;IACf;IAEA,MAAMO,cAAc;QAClBP,aAAa;IACf;IAEA,6GAA6G;IAC7G,MAAMQ,eAAe;QACnBV,wBAAAA,kCAAAA,YAAaW,KAAK;QAClBT,aAAa;IACf;IAEA,6FAA6F;IAC7F,kHAAkH;IAClH,MAAMU,iBAAiB;IACrB,cAAc,GAChB;IAEA,qBACE,KAAChB;QAAOO,QAAQA;QAAQU,SAASD;QAAgBE,YAAY;YAAEC,UAAUL;QAAa;QAAGM,eAAY;kBAElGhB,6BACC,KAACF;YACCmB,eAAejB,YAAYkB,IAAI;YAC/BC,eAAenB,YAAYmB,aAAa;YACxCC,QAAQf;YACRQ,SAASJ;;;AAKnB,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n// 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 { ReactElement, useState } from 'react';\nimport { Drawer, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { usePanelEditor } from '../../context';\nimport { PanelEditorForm } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = (): ReactElement => {\n  const panelEditor = usePanelEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  function handleSave(values: PanelEditorValues): void {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelEditor === undefined || values === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelEditor.applyChanges(values);\n    setIsClosing(true);\n  }\n\n  const handleClose = (): void => {\n    setIsClosing(true);\n  };\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state\n  const handleExited = (): void => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.\n  // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up\n  const handleClickOut = (): void => {\n    /* do nothing */\n  };\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClickOut} SlideProps={{ onExited: handleExited }} data-testid=\"panel-editor\">\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor && (\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <PanelEditorForm\n            initialAction={panelEditor.mode}\n            initialValues={panelEditor.initialValues}\n            onSave={handleSave}\n            onClose={handleClose}\n          />\n        </ErrorBoundary>\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useState","Drawer","ErrorAlert","ErrorBoundary","usePanelEditor","PanelEditorForm","PanelDrawer","panelEditor","isClosing","setIsClosing","isOpen","undefined","handleSave","values","Error","applyChanges","handleClose","handleExited","close","handleClickOut","onClose","SlideProps","onExited","data-testid","FallbackComponent","initialAction","mode","initialValues","onSave"],"mappings":"AAAA,uDAAuD,GACvD,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,EAAEC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAE3E,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,eAAe,QAAQ,oBAAoB;AAEpD;;CAEC,GACD,OAAO,MAAMC,cAAc;IACzB,MAAMC,cAAcH;IAEpB,iHAAiH;IACjH,MAAM,CAACI,WAAWC,aAAa,GAAGT,SAAS;IAE3C,oEAAoE;IACpE,MAAMU,SAASH,gBAAgBI,aAAaH,cAAc;IAE1D,SAASI,WAAWC,MAAyB;QAC3C,kHAAkH;QAClH,IAAIN,gBAAgBI,aAAaE,WAAWF,WAAW;YACrD,MAAM,IAAIG,MAAM;QAClB;QACAP,YAAYQ,YAAY,CAACF;QACzBJ,aAAa;IACf;IAEA,MAAMO,cAAc;QAClBP,aAAa;IACf;IAEA,6GAA6G;IAC7G,MAAMQ,eAAe;QACnBV,aAAaW;QACbT,aAAa;IACf;IAEA,6FAA6F;IAC7F,kHAAkH;IAClH,MAAMU,iBAAiB;IACrB,cAAc,GAChB;IAEA,qBACE,KAAClB;QAAOS,QAAQA;QAAQU,SAASD;QAAgBE,YAAY;YAAEC,UAAUL;QAAa;QAAGM,eAAY;kBAElGhB,6BACC,KAACJ;YAAcqB,mBAAmBtB;sBAChC,cAAA,KAACG;gBACCoB,eAAelB,YAAYmB,IAAI;gBAC/BC,eAAepB,YAAYoB,aAAa;gBACxCC,QAAQhB;gBACRQ,SAASJ;;;;AAMrB,EAAE"}

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -149,23 +149,19 @@ export function PanelEditorForm(props) {
                             children: /*#__PURE__*/ _jsx(Controller, {
                                 control: form.control,
                                 name: "panelDefinition.spec.display.name",
-                                render: ({ field, fieldState })=>{
-                                    var _fieldState_error;
-                                    var _field_value;
-                                    return /*#__PURE__*/ _jsx(TextField, {
+                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                         ...field,
                                         required: true,
                                         fullWidth: true,
                                         label: "Name",
                                         error: !!fieldState.error,
-                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                        value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
+                                        helperText: fieldState.error?.message,
+                                        value: field.value ?? '',
                                         onChange: (event)=>{
                                             field.onChange(event);
                                             setName(event.target.value);
                                         }
-                                    });
-                                }
+                                    })
                             })
                         }),
                         /*#__PURE__*/ _jsx(Grid, {
@@ -174,28 +170,22 @@ export function PanelEditorForm(props) {
                             children: /*#__PURE__*/ _jsx(Controller, {
                                 control: form.control,
                                 name: "groupId",
-                                render: ({ field, fieldState })=>{
-                                    var _fieldState_error;
-                                    return /*#__PURE__*/ _jsx(TextField, {
+                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                         select: true,
                                         ...field,
                                         required: true,
                                         fullWidth: true,
                                         label: "Group",
                                         error: !!fieldState.error,
-                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: fieldState.error?.message,
                                         onChange: (event)=>{
                                             field.onChange(event);
                                         },
-                                        children: panelGroups.map((panelGroup, index)=>{
-                                            var _panelGroup_title;
-                                            return /*#__PURE__*/ _jsx(MenuItem, {
+                                        children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ _jsx(MenuItem, {
                                                 value: panelGroup.id,
-                                                children: (_panelGroup_title = panelGroup.title) !== null && _panelGroup_title !== void 0 ? _panelGroup_title : `Group ${index + 1}`
-                                            }, panelGroup.id);
-                                        })
-                                    });
-                                }
+                                                children: panelGroup.title ?? `Group ${index + 1}`
+                                            }, panelGroup.id))
+                                    })
                             })
                         }),
                         /*#__PURE__*/ _jsx(Grid, {
@@ -204,22 +194,18 @@ export function PanelEditorForm(props) {
                             children: /*#__PURE__*/ _jsx(Controller, {
                                 control: form.control,
                                 name: "panelDefinition.spec.display.description",
-                                render: ({ field, fieldState })=>{
-                                    var _fieldState_error;
-                                    var _field_value;
-                                    return /*#__PURE__*/ _jsx(TextField, {
+                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                         ...field,
                                         fullWidth: true,
                                         label: "Description",
                                         error: !!fieldState.error,
-                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                        value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
+                                        helperText: fieldState.error?.message,
+                                        value: field.value ?? '',
                                         onChange: (event)=>{
                                             field.onChange(event);
                                             setDescription(event.target.value);
                                         }
-                                    });
-                                }
+                                    })
                             })
                         }),
                         /*#__PURE__*/ _jsx(Grid, {
@@ -228,10 +214,7 @@ export function PanelEditorForm(props) {
                             children: /*#__PURE__*/ _jsx(Controller, {
                                 control: form.control,
                                 name: "panelDefinition.spec.plugin.kind",
-                                render: ({ field, fieldState })=>{
-                                    var _pluginEditor_error, _fieldState_error;
-                                    var _pluginEditor_error_message;
-                                    return /*#__PURE__*/ _jsx(PluginKindSelect, {
+                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(PluginKindSelect, {
                                         ...field,
                                         pluginTypes: [
                                             'Panel'
@@ -241,7 +224,7 @@ export function PanelEditorForm(props) {
                                         label: "Type",
                                         disabled: pluginEditor.isLoading,
                                         error: !!pluginEditor.error || !!fieldState.error,
-                                        helperText: (_pluginEditor_error_message = (_pluginEditor_error = pluginEditor.error) === null || _pluginEditor_error === void 0 ? void 0 : _pluginEditor_error.message) !== null && _pluginEditor_error_message !== void 0 ? _pluginEditor_error_message : (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: pluginEditor.error?.message ?? fieldState.error?.message,
                                         value: {
                                             type: 'Panel',
                                             kind: field.value
@@ -250,8 +233,7 @@ export function PanelEditorForm(props) {
                                             field.onChange(event.kind);
                                             pluginEditor.onSelectionChange(event);
                                         }
-                                    });
-                                }
+                                    })
                             })
                         }),
                         /*#__PURE__*/ _jsxs(Grid, {

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 { ReactElement, 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): ReactElement {\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(): void {\n    if (JSON.stringify(initialValues) !== JSON.stringify(form.getValues())) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  const handlePanelDefinitionChange = (nextPanelDefStr: string): void => {\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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"}
+{"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 { ReactElement, 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): ReactElement {\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(): void {\n    if (JSON.stringify(initialValues) !== JSON.stringify(form.getValues())) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  const handlePanelDefinitionChange = (nextPanelDefStr: string): void => {\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":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAC1D,SAASC,GAAG,EAAEC,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,SAAS,EAAEC,UAAU,QAAQ,gBAAgB;AAE1F,SAASC,gCAAgC,EAAEC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AACrG,SACEC,gBAAgB,EAChBC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,aAAa,EACbC,oBAAoB,QACf,4BAA4B;AACnC,SAASC,UAAU,EAAEC,YAAY,EAAiBC,OAAO,EAAEC,QAAQ,QAAQ,kBAAkB;AAC7F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,kBAAkB,QAAQ,gBAAgB;AACnD,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,cAAc,QAAQ,mBAAmB;AASlD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGJ;IAC1D,MAAMK,cAAcT;IACpB,MAAM,EAAEU,eAAe,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,SAAS,EAAEC,kBAAkB,EAAE,GACrGd,eAAeG,cAAcK,eAAe;IAC9C,MAAM,EAAEO,MAAM,EAAE,GAAGP,gBAAgBQ,IAAI;IACvC,MAAM,CAACC,uBAAuBC,uBAAuB,GAAG1C,SAAkB;IAE1E,oFAAoF;IACpF,MAAM2C,eAAe/B,gBAAgB;QACnCgC,aAAa;YAAC;SAAQ;QACtBC,OAAO;YAAEC,WAAW;gBAAEC,MAAMR,OAAOQ,IAAI;gBAAEC,MAAM;YAAQ;YAAGR,MAAMD,OAAOC,IAAI;QAAC;QAC5ES,UAAU,CAACV;YACTW,KAAKC,QAAQ,CAAC,+BAA+B;gBAAEJ,MAAMR,OAAOO,SAAS,CAACC,IAAI;gBAAEP,MAAMD,OAAOC,IAAI;YAAC;YAC9FH,UAAU;gBACRU,MAAMR,OAAOO,SAAS,CAACC,IAAI;gBAC3BP,MAAMD,OAAOC,IAAI;YACnB;QACF;QACAY,yBAAyB,CAACC;YACxBjB,WAAWkB,WAAWD;QACxB;IACF;IAEA,MAAME,cAAczC,eAAec,eAAe;IAClD,MAAM4B,aAAazC,cAAca,eAAe;IAEhD,MAAM,EAAE6B,iBAAiB,EAAE,GAAGzC;IAC9B,MAAMkC,OAAO/B,QAA2B;QACtCuC,UAAUrC,YAAYoC;QACtBE,MAAM;QACNC,eAAejC;IACjB;IAEA,MAAMkC,QAAQzC,SAAS;QAAE0C,SAASZ,KAAKY,OAAO;QAAEC,MAAM;IAA6B;IACnFhE,UAAU;QACRoC,SAAS0B;IACX,GAAG;QAAC1B;QAAU0B;KAAM;IAEpB,MAAMG,cAAgD,CAACC;QACrDpC,OAAOoC;IACT;IAEA,oDAAoD;IACpD,4CAA4C;IAC5C,uDAAuD;IACvD,gDAAgD;IAChD,SAASC;QACP,IAAIC,KAAKC,SAAS,CAACzC,mBAAmBwC,KAAKC,SAAS,CAAClB,KAAKmB,SAAS,KAAK;YACtE3B,uBAAuB;QACzB,OAAO;YACLZ;QACF;IACF;IAEA,MAAMwC,8BAA8B,CAACC;QACnC,MAAMC,eAAgCL,KAAKM,KAAK,CAACF;QACjD,MAAM,EAAExB,MAAM2B,UAAU,EAAElC,MAAMmC,UAAU,EAAE,GAAGH,aAAahC,IAAI,CAACD,MAAM;QACvE,6EAA6E;QAC7E,IACEP,gBAAgBQ,IAAI,CAACD,MAAM,CAACQ,IAAI,KAAK2B,cACrCP,KAAKC,SAAS,CAACpC,gBAAgBQ,IAAI,CAACD,MAAM,CAACC,IAAI,MAAM2B,KAAKC,SAAS,CAACO,aACpE;YACAhC,aAAaiC,wBAAwB;QACvC;QACAtC,mBAAmBkC;IACrB;IAEA,qBACE,MAACtD;QAAc,GAAGgC,IAAI;;0BACpB,MAACjD;gBACC4E,IAAI;oBACFC,SAAS;oBACTC,YAAY;oBACZC,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC,GAAG;oBACrCC,cAAc,CAACF,QAAU,CAAC,UAAU,EAAEA,MAAMG,OAAO,CAACC,OAAO,CAAC,CAAC;gBAC/D;;kCAEA,MAAC9E;wBAAW+E,SAAQ;;4BAAM/B;4BAAY;;;kCACtC,MAAClD;wBAAMkF,WAAU;wBAAML,SAAS;wBAAGM,YAAW;;0CAC5C,KAACtF;gCAAOoF,SAAQ;gCAAYG,UAAU,CAACvC,KAAKwC,SAAS,CAACC,OAAO;gCAAEC,SAAS1C,KAAK2C,YAAY,CAAC7B;0CACvFR;;0CAEH,KAACtD;gCAAO4F,OAAM;gCAAYR,SAAQ;gCAAWM,SAAS1B;0CAAc;;;;;;0BAKxE,KAACjE;gBAAI8F,IAAIC;gBAAmBnB,IAAI;oBAAEoB,MAAM;oBAAGC,WAAW;oBAAUlB,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC;gBAAG;0BACnG,cAAA,MAAC/E;oBAAKgG,SAAS;oBAACjB,SAAS;;sCACvB,KAAC/E;4BAAKiG,IAAI;4BAACC,IAAI;sCACb,cAAA,KAACpF;gCACC6C,SAASZ,KAAKY,OAAO;gCACrBC,MAAK;gCACLuC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAAClG;wCACE,GAAGiG,KAAK;wCACTE,QAAQ;wCACRC,SAAS;wCACTC,OAAM;wCACNC,OAAO,CAAC,CAACJ,WAAWI,KAAK;wCACzBC,YAAYL,WAAWI,KAAK,EAAEE;wCAC9BjE,OAAO0D,MAAM1D,KAAK,IAAI;wCACtBI,UAAU,CAAC8D;4CACTR,MAAMtD,QAAQ,CAAC8D;4CACf9E,QAAQ8E,MAAMC,MAAM,CAACnE,KAAK;wCAC5B;;;;sCAKR,KAAC1C;4BAAKiG,IAAI;4BAACC,IAAI;sCACb,cAAA,KAACpF;gCACC6C,SAASZ,KAAKY,OAAO;gCACrBC,MAAK;gCACLuC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAAClG;wCACC2G,MAAM;wCACL,GAAGV,KAAK;wCACTE,QAAQ;wCACRC,SAAS;wCACTC,OAAM;wCACNC,OAAO,CAAC,CAACJ,WAAWI,KAAK;wCACzBC,YAAYL,WAAWI,KAAK,EAAEE;wCAC9B7D,UAAU,CAAC8D;4CACTR,MAAMtD,QAAQ,CAAC8D;wCACjB;kDAEChF,YAAYmF,GAAG,CAAC,CAACC,YAAYC,sBAC5B,KAAChH;gDAA6ByC,OAAOsE,WAAWpB,EAAE;0DAC/CoB,WAAWE,KAAK,IAAI,CAAC,MAAM,EAAED,QAAQ,EAAE,CAAC;+CAD5BD,WAAWpB,EAAE;;;;sCAQtC,KAAC5F;4BAAKiG,IAAI;4BAACC,IAAI;sCACb,cAAA,KAACpF;gCACC6C,SAASZ,KAAKY,OAAO;gCACrBC,MAAK;gCACLuC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAAClG;wCACE,GAAGiG,KAAK;wCACTG,SAAS;wCACTC,OAAM;wCACNC,OAAO,CAAC,CAACJ,WAAWI,KAAK;wCACzBC,YAAYL,WAAWI,KAAK,EAAEE;wCAC9BjE,OAAO0D,MAAM1D,KAAK,IAAI;wCACtBI,UAAU,CAAC8D;4CACTR,MAAMtD,QAAQ,CAAC8D;4CACf7E,eAAe6E,MAAMC,MAAM,CAACnE,KAAK;wCACnC;;;;sCAKR,KAAC1C;4BAAKiG,IAAI;4BAACC,IAAI;sCACb,cAAA,KAACpF;gCACC6C,SAASZ,KAAKY,OAAO;gCACrBC,MAAK;gCACLuC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAAC7F;wCACE,GAAG4F,KAAK;wCACT3D,aAAa;4CAAC;yCAAQ;wCACtB6D,QAAQ;wCACRC,SAAS;wCACTC,OAAM;wCACNlB,UAAU9C,aAAa2E,SAAS;wCAChCV,OAAO,CAAC,CAACjE,aAAaiE,KAAK,IAAI,CAAC,CAACJ,WAAWI,KAAK;wCACjDC,YAAYlE,aAAaiE,KAAK,EAAEE,WAAWN,WAAWI,KAAK,EAAEE;wCAC7DjE,OAAO;4CAAEG,MAAM;4CAASD,MAAMwD,MAAM1D,KAAK;wCAAC;wCAC1CI,UAAU,CAAC8D;4CACTR,MAAMtD,QAAQ,CAAC8D,MAAMhE,IAAI;4CACzBJ,aAAa4E,iBAAiB,CAACR;wCACjC;;;;sCAKR,MAAC5G;4BAAKiG,IAAI;4BAACC,IAAI;;8CACb,KAAC9F;oCAAW+E,SAAQ;oCAAKkC,cAAc;8CAAG;;8CAG1C,KAAC9G;oCAAc+G,mBAAmBhH;8CAChC,cAAA,KAACc;wCAAaS,iBAAiBA;;;;;sCAGnC,KAAC7B;4BAAKiG,IAAI;4BAACC,IAAI;sCACb,cAAA,KAAC3F;gCAAc+G,mBAAmBhH;0CAChC,cAAA,KAACI;oCACCiD,SAASZ,KAAKY,OAAO;oCACrB9B,iBAAiBA;oCACjB0F,cAAcpD;oCACdqD,iBAAiB,CAACC;wCAChBxF,WAAWwF;oCACb;oCACAC,oBAAoB,CAACrF;wCACnBG,aAAamF,YAAY,CAACtF;oCAC5B;;;;;;;0BAMV,KAAChC;gBACCuH,aAAY;gBACZC,QAAQvF;gBACRwF,UAAU;oBACRvF,uBAAuB;gBACzB;gBACAwF,kBAAkB;oBAChBxF,uBAAuB;oBACvBZ;gBACF;;;;AAIR;AAEA;;CAEC,GACD,OAAO,MAAMkE,oBAAoB,oBAAoB"}

package/dist/components/PanelDrawer/PanelPreview.js

@@ -24,15 +24,14 @@ export function PanelPreview({ panelDefinition }) {
         width = boxRef.current.getBoundingClientRect().width;
     }
     const suggestedStepMs = useSuggestedStepMs(width);
-    const { data: plugin, isLoading } = usePlugin('Panel', panelDefinition.spec.plugin.kind);
-    if (isLoading) {
+    const { data: plugin, isPending } = usePlugin('Panel', panelDefinition.spec.plugin.kind);
+    if (isPending) {
         return null;
     }
     if (panelDefinition.spec.plugin.kind === '') {
         return null;
     }
-    var _panelDefinition_spec_queries;
-    const queries = (_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : [];
+    const queries = panelDefinition.spec.queries ?? [];
     // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
     const definitions = queries.length ? queries.map((query)=>{
         return {
@@ -47,7 +46,7 @@ export function PanelPreview({ panelDefinition }) {
             definitions: definitions,
             options: {
                 suggestedStepMs,
-                ...plugin === null || plugin === void 0 ? void 0 : plugin.queryOptions
+                ...plugin?.queryOptions
             },
             children: /*#__PURE__*/ _jsx(Panel, {
                 definition: panelDefinition

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.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 { ReactElement, useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { Panel } from '../Panel';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>): ReactElement | null {\n  const boxRef = useRef<HTMLDivElement>(null);\n  let width = PANEL_PREVIEW_DEFAULT_WIDTH;\n  if (boxRef.current !== null) {\n    width = boxRef.current.getBoundingClientRect().width;\n  }\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  const { data: plugin, isLoading } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n  if (isLoading) {\n    return null;\n  }\n\n  if (panelDefinition.spec.plugin.kind === '') {\n    return null;\n  }\n\n  const queries = panelDefinition.spec.queries ?? [];\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  return (\n    <Box ref={boxRef} height={PANEL_PREVIEW_HEIGHT}>\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, ...plugin?.queryOptions }}>\n        <Panel definition={panelDefinition} />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["useRef","Box","DataQueriesProvider","usePlugin","useSuggestedStepMs","Panel","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","current","getBoundingClientRect","suggestedStepMs","data","plugin","isLoading","spec","kind","queries","definitions","length","map","query","ref","height","options","queryOptions","definition"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,MAAM,QAAQ,QAAQ;AAC7C,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,mBAAmB,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAE/F,SAASC,KAAK,QAAQ,WAAW;AAEjC,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAEpC,OAAO,SAASC,aAAa,EAAEC,eAAe,EAA8C;IAC1F,MAAMC,SAASV,OAAuB;IACtC,IAAIW,QAAQJ;IACZ,IAAIG,OAAOE,OAAO,KAAK,MAAM;QAC3BD,QAAQD,OAAOE,OAAO,CAACC,qBAAqB,GAAGF,KAAK;IACtD;IACA,MAAMG,kBAAkBV,mBAAmBO;IAE3C,MAAM,EAAEI,MAAMC,MAAM,EAAEC,SAAS,EAAE,GAAGd,UAAU,SAASM,gBAAgBS,IAAI,CAACF,MAAM,CAACG,IAAI;IACvF,IAAIF,WAAW;QACb,OAAO;IACT;IAEA,IAAIR,gBAAgBS,IAAI,CAACF,MAAM,CAACG,IAAI,KAAK,IAAI;QAC3C,OAAO;IACT;QAEgBV;IAAhB,MAAMW,UAAUX,CAAAA,gCAAAA,gBAAgBS,IAAI,CAACE,OAAO,cAA5BX,2CAAAA,gCAAgC,EAAE;IAElD,2DAA2D;IAC3D,MAAMY,cAAcD,QAAQE,MAAM,GAC9BF,QAAQG,GAAG,CAAC,CAACC;QACX,OAAO;YACLL,MAAMK,MAAMN,IAAI,CAACF,MAAM,CAACG,IAAI;YAC5BD,MAAMM,MAAMN,IAAI,CAACF,MAAM,CAACE,IAAI;QAC9B;IACF,KACA,EAAE;IAEN,qBACE,KAACjB;QAAIwB,KAAKf;QAAQgB,QAAQpB;kBACxB,cAAA,KAACJ;YAAoBmB,aAAaA;YAAaM,SAAS;gBAAEb;mBAAoBE,mBAAAA,6BAAAA,OAAQY,YAAY,AAAvB;YAAwB;sBACjG,cAAA,KAACvB;gBAAMwB,YAAYpB;;;;AAI3B"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.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 { ReactElement, useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { Panel } from '../Panel';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>): ReactElement | null {\n  const boxRef = useRef<HTMLDivElement>(null);\n  let width = PANEL_PREVIEW_DEFAULT_WIDTH;\n  if (boxRef.current !== null) {\n    width = boxRef.current.getBoundingClientRect().width;\n  }\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  const { data: plugin, isPending } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n  if (isPending) {\n    return null;\n  }\n\n  if (panelDefinition.spec.plugin.kind === '') {\n    return null;\n  }\n\n  const queries = panelDefinition.spec.queries ?? [];\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  return (\n    <Box ref={boxRef} height={PANEL_PREVIEW_HEIGHT}>\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, ...plugin?.queryOptions }}>\n        <Panel definition={panelDefinition} />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["useRef","Box","DataQueriesProvider","usePlugin","useSuggestedStepMs","Panel","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","current","getBoundingClientRect","suggestedStepMs","data","plugin","isPending","spec","kind","queries","definitions","length","map","query","ref","height","options","queryOptions","definition"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,MAAM,QAAQ,QAAQ;AAC7C,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,mBAAmB,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAE/F,SAASC,KAAK,QAAQ,WAAW;AAEjC,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAEpC,OAAO,SAASC,aAAa,EAAEC,eAAe,EAA8C;IAC1F,MAAMC,SAASV,OAAuB;IACtC,IAAIW,QAAQJ;IACZ,IAAIG,OAAOE,OAAO,KAAK,MAAM;QAC3BD,QAAQD,OAAOE,OAAO,CAACC,qBAAqB,GAAGF,KAAK;IACtD;IACA,MAAMG,kBAAkBV,mBAAmBO;IAE3C,MAAM,EAAEI,MAAMC,MAAM,EAAEC,SAAS,EAAE,GAAGd,UAAU,SAASM,gBAAgBS,IAAI,CAACF,MAAM,CAACG,IAAI;IACvF,IAAIF,WAAW;QACb,OAAO;IACT;IAEA,IAAIR,gBAAgBS,IAAI,CAACF,MAAM,CAACG,IAAI,KAAK,IAAI;QAC3C,OAAO;IACT;IAEA,MAAMC,UAAUX,gBAAgBS,IAAI,CAACE,OAAO,IAAI,EAAE;IAElD,2DAA2D;IAC3D,MAAMC,cAAcD,QAAQE,MAAM,GAC9BF,QAAQG,GAAG,CAAC,CAACC;QACX,OAAO;YACLL,MAAMK,MAAMN,IAAI,CAACF,MAAM,CAACG,IAAI;YAC5BD,MAAMM,MAAMN,IAAI,CAACF,MAAM,CAACE,IAAI;QAC9B;IACF,KACA,EAAE;IAEN,qBACE,KAACjB;QAAIwB,KAAKf;QAAQgB,QAAQpB;kBACxB,cAAA,KAACJ;YAAoBmB,aAAaA;YAAaM,SAAS;gBAAEb;gBAAiB,GAAGE,QAAQY,YAAY;YAAC;sBACjG,cAAA,KAACvB;gBAAMwB,YAAYpB;;;;AAI3B"}

package/dist/components/PanelGroupDialog/PanelGroupDialog.js

@@ -25,7 +25,7 @@ import { PanelGroupEditorForm, panelGroupEditorFormId } from './PanelGroupEditor
     const handleClose = ()=>setIsClosing(true);
     // Don't call close on the store until the Dialog has completely transitioned out
     const handleExited = ()=>{
-        panelGroupEditor === null || panelGroupEditor === void 0 ? void 0 : panelGroupEditor.close();
+        panelGroupEditor?.close();
         setIsClosing(false);
     };
     // Dialog is open if we have a model and we're not transitioning out

package/dist/components/PanelGroupDialog/PanelGroupDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.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 { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { ReactElement, useState } from 'react';\nimport { usePanelGroupEditor } from '../../context';\nimport { PanelGroupEditorForm, panelGroupEditorFormId, PanelGroupEditorFormProps } from './PanelGroupEditorForm';\n\n/**\n * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.\n */\nexport function PanelGroupDialog(): ReactElement {\n  const panelGroupEditor = usePanelGroupEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = (): void => setIsClosing(true);\n\n  // Don't call close on the store until the Dialog has completely transitioned out\n  const handleExited = (): void => {\n    panelGroupEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Dialog is open if we have a model and we're not transitioning out\n  const isOpen = panelGroupEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelGroupEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelGroupEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelGroupEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Dialog open={isOpen} TransitionProps={{ onExited: handleExited }}>\n      {panelGroupEditor !== undefined && (\n        <>\n          <DialogTitle>{panelGroupEditor.mode} Panel Group</DialogTitle>\n          <IconButton\n            aria-label=\"Close\"\n            onClick={panelGroupEditor.close}\n            sx={(theme) => ({\n              position: 'absolute',\n              top: theme.spacing(0.5),\n              right: theme.spacing(0.5),\n            })}\n          >\n            <CloseIcon />\n          </IconButton>\n          <DialogContent dividers sx={{ width: '500px' }}>\n            <PanelGroupEditorForm initialValues={panelGroupEditor.initialValues} onSubmit={handleSubmit} />\n          </DialogContent>\n          <DialogActions>\n            <Button variant=\"contained\" type=\"submit\" form={panelGroupEditorFormId}>\n              {panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'}\n            </Button>\n            <Button variant=\"outlined\" color=\"secondary\" onClick={panelGroupEditor.close}>\n              Cancel\n            </Button>\n          </DialogActions>\n        </>\n      )}\n    </Dialog>\n  );\n}\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useState","usePanelGroupEditor","PanelGroupEditorForm","panelGroupEditorFormId","PanelGroupDialog","panelGroupEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","open","TransitionProps","onExited","mode","aria-label","onClick","sx","theme","position","top","spacing","right","dividers","width","initialValues","onSubmit","variant","type","form","color"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,gBAAgB;AACtG,OAAOC,eAAe,wBAAwB;AAC9C,SAAuBC,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,mBAAmB,QAAQ,gBAAgB;AACpD,SAASC,oBAAoB,EAAEC,sBAAsB,QAAmC,yBAAyB;AAEjH;;CAEC,GACD,OAAO,SAASC;IACd,MAAMC,mBAAmBJ;IAEzB,iHAAiH;IACjH,MAAM,CAACK,WAAWC,aAAa,GAAGP,SAAS;IAC3C,MAAMQ,cAAc,IAAYD,aAAa;IAE7C,iFAAiF;IACjF,MAAME,eAAe;QACnBJ,6BAAAA,uCAAAA,iBAAkBK,KAAK;QACvBH,aAAa;IACf;IAEA,oEAAoE;IACpE,MAAMI,SAASN,qBAAqBO,aAAaN,cAAc;IAE/D,MAAMO,eAAsD,CAACC;QAC3D,kHAAkH;QAClH,IAAIT,qBAAqBO,WAAW;YAClC,MAAM,IAAIG,MAAM;QAClB;QACAV,iBAAiBW,YAAY,CAACF;QAC9BN;IACF;IAEA,qBACE,KAACd;QAAOuB,MAAMN;QAAQO,iBAAiB;YAAEC,UAAUV;QAAa;kBAC7DJ,qBAAqBO,2BACpB;;8BACE,MAACjB;;wBAAaU,iBAAiBe,IAAI;wBAAC;;;8BACpC,KAAC3B;oBACC4B,cAAW;oBACXC,SAASjB,iBAAiBK,KAAK;oBAC/Ba,IAAI,CAACC,QAAW,CAAA;4BACdC,UAAU;4BACVC,KAAKF,MAAMG,OAAO,CAAC;4BACnBC,OAAOJ,MAAMG,OAAO,CAAC;wBACvB,CAAA;8BAEA,cAAA,KAAC5B;;8BAEH,KAACH;oBAAciC,QAAQ;oBAACN,IAAI;wBAAEO,OAAO;oBAAQ;8BAC3C,cAAA,KAAC5B;wBAAqB6B,eAAe1B,iBAAiB0B,aAAa;wBAAEC,UAAUnB;;;8BAEjF,MAAChB;;sCACC,KAACC;4BAAOmC,SAAQ;4BAAYC,MAAK;4BAASC,MAAMhC;sCAC7CE,iBAAiBe,IAAI,KAAK,SAAS,UAAU;;sCAEhD,KAACtB;4BAAOmC,SAAQ;4BAAWG,OAAM;4BAAYd,SAASjB,iBAAiBK,KAAK;sCAAE;;;;;;;AAQ1F"}
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.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 { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { ReactElement, useState } from 'react';\nimport { usePanelGroupEditor } from '../../context';\nimport { PanelGroupEditorForm, panelGroupEditorFormId, PanelGroupEditorFormProps } from './PanelGroupEditorForm';\n\n/**\n * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.\n */\nexport function PanelGroupDialog(): ReactElement {\n  const panelGroupEditor = usePanelGroupEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = (): void => setIsClosing(true);\n\n  // Don't call close on the store until the Dialog has completely transitioned out\n  const handleExited = (): void => {\n    panelGroupEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Dialog is open if we have a model and we're not transitioning out\n  const isOpen = panelGroupEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelGroupEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelGroupEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelGroupEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Dialog open={isOpen} TransitionProps={{ onExited: handleExited }}>\n      {panelGroupEditor !== undefined && (\n        <>\n          <DialogTitle>{panelGroupEditor.mode} Panel Group</DialogTitle>\n          <IconButton\n            aria-label=\"Close\"\n            onClick={panelGroupEditor.close}\n            sx={(theme) => ({\n              position: 'absolute',\n              top: theme.spacing(0.5),\n              right: theme.spacing(0.5),\n            })}\n          >\n            <CloseIcon />\n          </IconButton>\n          <DialogContent dividers sx={{ width: '500px' }}>\n            <PanelGroupEditorForm initialValues={panelGroupEditor.initialValues} onSubmit={handleSubmit} />\n          </DialogContent>\n          <DialogActions>\n            <Button variant=\"contained\" type=\"submit\" form={panelGroupEditorFormId}>\n              {panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'}\n            </Button>\n            <Button variant=\"outlined\" color=\"secondary\" onClick={panelGroupEditor.close}>\n              Cancel\n            </Button>\n          </DialogActions>\n        </>\n      )}\n    </Dialog>\n  );\n}\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useState","usePanelGroupEditor","PanelGroupEditorForm","panelGroupEditorFormId","PanelGroupDialog","panelGroupEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","open","TransitionProps","onExited","mode","aria-label","onClick","sx","theme","position","top","spacing","right","dividers","width","initialValues","onSubmit","variant","type","form","color"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,gBAAgB;AACtG,OAAOC,eAAe,wBAAwB;AAC9C,SAAuBC,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,mBAAmB,QAAQ,gBAAgB;AACpD,SAASC,oBAAoB,EAAEC,sBAAsB,QAAmC,yBAAyB;AAEjH;;CAEC,GACD,OAAO,SAASC;IACd,MAAMC,mBAAmBJ;IAEzB,iHAAiH;IACjH,MAAM,CAACK,WAAWC,aAAa,GAAGP,SAAS;IAC3C,MAAMQ,cAAc,IAAYD,aAAa;IAE7C,iFAAiF;IACjF,MAAME,eAAe;QACnBJ,kBAAkBK;QAClBH,aAAa;IACf;IAEA,oEAAoE;IACpE,MAAMI,SAASN,qBAAqBO,aAAaN,cAAc;IAE/D,MAAMO,eAAsD,CAACC;QAC3D,kHAAkH;QAClH,IAAIT,qBAAqBO,WAAW;YAClC,MAAM,IAAIG,MAAM;QAClB;QACAV,iBAAiBW,YAAY,CAACF;QAC9BN;IACF;IAEA,qBACE,KAACd;QAAOuB,MAAMN;QAAQO,iBAAiB;YAAEC,UAAUV;QAAa;kBAC7DJ,qBAAqBO,2BACpB;;8BACE,MAACjB;;wBAAaU,iBAAiBe,IAAI;wBAAC;;;8BACpC,KAAC3B;oBACC4B,cAAW;oBACXC,SAASjB,iBAAiBK,KAAK;oBAC/Ba,IAAI,CAACC,QAAW,CAAA;4BACdC,UAAU;4BACVC,KAAKF,MAAMG,OAAO,CAAC;4BACnBC,OAAOJ,MAAMG,OAAO,CAAC;wBACvB,CAAA;8BAEA,cAAA,KAAC5B;;8BAEH,KAACH;oBAAciC,QAAQ;oBAACN,IAAI;wBAAEO,OAAO;oBAAQ;8BAC3C,cAAA,KAAC5B;wBAAqB6B,eAAe1B,iBAAiB0B,aAAa;wBAAEC,UAAUnB;;;8BAEjF,MAAChB;;sCACC,KAACC;4BAAOmC,SAAQ;4BAAYC,MAAK;4BAASC,MAAMhC;sCAC7CE,iBAAiBe,IAAI,KAAK,SAAS,UAAU;;sCAEhD,KAACtB;4BAAOmC,SAAQ;4BAAWG,OAAM;4BAAYd,SAASjB,iBAAiBK,KAAK;sCAAE;;;;;;;AAQ1F"}

package/dist/components/QuerySummaryTable/QuerySummaryTable.js

@@ -24,7 +24,7 @@ export function QuerySummaryTable(props) {
     // for displaying a summary of recent query results
     const queryClient = useQueryClient();
     const queries = queryClient.getQueryCache().findAll();
-    const activeQueries = queries.filter((query)=>query.state.status === 'loading');
+    const activeQueries = queries.filter((query)=>query.state.status === 'pending');
     const completedQueries = queries.filter((query)=>query.state.status === 'success');
     const querySummary = useActiveTimeSeriesQueries();
     if (datasourceClient.isLoading === true) {
@@ -32,12 +32,10 @@ export function QuerySummaryTable(props) {
     }
     const warnings = [];
     querySummary.forEach((query)=>{
-        var _queryData_metadata;
         const queryData = query.state.data;
-        if (queryData && ((_queryData_metadata = queryData.metadata) === null || _queryData_metadata === void 0 ? void 0 : _queryData_metadata.notices)) {
-            var _queryData_metadata_notices_;
+        if (queryData && queryData.metadata?.notices) {
             const queryKey = query.queryKey;
-            const warningMessage = (_queryData_metadata_notices_ = queryData.metadata.notices[0]) === null || _queryData_metadata_notices_ === void 0 ? void 0 : _queryData_metadata_notices_.message;
+            const warningMessage = queryData.metadata.notices[0]?.message;
             if (warningMessage) {
                 warnings.push({
                     query: String(queryKey[0].spec.plugin.spec.query),

package/dist/components/QuerySummaryTable/QuerySummaryTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/QuerySummaryTable/QuerySummaryTable.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 {\n  Box,\n  Button,\n  Paper,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n  Stack,\n} from '@mui/material';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { TimeSeriesQueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { useActiveTimeSeriesQueries, useDatasourceClient, useTimeRange } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\n\nexport interface WarningDisplay {\n  query: string;\n  summary: string;\n}\n\nconst TABLE_MAX_WIDTH = 1000;\n\ninterface QuerySummaryTableProps {\n  showTotalQueries?: boolean;\n}\n\nexport function QuerySummaryTable(props: QuerySummaryTableProps): ReactElement | null {\n  const { showTotalQueries = true } = props;\n  const datasourceClient = useDatasourceClient({ kind: 'PrometheusDatasource' });\n  const { absoluteTimeRange } = useTimeRange();\n\n  // for displaying a summary of recent query results\n  const queryClient = useQueryClient();\n  const queries = queryClient.getQueryCache().findAll();\n  const activeQueries = queries.filter((query) => query.state.status === 'loading');\n  const completedQueries = queries.filter((query) => query.state.status === 'success');\n  const querySummary = useActiveTimeSeriesQueries();\n\n  if (datasourceClient.isLoading === true) {\n    return null;\n  }\n\n  const warnings: WarningDisplay[] = [];\n  querySummary.forEach((query) => {\n    const queryData = query.state.data;\n    if (queryData && queryData.metadata?.notices) {\n      const queryKey = query.queryKey as [TimeSeriesQueryDefinition<UnknownSpec>];\n      const warningMessage = queryData.metadata.notices[0]?.message;\n      if (warningMessage) {\n        warnings.push({\n          query: String(queryKey[0].spec.plugin.spec.query),\n          summary: warningMessage,\n        });\n      }\n    }\n  });\n\n  return (\n    <Stack\n      spacing={1}\n      mb={2}\n      sx={{\n        maxWidth: TABLE_MAX_WIDTH,\n      }}\n    >\n      <Box sx={{ p: 1 }}>\n        <Typography variant=\"h2\" mb={1}>\n          Query Summary\n        </Typography>\n        <TableContainer component={Paper}>\n          <Table size=\"small\" aria-label=\"query summary table\">\n            <TableHead>\n              <TableRow>\n                <TableCell>Queries Loading</TableCell>\n                <TableCell>Recent Time Series Queries</TableCell>\n                {showTotalQueries && <TableCell>Total Queries</TableCell>}\n                <TableCell>Start Time</TableCell>\n                <TableCell>End Time</TableCell>\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              <TableRow>\n                <TableCell>{activeQueries.length}</TableCell>\n                <TableCell>{querySummary.length}</TableCell>\n                {showTotalQueries && <TableCell>{completedQueries.length}</TableCell>}\n                <TableCell>{absoluteTimeRange.start.toString()}</TableCell>\n                <TableCell>{absoluteTimeRange.end.toString()}</TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </TableContainer>\n      </Box>\n\n      {warnings.length > 0 && (\n        <Box sx={{ p: 1, m: 0 }}>\n          <Typography variant=\"h3\" mb={1}>\n            Warnings\n          </Typography>\n          <TableContainer component={Paper} sx={{ mb: 2 }}>\n            <Table size=\"small\" aria-label=\"query warnings table\">\n              <TableHead>\n                <TableRow>\n                  <TableCell>Query</TableCell>\n                  <TableCell>Summary</TableCell>\n                </TableRow>\n              </TableHead>\n              <TableBody>\n                {warnings.map((details, idx) => {\n                  return (\n                    <TableRow key={idx}>\n                      <TableCell>{details.query}</TableCell>\n                      <TableCell>{details.summary}</TableCell>\n                    </TableRow>\n                  );\n                })}\n              </TableBody>\n            </Table>\n          </TableContainer>\n          <Button disabled variant=\"outlined\">\n            TODO: Action Button\n          </Button>\n        </Box>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Button","Paper","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","Stack","useQueryClient","useActiveTimeSeriesQueries","useDatasourceClient","useTimeRange","TABLE_MAX_WIDTH","QuerySummaryTable","props","showTotalQueries","datasourceClient","kind","absoluteTimeRange","queryClient","queries","getQueryCache","findAll","activeQueries","filter","query","state","status","completedQueries","querySummary","isLoading","warnings","forEach","queryData","data","metadata","notices","queryKey","warningMessage","message","push","String","spec","plugin","summary","spacing","mb","sx","maxWidth","p","variant","component","size","aria-label","length","start","toString","end","m","map","details","idx","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/QuerySummaryTable/QuerySummaryTable.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 {\n  Box,\n  Button,\n  Paper,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n  Stack,\n} from '@mui/material';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { TimeSeriesQueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { useActiveTimeSeriesQueries, useDatasourceClient, useTimeRange } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\n\nexport interface WarningDisplay {\n  query: string;\n  summary: string;\n}\n\nconst TABLE_MAX_WIDTH = 1000;\n\ninterface QuerySummaryTableProps {\n  showTotalQueries?: boolean;\n}\n\nexport function QuerySummaryTable(props: QuerySummaryTableProps): ReactElement | null {\n  const { showTotalQueries = true } = props;\n  const datasourceClient = useDatasourceClient({ kind: 'PrometheusDatasource' });\n  const { absoluteTimeRange } = useTimeRange();\n\n  // for displaying a summary of recent query results\n  const queryClient = useQueryClient();\n  const queries = queryClient.getQueryCache().findAll();\n  const activeQueries = queries.filter((query) => query.state.status === 'pending');\n  const completedQueries = queries.filter((query) => query.state.status === 'success');\n  const querySummary = useActiveTimeSeriesQueries();\n\n  if (datasourceClient.isLoading === true) {\n    return null;\n  }\n\n  const warnings: WarningDisplay[] = [];\n  querySummary.forEach((query) => {\n    const queryData = query.state.data;\n    if (queryData && queryData.metadata?.notices) {\n      const queryKey = query.queryKey as [TimeSeriesQueryDefinition<UnknownSpec>];\n      const warningMessage = queryData.metadata.notices[0]?.message;\n      if (warningMessage) {\n        warnings.push({\n          query: String(queryKey[0].spec.plugin.spec.query),\n          summary: warningMessage,\n        });\n      }\n    }\n  });\n\n  return (\n    <Stack\n      spacing={1}\n      mb={2}\n      sx={{\n        maxWidth: TABLE_MAX_WIDTH,\n      }}\n    >\n      <Box sx={{ p: 1 }}>\n        <Typography variant=\"h2\" mb={1}>\n          Query Summary\n        </Typography>\n        <TableContainer component={Paper}>\n          <Table size=\"small\" aria-label=\"query summary table\">\n            <TableHead>\n              <TableRow>\n                <TableCell>Queries Loading</TableCell>\n                <TableCell>Recent Time Series Queries</TableCell>\n                {showTotalQueries && <TableCell>Total Queries</TableCell>}\n                <TableCell>Start Time</TableCell>\n                <TableCell>End Time</TableCell>\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              <TableRow>\n                <TableCell>{activeQueries.length}</TableCell>\n                <TableCell>{querySummary.length}</TableCell>\n                {showTotalQueries && <TableCell>{completedQueries.length}</TableCell>}\n                <TableCell>{absoluteTimeRange.start.toString()}</TableCell>\n                <TableCell>{absoluteTimeRange.end.toString()}</TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </TableContainer>\n      </Box>\n\n      {warnings.length > 0 && (\n        <Box sx={{ p: 1, m: 0 }}>\n          <Typography variant=\"h3\" mb={1}>\n            Warnings\n          </Typography>\n          <TableContainer component={Paper} sx={{ mb: 2 }}>\n            <Table size=\"small\" aria-label=\"query warnings table\">\n              <TableHead>\n                <TableRow>\n                  <TableCell>Query</TableCell>\n                  <TableCell>Summary</TableCell>\n                </TableRow>\n              </TableHead>\n              <TableBody>\n                {warnings.map((details, idx) => {\n                  return (\n                    <TableRow key={idx}>\n                      <TableCell>{details.query}</TableCell>\n                      <TableCell>{details.summary}</TableCell>\n                    </TableRow>\n                  );\n                })}\n              </TableBody>\n            </Table>\n          </TableContainer>\n          <Button disabled variant=\"outlined\">\n            TODO: Action Button\n          </Button>\n        </Box>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Button","Paper","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","Stack","useQueryClient","useActiveTimeSeriesQueries","useDatasourceClient","useTimeRange","TABLE_MAX_WIDTH","QuerySummaryTable","props","showTotalQueries","datasourceClient","kind","absoluteTimeRange","queryClient","queries","getQueryCache","findAll","activeQueries","filter","query","state","status","completedQueries","querySummary","isLoading","warnings","forEach","queryData","data","metadata","notices","queryKey","warningMessage","message","push","String","spec","plugin","summary","spacing","mb","sx","maxWidth","p","variant","component","size","aria-label","length","start","toString","end","m","map","details","idx","disabled"],"mappings":"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"}

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -19,10 +19,8 @@ import { Dialog } from '@perses-dev/components';
 import { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';
 export const SaveChangesConfirmationDialog = ()=>{
     const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();
-    var _dialog_isSavedDurationModified;
-    const isSavedDurationModified = (_dialog_isSavedDurationModified = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedDurationModified) !== null && _dialog_isSavedDurationModified !== void 0 ? _dialog_isSavedDurationModified : true;
-    var _dialog_isSavedVariableModified;
-    const isSavedVariableModified = (_dialog_isSavedVariableModified = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedVariableModified) !== null && _dialog_isSavedVariableModified !== void 0 ? _dialog_isSavedVariableModified : true;
+    const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;
+    const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;
     const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);
     const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);
     const { getSavedVariablesStatus } = useVariableDefinitionActions();

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.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 { ReactElement, useState } from 'react';\nimport { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isRelativeTimeRange, SAVE_DEFAULTS_DIALOG_TEXT } from '@perses-dev/core';\nimport { Dialog } from '@perses-dev/components';\nimport { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';\n\nexport const SaveChangesConfirmationDialog = (): ReactElement => {\n  const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();\n  const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;\n  const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;\n  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);\n  const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);\n\n  const { getSavedVariablesStatus } = useVariableDefinitionActions();\n  const { modifiedVariableNames } = getSavedVariablesStatus();\n\n  const isOpen = dialog !== undefined;\n\n  const { timeRange } = useTimeRange();\n  const currentTimeRangeText = isRelativeTimeRange(timeRange)\n    ? `(Last ${timeRange.pastDuration})`\n    : '(Absolute time ranges can not be saved)';\n\n  const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;\n\n  const saveVariablesText = `Save current variable values as new default (${\n    modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'\n  })`;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <Dialog.Header onClose={() => dialog.onCancel()}>Save Dashboard</Dialog.Header>\n\n          <Dialog.Content>\n            <Typography marginBottom={2}>{dialog.description || SAVE_DEFAULTS_DIALOG_TEXT}</Typography>\n            <FormGroup>\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedDurationModified || !isRelativeTimeRange(timeRange)}\n                    checked={saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange)}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeRange(e.target.checked)}\n                  />\n                }\n                label={saveTimeRangeText}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedVariableModified}\n                    checked={saveDefaultVariables && isSavedVariableModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}\n                  />\n                }\n                label={saveVariablesText}\n              />\n            </FormGroup>\n          </Dialog.Content>\n\n          <Dialog.Actions>\n            <Dialog.PrimaryButton\n              onClick={() => {\n                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);\n              }}\n            >\n              Save Changes\n            </Dialog.PrimaryButton>\n            <Dialog.SecondaryButton onClick={() => dialog.onCancel()}>Cancel</Dialog.SecondaryButton>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["useState","Checkbox","FormGroup","FormControlLabel","Typography","useTimeRange","isRelativeTimeRange","SAVE_DEFAULTS_DIALOG_TEXT","Dialog","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SaveChangesConfirmationDialog","saveChangesConfirmationDialog","dialog","isSavedDurationModified","isSavedVariableModified","saveDefaultTimeRange","setSaveDefaultTimeRange","saveDefaultVariables","setSaveDefaultVariables","getSavedVariablesStatus","modifiedVariableNames","isOpen","undefined","timeRange","currentTimeRangeText","pastDuration","saveTimeRangeText","saveVariablesText","length","join","open","Header","onClose","onCancel","Content","marginBottom","description","control","disabled","checked","onChange","e","target","label","Actions","PrimaryButton","onClick","onSaveChanges","SecondaryButton"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,QAAQ,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,gBAAgB;AAClF,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,mBAAmB,EAAEC,yBAAyB,QAAQ,mBAAmB;AAClF,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,gCAAgC,EAAEC,4BAA4B,QAAQ,gBAAgB;AAE/F,OAAO,MAAMC,gCAAgC;IAC3C,MAAM,EAAEC,+BAA+BC,MAAM,EAAE,GAAGJ;QAClBI;IAAhC,MAAMC,0BAA0BD,CAAAA,kCAAAA,mBAAAA,6BAAAA,OAAQC,uBAAuB,cAA/BD,6CAAAA,kCAAmC;QACnCA;IAAhC,MAAME,0BAA0BF,CAAAA,kCAAAA,mBAAAA,6BAAAA,OAAQE,uBAAuB,cAA/BF,6CAAAA,kCAAmC;IACnE,MAAM,CAACG,sBAAsBC,wBAAwB,GAAGjB,SAASc;IACjE,MAAM,CAACI,sBAAsBC,wBAAwB,GAAGnB,SAASe;IAEjE,MAAM,EAAEK,uBAAuB,EAAE,GAAGV;IACpC,MAAM,EAAEW,qBAAqB,EAAE,GAAGD;IAElC,MAAME,SAAST,WAAWU;IAE1B,MAAM,EAAEC,SAAS,EAAE,GAAGnB;IACtB,MAAMoB,uBAAuBnB,oBAAoBkB,aAC7C,CAAC,MAAM,EAAEA,UAAUE,YAAY,CAAC,CAAC,CAAC,GAClC;IAEJ,MAAMC,oBAAoB,CAAC,uCAAuC,EAAEF,qBAAqB,CAAC;IAE1F,MAAMG,oBAAoB,CAAC,6CAA6C,EACtEP,sBAAsBQ,MAAM,GAAG,IAAIR,sBAAsBS,IAAI,CAAC,QAAQ,wBACvE,CAAC,CAAC;IAEH,qBACE,KAACtB;QAAOuB,MAAMT;kBACXT,WAAWU,2BACV;;8BACE,KAACf,OAAOwB,MAAM;oBAACC,SAAS,IAAMpB,OAAOqB,QAAQ;8BAAI;;8BAEjD,MAAC1B,OAAO2B,OAAO;;sCACb,KAAC/B;4BAAWgC,cAAc;sCAAIvB,OAAOwB,WAAW,IAAI9B;;sCACpD,MAACL;;8CACC,KAACC;oCACCmC,uBACE,KAACrC;wCACCsC,UAAU,CAACzB,2BAA2B,CAACR,oBAAoBkB;wCAC3DgB,SAASxB,wBAAwBF,2BAA2BR,oBAAoBkB;wCAChFiB,UAAU,CAACC,IAA2CzB,wBAAwByB,EAAEC,MAAM,CAACH,OAAO;;oCAGlGI,OAAOjB;;8CAET,KAACxB;oCACCmC,uBACE,KAACrC;wCACCsC,UAAU,CAACxB;wCACXyB,SAAStB,wBAAwBH;wCACjC0B,UAAU,CAACC,IAA2CvB,wBAAwBuB,EAAEC,MAAM,CAACH,OAAO;;oCAGlGI,OAAOhB;;;;;;8BAKb,MAACpB,OAAOqC,OAAO;;sCACb,KAACrC,OAAOsC,aAAa;4BACnBC,SAAS;gCACP,OAAOlC,OAAOmC,aAAa,CAAChC,sBAAsBE;4BACpD;sCACD;;sCAGD,KAACV,OAAOyC,eAAe;4BAACF,SAAS,IAAMlC,OAAOqB,QAAQ;sCAAI;;;;;;;AAMtE,EAAE"}
+{"version":3,"sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.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 { ReactElement, useState } from 'react';\nimport { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isRelativeTimeRange, SAVE_DEFAULTS_DIALOG_TEXT } from '@perses-dev/core';\nimport { Dialog } from '@perses-dev/components';\nimport { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';\n\nexport const SaveChangesConfirmationDialog = (): ReactElement => {\n  const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();\n  const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;\n  const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;\n  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);\n  const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);\n\n  const { getSavedVariablesStatus } = useVariableDefinitionActions();\n  const { modifiedVariableNames } = getSavedVariablesStatus();\n\n  const isOpen = dialog !== undefined;\n\n  const { timeRange } = useTimeRange();\n  const currentTimeRangeText = isRelativeTimeRange(timeRange)\n    ? `(Last ${timeRange.pastDuration})`\n    : '(Absolute time ranges can not be saved)';\n\n  const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;\n\n  const saveVariablesText = `Save current variable values as new default (${\n    modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'\n  })`;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <Dialog.Header onClose={() => dialog.onCancel()}>Save Dashboard</Dialog.Header>\n\n          <Dialog.Content>\n            <Typography marginBottom={2}>{dialog.description || SAVE_DEFAULTS_DIALOG_TEXT}</Typography>\n            <FormGroup>\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedDurationModified || !isRelativeTimeRange(timeRange)}\n                    checked={saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange)}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeRange(e.target.checked)}\n                  />\n                }\n                label={saveTimeRangeText}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedVariableModified}\n                    checked={saveDefaultVariables && isSavedVariableModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}\n                  />\n                }\n                label={saveVariablesText}\n              />\n            </FormGroup>\n          </Dialog.Content>\n\n          <Dialog.Actions>\n            <Dialog.PrimaryButton\n              onClick={() => {\n                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);\n              }}\n            >\n              Save Changes\n            </Dialog.PrimaryButton>\n            <Dialog.SecondaryButton onClick={() => dialog.onCancel()}>Cancel</Dialog.SecondaryButton>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["useState","Checkbox","FormGroup","FormControlLabel","Typography","useTimeRange","isRelativeTimeRange","SAVE_DEFAULTS_DIALOG_TEXT","Dialog","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SaveChangesConfirmationDialog","saveChangesConfirmationDialog","dialog","isSavedDurationModified","isSavedVariableModified","saveDefaultTimeRange","setSaveDefaultTimeRange","saveDefaultVariables","setSaveDefaultVariables","getSavedVariablesStatus","modifiedVariableNames","isOpen","undefined","timeRange","currentTimeRangeText","pastDuration","saveTimeRangeText","saveVariablesText","length","join","open","Header","onClose","onCancel","Content","marginBottom","description","control","disabled","checked","onChange","e","target","label","Actions","PrimaryButton","onClick","onSaveChanges","SecondaryButton"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,QAAQ,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,gBAAgB;AAClF,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,mBAAmB,EAAEC,yBAAyB,QAAQ,mBAAmB;AAClF,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,gCAAgC,EAAEC,4BAA4B,QAAQ,gBAAgB;AAE/F,OAAO,MAAMC,gCAAgC;IAC3C,MAAM,EAAEC,+BAA+BC,MAAM,EAAE,GAAGJ;IAClD,MAAMK,0BAA0BD,QAAQC,2BAA2B;IACnE,MAAMC,0BAA0BF,QAAQE,2BAA2B;IACnE,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGjB,SAASc;IACjE,MAAM,CAACI,sBAAsBC,wBAAwB,GAAGnB,SAASe;IAEjE,MAAM,EAAEK,uBAAuB,EAAE,GAAGV;IACpC,MAAM,EAAEW,qBAAqB,EAAE,GAAGD;IAElC,MAAME,SAAST,WAAWU;IAE1B,MAAM,EAAEC,SAAS,EAAE,GAAGnB;IACtB,MAAMoB,uBAAuBnB,oBAAoBkB,aAC7C,CAAC,MAAM,EAAEA,UAAUE,YAAY,CAAC,CAAC,CAAC,GAClC;IAEJ,MAAMC,oBAAoB,CAAC,uCAAuC,EAAEF,qBAAqB,CAAC;IAE1F,MAAMG,oBAAoB,CAAC,6CAA6C,EACtEP,sBAAsBQ,MAAM,GAAG,IAAIR,sBAAsBS,IAAI,CAAC,QAAQ,wBACvE,CAAC,CAAC;IAEH,qBACE,KAACtB;QAAOuB,MAAMT;kBACXT,WAAWU,2BACV;;8BACE,KAACf,OAAOwB,MAAM;oBAACC,SAAS,IAAMpB,OAAOqB,QAAQ;8BAAI;;8BAEjD,MAAC1B,OAAO2B,OAAO;;sCACb,KAAC/B;4BAAWgC,cAAc;sCAAIvB,OAAOwB,WAAW,IAAI9B;;sCACpD,MAACL;;8CACC,KAACC;oCACCmC,uBACE,KAACrC;wCACCsC,UAAU,CAACzB,2BAA2B,CAACR,oBAAoBkB;wCAC3DgB,SAASxB,wBAAwBF,2BAA2BR,oBAAoBkB;wCAChFiB,UAAU,CAACC,IAA2CzB,wBAAwByB,EAAEC,MAAM,CAACH,OAAO;;oCAGlGI,OAAOjB;;8CAET,KAACxB;oCACCmC,uBACE,KAACrC;wCACCsC,UAAU,CAACxB;wCACXyB,SAAStB,wBAAwBH;wCACjC0B,UAAU,CAACC,IAA2CvB,wBAAwBuB,EAAEC,MAAM,CAACH,OAAO;;oCAGlGI,OAAOhB;;;;;;8BAKb,MAACpB,OAAOqC,OAAO;;sCACb,KAACrC,OAAOsC,aAAa;4BACnBC,SAAS;gCACP,OAAOlC,OAAOmC,aAAa,CAAChC,sBAAsBE;4BACpD;sCACD;;sCAGD,KAACV,OAAOyC,eAAe;4BAACF,SAAS,IAAMlC,OAAOqB,QAAQ;sCAAI;;;;;;;AAMtE,EAAE"}

package/dist/components/Variables/BuiltinVariableAccordions.js

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

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 { ReactElement, useMemo } from 'react';\n\ntype BuiltinVariableAccordionsProps = {\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n};\n\nexport function BuiltinVariableAccordions({\n  builtinVariableDefinitions,\n}: BuiltinVariableAccordionsProps): ReactElement {\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} Built-in Variables`}\n                description=\"Variables computed during dashboard rendering.\"\n              >\n                <span>{source} Built-in 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,SAAuBC,OAAO,QAAQ,QAAQ;AAM9C,OAAO,SAASC,0BAA0B,EACxCC,0BAA0B,EACK;IAC/B,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,mBAAmB,CAAC;gCACrCgB,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"}
+{"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 { ReactElement, useMemo } from 'react';\n\ntype BuiltinVariableAccordionsProps = {\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n};\n\nexport function BuiltinVariableAccordions({\n  builtinVariableDefinitions,\n}: BuiltinVariableAccordionsProps): ReactElement {\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} Built-in Variables`}\n                description=\"Variables computed during dashboard rendering.\"\n              >\n                <span>{source} Built-in 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,SAAuBC,OAAO,QAAQ,QAAQ;AAM9C,OAAO,SAASC,0BAA0B,EACxCC,0BAA0B,EACK;IAC/B,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,uBACZ,MAACpB;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,mBAAmB,CAAC;gCACrCgB,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,wBAAwB,CAACK,OAAO,IAAI,EAAE,AAAD,EAAGI,GAAG,CAAC,CAACgB,kBAC7C,MAAChC;;kEACC,KAACH;wDAAUoC,WAAU;wDAAKC,OAAM;wDAAMjB,IAAI;4DAAEkB,YAAY;wDAAO;kEAC5DH,EAAErB,IAAI,CAACyB,IAAI;;kEAEd,KAACvC;kEAAWmC,EAAErB,IAAI,CAAC0B,OAAO,EAAET,eAAe;;;+CAJ9BhB,SAAS,MAAMoB,EAAErB,IAAI,CAACyB,IAAI;;;;;;;eA/B9CxB;;AA8Cf"}