@perses-dev/dashboards 0.50.3 → 0.51.0-beta.1

package/dist/cjs/views/ViewDashboard/ViewDashboard.js

@@ -30,12 +30,10 @@ const _context = require("../../context");
 const _DashboardProviderWithQueryParams = require("../../context/DashboardProvider/DashboardProviderWithQueryParams");
 const _DashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource, datasourceApi, externalVariableDefinitions, dashboardTitleComponent, emptyDashboardProps, onSave, onDiscard, initialVariableIsSticky, isReadonly, isEditing, isCreating, sx, ...others } = props;
+    const { dashboardResource, datasourceApi, externalVariableDefinitions, dashboardTitleComponent, emptyDashboardProps, onSave, onDiscard, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, isEditing, isCreating, sx, ...others } = props;
     const { spec } = dashboardResource;
-    var _spec_duration;
-    const dashboardDuration = (_spec_duration = spec.duration) !== null && _spec_duration !== void 0 ? _spec_duration : _core.DEFAULT_DASHBOARD_DURATION;
-    var _spec_refreshInterval;
-    const dashboardRefreshInterval = (_spec_refreshInterval = spec.refreshInterval) !== null && _spec_refreshInterval !== void 0 ? _spec_refreshInterval : _core.DEFAULT_REFRESH_INTERVAL;
+    const dashboardDuration = spec.duration ?? _core.DEFAULT_DASHBOARD_DURATION;
+    const dashboardRefreshInterval = spec.refreshInterval ?? _core.DEFAULT_REFRESH_INTERVAL;
     const initialTimeRange = (0, _pluginsystem.useInitialTimeRange)(dashboardDuration);
     const initialRefreshInterval = (0, _pluginsystem.useInitialRefreshInterval)(dashboardRefreshInterval);
     const { data } = (0, _pluginsystem.usePluginBuiltinVariableDefinitions)();
@@ -111,6 +109,8 @@ function ViewDashboard(props) {
                                 onDiscard: onDiscard,
                                 initialVariableIsSticky: initialVariableIsSticky,
                                 isReadonly: isReadonly,
+                                isVariableEnabled: isVariableEnabled,
+                                isDatasourceEnabled: isDatasourceEnabled,
                                 isCreating: isCreating
                             })
                         })

package/dist/components/Dashboard/Dashboard.js

@@ -21,12 +21,10 @@ const HEADER_HEIGHT = 165; // Approximate height of the header in dashboard view
 /**
  * Renders a Dashboard for the provided Dashboard spec.
  */ export function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }) {
-    var _boxRef_current;
     const panelGroupIds = usePanelGroupIds();
     const boxRef = useRef(null);
     const isEmpty = !panelGroupIds.length;
-    var _boxRef_current_getBoundingClientRect_top;
-    const dashboardTopPosition = (_boxRef_current_getBoundingClientRect_top = (_boxRef_current = boxRef.current) === null || _boxRef_current === void 0 ? void 0 : _boxRef_current.getBoundingClientRect().top) !== null && _boxRef_current_getBoundingClientRect_top !== void 0 ? _boxRef_current_getBoundingClientRect_top : HEADER_HEIGHT;
+    const dashboardTopPosition = boxRef.current?.getBoundingClientRect().top ?? HEADER_HEIGHT;
     const panelFullHeight = window.innerHeight - dashboardTopPosition - window.scrollY;
     return /*#__PURE__*/ _jsx(Box, {
         ...boxProps,

package/dist/components/Dashboard/Dashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Dashboard/Dashboard.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 { Box, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { ReactElement, useRef } from 'react';\nimport { usePanelGroupIds } from '../../context';\nimport { GridLayout } from '../GridLayout';\nimport { EmptyDashboard, EmptyDashboardProps } from '../EmptyDashboard';\nimport { PanelOptions } from '../Panel';\nexport type DashboardProps = BoxProps & {\n  /**\n   * Props for `EmptyDashboard` component that will be rendered when the dashboard\n   * is empty (i.e. has no panel groups). If not specified, the defaults will\n   * be used.\n   */\n  emptyDashboardProps?: EmptyDashboardProps;\n  panelOptions?: PanelOptions;\n};\nconst HEADER_HEIGHT = 165; // Approximate height of the header in dashboard view (including the navbar and variables toolbar)\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: DashboardProps): ReactElement {\n  const panelGroupIds = usePanelGroupIds();\n  const boxRef = useRef<HTMLDivElement>(null);\n  const isEmpty = !panelGroupIds.length;\n  const dashboardTopPosition = boxRef.current?.getBoundingClientRect().top ?? HEADER_HEIGHT;\n  const panelFullHeight = window.innerHeight - dashboardTopPosition - window.scrollY;\n\n  return (\n    <Box {...boxProps} sx={{ height: '100%' }} ref={boxRef}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {isEmpty && (\n          <Box sx={{ height: '100%', display: 'flex', alignItems: 'center' }}>\n            <EmptyDashboard {...emptyDashboardProps} />\n          </Box>\n        )}\n        {!isEmpty &&\n          panelGroupIds.map((panelGroupId) => (\n            <GridLayout\n              key={panelGroupId}\n              panelGroupId={panelGroupId}\n              panelOptions={panelOptions}\n              panelFullHeight={panelFullHeight}\n            />\n          ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","useRef","usePanelGroupIds","GridLayout","EmptyDashboard","HEADER_HEIGHT","Dashboard","emptyDashboardProps","panelOptions","boxProps","boxRef","panelGroupIds","isEmpty","length","dashboardTopPosition","current","getBoundingClientRect","top","panelFullHeight","window","innerHeight","scrollY","sx","height","ref","FallbackComponent","display","alignItems","map","panelGroupId"],"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,GAAG,QAAkB,gBAAgB;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,yBAAyB;AACnE,SAAuBC,MAAM,QAAQ,QAAQ;AAC7C,SAASC,gBAAgB,QAAQ,gBAAgB;AACjD,SAASC,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,cAAc,QAA6B,oBAAoB;AAWxE,MAAMC,gBAAgB,KAAK,kGAAkG;AAE7H;;CAEC,GACD,OAAO,SAASC,UAAU,EAAEC,mBAAmB,EAAEC,YAAY,EAAE,GAAGC,UAA0B;QAI7DC;IAH7B,MAAMC,gBAAgBT;IACtB,MAAMQ,SAAST,OAAuB;IACtC,MAAMW,UAAU,CAACD,cAAcE,MAAM;QACRH;IAA7B,MAAMI,uBAAuBJ,CAAAA,6CAAAA,kBAAAA,OAAOK,OAAO,cAAdL,sCAAAA,gBAAgBM,qBAAqB,GAAGC,GAAG,cAA3CP,uDAAAA,4CAA+CL;IAC5E,MAAMa,kBAAkBC,OAAOC,WAAW,GAAGN,uBAAuBK,OAAOE,OAAO;IAElF,qBACE,KAACvB;QAAK,GAAGW,QAAQ;QAAEa,IAAI;YAAEC,QAAQ;QAAO;QAAGC,KAAKd;kBAC9C,cAAA,MAACX;YAAc0B,mBAAmBzB;;gBAC/BY,yBACC,KAACd;oBAAIwB,IAAI;wBAAEC,QAAQ;wBAAQG,SAAS;wBAAQC,YAAY;oBAAS;8BAC/D,cAAA,KAACvB;wBAAgB,GAAGG,mBAAmB;;;gBAG1C,CAACK,WACAD,cAAciB,GAAG,CAAC,CAACC,6BACjB,KAAC1B;wBAEC0B,cAAcA;wBACdrB,cAAcA;wBACdU,iBAAiBA;uBAHZW;;;;AASnB"}
+{"version":3,"sources":["../../../src/components/Dashboard/Dashboard.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 { Box, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { ReactElement, useRef } from 'react';\nimport { usePanelGroupIds } from '../../context';\nimport { GridLayout } from '../GridLayout';\nimport { EmptyDashboard, EmptyDashboardProps } from '../EmptyDashboard';\nimport { PanelOptions } from '../Panel';\nexport type DashboardProps = BoxProps & {\n  /**\n   * Props for `EmptyDashboard` component that will be rendered when the dashboard\n   * is empty (i.e. has no panel groups). If not specified, the defaults will\n   * be used.\n   */\n  emptyDashboardProps?: EmptyDashboardProps;\n  panelOptions?: PanelOptions;\n};\nconst HEADER_HEIGHT = 165; // Approximate height of the header in dashboard view (including the navbar and variables toolbar)\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: DashboardProps): ReactElement {\n  const panelGroupIds = usePanelGroupIds();\n  const boxRef = useRef<HTMLDivElement>(null);\n  const isEmpty = !panelGroupIds.length;\n  const dashboardTopPosition = boxRef.current?.getBoundingClientRect().top ?? HEADER_HEIGHT;\n  const panelFullHeight = window.innerHeight - dashboardTopPosition - window.scrollY;\n\n  return (\n    <Box {...boxProps} sx={{ height: '100%' }} ref={boxRef}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {isEmpty && (\n          <Box sx={{ height: '100%', display: 'flex', alignItems: 'center' }}>\n            <EmptyDashboard {...emptyDashboardProps} />\n          </Box>\n        )}\n        {!isEmpty &&\n          panelGroupIds.map((panelGroupId) => (\n            <GridLayout\n              key={panelGroupId}\n              panelGroupId={panelGroupId}\n              panelOptions={panelOptions}\n              panelFullHeight={panelFullHeight}\n            />\n          ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","useRef","usePanelGroupIds","GridLayout","EmptyDashboard","HEADER_HEIGHT","Dashboard","emptyDashboardProps","panelOptions","boxProps","panelGroupIds","boxRef","isEmpty","length","dashboardTopPosition","current","getBoundingClientRect","top","panelFullHeight","window","innerHeight","scrollY","sx","height","ref","FallbackComponent","display","alignItems","map","panelGroupId"],"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,GAAG,QAAkB,gBAAgB;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,yBAAyB;AACnE,SAAuBC,MAAM,QAAQ,QAAQ;AAC7C,SAASC,gBAAgB,QAAQ,gBAAgB;AACjD,SAASC,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,cAAc,QAA6B,oBAAoB;AAWxE,MAAMC,gBAAgB,KAAK,kGAAkG;AAE7H;;CAEC,GACD,OAAO,SAASC,UAAU,EAAEC,mBAAmB,EAAEC,YAAY,EAAE,GAAGC,UAA0B;IAC1F,MAAMC,gBAAgBR;IACtB,MAAMS,SAASV,OAAuB;IACtC,MAAMW,UAAU,CAACF,cAAcG,MAAM;IACrC,MAAMC,uBAAuBH,OAAOI,OAAO,EAAEC,wBAAwBC,OAAOZ;IAC5E,MAAMa,kBAAkBC,OAAOC,WAAW,GAAGN,uBAAuBK,OAAOE,OAAO;IAElF,qBACE,KAACvB;QAAK,GAAGW,QAAQ;QAAEa,IAAI;YAAEC,QAAQ;QAAO;QAAGC,KAAKb;kBAC9C,cAAA,MAACZ;YAAc0B,mBAAmBzB;;gBAC/BY,yBACC,KAACd;oBAAIwB,IAAI;wBAAEC,QAAQ;wBAAQG,SAAS;wBAAQC,YAAY;oBAAS;8BAC/D,cAAA,KAACvB;wBAAgB,GAAGG,mBAAmB;;;gBAG1C,CAACK,WACAF,cAAckB,GAAG,CAAC,CAACC,6BACjB,KAAC1B;wBAEC0B,cAAcA;wBACdrB,cAAcA;wBACdU,iBAAiBA;uBAHZW;;;;AASnB"}

package/dist/components/DashboardToolbar/DashboardToolbar.d.ts

@@ -5,6 +5,8 @@ export interface DashboardToolbarProps {
     dashboardTitleComponent?: JSX.Element;
     initialVariableIsSticky?: boolean;
     isReadonly: boolean;
+    isVariableEnabled: boolean;
+    isDatasourceEnabled: boolean;
     onEditButtonClick: () => void;
     onCancelButtonClick: () => void;
     onSave?: OnSaveDashboard;

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAW7D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,YA8F/D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAW7D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,YAgG/D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -25,7 +25,7 @@ import { EditJsonButton } from '../EditJsonButton';
 import { SaveDashboardButton } from '../SaveDashboardButton';
 import { DashboardStickyToolbar } from '../DashboardStickyToolbar';
 export const DashboardToolbar = (props)=>{
-    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, onEditButtonClick, onCancelButtonClick, onSave } = props;
+    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, onEditButtonClick, onCancelButtonClick, onSave } = props;
     const { isEditMode } = useEditMode();
     const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));
     const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));
@@ -66,8 +66,8 @@ export const DashboardToolbar = (props)=>{
                                     ml: 1,
                                     whiteSpace: "nowrap",
                                     children: [
-                                        /*#__PURE__*/ _jsx(EditVariablesButton, {}),
-                                        /*#__PURE__*/ _jsx(EditDatasourcesButton, {}),
+                                        isVariableEnabled && /*#__PURE__*/ _jsx(EditVariablesButton, {}),
+                                        isDatasourceEnabled && /*#__PURE__*/ _jsx(EditDatasourcesButton, {}),
                                         /*#__PURE__*/ _jsx(AddPanelButton, {}),
                                         /*#__PURE__*/ _jsx(AddGroupButton, {})
                                     ]

package/dist/components/DashboardToolbar/DashboardToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.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 { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { TimeRangeControls } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\nimport { OnSaveDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditDatasourcesButton } from '../Datasources';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps): ReactElement => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      <Stack data-testid={testId}>\n        <Box\n          px={2}\n          py={1.5}\n          display=\"flex\"\n          sx={{ backgroundColor: (theme) => theme.palette.primary.main + (isEditMode ? '30' : '0') }}\n        >\n          {dashboardTitle}\n          {isEditMode ? (\n            <Stack direction=\"row\" gap={1} ml=\"auto\">\n              {isReadonly && (\n                <Alert severity=\"warning\" sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <Stack direction=\"row\" spacing={0.5} ml={1} whiteSpace=\"nowrap\">\n                <EditVariablesButton />\n                <EditDatasourcesButton />\n                <AddPanelButton />\n                <AddGroupButton />\n              </Stack>\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          ) : (\n            <>\n              {isBiggerThanSm && (\n                <Stack direction=\"row\" gap={1} ml=\"auto\">\n                  <EditButton onClick={onEditButtonClick} />\n                </Stack>\n              )}\n            </>\n          )}\n        </Box>\n        <Box\n          sx={{\n            display: 'flex',\n            width: '100%',\n            alignItems: 'start',\n            padding: (theme) => theme.spacing(1, 2, 0, 2),\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n            flexWrap: 'nowrap',\n            gap: 1,\n          }}\n        >\n          <Box width=\"100%\">\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n          <Stack direction=\"row\" ml=\"auto\" flexWrap=\"wrap\" justifyContent=\"end\">\n            <Stack direction=\"row\" spacing={1} mt={1} ml={1}>\n              <TimeRangeControls />\n              <DownloadButton />\n              <EditJsonButton isReadonly={!isEditMode} />\n            </Stack>\n          </Stack>\n        </Box>\n      </Stack>\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","TimeRangeControls","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","EditVariablesButton","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","isBiggerThanSm","breakpoints","up","isBiggerThanMd","dashboardTitle","variant","testId","data-testid","px","py","display","sx","backgroundColor","theme","palette","primary","main","direction","gap","ml","severity","padding","spacing","whiteSpace","isDisabled","onClick","width","alignItems","flexDirection","flexWrap","FallbackComponent","background","default","justifyContent","mt"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.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 { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { TimeRangeControls } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\nimport { OnSaveDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditDatasourcesButton } from '../Datasources';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  isVariableEnabled: boolean;\n  isDatasourceEnabled: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps): ReactElement => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    isVariableEnabled,\n    isDatasourceEnabled,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      <Stack data-testid={testId}>\n        <Box\n          px={2}\n          py={1.5}\n          display=\"flex\"\n          sx={{ backgroundColor: (theme) => theme.palette.primary.main + (isEditMode ? '30' : '0') }}\n        >\n          {dashboardTitle}\n          {isEditMode ? (\n            <Stack direction=\"row\" gap={1} ml=\"auto\">\n              {isReadonly && (\n                <Alert severity=\"warning\" sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <Stack direction=\"row\" spacing={0.5} ml={1} whiteSpace=\"nowrap\">\n                {isVariableEnabled && <EditVariablesButton />}\n                {isDatasourceEnabled && <EditDatasourcesButton />}\n                <AddPanelButton />\n                <AddGroupButton />\n              </Stack>\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          ) : (\n            <>\n              {isBiggerThanSm && (\n                <Stack direction=\"row\" gap={1} ml=\"auto\">\n                  <EditButton onClick={onEditButtonClick} />\n                </Stack>\n              )}\n            </>\n          )}\n        </Box>\n        <Box\n          sx={{\n            display: 'flex',\n            width: '100%',\n            alignItems: 'start',\n            padding: (theme) => theme.spacing(1, 2, 0, 2),\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n            flexWrap: 'nowrap',\n            gap: 1,\n          }}\n        >\n          <Box width=\"100%\">\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n          <Stack direction=\"row\" ml=\"auto\" flexWrap=\"wrap\" justifyContent=\"end\">\n            <Stack direction=\"row\" spacing={1} mt={1} ml={1}>\n              <TimeRangeControls />\n              <DownloadButton />\n              <EditJsonButton isReadonly={!isEditMode} />\n            </Stack>\n          </Stack>\n        </Box>\n      </Stack>\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","TimeRangeControls","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","EditVariablesButton","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","isVariableEnabled","isDatasourceEnabled","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","isBiggerThanSm","breakpoints","up","isBiggerThanMd","dashboardTitle","variant","testId","data-testid","px","py","display","sx","backgroundColor","theme","palette","primary","main","direction","gap","ml","severity","padding","spacing","whiteSpace","isDisabled","onClick","width","alignItems","flexDirection","flexWrap","FallbackComponent","background","default","justifyContent","mt"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,EAAEC,KAAK,EAAEC,MAAM,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,KAAK,QAAQ,gBAAgB;AAC/F,SAASC,aAAa,EAAEC,UAAU,QAAQ,yBAAyB;AACnE,SAASC,iBAAiB,QAAQ,4BAA4B;AAE9D,SAA0BC,WAAW,QAAQ,gBAAgB;AAC7D,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,mBAAmB,QAAQ,yBAAyB;AAC7D,SAASC,sBAAsB,QAAQ,4BAA4B;AAcnE,OAAO,MAAMC,mBAAmB,CAACC;IAC/B,MAAM,EACJC,aAAa,EACbC,uBAAuB,EACvBC,uBAAuB,EACvBC,UAAU,EACVC,iBAAiB,EACjBC,mBAAmB,EACnBC,iBAAiB,EACjBC,mBAAmB,EACnBC,MAAM,EACP,GAAGT;IAEJ,MAAM,EAAEU,UAAU,EAAE,GAAGrB;IAEvB,MAAMsB,iBAAiB3B,cAAcD,WAAW6B,WAAW,CAACC,EAAE,CAAC;IAC/D,MAAMC,iBAAiB9B,cAAcD,WAAW6B,WAAW,CAACC,EAAE,CAAC;IAE/D,MAAME,iBAAiBb,0BACrBA,wCAEA,KAACvB;QAAWqC,SAAQ;kBAAMf;;IAG5B,MAAMgB,SAAS;IAEf,qBACE;kBACE,cAAA,MAACrC;YAAMsC,eAAaD;;8BAClB,MAACnC;oBACCqC,IAAI;oBACJC,IAAI;oBACJC,SAAQ;oBACRC,IAAI;wBAAEC,iBAAiB,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO,CAACC,IAAI,GAAIjB,CAAAA,aAAa,OAAO,GAAE;oBAAG;;wBAExFK;wBACAL,2BACC,MAAC9B;4BAAMgD,WAAU;4BAAMC,KAAK;4BAAGC,IAAG;;gCAC/B1B,4BACC,KAACnB;oCAAM8C,UAAS;oCAAUT,IAAI;wCAAEC,iBAAiB;wCAAeS,SAAS;oCAAE;8CAAG;;8CAIhF,MAACpD;oCAAMgD,WAAU;oCAAMK,SAAS;oCAAKH,IAAI;oCAAGI,YAAW;;wCACpD7B,mCAAqB,KAACZ;wCACtBa,qCAAuB,KAACZ;sDACzB,KAACJ;sDACD,KAACC;;;8CAEH,KAACM;oCAAoBY,QAAQA;oCAAQ0B,YAAY/B;;8CACjD,KAACvB;oCAAOmC,SAAQ;oCAAWoB,SAAS5B;8CAAqB;;;2CAK3D;sCACGG,gCACC,KAAC/B;gCAAMgD,WAAU;gCAAMC,KAAK;gCAAGC,IAAG;0CAChC,cAAA,KAACnC;oCAAWyC,SAAS7B;;;;;;8BAM/B,MAACzB;oBACCwC,IAAI;wBACFD,SAAS;wBACTgB,OAAO;wBACPC,YAAY;wBACZN,SAAS,CAACR,QAAUA,MAAMS,OAAO,CAAC,GAAG,GAAG,GAAG;wBAC3CM,eAAezB,iBAAiB,QAAQ;wBACxC0B,UAAU;wBACVX,KAAK;oBACP;;sCAEA,KAAC/C;4BAAIuD,OAAM;sCACT,cAAA,KAACnD;gCAAcuD,mBAAmBtD;0CAChC,cAAA,KAACW;oCACCK,yBAAyBA;oCACzBmB,IAAI;wCACFC,iBAAiB,CAAC,EAAEE,OAAO,EAAE,GAAKA,QAAQiB,UAAU,CAACC,OAAO;oCAC9D;;;;sCAIN,KAAC/D;4BAAMgD,WAAU;4BAAME,IAAG;4BAAOU,UAAS;4BAAOI,gBAAe;sCAC9D,cAAA,MAAChE;gCAAMgD,WAAU;gCAAMK,SAAS;gCAAGY,IAAI;gCAAGf,IAAI;;kDAC5C,KAAC1C;kDACD,KAACI;kDACD,KAACI;wCAAeQ,YAAY,CAACM;;;;;;;;;;AAO3C,EAAE"}

package/dist/components/Datasources/DatasourceEditor.js

@@ -62,10 +62,9 @@ export function DatasourceEditor(props) {
     };
     const editDatasource = (name)=>{
         setDatasourceFormAction('update');
-        var _datasources_name;
         setDatasourceEdit({
             name: name,
-            spec: (_datasources_name = datasources[name]) !== null && _datasources_name !== void 0 ? _datasources_name : defaultSpec
+            spec: datasources[name] ?? defaultSpec
         });
     };
     return /*#__PURE__*/ _jsx(_Fragment, {
@@ -161,8 +160,6 @@ export function DatasourceEditor(props) {
                                             }),
                                             /*#__PURE__*/ _jsx(TableBody, {
                                                 children: Object.entries(datasources).map(([name, spec])=>{
-                                                    var _spec_display;
-                                                    var _spec_display_description;
                                                     return /*#__PURE__*/ _jsxs(TableRow, {
                                                         children: [
                                                             /*#__PURE__*/ _jsx(TableCell, {
@@ -177,7 +174,7 @@ export function DatasourceEditor(props) {
                                                                 children: spec.plugin.kind
                                                             }),
                                                             /*#__PURE__*/ _jsx(TableCell, {
-                                                                children: (_spec_display_description = (_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.description) !== null && _spec_display_description !== void 0 ? _spec_display_description : ''
+                                                                children: spec.display?.description ?? ''
                                                             }),
                                                             /*#__PURE__*/ _jsxs(TableCell, {
                                                                 align: "right",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Box,\n  Button,\n  IconButton,\n  Stack,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport { Action, DatasourceDefinition, DatasourceSpec } from '@perses-dev/core';\nimport { DatasourceEditorForm, ValidationProvider } from '@perses-dev/plugin-system';\nimport { ReactElement, useState } from 'react';\nimport { useImmer } from 'use-immer';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport function DatasourceEditor(props: {\n  datasources: Record<string, DatasourceSpec>;\n  onChange: (datasources: Record<string, DatasourceSpec>) => void;\n  onCancel: () => void;\n}): ReactElement {\n  const [datasources, setDatasources] = useImmer(props.datasources);\n  const [datasourceFormAction, setDatasourceFormAction] = useState<Action>('update');\n  const [datasourceEdit, setDatasourceEdit] = useState<DatasourceDefinition | null>(null);\n  const defaultSpec: DatasourceSpec = {\n    default: false,\n    plugin: {\n      // TODO: find a way to avoid assuming that the PrometheusDatasource plugin is installed\n      kind: 'PrometheusDatasource',\n      spec: {},\n    },\n  };\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const handleCancel = (): void => {\n    if (JSON.stringify(props.datasources) !== JSON.stringify(datasources)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeDatasource = (name: string): void => {\n    setDatasources((draft) => {\n      delete draft[name];\n    });\n  };\n\n  const addDatasource = (): void => {\n    setDatasourceFormAction('create');\n    setDatasourceEdit({\n      name: 'NewDatasource',\n      spec: defaultSpec,\n    });\n  };\n\n  const editDatasource = (name: string): void => {\n    setDatasourceFormAction('update');\n    setDatasourceEdit({\n      name: name,\n      spec: datasources[name] ?? defaultSpec,\n    });\n  };\n\n  return (\n    <>\n      {datasourceEdit ? (\n        <ValidationProvider>\n          <DatasourceEditorForm\n            initialDatasourceDefinition={datasourceEdit}\n            action={datasourceFormAction}\n            isDraft={true}\n            onActionChange={setDatasourceFormAction}\n            onSave={(def: DatasourceDefinition) => {\n              setDatasources((draft) => {\n                delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed\n                draft[def.name] = def.spec;\n                setDatasourceEdit(null);\n              });\n            }}\n            onClose={() => {\n              setDatasourceEdit(null);\n            }}\n          />\n        </ValidationProvider>\n      ) : (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">Edit Dashboard Datasources</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.datasources === datasources}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(datasources);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of datasources\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {Object.entries(datasources).map(([name, spec]) => {\n                        return (\n                          <TableRow key={name}>\n                            <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                              {name}\n                            </TableCell>\n                            <TableCell>{spec.plugin.kind}</TableCell>\n                            <TableCell>{spec.display?.description ?? ''}</TableCell>\n                            <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                              <IconButton onClick={() => editDatasource(name)}>\n                                <PencilIcon />\n                              </IconButton>\n                              <IconButton onClick={() => removeDatasource(name)}>\n                                <TrashIcon />\n                              </IconButton>\n                            </TableCell>\n                          </TableRow>\n                        );\n                      })}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button\n                    variant=\"contained\"\n                    startIcon={<AddIcon />}\n                    sx={{ marginLeft: 'auto' }}\n                    onClick={addDatasource}\n                  >\n                    Add Datasource\n                  </Button>\n                </Box>\n              </Stack>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["Box","Button","IconButton","Stack","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","AddIcon","PencilIcon","TrashIcon","DatasourceEditorForm","ValidationProvider","useState","useImmer","useDiscardChangesConfirmationDialog","DatasourceEditor","props","datasources","setDatasources","datasourceFormAction","setDatasourceFormAction","datasourceEdit","setDatasourceEdit","defaultSpec","default","plugin","kind","spec","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeDatasource","name","draft","addDatasource","editDatasource","initialDatasourceDefinition","action","isDraft","onActionChange","onSave","def","onClose","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","onChange","color","overflowY","minWidth","aria-label","align","Object","entries","map","component","scope","fontWeight","whiteSpace","startIcon"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Box,\n  Button,\n  IconButton,\n  Stack,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport { Action, DatasourceDefinition, DatasourceSpec } from '@perses-dev/core';\nimport { DatasourceEditorForm, ValidationProvider } from '@perses-dev/plugin-system';\nimport { ReactElement, useState } from 'react';\nimport { useImmer } from 'use-immer';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport function DatasourceEditor(props: {\n  datasources: Record<string, DatasourceSpec>;\n  onChange: (datasources: Record<string, DatasourceSpec>) => void;\n  onCancel: () => void;\n}): ReactElement {\n  const [datasources, setDatasources] = useImmer(props.datasources);\n  const [datasourceFormAction, setDatasourceFormAction] = useState<Action>('update');\n  const [datasourceEdit, setDatasourceEdit] = useState<DatasourceDefinition | null>(null);\n  const defaultSpec: DatasourceSpec = {\n    default: false,\n    plugin: {\n      // TODO: find a way to avoid assuming that the PrometheusDatasource plugin is installed\n      kind: 'PrometheusDatasource',\n      spec: {},\n    },\n  };\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const handleCancel = (): void => {\n    if (JSON.stringify(props.datasources) !== JSON.stringify(datasources)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeDatasource = (name: string): void => {\n    setDatasources((draft) => {\n      delete draft[name];\n    });\n  };\n\n  const addDatasource = (): void => {\n    setDatasourceFormAction('create');\n    setDatasourceEdit({\n      name: 'NewDatasource',\n      spec: defaultSpec,\n    });\n  };\n\n  const editDatasource = (name: string): void => {\n    setDatasourceFormAction('update');\n    setDatasourceEdit({\n      name: name,\n      spec: datasources[name] ?? defaultSpec,\n    });\n  };\n\n  return (\n    <>\n      {datasourceEdit ? (\n        <ValidationProvider>\n          <DatasourceEditorForm\n            initialDatasourceDefinition={datasourceEdit}\n            action={datasourceFormAction}\n            isDraft={true}\n            onActionChange={setDatasourceFormAction}\n            onSave={(def: DatasourceDefinition) => {\n              setDatasources((draft) => {\n                delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed\n                draft[def.name] = def.spec;\n                setDatasourceEdit(null);\n              });\n            }}\n            onClose={() => {\n              setDatasourceEdit(null);\n            }}\n          />\n        </ValidationProvider>\n      ) : (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">Edit Dashboard Datasources</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.datasources === datasources}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(datasources);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of datasources\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {Object.entries(datasources).map(([name, spec]) => {\n                        return (\n                          <TableRow key={name}>\n                            <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                              {name}\n                            </TableCell>\n                            <TableCell>{spec.plugin.kind}</TableCell>\n                            <TableCell>{spec.display?.description ?? ''}</TableCell>\n                            <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                              <IconButton onClick={() => editDatasource(name)}>\n                                <PencilIcon />\n                              </IconButton>\n                              <IconButton onClick={() => removeDatasource(name)}>\n                                <TrashIcon />\n                              </IconButton>\n                            </TableCell>\n                          </TableRow>\n                        );\n                      })}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button\n                    variant=\"contained\"\n                    startIcon={<AddIcon />}\n                    sx={{ marginLeft: 'auto' }}\n                    onClick={addDatasource}\n                  >\n                    Add Datasource\n                  </Button>\n                </Box>\n              </Stack>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["Box","Button","IconButton","Stack","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","AddIcon","PencilIcon","TrashIcon","DatasourceEditorForm","ValidationProvider","useState","useImmer","useDiscardChangesConfirmationDialog","DatasourceEditor","props","datasources","setDatasources","datasourceFormAction","setDatasourceFormAction","datasourceEdit","setDatasourceEdit","defaultSpec","default","plugin","kind","spec","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeDatasource","name","draft","addDatasource","editDatasource","initialDatasourceDefinition","action","isDraft","onActionChange","onSave","def","onClose","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","onChange","color","overflowY","minWidth","aria-label","align","Object","entries","map","component","scope","fontWeight","whiteSpace","startIcon"],"mappings":"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"}

package/dist/components/Datasources/EditDatasourcesButton.js

@@ -34,13 +34,10 @@ export function EditDatasourcesButton() {
     const handleChangeDatasources = (datasources)=>{
         // Calculates the new list of datasources that are allowed to be used.
         const newSavedDatasources = Object.keys(datasources).filter((key)=>{
-            var _datasources_key_plugin, _datasources_key, _savedDatasources_key_plugin, _savedDatasources_key, _datasources_key_plugin_spec, _datasources_key_plugin1, _datasources_key1, _savedDatasources_key_plugin_spec, _savedDatasources_key_plugin1, _savedDatasources_key1;
-            var _datasources_key_plugin_spec1;
             // Datasources are allowed to be used if a) they are direct, or b) they are proxied, and their
             // proxy is the same as what we have saved.
-            const isDirect = 'directUrl' in ((_datasources_key_plugin_spec1 = (_datasources_key = datasources[key]) === null || _datasources_key === void 0 ? void 0 : (_datasources_key_plugin = _datasources_key.plugin) === null || _datasources_key_plugin === void 0 ? void 0 : _datasources_key_plugin.spec) !== null && _datasources_key_plugin_spec1 !== void 0 ? _datasources_key_plugin_spec1 : {});
-            var _savedDatasources_key_plugin_spec1;
-            const isSavedProxy = !isDirect && !('directUrl' in ((_savedDatasources_key_plugin_spec1 = (_savedDatasources_key = savedDatasources[key]) === null || _savedDatasources_key === void 0 ? void 0 : (_savedDatasources_key_plugin = _savedDatasources_key.plugin) === null || _savedDatasources_key_plugin === void 0 ? void 0 : _savedDatasources_key_plugin.spec) !== null && _savedDatasources_key_plugin_spec1 !== void 0 ? _savedDatasources_key_plugin_spec1 : {})) && ((_datasources_key1 = datasources[key]) === null || _datasources_key1 === void 0 ? void 0 : (_datasources_key_plugin1 = _datasources_key1.plugin) === null || _datasources_key_plugin1 === void 0 ? void 0 : (_datasources_key_plugin_spec = _datasources_key_plugin1.spec) === null || _datasources_key_plugin_spec === void 0 ? void 0 : _datasources_key_plugin_spec.proxy) === ((_savedDatasources_key1 = savedDatasources[key]) === null || _savedDatasources_key1 === void 0 ? void 0 : (_savedDatasources_key_plugin1 = _savedDatasources_key1.plugin) === null || _savedDatasources_key_plugin1 === void 0 ? void 0 : (_savedDatasources_key_plugin_spec = _savedDatasources_key_plugin1.spec) === null || _savedDatasources_key_plugin_spec === void 0 ? void 0 : _savedDatasources_key_plugin_spec.proxy);
+            const isDirect = 'directUrl' in (datasources[key]?.plugin?.spec ?? {});
+            const isSavedProxy = !isDirect && !('directUrl' in (savedDatasources[key]?.plugin?.spec ?? {})) && datasources[key]?.plugin?.spec?.proxy === savedDatasources[key]?.plugin?.spec?.proxy;
             return isDirect || isSavedProxy;
         }).reduce((obj, key)=>{
             obj[key] = datasources[key];

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 { 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;gBAG0BL,yBAAAA,kBAGbN,8BAAAA,uBAClBM,8BAAAA,0BAAAA,mBAA0CN,mCAAAA,+BAAAA;gBAJXM;YAFjC,8FAA8F;YAC9F,2CAA2C;YAC3C,MAAMM,WAAW,eAAgBN,CAAAA,CAAAA,iCAAAA,mBAAAA,WAAW,CAACK,IAAI,cAAhBL,wCAAAA,0BAAAA,iBAAkBO,MAAM,cAAxBP,8CAAAA,wBAA0BQ,IAAI,cAA9BR,2CAAAA,gCAAkC,CAAC,CAAA;gBAGhDN;YAFpB,MAAMe,eACJ,CAACH,YACD,CAAE,CAAA,eAAgBZ,CAAAA,CAAAA,sCAAAA,wBAAAA,gBAAgB,CAACW,IAAI,cAArBX,6CAAAA,+BAAAA,sBAAuBa,MAAM,cAA7Bb,mDAAAA,6BAA+Bc,IAAI,cAAnCd,gDAAAA,qCAAuC,CAAC,CAAA,CAAC,KAC3DM,EAAAA,oBAAAA,WAAW,CAACK,IAAI,cAAhBL,yCAAAA,2BAAAA,kBAAkBO,MAAM,cAAxBP,gDAAAA,+BAAAA,yBAA0BQ,IAAI,cAA9BR,mDAAAA,6BAAgCU,KAAK,QAAKhB,yBAAAA,gBAAgB,CAACW,IAAI,cAArBX,8CAAAA,gCAAAA,uBAAuBa,MAAM,cAA7Bb,qDAAAA,oCAAAA,8BAA+Bc,IAAI,cAAnCd,wDAAAA,kCAAqCgB,KAAK;YAEtF,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"}
+{"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.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, ReactElement } from 'react';\nimport { Dialog } from '@perses-dev/components';\nimport { useDeletePanelDialog, DeletePanelDialogState } 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\n  const handleDelete = (e: FormEvent): void => {\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.map

@@ -1 +1 @@
-{"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,YA4CzC,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,10 +13,11 @@
 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) {
@@ -24,8 +25,8 @@ export const DeletePanelGroupDialog = ()=>{
         }
         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, ReactElement } 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 = (): ReactElement => {\n  const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = useDeletePanelGroupDialog();\n\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  };\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,iBAAiBI,WAAW;YAC9B,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/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 { 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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"}
+{"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":"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,iBAAiB,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,gBAAgB;AAC5E,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,OAAOC,kBAAkB,kCAAkC;AAC3D,OAAOC,SAAuBC,MAAM,QAAQ,QAAQ;AACpD,SAASC,SAAS,QAAQ,OAAO;AACjC,SAASC,YAAY,QAAQ,gBAAgB;AAE7C,+DAA+D;AAC/D,OAAO,SAASC;IACd,MAAM,EAAEC,SAAS,EAAE,GAAGF;IACtB,MAAMG,gBAAgBL,OAA0B;IAChD,MAAM,CAACM,UAAUC,YAAY,GAAGR,MAAMS,QAAQ,CAAqB;IACnE,MAAMC,OAAOC,QAAQJ;IACrB,MAAMK,cAAc,CAACC;QACnBL,YAAYK,MAAMC,aAAa;IACjC;IACA,MAAMC,kBAAkB,CAACC,QAAyBC,QAAiB;YACjET,YAAY;YAEZ,IAAIU,MACFC,UAAU;YAEZ,OAAQH;gBACN,KAAK;oBACHE,OAAO;oBACPC,UAAUC,KAAKlB,SAAS,CAACG,WAAW,MAAM;oBAC1C;gBACF,KAAK;oBACH;wBACEa,OAAO;wBAEP,IAAID,UAAU,MAAM;4BAClB,MAAMI,OAAOhB,UAAUiB,QAAQ,CAACD,IAAI,CAACE,WAAW,GAAGC,OAAO,CAAC,eAAe;4BAC1EL,UAAUjB,UAAU;gCAClBuB,YAAY;gCACZC,MAAM;gCACNJ,UAAU;oCACRK,QAAQ;wCACN,0BAA0B;wCAC1B,8BAA8BN;wCAC9B,6BAA6B;oCAC/B;oCACAA;gCACF;gCACAO,WAAWvB,UAAUiB,QAAQ,CAACO,OAAO;gCACrCC,MAAMzB,UAAUyB,IAAI;4BACtB;wBACF,OAAO;4BACLX,UAAUjB,UAAUG;wBACtB;oBACF;oBACA;YACJ;YAEA,IAAI,CAACC,iBAAiB,CAACA,cAAcyB,OAAO,EAAE;YAC9C,kBAAkB;YAClB,MAAMC,gBAAgBC,IAAIC,eAAe,CAAC,IAAIC,KAAK;gBAAChB;aAAQ,EAAE;gBAAED;YAAK;YACrE,iBAAiB;YACjBZ,cAAcyB,OAAO,CAACK,QAAQ,GAAG,GAAG/B,UAAUiB,QAAQ,CAACD,IAAI,GAAGJ,UAAU,OAAO,QAAQ,GAAG,CAAC,EAAED,QAAQ;YACrGV,cAAcyB,OAAO,CAACM,IAAI,GAAGL;YAC7B1B,cAAcyB,OAAO,CAACO,KAAK;YAC3B,0CAA0C;YAC1CL,IAAIM,eAAe,CAACP;QACtB;IAEA,qBACE;;0BACE,KAAClC;gBACC0C,IAAG;gBACHC,iBAAe/B,OAAO,eAAegC;gBACrCC,iBAAc;gBACdC,iBAAelC,OAAO,SAASgC;gBAC/BG,SAASjC;0BAET,cAAA,KAACb;;0BAGH,KAACJ;gBACC6C,IAAG;gBACHjC,UAAUA;gBACVG,MAAMA;gBACNoC,cAAc;gBACdC,SAAS,IAAMvC,YAAY;gBAC3BwC,eAAe;oBACb,mBAAmB;gBACrB;0BAEA,cAAA,KAACC;8BACC,cAAA,KAACvD;wBAAkBwD,aAAa,IAAM1C,YAAY;kCAChD,cAAA,MAACX;;8CACC,KAACD;oCAASiD,SAAS9B,gBAAgB;8CAAS;;8CAC5C,KAACnB;oCAASiD,SAAS9B,gBAAgB;8CAAS;;8CAC5C,KAACnB;oCAASiD,SAAS9B,gBAAgB,QAAQ;8CAAO;;;;;;;0BAS1D,KAACoC;gBAAEC,KAAK9C;gBAAe+C,OAAO;oBAAEC,SAAS;gBAAO;;;;AAGtD"}

package/dist/components/EditJsonDialog/EditJsonDialog.js

@@ -20,7 +20,7 @@ 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",
@@ -32,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
             })
@@ -52,15 +52,13 @@ 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 (_) {
         // 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, 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,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,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"}
+{"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.js

@@ -97,7 +97,7 @@ const EmptyDashboardActions = ({ actions, isEditMode, onEditButtonClick })=>{
                     }),
                     /*#__PURE__*/ _jsx(Typography, {
                         variant: "body1",
-                        children: description !== null && description !== void 0 ? description : defaultDescription
+                        children: description ?? defaultDescription
                     }),
                     actionsContent && /*#__PURE__*/ _jsx(Box, {
                         sx: {