@perses-dev/dashboards 0.24.0 → 0.26.0

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -13,7 +13,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';
-import PencilIcon from 'mdi-material-ui/PencilOutline';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
 import { useDashboard, useEditMode } from '../../context';
 import { AddPanelButton } from '../AddPanelButton';
@@ -21,6 +20,8 @@ import { AddGroupButton } from '../AddGroupButton';
 import { DownloadButton } from '../DownloadButton';
 import { TimeRangeControls } from '../TimeRangeControls';
 import { TemplateVariableList, EditVariablesButton } from '../Variables';
+import { EditButton } from '../EditButton';
+import { EditJsonButton } from '../EditJsonButton';
 export const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave ,  } = props;
     const dashboard = useDashboard();
@@ -117,7 +118,8 @@ export const DashboardToolbar = (props)=>{
                                 /*#__PURE__*/ _jsx(AddPanelButton, {}),
                                 /*#__PURE__*/ _jsx(AddGroupButton, {}),
                                 /*#__PURE__*/ _jsx(TimeRangeControls, {}),
-                                /*#__PURE__*/ _jsx(DownloadButton, {})
+                                /*#__PURE__*/ _jsx(DownloadButton, {}),
+                                /*#__PURE__*/ _jsx(EditJsonButton, {})
                             ]
                         }) : // On smaller screens, make it two rows
                         /*#__PURE__*/ _jsxs(Stack, {
@@ -132,7 +134,8 @@ export const DashboardToolbar = (props)=>{
                                     },
                                     children: [
                                         /*#__PURE__*/ _jsx(TimeRangeControls, {}),
-                                        /*#__PURE__*/ _jsx(DownloadButton, {})
+                                        /*#__PURE__*/ _jsx(DownloadButton, {}),
+                                        /*#__PURE__*/ _jsx(EditJsonButton, {})
                                     ]
                                 }),
                                 /*#__PURE__*/ _jsxs(Stack, {
@@ -172,15 +175,8 @@ export const DashboardToolbar = (props)=>{
                             children: [
                                 /*#__PURE__*/ _jsx(TimeRangeControls, {}),
                                 /*#__PURE__*/ _jsx(DownloadButton, {}),
-                                isBiggerThanSm && /*#__PURE__*/ _jsx(Button, {
-                                    variant: "outlined",
-                                    color: "secondary",
-                                    startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),
-                                    onClick: onEditButtonClick,
-                                    sx: {
-                                        marginLeft: 'auto'
-                                    },
-                                    children: "Edit"
+                                isBiggerThanSm && /*#__PURE__*/ _jsx(EditButton, {
+                                    onClick: onEditButtonClick
                                 })
                             ]
                         })

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 { useState } from 'react';\nimport { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport { useDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { TimeRangeControls } from '../TimeRangeControls';\nimport { TemplateVariableList, EditVariablesButton } from '../Variables';\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?: (entity: DashboardResource) => Promise<DashboardResource>;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const dashboard = useDashboard();\n  const { isEditMode, setEditMode } = useEditMode();\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n\n  const [isSavingDashboard, setSavingDashboard] = useState<boolean>(false);\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const onSaveButtonClick = () => {\n    if (onSave !== undefined) {\n      setSavingDashboard(true);\n      onSave(dashboard.dashboard)\n        .then(() => {\n          setSavingDashboard(false);\n          setEditMode(false);\n        })\n        .catch(() => {\n          setSavingDashboard(false);\n        });\n    } else {\n      setEditMode(false);\n    }\n  };\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={1} data-testid={testId}>\n          <Box p={2} display=\"flex\" sx={{ backgroundColor: (theme) => theme.palette.primary.main + '30' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"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              <Button variant=\"contained\" onClick={onSaveButtonClick} disabled={isReadonly || isSavingDashboard}>\n                Save\n              </Button>\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'start',\n              padding: (theme) => theme.spacing(1, 2, 2, 2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) =>\n                    palette.mode === 'dark' ? palette.background.default : palette.background.paper,\n                }}\n              />\n            </ErrorBoundary>\n            {isBiggerThanMd ? (\n              // On bigger screens, make it one row\n              <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                <EditVariablesButton />\n                <AddPanelButton />\n                <AddGroupButton />\n                <TimeRangeControls />\n                <DownloadButton />\n              </Stack>\n            ) : (\n              // On smaller screens, make it two rows\n              <Stack spacing={1}>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <TimeRangeControls />\n                  <DownloadButton />\n                </Stack>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <EditVariablesButton />\n                  <AddPanelButton />\n                  <AddGroupButton />\n                </Stack>\n              </Stack>\n            )}\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={1} padding={2} data-testid={testId}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <TimeRangeControls />\n              <DownloadButton />\n              {isBiggerThanSm && (\n                <Button\n                  variant=\"outlined\"\n                  color=\"secondary\"\n                  startIcon={<PencilIcon />}\n                  onClick={onEditButtonClick}\n                  sx={{ marginLeft: 'auto' }}\n                >\n                  Edit\n                </Button>\n              )}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) =>\n                    palette.mode === 'dark' ? palette.background.default : palette.background.paper,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["useState","Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","PencilIcon","ErrorBoundary","ErrorAlert","useDashboard","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","TimeRangeControls","TemplateVariableList","EditVariablesButton","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","onEditButtonClick","onCancelButtonClick","onSave","dashboard","isEditMode","setEditMode","isBiggerThanMd","breakpoints","up","isBiggerThanSm","isSavingDashboard","setSavingDashboard","dashboardTitle","variant","onSaveButtonClick","undefined","then","catch","testId","spacing","data-testid","p","display","sx","backgroundColor","theme","palette","primary","main","direction","marginLeft","severity","padding","onClick","disabled","width","alignItems","FallbackComponent","mode","background","default","paper","whiteSpace","color","startIcon","paddingY"],"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 { useState } from 'react';\nimport { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport { useDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { TimeRangeControls } from '../TimeRangeControls';\nimport { TemplateVariableList, EditVariablesButton } from '../Variables';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\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?: (entity: DashboardResource) => Promise<DashboardResource>;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const dashboard = useDashboard();\n  const { isEditMode, setEditMode } = useEditMode();\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n\n  const [isSavingDashboard, setSavingDashboard] = useState<boolean>(false);\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const onSaveButtonClick = () => {\n    if (onSave !== undefined) {\n      setSavingDashboard(true);\n      onSave(dashboard.dashboard)\n        .then(() => {\n          setSavingDashboard(false);\n          setEditMode(false);\n        })\n        .catch(() => {\n          setSavingDashboard(false);\n        });\n    } else {\n      setEditMode(false);\n    }\n  };\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={1} data-testid={testId}>\n          <Box p={2} display=\"flex\" sx={{ backgroundColor: (theme) => theme.palette.primary.main + '30' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"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              <Button variant=\"contained\" onClick={onSaveButtonClick} disabled={isReadonly || isSavingDashboard}>\n                Save\n              </Button>\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'start',\n              padding: (theme) => theme.spacing(1, 2, 2, 2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) =>\n                    palette.mode === 'dark' ? palette.background.default : palette.background.paper,\n                }}\n              />\n            </ErrorBoundary>\n            {isBiggerThanMd ? (\n              // On bigger screens, make it one row\n              <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                <EditVariablesButton />\n                <AddPanelButton />\n                <AddGroupButton />\n                <TimeRangeControls />\n                <DownloadButton />\n                <EditJsonButton />\n              </Stack>\n            ) : (\n              // On smaller screens, make it two rows\n              <Stack spacing={1}>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <TimeRangeControls />\n                  <DownloadButton />\n                  <EditJsonButton />\n                </Stack>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <EditVariablesButton />\n                  <AddPanelButton />\n                  <AddGroupButton />\n                </Stack>\n              </Stack>\n            )}\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={1} padding={2} data-testid={testId}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <TimeRangeControls />\n              <DownloadButton />\n              {isBiggerThanSm && <EditButton onClick={onEditButtonClick} />}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) =>\n                    palette.mode === 'dark' ? palette.background.default : palette.background.paper,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["useState","Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","useDashboard","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","TimeRangeControls","TemplateVariableList","EditVariablesButton","EditButton","EditJsonButton","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","onEditButtonClick","onCancelButtonClick","onSave","dashboard","isEditMode","setEditMode","isBiggerThanMd","breakpoints","up","isBiggerThanSm","isSavingDashboard","setSavingDashboard","dashboardTitle","variant","onSaveButtonClick","undefined","then","catch","testId","spacing","data-testid","p","display","sx","backgroundColor","theme","palette","primary","main","direction","marginLeft","severity","padding","onClick","disabled","width","alignItems","FallbackComponent","mode","background","default","paper","whiteSpace","paddingY"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface EditButtonProps {
+    /**
+     * The label used inside the button.
+     */
+    label?: string;
+    /**
+     * Handler that puts the dashboard into editing mode.
+     */
+    onClick: () => void;
+}
+export declare const EditButton: ({ label, onClick }: EditButtonProps) => JSX.Element;
+//# sourceMappingURL=EditButton.d.ts.map

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

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

package/dist/components/EditButton/EditButton.js

@@ -0,0 +1,30 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@mui/material';
+import PencilIcon from 'mdi-material-ui/PencilOutline';
+export const EditButton = ({ label ='Edit' , onClick  })=>{
+    return /*#__PURE__*/ _jsx(Button, {
+        onClick: onClick,
+        startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),
+        variant: "outlined",
+        color: "secondary",
+        sx: {
+            whiteSpace: 'nowrap',
+            minWidth: 'auto'
+        },
+        children: label
+    });
+};
+
+//# sourceMappingURL=EditButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/EditButton/EditButton.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\n\nexport interface EditButtonProps {\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n\n  /**\n   * Handler that puts the dashboard into editing mode.\n   */\n  onClick: () => void;\n}\n\nexport const EditButton = ({ label = 'Edit', onClick }: EditButtonProps) => {\n  return (\n    <Button\n      onClick={onClick}\n      startIcon={<PencilIcon />}\n      variant=\"outlined\"\n      color=\"secondary\"\n      sx={{ whiteSpace: 'nowrap', minWidth: 'auto' }}\n    >\n      {label}\n    </Button>\n  );\n};\n"],"names":["Button","PencilIcon","EditButton","label","onClick","startIcon","variant","color","sx","whiteSpace","minWidth"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,MAAM,QAAQ,eAAe,CAAC;AACvC,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AAcvD,OAAO,MAAMC,UAAU,GAAG,CAAC,EAAEC,KAAK,EAAG,MAAM,CAAA,EAAEC,OAAO,CAAA,EAAmB,GAAK;IAC1E,qBACE,KAACJ,MAAM;QACLI,OAAO,EAAEA,OAAO;QAChBC,SAAS,gBAAE,KAACJ,UAAU,KAAG;QACzBK,OAAO,EAAC,UAAU;QAClBC,KAAK,EAAC,WAAW;QACjBC,EAAE,EAAE;YAAEC,UAAU,EAAE,QAAQ;YAAEC,QAAQ,EAAE,MAAM;SAAE;kBAE7CP,KAAK;MACC,CACT;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './EditButton';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EditButton/index.ts"],"names":[],"mappings":"AAaA,cAAc,cAAc,CAAC"}

package/dist/components/EditButton/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './EditButton';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/EditButton/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './EditButton';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,cAAc,CAAC"}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const EditJsonButton: () => JSX.Element;
+//# sourceMappingURL=EditJsonButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditJsonButton.d.ts","sourceRoot":"","sources":["../../../src/components/EditJsonButton/EditJsonButton.tsx"],"names":[],"mappings":";AAmBA,eAAO,MAAM,cAAc,mBAS1B,CAAC"}

package/dist/components/EditJsonButton/EditJsonButton.js

@@ -0,0 +1,31 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import CodeIcon from 'mdi-material-ui/CodeBraces';
+import { InfoTooltip } from '@perses-dev/components';
+import { TOOLTIP_TEXT } from '../../constants';
+import { ToolbarIconButton } from '../ToolbarIconButton';
+import { useEditJsonDialog } from '../../context';
+export const EditJsonButton = ()=>{
+    const { openEditJsonDialog  } = useEditJsonDialog();
+    return /*#__PURE__*/ _jsx(InfoTooltip, {
+        description: TOOLTIP_TEXT.editJson,
+        children: /*#__PURE__*/ _jsx(ToolbarIconButton, {
+            variant: "outlined",
+            onClick: ()=>openEditJsonDialog(),
+            children: /*#__PURE__*/ _jsx(CodeIcon, {})
+        })
+    });
+};
+
+//# sourceMappingURL=EditJsonButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/EditJsonButton/EditJsonButton.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport CodeIcon from 'mdi-material-ui/CodeBraces';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { ToolbarIconButton } from '../ToolbarIconButton';\nimport { useEditJsonDialog } from '../../context';\n\nexport const EditJsonButton = () => {\n  const { openEditJsonDialog } = useEditJsonDialog();\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.editJson}>\n      <ToolbarIconButton variant=\"outlined\" onClick={() => openEditJsonDialog()}>\n        <CodeIcon />\n      </ToolbarIconButton>\n    </InfoTooltip>\n  );\n};\n"],"names":["CodeIcon","InfoTooltip","TOOLTIP_TEXT","ToolbarIconButton","useEditJsonDialog","EditJsonButton","openEditJsonDialog","description","editJson","variant","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,OAAOA,QAAQ,MAAM,4BAA4B,CAAC;AAClD,SAASC,WAAW,QAAQ,wBAAwB,CAAC;AACrD,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,iBAAiB,QAAQ,sBAAsB,CAAC;AACzD,SAASC,iBAAiB,QAAQ,eAAe,CAAC;AAElD,OAAO,MAAMC,cAAc,GAAG,IAAM;IAClC,MAAM,EAAEC,kBAAkB,CAAA,EAAE,GAAGF,iBAAiB,EAAE,AAAC;IACnD,qBACE,KAACH,WAAW;QAACM,WAAW,EAAEL,YAAY,CAACM,QAAQ;kBAC7C,cAAA,KAACL,iBAAiB;YAACM,OAAO,EAAC,UAAU;YAACC,OAAO,EAAE,IAAMJ,kBAAkB,EAAE;sBACvE,cAAA,KAACN,QAAQ,KAAG;UACM;MACR,CACd;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './EditJsonButton';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EditJsonButton/index.ts"],"names":[],"mappings":"AAaA,cAAc,kBAAkB,CAAC"}

package/dist/components/EditJsonButton/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './EditJsonButton';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/EditJsonButton/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './EditJsonButton';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,kBAAkB,CAAC"}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const EditJsonDialog: () => JSX.Element;
+//# sourceMappingURL=EditJsonDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditJsonDialog.d.ts","sourceRoot":"","sources":["../../../src/components/EditJsonDialog/EditJsonDialog.tsx"],"names":[],"mappings":";AAmBA,eAAO,MAAM,cAAc,mBAS1B,CAAC"}

package/dist/components/EditJsonDialog/EditJsonDialog.js

@@ -0,0 +1,80 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Alert, FormControl } from '@mui/material';
+import { Dialog, JSONEditor } from '@perses-dev/components';
+import { useEditJsonDialog } from '../../context/DashboardProvider';
+import { useDashboard } from '../../context/useDashboard';
+export const EditJsonDialog = ()=>{
+    const { editJsonDialog , closeEditJsonDialog  } = useEditJsonDialog();
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: !!(editJsonDialog === null || editJsonDialog === void 0 ? void 0 : editJsonDialog.isOpen),
+        scroll: "paper",
+        fullWidth: true,
+        maxWidth: "lg",
+        children: [
+            /*#__PURE__*/ _jsx(Dialog.Header, {
+                onClose: ()=>closeEditJsonDialog(),
+                children: "Edit Dashboard"
+            }),
+            (editJsonDialog === null || editJsonDialog === void 0 ? void 0 : editJsonDialog.isOpen) && /*#__PURE__*/ _jsx(EditJsonDialogForm, {})
+        ]
+    });
+};
+const EditJsonDialogForm = ()=>{
+    const { closeEditJsonDialog  } = useEditJsonDialog();
+    const { dashboard , setDashboard  } = useDashboard();
+    const [draftDashboard, setDraftDashboard] = useState(dashboard);
+    const handleApply = (e)=>{
+        e.preventDefault();
+        setDashboard(draftDashboard);
+        closeEditJsonDialog();
+    };
+    return /*#__PURE__*/ _jsxs(Dialog.Form, {
+        onSubmit: handleApply,
+        children: [
+            /*#__PURE__*/ _jsxs(Dialog.Content, {
+                sx: {
+                    width: '100%'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Alert, {
+                        sx: {
+                            marginBottom: (theme)=>theme.spacing(1)
+                        },
+                        severity: "warning",
+                        children: "Metadata cannot be modified or saved."
+                    }),
+                    /*#__PURE__*/ _jsx(FormControl, {
+                        fullWidth: true,
+                        children: /*#__PURE__*/ _jsx(JSONEditor, {
+                            minHeight: "300px",
+                            maxHeight: "700px",
+                            value: draftDashboard,
+                            onChange: (value)=>setDraftDashboard(value)
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Dialog.Actions, {
+                children: /*#__PURE__*/ _jsx(Dialog.PrimaryButton, {
+                    onClick: handleApply,
+                    children: "Apply"
+                })
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=EditJsonDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEvent, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useEditJsonDialog } from '../../context/DashboardProvider';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport const EditJsonDialog = () => {\n  const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();\n\n  return (\n    <Dialog open={!!editJsonDialog?.isOpen} scroll=\"paper\" fullWidth maxWidth=\"lg\">\n      <Dialog.Header onClose={() => closeEditJsonDialog()}>Edit Dashboard</Dialog.Header>\n      {editJsonDialog?.isOpen && <EditJsonDialogForm />}\n    </Dialog>\n  );\n};\n\nconst EditJsonDialogForm = () => {\n  const { closeEditJsonDialog } = useEditJsonDialog();\n  const { dashboard, setDashboard } = useDashboard();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent) => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\n    closeEditJsonDialog();\n  };\n\n  return (\n    <Dialog.Form onSubmit={handleApply}>\n      <Dialog.Content sx={{ width: '100%' }}>\n        <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n          Metadata cannot be modified or saved.\n        </Alert>\n        <FormControl fullWidth>\n          <JSONEditor\n            minHeight=\"300px\"\n            maxHeight=\"700px\"\n            value={draftDashboard}\n            onChange={(value) => setDraftDashboard(value)}\n          />\n        </FormControl>\n      </Dialog.Content>\n      <Dialog.Actions>\n        <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n      </Dialog.Actions>\n    </Dialog.Form>\n  );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useEditJsonDialog","useDashboard","EditJsonDialog","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","dashboard","setDashboard","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","minHeight","maxHeight","value","onChange","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;AAAA,SAAoBA,QAAQ,QAAQ,OAAO,CAAC;AAC5C,SAASC,KAAK,EAAEC,WAAW,QAAQ,eAAe,CAAC;AACnD,SAASC,MAAM,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AAC5D,SAASC,iBAAiB,QAAQ,iCAAiC,CAAC;AACpE,SAASC,YAAY,QAAQ,4BAA4B,CAAC;AAE1D,OAAO,MAAMC,cAAc,GAAG,IAAM;IAClC,MAAM,EAAEC,cAAc,CAAA,EAAEC,mBAAmB,CAAA,EAAE,GAAGJ,iBAAiB,EAAE,AAAC;IAEpE,qBACE,MAACF,MAAM;QAACO,IAAI,EAAE,CAAC,CAACF,CAAAA,cAAc,aAAdA,cAAc,WAAQ,GAAtBA,KAAAA,CAAsB,GAAtBA,cAAc,CAAEG,MAAM,CAAA;QAAEC,MAAM,EAAC,OAAO;QAACC,SAAS;QAACC,QAAQ,EAAC,IAAI;;0BAC5E,KAACX,MAAM,CAACY,MAAM;gBAACC,OAAO,EAAE,IAAMP,mBAAmB,EAAE;0BAAE,gBAAc;cAAgB;YAClFD,CAAAA,cAAc,aAAdA,cAAc,WAAQ,GAAtBA,KAAAA,CAAsB,GAAtBA,cAAc,CAAEG,MAAM,CAAA,kBAAI,KAACM,kBAAkB,KAAG;;MAC1C,CACT;AACJ,CAAC,CAAC;AAEF,MAAMA,kBAAkB,GAAG,IAAM;IAC/B,MAAM,EAAER,mBAAmB,CAAA,EAAE,GAAGJ,iBAAiB,EAAE,AAAC;IACpD,MAAM,EAAEa,SAAS,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGb,YAAY,EAAE,AAAC;IACnD,MAAM,CAACc,cAAc,EAAEC,iBAAiB,CAAC,GAAGrB,QAAQ,CAACkB,SAAS,CAAC,AAAC;IAEhE,MAAMI,WAAW,GAAG,CAACC,CAAY,GAAK;QACpCA,CAAC,CAACC,cAAc,EAAE,CAAC;QACnBL,YAAY,CAACC,cAAc,CAAC,CAAC;QAC7BX,mBAAmB,EAAE,CAAC;IACxB,CAAC,AAAC;IAEF,qBACE,MAACN,MAAM,CAACsB,IAAI;QAACC,QAAQ,EAAEJ,WAAW;;0BAChC,MAACnB,MAAM,CAACwB,OAAO;gBAACC,EAAE,EAAE;oBAAEC,KAAK,EAAE,MAAM;iBAAE;;kCACnC,KAAC5B,KAAK;wBAAC2B,EAAE,EAAE;4BAAEE,YAAY,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;yBAAE;wBAAEC,QAAQ,EAAC,SAAS;kCAAC,uCAE7E;sBAAQ;kCACR,KAAC/B,WAAW;wBAACW,SAAS;kCACpB,cAAA,KAACT,UAAU;4BACT8B,SAAS,EAAC,OAAO;4BACjBC,SAAS,EAAC,OAAO;4BACjBC,KAAK,EAAEhB,cAAc;4BACrBiB,QAAQ,EAAE,CAACD,KAAK,GAAKf,iBAAiB,CAACe,KAAK,CAAC;0BAC7C;sBACU;;cACC;0BACjB,KAACjC,MAAM,CAACmC,OAAO;0BACb,cAAA,KAACnC,MAAM,CAACoC,aAAa;oBAACC,OAAO,EAAElB,WAAW;8BAAE,OAAK;kBAAuB;cACzD;;MACL,CACd;AACJ,CAAC,AAAC"}

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

@@ -0,0 +1,2 @@
+export * from './EditJsonDialog';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EditJsonDialog/index.ts"],"names":[],"mappings":"AAaA,cAAc,kBAAkB,CAAC"}

package/dist/components/EditJsonDialog/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './EditJsonDialog';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/EditJsonDialog/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './EditJsonDialog';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,kBAAkB,CAAC"}

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

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+export interface EmptyDashboardProps {
+    /**
+     * The title, which should be relatively short text.
+     */
+    title?: string;
+    /**
+     * Imagery to display above the title.
+     */
+    image?: React.ReactNode;
+    /**
+     * Descriptive text, which can be a bit longer.
+     */
+    description?: string;
+    /**
+     * Additional text that will be displayed at the bottom of the empty state.
+     * If not specified, no additional text is shown.
+     */
+    additionalText?: string;
+    /**
+     * Components that are placed below the title and description that include
+     * actions for the user to take (e.g. buttons or links). If not specified,
+     * the default buttons will be displayed. Set to `false` to disable the default
+     * buttons.
+     */
+    actions?: JSX.Element | boolean;
+    /**
+     * Handler for clicking the edit button when the dashboard is in "view" mode.
+     * Required when using the default empty state.
+     */
+    onEditButtonClick?: () => void;
+}
+/**
+ * Communicate that a dashboard is empty and prompt the user to get started.
+ */
+export declare const EmptyDashboard: ({ title, image, description, additionalText, actions, onEditButtonClick, }: EmptyDashboardProps) => JSX.Element;
+//# sourceMappingURL=EmptyDashboard.d.ts.map

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

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

package/dist/components/EmptyDashboard/EmptyDashboard.js

@@ -0,0 +1,124 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Typography, Box } from '@mui/material';
+import { useEditMode } from '../../context';
+import { AddPanelButton } from '../AddPanelButton';
+import { EditVariablesButton } from '../Variables';
+import { EditButton } from '../EditButton';
+const DEFAULT_TITLE = "Let's get started";
+const DEFAULT_DESCRIPTION = {
+    edit: 'We currently support time series charts, gauge charts, stat charts and more!',
+    view: 'This dashboard is currently empty. Get started by clicking the edit button.'
+};
+// Constants from specifics in designs to make the default messaging look good.
+const CONTAINER_WIDTH = '450px';
+const PRIMARY_CONTENT_WIDTH = '289px';
+const COMMON_BUTTON_PROPS = {
+    variant: 'outlined',
+    color: 'secondary'
+};
+const EmptyDashboardActions = ({ actions , isEditMode , onEditButtonClick  })=>{
+    if (actions && typeof actions !== 'boolean') {
+        // Custom actions
+        return actions;
+    }
+    if (actions === false) {
+        // Disable default actions
+        return null;
+    }
+    if (isEditMode) {
+        // Default edit mode actions
+        return /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx(AddPanelButton, {
+                    variant: "outlined",
+                    color: "secondary",
+                    label: "Add Panel",
+                    fullWidth: true
+                }),
+                /*#__PURE__*/ _jsx(EditVariablesButton, {
+                    variant: "outlined",
+                    color: "secondary",
+                    label: "Add Variables",
+                    fullWidth: true
+                })
+            ]
+        });
+    }
+    if (onEditButtonClick) {
+        // Default view mode actions
+        return /*#__PURE__*/ _jsx(EditButton, {
+            ...COMMON_BUTTON_PROPS,
+            label: "Edit Dashboard",
+            onClick: onEditButtonClick
+        });
+    }
+    return null;
+};
+/**
+ * Communicate that a dashboard is empty and prompt the user to get started.
+ */ export const EmptyDashboard = ({ title =DEFAULT_TITLE , image , description , additionalText , actions , onEditButtonClick  })=>{
+    const { isEditMode  } = useEditMode();
+    const defaultDescription = isEditMode ? DEFAULT_DESCRIPTION.edit : DEFAULT_DESCRIPTION.view;
+    const actionsContent = /*#__PURE__*/ _jsx(EmptyDashboardActions, {
+        actions: actions,
+        onEditButtonClick: onEditButtonClick,
+        isEditMode: isEditMode
+    });
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            width: CONTAINER_WIDTH,
+            textAlign: 'center',
+            margin: '0 auto'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    width: PRIMARY_CONTENT_WIDTH,
+                    margin: '0 auto'
+                },
+                children: [
+                    !!image && image,
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h2",
+                        gutterBottom: true,
+                        children: title
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body1",
+                        children: description !== null && description !== void 0 ? description : defaultDescription
+                    }),
+                    actionsContent && /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            display: 'flex',
+                            gap: 2,
+                            marginTop: 1,
+                            justifyContent: 'center'
+                        },
+                        children: actionsContent
+                    })
+                ]
+            }),
+            additionalText && /*#__PURE__*/ _jsx(Typography, {
+                variant: "subtitle1",
+                sx: {
+                    marginTop: 12
+                },
+                children: additionalText
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=EmptyDashboard.js.map

package/dist/components/EmptyDashboard/EmptyDashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/EmptyDashboard/EmptyDashboard.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, Box } from '@mui/material';\nimport { useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditButton } from '../EditButton';\n\nexport interface EmptyDashboardProps {\n  /**\n   * The title, which should be relatively short text.\n   */\n  title?: string;\n\n  /**\n   * Imagery to display above the title.\n   */\n  image?: React.ReactNode;\n\n  /**\n   * Descriptive text, which can be a bit longer.\n   */\n  description?: string;\n\n  /**\n   * Additional text that will be displayed at the bottom of the empty state.\n   * If not specified, no additional text is shown.\n   */\n  additionalText?: string;\n\n  /**\n   * Components that are placed below the title and description that include\n   * actions for the user to take (e.g. buttons or links). If not specified,\n   * the default buttons will be displayed. Set to `false` to disable the default\n   * buttons.\n   */\n  actions?: JSX.Element | boolean;\n\n  /**\n   * Handler for clicking the edit button when the dashboard is in \"view\" mode.\n   * Required when using the default empty state.\n   */\n  onEditButtonClick?: () => void;\n}\n\nconst DEFAULT_TITLE = \"Let's get started\";\n\nconst DEFAULT_DESCRIPTION = {\n  edit: 'We currently support time series charts, gauge charts, stat charts and more!',\n  view: 'This dashboard is currently empty. Get started by clicking the edit button.',\n};\n\n// Constants from specifics in designs to make the default messaging look good.\nconst CONTAINER_WIDTH = '450px';\nconst PRIMARY_CONTENT_WIDTH = '289px';\n\nconst COMMON_BUTTON_PROPS = {\n  variant: 'outlined',\n  color: 'secondary',\n} as const;\n\ntype EmptyDashboardActionsProps = Pick<EmptyDashboardProps, 'actions' | 'onEditButtonClick'> & {\n  isEditMode: boolean;\n};\n\nconst EmptyDashboardActions = ({ actions, isEditMode, onEditButtonClick }: EmptyDashboardActionsProps) => {\n  if (actions && typeof actions !== 'boolean') {\n    // Custom actions\n    return actions;\n  }\n\n  if (actions === false) {\n    // Disable default actions\n    return null;\n  }\n\n  if (isEditMode) {\n    // Default edit mode actions\n    return (\n      <>\n        <AddPanelButton variant=\"outlined\" color=\"secondary\" label=\"Add Panel\" fullWidth />\n        <EditVariablesButton variant=\"outlined\" color=\"secondary\" label=\"Add Variables\" fullWidth />\n      </>\n    );\n  }\n\n  if (onEditButtonClick) {\n    // Default view mode actions\n    return <EditButton {...COMMON_BUTTON_PROPS} label=\"Edit Dashboard\" onClick={onEditButtonClick} />;\n  }\n\n  return null;\n};\n\n/**\n * Communicate that a dashboard is empty and prompt the user to get started.\n */\nexport const EmptyDashboard = ({\n  title = DEFAULT_TITLE,\n  image,\n  description,\n  additionalText,\n  actions,\n  onEditButtonClick,\n}: EmptyDashboardProps) => {\n  const { isEditMode } = useEditMode();\n\n  const defaultDescription = isEditMode ? DEFAULT_DESCRIPTION.edit : DEFAULT_DESCRIPTION.view;\n  const actionsContent = (\n    <EmptyDashboardActions actions={actions} onEditButtonClick={onEditButtonClick} isEditMode={isEditMode} />\n  );\n\n  return (\n    <Box sx={{ width: CONTAINER_WIDTH, textAlign: 'center', margin: '0 auto' }}>\n      <Box sx={{ width: PRIMARY_CONTENT_WIDTH, margin: '0 auto' }}>\n        {!!image && image}\n        <Typography variant=\"h2\" gutterBottom>\n          {title}\n        </Typography>\n        <Typography variant=\"body1\">{description ?? defaultDescription}</Typography>\n        {actionsContent && (\n          <Box sx={{ display: 'flex', gap: 2, marginTop: 1, justifyContent: 'center' }}>{actionsContent}</Box>\n        )}\n      </Box>\n      {additionalText && (\n        <Typography variant=\"subtitle1\" sx={{ marginTop: 12 }}>\n          {additionalText}\n        </Typography>\n      )}\n    </Box>\n  );\n};\n"],"names":["Typography","Box","useEditMode","AddPanelButton","EditVariablesButton","EditButton","DEFAULT_TITLE","DEFAULT_DESCRIPTION","edit","view","CONTAINER_WIDTH","PRIMARY_CONTENT_WIDTH","COMMON_BUTTON_PROPS","variant","color","EmptyDashboardActions","actions","isEditMode","onEditButtonClick","label","fullWidth","onClick","EmptyDashboard","title","image","description","additionalText","defaultDescription","actionsContent","sx","width","textAlign","margin","gutterBottom","display","gap","marginTop","justifyContent"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export * from './EmptyDashboard';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyDashboard/index.ts"],"names":[],"mappings":"AAaA,cAAc,kBAAkB,CAAC"}