@perses-dev/dashboards 0.8.0 → 0.9.0

package/dist/components/PanelGroupDialog/PanelGroupDialog.js

@@ -1 +1,138 @@
-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 CloseIcon from"mdi-material-ui/Close";import{useDashboardApp,useLayouts}from"../../context";const PanelGroupDialog=()=>{var e,l,o,t,i;const{layouts:s,updateLayout:n}=useLayouts(),{panelGroupDialog:a,closePanelGroupDialog:r}=useDashboardApp(),{groupIndex:u}=a,d=void 0!==u,[p,c]=useState(d&&!(null===(o=null===(l=null===(e=s[u])||void 0===e?void 0:e.spec.display)||void 0===l?void 0:l.collapse)||void 0===o?void 0:o.open)),[x,m]=useState(d?null===(i=null===(t=s[u])||void 0===t?void 0:t.spec.display)||void 0===i?void 0:i.title:"");return _jsxs(Dialog,{open:!0,children:[_jsx(DialogTitle,{children:"Panel Group"}),_jsx(IconButton,{"aria-label":"Close",onClick:()=>r(),sx:e=>({position:"absolute",top:e.spacing(.5),right:e.spacing(.5)}),children:_jsx(CloseIcon,{})}),_jsxs("form",{onSubmit:e=>{var l,o;e.preventDefault();const t={kind:"Grid",spec:{display:{title:null!=x?x:"",collapse:{open:!p}},items:void 0===u?[]:null!==(o=null===(l=s[u])||void 0===l?void 0:l.spec.items)&&void 0!==o?o:[]}};n(t,u),r()},children:[_jsx(DialogContent,{sx:{width:"500px"},children:_jsxs(Stack,{spacing:2,children:[_jsx(FormControl,{children:_jsx(TextField,{required:!0,label:"Name",variant:"outlined",value:x,onChange:e=>m(e.target.value)})}),_jsxs(Box,{sx:{display:"flex",alignItems:"center",width:"100%",justifyContent:"space-between"},children:[_jsx(InputLabel,{children:"Collapse State"}),_jsxs(Select,{required:!0,displayEmpty:!0,labelId:"select-collapse-state",size:"small",value:p?"Close":"Open",onChange:e=>{const l="Close"===e.target.value;c(l)},children:[_jsx(MenuItem,{value:"Open",children:"Open"},"open"),_jsx(MenuItem,{value:"Close",children:"Close"},"close")]})]})]})}),_jsxs(DialogActions,{children:[_jsx(Button,{variant:"contained",type:"submit",children:d?"Apply":"Add"}),_jsx(Button,{onClick:()=>r(),children:"Cancel"})]})]})]})};export default PanelGroupDialog;
+// 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 { IconButton, Dialog, DialogTitle, DialogContent, FormControl, InputLabel, TextField, Stack, Box, DialogActions, Button, Select, MenuItem } 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();
+    };
+    const handleSelectCollapsedStateChange = (e)=>{
+        const isCollapsed = e.target.value === 'Close';
+        setIsCollapsed(isCollapsed);
+    };
+    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"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+export default PanelGroupDialog;
+
+//# sourceMappingURL=PanelGroupDialog.js.map

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

@@ -0,0 +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":"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,SACEC,UAAU,EACVC,MAAM,EACNC,WAAW,EACXC,aAAa,EACbC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,KAAK,EACLC,GAAG,EACHC,aAAa,EACbC,MAAM,EACNC,MAAM,EAENC,QAAQ,QACH,eAAe,CAAC;AAEvB,OAAOC,SAAS,MAAM,uBAAuB,CAAC;AAC9C,SAASC,eAAe,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAE5D,MAAMC,gBAAgB,GAAG,IAAM;QASHC,GAAmB,cAEUA,IAAmB;IAV1E,MAAM,EAAEA,OAAO,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGH,UAAU,EAAE,AAAC;IAC/C,MAAM,EAAEI,gBAAgB,CAAA,EAAEC,qBAAqB,CAAA,EAAE,GAAGN,eAAe,EAAE,AAAC;IAEtE,MAAMO,UAAU,GAAGF,gBAAgB,aAAhBA,gBAAgB,WAAY,GAA5BA,KAAAA,CAA4B,GAA5BA,gBAAgB,CAAEE,UAAU,AAAC;IAEhD,MAAMC,mBAAmB,GAAGD,UAAU,KAAKE,SAAS,AAAC;IAErD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG1B,QAAQ,CAC5CuB,mBAAmB,IAAI,CAACL,CAAAA,QAAAA,CAAAA,GAAmB,GAAnBA,OAAO,CAACI,UAAU,CAAC,cAAnBJ,GAAmB,WAAM,GAAzBA,KAAAA,CAAyB,GAAzBA,GAAmB,CAAES,IAAI,CAACC,OAAO,6BAAU,GAA3CV,KAAAA,CAA2C,GAA3CA,aAAmCW,QAAQ,6BAAA,GAA3CX,KAAAA,CAA2C,QAAEY,IAAI,AAAN,CAAA,AAAM,CAC1E,AAAC;IACF,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGhC,QAAQ,CAACuB,mBAAmB,GAAGL,QAAAA,CAAAA,IAAmB,GAAnBA,OAAO,CAACI,UAAU,CAAC,cAAnBJ,IAAmB,WAAM,GAAzBA,KAAAA,CAAyB,GAAzBA,IAAmB,CAAES,IAAI,CAACC,OAAO,6BAAO,GAAxCV,KAAAA,CAAwC,QAALe,KAAK,GAAG,EAAE,CAAC,AAAC;IAEtG,MAAMC,YAAY,GAAG,CAACC,CAAY,GAAK;YAWMjB,GAAmB;QAV9DiB,CAAC,CAACC,cAAc,EAAE,CAAC;YAUwBlB,MAA+B;QAT1E,MAAMmB,SAAS,GAAqB;YAClCC,IAAI,EAAE,MAAM;YACZX,IAAI,EAAE;gBACJC,OAAO,EAAE;oBACPK,KAAK,EAAEF,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI,EAAE;oBACjBF,QAAQ,EAAE;wBACRC,IAAI,EAAE,CAACL,WAAW;qBACnB;iBACF;gBACDc,KAAK,EAAEjB,UAAU,KAAKE,SAAS,GAAG,EAAE,GAAGN,CAAAA,MAA+B,GAA/BA,CAAAA,GAAmB,GAAnBA,OAAO,CAACI,UAAU,CAAC,cAAnBJ,GAAmB,WAAM,GAAzBA,KAAAA,CAAyB,GAAzBA,GAAmB,CAAES,IAAI,CAACY,KAAK,cAA/BrB,MAA+B,cAA/BA,MAA+B,GAAI,EAAE;aAC7E;SACF,AAAC;QACFC,YAAY,CAACkB,SAAS,EAAEf,UAAU,CAAC,CAAC;QACpCD,qBAAqB,EAAE,CAAC;IAC1B,CAAC,AAAC;IAEF,MAAMmB,gCAAgC,GAAG,CAACL,CAA4B,GAAK;QACzE,MAAMV,WAAW,GAAGU,CAAC,CAACM,MAAM,CAACC,KAAK,KAAK,OAAO,AAAC;QAC/ChB,cAAc,CAACD,WAAW,CAAC,CAAC;IAC9B,CAAC,AAAC;IAEF,qBACE,MAACvB,MAAM;QAAC4B,IAAI;;0BACV,KAAC3B,WAAW;0BAAC,aAAW;cAAc;0BACtC,KAACF,UAAU;gBACT0C,YAAU,EAAC,OAAO;gBAClBC,OAAO,EAAE,IAAMvB,qBAAqB,EAAE;gBACtCwB,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,QAAQ,EAAE,UAAU;wBACpBC,GAAG,EAAEF,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;wBACvBC,KAAK,EAAEJ,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;qBAC1B,CAAA,AAAC;0BAEF,cAAA,KAACnC,SAAS,KAAG;cACF;0BACb,MAACqC,MAAI;gBAACC,QAAQ,EAAElB,YAAY;;kCAC1B,KAAC9B,aAAa;wBAACyC,EAAE,EAAE;4BAAEQ,KAAK,EAAE,OAAO;yBAAE;kCACnC,cAAA,MAAC7C,KAAK;4BAACyC,OAAO,EAAE,CAAC;;8CACf,KAAC5C,WAAW;8CACV,cAAA,KAACE,SAAS;wCACR+C,QAAQ;wCACRC,KAAK,EAAC,MAAM;wCACZC,OAAO,EAAC,UAAU;wCAClBd,KAAK,EAAEX,IAAI;wCACX0B,QAAQ,EAAE,CAACtB,CAAC,GAAKH,OAAO,CAACG,CAAC,CAACM,MAAM,CAACC,KAAK,CAAC;sCACxC;kCACU;8CACd,MAACjC,GAAG;oCAACoC,EAAE,EAAE;wCAAEjB,OAAO,EAAE,MAAM;wCAAE8B,UAAU,EAAE,QAAQ;wCAAEL,KAAK,EAAE,MAAM;wCAAEM,cAAc,EAAE,eAAe;qCAAE;;sDAChG,KAACrD,UAAU;sDAAC,gBAAc;0CAAa;sDACvC,MAACM,MAAM;4CACL0C,QAAQ;4CACRM,YAAY;4CACZC,OAAO,EAAC,uBAAuB;4CAC/BC,IAAI,EAAC,OAAO;4CACZpB,KAAK,EAAEjB,WAAW,GAAG,OAAO,GAAG,MAAM;4CACrCgC,QAAQ,EAAEjB,gCAAgC;;8DAE1C,KAAC3B,QAAQ;oDAAc6B,KAAK,EAAE,MAAM;8DAAE,MAEtC;mDAFe,MAAM,CAEV;8DACX,KAAC7B,QAAQ;oDAAe6B,KAAK,EAAE,OAAO;8DAAE,OAExC;mDAFe,OAAO,CAEX;;0CACJ;;kCACL;;0BACA;sBACM;kCAChB,MAAChC,aAAa;;0CACZ,KAACC,MAAM;gCAAC6C,OAAO,EAAC,WAAW;gCAACO,IAAI,EAAC,QAAQ;0CACtCxC,mBAAmB,GAAG,OAAO,GAAG,KAAK;8BAC/B;0CACT,KAACZ,MAAM;gCAACiC,OAAO,EAAE,IAAMvB,qBAAqB,EAAE;0CAAE,QAAM;8BAAS;;sBACjD;;cACX;;MACA,CACT;AACJ,CAAC,AAAC;AAEF,eAAeJ,gBAAgB,CAAC"}

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

@@ -1 +1,95 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{screen}from"@testing-library/react";import userEvent from"@testing-library/user-event";import produce from"immer";import*as dashboardAppSlice from"../../context/DashboardAppSlice";import*as layoutsSlice from"../../context/LayoutsSlice";import{renderWithContext}from"../../test";import testDashboard from"../../test/testDashboard";import PanelGroupDialog from"./PanelGroupDialog";const dashboardApp={panelDrawer:void 0,openPanelDrawer:jest.fn(),closePanelDrawer:jest.fn(),panelGroupDialog:{groupIndex:void 0},openPanelGroupDialog:jest.fn(),closePanelGroupDialog:jest.fn()},updateLayout=jest.fn();jest.spyOn(layoutsSlice,"useLayouts").mockReturnValue({updateLayout,addItemToLayout:jest.fn(),layouts:testDashboard.spec.layouts}),describe("Add Panel Group",(()=>{beforeEach((()=>{jest.clearAllMocks()})),it("should add new panel group",(()=>{jest.spyOn(dashboardAppSlice,"useDashboardApp").mockReturnValue(dashboardApp),renderWithContext(_jsx(PanelGroupDialog,{}));const e=screen.getByLabelText(/Name/);userEvent.type(e,"New Panel Group"),userEvent.click(screen.getByText("Add")),expect(updateLayout).toHaveBeenCalledWith({kind:"Grid",spec:{display:{title:"New Panel Group",collapse:{open:!0}},items:[]}},void 0)})),it("should edit existing panel group",(()=>{jest.spyOn(dashboardAppSlice,"useDashboardApp").mockReturnValue({...dashboardApp,panelGroupDialog:{groupIndex:0}}),renderWithContext(_jsx(PanelGroupDialog,{}));const e=screen.getByLabelText(/Name/);userEvent.type(e,"New Name"),userEvent.click(screen.getByText("Apply")),expect(updateLayout).toHaveBeenCalledWith(produce(testDashboard.spec.layouts[0],(e=>{e.spec.display.title+="New Name",e.spec.display.collapse={open:!1}})),0)}))}));
+// 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 { screen } from '@testing-library/react';
+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';
+describe('Add Panel Group', ()=>{
+    const renderDialog = ()=>{
+        const { store , DashboardProviderSpy  } = createDashboardProviderSpy();
+        renderWithContext(/*#__PURE__*/ _jsxs(DashboardProvider, {
+            initialState: {
+                dashboardSpec: getTestDashboard().spec,
+                isEditMode: true
+            },
+            children: [
+                /*#__PURE__*/ _jsx(DashboardProviderSpy, {}),
+                /*#__PURE__*/ _jsx(PanelGroupDialog, {})
+            ]
+        }));
+        const { value: storeApi  } = store;
+        if (storeApi === undefined) {
+            throw new Error('Expected dashboard store to be set after initial render');
+        }
+        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());
+        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
+                    }
+                },
+                items: []
+            }
+        });
+    });
+    it('should edit existing panel group', async ()=>{
+        const storeApi = renderDialog();
+        // Open the dialog for an existing panel group
+        act(()=>storeApi.getState().openPanelGroupDialog(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
+                    }
+                ]
+            }
+        });
+    });
+});
+
+//# sourceMappingURL=PanelGroupDialog.test.js.map

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

@@ -0,0 +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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"}

package/dist/components/TimeRangeControls/TimeRangeControls.js

@@ -1 +1,137 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useRef,useState}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";export const TIME_OPTIONS=[{value:{pastDuration:"5m"},display:"Last 5 minutes"},{value:{pastDuration:"15m"},display:"Last 15 minutes"},{value:{pastDuration:"30m"},display:"Last 30 minutes"},{value:{pastDuration:"1h"},display:"Last 1 hour"},{value:{pastDuration:"6h"},display:"Last 6 hours"},{value:{pastDuration:"12h"},display:"Last 12 hours"},{value:{pastDuration:"24h"},display:"Last 1 day"},{value:{pastDuration:"7d"},display:"Last 7 days"},{value:{pastDuration:"14d"},display:"Last 14 days"}];export function TimeRangeControls(){const{timeRange:e,setTimeRange:t}=useTimeRange(),{dashboard:a}=useDashboard(),{queryString:s}=useQueryString(),r=getDefaultTimeRange(a.duration,s),[o,i]=useState(r),[n,u]=useState(!1),l=useRef();return _jsxs(Stack,{direction:"row",spacing:1,children:[_jsx(Popover,{anchorEl:l.current,anchorOrigin:{vertical:"bottom",horizontal:"center"},open:n,onClose:()=>u(!1),sx:e=>({padding:e.spacing(2)}),children:_jsx(AbsoluteTimePicker,{initialTimeRange:e,onChange:e=>{t(e),i(e),u(!1)}})}),_jsx(FormControl,{fullWidth:!0,children:_jsx(Box,{ref:l,children:_jsx(TimeRangeSelector,{timeOptions:TIME_OPTIONS,value:o,onSelectChange:e=>{const a={pastDuration:e.target.value,end:new Date};t(a),i(a),u(!1)},onCustomClick:()=>{u(!0)}})})})]})}
+// 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 { useRef, useState } 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';
+// TODO: add time shortcut if one does not match duration
+export const TIME_OPTIONS = [
+    {
+        value: {
+            pastDuration: '5m'
+        },
+        display: 'Last 5 minutes'
+    },
+    {
+        value: {
+            pastDuration: '15m'
+        },
+        display: 'Last 15 minutes'
+    },
+    {
+        value: {
+            pastDuration: '30m'
+        },
+        display: 'Last 30 minutes'
+    },
+    {
+        value: {
+            pastDuration: '1h'
+        },
+        display: 'Last 1 hour'
+    },
+    {
+        value: {
+            pastDuration: '6h'
+        },
+        display: 'Last 6 hours'
+    },
+    {
+        value: {
+            pastDuration: '12h'
+        },
+        display: 'Last 12 hours'
+    },
+    {
+        value: {
+            pastDuration: '24h'
+        },
+        display: 'Last 1 day'
+    },
+    {
+        value: {
+            pastDuration: '7d'
+        },
+        display: 'Last 7 days'
+    },
+    {
+        value: {
+            pastDuration: '14d'
+        },
+        display: 'Last 14 days'
+    }
+];
+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 [showCustomDateSelector, setShowCustomDateSelector] = useState(false);
+    const anchorEl = useRef();
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsx(Popover, {
+                anchorEl: anchorEl.current,
+                anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'center'
+                },
+                open: showCustomDateSelector,
+                onClose: ()=>setShowCustomDateSelector(false),
+                sx: (theme)=>({
+                        padding: theme.spacing(2)
+                    }),
+                children: /*#__PURE__*/ _jsx(AbsoluteTimePicker, {
+                    initialTimeRange: timeRange,
+                    onChange: (timeRange)=>{
+                        setTimeRange(timeRange);
+                        setSelectedTimeRange(timeRange);
+                        setShowCustomDateSelector(false);
+                    }
+                })
+            }),
+            /*#__PURE__*/ _jsx(FormControl, {
+                fullWidth: true,
+                children: /*#__PURE__*/ _jsx(Box, {
+                    ref: anchorEl,
+                    children: /*#__PURE__*/ _jsx(TimeRangeSelector, {
+                        timeOptions: TIME_OPTIONS,
+                        value: selectedTimeRange,
+                        onSelectChange: (event)=>{
+                            const duration = event.target.value;
+                            const relativeTimeInput = {
+                                pastDuration: duration,
+                                end: new Date()
+                            };
+                            setTimeRange(relativeTimeInput);
+                            setSelectedTimeRange(relativeTimeInput);
+                            setShowCustomDateSelector(false);
+                        },
+                        onCustomClick: ()=>{
+                            setShowCustomDateSelector(true);
+                        }
+                    })
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=TimeRangeControls.js.map

package/dist/components/TimeRangeControls/TimeRangeControls.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.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 { useRef, useState } from 'react';\nimport { Box, FormControl, Popover, Stack } from '@mui/material';\nimport { AbsoluteTimePicker, TimeRangeSelector, TimeOption } from '@perses-dev/components';\nimport {\n  DurationString,\n  RelativeTimeRange,\n  AbsoluteTimeRange,\n  TimeRangeValue,\n  getDefaultTimeRange,\n} from '@perses-dev/core';\nimport { useTimeRange, useQueryString } from '@perses-dev/plugin-system';\nimport { useDashboard } from '../../context';\n\n// TODO: add time shortcut if one does not match duration\nexport const TIME_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n  { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n  { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n  { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n  { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n  { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n  { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n  { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n  { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nexport function TimeRangeControls() {\n  const { timeRange, setTimeRange } = useTimeRange();\n  const { dashboard } = useDashboard();\n  const { queryString } = useQueryString();\n\n  const defaultTimeRange = getDefaultTimeRange(dashboard.duration, queryString);\n\n  // selected form value can be relative or absolute, timeRange from plugin-system is only absolute\n  const [selectedTimeRange, setSelectedTimeRange] = useState<TimeRangeValue>(defaultTimeRange);\n\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n  const anchorEl = useRef();\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      <Popover\n        anchorEl={anchorEl.current}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({\n          padding: theme.spacing(2),\n        })}\n      >\n        <AbsoluteTimePicker\n          initialTimeRange={timeRange}\n          onChange={(timeRange: AbsoluteTimeRange) => {\n            setTimeRange(timeRange);\n            setSelectedTimeRange(timeRange);\n            setShowCustomDateSelector(false);\n          }}\n        />\n      </Popover>\n      <FormControl fullWidth>\n        <Box ref={anchorEl}>\n          <TimeRangeSelector\n            timeOptions={TIME_OPTIONS}\n            value={selectedTimeRange}\n            onSelectChange={(event) => {\n              const duration = event.target.value;\n              const relativeTimeInput: RelativeTimeRange = {\n                pastDuration: duration as DurationString,\n                end: new Date(),\n              };\n              setTimeRange(relativeTimeInput);\n              setSelectedTimeRange(relativeTimeInput);\n              setShowCustomDateSelector(false);\n            }}\n            onCustomClick={() => {\n              setShowCustomDateSelector(true);\n            }}\n          />\n        </Box>\n      </FormControl>\n    </Stack>\n  );\n}\n"],"names":["useRef","useState","Box","FormControl","Popover","Stack","AbsoluteTimePicker","TimeRangeSelector","getDefaultTimeRange","useTimeRange","useQueryString","useDashboard","TIME_OPTIONS","value","pastDuration","display","TimeRangeControls","timeRange","setTimeRange","dashboard","queryString","defaultTimeRange","duration","selectedTimeRange","setSelectedTimeRange","showCustomDateSelector","setShowCustomDateSelector","anchorEl","direction","spacing","current","anchorOrigin","vertical","horizontal","open","onClose","sx","theme","padding","initialTimeRange","onChange","fullWidth","ref","timeOptions","onSelectChange","event","target","relativeTimeInput","end","Date","onCustomClick"],"mappings":"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"}

package/dist/components/TimeRangeControls/TimeRangeControls.test.js

@@ -1 +1,59 @@
-import{jsx as _jsx}from"react/jsx-runtime";import userEvent from"@testing-library/user-event";import{getDefaultTimeRange}from"@perses-dev/core";import{screen}from"@testing-library/react";import{renderWithContext}from"../../test";import testDashboard from"../../test/testDashboard";import{DashboardProvider,TimeRangeProvider,QueryStringProvider}from"../../context";import{TimeRangeControls}from"./TimeRangeControls";describe("TimeRangeControls",(()=>{let e;beforeEach((()=>{e={dashboardSpec:testDashboard.spec}}));const t=()=>{const t=new URLSearchParams,r=getDefaultTimeRange(e.dashboardSpec.duration,t);renderWithContext(_jsx(QueryStringProvider,{queryString:t,children:_jsx(DashboardProvider,{initialState:e,children:_jsx(TimeRangeProvider,{initialTimeRange:r,children:_jsx(TimeRangeControls,{})})})}))};it("should render correct initial relative time shortcut",(async()=>{t(),expect(screen.getByText("Last 1 day")).toBeInTheDocument()})),it("should be able to select the first option",(()=>{t();const e=screen.getByRole("button");userEvent.click(e);const r=screen.getByRole("option",{name:"Last 5 minutes"});userEvent.click(r),expect(e).toHaveTextContent(/5 minutes/i)}))}));
+// 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 } from "react/jsx-runtime";
+import userEvent from '@testing-library/user-event';
+import { getDefaultTimeRange } from '@perses-dev/core';
+import { screen } from '@testing-library/react';
+import { renderWithContext } from '../../test';
+import testDashboard from '../../test/testDashboard';
+import { DashboardProvider, TimeRangeProvider, QueryStringProvider } from '../../context';
+import { TimeRangeControls } from './TimeRangeControls';
+describe('TimeRangeControls', ()=>{
+    let initialState;
+    beforeEach(()=>{
+        initialState = {
+            dashboardSpec: testDashboard.spec
+        };
+    });
+    const renderTimeRangeControls = ()=>{
+        const queryString = new URLSearchParams();
+        const defaultTimeRange = getDefaultTimeRange(initialState.dashboardSpec.duration, queryString);
+        renderWithContext(/*#__PURE__*/ _jsx(QueryStringProvider, {
+            queryString: queryString,
+            children: /*#__PURE__*/ _jsx(DashboardProvider, {
+                initialState: initialState,
+                children: /*#__PURE__*/ _jsx(TimeRangeProvider, {
+                    initialTimeRange: defaultTimeRange,
+                    children: /*#__PURE__*/ _jsx(TimeRangeControls, {})
+                })
+            })
+        }));
+    };
+    it('should render correct initial relative time shortcut', async ()=>{
+        renderTimeRangeControls();
+        expect(screen.getByText('Last 1 day')).toBeInTheDocument();
+    });
+    it('should be able to select the first option', ()=>{
+        renderTimeRangeControls();
+        const dateButton = screen.getByRole('button');
+        userEvent.click(dateButton);
+        const firstOption = screen.getByRole('option', {
+            name: 'Last 5 minutes'
+        });
+        userEvent.click(firstOption);
+        expect(dateButton).toHaveTextContent(/5 minutes/i);
+    });
+// TODO: add additional tests for absolute time selection, other inputs, form validation, etc.
+});
+
+//# sourceMappingURL=TimeRangeControls.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.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 userEvent from '@testing-library/user-event';\nimport { getDefaultTimeRange } from '@perses-dev/core';\nimport { screen } from '@testing-library/react';\nimport { renderWithContext } from '../../test';\nimport testDashboard from '../../test/testDashboard';\nimport { DashboardProvider, DashboardStoreProps, TimeRangeProvider, QueryStringProvider } from '../../context';\nimport { TimeRangeControls } from './TimeRangeControls';\n\ndescribe('TimeRangeControls', () => {\n  let initialState: DashboardStoreProps;\n\n  beforeEach(() => {\n    initialState = {\n      dashboardSpec: testDashboard.spec,\n    };\n  });\n\n  const renderTimeRangeControls = () => {\n    const queryString = new URLSearchParams();\n    const defaultTimeRange = getDefaultTimeRange(initialState.dashboardSpec.duration, queryString);\n    renderWithContext(\n      <QueryStringProvider queryString={queryString}>\n        <DashboardProvider initialState={initialState}>\n          <TimeRangeProvider initialTimeRange={defaultTimeRange}>\n            <TimeRangeControls />\n          </TimeRangeProvider>\n        </DashboardProvider>\n      </QueryStringProvider>\n    );\n  };\n\n  it('should render correct initial relative time shortcut', async () => {\n    renderTimeRangeControls();\n    expect(screen.getByText('Last 1 day')).toBeInTheDocument();\n  });\n\n  it('should be able to select the first option', () => {\n    renderTimeRangeControls();\n    const dateButton = screen.getByRole('button');\n    userEvent.click(dateButton);\n    const firstOption = screen.getByRole('option', { name: 'Last 5 minutes' });\n    userEvent.click(firstOption);\n    expect(dateButton).toHaveTextContent(/5 minutes/i);\n  });\n\n  // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.\n});\n"],"names":["userEvent","getDefaultTimeRange","screen","renderWithContext","testDashboard","DashboardProvider","TimeRangeProvider","QueryStringProvider","TimeRangeControls","describe","initialState","beforeEach","dashboardSpec","spec","renderTimeRangeControls","queryString","URLSearchParams","defaultTimeRange","duration","initialTimeRange","it","expect","getByText","toBeInTheDocument","dateButton","getByRole","click","firstOption","name","toHaveTextContent"],"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,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,mBAAmB,QAAQ,kBAAkB,CAAC;AACvD,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,SAASC,iBAAiB,QAAQ,YAAY,CAAC;AAC/C,OAAOC,aAAa,MAAM,0BAA0B,CAAC;AACrD,SAASC,iBAAiB,EAAuBC,iBAAiB,EAAEC,mBAAmB,QAAQ,eAAe,CAAC;AAC/G,SAASC,iBAAiB,QAAQ,qBAAqB,CAAC;AAExDC,QAAQ,CAAC,mBAAmB,EAAE,IAAM;IAClC,IAAIC,YAAY,AAAqB,AAAC;IAEtCC,UAAU,CAAC,IAAM;QACfD,YAAY,GAAG;YACbE,aAAa,EAAER,aAAa,CAACS,IAAI;SAClC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAMC,uBAAuB,GAAG,IAAM;QACpC,MAAMC,WAAW,GAAG,IAAIC,eAAe,EAAE,AAAC;QAC1C,MAAMC,gBAAgB,GAAGhB,mBAAmB,CAACS,YAAY,CAACE,aAAa,CAACM,QAAQ,EAAEH,WAAW,CAAC,AAAC;QAC/FZ,iBAAiB,eACf,KAACI,mBAAmB;YAACQ,WAAW,EAAEA,WAAW;sBAC3C,cAAA,KAACV,iBAAiB;gBAACK,YAAY,EAAEA,YAAY;0BAC3C,cAAA,KAACJ,iBAAiB;oBAACa,gBAAgB,EAAEF,gBAAgB;8BACnD,cAAA,KAACT,iBAAiB,KAAG;kBACH;cACF;UACA,CACvB,CAAC;IACJ,CAAC,AAAC;IAEFY,EAAE,CAAC,sDAAsD,EAAE,UAAY;QACrEN,uBAAuB,EAAE,CAAC;QAC1BO,MAAM,CAACnB,MAAM,CAACoB,SAAS,CAAC,YAAY,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEHH,EAAE,CAAC,2CAA2C,EAAE,IAAM;QACpDN,uBAAuB,EAAE,CAAC;QAC1B,MAAMU,UAAU,GAAGtB,MAAM,CAACuB,SAAS,CAAC,QAAQ,CAAC,AAAC;QAC9CzB,SAAS,CAAC0B,KAAK,CAACF,UAAU,CAAC,CAAC;QAC5B,MAAMG,WAAW,GAAGzB,MAAM,CAACuB,SAAS,CAAC,QAAQ,EAAE;YAAEG,IAAI,EAAE,gBAAgB;SAAE,CAAC,AAAC;QAC3E5B,SAAS,CAAC0B,KAAK,CAACC,WAAW,CAAC,CAAC;QAC7BN,MAAM,CAACG,UAAU,CAAC,CAACK,iBAAiB,cAAc,CAAC;IACrD,CAAC,CAAC,CAAC;AAEH,8FAA8F;AAChG,CAAC,CAAC,CAAC"}

package/dist/components/TimeRangeControls/index.js

@@ -1 +1,15 @@
-export*from"./TimeRangeControls";
+// 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 './TimeRangeControls';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/TimeRangeControls/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 './TimeRangeControls';\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,qBAAqB,CAAC"}

package/dist/components/Variables/Variable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Variable.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/Variable.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,YAAY,EAA0B,MAAM,kBAAkB,CAAC;AAGxE,aAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;CACpB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,EAAE,qBAAqB,eAW/D"}
+{"version":3,"file":"Variable.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/Variable.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,YAAY,EAAyC,MAAM,kBAAkB,CAAC;AAWvF,aAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;CACpB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,EAAE,qBAAqB,eAW/D"}