@perses-dev/dashboards 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-histogram-types-78c5104

package/dist/components/Datasources/EditDatasourcesButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Datasources/EditDatasourcesButton.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 { Button } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { DashboardResource, DatasourceSpec, EphemeralDashboardResource } from '@perses-dev/core';\nimport { useDatasourceStore } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboard } from '../../context';\nimport { DatasourceEditor } from './DatasourceEditor';\n\nexport function EditDatasourcesButton() {\n  const [isDatasourceEditorOpen, setIsDatasourceEditorOpen] = useState(false);\n  const { getLocalDatasources, setLocalDatasources, getSavedDatasources, setSavedDatasources } = useDatasourceStore();\n  const localDatasources: Record<string, DatasourceSpec> = getLocalDatasources();\n  const savedDatasources: Record<string, DatasourceSpec> = getSavedDatasources();\n  const { dashboard, setDashboard } = useDashboard();\n\n  const openDatasourceEditor = () => {\n    setIsDatasourceEditorOpen(true);\n  };\n\n  const closeDatasourceEditor = () => {\n    setIsDatasourceEditorOpen(false);\n  };\n\n  const handleChangeDatasources = (datasources: Record<string, DatasourceSpec>) => {\n    // Calculates the new list of datasources that are allowed to be used.\n    const newSavedDatasources: Record<string, DatasourceSpec> = Object.keys(datasources)\n      .filter((key) => {\n        // Datasources are allowed to be used if a) they are direct, or b) they are proxied, and their\n        // proxy is the same as what we have saved.\n        const isDirect = 'directUrl' in (datasources[key]?.plugin?.spec ?? {});\n        const isSavedProxy =\n          !isDirect &&\n          !('directUrl' in (savedDatasources[key]?.plugin?.spec ?? {})) &&\n          datasources[key]?.plugin?.spec?.proxy === savedDatasources[key]?.plugin?.spec?.proxy;\n\n        return isDirect || isSavedProxy;\n      })\n      .reduce(\n        (obj, key) => {\n          obj[key] = datasources[key] as DatasourceSpec;\n\n          return obj;\n        },\n        {} as Record<string, DatasourceSpec>\n      );\n\n    setDashboard(\n      dashboard.kind === 'Dashboard'\n        ? ({\n            ...dashboard,\n            spec: {\n              ...dashboard.spec,\n              datasources: datasources,\n            },\n          } as DashboardResource)\n        : ({\n            ...dashboard,\n            spec: {\n              ...dashboard.spec,\n              datasources: datasources,\n            },\n          } as EphemeralDashboardResource)\n    );\n    setSavedDatasources(newSavedDatasources);\n    setLocalDatasources(datasources);\n    setIsDatasourceEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editDatasources}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openDatasourceEditor}\n          aria-label={TOOLTIP_TEXT.editDatasources}\n          variant=\"text\"\n          color=\"primary\"\n          sx={editButtonStyle}\n        >\n          Datasources\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isDatasourceEditorOpen}\n        onClose={closeDatasourceEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"datasource-editor\"\n      >\n        <DatasourceEditor\n          datasources={localDatasources}\n          onCancel={closeDatasourceEditor}\n          onChange={handleChangeDatasources}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","useDatasourceStore","TOOLTIP_TEXT","editButtonStyle","useDashboard","DatasourceEditor","EditDatasourcesButton","isDatasourceEditorOpen","setIsDatasourceEditorOpen","getLocalDatasources","setLocalDatasources","getSavedDatasources","setSavedDatasources","localDatasources","savedDatasources","dashboard","setDashboard","openDatasourceEditor","closeDatasourceEditor","handleChangeDatasources","datasources","newSavedDatasources","Object","keys","filter","key","isDirect","plugin","spec","isSavedProxy","proxy","reduce","obj","kind","description","editDatasources","startIcon","onClick","aria-label","variant","color","sx","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Datasources/EditDatasourcesButton.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, useState } from 'react';\nimport { Button } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { DashboardResource, DatasourceSpec, EphemeralDashboardResource } from '@perses-dev/core';\nimport { useDatasourceStore } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboard } from '../../context';\nimport { DatasourceEditor } from './DatasourceEditor';\n\nexport function EditDatasourcesButton(): ReactElement {\n  const [isDatasourceEditorOpen, setIsDatasourceEditorOpen] = useState(false);\n  const { getLocalDatasources, setLocalDatasources, getSavedDatasources, setSavedDatasources } = useDatasourceStore();\n  const localDatasources: Record<string, DatasourceSpec> = getLocalDatasources();\n  const savedDatasources: Record<string, DatasourceSpec> = getSavedDatasources();\n  const { dashboard, setDashboard } = useDashboard();\n\n  const openDatasourceEditor = (): void => {\n    setIsDatasourceEditorOpen(true);\n  };\n\n  const closeDatasourceEditor = (): void => {\n    setIsDatasourceEditorOpen(false);\n  };\n\n  const handleChangeDatasources = (datasources: Record<string, DatasourceSpec>): void => {\n    // Calculates the new list of datasources that are allowed to be used.\n    const newSavedDatasources: Record<string, DatasourceSpec> = Object.keys(datasources)\n      .filter((key) => {\n        // Datasources are allowed to be used if a) they are direct, or b) they are proxied, and their\n        // proxy is the same as what we have saved.\n        const isDirect = 'directUrl' in (datasources[key]?.plugin?.spec ?? {});\n        const isSavedProxy =\n          !isDirect &&\n          !('directUrl' in (savedDatasources[key]?.plugin?.spec ?? {})) &&\n          datasources[key]?.plugin?.spec?.proxy === savedDatasources[key]?.plugin?.spec?.proxy;\n\n        return isDirect || isSavedProxy;\n      })\n      .reduce(\n        (obj, key) => {\n          obj[key] = datasources[key] as DatasourceSpec;\n\n          return obj;\n        },\n        {} as Record<string, DatasourceSpec>\n      );\n\n    setDashboard(\n      dashboard.kind === 'Dashboard'\n        ? ({\n            ...dashboard,\n            spec: {\n              ...dashboard.spec,\n              datasources: datasources,\n            },\n          } as DashboardResource)\n        : ({\n            ...dashboard,\n            spec: {\n              ...dashboard.spec,\n              datasources: datasources,\n            },\n          } as EphemeralDashboardResource)\n    );\n    setSavedDatasources(newSavedDatasources);\n    setLocalDatasources(datasources);\n    setIsDatasourceEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editDatasources}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openDatasourceEditor}\n          aria-label={TOOLTIP_TEXT.editDatasources}\n          variant=\"text\"\n          color=\"primary\"\n          sx={editButtonStyle}\n        >\n          Datasources\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isDatasourceEditorOpen}\n        onClose={closeDatasourceEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"datasource-editor\"\n      >\n        <DatasourceEditor\n          datasources={localDatasources}\n          onCancel={closeDatasourceEditor}\n          onChange={handleChangeDatasources}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","useDatasourceStore","TOOLTIP_TEXT","editButtonStyle","useDashboard","DatasourceEditor","EditDatasourcesButton","isDatasourceEditorOpen","setIsDatasourceEditorOpen","getLocalDatasources","setLocalDatasources","getSavedDatasources","setSavedDatasources","localDatasources","savedDatasources","dashboard","setDashboard","openDatasourceEditor","closeDatasourceEditor","handleChangeDatasources","datasources","newSavedDatasources","Object","keys","filter","key","isDirect","plugin","spec","isSavedProxy","proxy","reduce","obj","kind","description","editDatasources","startIcon","onClick","aria-label","variant","color","sx","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange"],"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,MAAM,QAAQ,gBAAgB;AACvC,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,yBAAyB;AAE7D,SAASC,kBAAkB,QAAQ,4BAA4B;AAC/D,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,OAAO,SAASC;IACd,MAAM,CAACC,wBAAwBC,0BAA0B,GAAGZ,SAAS;IACrE,MAAM,EAAEa,mBAAmB,EAAEC,mBAAmB,EAAEC,mBAAmB,EAAEC,mBAAmB,EAAE,GAAGX;IAC/F,MAAMY,mBAAmDJ;IACzD,MAAMK,mBAAmDH;IACzD,MAAM,EAAEI,SAAS,EAAEC,YAAY,EAAE,GAAGZ;IAEpC,MAAMa,uBAAuB;QAC3BT,0BAA0B;IAC5B;IAEA,MAAMU,wBAAwB;QAC5BV,0BAA0B;IAC5B;IAEA,MAAMW,0BAA0B,CAACC;QAC/B,sEAAsE;QACtE,MAAMC,sBAAsDC,OAAOC,IAAI,CAACH,aACrEI,MAAM,CAAC,CAACC;YACP,8FAA8F;YAC9F,2CAA2C;YAC3C,MAAMC,WAAW,eAAgBN,CAAAA,WAAW,CAACK,IAAI,EAAEE,QAAQC,QAAQ,CAAC,CAAA;YACpE,MAAMC,eACJ,CAACH,YACD,CAAE,CAAA,eAAgBZ,CAAAA,gBAAgB,CAACW,IAAI,EAAEE,QAAQC,QAAQ,CAAC,CAAA,CAAC,KAC3DR,WAAW,CAACK,IAAI,EAAEE,QAAQC,MAAME,UAAUhB,gBAAgB,CAACW,IAAI,EAAEE,QAAQC,MAAME;YAEjF,OAAOJ,YAAYG;QACrB,GACCE,MAAM,CACL,CAACC,KAAKP;YACJO,GAAG,CAACP,IAAI,GAAGL,WAAW,CAACK,IAAI;YAE3B,OAAOO;QACT,GACA,CAAC;QAGLhB,aACED,UAAUkB,IAAI,KAAK,cACd;YACC,GAAGlB,SAAS;YACZa,MAAM;gBACJ,GAAGb,UAAUa,IAAI;gBACjBR,aAAaA;YACf;QACF,IACC;YACC,GAAGL,SAAS;YACZa,MAAM;gBACJ,GAAGb,UAAUa,IAAI;gBACjBR,aAAaA;YACf;QACF;QAENR,oBAAoBS;QACpBX,oBAAoBU;QACpBZ,0BAA0B;IAC5B;IAEA,qBACE;;0BACE,KAACR;gBAAYkC,aAAahC,aAAaiC,eAAe;0BACpD,cAAA,KAACtC;oBACCuC,yBAAW,KAACtC;oBACZuC,SAASpB;oBACTqB,cAAYpC,aAAaiC,eAAe;oBACxCI,SAAQ;oBACRC,OAAM;oBACNC,IAAItC;8BACL;;;0BAIH,KAACJ;gBACC2C,QAAQnC;gBACRoC,SAASzB;gBACT0B,YAAY;oBAAEH,IAAI;wBAAEI,OAAO;oBAAM;gBAAE;gBACnCC,eAAY;0BAEZ,cAAA,KAACzC;oBACCe,aAAaP;oBACbkC,UAAU7B;oBACV8B,UAAU7B;;;;;AAKpB"}

package/dist/components/DeletePanelDialog/DeletePanelDialog.d.ts

@@ -1,2 +1,3 @@
-export declare const DeletePanelDialog: () => import("react/jsx-runtime").JSX.Element;
+import { ReactElement } from 'react';
+export declare const DeletePanelDialog: () => ReactElement;
 //# sourceMappingURL=DeletePanelDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DeletePanelDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DeletePanelDialog/DeletePanelDialog.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,iBAAiB,+CAS7B,CAAC"}
+{"version":3,"file":"DeletePanelDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DeletePanelDialog/DeletePanelDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,YAAY,EAAE,MAAM,OAAO,CAAC;AAIhD,eAAO,MAAM,iBAAiB,QAAO,YASpC,CAAC"}

package/dist/components/DeletePanelDialog/DeletePanelDialog.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog } from '@perses-dev/components';
-import { useDeletePanelDialog } from '../../context';
+import { useDeletePanelDialog, useViewPanel } from '../../context';
 export const DeletePanelDialog = ()=>{
     const { deletePanelDialog, closeDeletePanelDialog } = useDeletePanelDialog();
     return /*#__PURE__*/ _jsxs(Dialog, {
@@ -30,11 +30,13 @@ export const DeletePanelDialog = ()=>{
 };
 const DeletePanelForm = ({ deletePanelDialog })=>{
     const { deletePanel, closeDeletePanelDialog } = useDeletePanelDialog();
+    const { setViewPanel } = useViewPanel();
     const handleDelete = (e)=>{
         e.preventDefault();
         const { panelGroupItemId } = deletePanelDialog;
         deletePanel(panelGroupItemId);
         closeDeletePanelDialog();
+        setViewPanel(undefined);
     };
     return /*#__PURE__*/ _jsxs("form", {
         onSubmit: handleDelete,

package/dist/components/DeletePanelDialog/DeletePanelDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DeletePanelDialog/DeletePanelDialog.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 { FormEvent } from 'react';\nimport { Dialog } from '@perses-dev/components';\nimport { useDeletePanelDialog, DeletePanelDialogState } from '../../context';\n\nexport const DeletePanelDialog = () => {\n  const { deletePanelDialog, closeDeletePanelDialog } = useDeletePanelDialog();\n\n  return (\n    <Dialog open={deletePanelDialog !== undefined}>\n      <Dialog.Header onClose={() => closeDeletePanelDialog()}>Delete Panel</Dialog.Header>\n      {deletePanelDialog && <DeletePanelForm deletePanelDialog={deletePanelDialog} />}\n    </Dialog>\n  );\n};\n\ninterface DeletePanelFormProps {\n  deletePanelDialog: DeletePanelDialogState;\n}\n\nconst DeletePanelForm = ({ deletePanelDialog }: DeletePanelFormProps) => {\n  const { deletePanel, closeDeletePanelDialog } = useDeletePanelDialog();\n\n  const handleDelete = (e: FormEvent) => {\n    e.preventDefault();\n    const { panelGroupItemId } = deletePanelDialog;\n    deletePanel(panelGroupItemId);\n    closeDeletePanelDialog();\n  };\n  return (\n    <form onSubmit={handleDelete}>\n      <Dialog.Content>\n        Are you sure you want to delete {deletePanelDialog.panelName} from {deletePanelDialog.panelGroupName}? This\n        action cannot be undone.\n      </Dialog.Content>\n      <Dialog.Actions>\n        <Dialog.PrimaryButton>Delete</Dialog.PrimaryButton>\n        <Dialog.SecondaryButton onClick={() => closeDeletePanelDialog()}>Cancel</Dialog.SecondaryButton>\n      </Dialog.Actions>\n    </form>\n  );\n};\n"],"names":["Dialog","useDeletePanelDialog","DeletePanelDialog","deletePanelDialog","closeDeletePanelDialog","open","undefined","Header","onClose","DeletePanelForm","deletePanel","handleDelete","e","preventDefault","panelGroupItemId","form","onSubmit","Content","panelName","panelGroupName","Actions","PrimaryButton","SecondaryButton","onClick"],"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,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,oBAAoB,QAAgC,gBAAgB;AAE7E,OAAO,MAAMC,oBAAoB;IAC/B,MAAM,EAAEC,iBAAiB,EAAEC,sBAAsB,EAAE,GAAGH;IAEtD,qBACE,MAACD;QAAOK,MAAMF,sBAAsBG;;0BAClC,KAACN,OAAOO,MAAM;gBAACC,SAAS,IAAMJ;0BAA0B;;YACvDD,mCAAqB,KAACM;gBAAgBN,mBAAmBA;;;;AAGhE,EAAE;AAMF,MAAMM,kBAAkB,CAAC,EAAEN,iBAAiB,EAAwB;IAClE,MAAM,EAAEO,WAAW,EAAEN,sBAAsB,EAAE,GAAGH;IAEhD,MAAMU,eAAe,CAACC;QACpBA,EAAEC,cAAc;QAChB,MAAM,EAAEC,gBAAgB,EAAE,GAAGX;QAC7BO,YAAYI;QACZV;IACF;IACA,qBACE,MAACW;QAAKC,UAAUL;;0BACd,MAACX,OAAOiB,OAAO;;oBAAC;oBACmBd,kBAAkBe,SAAS;oBAAC;oBAAOf,kBAAkBgB,cAAc;oBAAC;;;0BAGvG,MAACnB,OAAOoB,OAAO;;kCACb,KAACpB,OAAOqB,aAAa;kCAAC;;kCACtB,KAACrB,OAAOsB,eAAe;wBAACC,SAAS,IAAMnB;kCAA0B;;;;;;AAIzE"}
+{"version":3,"sources":["../../../src/components/DeletePanelDialog/DeletePanelDialog.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 { FormEvent, ReactElement } from 'react';\nimport { Dialog } from '@perses-dev/components';\nimport { useDeletePanelDialog, DeletePanelDialogState, useViewPanel } from '../../context';\n\nexport const DeletePanelDialog = (): ReactElement => {\n  const { deletePanelDialog, closeDeletePanelDialog } = useDeletePanelDialog();\n\n  return (\n    <Dialog open={deletePanelDialog !== undefined}>\n      <Dialog.Header onClose={() => closeDeletePanelDialog()}>Delete Panel</Dialog.Header>\n      {deletePanelDialog && <DeletePanelForm deletePanelDialog={deletePanelDialog} />}\n    </Dialog>\n  );\n};\n\ninterface DeletePanelFormProps {\n  deletePanelDialog: DeletePanelDialogState;\n}\n\nconst DeletePanelForm = ({ deletePanelDialog }: DeletePanelFormProps): ReactElement => {\n  const { deletePanel, closeDeletePanelDialog } = useDeletePanelDialog();\n  const { setViewPanel } = useViewPanel();\n\n  const handleDelete = (e: FormEvent): void => {\n    e.preventDefault();\n    const { panelGroupItemId } = deletePanelDialog;\n    deletePanel(panelGroupItemId);\n    closeDeletePanelDialog();\n    setViewPanel(undefined);\n  };\n\n  return (\n    <form onSubmit={handleDelete}>\n      <Dialog.Content>\n        Are you sure you want to delete {deletePanelDialog.panelName} from {deletePanelDialog.panelGroupName}? This\n        action cannot be undone.\n      </Dialog.Content>\n      <Dialog.Actions>\n        <Dialog.PrimaryButton>Delete</Dialog.PrimaryButton>\n        <Dialog.SecondaryButton onClick={() => closeDeletePanelDialog()}>Cancel</Dialog.SecondaryButton>\n      </Dialog.Actions>\n    </form>\n  );\n};\n"],"names":["Dialog","useDeletePanelDialog","useViewPanel","DeletePanelDialog","deletePanelDialog","closeDeletePanelDialog","open","undefined","Header","onClose","DeletePanelForm","deletePanel","setViewPanel","handleDelete","e","preventDefault","panelGroupItemId","form","onSubmit","Content","panelName","panelGroupName","Actions","PrimaryButton","SecondaryButton","onClick"],"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,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,oBAAoB,EAA0BC,YAAY,QAAQ,gBAAgB;AAE3F,OAAO,MAAMC,oBAAoB;IAC/B,MAAM,EAAEC,iBAAiB,EAAEC,sBAAsB,EAAE,GAAGJ;IAEtD,qBACE,MAACD;QAAOM,MAAMF,sBAAsBG;;0BAClC,KAACP,OAAOQ,MAAM;gBAACC,SAAS,IAAMJ;0BAA0B;;YACvDD,mCAAqB,KAACM;gBAAgBN,mBAAmBA;;;;AAGhE,EAAE;AAMF,MAAMM,kBAAkB,CAAC,EAAEN,iBAAiB,EAAwB;IAClE,MAAM,EAAEO,WAAW,EAAEN,sBAAsB,EAAE,GAAGJ;IAChD,MAAM,EAAEW,YAAY,EAAE,GAAGV;IAEzB,MAAMW,eAAe,CAACC;QACpBA,EAAEC,cAAc;QAChB,MAAM,EAAEC,gBAAgB,EAAE,GAAGZ;QAC7BO,YAAYK;QACZX;QACAO,aAAaL;IACf;IAEA,qBACE,MAACU;QAAKC,UAAUL;;0BACd,MAACb,OAAOmB,OAAO;;oBAAC;oBACmBf,kBAAkBgB,SAAS;oBAAC;oBAAOhB,kBAAkBiB,cAAc;oBAAC;;;0BAGvG,MAACrB,OAAOsB,OAAO;;kCACb,KAACtB,OAAOuB,aAAa;kCAAC;;kCACtB,KAACvB,OAAOwB,eAAe;wBAACC,SAAS,IAAMpB;kCAA0B;;;;;;AAIzE"}

package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.d.ts

@@ -1,2 +1,3 @@
-export declare const DeletePanelGroupDialog: () => import("react/jsx-runtime").JSX.Element;
+import { ReactElement } from 'react';
+export declare const DeletePanelGroupDialog: () => ReactElement;
 //# sourceMappingURL=DeletePanelGroupDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DeletePanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DeletePanelGroupDialog/DeletePanelGroupDialog.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,sBAAsB,+CA4ClC,CAAC"}
+{"version":3,"file":"DeletePanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DeletePanelGroupDialog/DeletePanelGroupDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,YAAY,EAAE,MAAM,OAAO,CAAC;AAKhD,eAAO,MAAM,sBAAsB,QAAO,YA6CzC,CAAC"}

package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js

@@ -13,19 +13,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
 import CloseIcon from 'mdi-material-ui/Close';
-import { useDeletePanelGroupDialog } from '../../context';
+import { useDeletePanelGroupDialog, useViewPanel } from '../../context';
 export const DeletePanelGroupDialog = ()=>{
     const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = useDeletePanelGroupDialog();
-    const panelGroupId = deletePanelGroupDialog === null || deletePanelGroupDialog === void 0 ? void 0 : deletePanelGroupDialog.panelGroupId;
+    const { setViewPanel } = useViewPanel();
+    const panelGroupId = deletePanelGroupDialog?.panelGroupId;
     const handleDelete = (e)=>{
         e.preventDefault();
-        if (panelGroupId == undefined) {
+        if (panelGroupId === undefined) {
             throw new Error('group index is undefined');
         }
         deletePanelGroup(panelGroupId);
         closeDeletePanelGroupDialog();
+        setViewPanel(undefined);
     };
-    var _deletePanelGroupDialog_panelGroupName;
     return /*#__PURE__*/ _jsxs(Dialog, {
         open: deletePanelGroupDialog !== undefined,
         children: [
@@ -52,7 +53,7 @@ export const DeletePanelGroupDialog = ()=>{
                         },
                         children: [
                             "Are you sure you want to delete ",
-                            (_deletePanelGroupDialog_panelGroupName = deletePanelGroupDialog === null || deletePanelGroupDialog === void 0 ? void 0 : deletePanelGroupDialog.panelGroupName) !== null && _deletePanelGroupDialog_panelGroupName !== void 0 ? _deletePanelGroupDialog_panelGroupName : 'panel group',
+                            deletePanelGroupDialog?.panelGroupName ?? 'panel group',
                             "? This will delete all the panels within the group."
                         ]
                     }),

package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DeletePanelGroupDialog/DeletePanelGroupDialog.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 { FormEvent } from 'react';\nimport { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useDeletePanelGroupDialog } from '../../context';\n\nexport const DeletePanelGroupDialog = () => {\n  const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = useDeletePanelGroupDialog();\n\n  const panelGroupId = deletePanelGroupDialog?.panelGroupId;\n\n  const handleDelete = (e: FormEvent) => {\n    e.preventDefault();\n    if (panelGroupId == undefined) {\n      throw new Error('group index is undefined');\n    }\n    deletePanelGroup(panelGroupId);\n    closeDeletePanelGroupDialog();\n  };\n\n  return (\n    <Dialog open={deletePanelGroupDialog !== undefined}>\n      <DialogTitle>Delete Panel Group</DialogTitle>\n      <IconButton\n        aria-label=\"Close\"\n        onClick={() => closeDeletePanelGroupDialog()}\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      <form onSubmit={handleDelete}>\n        <DialogContent dividers sx={{ width: '500px' }}>\n          Are you sure you want to delete {deletePanelGroupDialog?.panelGroupName ?? 'panel group'}? This will delete\n          all the panels within the group.\n        </DialogContent>\n        <DialogActions>\n          <Button variant=\"contained\" type=\"submit\">\n            Delete\n          </Button>\n          <Button variant=\"outlined\" color=\"secondary\" onClick={() => closeDeletePanelGroupDialog()}>\n            Cancel\n          </Button>\n        </DialogActions>\n      </form>\n    </Dialog>\n  );\n};\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useDeletePanelGroupDialog","DeletePanelGroupDialog","deletePanelGroupDialog","closeDeletePanelGroupDialog","deletePanelGroup","panelGroupId","handleDelete","e","preventDefault","undefined","Error","open","aria-label","onClick","sx","theme","position","top","spacing","right","form","onSubmit","dividers","width","panelGroupName","variant","type","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;;AAGjC,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,gBAAgB;AACtG,OAAOC,eAAe,wBAAwB;AAC9C,SAASC,yBAAyB,QAAQ,gBAAgB;AAE1D,OAAO,MAAMC,yBAAyB;IACpC,MAAM,EAAEC,sBAAsB,EAAEC,2BAA2B,EAAEC,gBAAgB,EAAE,GAAGJ;IAElF,MAAMK,eAAeH,mCAAAA,6CAAAA,uBAAwBG,YAAY;IAEzD,MAAMC,eAAe,CAACC;QACpBA,EAAEC,cAAc;QAChB,IAAIH,gBAAgBI,WAAW;YAC7B,MAAM,IAAIC,MAAM;QAClB;QACAN,iBAAiBC;QACjBF;IACF;QAkByCD;IAhBzC,qBACE,MAACR;QAAOiB,MAAMT,2BAA2BO;;0BACvC,KAACd;0BAAY;;0BACb,KAACF;gBACCmB,cAAW;gBACXC,SAAS,IAAMV;gBACfW,IAAI,CAACC,QAAW,CAAA;wBACdC,UAAU;wBACVC,KAAKF,MAAMG,OAAO,CAAC;wBACnBC,OAAOJ,MAAMG,OAAO,CAAC;oBACvB,CAAA;0BAEA,cAAA,KAACnB;;0BAEH,MAACqB;gBAAKC,UAAUf;;kCACd,MAACV;wBAAc0B,QAAQ;wBAACR,IAAI;4BAAES,OAAO;wBAAQ;;4BAAG;4BACbrB,CAAAA,yCAAAA,mCAAAA,6CAAAA,uBAAwBsB,cAAc,cAAtCtB,oDAAAA,yCAA0C;4BAAc;;;kCAG3F,MAACL;;0CACC,KAACC;gCAAO2B,SAAQ;gCAAYC,MAAK;0CAAS;;0CAG1C,KAAC5B;gCAAO2B,SAAQ;gCAAWE,OAAM;gCAAYd,SAAS,IAAMV;0CAA+B;;;;;;;;AAOrG,EAAE"}
+{"version":3,"sources":["../../../src/components/DeletePanelGroupDialog/DeletePanelGroupDialog.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 { FormEvent, ReactElement } from 'react';\nimport { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useDeletePanelGroupDialog, useViewPanel } from '../../context';\n\nexport const DeletePanelGroupDialog = (): ReactElement => {\n  const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = useDeletePanelGroupDialog();\n  const { setViewPanel } = useViewPanel();\n  const panelGroupId = deletePanelGroupDialog?.panelGroupId;\n\n  const handleDelete = (e: FormEvent): void => {\n    e.preventDefault();\n    if (panelGroupId === undefined) {\n      throw new Error('group index is undefined');\n    }\n    deletePanelGroup(panelGroupId);\n    closeDeletePanelGroupDialog();\n    setViewPanel(undefined);\n  };\n\n  return (\n    <Dialog open={deletePanelGroupDialog !== undefined}>\n      <DialogTitle>Delete Panel Group</DialogTitle>\n      <IconButton\n        aria-label=\"Close\"\n        onClick={() => closeDeletePanelGroupDialog()}\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      <form onSubmit={handleDelete}>\n        <DialogContent dividers sx={{ width: '500px' }}>\n          Are you sure you want to delete {deletePanelGroupDialog?.panelGroupName ?? 'panel group'}? This will delete\n          all the panels within the group.\n        </DialogContent>\n        <DialogActions>\n          <Button variant=\"contained\" type=\"submit\">\n            Delete\n          </Button>\n          <Button variant=\"outlined\" color=\"secondary\" onClick={() => closeDeletePanelGroupDialog()}>\n            Cancel\n          </Button>\n        </DialogActions>\n      </form>\n    </Dialog>\n  );\n};\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useDeletePanelGroupDialog","useViewPanel","DeletePanelGroupDialog","deletePanelGroupDialog","closeDeletePanelGroupDialog","deletePanelGroup","setViewPanel","panelGroupId","handleDelete","e","preventDefault","undefined","Error","open","aria-label","onClick","sx","theme","position","top","spacing","right","form","onSubmit","dividers","width","panelGroupName","variant","type","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;;AAGjC,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,gBAAgB;AACtG,OAAOC,eAAe,wBAAwB;AAC9C,SAASC,yBAAyB,EAAEC,YAAY,QAAQ,gBAAgB;AAExE,OAAO,MAAMC,yBAAyB;IACpC,MAAM,EAAEC,sBAAsB,EAAEC,2BAA2B,EAAEC,gBAAgB,EAAE,GAAGL;IAClF,MAAM,EAAEM,YAAY,EAAE,GAAGL;IACzB,MAAMM,eAAeJ,wBAAwBI;IAE7C,MAAMC,eAAe,CAACC;QACpBA,EAAEC,cAAc;QAChB,IAAIH,iBAAiBI,WAAW;YAC9B,MAAM,IAAIC,MAAM;QAClB;QACAP,iBAAiBE;QACjBH;QACAE,aAAaK;IACf;IAEA,qBACE,MAACjB;QAAOmB,MAAMV,2BAA2BQ;;0BACvC,KAAChB;0BAAY;;0BACb,KAACF;gBACCqB,cAAW;gBACXC,SAAS,IAAMX;gBACfY,IAAI,CAACC,QAAW,CAAA;wBACdC,UAAU;wBACVC,KAAKF,MAAMG,OAAO,CAAC;wBACnBC,OAAOJ,MAAMG,OAAO,CAAC;oBACvB,CAAA;0BAEA,cAAA,KAACrB;;0BAEH,MAACuB;gBAAKC,UAAUf;;kCACd,MAACZ;wBAAc4B,QAAQ;wBAACR,IAAI;4BAAES,OAAO;wBAAQ;;4BAAG;4BACbtB,wBAAwBuB,kBAAkB;4BAAc;;;kCAG3F,MAAC7B;;0CACC,KAACC;gCAAO6B,SAAQ;gCAAYC,MAAK;0CAAS;;0CAG1C,KAAC9B;gCAAO6B,SAAQ;gCAAWE,OAAM;gCAAYd,SAAS,IAAMX;0CAA+B;;;;;;;;AAOrG,EAAE"}

package/dist/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.d.ts

@@ -1,2 +1,3 @@
-export declare const DashboardDiscardChangesConfirmationDialog: () => import("react/jsx-runtime").JSX.Element | null;
+import { ReactElement } from 'react';
+export declare const DashboardDiscardChangesConfirmationDialog: () => ReactElement | null;
 //# sourceMappingURL=DiscardChangesConfirmationDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DiscardChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.tsx"],"names":[],"mappings":"AAgBA,eAAO,MAAM,yCAAyC,sDAgBrD,CAAC"}
+{"version":3,"file":"DiscardChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,eAAO,MAAM,yCAAyC,QAAO,YAAY,GAAG,IAgB3E,CAAC"}

package/dist/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.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 { DiscardChangesConfirmationDialog } from '@perses-dev/components';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport const DashboardDiscardChangesConfirmationDialog = () => {\n  const { discardChangesConfirmationDialog: dialog } = useDiscardChangesConfirmationDialog();\n  if (dialog === undefined) {\n    return null;\n  }\n  return (\n    <DiscardChangesConfirmationDialog\n      description={\n        dialog.description ||\n        'You have unsaved changes in this dashboard. Are you sure you want to discard these changes? Changes cannot be recovered.'\n      }\n      isOpen={true}\n      onCancel={dialog.onCancel}\n      onDiscardChanges={dialog.onDiscardChanges}\n    />\n  );\n};\n"],"names":["DiscardChangesConfirmationDialog","useDiscardChangesConfirmationDialog","DashboardDiscardChangesConfirmationDialog","discardChangesConfirmationDialog","dialog","undefined","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,SAASA,gCAAgC,QAAQ,yBAAyB;AAC1E,SAASC,mCAAmC,QAAQ,gBAAgB;AAEpE,OAAO,MAAMC,4CAA4C;IACvD,MAAM,EAAEC,kCAAkCC,MAAM,EAAE,GAAGH;IACrD,IAAIG,WAAWC,WAAW;QACxB,OAAO;IACT;IACA,qBACE,KAACL;QACCM,aACEF,OAAOE,WAAW,IAClB;QAEFC,QAAQ;QACRC,UAAUJ,OAAOI,QAAQ;QACzBC,kBAAkBL,OAAOK,gBAAgB;;AAG/C,EAAE"}
+{"version":3,"sources":["../../../src/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.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 { DiscardChangesConfirmationDialog } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport const DashboardDiscardChangesConfirmationDialog = (): ReactElement | null => {\n  const { discardChangesConfirmationDialog: dialog } = useDiscardChangesConfirmationDialog();\n  if (dialog === undefined) {\n    return null;\n  }\n  return (\n    <DiscardChangesConfirmationDialog\n      description={\n        dialog.description ||\n        'You have unsaved changes in this dashboard. Are you sure you want to discard these changes? Changes cannot be recovered.'\n      }\n      isOpen={true}\n      onCancel={dialog.onCancel}\n      onDiscardChanges={dialog.onDiscardChanges}\n    />\n  );\n};\n"],"names":["DiscardChangesConfirmationDialog","useDiscardChangesConfirmationDialog","DashboardDiscardChangesConfirmationDialog","discardChangesConfirmationDialog","dialog","undefined","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,SAASA,gCAAgC,QAAQ,yBAAyB;AAE1E,SAASC,mCAAmC,QAAQ,gBAAgB;AAEpE,OAAO,MAAMC,4CAA4C;IACvD,MAAM,EAAEC,kCAAkCC,MAAM,EAAE,GAAGH;IACrD,IAAIG,WAAWC,WAAW;QACxB,OAAO;IACT;IACA,qBACE,KAACL;QACCM,aACEF,OAAOE,WAAW,IAClB;QAEFC,QAAQ;QACRC,UAAUJ,OAAOI,QAAQ;QACzBC,kBAAkBL,OAAOK,gBAAgB;;AAG/C,EAAE"}

package/dist/components/DownloadButton/DownloadButton.d.ts

@@ -1,6 +1,3 @@
-interface DownloadButtonProps {
-    heightPx?: number;
-}
-export declare function DownloadButton({ heightPx }: DownloadButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};
+import { ReactElement } from 'react';
+export declare function DownloadButton(): ReactElement;
 //# sourceMappingURL=DownloadButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DownloadButton.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"names":[],"mappings":"AAmBA,UAAU,mBAAmB;IAE3B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAGD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAiC/D"}
+{"version":3,"file":"DownloadButton.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"names":[],"mappings":"AAgBA,OAAc,EAAE,YAAY,EAAU,MAAM,OAAO,CAAC;AAKpD,wBAAgB,cAAc,IAAI,YAAY,CAgG7C"}

package/dist/components/DownloadButton/DownloadButton.js

@@ -11,49 +11,114 @@
 // 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 { useRef } from 'react';
+import { ClickAwayListener, Menu, MenuItem, MenuList } from '@mui/material';
+import { ToolbarIconButton } from '@perses-dev/components';
 import DownloadIcon from 'mdi-material-ui/DownloadOutline';
-import { InfoTooltip, ToolbarIconButton } from '@perses-dev/components';
-import { TOOLTIP_TEXT } from '../../constants';
+import React, { useRef } from 'react';
+import { stringify } from 'yaml';
 import { useDashboard } from '../../context';
 // Button that enables downloading the dashboard as a JSON file
-export function DownloadButton({ heightPx }) {
+export function DownloadButton() {
     const { dashboard } = useDashboard();
     const hiddenLinkRef = useRef(null);
-    const height = heightPx === undefined ? undefined : `${heightPx}px`;
-    const onDownloadButtonClick = ()=>{
-        if (!hiddenLinkRef || !hiddenLinkRef.current) return;
-        // Create blob URL
-        const hiddenLinkUrl = URL.createObjectURL(new Blob([
-            JSON.stringify(dashboard)
-        ], {
-            type: 'application/json'
-        }));
-        // Simulate click
-        hiddenLinkRef.current.href = hiddenLinkUrl;
-        hiddenLinkRef.current.click();
-        // Remove blob URL (for memory management)
-        URL.revokeObjectURL(hiddenLinkUrl);
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event)=>{
+        setAnchorEl(event.currentTarget);
     };
+    const handleItemClick = (format, shape)=>()=>{
+            setAnchorEl(null);
+            let type, content = '';
+            switch(format){
+                case 'json':
+                    type = 'application/json';
+                    content = JSON.stringify(dashboard, null, 2);
+                    break;
+                case 'yaml':
+                    {
+                        type = 'application/yaml';
+                        if (shape === 'cr') {
+                            const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+                            content = stringify({
+                                apiVersion: 'perses.dev/v1alpha1',
+                                kind: 'PersesDashboard',
+                                metadata: {
+                                    labels: {
+                                        'app.kubernetes.io/name': 'perses-dashboard',
+                                        'app.kubernetes.io/instance': name,
+                                        'app.kubernetes.io/part-of': 'perses-operator'
+                                    },
+                                    name
+                                },
+                                namespace: dashboard.metadata.project,
+                                spec: dashboard.spec
+                            });
+                        } else {
+                            content = stringify(dashboard);
+                        }
+                    }
+                    break;
+            }
+            if (!hiddenLinkRef || !hiddenLinkRef.current) return;
+            // Create blob URL
+            const hiddenLinkUrl = URL.createObjectURL(new Blob([
+                content
+            ], {
+                type
+            }));
+            // Simulate click
+            hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape === 'cr' ? '-cr' : ''}.${format}`;
+            hiddenLinkRef.current.href = hiddenLinkUrl;
+            hiddenLinkRef.current.click();
+            // Remove blob URL (for memory management)
+            URL.revokeObjectURL(hiddenLinkUrl);
+        };
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            /*#__PURE__*/ _jsx(InfoTooltip, {
-                description: TOOLTIP_TEXT.downloadDashboard,
-                children: /*#__PURE__*/ _jsx(ToolbarIconButton, {
-                    "aria-label": TOOLTIP_TEXT.downloadDashboard,
-                    onClick: onDownloadButtonClick,
-                    sx: {
-                        height
-                    },
-                    children: /*#__PURE__*/ _jsx(DownloadIcon, {})
+            /*#__PURE__*/ _jsx(ToolbarIconButton, {
+                id: "download-dashboard-button",
+                "aria-controls": open ? 'basic-menu' : undefined,
+                "aria-haspopup": "true",
+                "aria-expanded": open ? 'true' : undefined,
+                onClick: handleClick,
+                children: /*#__PURE__*/ _jsx(DownloadIcon, {})
+            }),
+            /*#__PURE__*/ _jsx(Menu, {
+                id: "download-dashboard-formats",
+                anchorEl: anchorEl,
+                open: open,
+                hideBackdrop: true,
+                onClose: ()=>setAnchorEl(null),
+                MenuListProps: {
+                    'aria-labelledby': 'download-dashboard-button'
+                },
+                children: /*#__PURE__*/ _jsx("div", {
+                    children: /*#__PURE__*/ _jsx(ClickAwayListener, {
+                        onClickAway: ()=>setAnchorEl(null),
+                        children: /*#__PURE__*/ _jsxs(MenuList, {
+                            children: [
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    onClick: handleItemClick('json'),
+                                    children: "JSON"
+                                }),
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    onClick: handleItemClick('yaml'),
+                                    children: "YAML"
+                                }),
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    onClick: handleItemClick('yaml', 'cr'),
+                                    children: "YAML (CR)"
+                                })
+                            ]
+                        })
+                    })
                 })
             }),
             /*#__PURE__*/ _jsx("a", {
                 ref: hiddenLinkRef,
                 style: {
                     display: 'none'
-                },
-                download: `${dashboard.metadata.name}.json`
+                }
             })
         ]
     });

package/dist/components/DownloadButton/DownloadButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DownloadButton/DownloadButton.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 DownloadIcon from 'mdi-material-ui/DownloadOutline';\nimport { InfoTooltip, ToolbarIconButton } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDashboard } from '../../context';\n\ninterface DownloadButtonProps {\n  // The button look best at heights >= 28 pixels\n  heightPx?: number;\n}\n\n// Button that enables downloading the dashboard as a JSON file\nexport function DownloadButton({ heightPx }: DownloadButtonProps) {\n  const { dashboard } = useDashboard();\n  const hiddenLinkRef = useRef<HTMLAnchorElement>(null);\n  const height = heightPx === undefined ? undefined : `${heightPx}px`;\n\n  const onDownloadButtonClick = () => {\n    if (!hiddenLinkRef || !hiddenLinkRef.current) return;\n    // Create blob URL\n    const hiddenLinkUrl = URL.createObjectURL(\n      new Blob([JSON.stringify(dashboard)], {\n        type: 'application/json',\n      })\n    );\n    // Simulate click\n    hiddenLinkRef.current.href = hiddenLinkUrl;\n    hiddenLinkRef.current.click();\n    // Remove blob URL (for memory management)\n    URL.revokeObjectURL(hiddenLinkUrl);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.downloadDashboard}>\n        <ToolbarIconButton aria-label={TOOLTIP_TEXT.downloadDashboard} onClick={onDownloadButtonClick} sx={{ height }}>\n          <DownloadIcon />\n        </ToolbarIconButton>\n      </InfoTooltip>\n      {/* Hidden link to download the dashboard as a JSON file */}\n      {/* eslint-disable jsx-a11y/anchor-has-content */}\n      {/* eslint-disable jsx-a11y/anchor-is-valid  */}\n      <a ref={hiddenLinkRef} style={{ display: 'none' }} download={`${dashboard.metadata.name}.json`} />\n    </>\n  );\n}\n"],"names":["useRef","DownloadIcon","InfoTooltip","ToolbarIconButton","TOOLTIP_TEXT","useDashboard","DownloadButton","heightPx","dashboard","hiddenLinkRef","height","undefined","onDownloadButtonClick","current","hiddenLinkUrl","URL","createObjectURL","Blob","JSON","stringify","type","href","click","revokeObjectURL","description","downloadDashboard","aria-label","onClick","sx","a","ref","style","display","download","metadata","name"],"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,OAAOC,kBAAkB,kCAAkC;AAC3D,SAASC,WAAW,EAAEC,iBAAiB,QAAQ,yBAAyB;AACxE,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,YAAY,QAAQ,gBAAgB;AAO7C,+DAA+D;AAC/D,OAAO,SAASC,eAAe,EAAEC,QAAQ,EAAuB;IAC9D,MAAM,EAAEC,SAAS,EAAE,GAAGH;IACtB,MAAMI,gBAAgBT,OAA0B;IAChD,MAAMU,SAASH,aAAaI,YAAYA,YAAY,CAAC,EAAEJ,SAAS,EAAE,CAAC;IAEnE,MAAMK,wBAAwB;QAC5B,IAAI,CAACH,iBAAiB,CAACA,cAAcI,OAAO,EAAE;QAC9C,kBAAkB;QAClB,MAAMC,gBAAgBC,IAAIC,eAAe,CACvC,IAAIC,KAAK;YAACC,KAAKC,SAAS,CAACX;SAAW,EAAE;YACpCY,MAAM;QACR;QAEF,iBAAiB;QACjBX,cAAcI,OAAO,CAACQ,IAAI,GAAGP;QAC7BL,cAAcI,OAAO,CAACS,KAAK;QAC3B,0CAA0C;QAC1CP,IAAIQ,eAAe,CAACT;IACtB;IAEA,qBACE;;0BACE,KAACZ;gBAAYsB,aAAapB,aAAaqB,iBAAiB;0BACtD,cAAA,KAACtB;oBAAkBuB,cAAYtB,aAAaqB,iBAAiB;oBAAEE,SAASf;oBAAuBgB,IAAI;wBAAElB;oBAAO;8BAC1G,cAAA,KAACT;;;0BAML,KAAC4B;gBAAEC,KAAKrB;gBAAesB,OAAO;oBAAEC,SAAS;gBAAO;gBAAGC,UAAU,CAAC,EAAEzB,UAAU0B,QAAQ,CAACC,IAAI,CAAC,KAAK,CAAC;;;;AAGpG"}
+{"version":3,"sources":["../../../src/components/DownloadButton/DownloadButton.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 { ClickAwayListener, Menu, MenuItem, MenuList } from '@mui/material';\nimport { ToolbarIconButton } from '@perses-dev/components';\nimport DownloadIcon from 'mdi-material-ui/DownloadOutline';\nimport React, { ReactElement, useRef } from 'react';\nimport { stringify } from 'yaml';\nimport { useDashboard } from '../../context';\n\n// Button that enables downloading the dashboard as a JSON file\nexport function DownloadButton(): ReactElement {\n  const { dashboard } = useDashboard();\n  const hiddenLinkRef = useRef<HTMLAnchorElement>(null);\n  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\n  const open = Boolean(anchorEl);\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n  const handleItemClick = (format: 'json' | 'yaml', shape?: 'cr') => (): void => {\n    setAnchorEl(null);\n\n    let type,\n      content = '';\n\n    switch (format) {\n      case 'json':\n        type = 'application/json';\n        content = JSON.stringify(dashboard, null, 2);\n        break;\n      case 'yaml':\n        {\n          type = 'application/yaml';\n\n          if (shape === 'cr') {\n            const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');\n            content = stringify({\n              apiVersion: 'perses.dev/v1alpha1',\n              kind: 'PersesDashboard',\n              metadata: {\n                labels: {\n                  'app.kubernetes.io/name': 'perses-dashboard',\n                  'app.kubernetes.io/instance': name,\n                  'app.kubernetes.io/part-of': 'perses-operator',\n                },\n                name,\n              },\n              namespace: dashboard.metadata.project,\n              spec: dashboard.spec,\n            });\n          } else {\n            content = stringify(dashboard);\n          }\n        }\n        break;\n    }\n\n    if (!hiddenLinkRef || !hiddenLinkRef.current) return;\n    // Create blob URL\n    const hiddenLinkUrl = URL.createObjectURL(new Blob([content], { type }));\n    // Simulate click\n    hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape === 'cr' ? '-cr' : ''}.${format}`;\n    hiddenLinkRef.current.href = hiddenLinkUrl;\n    hiddenLinkRef.current.click();\n    // Remove blob URL (for memory management)\n    URL.revokeObjectURL(hiddenLinkUrl);\n  };\n\n  return (\n    <>\n      <ToolbarIconButton\n        id=\"download-dashboard-button\"\n        aria-controls={open ? 'basic-menu' : undefined}\n        aria-haspopup=\"true\"\n        aria-expanded={open ? 'true' : undefined}\n        onClick={handleClick}\n      >\n        <DownloadIcon />\n      </ToolbarIconButton>\n\n      <Menu\n        id=\"download-dashboard-formats\"\n        anchorEl={anchorEl}\n        open={open}\n        hideBackdrop={true}\n        onClose={() => setAnchorEl(null)}\n        MenuListProps={{\n          'aria-labelledby': 'download-dashboard-button',\n        }}\n      >\n        <div>\n          <ClickAwayListener onClickAway={() => setAnchorEl(null)}>\n            <MenuList>\n              <MenuItem onClick={handleItemClick('json')}>JSON</MenuItem>\n              <MenuItem onClick={handleItemClick('yaml')}>YAML</MenuItem>\n              <MenuItem onClick={handleItemClick('yaml', 'cr')}>YAML (CR)</MenuItem>\n            </MenuList>\n          </ClickAwayListener>\n        </div>\n      </Menu>\n\n      {/* Hidden link to download the dashboard as a JSON or YAML file */}\n      {/* eslint-disable jsx-a11y/anchor-has-content */}\n      {/* eslint-disable jsx-a11y/anchor-is-valid  */}\n      <a ref={hiddenLinkRef} style={{ display: 'none' }} />\n    </>\n  );\n}\n"],"names":["ClickAwayListener","Menu","MenuItem","MenuList","ToolbarIconButton","DownloadIcon","React","useRef","stringify","useDashboard","DownloadButton","dashboard","hiddenLinkRef","anchorEl","setAnchorEl","useState","open","Boolean","handleClick","event","currentTarget","handleItemClick","format","shape","type","content","JSON","name","metadata","toLowerCase","replace","apiVersion","kind","labels","namespace","project","spec","current","hiddenLinkUrl","URL","createObjectURL","Blob","download","href","click","revokeObjectURL","id","aria-controls","undefined","aria-haspopup","aria-expanded","onClick","hideBackdrop","onClose","MenuListProps","div","onClickAway","a","ref","style","display"],"mappings":"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"}

package/dist/components/EditButton/EditButton.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 export interface EditButtonProps {
     /**
      * The label used inside the button.
@@ -8,5 +9,5 @@ export interface EditButtonProps {
      */
     onClick: () => void;
 }
-export declare const EditButton: ({ label, onClick }: EditButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EditButton: ({ label, onClick }: EditButtonProps) => ReactElement;
 //# sourceMappingURL=EditButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditButton.d.ts","sourceRoot":"","sources":["../../../src/components/EditButton/EditButton.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,uBAAiC,eAAe,4CAYtE,CAAC"}
+{"version":3,"file":"EditButton.d.ts","sourceRoot":"","sources":["../../../src/components/EditButton/EditButton.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,uBAAiC,eAAe,KAAG,YAYzE,CAAC"}

package/dist/components/EditButton/EditButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EditButton/EditButton.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 { Button } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\n\nexport interface EditButtonProps {\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n\n  /**\n   * Handler that puts the dashboard into editing mode.\n   */\n  onClick: () => void;\n}\n\nexport const EditButton = ({ label = 'Edit', onClick }: EditButtonProps) => {\n  return (\n    <Button\n      onClick={onClick}\n      startIcon={<PencilIcon />}\n      variant=\"outlined\"\n      color=\"secondary\"\n      sx={{ whiteSpace: 'nowrap', minWidth: 'auto' }}\n    >\n      {label}\n    </Button>\n  );\n};\n"],"names":["Button","PencilIcon","EditButton","label","onClick","startIcon","variant","color","sx","whiteSpace","minWidth"],"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,gBAAgB;AACvC,OAAOC,gBAAgB,gCAAgC;AAcvD,OAAO,MAAMC,aAAa,CAAC,EAAEC,QAAQ,MAAM,EAAEC,OAAO,EAAmB;IACrE,qBACE,KAACJ;QACCI,SAASA;QACTC,yBAAW,KAACJ;QACZK,SAAQ;QACRC,OAAM;QACNC,IAAI;YAAEC,YAAY;YAAUC,UAAU;QAAO;kBAE5CP;;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/EditButton/EditButton.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 { Button } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { ReactElement } from 'react';\n\nexport interface EditButtonProps {\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n\n  /**\n   * Handler that puts the dashboard into editing mode.\n   */\n  onClick: () => void;\n}\n\nexport const EditButton = ({ label = 'Edit', onClick }: EditButtonProps): ReactElement => {\n  return (\n    <Button\n      onClick={onClick}\n      startIcon={<PencilIcon />}\n      variant=\"outlined\"\n      color=\"secondary\"\n      sx={{ whiteSpace: 'nowrap', minWidth: 'auto' }}\n    >\n      {label}\n    </Button>\n  );\n};\n"],"names":["Button","PencilIcon","EditButton","label","onClick","startIcon","variant","color","sx","whiteSpace","minWidth"],"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,gBAAgB;AACvC,OAAOC,gBAAgB,gCAAgC;AAevD,OAAO,MAAMC,aAAa,CAAC,EAAEC,QAAQ,MAAM,EAAEC,OAAO,EAAmB;IACrE,qBACE,KAACJ;QACCI,SAASA;QACTC,yBAAW,KAACJ;QACZK,SAAQ;QACRC,OAAM;QACNC,IAAI;YAAEC,YAAY;YAAUC,UAAU;QAAO;kBAE5CP;;AAGP,EAAE"}

package/dist/components/EditJsonButton/EditJsonButton.d.ts

@@ -1,5 +1,6 @@
+import { ReactElement } from 'react';
 export interface EditJsonButtonProps {
     isReadonly: boolean;
 }
-export declare const EditJsonButton: (props: EditJsonButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EditJsonButton: (props: EditJsonButtonProps) => ReactElement;
 //# sourceMappingURL=EditJsonButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditJsonButton.d.ts","sourceRoot":"","sources":["../../../src/components/EditJsonButton/EditJsonButton.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,4CAaxD,CAAC"}
+{"version":3,"file":"EditJsonButton.d.ts","sourceRoot":"","sources":["../../../src/components/EditJsonButton/EditJsonButton.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,KAAG,YAa3D,CAAC"}

package/dist/components/EditJsonButton/EditJsonButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EditJsonButton/EditJsonButton.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 CodeIcon from 'mdi-material-ui/CodeBraces';\nimport { InfoTooltip, ToolbarIconButton } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useEditJsonDialog } from '../../context';\n\nexport interface EditJsonButtonProps {\n  isReadonly: boolean;\n}\n\nexport const EditJsonButton = (props: EditJsonButtonProps) => {\n  const { isReadonly } = props;\n  const { openEditJsonDialog } = useEditJsonDialog();\n\n  const info = isReadonly ? TOOLTIP_TEXT.viewJson : TOOLTIP_TEXT.editJson;\n\n  return (\n    <InfoTooltip description={info}>\n      <ToolbarIconButton aria-label={info} variant=\"outlined\" onClick={() => openEditJsonDialog()}>\n        <CodeIcon />\n      </ToolbarIconButton>\n    </InfoTooltip>\n  );\n};\n"],"names":["CodeIcon","InfoTooltip","ToolbarIconButton","TOOLTIP_TEXT","useEditJsonDialog","EditJsonButton","props","isReadonly","openEditJsonDialog","info","viewJson","editJson","description","aria-label","variant","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,cAAc,6BAA6B;AAClD,SAASC,WAAW,EAAEC,iBAAiB,QAAQ,yBAAyB;AACxE,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,iBAAiB,QAAQ,gBAAgB;AAMlD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,UAAU,EAAE,GAAGD;IACvB,MAAM,EAAEE,kBAAkB,EAAE,GAAGJ;IAE/B,MAAMK,OAAOF,aAAaJ,aAAaO,QAAQ,GAAGP,aAAaQ,QAAQ;IAEvE,qBACE,KAACV;QAAYW,aAAaH;kBACxB,cAAA,KAACP;YAAkBW,cAAYJ;YAAMK,SAAQ;YAAWC,SAAS,IAAMP;sBACrE,cAAA,KAACR;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../src/components/EditJsonButton/EditJsonButton.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 CodeIcon from 'mdi-material-ui/CodeBraces';\nimport { InfoTooltip, ToolbarIconButton } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useEditJsonDialog } from '../../context';\n\nexport interface EditJsonButtonProps {\n  isReadonly: boolean;\n}\n\nexport const EditJsonButton = (props: EditJsonButtonProps): ReactElement => {\n  const { isReadonly } = props;\n  const { openEditJsonDialog } = useEditJsonDialog();\n\n  const info = isReadonly ? TOOLTIP_TEXT.viewJson : TOOLTIP_TEXT.editJson;\n\n  return (\n    <InfoTooltip description={info}>\n      <ToolbarIconButton aria-label={info} variant=\"outlined\" onClick={() => openEditJsonDialog()}>\n        <CodeIcon />\n      </ToolbarIconButton>\n    </InfoTooltip>\n  );\n};\n"],"names":["CodeIcon","InfoTooltip","ToolbarIconButton","TOOLTIP_TEXT","useEditJsonDialog","EditJsonButton","props","isReadonly","openEditJsonDialog","info","viewJson","editJson","description","aria-label","variant","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,cAAc,6BAA6B;AAClD,SAASC,WAAW,EAAEC,iBAAiB,QAAQ,yBAAyB;AAExE,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,iBAAiB,QAAQ,gBAAgB;AAMlD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,UAAU,EAAE,GAAGD;IACvB,MAAM,EAAEE,kBAAkB,EAAE,GAAGJ;IAE/B,MAAMK,OAAOF,aAAaJ,aAAaO,QAAQ,GAAGP,aAAaQ,QAAQ;IAEvE,qBACE,KAACV;QAAYW,aAAaH;kBACxB,cAAA,KAACP;YAAkBW,cAAYJ;YAAMK,SAAQ;YAAWC,SAAS,IAAMP;sBACrE,cAAA,KAACR;;;AAIT,EAAE"}

package/dist/components/EditJsonDialog/EditJsonDialog.d.ts

@@ -1,6 +1,7 @@
+import { ReactElement } from 'react';
 export interface EditJsonDialogProps {
     isReadonly: boolean;
     disableMetadataEdition?: boolean;
 }
-export declare const EditJsonDialog: (props: EditJsonDialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EditJsonDialog: (props: EditJsonDialogProps) => ReactElement;
 //# sourceMappingURL=EditJsonDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditJsonDialog.d.ts","sourceRoot":"","sources":["../../../src/components/EditJsonDialog/EditJsonDialog.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,4CAYxD,CAAC"}
+{"version":3,"file":"EditJsonDialog.d.ts","sourceRoot":"","sources":["../../../src/components/EditJsonDialog/EditJsonDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,YAAY,EAAY,MAAM,OAAO,CAAC;AAM1D,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,KAAG,YAY3D,CAAC"}

package/dist/components/EditJsonDialog/EditJsonDialog.js

@@ -15,13 +15,12 @@ import { useState } from 'react';
 import { Alert, FormControl } from '@mui/material';
 import { Dialog, JSONEditor } from '@perses-dev/components';
 import { useDatasourceStore, useTimeRange } from '@perses-dev/plugin-system';
-import { useEditJsonDialog } from '../../context/DashboardProvider';
-import { useDashboard } from '../../context/useDashboard';
+import { useEditJsonDialog, useDashboard } from '../../context';
 export const EditJsonDialog = (props)=>{
     const { isReadonly, disableMetadataEdition } = props;
     const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();
     return /*#__PURE__*/ _jsxs(Dialog, {
-        open: !!(editJsonDialog === null || editJsonDialog === void 0 ? void 0 : editJsonDialog.isOpen),
+        open: !!editJsonDialog?.isOpen,
         scroll: "paper",
         fullWidth: true,
         maxWidth: "lg",
@@ -33,7 +32,7 @@ export const EditJsonDialog = (props)=>{
                     " Dashboard JSON"
                 ]
             }),
-            (editJsonDialog === null || editJsonDialog === void 0 ? void 0 : editJsonDialog.isOpen) && /*#__PURE__*/ _jsx(EditJsonDialogForm, {
+            editJsonDialog?.isOpen && /*#__PURE__*/ _jsx(EditJsonDialogForm, {
                 isReadonly: isReadonly,
                 disableMetadataEdition: disableMetadataEdition
             })
@@ -53,17 +52,15 @@ const EditJsonDialogForm = (props)=>{
         setTimeRange({
             pastDuration: draftDashboard.spec.duration
         });
-        var _draftDashboard_spec_refreshInterval;
-        setRefreshInterval((_draftDashboard_spec_refreshInterval = draftDashboard.spec.refreshInterval) !== null && _draftDashboard_spec_refreshInterval !== void 0 ? _draftDashboard_spec_refreshInterval : '0s');
-        var _draftDashboard_spec_datasources;
-        setLocalDatasources((_draftDashboard_spec_datasources = draftDashboard.spec.datasources) !== null && _draftDashboard_spec_datasources !== void 0 ? _draftDashboard_spec_datasources : {});
+        setRefreshInterval(draftDashboard.spec.refreshInterval ?? '0s');
+        setLocalDatasources(draftDashboard.spec.datasources ?? {});
         closeEditJsonDialog();
     };
     const completeDraftDashboard = (dashboard)=>{
         try {
-            const json = JSON.parse(dashboard !== null && dashboard !== void 0 ? dashboard : '{}');
+            const json = JSON.parse(dashboard ?? '{}');
             setDraftDashboard(json);
-        } catch (e) {
+        } catch (_) {
         // do nothing
         }
     };

package/dist/components/EditJsonDialog/EditJsonDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.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 { FormEvent, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useDatasourceStore, useTimeRange } from '@perses-dev/plugin-system';\nimport { useEditJsonDialog } from '../../context/DashboardProvider';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport interface EditJsonDialogProps {\n  isReadonly: boolean;\n  disableMetadataEdition?: boolean;\n}\n\nexport const EditJsonDialog = (props: EditJsonDialogProps) => {\n  const { isReadonly, disableMetadataEdition } = props;\n  const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();\n\n  return (\n    <Dialog open={!!editJsonDialog?.isOpen} scroll=\"paper\" fullWidth maxWidth=\"lg\">\n      <Dialog.Header onClose={() => closeEditJsonDialog()}>{!isReadonly && 'Edit '} Dashboard JSON</Dialog.Header>\n      {editJsonDialog?.isOpen && (\n        <EditJsonDialogForm isReadonly={isReadonly} disableMetadataEdition={disableMetadataEdition} />\n      )}\n    </Dialog>\n  );\n};\n\nconst EditJsonDialogForm = (props: EditJsonDialogProps) => {\n  const { isReadonly, disableMetadataEdition } = props;\n  const { closeEditJsonDialog } = useEditJsonDialog();\n  const { setTimeRange, setRefreshInterval } = useTimeRange();\n  const { dashboard, setDashboard } = useDashboard();\n  const { setLocalDatasources } = useDatasourceStore();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent) => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\n    setTimeRange({ pastDuration: draftDashboard.spec.duration });\n    setRefreshInterval(draftDashboard.spec.refreshInterval ?? '0s');\n    setLocalDatasources(draftDashboard.spec.datasources ?? {});\n    closeEditJsonDialog();\n  };\n\n  const completeDraftDashboard = (dashboard: string | undefined) => {\n    try {\n      const json = JSON.parse(dashboard ?? '{}');\n      setDraftDashboard(json);\n    } catch (e) {\n      // do nothing\n    }\n  };\n\n  return (\n    <Dialog.Form onSubmit={handleApply}>\n      <Dialog.Content sx={{ width: '100%' }}>\n        {disableMetadataEdition && !isReadonly && (\n          <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n            Metadata cannot be modified or saved.\n          </Alert>\n        )}\n        {draftDashboard.kind === 'EphemeralDashboard' && (\n          <Alert sx={{ marginBottom: 1 }} severity=\"warning\">\n            Time-to-live cannot be modified or saved from here. Go to the project view to modify it.\n          </Alert>\n        )}\n        <FormControl fullWidth>\n          <JSONEditor\n            minHeight=\"300px\"\n            maxHeight=\"70vh\"\n            value={draftDashboard}\n            onChange={(value: string) => completeDraftDashboard(value)}\n            readOnly={isReadonly}\n          />\n        </FormControl>\n      </Dialog.Content>\n      {!isReadonly && (\n        <Dialog.Actions>\n          <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n        </Dialog.Actions>\n      )}\n    </Dialog.Form>\n  );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useDatasourceStore","useTimeRange","useEditJsonDialog","useDashboard","EditJsonDialog","props","isReadonly","disableMetadataEdition","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","setTimeRange","setRefreshInterval","dashboard","setDashboard","setLocalDatasources","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","pastDuration","spec","duration","refreshInterval","datasources","completeDraftDashboard","json","JSON","parse","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","kind","minHeight","maxHeight","value","onChange","readOnly","Actions","PrimaryButton","onClick"],"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,SAAoBA,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,KAAK,EAAEC,WAAW,QAAQ,gBAAgB;AACnD,SAASC,MAAM,EAAEC,UAAU,QAAQ,yBAAyB;AAC5D,SAASC,kBAAkB,EAAEC,YAAY,QAAQ,4BAA4B;AAC7E,SAASC,iBAAiB,QAAQ,kCAAkC;AACpE,SAASC,YAAY,QAAQ,6BAA6B;AAO1D,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,UAAU,EAAEC,sBAAsB,EAAE,GAAGF;IAC/C,MAAM,EAAEG,cAAc,EAAEC,mBAAmB,EAAE,GAAGP;IAEhD,qBACE,MAACJ;QAAOY,MAAM,CAAC,EAACF,2BAAAA,qCAAAA,eAAgBG,MAAM;QAAEC,QAAO;QAAQC,SAAS;QAACC,UAAS;;0BACxE,MAAChB,OAAOiB,MAAM;gBAACC,SAAS,IAAMP;;oBAAwB,CAACH,cAAc;oBAAQ;;;YAC5EE,CAAAA,2BAAAA,qCAAAA,eAAgBG,MAAM,mBACrB,KAACM;gBAAmBX,YAAYA;gBAAYC,wBAAwBA;;;;AAI5E,EAAE;AAEF,MAAMU,qBAAqB,CAACZ;IAC1B,MAAM,EAAEC,UAAU,EAAEC,sBAAsB,EAAE,GAAGF;IAC/C,MAAM,EAAEI,mBAAmB,EAAE,GAAGP;IAChC,MAAM,EAAEgB,YAAY,EAAEC,kBAAkB,EAAE,GAAGlB;IAC7C,MAAM,EAAEmB,SAAS,EAAEC,YAAY,EAAE,GAAGlB;IACpC,MAAM,EAAEmB,mBAAmB,EAAE,GAAGtB;IAChC,MAAM,CAACuB,gBAAgBC,kBAAkB,GAAG7B,SAASyB;IAErD,MAAMK,cAAc,CAACC;QACnBA,EAAEC,cAAc;QAChBN,aAAaE;QACbL,aAAa;YAAEU,cAAcL,eAAeM,IAAI,CAACC,QAAQ;QAAC;YACvCP;QAAnBJ,mBAAmBI,CAAAA,uCAAAA,eAAeM,IAAI,CAACE,eAAe,cAAnCR,kDAAAA,uCAAuC;YACtCA;QAApBD,oBAAoBC,CAAAA,mCAAAA,eAAeM,IAAI,CAACG,WAAW,cAA/BT,8CAAAA,mCAAmC,CAAC;QACxDd;IACF;IAEA,MAAMwB,yBAAyB,CAACb;QAC9B,IAAI;YACF,MAAMc,OAAOC,KAAKC,KAAK,CAAChB,sBAAAA,uBAAAA,YAAa;YACrCI,kBAAkBU;QACpB,EAAE,OAAOR,GAAG;QACV,aAAa;QACf;IACF;IAEA,qBACE,MAAC5B,OAAOuC,IAAI;QAACC,UAAUb;;0BACrB,MAAC3B,OAAOyC,OAAO;gBAACC,IAAI;oBAAEC,OAAO;gBAAO;;oBACjClC,0BAA0B,CAACD,4BAC1B,KAACV;wBAAM4C,IAAI;4BAAEE,cAAc,CAACC,QAAUA,MAAMC,OAAO,CAAC;wBAAG;wBAAGC,UAAS;kCAAU;;oBAI9EtB,eAAeuB,IAAI,KAAK,sCACvB,KAAClD;wBAAM4C,IAAI;4BAAEE,cAAc;wBAAE;wBAAGG,UAAS;kCAAU;;kCAIrD,KAAChD;wBAAYgB,SAAS;kCACpB,cAAA,KAACd;4BACCgD,WAAU;4BACVC,WAAU;4BACVC,OAAO1B;4BACP2B,UAAU,CAACD,QAAkBhB,uBAAuBgB;4BACpDE,UAAU7C;;;;;YAIf,CAACA,4BACA,KAACR,OAAOsD,OAAO;0BACb,cAAA,KAACtD,OAAOuD,aAAa;oBAACC,SAAS7B;8BAAa;;;;;AAKtD"}
+{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.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 { FormEvent, ReactElement, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useDatasourceStore, useTimeRange } from '@perses-dev/plugin-system';\nimport { useEditJsonDialog, useDashboard } from '../../context';\n\nexport interface EditJsonDialogProps {\n  isReadonly: boolean;\n  disableMetadataEdition?: boolean;\n}\n\nexport const EditJsonDialog = (props: EditJsonDialogProps): ReactElement => {\n  const { isReadonly, disableMetadataEdition } = props;\n  const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();\n\n  return (\n    <Dialog open={!!editJsonDialog?.isOpen} scroll=\"paper\" fullWidth maxWidth=\"lg\">\n      <Dialog.Header onClose={() => closeEditJsonDialog()}>{!isReadonly && 'Edit '} Dashboard JSON</Dialog.Header>\n      {editJsonDialog?.isOpen && (\n        <EditJsonDialogForm isReadonly={isReadonly} disableMetadataEdition={disableMetadataEdition} />\n      )}\n    </Dialog>\n  );\n};\n\nconst EditJsonDialogForm = (props: EditJsonDialogProps): ReactElement => {\n  const { isReadonly, disableMetadataEdition } = props;\n  const { closeEditJsonDialog } = useEditJsonDialog();\n  const { setTimeRange, setRefreshInterval } = useTimeRange();\n  const { dashboard, setDashboard } = useDashboard();\n  const { setLocalDatasources } = useDatasourceStore();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent): void => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\n    setTimeRange({ pastDuration: draftDashboard.spec.duration });\n    setRefreshInterval(draftDashboard.spec.refreshInterval ?? '0s');\n    setLocalDatasources(draftDashboard.spec.datasources ?? {});\n    closeEditJsonDialog();\n  };\n\n  const completeDraftDashboard = (dashboard: string | undefined): void => {\n    try {\n      const json = JSON.parse(dashboard ?? '{}');\n      setDraftDashboard(json);\n    } catch (_) {\n      // do nothing\n    }\n  };\n\n  return (\n    <Dialog.Form onSubmit={handleApply}>\n      <Dialog.Content sx={{ width: '100%' }}>\n        {disableMetadataEdition && !isReadonly && (\n          <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n            Metadata cannot be modified or saved.\n          </Alert>\n        )}\n        {draftDashboard.kind === 'EphemeralDashboard' && (\n          <Alert sx={{ marginBottom: 1 }} severity=\"warning\">\n            Time-to-live cannot be modified or saved from here. Go to the project view to modify it.\n          </Alert>\n        )}\n        <FormControl fullWidth>\n          <JSONEditor\n            minHeight=\"300px\"\n            maxHeight=\"70vh\"\n            value={draftDashboard}\n            onChange={(value: string) => completeDraftDashboard(value)}\n            readOnly={isReadonly}\n          />\n        </FormControl>\n      </Dialog.Content>\n      {!isReadonly && (\n        <Dialog.Actions>\n          <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n        </Dialog.Actions>\n      )}\n    </Dialog.Form>\n  );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useDatasourceStore","useTimeRange","useEditJsonDialog","useDashboard","EditJsonDialog","props","isReadonly","disableMetadataEdition","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","setTimeRange","setRefreshInterval","dashboard","setDashboard","setLocalDatasources","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","pastDuration","spec","duration","refreshInterval","datasources","completeDraftDashboard","json","JSON","parse","_","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","kind","minHeight","maxHeight","value","onChange","readOnly","Actions","PrimaryButton","onClick"],"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,SAAkCA,QAAQ,QAAQ,QAAQ;AAC1D,SAASC,KAAK,EAAEC,WAAW,QAAQ,gBAAgB;AACnD,SAASC,MAAM,EAAEC,UAAU,QAAQ,yBAAyB;AAC5D,SAASC,kBAAkB,EAAEC,YAAY,QAAQ,4BAA4B;AAC7E,SAASC,iBAAiB,EAAEC,YAAY,QAAQ,gBAAgB;AAOhE,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,UAAU,EAAEC,sBAAsB,EAAE,GAAGF;IAC/C,MAAM,EAAEG,cAAc,EAAEC,mBAAmB,EAAE,GAAGP;IAEhD,qBACE,MAACJ;QAAOY,MAAM,CAAC,CAACF,gBAAgBG;QAAQC,QAAO;QAAQC,SAAS;QAACC,UAAS;;0BACxE,MAAChB,OAAOiB,MAAM;gBAACC,SAAS,IAAMP;;oBAAwB,CAACH,cAAc;oBAAQ;;;YAC5EE,gBAAgBG,wBACf,KAACM;gBAAmBX,YAAYA;gBAAYC,wBAAwBA;;;;AAI5E,EAAE;AAEF,MAAMU,qBAAqB,CAACZ;IAC1B,MAAM,EAAEC,UAAU,EAAEC,sBAAsB,EAAE,GAAGF;IAC/C,MAAM,EAAEI,mBAAmB,EAAE,GAAGP;IAChC,MAAM,EAAEgB,YAAY,EAAEC,kBAAkB,EAAE,GAAGlB;IAC7C,MAAM,EAAEmB,SAAS,EAAEC,YAAY,EAAE,GAAGlB;IACpC,MAAM,EAAEmB,mBAAmB,EAAE,GAAGtB;IAChC,MAAM,CAACuB,gBAAgBC,kBAAkB,GAAG7B,SAASyB;IAErD,MAAMK,cAAc,CAACC;QACnBA,EAAEC,cAAc;QAChBN,aAAaE;QACbL,aAAa;YAAEU,cAAcL,eAAeM,IAAI,CAACC,QAAQ;QAAC;QAC1DX,mBAAmBI,eAAeM,IAAI,CAACE,eAAe,IAAI;QAC1DT,oBAAoBC,eAAeM,IAAI,CAACG,WAAW,IAAI,CAAC;QACxDvB;IACF;IAEA,MAAMwB,yBAAyB,CAACb;QAC9B,IAAI;YACF,MAAMc,OAAOC,KAAKC,KAAK,CAAChB,aAAa;YACrCI,kBAAkBU;QACpB,EAAE,OAAOG,GAAG;QACV,aAAa;QACf;IACF;IAEA,qBACE,MAACvC,OAAOwC,IAAI;QAACC,UAAUd;;0BACrB,MAAC3B,OAAO0C,OAAO;gBAACC,IAAI;oBAAEC,OAAO;gBAAO;;oBACjCnC,0BAA0B,CAACD,4BAC1B,KAACV;wBAAM6C,IAAI;4BAAEE,cAAc,CAACC,QAAUA,MAAMC,OAAO,CAAC;wBAAG;wBAAGC,UAAS;kCAAU;;oBAI9EvB,eAAewB,IAAI,KAAK,sCACvB,KAACnD;wBAAM6C,IAAI;4BAAEE,cAAc;wBAAE;wBAAGG,UAAS;kCAAU;;kCAIrD,KAACjD;wBAAYgB,SAAS;kCACpB,cAAA,KAACd;4BACCiD,WAAU;4BACVC,WAAU;4BACVC,OAAO3B;4BACP4B,UAAU,CAACD,QAAkBjB,uBAAuBiB;4BACpDE,UAAU9C;;;;;YAIf,CAACA,4BACA,KAACR,OAAOuD,OAAO;0BACb,cAAA,KAACvD,OAAOwD,aAAa;oBAACC,SAAS9B;8BAAa;;;;;AAKtD"}

package/dist/components/EmptyDashboard/EmptyDashboard.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactElement, ReactNode } from 'react';
 export interface EmptyDashboardProps {
     /**
      * The title, which should be relatively short text.
@@ -7,7 +7,7 @@ export interface EmptyDashboardProps {
     /**
      * Imagery to display above the title.
      */
-    image?: React.ReactNode;
+    image?: ReactNode;
     /**
      * Descriptive text, which can be a bit longer.
      */
@@ -33,5 +33,5 @@ export interface EmptyDashboardProps {
 /**
  * Communicate that a dashboard is empty and prompt the user to get started.
  */
-export declare const EmptyDashboard: ({ title, image, description, additionalText, actions, onEditButtonClick, }: EmptyDashboardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmptyDashboard: ({ title, image, description, additionalText, actions, onEditButtonClick, }: EmptyDashboardProps) => ReactElement;
 //# sourceMappingURL=EmptyDashboard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyDashboard/EmptyDashboard.tsx"],"names":[],"mappings":";AAmBA,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;IAEhC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAmDD;;GAEG;AACH,eAAO,MAAM,cAAc,+EAOxB,mBAAmB,4CA2BrB,CAAC"}
+{"version":3,"file":"EmptyDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyDashboard/EmptyDashboard.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMhD,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;IAEhC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAuDD;;GAEG;AACH,eAAO,MAAM,cAAc,+EAOxB,mBAAmB,KAAG,YA2BxB,CAAC"}