@perses-dev/dashboards 0.9.0 → 0.11.0

package/dist/components/PanelGroupDialog/PanelGroupDialog.js

@@ -10,129 +10,83 @@
 // 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 { IconButton, Dialog, DialogTitle, DialogContent, FormControl, InputLabel, TextField, Stack, Box, DialogActions, Button, Select, MenuItem } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
 import CloseIcon from 'mdi-material-ui/Close';
-import { useDashboardApp, useLayouts } from '../../context';
-const PanelGroupDialog = ()=>{
-    var ref, ref1, ref2, ref3, ref4;
-    const { layouts , updateLayout  } = useLayouts();
-    const { panelGroupDialog , closePanelGroupDialog  } = useDashboardApp();
-    const groupIndex = panelGroupDialog === null || panelGroupDialog === void 0 ? void 0 : panelGroupDialog.groupIndex;
-    const isEditingPanelGroup = groupIndex !== undefined;
-    const [isCollapsed, setIsCollapsed] = useState(isEditingPanelGroup && !((ref1 = (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.spec.display) === null || ref1 === void 0 ? void 0 : (ref2 = ref1.collapse) === null || ref2 === void 0 ? void 0 : ref2.open));
-    const [name, setName] = useState(isEditingPanelGroup ? (ref4 = (ref3 = layouts[groupIndex]) === null || ref3 === void 0 ? void 0 : ref3.spec.display) === null || ref4 === void 0 ? void 0 : ref4.title : '');
-    const handleSubmit = (e)=>{
-        var ref;
-        e.preventDefault();
-        var _items;
-        const newLayout = {
-            kind: 'Grid',
-            spec: {
-                display: {
-                    title: name !== null && name !== void 0 ? name : '',
-                    collapse: {
-                        open: !isCollapsed
-                    }
-                },
-                items: groupIndex === undefined ? [] : (_items = (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.spec.items) !== null && _items !== void 0 ? _items : []
-            }
-        };
-        updateLayout(newLayout, groupIndex);
-        closePanelGroupDialog();
+import { useState } from 'react';
+import { usePanelGroupEditor } from '../../context';
+import { PanelGroupEditorForm, panelGroupEditorFormId } from './PanelGroupEditorForm';
+/**
+ * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.
+ */ export function PanelGroupDialog() {
+    const panelGroupEditor = usePanelGroupEditor();
+    // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
+    const [isClosing, setIsClosing] = useState(false);
+    const handleClose = ()=>setIsClosing(true);
+    // Don't call close on the store until the Dialog has completely transitioned out
+    const handleExited = ()=>{
+        panelGroupEditor === null || panelGroupEditor === void 0 ? void 0 : panelGroupEditor.close();
+        setIsClosing(false);
     };
-    const handleSelectCollapsedStateChange = (e)=>{
-        const isCollapsed = e.target.value === 'Close';
-        setIsCollapsed(isCollapsed);
+    // Dialog is open if we have a model and we're not transitioning out
+    const isOpen = panelGroupEditor !== undefined && isClosing === false;
+    const handleSubmit = (values)=>{
+        // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy
+        if (panelGroupEditor === undefined) {
+            throw new Error('Cannot apply changes');
+        }
+        panelGroupEditor.applyChanges(values);
+        handleClose();
     };
-    return /*#__PURE__*/ _jsxs(Dialog, {
-        open: true,
-        children: [
-            /*#__PURE__*/ _jsx(DialogTitle, {
-                children: "Panel Group"
-            }),
-            /*#__PURE__*/ _jsx(IconButton, {
-                "aria-label": "Close",
-                onClick: ()=>closePanelGroupDialog(),
-                sx: (theme)=>({
-                        position: 'absolute',
-                        top: theme.spacing(0.5),
-                        right: theme.spacing(0.5)
-                    }),
-                children: /*#__PURE__*/ _jsx(CloseIcon, {})
-            }),
-            /*#__PURE__*/ _jsxs("form", {
-                onSubmit: handleSubmit,
-                children: [
-                    /*#__PURE__*/ _jsx(DialogContent, {
-                        sx: {
-                            width: '500px'
-                        },
-                        children: /*#__PURE__*/ _jsxs(Stack, {
-                            spacing: 2,
-                            children: [
-                                /*#__PURE__*/ _jsx(FormControl, {
-                                    children: /*#__PURE__*/ _jsx(TextField, {
-                                        required: true,
-                                        label: "Name",
-                                        variant: "outlined",
-                                        value: name,
-                                        onChange: (e)=>setName(e.target.value)
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsxs(Box, {
-                                    sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        width: '100%',
-                                        justifyContent: 'space-between'
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ _jsx(InputLabel, {
-                                            children: "Collapse State"
-                                        }),
-                                        /*#__PURE__*/ _jsxs(Select, {
-                                            required: true,
-                                            displayEmpty: true,
-                                            labelId: "select-collapse-state",
-                                            size: "small",
-                                            value: isCollapsed ? 'Close' : 'Open',
-                                            onChange: handleSelectCollapsedStateChange,
-                                            children: [
-                                                /*#__PURE__*/ _jsx(MenuItem, {
-                                                    value: 'Open',
-                                                    children: "Open"
-                                                }, 'open'),
-                                                /*#__PURE__*/ _jsx(MenuItem, {
-                                                    value: 'Close',
-                                                    children: "Close"
-                                                }, 'close')
-                                            ]
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ _jsxs(DialogActions, {
-                        children: [
-                            /*#__PURE__*/ _jsx(Button, {
-                                variant: "contained",
-                                type: "submit",
-                                children: isEditingPanelGroup ? 'Apply' : 'Add'
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                onClick: ()=>closePanelGroupDialog(),
-                                children: "Cancel"
-                            })
-                        ]
+    return /*#__PURE__*/ _jsx(Dialog, {
+        open: isOpen,
+        TransitionProps: {
+            onExited: handleExited
+        },
+        children: panelGroupEditor !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsxs(DialogTitle, {
+                    children: [
+                        panelGroupEditor.mode,
+                        " Panel Group"
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(IconButton, {
+                    "aria-label": "Close",
+                    onClick: panelGroupEditor.close,
+                    sx: (theme)=>({
+                            position: 'absolute',
+                            top: theme.spacing(0.5),
+                            right: theme.spacing(0.5)
+                        }),
+                    children: /*#__PURE__*/ _jsx(CloseIcon, {})
+                }),
+                /*#__PURE__*/ _jsx(DialogContent, {
+                    sx: {
+                        width: '500px'
+                    },
+                    children: /*#__PURE__*/ _jsx(PanelGroupEditorForm, {
+                        initialValues: panelGroupEditor.initialValues,
+                        onSubmit: handleSubmit
                     })
-                ]
-            })
-        ]
+                }),
+                /*#__PURE__*/ _jsxs(DialogActions, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            variant: "contained",
+                            type: "submit",
+                            form: panelGroupEditorFormId,
+                            children: panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            onClick: panelGroupEditor.close,
+                            children: "Cancel"
+                        })
+                    ]
+                })
+            ]
+        })
     });
-};
-export default PanelGroupDialog;
+}
 
 //# sourceMappingURL=PanelGroupDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"sourcesContent":["// Copyright 2022 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 {\n  IconButton,\n  Dialog,\n  DialogTitle,\n  DialogContent,\n  FormControl,\n  InputLabel,\n  TextField,\n  Stack,\n  Box,\n  DialogActions,\n  Button,\n  Select,\n  SelectChangeEvent,\n  MenuItem,\n} from '@mui/material';\nimport { LayoutDefinition } from '@perses-dev/core';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useDashboardApp, useLayouts } from '../../context';\n\nconst PanelGroupDialog = () => {\n  const { layouts, updateLayout } = useLayouts();\n  const { panelGroupDialog, closePanelGroupDialog } = useDashboardApp();\n\n  const groupIndex = panelGroupDialog?.groupIndex;\n\n  const isEditingPanelGroup = groupIndex !== undefined;\n\n  const [isCollapsed, setIsCollapsed] = useState(\n    isEditingPanelGroup && !layouts[groupIndex]?.spec.display?.collapse?.open\n  );\n  const [name, setName] = useState(isEditingPanelGroup ? layouts[groupIndex]?.spec.display?.title : '');\n\n  const handleSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    const newLayout: LayoutDefinition = {\n      kind: 'Grid',\n      spec: {\n        display: {\n          title: name ?? '',\n          collapse: {\n            open: !isCollapsed,\n          },\n        },\n        items: groupIndex === undefined ? [] : layouts[groupIndex]?.spec.items ?? [],\n      },\n    };\n    updateLayout(newLayout, groupIndex);\n    closePanelGroupDialog();\n  };\n\n  const handleSelectCollapsedStateChange = (e: SelectChangeEvent<string>) => {\n    const isCollapsed = e.target.value === 'Close';\n    setIsCollapsed(isCollapsed);\n  };\n\n  return (\n    <Dialog open>\n      <DialogTitle>Panel Group</DialogTitle>\n      <IconButton\n        aria-label=\"Close\"\n        onClick={() => closePanelGroupDialog()}\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={handleSubmit}>\n        <DialogContent sx={{ width: '500px' }}>\n          <Stack spacing={2}>\n            <FormControl>\n              <TextField\n                required\n                label=\"Name\"\n                variant=\"outlined\"\n                value={name}\n                onChange={(e) => setName(e.target.value)}\n              />\n            </FormControl>\n            <Box sx={{ display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'space-between' }}>\n              <InputLabel>Collapse State</InputLabel>\n              <Select\n                required\n                displayEmpty\n                labelId=\"select-collapse-state\"\n                size=\"small\"\n                value={isCollapsed ? 'Close' : 'Open'}\n                onChange={handleSelectCollapsedStateChange}\n              >\n                <MenuItem key={'open'} value={'Open'}>\n                  Open\n                </MenuItem>\n                <MenuItem key={'close'} value={'Close'}>\n                  Close\n                </MenuItem>\n              </Select>\n            </Box>\n          </Stack>\n        </DialogContent>\n        <DialogActions>\n          <Button variant=\"contained\" type=\"submit\">\n            {isEditingPanelGroup ? 'Apply' : 'Add'}\n          </Button>\n          <Button onClick={() => closePanelGroupDialog()}>Cancel</Button>\n        </DialogActions>\n      </form>\n    </Dialog>\n  );\n};\n\nexport default PanelGroupDialog;\n"],"names":["useState","IconButton","Dialog","DialogTitle","DialogContent","FormControl","InputLabel","TextField","Stack","Box","DialogActions","Button","Select","MenuItem","CloseIcon","useDashboardApp","useLayouts","PanelGroupDialog","layouts","updateLayout","panelGroupDialog","closePanelGroupDialog","groupIndex","isEditingPanelGroup","undefined","isCollapsed","setIsCollapsed","spec","display","collapse","open","name","setName","title","handleSubmit","e","preventDefault","newLayout","kind","items","handleSelectCollapsedStateChange","target","value","aria-label","onClick","sx","theme","position","top","spacing","right","form","onSubmit","width","required","label","variant","onChange","alignItems","justifyContent","displayEmpty","labelId","size","type"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useState } from 'react';\nimport { usePanelGroupEditor } from '../../context';\nimport { PanelGroupEditorForm, panelGroupEditorFormId, PanelGroupEditorFormProps } from './PanelGroupEditorForm';\n\n/**\n * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.\n */\nexport function PanelGroupDialog() {\n  const panelGroupEditor = usePanelGroupEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = () => setIsClosing(true);\n\n  // Don't call close on the store until the Dialog has completely transitioned out\n  const handleExited = () => {\n    panelGroupEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Dialog is open if we have a model and we're not transitioning out\n  const isOpen = panelGroupEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelGroupEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelGroupEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelGroupEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Dialog open={isOpen} TransitionProps={{ onExited: handleExited }}>\n      {panelGroupEditor !== undefined && (\n        <>\n          <DialogTitle>{panelGroupEditor.mode} Panel Group</DialogTitle>\n          <IconButton\n            aria-label=\"Close\"\n            onClick={panelGroupEditor.close}\n            sx={(theme) => ({\n              position: 'absolute',\n              top: theme.spacing(0.5),\n              right: theme.spacing(0.5),\n            })}\n          >\n            <CloseIcon />\n          </IconButton>\n          <DialogContent sx={{ width: '500px' }}>\n            <PanelGroupEditorForm initialValues={panelGroupEditor.initialValues} onSubmit={handleSubmit} />\n          </DialogContent>\n          <DialogActions>\n            <Button variant=\"contained\" type=\"submit\" form={panelGroupEditorFormId}>\n              {panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'}\n            </Button>\n            <Button onClick={panelGroupEditor.close}>Cancel</Button>\n          </DialogActions>\n        </>\n      )}\n    </Dialog>\n  );\n}\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useState","usePanelGroupEditor","PanelGroupEditorForm","panelGroupEditorFormId","PanelGroupDialog","panelGroupEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","open","TransitionProps","onExited","mode","aria-label","onClick","sx","theme","position","top","spacing","right","width","initialValues","onSubmit","variant","type","form"],"mappings":"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"}

package/dist/components/PanelGroupDialog/PanelGroupDialog.test.js

@@ -16,7 +16,8 @@ import userEvent from '@testing-library/user-event';
 import { act } from 'react-dom/test-utils';
 import { DashboardProvider } from '../../context';
 import { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../test';
-import PanelGroupDialog from './PanelGroupDialog';
+import testDashboard from '../../test/testDashboard';
+import { PanelGroupDialog } from './PanelGroupDialog';
 describe('Add Panel Group', ()=>{
     const renderDialog = ()=>{
         const { store , DashboardProviderSpy  } = createDashboardProviderSpy();
@@ -37,56 +38,40 @@ describe('Add Panel Group', ()=>{
         return storeApi;
     };
     it('should add new panel group', async ()=>{
-        // jest.spyOn(dashboardAppSlice, 'useDashboardApp').mockReturnValue(dashboardApp);
         const storeApi = renderDialog();
         // Open the dialog for a new panel group
-        act(()=>storeApi.getState().openPanelGroupDialog());
+        act(()=>storeApi.getState().openAddPanelGroup());
         const nameInput = await screen.findByLabelText(/Name/);
         userEvent.type(nameInput, 'New Panel Group');
         userEvent.click(screen.getByText('Add'));
-        const layouts = storeApi.getState().layouts;
-        expect(layouts).toContainEqual({
-            kind: 'Grid',
-            spec: {
-                display: {
-                    title: 'New Panel Group',
-                    collapse: {
-                        open: true
-                    }
-                },
+        // TODO: Figure out how to test this without coupling to the store state
+        const panelGroups = storeApi.getState().panelGroups;
+        expect(panelGroups).toMatchObject({
+            '3': {
+                id: 3,
+                title: 'New Panel Group',
+                isCollapsed: false,
                 items: []
             }
         });
     });
     it('should edit existing panel group', async ()=>{
+        var ref;
         const storeApi = renderDialog();
         // Open the dialog for an existing panel group
-        act(()=>storeApi.getState().openPanelGroupDialog(0));
+        act(()=>storeApi.getState().openEditPanelGroup(0));
         const nameInput = await screen.findByLabelText(/Name/);
         userEvent.clear(nameInput);
         userEvent.type(nameInput, 'New Name');
         userEvent.click(screen.getByText('Apply'));
-        const layouts = storeApi.getState().layouts;
-        expect(layouts).toContainEqual({
-            kind: 'Grid',
-            spec: {
-                display: {
-                    title: 'New Name',
-                    collapse: {
-                        open: true
-                    }
-                },
-                items: [
-                    {
-                        content: {
-                            $ref: '#/spec/panels/cpu'
-                        },
-                        height: 4,
-                        width: 12,
-                        x: 0,
-                        y: 0
-                    }
-                ]
+        // TODO: Figure out how to test this without coupling to the store state
+        const panelGroups = storeApi.getState().panelGroups;
+        expect(panelGroups).toMatchObject({
+            '0': {
+                id: 0,
+                title: 'New Name',
+                isCollapsed: false,
+                items: (ref = testDashboard.spec.layouts[0]) === null || ref === void 0 ? void 0 : ref.spec.items
             }
         });
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.test.tsx"],"sourcesContent":["// Copyright 2022 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 { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport { DashboardProvider } from '../../context';\nimport { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../test';\nimport PanelGroupDialog from './PanelGroupDialog';\n\ndescribe('Add Panel Group', () => {\n  const renderDialog = () => {\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n    renderWithContext(\n      <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode: true }}>\n        <DashboardProviderSpy />\n        <PanelGroupDialog />\n      </DashboardProvider>\n    );\n\n    const { value: storeApi } = store;\n    if (storeApi === undefined) {\n      throw new Error('Expected dashboard store to be set after initial render');\n    }\n\n    return storeApi;\n  };\n\n  it('should add new panel group', async () => {\n    // jest.spyOn(dashboardAppSlice, 'useDashboardApp').mockReturnValue(dashboardApp);\n    const storeApi = renderDialog();\n\n    // Open the dialog for a new panel group\n    act(() => storeApi.getState().openPanelGroupDialog());\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.type(nameInput, 'New Panel Group');\n    userEvent.click(screen.getByText('Add'));\n\n    const layouts = storeApi.getState().layouts;\n    expect(layouts).toContainEqual({\n      kind: 'Grid',\n      spec: {\n        display: {\n          title: 'New Panel Group',\n          collapse: {\n            open: true,\n          },\n        },\n        items: [],\n      },\n    });\n  });\n\n  it('should edit existing panel group', async () => {\n    const storeApi = renderDialog();\n\n    // Open the dialog for an existing panel group\n    act(() => storeApi.getState().openPanelGroupDialog(0));\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.clear(nameInput);\n    userEvent.type(nameInput, 'New Name');\n    userEvent.click(screen.getByText('Apply'));\n\n    const layouts = storeApi.getState().layouts;\n    expect(layouts).toContainEqual({\n      kind: 'Grid',\n      spec: {\n        display: {\n          title: 'New Name',\n          collapse: {\n            open: true,\n          },\n        },\n        items: [{ content: { $ref: '#/spec/panels/cpu' }, height: 4, width: 12, x: 0, y: 0 }],\n      },\n    });\n  });\n});\n"],"names":["screen","userEvent","act","DashboardProvider","createDashboardProviderSpy","getTestDashboard","renderWithContext","PanelGroupDialog","describe","renderDialog","store","DashboardProviderSpy","initialState","dashboardSpec","spec","isEditMode","value","storeApi","undefined","Error","it","getState","openPanelGroupDialog","nameInput","findByLabelText","type","click","getByText","layouts","expect","toContainEqual","kind","display","title","collapse","open","items","clear","content","$ref","height","width","x","y"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.test.tsx"],"sourcesContent":["// Copyright 2022 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 { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport { DashboardProvider } from '../../context';\nimport { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../test';\nimport testDashboard from '../../test/testDashboard';\nimport { PanelGroupDialog } from './PanelGroupDialog';\n\ndescribe('Add Panel Group', () => {\n  const renderDialog = () => {\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n    renderWithContext(\n      <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode: true }}>\n        <DashboardProviderSpy />\n        <PanelGroupDialog />\n      </DashboardProvider>\n    );\n\n    const { value: storeApi } = store;\n    if (storeApi === undefined) {\n      throw new Error('Expected dashboard store to be set after initial render');\n    }\n\n    return storeApi;\n  };\n\n  it('should add new panel group', async () => {\n    const storeApi = renderDialog();\n\n    // Open the dialog for a new panel group\n    act(() => storeApi.getState().openAddPanelGroup());\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.type(nameInput, 'New Panel Group');\n    userEvent.click(screen.getByText('Add'));\n\n    // TODO: Figure out how to test this without coupling to the store state\n    const panelGroups = storeApi.getState().panelGroups;\n    expect(panelGroups).toMatchObject({\n      '3': {\n        id: 3,\n        title: 'New Panel Group',\n        isCollapsed: false,\n        items: [],\n      },\n    });\n  });\n\n  it('should edit existing panel group', async () => {\n    const storeApi = renderDialog();\n\n    // Open the dialog for an existing panel group\n    act(() => storeApi.getState().openEditPanelGroup(0));\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.clear(nameInput);\n    userEvent.type(nameInput, 'New Name');\n    userEvent.click(screen.getByText('Apply'));\n\n    // TODO: Figure out how to test this without coupling to the store state\n    const panelGroups = storeApi.getState().panelGroups;\n    expect(panelGroups).toMatchObject({\n      '0': {\n        id: 0,\n        title: 'New Name',\n        isCollapsed: false,\n        items: testDashboard.spec.layouts[0]?.spec.items,\n      },\n    });\n  });\n});\n"],"names":["screen","userEvent","act","DashboardProvider","createDashboardProviderSpy","getTestDashboard","renderWithContext","testDashboard","PanelGroupDialog","describe","renderDialog","store","DashboardProviderSpy","initialState","dashboardSpec","spec","isEditMode","value","storeApi","undefined","Error","it","getState","openAddPanelGroup","nameInput","findByLabelText","type","click","getByText","panelGroups","expect","toMatchObject","id","title","isCollapsed","items","openEditPanelGroup","clear","layouts"],"mappings":"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"}

package/dist/components/PanelGroupDialog/PanelGroupEditorForm.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PanelGroupEditorValues } from '../../context';
+export interface PanelGroupEditorFormProps {
+    initialValues: PanelGroupEditorValues;
+    onSubmit: (next: PanelGroupEditorValues) => void;
+}
+export declare function PanelGroupEditorForm(props: PanelGroupEditorFormProps): JSX.Element;
+/**
+ * The `id` attribute added to the `PanelGroupEditorForm` component, allowing submit buttons to live outside the form.
+ */
+export declare const panelGroupEditorFormId = "panel-group-editor-form";
+//# sourceMappingURL=PanelGroupEditorForm.d.ts.map

package/dist/components/PanelGroupDialog/PanelGroupEditorForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelGroupEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/PanelGroupEditorForm.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAIvD,MAAM,WAAW,yBAAyB;IACxC,aAAa,EAAE,sBAAsB,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAsCpE;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,4BAA4B,CAAC"}

package/dist/components/PanelGroupDialog/PanelGroupEditorForm.js

@@ -0,0 +1,82 @@
+// Copyright 2022 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 { FormControl, InputLabel, TextField, Select, MenuItem } from '@mui/material';
+export function PanelGroupEditorForm(props) {
+    const { initialValues , onSubmit  } = props;
+    const [title, setTitle] = useState(initialValues.title);
+    const [isCollapsed, setIsCollapsed] = useState(initialValues.isCollapsed);
+    const handleCollapsedChange = (e)=>{
+        const next = e.target.value;
+        setIsCollapsed(next === 'Closed');
+    };
+    const handleSubmit = (e)=>{
+        e.preventDefault();
+        onSubmit({
+            title,
+            isCollapsed
+        });
+    };
+    return /*#__PURE__*/ _jsxs("form", {
+        id: panelGroupEditorFormId,
+        onSubmit: handleSubmit,
+        children: [
+            /*#__PURE__*/ _jsx(FormControl, {
+                fullWidth: true,
+                margin: "normal",
+                children: /*#__PURE__*/ _jsx(TextField, {
+                    required: true,
+                    label: "Name",
+                    variant: "outlined",
+                    value: title,
+                    onChange: (e)=>setTitle(e.target.value)
+                })
+            }),
+            /*#__PURE__*/ _jsxs(FormControl, {
+                fullWidth: true,
+                margin: "normal",
+                children: [
+                    /*#__PURE__*/ _jsx(InputLabel, {
+                        id: "select-collapse-state",
+                        children: "Collapse State"
+                    }),
+                    /*#__PURE__*/ _jsxs(Select, {
+                        required: true,
+                        displayEmpty: true,
+                        labelId: "select-collapse-state",
+                        label: "Collapse State",
+                        size: "small",
+                        value: isCollapsed ? 'Closed' : 'Open',
+                        onChange: handleCollapsedChange,
+                        children: [
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "Open",
+                                children: "Open"
+                            }),
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "Closed",
+                                children: "Closed"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+/**
+ * The `id` attribute added to the `PanelGroupEditorForm` component, allowing submit buttons to live outside the form.
+ */ export const panelGroupEditorFormId = 'panel-group-editor-form';
+
+//# sourceMappingURL=PanelGroupEditorForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupEditorForm.tsx"],"sourcesContent":["// Copyright 2022 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 { FormEventHandler, useState } from 'react';\nimport { FormControl, InputLabel, TextField, Select, SelectProps, MenuItem } from '@mui/material';\nimport { PanelGroupEditorValues } from '../../context';\n\ntype CollapsedState = 'Open' | 'Closed';\n\nexport interface PanelGroupEditorFormProps {\n  initialValues: PanelGroupEditorValues;\n  onSubmit: (next: PanelGroupEditorValues) => void;\n}\n\nexport function PanelGroupEditorForm(props: PanelGroupEditorFormProps) {\n  const { initialValues, onSubmit } = props;\n\n  const [title, setTitle] = useState(initialValues.title);\n  const [isCollapsed, setIsCollapsed] = useState(initialValues.isCollapsed);\n\n  const handleCollapsedChange: SelectProps<CollapsedState>['onChange'] = (e) => {\n    const next = e.target.value;\n    setIsCollapsed(next === 'Closed');\n  };\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    onSubmit({ title, isCollapsed });\n  };\n\n  return (\n    <form id={panelGroupEditorFormId} onSubmit={handleSubmit}>\n      <FormControl fullWidth margin=\"normal\">\n        <TextField required label=\"Name\" variant=\"outlined\" value={title} onChange={(e) => setTitle(e.target.value)} />\n      </FormControl>\n      <FormControl fullWidth margin=\"normal\">\n        <InputLabel id=\"select-collapse-state\">Collapse State</InputLabel>\n        <Select<CollapsedState>\n          required\n          displayEmpty\n          labelId=\"select-collapse-state\"\n          label=\"Collapse State\"\n          size=\"small\"\n          value={isCollapsed ? 'Closed' : 'Open'}\n          onChange={handleCollapsedChange}\n        >\n          <MenuItem value=\"Open\">Open</MenuItem>\n          <MenuItem value=\"Closed\">Closed</MenuItem>\n        </Select>\n      </FormControl>\n    </form>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelGroupEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelGroupEditorFormId = 'panel-group-editor-form';\n"],"names":["useState","FormControl","InputLabel","TextField","Select","MenuItem","PanelGroupEditorForm","props","initialValues","onSubmit","title","setTitle","isCollapsed","setIsCollapsed","handleCollapsedChange","e","next","target","value","handleSubmit","preventDefault","form","id","panelGroupEditorFormId","fullWidth","margin","required","label","variant","onChange","displayEmpty","labelId","size"],"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,SAA2BA,QAAQ,QAAQ,OAAO,CAAC;AACnD,SAASC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAeC,QAAQ,QAAQ,eAAe,CAAC;AAUlG,OAAO,SAASC,oBAAoB,CAACC,KAAgC,EAAE;IACrE,MAAM,EAAEC,aAAa,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGF,KAAK,AAAC;IAE1C,MAAM,CAACG,KAAK,EAAEC,QAAQ,CAAC,GAAGX,QAAQ,CAACQ,aAAa,CAACE,KAAK,CAAC,AAAC;IACxD,MAAM,CAACE,WAAW,EAAEC,cAAc,CAAC,GAAGb,QAAQ,CAACQ,aAAa,CAACI,WAAW,CAAC,AAAC;IAE1E,MAAME,qBAAqB,GAA4C,CAACC,CAAC,GAAK;QAC5E,MAAMC,IAAI,GAAGD,CAAC,CAACE,MAAM,CAACC,KAAK,AAAC;QAC5BL,cAAc,CAACG,IAAI,KAAK,QAAQ,CAAC,CAAC;IACpC,CAAC,AAAC;IAEF,MAAMG,YAAY,GAAqB,CAACJ,CAAC,GAAK;QAC5CA,CAAC,CAACK,cAAc,EAAE,CAAC;QACnBX,QAAQ,CAAC;YAAEC,KAAK;YAAEE,WAAW;SAAE,CAAC,CAAC;IACnC,CAAC,AAAC;IAEF,qBACE,MAACS,MAAI;QAACC,EAAE,EAAEC,sBAAsB;QAAEd,QAAQ,EAAEU,YAAY;;0BACtD,KAAClB,WAAW;gBAACuB,SAAS;gBAACC,MAAM,EAAC,QAAQ;0BACpC,cAAA,KAACtB,SAAS;oBAACuB,QAAQ;oBAACC,KAAK,EAAC,MAAM;oBAACC,OAAO,EAAC,UAAU;oBAACV,KAAK,EAAER,KAAK;oBAAEmB,QAAQ,EAAE,CAACd,CAAC,GAAKJ,QAAQ,CAACI,CAAC,CAACE,MAAM,CAACC,KAAK,CAAC;kBAAI;cACnG;0BACd,MAACjB,WAAW;gBAACuB,SAAS;gBAACC,MAAM,EAAC,QAAQ;;kCACpC,KAACvB,UAAU;wBAACoB,EAAE,EAAC,uBAAuB;kCAAC,gBAAc;sBAAa;kCAClE,MAAClB,MAAM;wBACLsB,QAAQ;wBACRI,YAAY;wBACZC,OAAO,EAAC,uBAAuB;wBAC/BJ,KAAK,EAAC,gBAAgB;wBACtBK,IAAI,EAAC,OAAO;wBACZd,KAAK,EAAEN,WAAW,GAAG,QAAQ,GAAG,MAAM;wBACtCiB,QAAQ,EAAEf,qBAAqB;;0CAE/B,KAACT,QAAQ;gCAACa,KAAK,EAAC,MAAM;0CAAC,MAAI;8BAAW;0CACtC,KAACb,QAAQ;gCAACa,KAAK,EAAC,QAAQ;0CAAC,QAAM;8BAAW;;sBACnC;;cACG;;MACT,CACP;AACJ,CAAC;AAED;;CAEC,GACD,OAAO,MAAMK,sBAAsB,GAAG,yBAAyB,CAAC"}

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

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

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

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

package/dist/components/PanelGroupDialog/index.js

@@ -0,0 +1,16 @@
+// Copyright 2022 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 './PanelGroupDialog';
+export * from './DeletePanelGroupDialog';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/index.ts"],"sourcesContent":["// Copyright 2022 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 './PanelGroupDialog';\nexport * from './DeletePanelGroupDialog';\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,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAyC,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAY3F,eAAO,MAAM,YAAY,EAAE,UAAU,EAUpC,CAAC;AAEF,wBAAgB,iBAAiB,gBA2DhC"}
+{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAyC,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAW3F,eAAO,MAAM,YAAY,EAAE,UAAU,EAUpC,CAAC;AAEF,wBAAgB,iBAAiB,gBAsDhC"}

package/dist/components/TimeRangeControls/TimeRangeControls.js

@@ -11,12 +11,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { useRef, useState, useMemo } from 'react';
 import { Box, FormControl, Popover, Stack } from '@mui/material';
 import { AbsoluteTimePicker, TimeRangeSelector } from '@perses-dev/components';
-import { getDefaultTimeRange } from '@perses-dev/core';
-import { useTimeRange, useQueryString } from '@perses-dev/plugin-system';
-import { useDashboard } from '../../context';
+import { isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/core';
+import { useDashboardTimeRange } from '../../context';
 // TODO: add time shortcut if one does not match duration
 export const TIME_OPTIONS = [
     {
@@ -75,14 +74,14 @@ export const TIME_OPTIONS = [
     }
 ];
 export function TimeRangeControls() {
-    const { timeRange , setTimeRange  } = useTimeRange();
-    const { dashboard  } = useDashboard();
-    const { queryString  } = useQueryString();
-    const defaultTimeRange = getDefaultTimeRange(dashboard.duration, queryString);
-    // selected form value can be relative or absolute, timeRange from plugin-system is only absolute
-    const [selectedTimeRange, setSelectedTimeRange] = useState(defaultTimeRange);
+    const { timeRange , setTimeRange  } = useDashboardTimeRange();
     const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);
     const anchorEl = useRef();
+    const convertedTimeRange = useMemo(()=>{
+        return isRelativeTimeRange(timeRange) ? toAbsoluteTimeRange(timeRange) : timeRange;
+    }, [
+        timeRange
+    ]);
     return /*#__PURE__*/ _jsxs(Stack, {
         direction: "row",
         spacing: 1,
@@ -99,10 +98,9 @@ export function TimeRangeControls() {
                         padding: theme.spacing(2)
                     }),
                 children: /*#__PURE__*/ _jsx(AbsoluteTimePicker, {
-                    initialTimeRange: timeRange,
+                    initialTimeRange: convertedTimeRange,
                     onChange: (timeRange)=>{
                         setTimeRange(timeRange);
-                        setSelectedTimeRange(timeRange);
                         setShowCustomDateSelector(false);
                     }
                 })
@@ -113,7 +111,7 @@ export function TimeRangeControls() {
                     ref: anchorEl,
                     children: /*#__PURE__*/ _jsx(TimeRangeSelector, {
                         timeOptions: TIME_OPTIONS,
-                        value: selectedTimeRange,
+                        value: timeRange,
                         onSelectChange: (event)=>{
                             const duration = event.target.value;
                             const relativeTimeInput = {
@@ -121,7 +119,6 @@ export function TimeRangeControls() {
                                 end: new Date()
                             };
                             setTimeRange(relativeTimeInput);
-                            setSelectedTimeRange(relativeTimeInput);
                             setShowCustomDateSelector(false);
                         },
                         onCustomClick: ()=>{