@perses-dev/dashboards 0.44.0 → 0.45.0-rc0

package/dist/components/Panel/PanelLinks.js

@@ -0,0 +1,124 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconButton, Link as LinkComponent, Menu, MenuItem } from '@mui/material';
+import LaunchIcon from 'mdi-material-ui/Launch';
+import { useState } from 'react';
+import { InfoTooltip } from '@perses-dev/components';
+import { useReplaceVariablesInString } from '@perses-dev/plugin-system';
+export function PanelLinks({ links }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const isMenuOpened = Boolean(anchorEl);
+    const handleOpenMenu = (event)=>{
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = ()=>{
+        setAnchorEl(null);
+    };
+    // If there is only one link, show it directly
+    if (links.length === 1 && links[0]) {
+        const link = links[0];
+        return /*#__PURE__*/ _jsx(LinkButton, {
+            link: link
+        });
+    }
+    // Else we show a menu with a list of all links
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(InfoTooltip, {
+                description: `${links.length} links`,
+                enterDelay: 100,
+                children: /*#__PURE__*/ _jsx(IconButton, {
+                    "aria-label": "Panel links",
+                    size: "small",
+                    onClick: handleOpenMenu,
+                    sx: (theme)=>({
+                            borderRadius: theme.shape.borderRadius,
+                            padding: '4px'
+                        }),
+                    children: /*#__PURE__*/ _jsx(LaunchIcon, {
+                        "aria-describedby": "links-icon",
+                        fontSize: "inherit",
+                        sx: {
+                            color: (theme)=>theme.palette.text.secondary
+                        }
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(Menu, {
+                anchorEl: anchorEl,
+                open: isMenuOpened,
+                onClose: handleClose,
+                MenuListProps: {
+                    'aria-labelledby': 'panel-links'
+                },
+                children: links.map((link)=>/*#__PURE__*/ _jsx(LinkMenuItem, {
+                        link: link
+                    }, link.url))
+            })
+        ]
+    });
+}
+function LinkButton({ link }) {
+    const { url, name, tooltip, targetBlank } = useLink(link);
+    return /*#__PURE__*/ _jsx(InfoTooltip, {
+        description: tooltip !== null && tooltip !== void 0 ? tooltip : url,
+        enterDelay: 100,
+        children: /*#__PURE__*/ _jsx(IconButton, {
+            "aria-label": name !== null && name !== void 0 ? name : url,
+            size: "small",
+            href: url,
+            target: targetBlank ? '_blank' : '_self',
+            sx: (theme)=>({
+                    borderRadius: theme.shape.borderRadius,
+                    padding: '4px'
+                }),
+            children: /*#__PURE__*/ _jsx(LaunchIcon, {
+                fontSize: "inherit",
+                sx: {
+                    color: (theme)=>theme.palette.text.secondary
+                }
+            })
+        })
+    });
+}
+function LinkMenuItem({ link }) {
+    const { url, name, tooltip, targetBlank } = useLink(link);
+    return /*#__PURE__*/ _jsx(InfoTooltip, {
+        description: tooltip !== null && tooltip !== void 0 ? tooltip : url,
+        enterDelay: 100,
+        children: /*#__PURE__*/ _jsx(MenuItem, {
+            component: LinkComponent,
+            href: url,
+            target: targetBlank ? '_blank' : '_self',
+            children: name !== null && name !== void 0 ? name : url
+        })
+    });
+}
+function useLink(link) {
+    var _useReplaceVariablesInString;
+    const url = (_useReplaceVariablesInString = useReplaceVariablesInString(link.url)) !== null && _useReplaceVariablesInString !== void 0 ? _useReplaceVariablesInString : link.url;
+    const name = useReplaceVariablesInString(link.name);
+    const tooltip = useReplaceVariablesInString(link.tooltip);
+    if (link.renderVariables === false) {
+        return link;
+    }
+    return {
+        ...link,
+        url,
+        name,
+        tooltip
+    };
+}
+
+//# sourceMappingURL=PanelLinks.js.map

package/dist/components/Panel/PanelLinks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Panel/PanelLinks.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 { IconButton, Link as LinkComponent, Menu, MenuItem, Theme } from '@mui/material';\nimport LaunchIcon from 'mdi-material-ui/Launch';\nimport { Link } from '@perses-dev/core';\nimport { MouseEvent, useState } from 'react';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\n\nexport function PanelLinks({ links }: { links: Link[] }) {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const isMenuOpened = Boolean(anchorEl);\n  const handleOpenMenu = (event: MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  // If there is only one link, show it directly\n  if (links.length === 1 && links[0]) {\n    const link = links[0];\n    return <LinkButton link={link} />;\n  }\n\n  // Else we show a menu with a list of all links\n  return (\n    <>\n      <InfoTooltip description={`${links.length} links`} enterDelay={100}>\n        <IconButton\n          aria-label=\"Panel links\"\n          size=\"small\"\n          onClick={handleOpenMenu}\n          sx={(theme) => ({ borderRadius: theme.shape.borderRadius, padding: '4px' })}\n        >\n          <LaunchIcon\n            aria-describedby=\"links-icon\"\n            fontSize=\"inherit\"\n            sx={{ color: (theme) => theme.palette.text.secondary }}\n          />\n        </IconButton>\n      </InfoTooltip>\n\n      <Menu\n        anchorEl={anchorEl}\n        open={isMenuOpened}\n        onClose={handleClose}\n        MenuListProps={{\n          'aria-labelledby': 'panel-links',\n        }}\n      >\n        {links.map((link: Link) => (\n          <LinkMenuItem key={link.url} link={link} />\n        ))}\n      </Menu>\n    </>\n  );\n}\n\nfunction LinkButton({ link }: { link: Link }) {\n  const { url, name, tooltip, targetBlank } = useLink(link);\n\n  return (\n    <InfoTooltip description={tooltip ?? url} enterDelay={100}>\n      <IconButton\n        aria-label={name ?? url}\n        size=\"small\"\n        href={url}\n        target={targetBlank ? '_blank' : '_self'}\n        sx={(theme) => ({ borderRadius: theme.shape.borderRadius, padding: '4px' })}\n      >\n        <LaunchIcon fontSize=\"inherit\" sx={{ color: (theme: Theme) => theme.palette.text.secondary }} />\n      </IconButton>\n    </InfoTooltip>\n  );\n}\n\nfunction LinkMenuItem({ link }: { link: Link }) {\n  const { url, name, tooltip, targetBlank } = useLink(link);\n\n  return (\n    <InfoTooltip description={tooltip ?? url} enterDelay={100}>\n      <MenuItem component={LinkComponent} href={url} target={targetBlank ? '_blank' : '_self'}>\n        {name ?? url}\n      </MenuItem>\n    </InfoTooltip>\n  );\n}\n\nfunction useLink(link: Link): Link {\n  const url = useReplaceVariablesInString(link.url) ?? link.url;\n  const name = useReplaceVariablesInString(link.name);\n  const tooltip = useReplaceVariablesInString(link.tooltip);\n\n  if (link.renderVariables === false) {\n    return link;\n  }\n\n  return { ...link, url, name, tooltip };\n}\n"],"names":["IconButton","Link","LinkComponent","Menu","MenuItem","LaunchIcon","useState","InfoTooltip","useReplaceVariablesInString","PanelLinks","links","anchorEl","setAnchorEl","isMenuOpened","Boolean","handleOpenMenu","event","currentTarget","handleClose","length","link","LinkButton","description","enterDelay","aria-label","size","onClick","sx","theme","borderRadius","shape","padding","aria-describedby","fontSize","color","palette","text","secondary","open","onClose","MenuListProps","map","LinkMenuItem","url","name","tooltip","targetBlank","useLink","href","target","component","renderVariables"],"mappings":"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"}

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

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

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -11,11 +11,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';
 import { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { PluginKindSelect, usePluginEditor, PanelSpecEditor, getTitleAction, getSubmitText } from '@perses-dev/plugin-system';
-import { Controller, FormProvider, useForm } from 'react-hook-form';
+import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useListPanelGroups } from '../../context';
 import { panelEditorValidationSchema } from '../../validation';
@@ -25,18 +25,26 @@ export function PanelEditorForm(props) {
     const { initialValues: { panelDefinition: initialPanelDef, groupId: initialGroupId }, initialAction, onSave, onClose } = props;
     const panelGroups = useListPanelGroups();
     const [groupId, setGroupId] = useState(initialGroupId);
-    const { panelDefinition, setName, setDescription, setQueries, setPlugin, setPanelDefinition } = usePanelEditor(initialPanelDef);
+    const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } = usePanelEditor(initialPanelDef);
     const { plugin } = panelDefinition.spec;
     const [isDiscardDialogOpened, setDiscardDialogOpened] = useState(false);
     // Use common plugin editor logic even though we've split the inputs up in this form
     const pluginEditor = usePluginEditor({
-        pluginType: 'Panel',
+        pluginTypes: [
+            'Panel'
+        ],
         value: {
-            kind: plugin.kind,
+            selection: {
+                kind: plugin.kind,
+                type: 'Panel'
+            },
             spec: plugin.spec
         },
         onChange: (plugin)=>{
-            setPlugin(plugin);
+            setPlugin({
+                kind: plugin.selection.kind,
+                spec: plugin.spec
+            });
         },
         onHideQueryEditorChange: (isHidden)=>{
             setQueries(undefined, isHidden);
@@ -51,9 +59,23 @@ export function PanelEditorForm(props) {
             name: initialPanelDef.spec.display.name,
             groupId: initialGroupId,
             description: initialPanelDef.spec.display.description,
-            type: pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind
+            selection: pluginEditor.pendingSelection ? pluginEditor.pendingSelection : {
+                type: 'Panel',
+                kind: plugin.kind
+            },
+            links: initialPanelDef.spec.links
         }
     });
+    const links = useWatch({
+        control: form.control,
+        name: 'links'
+    });
+    useEffect(()=>{
+        setLinks(links);
+    }, [
+        setLinks,
+        links
+    ]);
     const processForm = ()=>{
         const values = {
             groupId,
@@ -214,13 +236,15 @@ export function PanelEditorForm(props) {
                             item: true,
                             xs: 4,
                             children: /*#__PURE__*/ _jsx(Controller, {
-                                name: "type",
+                                name: "selection",
                                 render: ({ field, fieldState })=>/*#__PURE__*/ {
                                     var _pluginEditor_error, _fieldState_error;
                                     var _pluginEditor_error_message;
                                     return _jsx(PluginKindSelect, {
                                         ...field,
-                                        pluginType: "Panel",
+                                        pluginTypes: [
+                                            'Panel'
+                                        ],
                                         required: true,
                                         fullWidth: true,
                                         label: "Type",
@@ -229,7 +253,7 @@ export function PanelEditorForm(props) {
                                         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,
                                         onChange: (event)=>{
                                             field.onChange(event);
-                                            pluginEditor.onKindChange(event);
+                                            pluginEditor.onSelectionChange(event);
                                         }
                                     });
                                 }

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 { useState } from 'react';\nimport { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { Action, PanelDefinition } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport {\n  PluginKindSelect,\n  usePluginEditor,\n  PanelSpecEditor,\n  getTitleAction,\n  getSubmitText,\n} from '@perses-dev/plugin-system';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useListPanelGroups } from '../../context';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';\nimport { panelEditorValidationSchema, PanelEditorValidationType } from '../../validation';\nimport { PanelPreview } from './PanelPreview';\nimport { usePanelEditor } from './usePanelEditor';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  initialAction: Action;\n  onSave: (values: PanelEditorValues) => void;\n  onClose: () => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const {\n    initialValues: { panelDefinition: initialPanelDef, groupId: initialGroupId },\n    initialAction,\n    onSave,\n    onClose,\n  } = props;\n  const panelGroups = useListPanelGroups();\n  const [groupId, setGroupId] = useState(initialGroupId);\n  const { panelDefinition, setName, setDescription, setQueries, setPlugin, setPanelDefinition } =\n    usePanelEditor(initialPanelDef);\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    pluginType: 'Panel',\n    value: { kind: plugin.kind, spec: plugin.spec },\n    onChange: (plugin) => {\n      setPlugin(plugin);\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 form = useForm<PanelEditorValidationType>({\n    resolver: zodResolver(panelEditorValidationSchema),\n    mode: 'onBlur',\n    defaultValues: {\n      name: initialPanelDef.spec.display.name,\n      groupId: initialGroupId,\n      description: initialPanelDef.spec.display.description,\n      type: pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind,\n    },\n  });\n\n  const processForm: SubmitHandler<PanelEditorValidationType> = () => {\n    const values: PanelEditorValues = { groupId, panelDefinition };\n    onSave(values);\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  function handleCancel() {\n    if (\n      JSON.stringify({ groupId: initialGroupId, panelDefinition: initialPanelDef }) !==\n      JSON.stringify({ groupId, panelDefinition })\n    ) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  const handlePanelDefinitionChange = (nextPanelDefStr: string) => {\n    const nextPanelDef: PanelDefinition = JSON.parse(nextPanelDefStr);\n    const { kind: pluginKind, spec: pluginSpec } = nextPanelDef.spec.plugin;\n    // if panel plugin kind and spec are modified, then need to save current spec\n    if (\n      panelDefinition.spec.plugin.kind !== pluginKind &&\n      JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)\n    ) {\n      pluginEditor.rememberCurrentSpecState();\n    }\n    setPanelDefinition(nextPanelDef);\n  };\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Panel</Typography>\n        <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n          <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={form.handleSubmit(processForm)}>\n            {submitText}\n          </Button>\n          <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n            Cancel\n          </Button>\n        </Stack>\n      </Box>\n      <Box id={panelEditorFormId} sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}>\n        <Grid container spacing={2}>\n          <Grid item xs={8}>\n            <Controller\n              name=\"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                  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              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                    setGroupId(+event.target.value);\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              name=\"description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Description\"\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\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              name=\"type\"\n              render={({ field, fieldState }) => (\n                <PluginKindSelect\n                  {...field}\n                  pluginType=\"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                  onChange={(event) => {\n                    field.onChange(event);\n                    pluginEditor.onKindChange(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                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":["useState","Box","Button","Grid","MenuItem","Stack","TextField","Typography","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","PanelSpecEditor","getTitleAction","getSubmitText","Controller","FormProvider","useForm","zodResolver","useListPanelGroups","panelEditorValidationSchema","PanelPreview","usePanelEditor","PanelEditorForm","props","initialValues","panelDefinition","initialPanelDef","groupId","initialGroupId","initialAction","onSave","onClose","panelGroups","setGroupId","setName","setDescription","setQueries","setPlugin","setPanelDefinition","plugin","spec","isDiscardDialogOpened","setDiscardDialogOpened","pluginEditor","pluginType","value","kind","onChange","onHideQueryEditorChange","isHidden","undefined","titleAction","submitText","form","resolver","mode","defaultValues","name","display","description","type","pendingKind","processForm","values","handleCancel","JSON","stringify","handlePanelDefinitionChange","nextPanelDefStr","nextPanelDef","parse","pluginKind","pluginSpec","rememberCurrentSpecState","sx","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","onKindChange","marginBottom","FallbackComponent","onJSONChange","onQueriesChange","queries","onPluginSpecChange","onSpecChange","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useEffect, useState } from 'react';\nimport { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { Action, PanelDefinition } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport {\n  PluginKindSelect,\n  usePluginEditor,\n  PanelSpecEditor,\n  getTitleAction,\n  getSubmitText,\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 { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';\nimport { panelEditorValidationSchema, PanelEditorValidationType } from '../../validation';\nimport { PanelPreview } from './PanelPreview';\nimport { usePanelEditor } from './usePanelEditor';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  initialAction: Action;\n  onSave: (values: PanelEditorValues) => void;\n  onClose: () => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const {\n    initialValues: { panelDefinition: initialPanelDef, groupId: initialGroupId },\n    initialAction,\n    onSave,\n    onClose,\n  } = props;\n  const panelGroups = useListPanelGroups();\n  const [groupId, setGroupId] = useState(initialGroupId);\n  const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } =\n    usePanelEditor(initialPanelDef);\n  const { plugin } = panelDefinition.spec;\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginTypes: ['Panel'],\n    value: { selection: { kind: plugin.kind, type: 'Panel' }, spec: plugin.spec },\n    onChange: (plugin) => {\n      setPlugin({\n        kind: plugin.selection.kind,\n        spec: plugin.spec,\n      });\n    },\n    onHideQueryEditorChange: (isHidden) => {\n      setQueries(undefined, isHidden);\n    },\n  });\n\n  const titleAction = getTitleAction(initialAction, true);\n  const submitText = getSubmitText(initialAction, true);\n\n  const form = useForm<PanelEditorValidationType>({\n    resolver: zodResolver(panelEditorValidationSchema),\n    mode: 'onBlur',\n    defaultValues: {\n      name: initialPanelDef.spec.display.name,\n      groupId: initialGroupId,\n      description: initialPanelDef.spec.display.description,\n      selection: pluginEditor.pendingSelection ? pluginEditor.pendingSelection : { type: 'Panel', kind: plugin.kind },\n      links: initialPanelDef.spec.links,\n    },\n  });\n\n  const links = useWatch({ control: form.control, name: 'links' });\n  useEffect(() => {\n    setLinks(links);\n  }, [setLinks, links]);\n\n  const processForm: SubmitHandler<PanelEditorValidationType> = () => {\n    const values: PanelEditorValues = { groupId, panelDefinition };\n    onSave(values);\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  function handleCancel() {\n    if (\n      JSON.stringify({ groupId: initialGroupId, panelDefinition: initialPanelDef }) !==\n      JSON.stringify({ groupId, panelDefinition })\n    ) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  const handlePanelDefinitionChange = (nextPanelDefStr: string) => {\n    const nextPanelDef: PanelDefinition = JSON.parse(nextPanelDefStr);\n    const { kind: pluginKind, spec: pluginSpec } = nextPanelDef.spec.plugin;\n    // if panel plugin kind and spec are modified, then need to save current spec\n    if (\n      panelDefinition.spec.plugin.kind !== pluginKind &&\n      JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)\n    ) {\n      pluginEditor.rememberCurrentSpecState();\n    }\n    setPanelDefinition(nextPanelDef);\n  };\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Panel</Typography>\n        <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n          <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={form.handleSubmit(processForm)}>\n            {submitText}\n          </Button>\n          <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n            Cancel\n          </Button>\n        </Stack>\n      </Box>\n      <Box id={panelEditorFormId} sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}>\n        <Grid container spacing={2}>\n          <Grid item xs={8}>\n            <Controller\n              name=\"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                  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              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                    setGroupId(+event.target.value);\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              name=\"description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Description\"\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\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              name=\"selection\"\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                  onChange={(event) => {\n                    field.onChange(event);\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                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","Controller","FormProvider","useForm","useWatch","zodResolver","useListPanelGroups","panelEditorValidationSchema","PanelPreview","usePanelEditor","PanelEditorForm","props","initialValues","panelDefinition","initialPanelDef","groupId","initialGroupId","initialAction","onSave","onClose","panelGroups","setGroupId","setName","setDescription","setLinks","setQueries","setPlugin","setPanelDefinition","plugin","spec","isDiscardDialogOpened","setDiscardDialogOpened","pluginEditor","pluginTypes","value","selection","kind","type","onChange","onHideQueryEditorChange","isHidden","undefined","titleAction","submitText","form","resolver","mode","defaultValues","name","display","description","pendingSelection","links","control","processForm","values","handleCancel","JSON","stringify","handlePanelDefinitionChange","nextPanelDefStr","nextPanelDef","parse","pluginKind","pluginSpec","rememberCurrentSpecState","sx","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","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAOlD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,EAAE,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,kDA+B3F"}
+{"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAMlD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,EAAE,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,kDA+B3F"}

package/dist/components/PanelDrawer/PanelPreview.js

@@ -13,9 +13,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { Box } from '@mui/material';
-import { DataQueriesProvider } from '@perses-dev/plugin-system';
+import { DataQueriesProvider, useSuggestedStepMs } from '@perses-dev/plugin-system';
 import { Panel } from '../Panel';
-import { useSuggestedStepMs } from '../../utils';
 const PANEL_PREVIEW_HEIGHT = 300;
 const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
 export function PanelPreview({ 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 { useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { DataQueriesProvider } from '@perses-dev/plugin-system';\nimport { PanelEditorValues } from '../../context';\nimport { Panel } from '../Panel';\nimport { useSuggestedStepMs } from '../../utils';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>) {\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  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 }}>\n        <Panel definition={panelDefinition} />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["useRef","Box","DataQueriesProvider","Panel","useSuggestedStepMs","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","current","getBoundingClientRect","suggestedStepMs","spec","plugin","kind","queries","definitions","length","map","query","ref","height","options","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,SAASA,MAAM,QAAQ,QAAQ;AAC/B,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,mBAAmB,QAAQ,4BAA4B;AAEhE,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,kBAAkB,QAAQ,cAAc;AAEjD,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAEpC,OAAO,SAASC,aAAa,EAAEC,eAAe,EAA8C;IAC1F,MAAMC,SAAST,OAAuB;IACtC,IAAIU,QAAQJ;IACZ,IAAIG,OAAOE,OAAO,KAAK,MAAM;QAC3BD,QAAQD,OAAOE,OAAO,CAACC,qBAAqB,GAAGF,KAAK;IACtD;IACA,MAAMG,kBAAkBT,mBAAmBM;IAE3C,IAAIF,gBAAgBM,IAAI,CAACC,MAAM,CAACC,IAAI,KAAK,IAAI;QAC3C,OAAO;IACT;QAEgBR;IAAhB,MAAMS,UAAUT,CAAAA,gCAAAA,gBAAgBM,IAAI,CAACG,OAAO,cAA5BT,2CAAAA,gCAAgC,EAAE;IAElD,2DAA2D;IAC3D,MAAMU,cAAcD,QAAQE,MAAM,GAC9BF,QAAQG,GAAG,CAAC,CAACC;QACX,OAAO;YACLL,MAAMK,MAAMP,IAAI,CAACC,MAAM,CAACC,IAAI;YAC5BF,MAAMO,MAAMP,IAAI,CAACC,MAAM,CAACD,IAAI;QAC9B;IACF,KACA,EAAE;IAEN,qBACE,KAACb;QAAIqB,KAAKb;QAAQc,QAAQlB;kBACxB,cAAA,KAACH;YAAoBgB,aAAaA;YAAaM,SAAS;gBAAEX;YAAgB;sBACxE,cAAA,KAACV;gBAAMsB,YAAYjB;;;;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 { useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { DataQueriesProvider, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { PanelEditorValues } from '../../context';\nimport { Panel } from '../Panel';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>) {\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  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 }}>\n        <Panel definition={panelDefinition} />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["useRef","Box","DataQueriesProvider","useSuggestedStepMs","Panel","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","current","getBoundingClientRect","suggestedStepMs","spec","plugin","kind","queries","definitions","length","map","query","ref","height","options","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,SAASA,MAAM,QAAQ,QAAQ;AAC/B,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,mBAAmB,EAAEC,kBAAkB,QAAQ,4BAA4B;AAEpF,SAASC,KAAK,QAAQ,WAAW;AAEjC,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAEpC,OAAO,SAASC,aAAa,EAAEC,eAAe,EAA8C;IAC1F,MAAMC,SAAST,OAAuB;IACtC,IAAIU,QAAQJ;IACZ,IAAIG,OAAOE,OAAO,KAAK,MAAM;QAC3BD,QAAQD,OAAOE,OAAO,CAACC,qBAAqB,GAAGF,KAAK;IACtD;IACA,MAAMG,kBAAkBV,mBAAmBO;IAE3C,IAAIF,gBAAgBM,IAAI,CAACC,MAAM,CAACC,IAAI,KAAK,IAAI;QAC3C,OAAO;IACT;QAEgBR;IAAhB,MAAMS,UAAUT,CAAAA,gCAAAA,gBAAgBM,IAAI,CAACG,OAAO,cAA5BT,2CAAAA,gCAAgC,EAAE;IAElD,2DAA2D;IAC3D,MAAMU,cAAcD,QAAQE,MAAM,GAC9BF,QAAQG,GAAG,CAAC,CAACC;QACX,OAAO;YACLL,MAAMK,MAAMP,IAAI,CAACC,MAAM,CAACC,IAAI;YAC5BF,MAAMO,MAAMP,IAAI,CAACC,MAAM,CAACD,IAAI;QAC9B;IACF,KACA,EAAE;IAEN,qBACE,KAACb;QAAIqB,KAAKb;QAAQc,QAAQlB;kBACxB,cAAA,KAACH;YAAoBgB,aAAaA;YAAaM,SAAS;gBAAEX;YAAgB;sBACxE,cAAA,KAACT;gBAAMqB,YAAYjB;;;;AAI3B"}

package/dist/components/PanelDrawer/usePanelEditor.d.ts

@@ -8,6 +8,7 @@ export declare const usePanelEditor: (panelDefinition: PanelDefinition) => {
     panelDefinition: PanelDefinition<import("@perses-dev/core").UnknownSpec>;
     setName: import("react").Dispatch<import("react").SetStateAction<string>>;
     setDescription: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    setLinks: import("react").Dispatch<import("react").SetStateAction<import("@perses-dev/core").Link[] | undefined>>;
     setQueries: (queries?: QueryDefinition[], hideQueryEditor?: boolean) => void;
     setPlugin: import("react").Dispatch<import("react").SetStateAction<import("@perses-dev/core").Definition<import("@perses-dev/core").UnknownSpec>>>;
     setPanelDefinition: (panelDefinition: PanelDefinition) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"usePanelEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/usePanelEditor.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEpE;;;GAGG;AACH,eAAO,MAAM,cAAc,oBAAqB,eAAe;;;;2BAehD,eAAe,EAAE,oBAAoB,OAAO;;0CAarC,eAAe;CA4BpC,CAAC"}
+{"version":3,"file":"usePanelEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/usePanelEditor.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEpE;;;GAGG;AACH,eAAO,MAAM,cAAc,oBAAqB,eAAe;;;;;2BAgBhD,eAAe,EAAE,oBAAoB,OAAO;;0CAarC,eAAe;CA+BpC,CAAC"}

package/dist/components/PanelDrawer/usePanelEditor.js

@@ -15,9 +15,10 @@ import { useCallback, useMemo, useState } from 'react';
  * UsePanelEditor is used in PanelEditorForm
  * This hook stores the states of panel definition and returns the onChange handlers for each state
  */ export const usePanelEditor = (panelDefinition)=>{
-    const { display, plugin: pluginDefinition, queries: initialQueries } = panelDefinition.spec;
+    const { display, plugin: pluginDefinition, queries: initialQueries, links: initialLinks } = panelDefinition.spec;
     const [name, setName] = useState(display.name);
     const [description, setDescription] = useState(display.description);
+    const [links, setLinks] = useState(initialLinks);
     const [plugin, setPlugin] = useState(pluginDefinition);
     // need to keep track of prevQueries if switching from a panel with no queries (ex: markdown) to one with queries
     const [prevQueries, setPrevQueries] = useState(initialQueries);
@@ -40,14 +41,16 @@ import { useCallback, useMemo, useState } from 'react';
     ]);
     // reset panel definition
     const setPanelDefinition = useCallback((panelDefinition)=>{
-        const { display, plugin, queries } = panelDefinition.spec;
+        const { display, plugin, queries, links } = panelDefinition.spec;
         setName(display.name);
         setDescription(display.description);
+        setLinks(links);
         setPlugin(plugin);
         setQueries(queries);
     }, [
         setName,
         setDescription,
+        setLinks,
         setPlugin,
         setQueries
     ]);
@@ -60,23 +63,23 @@ import { useCallback, useMemo, useState } from 'react';
                         description
                     },
                     plugin,
-                    queries: currentQueries
+                    queries: currentQueries,
+                    links
                 }
             },
             setName,
             setDescription,
+            setLinks,
             setQueries,
             setPlugin,
             setPanelDefinition
         }), [
         name,
         description,
+        links,
         plugin,
         currentQueries,
-        setName,
-        setDescription,
         setQueries,
-        setPlugin,
         setPanelDefinition
     ]);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/usePanelEditor.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 { useCallback, useMemo, useState } from 'react';\nimport { PanelDefinition, QueryDefinition } from '@perses-dev/core';\n\n/**\n * UsePanelEditor is used in PanelEditorForm\n * This hook stores the states of panel definition and returns the onChange handlers for each state\n */\nexport const usePanelEditor = (panelDefinition: PanelDefinition) => {\n  const { display, plugin: pluginDefinition, queries: initialQueries } = panelDefinition.spec;\n  const [name, setName] = useState(display.name);\n  const [description, setDescription] = useState(display.description);\n  const [plugin, setPlugin] = useState(pluginDefinition);\n\n  // need to keep track of prevQueries if switching from a panel with no queries (ex: markdown) to one with queries\n  const [prevQueries, setPrevQueries] = useState(initialQueries);\n  const [currentQueries, setCurrentQueries] = useState(initialQueries);\n\n  /**\n   * If hideQueryEditor is true, set panelDefinition.spec.queries to undefined.\n   * If hideQueryEditor is false and query is undefined, set panelDefinition.spec.queries to previous queries.\n   */\n  const setQueries = useCallback(\n    (queries?: QueryDefinition[], hideQueryEditor?: boolean) => {\n      if (hideQueryEditor) {\n        setPrevQueries(currentQueries);\n        setCurrentQueries(undefined);\n      } else {\n        setCurrentQueries(queries === undefined ? prevQueries : queries);\n      }\n    },\n    [setCurrentQueries, currentQueries, setPrevQueries, prevQueries]\n  );\n\n  // reset panel definition\n  const setPanelDefinition = useCallback(\n    (panelDefinition: PanelDefinition) => {\n      const { display, plugin, queries } = panelDefinition.spec;\n      setName(display.name);\n      setDescription(display.description);\n      setPlugin(plugin);\n      setQueries(queries);\n    },\n    [setName, setDescription, setPlugin, setQueries]\n  );\n\n  return useMemo(\n    () => ({\n      panelDefinition: {\n        kind: 'Panel',\n        spec: {\n          display: { name, description },\n          plugin,\n          queries: currentQueries,\n        },\n      } as PanelDefinition,\n      setName,\n      setDescription,\n      setQueries,\n      setPlugin,\n      setPanelDefinition,\n    }),\n    [name, description, plugin, currentQueries, setName, setDescription, setQueries, setPlugin, setPanelDefinition]\n  );\n};\n"],"names":["useCallback","useMemo","useState","usePanelEditor","panelDefinition","display","plugin","pluginDefinition","queries","initialQueries","spec","name","setName","description","setDescription","setPlugin","prevQueries","setPrevQueries","currentQueries","setCurrentQueries","setQueries","hideQueryEditor","undefined","setPanelDefinition","kind"],"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,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAGvD;;;CAGC,GACD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,OAAO,EAAEC,QAAQC,gBAAgB,EAAEC,SAASC,cAAc,EAAE,GAAGL,gBAAgBM,IAAI;IAC3F,MAAM,CAACC,MAAMC,QAAQ,GAAGV,SAASG,QAAQM,IAAI;IAC7C,MAAM,CAACE,aAAaC,eAAe,GAAGZ,SAASG,QAAQQ,WAAW;IAClE,MAAM,CAACP,QAAQS,UAAU,GAAGb,SAASK;IAErC,iHAAiH;IACjH,MAAM,CAACS,aAAaC,eAAe,GAAGf,SAASO;IAC/C,MAAM,CAACS,gBAAgBC,kBAAkB,GAAGjB,SAASO;IAErD;;;GAGC,GACD,MAAMW,aAAapB,YACjB,CAACQ,SAA6Ba;QAC5B,IAAIA,iBAAiB;YACnBJ,eAAeC;YACfC,kBAAkBG;QACpB,OAAO;YACLH,kBAAkBX,YAAYc,YAAYN,cAAcR;QAC1D;IACF,GACA;QAACW;QAAmBD;QAAgBD;QAAgBD;KAAY;IAGlE,yBAAyB;IACzB,MAAMO,qBAAqBvB,YACzB,CAACI;QACC,MAAM,EAAEC,OAAO,EAAEC,MAAM,EAAEE,OAAO,EAAE,GAAGJ,gBAAgBM,IAAI;QACzDE,QAAQP,QAAQM,IAAI;QACpBG,eAAeT,QAAQQ,WAAW;QAClCE,UAAUT;QACVc,WAAWZ;IACb,GACA;QAACI;QAASE;QAAgBC;QAAWK;KAAW;IAGlD,OAAOnB,QACL,IAAO,CAAA;YACLG,iBAAiB;gBACfoB,MAAM;gBACNd,MAAM;oBACJL,SAAS;wBAAEM;wBAAME;oBAAY;oBAC7BP;oBACAE,SAASU;gBACX;YACF;YACAN;YACAE;YACAM;YACAL;YACAQ;QACF,CAAA,GACA;QAACZ;QAAME;QAAaP;QAAQY;QAAgBN;QAASE;QAAgBM;QAAYL;QAAWQ;KAAmB;AAEnH,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/usePanelEditor.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 { useCallback, useMemo, useState } from 'react';\nimport { PanelDefinition, QueryDefinition } from '@perses-dev/core';\n\n/**\n * UsePanelEditor is used in PanelEditorForm\n * This hook stores the states of panel definition and returns the onChange handlers for each state\n */\nexport const usePanelEditor = (panelDefinition: PanelDefinition) => {\n  const { display, plugin: pluginDefinition, queries: initialQueries, links: initialLinks } = panelDefinition.spec;\n  const [name, setName] = useState(display.name);\n  const [description, setDescription] = useState(display.description);\n  const [links, setLinks] = useState(initialLinks);\n  const [plugin, setPlugin] = useState(pluginDefinition);\n\n  // need to keep track of prevQueries if switching from a panel with no queries (ex: markdown) to one with queries\n  const [prevQueries, setPrevQueries] = useState(initialQueries);\n  const [currentQueries, setCurrentQueries] = useState(initialQueries);\n\n  /**\n   * If hideQueryEditor is true, set panelDefinition.spec.queries to undefined.\n   * If hideQueryEditor is false and query is undefined, set panelDefinition.spec.queries to previous queries.\n   */\n  const setQueries = useCallback(\n    (queries?: QueryDefinition[], hideQueryEditor?: boolean) => {\n      if (hideQueryEditor) {\n        setPrevQueries(currentQueries);\n        setCurrentQueries(undefined);\n      } else {\n        setCurrentQueries(queries === undefined ? prevQueries : queries);\n      }\n    },\n    [setCurrentQueries, currentQueries, setPrevQueries, prevQueries]\n  );\n\n  // reset panel definition\n  const setPanelDefinition = useCallback(\n    (panelDefinition: PanelDefinition) => {\n      const { display, plugin, queries, links } = panelDefinition.spec;\n      setName(display.name);\n      setDescription(display.description);\n      setLinks(links);\n      setPlugin(plugin);\n      setQueries(queries);\n    },\n    [setName, setDescription, setLinks, setPlugin, setQueries]\n  );\n\n  return useMemo(\n    () => ({\n      panelDefinition: {\n        kind: 'Panel',\n        spec: {\n          display: { name, description },\n          plugin,\n          queries: currentQueries,\n          links,\n        },\n      } as PanelDefinition,\n      setName,\n      setDescription,\n      setLinks,\n      setQueries,\n      setPlugin,\n      setPanelDefinition,\n    }),\n    [name, description, links, plugin, currentQueries, setQueries, setPanelDefinition]\n  );\n};\n"],"names":["useCallback","useMemo","useState","usePanelEditor","panelDefinition","display","plugin","pluginDefinition","queries","initialQueries","links","initialLinks","spec","name","setName","description","setDescription","setLinks","setPlugin","prevQueries","setPrevQueries","currentQueries","setCurrentQueries","setQueries","hideQueryEditor","undefined","setPanelDefinition","kind"],"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,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAGvD;;;CAGC,GACD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,OAAO,EAAEC,QAAQC,gBAAgB,EAAEC,SAASC,cAAc,EAAEC,OAAOC,YAAY,EAAE,GAAGP,gBAAgBQ,IAAI;IAChH,MAAM,CAACC,MAAMC,QAAQ,GAAGZ,SAASG,QAAQQ,IAAI;IAC7C,MAAM,CAACE,aAAaC,eAAe,GAAGd,SAASG,QAAQU,WAAW;IAClE,MAAM,CAACL,OAAOO,SAAS,GAAGf,SAASS;IACnC,MAAM,CAACL,QAAQY,UAAU,GAAGhB,SAASK;IAErC,iHAAiH;IACjH,MAAM,CAACY,aAAaC,eAAe,GAAGlB,SAASO;IAC/C,MAAM,CAACY,gBAAgBC,kBAAkB,GAAGpB,SAASO;IAErD;;;GAGC,GACD,MAAMc,aAAavB,YACjB,CAACQ,SAA6BgB;QAC5B,IAAIA,iBAAiB;YACnBJ,eAAeC;YACfC,kBAAkBG;QACpB,OAAO;YACLH,kBAAkBd,YAAYiB,YAAYN,cAAcX;QAC1D;IACF,GACA;QAACc;QAAmBD;QAAgBD;QAAgBD;KAAY;IAGlE,yBAAyB;IACzB,MAAMO,qBAAqB1B,YACzB,CAACI;QACC,MAAM,EAAEC,OAAO,EAAEC,MAAM,EAAEE,OAAO,EAAEE,KAAK,EAAE,GAAGN,gBAAgBQ,IAAI;QAChEE,QAAQT,QAAQQ,IAAI;QACpBG,eAAeX,QAAQU,WAAW;QAClCE,SAASP;QACTQ,UAAUZ;QACViB,WAAWf;IACb,GACA;QAACM;QAASE;QAAgBC;QAAUC;QAAWK;KAAW;IAG5D,OAAOtB,QACL,IAAO,CAAA;YACLG,iBAAiB;gBACfuB,MAAM;gBACNf,MAAM;oBACJP,SAAS;wBAAEQ;wBAAME;oBAAY;oBAC7BT;oBACAE,SAASa;oBACTX;gBACF;YACF;YACAI;YACAE;YACAC;YACAM;YACAL;YACAQ;QACF,CAAA,GACA;QAACb;QAAME;QAAaL;QAAOJ;QAAQe;QAAgBE;QAAYG;KAAmB;AAEtF,EAAE"}

package/dist/components/index.d.ts

@@ -18,7 +18,5 @@ export * from './PanelGroupDialog';
 export * from './QuerySummaryTable';
 export * from './SaveChangesConfirmationDialog';
 export * from './SaveDashboardButton';
-export * from './TimeRangeControls';
-export * from './ToolbarIconButton';
 export * from './Variables';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oCAAoC,CAAC;AACnD,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oCAAoC,CAAC;AACnD,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC"}

package/dist/components/index.js

@@ -30,8 +30,6 @@ export * from './PanelGroupDialog';
 export * from './QuerySummaryTable';
 export * from './SaveChangesConfirmationDialog';
 export * from './SaveDashboardButton';
-export * from './TimeRangeControls';
-export * from './ToolbarIconButton';
 export * from './Variables';
 
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './AddGroupButton';\nexport * from './AddPanelButton';\nexport * from './Dashboard';\nexport * from './DashboardToolbar';\nexport * from './DashboardStickyToolbar';\nexport * from './Datasources';\nexport * from './DeletePanelDialog';\nexport * from './DeletePanelGroupDialog';\nexport * from './DiscardChangesConfirmationDialog';\nexport * from './DownloadButton';\nexport * from './EditJsonButton';\nexport * from './EditJsonDialog';\nexport * from './EmptyDashboard';\nexport * from './GridLayout';\nexport * from './Panel';\nexport * from './PanelDrawer';\nexport * from './PanelGroupDialog';\nexport * from './QuerySummaryTable';\nexport * from './SaveChangesConfirmationDialog';\nexport * from './SaveDashboardButton';\nexport * from './TimeRangeControls';\nexport * from './ToolbarIconButton';\nexport * from './Variables';\n"],"names":[],"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,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,cAAc;AAC5B,cAAc,qBAAqB;AACnC,cAAc,2BAA2B;AACzC,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,2BAA2B;AACzC,cAAc,qCAAqC;AACnD,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,qBAAqB;AACnC,cAAc,sBAAsB;AACpC,cAAc,kCAAkC;AAChD,cAAc,wBAAwB;AACtC,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,cAAc"}
+{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './AddGroupButton';\nexport * from './AddPanelButton';\nexport * from './Dashboard';\nexport * from './DashboardToolbar';\nexport * from './DashboardStickyToolbar';\nexport * from './Datasources';\nexport * from './DeletePanelDialog';\nexport * from './DeletePanelGroupDialog';\nexport * from './DiscardChangesConfirmationDialog';\nexport * from './DownloadButton';\nexport * from './EditJsonButton';\nexport * from './EditJsonDialog';\nexport * from './EmptyDashboard';\nexport * from './GridLayout';\nexport * from './Panel';\nexport * from './PanelDrawer';\nexport * from './PanelGroupDialog';\nexport * from './QuerySummaryTable';\nexport * from './SaveChangesConfirmationDialog';\nexport * from './SaveDashboardButton';\nexport * from './Variables';\n"],"names":[],"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,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,cAAc;AAC5B,cAAc,qBAAqB;AACnC,cAAc,2BAA2B;AACzC,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,2BAA2B;AACzC,cAAc,qCAAqC;AACnD,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,qBAAqB;AACnC,cAAc,sBAAsB;AACpC,cAAc,kCAAkC;AAChD,cAAc,wBAAwB;AACtC,cAAc,cAAc"}

package/dist/constants/user-interface-text.d.ts

@@ -5,8 +5,6 @@ export declare const TOOLTIP_TEXT: {
     editDatasources: string;
     editJson: string;
     editVariables: string;
-    refreshDashboard: string;
-    refreshDashboardInterval: string;
     viewJson: string;
     addPanelToGroup: string;
     deleteGroup: string;

package/dist/constants/user-interface-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-interface-text.d.ts","sourceRoot":"","sources":["../../src/constants/user-interface-text.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;CAyBxB,CAAC;AAEF,eAAO,MAAM,eAAe;iCAEG,MAAM;6BACV,MAAM;2BACR,MAAM;+BACF,MAAM;6BACR,MAAM;2BAER,MAAM;gCACD,MAAM;6BACT,MAAM;2BACR,MAAM;CAC9B,CAAC"}
+{"version":3,"file":"user-interface-text.d.ts","sourceRoot":"","sources":["../../src/constants/user-interface-text.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;CAuBxB,CAAC;AAEF,eAAO,MAAM,eAAe;iCAEG,MAAM;6BACV,MAAM;2BACR,MAAM;+BACF,MAAM;6BACR,MAAM;2BAER,MAAM;gCACD,MAAM;6BACT,MAAM;2BACR,MAAM;CAC9B,CAAC"}

package/dist/constants/user-interface-text.js

@@ -18,8 +18,6 @@ export const TOOLTIP_TEXT = {
     editDatasources: 'Edit datasources',
     editJson: 'Edit JSON',
     editVariables: 'Edit variables',
-    refreshDashboard: 'Refresh dashboard',
-    refreshDashboardInterval: 'Auto refresh interval',
     viewJson: 'View JSON',
     // Group buttons
     addPanelToGroup: 'Add panel to group',

package/dist/constants/user-interface-text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/constants/user-interface-text.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport const TOOLTIP_TEXT = {\n  // Toolbar buttons\n  addPanel: 'Add panel',\n  addGroup: 'Add panel group',\n  downloadDashboard: 'Download JSON',\n  editDatasources: 'Edit datasources',\n  editJson: 'Edit JSON',\n  editVariables: 'Edit variables',\n  refreshDashboard: 'Refresh dashboard',\n  refreshDashboardInterval: 'Auto refresh interval',\n  viewJson: 'View JSON',\n  // Group buttons\n  addPanelToGroup: 'Add panel to group',\n  deleteGroup: 'Delete group',\n  editGroup: 'Edit group',\n  moveGroupDown: 'Move group down',\n  moveGroupUp: 'Move group up',\n  // Panel buttons\n  editPanel: 'Edit',\n  duplicatePanel: 'Duplicate',\n  deletePanel: 'Delete',\n  movePanel: 'Move',\n  // Variable editor buttons\n  refreshVariableValues: 'Refresh values',\n  copyVariableValues: 'Copy values to clipboard',\n};\n\nexport const ARIA_LABEL_TEXT = {\n  // Group buttons\n  addPanelToGroup: (groupName: string) => `add panel to group ${groupName}`,\n  deleteGroup: (groupName: string) => `delete group ${groupName}`,\n  editGroup: (groupName: string) => `edit group ${groupName}`,\n  moveGroupDown: (groupName: string) => `move group ${groupName} down`,\n  moveGroupUp: (groupName: string) => `move group ${groupName} up`,\n  // Panel buttons\n  editPanel: (panelName: string) => `edit panel ${panelName}`,\n  duplicatePanel: (panelName: string) => `duplicate panel ${panelName}`,\n  deletePanel: (panelName: string) => `delete panel ${panelName}`,\n  movePanel: (panelName: string) => `move panel ${panelName}`,\n};\n"],"names":["TOOLTIP_TEXT","addPanel","addGroup","downloadDashboard","editDatasources","editJson","editVariables","refreshDashboard","refreshDashboardInterval","viewJson","addPanelToGroup","deleteGroup","editGroup","moveGroupDown","moveGroupUp","editPanel","duplicatePanel","deletePanel","movePanel","refreshVariableValues","copyVariableValues","ARIA_LABEL_TEXT","groupName","panelName"],"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,OAAO,MAAMA,eAAe;IAC1B,kBAAkB;IAClBC,UAAU;IACVC,UAAU;IACVC,mBAAmB;IACnBC,iBAAiB;IACjBC,UAAU;IACVC,eAAe;IACfC,kBAAkB;IAClBC,0BAA0B;IAC1BC,UAAU;IACV,gBAAgB;IAChBC,iBAAiB;IACjBC,aAAa;IACbC,WAAW;IACXC,eAAe;IACfC,aAAa;IACb,gBAAgB;IAChBC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;IACbC,WAAW;IACX,0BAA0B;IAC1BC,uBAAuB;IACvBC,oBAAoB;AACtB,EAAE;AAEF,OAAO,MAAMC,kBAAkB;IAC7B,gBAAgB;IAChBX,iBAAiB,CAACY,YAAsB,CAAC,mBAAmB,EAAEA,UAAU,CAAC;IACzEX,aAAa,CAACW,YAAsB,CAAC,aAAa,EAAEA,UAAU,CAAC;IAC/DV,WAAW,CAACU,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;IAC3DT,eAAe,CAACS,YAAsB,CAAC,WAAW,EAAEA,UAAU,KAAK,CAAC;IACpER,aAAa,CAACQ,YAAsB,CAAC,WAAW,EAAEA,UAAU,GAAG,CAAC;IAChE,gBAAgB;IAChBP,WAAW,CAACQ,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;IAC3DP,gBAAgB,CAACO,YAAsB,CAAC,gBAAgB,EAAEA,UAAU,CAAC;IACrEN,aAAa,CAACM,YAAsB,CAAC,aAAa,EAAEA,UAAU,CAAC;IAC/DL,WAAW,CAACK,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;AAC7D,EAAE"}
+{"version":3,"sources":["../../src/constants/user-interface-text.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport const TOOLTIP_TEXT = {\n  // Toolbar buttons\n  addPanel: 'Add panel',\n  addGroup: 'Add panel group',\n  downloadDashboard: 'Download JSON',\n  editDatasources: 'Edit datasources',\n  editJson: 'Edit JSON',\n  editVariables: 'Edit variables',\n  viewJson: 'View JSON',\n  // Group buttons\n  addPanelToGroup: 'Add panel to group',\n  deleteGroup: 'Delete group',\n  editGroup: 'Edit group',\n  moveGroupDown: 'Move group down',\n  moveGroupUp: 'Move group up',\n  // Panel buttons\n  editPanel: 'Edit',\n  duplicatePanel: 'Duplicate',\n  deletePanel: 'Delete',\n  movePanel: 'Move',\n  // Variable editor buttons\n  refreshVariableValues: 'Refresh values',\n  copyVariableValues: 'Copy values to clipboard',\n};\n\nexport const ARIA_LABEL_TEXT = {\n  // Group buttons\n  addPanelToGroup: (groupName: string) => `add panel to group ${groupName}`,\n  deleteGroup: (groupName: string) => `delete group ${groupName}`,\n  editGroup: (groupName: string) => `edit group ${groupName}`,\n  moveGroupDown: (groupName: string) => `move group ${groupName} down`,\n  moveGroupUp: (groupName: string) => `move group ${groupName} up`,\n  // Panel buttons\n  editPanel: (panelName: string) => `edit panel ${panelName}`,\n  duplicatePanel: (panelName: string) => `duplicate panel ${panelName}`,\n  deletePanel: (panelName: string) => `delete panel ${panelName}`,\n  movePanel: (panelName: string) => `move panel ${panelName}`,\n};\n"],"names":["TOOLTIP_TEXT","addPanel","addGroup","downloadDashboard","editDatasources","editJson","editVariables","viewJson","addPanelToGroup","deleteGroup","editGroup","moveGroupDown","moveGroupUp","editPanel","duplicatePanel","deletePanel","movePanel","refreshVariableValues","copyVariableValues","ARIA_LABEL_TEXT","groupName","panelName"],"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,OAAO,MAAMA,eAAe;IAC1B,kBAAkB;IAClBC,UAAU;IACVC,UAAU;IACVC,mBAAmB;IACnBC,iBAAiB;IACjBC,UAAU;IACVC,eAAe;IACfC,UAAU;IACV,gBAAgB;IAChBC,iBAAiB;IACjBC,aAAa;IACbC,WAAW;IACXC,eAAe;IACfC,aAAa;IACb,gBAAgB;IAChBC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;IACbC,WAAW;IACX,0BAA0B;IAC1BC,uBAAuB;IACvBC,oBAAoB;AACtB,EAAE;AAEF,OAAO,MAAMC,kBAAkB;IAC7B,gBAAgB;IAChBX,iBAAiB,CAACY,YAAsB,CAAC,mBAAmB,EAAEA,UAAU,CAAC;IACzEX,aAAa,CAACW,YAAsB,CAAC,aAAa,EAAEA,UAAU,CAAC;IAC/DV,WAAW,CAACU,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;IAC3DT,eAAe,CAACS,YAAsB,CAAC,WAAW,EAAEA,UAAU,KAAK,CAAC;IACpER,aAAa,CAACQ,YAAsB,CAAC,WAAW,EAAEA,UAAU,GAAG,CAAC;IAChE,gBAAgB;IAChBP,WAAW,CAACQ,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;IAC3DP,gBAAgB,CAACO,YAAsB,CAAC,gBAAgB,EAAEA,UAAU,CAAC;IACrEN,aAAa,CAACM,YAAsB,CAAC,aAAa,EAAEA,UAAU,CAAC;IAC/DL,WAAW,CAACK,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;AAC7D,EAAE"}

package/dist/context/DatasourceStoreProvider.js

@@ -93,7 +93,9 @@ import { DatasourceStoreContext, usePluginRegistry } from '@perses-dev/plugin-sy
     ]);
     const listDatasourceSelectItems = useEvent(async (datasourcePluginKind)=>{
         const [pluginMetadata, datasources, globalDatasources] = await Promise.all([
-            listPluginMetadata('Datasource'),
+            listPluginMetadata([
+                'Datasource'
+            ]),
             project ? datasourceApi.listDatasources(project, datasourcePluginKind) : [],
             datasourceApi.listGlobalDatasources(datasourcePluginKind)
         ]);