@perses-dev/dashboards 0.11.0 → 0.12.0

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

@@ -16,7 +16,6 @@ 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 testDashboard from '../../test/testDashboard';
 import { PanelGroupDialog } from './PanelGroupDialog';
 describe('Add Panel Group', ()=>{
     const renderDialog = ()=>{
@@ -45,21 +44,23 @@ describe('Add Panel Group', ()=>{
         userEvent.type(nameInput, 'New Panel Group');
         userEvent.click(screen.getByText('Add'));
         // 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: []
-            }
+        const panelGroups = Object.values(storeApi.getState().panelGroups);
+        expect(panelGroups).toContainEqual({
+            id: expect.any(Number),
+            title: 'New Panel Group',
+            isCollapsed: false,
+            itemLayouts: expect.any(Array),
+            itemPanelKeys: expect.any(Object)
         });
     });
     it('should edit existing panel group', async ()=>{
-        var ref;
         const storeApi = renderDialog();
         // Open the dialog for an existing panel group
-        act(()=>storeApi.getState().openEditPanelGroup(0));
+        const group = Object.values(storeApi.getState().panelGroups).find((group)=>group.title === 'CPU Stats');
+        if (group === undefined) {
+            throw new Error('Missing test group');
+        }
+        act(()=>storeApi.getState().openEditPanelGroup(group.id));
         const nameInput = await screen.findByLabelText(/Name/);
         userEvent.clear(nameInput);
         userEvent.type(nameInput, 'New Name');
@@ -67,11 +68,10 @@ describe('Add Panel Group', ()=>{
         // TODO: Figure out how to test this without coupling to the store state
         const panelGroups = storeApi.getState().panelGroups;
         expect(panelGroups).toMatchObject({
-            '0': {
-                id: 0,
+            [group.id]: {
+                id: group.id,
                 title: 'New Name',
-                isCollapsed: false,
-                items: (ref = testDashboard.spec.layouts[0]) === null || ref === void 0 ? void 0 : ref.spec.items
+                isCollapsed: false
             }
         });
     });

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 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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"}
+{"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    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 = Object.values(storeApi.getState().panelGroups);\n    expect(panelGroups).toContainEqual({\n      id: expect.any(Number),\n      title: 'New Panel Group',\n      isCollapsed: false,\n      itemLayouts: expect.any(Array),\n      itemPanelKeys: expect.any(Object),\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    const group = Object.values(storeApi.getState().panelGroups).find((group) => group.title === 'CPU Stats');\n    if (group === undefined) {\n      throw new Error('Missing test group');\n    }\n    act(() => storeApi.getState().openEditPanelGroup(group.id));\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      [group.id]: {\n        id: group.id,\n        title: 'New Name',\n        isCollapsed: false,\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","openAddPanelGroup","nameInput","findByLabelText","type","click","getByText","panelGroups","Object","values","expect","toContainEqual","id","any","Number","title","isCollapsed","itemLayouts","Array","itemPanelKeys","group","find","openEditPanelGroup","clear","toMatchObject"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAStD,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eAkKA"}
+{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAStD,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eAmKA"}

package/dist/components/Variables/VariableEditor.js

@@ -104,18 +104,19 @@ export function VariableEditor(props) {
                         justifyContent: "end",
                         children: [
                             /*#__PURE__*/ _jsx(Button, {
+                                disabled: props.variableDefinitions === variableDefinitions,
+                                variant: "contained",
                                 onClick: ()=>{
-                                    props.onCancel();
+                                    props.onChange(variableDefinitions);
                                 },
-                                children: "Cancel"
+                                children: "Apply"
                             }),
                             /*#__PURE__*/ _jsx(Button, {
-                                disabled: props.variableDefinitions === variableDefinitions,
-                                variant: "contained",
+                                variant: "outlined",
                                 onClick: ()=>{
-                                    props.onChange(variableDefinitions);
+                                    props.onCancel();
                                 },
-                                children: "Apply Changes"
+                                children: "Cancel"
                             })
                         ]
                     }),

package/dist/components/Variables/VariableEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/VariableEditor.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 { useState } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell,\n  Table,\n  Paper,\n  TableHead,\n  Switch,\n  Typography,\n  IconButton,\n} from '@mui/material';\nimport { VariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\n\nimport { VariableEditForm } from './VariableEditorForm';\n\nexport function VariableEditor(props: {\n  variableDefinitions: VariableDefinition[];\n  onChange: (variableDefinitions: VariableDefinition[]) => void;\n  onCancel: () => void;\n}) {\n  const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n  const [variableEditIdx, setVariableEditIdx] = useState<number | null>(null);\n\n  const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n  const removeVariable = (index: number) => {\n    setVariableDefinitions((draft) => {\n      draft.splice(index, 1);\n    });\n  };\n\n  const addVariable = () => {\n    setVariableDefinitions((draft) => {\n      draft.push({\n        kind: 'TextVariable',\n        spec: {\n          name: 'NewVariable',\n          value: '',\n        },\n      });\n    });\n  };\n\n  const toggleVariableVisibility = (index: number, visible: boolean) => {\n    setVariableDefinitions((draft) => {\n      const v = draft[index];\n      if (!v) {\n        return;\n      }\n      if (!v.spec.display) {\n        v.spec.display = {\n          hidden: false,\n        };\n      }\n      v.spec.display.hidden = visible === false;\n    });\n  };\n\n  const changeVariableOrder = (index: number, direction: 'up' | 'down') => {\n    setVariableDefinitions((draft) => {\n      if (direction === 'up') {\n        const prevElement = draft[index - 1];\n        const currentElement = draft[index];\n        if (index === 0 || !prevElement || !currentElement) {\n          return;\n        }\n        draft[index - 1] = currentElement;\n        draft[index] = prevElement;\n      } else {\n        const nextElement = draft[index + 1];\n        const currentElement = draft[index];\n        if (index === draft.length - 1 || !nextElement || !currentElement) {\n          return;\n        }\n        draft[index + 1] = currentElement;\n        draft[index] = nextElement;\n      }\n    });\n  };\n\n  return (\n    <Box p={4}>\n      {currentEditingVariableDefinition && (\n        <>\n          <Typography variant=\"h3\" mb={2}>\n            Edit Variable\n          </Typography>\n          <VariableEditForm\n            initialVariableDefinition={currentEditingVariableDefinition}\n            onChange={(definition) => {\n              setVariableDefinitions((draft) => {\n                draft[variableEditIdx] = definition;\n                setVariableEditIdx(null);\n              });\n            }}\n            onCancel={() => setVariableEditIdx(null)}\n          />\n        </>\n      )}\n      {!currentEditingVariableDefinition && (\n        <>\n          <Stack direction=\"row\" spacing={1} justifyContent=\"end\">\n            <Button\n              onClick={() => {\n                props.onCancel();\n              }}\n            >\n              Cancel\n            </Button>\n            <Button\n              disabled={props.variableDefinitions === variableDefinitions}\n              variant=\"contained\"\n              onClick={() => {\n                props.onChange(variableDefinitions);\n              }}\n            >\n              Apply Changes\n            </Button>\n          </Stack>\n          <Typography variant=\"h3\" mb={2}>\n            Variable List\n          </Typography>\n          <Stack spacing={2}>\n            <TableContainer component={Paper}>\n              <Table sx={{ minWidth: 650 }} aria-label=\"simple table\">\n                <TableHead>\n                  <TableRow>\n                    <TableCell>Visibility</TableCell>\n                    <TableCell>Variable Name</TableCell>\n                    <TableCell>Variable Type</TableCell>\n                    <TableCell align=\"right\">Action</TableCell>\n                  </TableRow>\n                </TableHead>\n                <TableBody>\n                  {variableDefinitions.map((v, idx) => (\n                    <TableRow key={v.spec.name}>\n                      <TableCell component=\"th\" scope=\"row\">\n                        <Switch\n                          checked={v.spec.display?.hidden !== true}\n                          onChange={(e) => {\n                            toggleVariableVisibility(idx, e.target.checked);\n                          }}\n                        />\n                      </TableCell>\n                      <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                        {v.spec.name}\n                      </TableCell>\n                      <TableCell>{v.kind}</TableCell>\n                      <TableCell align=\"right\">\n                        <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n                          <ArrowUp />\n                        </IconButton>\n                        <IconButton\n                          onClick={() => changeVariableOrder(idx, 'down')}\n                          disabled={idx === variableDefinitions.length - 1}\n                        >\n                          <ArrowDown />\n                        </IconButton>\n\n                        <IconButton onClick={() => setVariableEditIdx(idx)}>\n                          <PencilIcon />\n                        </IconButton>\n                        <IconButton onClick={() => removeVariable(idx)}>\n                          <TrashIcon />\n                        </IconButton>\n                      </TableCell>\n                    </TableRow>\n                  ))}\n                </TableBody>\n              </Table>\n            </TableContainer>\n            <Box display=\"flex\">\n              <Button onClick={addVariable} variant=\"contained\">\n                Add New Variable\n              </Button>\n            </Box>\n          </Stack>\n        </>\n      )}\n    </Box>\n  );\n}\n"],"names":["useState","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","Table","Paper","TableHead","Switch","Typography","IconButton","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","VariableEditForm","VariableEditor","props","variableDefinitions","setVariableDefinitions","variableEditIdx","setVariableEditIdx","currentEditingVariableDefinition","removeVariable","index","draft","splice","addVariable","push","kind","spec","name","value","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","length","p","variant","mb","initialVariableDefinition","onChange","definition","onCancel","spacing","justifyContent","onClick","disabled","component","sx","minWidth","aria-label","align","map","idx","scope","checked","e","target","fontWeight"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/VariableEditor.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 { useState } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell,\n  Table,\n  Paper,\n  TableHead,\n  Switch,\n  Typography,\n  IconButton,\n} from '@mui/material';\nimport { VariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\n\nimport { VariableEditForm } from './VariableEditorForm';\n\nexport function VariableEditor(props: {\n  variableDefinitions: VariableDefinition[];\n  onChange: (variableDefinitions: VariableDefinition[]) => void;\n  onCancel: () => void;\n}) {\n  const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n  const [variableEditIdx, setVariableEditIdx] = useState<number | null>(null);\n\n  const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n  const removeVariable = (index: number) => {\n    setVariableDefinitions((draft) => {\n      draft.splice(index, 1);\n    });\n  };\n\n  const addVariable = () => {\n    setVariableDefinitions((draft) => {\n      draft.push({\n        kind: 'TextVariable',\n        spec: {\n          name: 'NewVariable',\n          value: '',\n        },\n      });\n    });\n  };\n\n  const toggleVariableVisibility = (index: number, visible: boolean) => {\n    setVariableDefinitions((draft) => {\n      const v = draft[index];\n      if (!v) {\n        return;\n      }\n      if (!v.spec.display) {\n        v.spec.display = {\n          hidden: false,\n        };\n      }\n      v.spec.display.hidden = visible === false;\n    });\n  };\n\n  const changeVariableOrder = (index: number, direction: 'up' | 'down') => {\n    setVariableDefinitions((draft) => {\n      if (direction === 'up') {\n        const prevElement = draft[index - 1];\n        const currentElement = draft[index];\n        if (index === 0 || !prevElement || !currentElement) {\n          return;\n        }\n        draft[index - 1] = currentElement;\n        draft[index] = prevElement;\n      } else {\n        const nextElement = draft[index + 1];\n        const currentElement = draft[index];\n        if (index === draft.length - 1 || !nextElement || !currentElement) {\n          return;\n        }\n        draft[index + 1] = currentElement;\n        draft[index] = nextElement;\n      }\n    });\n  };\n\n  return (\n    <Box p={4}>\n      {currentEditingVariableDefinition && (\n        <>\n          <Typography variant=\"h3\" mb={2}>\n            Edit Variable\n          </Typography>\n          <VariableEditForm\n            initialVariableDefinition={currentEditingVariableDefinition}\n            onChange={(definition) => {\n              setVariableDefinitions((draft) => {\n                draft[variableEditIdx] = definition;\n                setVariableEditIdx(null);\n              });\n            }}\n            onCancel={() => setVariableEditIdx(null)}\n          />\n        </>\n      )}\n      {!currentEditingVariableDefinition && (\n        <>\n          <Stack direction=\"row\" spacing={1} justifyContent=\"end\">\n            <Button\n              disabled={props.variableDefinitions === variableDefinitions}\n              variant=\"contained\"\n              onClick={() => {\n                props.onChange(variableDefinitions);\n              }}\n            >\n              Apply\n            </Button>\n            <Button\n              variant=\"outlined\"\n              onClick={() => {\n                props.onCancel();\n              }}\n            >\n              Cancel\n            </Button>\n          </Stack>\n          <Typography variant=\"h3\" mb={2}>\n            Variable List\n          </Typography>\n          <Stack spacing={2}>\n            <TableContainer component={Paper}>\n              <Table sx={{ minWidth: 650 }} aria-label=\"simple table\">\n                <TableHead>\n                  <TableRow>\n                    <TableCell>Visibility</TableCell>\n                    <TableCell>Variable Name</TableCell>\n                    <TableCell>Variable Type</TableCell>\n                    <TableCell align=\"right\">Action</TableCell>\n                  </TableRow>\n                </TableHead>\n                <TableBody>\n                  {variableDefinitions.map((v, idx) => (\n                    <TableRow key={v.spec.name}>\n                      <TableCell component=\"th\" scope=\"row\">\n                        <Switch\n                          checked={v.spec.display?.hidden !== true}\n                          onChange={(e) => {\n                            toggleVariableVisibility(idx, e.target.checked);\n                          }}\n                        />\n                      </TableCell>\n                      <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                        {v.spec.name}\n                      </TableCell>\n                      <TableCell>{v.kind}</TableCell>\n                      <TableCell align=\"right\">\n                        <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n                          <ArrowUp />\n                        </IconButton>\n                        <IconButton\n                          onClick={() => changeVariableOrder(idx, 'down')}\n                          disabled={idx === variableDefinitions.length - 1}\n                        >\n                          <ArrowDown />\n                        </IconButton>\n\n                        <IconButton onClick={() => setVariableEditIdx(idx)}>\n                          <PencilIcon />\n                        </IconButton>\n                        <IconButton onClick={() => removeVariable(idx)}>\n                          <TrashIcon />\n                        </IconButton>\n                      </TableCell>\n                    </TableRow>\n                  ))}\n                </TableBody>\n              </Table>\n            </TableContainer>\n            <Box display=\"flex\">\n              <Button onClick={addVariable} variant=\"contained\">\n                Add New Variable\n              </Button>\n            </Box>\n          </Stack>\n        </>\n      )}\n    </Box>\n  );\n}\n"],"names":["useState","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","Table","Paper","TableHead","Switch","Typography","IconButton","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","VariableEditForm","VariableEditor","props","variableDefinitions","setVariableDefinitions","variableEditIdx","setVariableEditIdx","currentEditingVariableDefinition","removeVariable","index","draft","splice","addVariable","push","kind","spec","name","value","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","length","p","variant","mb","initialVariableDefinition","onChange","definition","onCancel","spacing","justifyContent","disabled","onClick","component","sx","minWidth","aria-label","align","map","idx","scope","checked","e","target","fontWeight"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAWtD,wBAAgB,gBAAgB,CAAC,EAC/B,yBAAyB,EACzB,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,QAAQ,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eAsJA"}
+{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAWtD,wBAAgB,gBAAgB,CAAC,EAC/B,yBAAyB,EACzB,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,QAAQ,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eAyJA"}

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js

@@ -41,6 +41,7 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                         item: true,
                         xs: 6,
                         children: /*#__PURE__*/ _jsx(TextField, {
+                            fullWidth: true,
                             label: "Name",
                             value: state.name,
                             onChange: (v)=>{
@@ -82,6 +83,7 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                         item: true,
                         xs: 6,
                         children: /*#__PURE__*/ _jsx(TextField, {
+                            fullWidth: true,
                             label: "Label",
                             value: state.label,
                             onChange: (v)=>{
@@ -95,6 +97,7 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                         item: true,
                         xs: 12,
                         children: /*#__PURE__*/ _jsx(TextField, {
+                            fullWidth: true,
                             label: "Description",
                             value: state.description,
                             onChange: (v)=>{
@@ -204,17 +207,18 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                 justifyContent: "end",
                 children: [
                     /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
                         onClick: ()=>{
-                            onCancel();
+                            onChange(getVariableDefinitionFromState(state));
                         },
-                        children: "Cancel"
+                        children: "Update"
                     }),
                     /*#__PURE__*/ _jsx(Button, {
-                        variant: "contained",
+                        variant: "outlined",
                         onClick: ()=>{
-                            onChange(getVariableDefinitionFromState(state));
+                            onCancel();
                         },
-                        children: "Update Variable"
+                        children: "Cancel"
                     })
                 ]
             })

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.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 React from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControl,\n  InputLabel,\n  MenuItem,\n  Select,\n  Button,\n  Stack,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { PluginEditor } from '@perses-dev/plugin-system';\nimport { VariableDefinition } from '@perses-dev/core';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\nconst VARIABLE_TYPES = ['ListVariable', 'TextVariable'] as const;\n\nconst SectionHeader = ({ children }: React.PropsWithChildren) => (\n  <Typography pb={2} variant=\"subtitle1\">\n    {children}\n  </Typography>\n);\n\nexport function VariableEditForm({\n  initialVariableDefinition,\n  onChange,\n  onCancel,\n}: {\n  initialVariableDefinition: VariableDefinition;\n  onChange: (def: VariableDefinition) => void;\n  onCancel: () => void;\n}) {\n  const [state, setState] = useImmer(getInitialState(initialVariableDefinition));\n\n  return (\n    <Box>\n      <SectionHeader>General</SectionHeader>\n      <Grid container spacing={2} mb={2}>\n        <Grid item xs={6}>\n          <TextField\n            label=\"Name\"\n            value={state.name}\n            onChange={(v) => {\n              setState((draft) => {\n                draft.name = v.target.value as string;\n              });\n            }}\n          />\n        </Grid>\n        <Grid item xs={6}>\n          <FormControl fullWidth>\n            <InputLabel id=\"variable-type-select-label\">Type</InputLabel>\n            <Select\n              labelId=\"variable-type-select-label\"\n              id=\"variable-type-select\"\n              label=\"Type\"\n              value={state.kind}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.kind = v.target.value as VariableEditorState['kind'];\n                });\n              }}\n            >\n              {VARIABLE_TYPES.map((v) => (\n                <MenuItem key={v} value={v}>\n                  {v}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={6}>\n          <TextField\n            label=\"Label\"\n            value={state.label}\n            onChange={(v) => {\n              setState((draft) => {\n                draft.label = v.target.value;\n              });\n            }}\n          />\n        </Grid>\n        <Grid item xs={12}>\n          <TextField\n            label=\"Description\"\n            value={state.description}\n            onChange={(v) => {\n              setState((draft) => {\n                draft.description = v.target.value;\n              });\n            }}\n          />\n        </Grid>\n      </Grid>\n\n      {state.kind === 'TextVariable' && (\n        <>\n          <SectionHeader>Text Options</SectionHeader>\n          <Grid container spacing={2} mb={2}>\n            <Grid item xs={12}>\n              <TextField\n                label=\"Value\"\n                value={state.textVariableFields.value}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.textVariableFields.value = v.target.value;\n                  });\n                }}\n              />\n            </Grid>\n          </Grid>\n        </>\n      )}\n\n      {state.kind === 'ListVariable' && (\n        <>\n          <SectionHeader>List Options</SectionHeader>\n          <Grid container spacing={2} mb={2}>\n            <Grid item xs={6}>\n              <PluginEditor\n                width={500}\n                pluginType=\"Variable\"\n                pluginKindLabel=\"Source\"\n                value={state.listVariableFields.plugin}\n                onChange={(val) => {\n                  setState((draft) => {\n                    draft.listVariableFields.plugin = val;\n                  });\n                }}\n              />\n            </Grid>\n          </Grid>\n\n          <SectionHeader>Dropdown Options</SectionHeader>\n          <Grid container spacing={1} mb={1}>\n            <Grid item xs={12}>\n              Allow Multiple\n              <Switch\n                checked={state.listVariableFields.allowMultiple}\n                onChange={(e) => {\n                  setState((draft) => {\n                    draft.listVariableFields.allowMultiple = e.target.checked;\n                  });\n                }}\n              />\n            </Grid>\n            <Grid item xs={12}>\n              Allow All\n              <Switch\n                checked={state.listVariableFields.allowAll}\n                onChange={(e) => {\n                  setState((draft) => {\n                    draft.listVariableFields.allowAll = e.target.checked;\n                  });\n                }}\n              />\n            </Grid>\n          </Grid>\n        </>\n      )}\n\n      <Stack direction={'row'} spacing={2} justifyContent=\"end\">\n        <Button\n          onClick={() => {\n            onCancel();\n          }}\n        >\n          Cancel\n        </Button>\n\n        <Button\n          variant=\"contained\"\n          onClick={() => {\n            onChange(getVariableDefinitionFromState(state));\n          }}\n        >\n          Update Variable\n        </Button>\n      </Stack>\n    </Box>\n  );\n}\n"],"names":["React","Box","Typography","Switch","TextField","Grid","FormControl","InputLabel","MenuItem","Select","Button","Stack","useImmer","PluginEditor","getVariableDefinitionFromState","getInitialState","VARIABLE_TYPES","SectionHeader","children","pb","variant","VariableEditForm","initialVariableDefinition","onChange","onCancel","state","setState","container","spacing","mb","item","xs","label","value","name","v","draft","target","fullWidth","id","labelId","kind","map","description","textVariableFields","width","pluginType","pluginKindLabel","listVariableFields","plugin","val","checked","allowMultiple","e","allowAll","direction","justifyContent","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SACEC,GAAG,EACHC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,IAAI,EACJC,WAAW,EACXC,UAAU,EACVC,QAAQ,EACRC,MAAM,EACNC,MAAM,EACNC,KAAK,QACA,eAAe,CAAC;AACvB,SAASC,QAAQ,QAAQ,WAAW,CAAC;AACrC,SAASC,YAAY,QAAQ,2BAA2B,CAAC;AAEzD,SAA8BC,8BAA8B,EAAEC,eAAe,QAAQ,8BAA8B,CAAC;AAEpH,MAAMC,cAAc,GAAG;IAAC,cAAc;IAAE,cAAc;CAAC,AAAS,AAAC;AAEjE,MAAMC,aAAa,GAAG,CAAC,EAAEC,QAAQ,CAAA,EAA2B,iBAC1D,KAAChB,UAAU;QAACiB,EAAE,EAAE,CAAC;QAAEC,OAAO,EAAC,WAAW;kBACnCF,QAAQ;MACE,AACd,AAAC;AAEF,OAAO,SAASG,gBAAgB,CAAC,EAC/BC,yBAAyB,CAAA,EACzBC,QAAQ,CAAA,EACRC,QAAQ,CAAA,EAKT,EAAE;IACD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGd,QAAQ,CAACG,eAAe,CAACO,yBAAyB,CAAC,CAAC,AAAC;IAE/E,qBACE,MAACrB,GAAG;;0BACF,KAACgB,aAAa;0BAAC,SAAO;cAAgB;0BACtC,MAACZ,IAAI;gBAACsB,SAAS;gBAACC,OAAO,EAAE,CAAC;gBAAEC,EAAE,EAAE,CAAC;;kCAC/B,KAACxB,IAAI;wBAACyB,IAAI;wBAACC,EAAE,EAAE,CAAC;kCACd,cAAA,KAAC3B,SAAS;4BACR4B,KAAK,EAAC,MAAM;4BACZC,KAAK,EAAER,KAAK,CAACS,IAAI;4BACjBX,QAAQ,EAAE,CAACY,CAAC,GAAK;gCACfT,QAAQ,CAAC,CAACU,KAAK,GAAK;oCAClBA,KAAK,CAACF,IAAI,GAAGC,CAAC,CAACE,MAAM,CAACJ,KAAK,AAAU,CAAC;gCACxC,CAAC,CAAC,CAAC;4BACL,CAAC;0BACD;sBACG;kCACP,KAAC5B,IAAI;wBAACyB,IAAI;wBAACC,EAAE,EAAE,CAAC;kCACd,cAAA,MAACzB,WAAW;4BAACgC,SAAS;;8CACpB,KAAC/B,UAAU;oCAACgC,EAAE,EAAC,4BAA4B;8CAAC,MAAI;kCAAa;8CAC7D,KAAC9B,MAAM;oCACL+B,OAAO,EAAC,4BAA4B;oCACpCD,EAAE,EAAC,sBAAsB;oCACzBP,KAAK,EAAC,MAAM;oCACZC,KAAK,EAAER,KAAK,CAACgB,IAAI;oCACjBlB,QAAQ,EAAE,CAACY,CAAC,GAAK;wCACfT,QAAQ,CAAC,CAACU,KAAK,GAAK;4CAClBA,KAAK,CAACK,IAAI,GAAGN,CAAC,CAACE,MAAM,CAACJ,KAAK,AAA+B,CAAC;wCAC7D,CAAC,CAAC,CAAC;oCACL,CAAC;8CAEAjB,cAAc,CAAC0B,GAAG,CAAC,CAACP,CAAC,iBACpB,KAAC3B,QAAQ;4CAASyB,KAAK,EAAEE,CAAC;sDACvBA,CAAC;2CADWA,CAAC,CAEL,AACZ,CAAC;kCACK;;0BACG;sBACT;kCACP,KAAC9B,IAAI;wBAACyB,IAAI;wBAACC,EAAE,EAAE,CAAC;kCACd,cAAA,KAAC3B,SAAS;4BACR4B,KAAK,EAAC,OAAO;4BACbC,KAAK,EAAER,KAAK,CAACO,KAAK;4BAClBT,QAAQ,EAAE,CAACY,CAAC,GAAK;gCACfT,QAAQ,CAAC,CAACU,KAAK,GAAK;oCAClBA,KAAK,CAACJ,KAAK,GAAGG,CAAC,CAACE,MAAM,CAACJ,KAAK,CAAC;gCAC/B,CAAC,CAAC,CAAC;4BACL,CAAC;0BACD;sBACG;kCACP,KAAC5B,IAAI;wBAACyB,IAAI;wBAACC,EAAE,EAAE,EAAE;kCACf,cAAA,KAAC3B,SAAS;4BACR4B,KAAK,EAAC,aAAa;4BACnBC,KAAK,EAAER,KAAK,CAACkB,WAAW;4BACxBpB,QAAQ,EAAE,CAACY,CAAC,GAAK;gCACfT,QAAQ,CAAC,CAACU,KAAK,GAAK;oCAClBA,KAAK,CAACO,WAAW,GAAGR,CAAC,CAACE,MAAM,CAACJ,KAAK,CAAC;gCACrC,CAAC,CAAC,CAAC;4BACL,CAAC;0BACD;sBACG;;cACF;YAENR,KAAK,CAACgB,IAAI,KAAK,cAAc,kBAC5B;;kCACE,KAACxB,aAAa;kCAAC,cAAY;sBAAgB;kCAC3C,KAACZ,IAAI;wBAACsB,SAAS;wBAACC,OAAO,EAAE,CAAC;wBAAEC,EAAE,EAAE,CAAC;kCAC/B,cAAA,KAACxB,IAAI;4BAACyB,IAAI;4BAACC,EAAE,EAAE,EAAE;sCACf,cAAA,KAAC3B,SAAS;gCACR4B,KAAK,EAAC,OAAO;gCACbC,KAAK,EAAER,KAAK,CAACmB,kBAAkB,CAACX,KAAK;gCACrCV,QAAQ,EAAE,CAACY,CAAC,GAAK;oCACfT,QAAQ,CAAC,CAACU,KAAK,GAAK;wCAClBA,KAAK,CAACQ,kBAAkB,CAACX,KAAK,GAAGE,CAAC,CAACE,MAAM,CAACJ,KAAK,CAAC;oCAClD,CAAC,CAAC,CAAC;gCACL,CAAC;8BACD;0BACG;sBACF;;cACN,AACJ;YAEAR,KAAK,CAACgB,IAAI,KAAK,cAAc,kBAC5B;;kCACE,KAACxB,aAAa;kCAAC,cAAY;sBAAgB;kCAC3C,KAACZ,IAAI;wBAACsB,SAAS;wBAACC,OAAO,EAAE,CAAC;wBAAEC,EAAE,EAAE,CAAC;kCAC/B,cAAA,KAACxB,IAAI;4BAACyB,IAAI;4BAACC,EAAE,EAAE,CAAC;sCACd,cAAA,KAAClB,YAAY;gCACXgC,KAAK,EAAE,GAAG;gCACVC,UAAU,EAAC,UAAU;gCACrBC,eAAe,EAAC,QAAQ;gCACxBd,KAAK,EAAER,KAAK,CAACuB,kBAAkB,CAACC,MAAM;gCACtC1B,QAAQ,EAAE,CAAC2B,GAAG,GAAK;oCACjBxB,QAAQ,CAAC,CAACU,KAAK,GAAK;wCAClBA,KAAK,CAACY,kBAAkB,CAACC,MAAM,GAAGC,GAAG,CAAC;oCACxC,CAAC,CAAC,CAAC;gCACL,CAAC;8BACD;0BACG;sBACF;kCAEP,KAACjC,aAAa;kCAAC,kBAAgB;sBAAgB;kCAC/C,MAACZ,IAAI;wBAACsB,SAAS;wBAACC,OAAO,EAAE,CAAC;wBAAEC,EAAE,EAAE,CAAC;;0CAC/B,MAACxB,IAAI;gCAACyB,IAAI;gCAACC,EAAE,EAAE,EAAE;;oCAAE,gBAEjB;kDAAA,KAAC5B,MAAM;wCACLgD,OAAO,EAAE1B,KAAK,CAACuB,kBAAkB,CAACI,aAAa;wCAC/C7B,QAAQ,EAAE,CAAC8B,CAAC,GAAK;4CACf3B,QAAQ,CAAC,CAACU,KAAK,GAAK;gDAClBA,KAAK,CAACY,kBAAkB,CAACI,aAAa,GAAGC,CAAC,CAAChB,MAAM,CAACc,OAAO,CAAC;4CAC5D,CAAC,CAAC,CAAC;wCACL,CAAC;sCACD;;8BACG;0CACP,MAAC9C,IAAI;gCAACyB,IAAI;gCAACC,EAAE,EAAE,EAAE;;oCAAE,WAEjB;kDAAA,KAAC5B,MAAM;wCACLgD,OAAO,EAAE1B,KAAK,CAACuB,kBAAkB,CAACM,QAAQ;wCAC1C/B,QAAQ,EAAE,CAAC8B,CAAC,GAAK;4CACf3B,QAAQ,CAAC,CAACU,KAAK,GAAK;gDAClBA,KAAK,CAACY,kBAAkB,CAACM,QAAQ,GAAGD,CAAC,CAAChB,MAAM,CAACc,OAAO,CAAC;4CACvD,CAAC,CAAC,CAAC;wCACL,CAAC;sCACD;;8BACG;;sBACF;;cACN,AACJ;0BAED,MAACxC,KAAK;gBAAC4C,SAAS,EAAE,KAAK;gBAAE3B,OAAO,EAAE,CAAC;gBAAE4B,cAAc,EAAC,KAAK;;kCACvD,KAAC9C,MAAM;wBACL+C,OAAO,EAAE,IAAM;4BACbjC,QAAQ,EAAE,CAAC;wBACb,CAAC;kCACF,QAED;sBAAS;kCAET,KAACd,MAAM;wBACLU,OAAO,EAAC,WAAW;wBACnBqC,OAAO,EAAE,IAAM;4BACblC,QAAQ,CAACT,8BAA8B,CAACW,KAAK,CAAC,CAAC,CAAC;wBAClD,CAAC;kCACF,iBAED;sBAAS;;cACH;;MACJ,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.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 React from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControl,\n  InputLabel,\n  MenuItem,\n  Select,\n  Button,\n  Stack,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { PluginEditor } from '@perses-dev/plugin-system';\nimport { VariableDefinition } from '@perses-dev/core';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\nconst VARIABLE_TYPES = ['ListVariable', 'TextVariable'] as const;\n\nconst SectionHeader = ({ children }: React.PropsWithChildren) => (\n  <Typography pb={2} variant=\"subtitle1\">\n    {children}\n  </Typography>\n);\n\nexport function VariableEditForm({\n  initialVariableDefinition,\n  onChange,\n  onCancel,\n}: {\n  initialVariableDefinition: VariableDefinition;\n  onChange: (def: VariableDefinition) => void;\n  onCancel: () => void;\n}) {\n  const [state, setState] = useImmer(getInitialState(initialVariableDefinition));\n\n  return (\n    <Box>\n      <SectionHeader>General</SectionHeader>\n      <Grid container spacing={2} mb={2}>\n        <Grid item xs={6}>\n          <TextField\n            fullWidth\n            label=\"Name\"\n            value={state.name}\n            onChange={(v) => {\n              setState((draft) => {\n                draft.name = v.target.value as string;\n              });\n            }}\n          />\n        </Grid>\n        <Grid item xs={6}>\n          <FormControl fullWidth>\n            <InputLabel id=\"variable-type-select-label\">Type</InputLabel>\n            <Select\n              labelId=\"variable-type-select-label\"\n              id=\"variable-type-select\"\n              label=\"Type\"\n              value={state.kind}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.kind = v.target.value as VariableEditorState['kind'];\n                });\n              }}\n            >\n              {VARIABLE_TYPES.map((v) => (\n                <MenuItem key={v} value={v}>\n                  {v}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={6}>\n          <TextField\n            fullWidth\n            label=\"Label\"\n            value={state.label}\n            onChange={(v) => {\n              setState((draft) => {\n                draft.label = v.target.value;\n              });\n            }}\n          />\n        </Grid>\n        <Grid item xs={12}>\n          <TextField\n            fullWidth\n            label=\"Description\"\n            value={state.description}\n            onChange={(v) => {\n              setState((draft) => {\n                draft.description = v.target.value;\n              });\n            }}\n          />\n        </Grid>\n      </Grid>\n\n      {state.kind === 'TextVariable' && (\n        <>\n          <SectionHeader>Text Options</SectionHeader>\n          <Grid container spacing={2} mb={2}>\n            <Grid item xs={12}>\n              <TextField\n                label=\"Value\"\n                value={state.textVariableFields.value}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.textVariableFields.value = v.target.value;\n                  });\n                }}\n              />\n            </Grid>\n          </Grid>\n        </>\n      )}\n\n      {state.kind === 'ListVariable' && (\n        <>\n          <SectionHeader>List Options</SectionHeader>\n          <Grid container spacing={2} mb={2}>\n            <Grid item xs={6}>\n              <PluginEditor\n                width={500}\n                pluginType=\"Variable\"\n                pluginKindLabel=\"Source\"\n                value={state.listVariableFields.plugin}\n                onChange={(val) => {\n                  setState((draft) => {\n                    draft.listVariableFields.plugin = val;\n                  });\n                }}\n              />\n            </Grid>\n          </Grid>\n\n          <SectionHeader>Dropdown Options</SectionHeader>\n          <Grid container spacing={1} mb={1}>\n            <Grid item xs={12}>\n              Allow Multiple\n              <Switch\n                checked={state.listVariableFields.allowMultiple}\n                onChange={(e) => {\n                  setState((draft) => {\n                    draft.listVariableFields.allowMultiple = e.target.checked;\n                  });\n                }}\n              />\n            </Grid>\n            <Grid item xs={12}>\n              Allow All\n              <Switch\n                checked={state.listVariableFields.allowAll}\n                onChange={(e) => {\n                  setState((draft) => {\n                    draft.listVariableFields.allowAll = e.target.checked;\n                  });\n                }}\n              />\n            </Grid>\n          </Grid>\n        </>\n      )}\n\n      <Stack direction={'row'} spacing={2} justifyContent=\"end\">\n        <Button\n          variant=\"contained\"\n          onClick={() => {\n            onChange(getVariableDefinitionFromState(state));\n          }}\n        >\n          Update\n        </Button>\n        <Button\n          variant=\"outlined\"\n          onClick={() => {\n            onCancel();\n          }}\n        >\n          Cancel\n        </Button>\n      </Stack>\n    </Box>\n  );\n}\n"],"names":["React","Box","Typography","Switch","TextField","Grid","FormControl","InputLabel","MenuItem","Select","Button","Stack","useImmer","PluginEditor","getVariableDefinitionFromState","getInitialState","VARIABLE_TYPES","SectionHeader","children","pb","variant","VariableEditForm","initialVariableDefinition","onChange","onCancel","state","setState","container","spacing","mb","item","xs","fullWidth","label","value","name","v","draft","target","id","labelId","kind","map","description","textVariableFields","width","pluginType","pluginKindLabel","listVariableFields","plugin","val","checked","allowMultiple","e","allowAll","direction","justifyContent","onClick"],"mappings":"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"}

package/dist/context/DashboardProvider/DashboardProvider.d.ts

@@ -4,7 +4,10 @@ import { DashboardSpec, RelativeTimeRange } from '@perses-dev/core';
 import { PanelGroupEditorSlice } from './panel-group-editor-slice';
 import { PanelGroupSlice } from './panel-group-slice';
 import { PanelEditorSlice } from './panel-editor-slice';
-export interface DashboardStoreState extends PanelGroupEditorSlice, PanelGroupSlice, PanelEditorSlice {
+import { PanelSlice } from './panel-slice';
+import { DeletePanelGroupSlice } from './delete-panel-group-slice';
+import { DeletePanelSlice } from './delete-panel-slice';
+export interface DashboardStoreState extends PanelGroupSlice, PanelSlice, PanelGroupEditorSlice, DeletePanelGroupSlice, PanelEditorSlice, DeletePanelSlice {
     isEditMode: boolean;
     setEditMode: (isEditMode: boolean) => void;
     defaultTimeRange: RelativeTimeRange;

package/dist/context/DashboardProvider/DashboardProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/DashboardProvider.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKxC,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAAyB,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC7E,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAEhF,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,EAAE,eAAe,EAAE,gBAAgB;IACnG,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,aAAa,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB,oEAAsE,CAAC;AAEpG,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,KAM/E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAuC9D"}
+{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/DashboardProvider.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKxC,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAAyB,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC7E,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAoB,UAAU,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAEhF,MAAM,WAAW,mBACf,SAAQ,eAAe,EACrB,UAAU,EACV,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EAChB,gBAAgB;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,aAAa,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB,oEAAsE,CAAC;AAEpG,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,KAM/E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eA0C9D"}

package/dist/context/DashboardProvider/DashboardProvider.js

@@ -19,6 +19,9 @@ import { createContext, useContext } from 'react';
 import { createPanelGroupEditorSlice } from './panel-group-editor-slice';
 import { createPanelGroupSlice } from './panel-group-slice';
 import { createPanelEditorSlice } from './panel-editor-slice';
+import { createPanelSlice } from './panel-slice';
+import { createDeletePanelGroupSlice } from './delete-panel-group-slice';
+import { createDeletePanelSlice } from './delete-panel-slice';
 export const DashboardContext = /*#__PURE__*/ createContext(undefined);
 export function useDashboardStore(selector) {
     const store = useContext(DashboardContext);
@@ -33,9 +36,12 @@ export function DashboardProvider(props) {
     const dashboardStore = createStore()(immer(devtools((...args)=>{
         const [set, get] = args;
         return {
-            ...createPanelGroupEditorSlice(...args),
             ...createPanelGroupSlice(layouts)(...args),
-            ...createPanelEditorSlice(panels)(...args),
+            ...createPanelSlice(panels)(...args),
+            ...createPanelGroupEditorSlice(...args),
+            ...createDeletePanelGroupSlice(...args),
+            ...createPanelEditorSlice()(...args),
+            ...createDeletePanelSlice()(...args),
             defaultTimeRange: {
                 pastDuration: dashboardSpec.duration
             },

package/dist/context/DashboardProvider/DashboardProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/DashboardProvider/DashboardProvider.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 { createStore, useStore } from 'zustand';\nimport type { StoreApi } from 'zustand';\nimport { devtools } from 'zustand/middleware';\nimport { immer } from 'zustand/middleware/immer';\nimport shallow from 'zustand/shallow';\nimport { createContext, useContext } from 'react';\nimport { DashboardSpec, RelativeTimeRange } from '@perses-dev/core';\nimport { createPanelGroupEditorSlice, PanelGroupEditorSlice } from './panel-group-editor-slice';\nimport { createPanelGroupSlice, PanelGroupSlice } from './panel-group-slice';\nimport { createPanelEditorSlice, PanelEditorSlice } from './panel-editor-slice';\n\nexport interface DashboardStoreState extends PanelGroupEditorSlice, PanelGroupSlice, PanelEditorSlice {\n  isEditMode: boolean;\n  setEditMode: (isEditMode: boolean) => void;\n  defaultTimeRange: RelativeTimeRange;\n  reset: () => void;\n  save: () => void;\n}\n\nexport interface DashboardStoreProps {\n  dashboardSpec: DashboardSpec;\n  isEditMode?: boolean;\n}\n\nexport interface DashboardProviderProps {\n  initialState: DashboardStoreProps;\n  children?: React.ReactNode;\n}\n\nexport const DashboardContext = createContext<StoreApi<DashboardStoreState> | undefined>(undefined);\n\nexport function useDashboardStore<T>(selector: (state: DashboardStoreState) => T) {\n  const store = useContext(DashboardContext);\n  if (store === undefined) {\n    throw new Error('No DashboardContext found. Did you forget a Provider?');\n  }\n  return useStore(store, selector, shallow);\n}\n\nexport function DashboardProvider(props: DashboardProviderProps) {\n  const {\n    children,\n    initialState: { dashboardSpec, isEditMode },\n  } = props;\n\n  const { layouts, panels } = dashboardSpec;\n\n  const dashboardStore = createStore<DashboardStoreState>()(\n    immer(\n      devtools((...args) => {\n        const [set, get] = args;\n        return {\n          ...createPanelGroupEditorSlice(...args),\n          ...createPanelGroupSlice(layouts)(...args),\n          ...createPanelEditorSlice(panels)(...args),\n          defaultTimeRange: { pastDuration: dashboardSpec.duration },\n          isEditMode: !!isEditMode,\n          setEditMode: (isEditMode: boolean) => set({ isEditMode }),\n          reset: () => {\n            const { resetPanels, resetPanelGroups } = get();\n            resetPanels();\n            resetPanelGroups();\n          },\n          save: () => {\n            const { savePanels, savePanelGroups } = get();\n            savePanels();\n            savePanelGroups();\n          },\n        };\n      })\n    )\n  );\n\n  return (\n    <DashboardContext.Provider value={dashboardStore as StoreApi<DashboardStoreState>}>\n      {children}\n    </DashboardContext.Provider>\n  );\n}\n"],"names":["createStore","useStore","devtools","immer","shallow","createContext","useContext","createPanelGroupEditorSlice","createPanelGroupSlice","createPanelEditorSlice","DashboardContext","undefined","useDashboardStore","selector","store","Error","DashboardProvider","props","children","initialState","dashboardSpec","isEditMode","layouts","panels","dashboardStore","args","set","get","defaultTimeRange","pastDuration","duration","setEditMode","reset","resetPanels","resetPanelGroups","save","savePanels","savePanelGroups","Provider","value"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,SAAS,CAAC;AAEhD,SAASC,QAAQ,QAAQ,oBAAoB,CAAC;AAC9C,SAASC,KAAK,QAAQ,0BAA0B,CAAC;AACjD,OAAOC,OAAO,MAAM,iBAAiB,CAAC;AACtC,SAASC,aAAa,EAAEC,UAAU,QAAQ,OAAO,CAAC;AAElD,SAASC,2BAA2B,QAA+B,4BAA4B,CAAC;AAChG,SAASC,qBAAqB,QAAyB,qBAAqB,CAAC;AAC7E,SAASC,sBAAsB,QAA0B,sBAAsB,CAAC;AAoBhF,OAAO,MAAMC,gBAAgB,iBAAGL,aAAa,CAA4CM,SAAS,CAAC,CAAC;AAEpG,OAAO,SAASC,iBAAiB,CAAIC,QAA2C,EAAE;IAChF,MAAMC,KAAK,GAAGR,UAAU,CAACI,gBAAgB,CAAC,AAAC;IAC3C,IAAII,KAAK,KAAKH,SAAS,EAAE;QACvB,MAAM,IAAII,KAAK,CAAC,uDAAuD,CAAC,CAAC;IAC3E,CAAC;IACD,OAAOd,QAAQ,CAACa,KAAK,EAAED,QAAQ,EAAET,OAAO,CAAC,CAAC;AAC5C,CAAC;AAED,OAAO,SAASY,iBAAiB,CAACC,KAA6B,EAAE;IAC/D,MAAM,EACJC,QAAQ,CAAA,EACRC,YAAY,EAAE,EAAEC,aAAa,CAAA,EAAEC,UAAU,CAAA,EAAE,CAAA,IAC5C,GAAGJ,KAAK,AAAC;IAEV,MAAM,EAAEK,OAAO,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGH,aAAa,AAAC;IAE1C,MAAMI,cAAc,GAAGxB,WAAW,EAAuB,CACvDG,KAAK,CACHD,QAAQ,CAAC,CAAIuB,GAAAA,IAAI,GAAK;QACpB,MAAM,CAACC,GAAG,EAAEC,GAAG,CAAC,GAAGF,IAAI,AAAC;QACxB,OAAO;YACL,GAAGlB,2BAA2B,IAAIkB,IAAI,CAAC;YACvC,GAAGjB,qBAAqB,CAACc,OAAO,CAAC,IAAIG,IAAI,CAAC;YAC1C,GAAGhB,sBAAsB,CAACc,MAAM,CAAC,IAAIE,IAAI,CAAC;YAC1CG,gBAAgB,EAAE;gBAAEC,YAAY,EAAET,aAAa,CAACU,QAAQ;aAAE;YAC1DT,UAAU,EAAE,CAAC,CAACA,UAAU;YACxBU,WAAW,EAAE,CAACV,UAAmB,GAAKK,GAAG,CAAC;oBAAEL,UAAU;iBAAE,CAAC;YACzDW,KAAK,EAAE,IAAM;gBACX,MAAM,EAAEC,WAAW,CAAA,EAAEC,gBAAgB,CAAA,EAAE,GAAGP,GAAG,EAAE,AAAC;gBAChDM,WAAW,EAAE,CAAC;gBACdC,gBAAgB,EAAE,CAAC;YACrB,CAAC;YACDC,IAAI,EAAE,IAAM;gBACV,MAAM,EAAEC,UAAU,CAAA,EAAEC,eAAe,CAAA,EAAE,GAAGV,GAAG,EAAE,AAAC;gBAC9CS,UAAU,EAAE,CAAC;gBACbC,eAAe,EAAE,CAAC;YACpB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC,CACH,CACF,AAAC;IAEF,qBACE,KAAC3B,gBAAgB,CAAC4B,QAAQ;QAACC,KAAK,EAAEf,cAAc;kBAC7CN,QAAQ;MACiB,CAC5B;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/context/DashboardProvider/DashboardProvider.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 { createStore, useStore } from 'zustand';\nimport type { StoreApi } from 'zustand';\nimport { devtools } from 'zustand/middleware';\nimport { immer } from 'zustand/middleware/immer';\nimport shallow from 'zustand/shallow';\nimport { createContext, useContext } from 'react';\nimport { DashboardSpec, RelativeTimeRange } from '@perses-dev/core';\nimport { createPanelGroupEditorSlice, PanelGroupEditorSlice } from './panel-group-editor-slice';\nimport { createPanelGroupSlice, PanelGroupSlice } from './panel-group-slice';\nimport { createPanelEditorSlice, PanelEditorSlice } from './panel-editor-slice';\nimport { createPanelSlice, PanelSlice } from './panel-slice';\nimport { createDeletePanelGroupSlice, DeletePanelGroupSlice } from './delete-panel-group-slice';\nimport { createDeletePanelSlice, DeletePanelSlice } from './delete-panel-slice';\n\nexport interface DashboardStoreState\n  extends PanelGroupSlice,\n    PanelSlice,\n    PanelGroupEditorSlice,\n    DeletePanelGroupSlice,\n    PanelEditorSlice,\n    DeletePanelSlice {\n  isEditMode: boolean;\n  setEditMode: (isEditMode: boolean) => void;\n  defaultTimeRange: RelativeTimeRange;\n  reset: () => void;\n  save: () => void;\n}\n\nexport interface DashboardStoreProps {\n  dashboardSpec: DashboardSpec;\n  isEditMode?: boolean;\n}\n\nexport interface DashboardProviderProps {\n  initialState: DashboardStoreProps;\n  children?: React.ReactNode;\n}\n\nexport const DashboardContext = createContext<StoreApi<DashboardStoreState> | undefined>(undefined);\n\nexport function useDashboardStore<T>(selector: (state: DashboardStoreState) => T) {\n  const store = useContext(DashboardContext);\n  if (store === undefined) {\n    throw new Error('No DashboardContext found. Did you forget a Provider?');\n  }\n  return useStore(store, selector, shallow);\n}\n\nexport function DashboardProvider(props: DashboardProviderProps) {\n  const {\n    children,\n    initialState: { dashboardSpec, isEditMode },\n  } = props;\n\n  const { layouts, panels } = dashboardSpec;\n\n  const dashboardStore = createStore<DashboardStoreState>()(\n    immer(\n      devtools((...args) => {\n        const [set, get] = args;\n        return {\n          ...createPanelGroupSlice(layouts)(...args),\n          ...createPanelSlice(panels)(...args),\n          ...createPanelGroupEditorSlice(...args),\n          ...createDeletePanelGroupSlice(...args),\n          ...createPanelEditorSlice()(...args),\n          ...createDeletePanelSlice()(...args),\n          defaultTimeRange: { pastDuration: dashboardSpec.duration },\n          isEditMode: !!isEditMode,\n          setEditMode: (isEditMode: boolean) => set({ isEditMode }),\n          reset: () => {\n            const { resetPanels, resetPanelGroups } = get();\n            resetPanels();\n            resetPanelGroups();\n          },\n          save: () => {\n            const { savePanels, savePanelGroups } = get();\n            savePanels();\n            savePanelGroups();\n          },\n        };\n      })\n    )\n  );\n\n  return (\n    <DashboardContext.Provider value={dashboardStore as StoreApi<DashboardStoreState>}>\n      {children}\n    </DashboardContext.Provider>\n  );\n}\n"],"names":["createStore","useStore","devtools","immer","shallow","createContext","useContext","createPanelGroupEditorSlice","createPanelGroupSlice","createPanelEditorSlice","createPanelSlice","createDeletePanelGroupSlice","createDeletePanelSlice","DashboardContext","undefined","useDashboardStore","selector","store","Error","DashboardProvider","props","children","initialState","dashboardSpec","isEditMode","layouts","panels","dashboardStore","args","set","get","defaultTimeRange","pastDuration","duration","setEditMode","reset","resetPanels","resetPanelGroups","save","savePanels","savePanelGroups","Provider","value"],"mappings":"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"}

package/dist/context/DashboardProvider/common.d.ts

@@ -2,4 +2,11 @@
  * The middleware applied to the DashboardStore (can be used as generic argument in StateCreator).
  */
 export declare type Middleware = [['zustand/immer', never], ['zustand/devtools', never]];
+declare global {
+    var dashboardStoreId: number | undefined;
+}
+/**
+ * Helper function to generate unique IDs for things in the dashboard store that don't have a "natural" ID.
+ */
+export declare function generateId(): number;
 //# sourceMappingURL=common.d.ts.map

package/dist/context/DashboardProvider/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/common.ts"],"names":[],"mappings":"AAaA;;GAEG;AACH,oBAAY,UAAU,GAAG,CAAC,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/common.ts"],"names":[],"mappings":"AAaA;;GAEG;AACH,oBAAY,UAAU,GAAG,CAAC,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAAC;AAEjF,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,UAAU,WAKzB"}

package/dist/context/DashboardProvider/common.js

@@ -12,6 +12,13 @@
 // limitations under the License.
 /**
  * The middleware applied to the DashboardStore (can be used as generic argument in StateCreator).
- */ export { };
+ */ /**
+ * Helper function to generate unique IDs for things in the dashboard store that don't have a "natural" ID.
+ */ export function generateId() {
+    if (globalThis.dashboardStoreId === undefined) {
+        globalThis.dashboardStoreId = -1;
+    }
+    return globalThis.dashboardStoreId++;
+}
 
 //# sourceMappingURL=common.js.map

package/dist/context/DashboardProvider/common.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/DashboardProvider/common.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\n/**\n * The middleware applied to the DashboardStore (can be used as generic argument in StateCreator).\n */\nexport type Middleware = [['zustand/immer', never], ['zustand/devtools', never]];\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;;CAEC,GACD,WAAiF"}
+{"version":3,"sources":["../../../src/context/DashboardProvider/common.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\n/**\n * The middleware applied to the DashboardStore (can be used as generic argument in StateCreator).\n */\nexport type Middleware = [['zustand/immer', never], ['zustand/devtools', never]];\n\ndeclare global {\n  // eslint-disable-next-line no-var\n  var dashboardStoreId: number | undefined;\n}\n\n/**\n * Helper function to generate unique IDs for things in the dashboard store that don't have a \"natural\" ID.\n */\nexport function generateId() {\n  if (globalThis.dashboardStoreId === undefined) {\n    globalThis.dashboardStoreId = -1;\n  }\n  return globalThis.dashboardStoreId++;\n}\n"],"names":["generateId","globalThis","dashboardStoreId","undefined"],"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;;CAEC,GACD,AAOA;;CAEC,GACD,OAAO,SAASA,UAAU,GAAG;IAC3B,IAAIC,UAAU,CAACC,gBAAgB,KAAKC,SAAS,EAAE;QAC7CF,UAAU,CAACC,gBAAgB,GAAG,CAAC,CAAC,CAAC;IACnC,CAAC;IACD,OAAOD,UAAU,CAACC,gBAAgB,EAAE,CAAC;AACvC,CAAC"}

package/dist/context/DashboardProvider/dashboard-provider-api.d.ts

@@ -1,4 +1,4 @@
-import { PanelGroupItemId, PanelGroupId } from './panel-group-slice';
+import { PanelGroupItemId, PanelGroupId, PanelGroupItemLayout } from './panel-group-slice';
 export declare function useEditMode(): {
     isEditMode: boolean;
     setEditMode: (isEditMode: boolean) => void;
@@ -33,6 +33,7 @@ export declare function usePanelGroupActions(panelGroupId: PanelGroupId): {
     openAddPanel: () => void;
     moveUp: (() => void) | undefined;
     moveDown: (() => void) | undefined;
+    updatePanelGroupLayouts: (itemLayouts: PanelGroupItemLayout[]) => void;
 };
 /**
  * Gets the Panel Group editor state.
@@ -42,7 +43,7 @@ export declare function usePanelGroupEditor(): import("./panel-group-editor-slic
  * Gets the Delete Panel Group dialog state.
  */
 export declare function useDeletePanelGroupDialog(): {
-    deletePanelGroupDialog: import("./panel-group-editor-slice").DeletePanelGroupDialog | undefined;
+    deletePanelGroupDialog: import("./delete-panel-group-slice").DeletePanelGroupDialogState | undefined;
     openDeletePanelGroupDialog: (panelGroupId: number) => void;
     closeDeletePanelGroupDialog: () => void;
     deletePanelGroup: (panelGroupId: number) => void;
@@ -66,8 +67,8 @@ export declare function usePanelEditor(): import("./panel-editor-slice").PanelEd
  * Gets the state for the Delete Panel dialog.
  */
 export declare function useDeletePanelDialog(): {
-    deletePanelDialog: import("./panel-editor-slice").DeletePanelDialog | undefined;
-    deletePanels: (panels: PanelGroupItemId[]) => void;
+    deletePanelDialog: import("./delete-panel-slice").DeletePanelDialogState | undefined;
+    deletePanel: (panelGroupItemId: PanelGroupItemId) => void;
     closeDeletePanelDialog: () => void;
 };
 export declare function useDefaultTimeRange(): import("@perses-dev/core").RelativeTimeRange;

package/dist/context/DashboardProvider/dashboard-provider-api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-provider-api.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/dashboard-provider-api.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAErE,wBAAgB,WAAW;;;EAE1B;AAED;;GAEG;AACH,wBAAgB,mBAAmB;;;;;EAYlC;AAED;;GAEG;AACH,wBAAgB,gBAAgB,aAE/B;AAED;;GAEG;AACH,wBAAgB,kBAAkB,yDAYjC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,YAAY,EAAE,YAAY,sDAMvD;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,YAAY;;;;;;EAa9D;AAuBD;;GAEG;AACH,wBAAgB,mBAAmB,sEAElC;AAED;;GAEG;AACH,wBAAgB,yBAAyB;;;;;EASxC;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,sFAc1D;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,gBAAgB,EAAE,gBAAgB;;;EAOjE;AAED;;GAEG;AACH,wBAAgB,cAAc,gEAE7B;AAED;;GAEG;AACH,wBAAgB,oBAAoB;;;;EAWnC;AAED,wBAAgB,mBAAmB,iDAElC"}
+{"version":3,"file":"dashboard-provider-api.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/dashboard-provider-api.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAE3F,wBAAgB,WAAW;;;EAE1B;AAED;;GAEG;AACH,wBAAgB,mBAAmB;;;;;EAYlC;AAED;;GAEG;AACH,wBAAgB,gBAAgB,aAE/B;AAED;;GAEG;AACH,wBAAgB,kBAAkB,yDAYjC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,YAAY,EAAE,YAAY,sDAMvD;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,YAAY;;;;;;2CAapB,oBAAoB,EAAE;EAGhE;AAuBD;;GAEG;AACH,wBAAgB,mBAAmB,sEAElC;AAED;;GAEG;AACH,wBAAgB,yBAAyB;;;;;EASxC;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,sFAa1D;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,gBAAgB,EAAE,gBAAgB;;;EAOjE;AAED;;GAEG;AACH,wBAAgB,cAAc,gEAE7B;AAED;;GAEG;AACH,wBAAgB,oBAAoB;;;;EAWnC;AAED,wBAAgB,mBAAmB,iDAElC"}

package/dist/context/DashboardProvider/dashboard-provider-api.js

@@ -10,7 +10,6 @@
 // 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 { getPanelKeyFromRef } from '@perses-dev/core';
 import { useMemo } from 'react';
 import { useDashboardStore } from './DashboardProvider';
 export function useEditMode() {
@@ -36,7 +35,7 @@ export function useEditMode() {
 /**
  * Returns an array of PanelGroupIds in the order they appear in the dashboard.
  */ export function usePanelGroupIds() {
-    return useDashboardStore((store)=>store.panelGroupIdOrder);
+    return useDashboardStore((store)=>store.panelGroupOrder);
 }
 /**
  * Returns an array of PanelGroupDefinitions in the order they appear in the dashboard.
@@ -72,20 +71,22 @@ export function useEditMode() {
     const openEditPanelGroup = useDashboardStore((store)=>store.openEditPanelGroup);
     const deletePanelGroup = useDashboardStore((store)=>store.openDeletePanelGroupDialog);
     const openAddPanel = useDashboardStore((store)=>store.openAddPanel);
+    const updatePanelGroupLayouts = useDashboardStore((store)=>store.updatePanelGroupLayouts);
     return {
         openEditPanelGroup: ()=>openEditPanelGroup(panelGroupId),
         deletePanelGroup: ()=>deletePanelGroup(panelGroupId),
         openAddPanel: ()=>openAddPanel(panelGroupId),
         moveUp,
-        moveDown
+        moveDown,
+        updatePanelGroupLayouts: (itemLayouts)=>updatePanelGroupLayouts(panelGroupId, itemLayouts)
     };
 }
 /**
  * Returns functions for moving a panel group up or down. A function will be undefined if the panel group can't be
  * moved in that direction.
  */ function useMovePanelGroup(panelGroupId) {
-    const currentIndex = useDashboardStore((store)=>store.panelGroupIdOrder.findIndex((id)=>id === panelGroupId));
-    const panelGroupsLength = useDashboardStore((store)=>store.panelGroupIdOrder.length);
+    const currentIndex = useDashboardStore((store)=>store.panelGroupOrder.findIndex((id)=>id === panelGroupId));
+    const panelGroupsLength = useDashboardStore((store)=>store.panelGroupOrder.length);
     const swapPanelGroups = useDashboardStore((store)=>store.swapPanelGroups);
     if (currentIndex < 0) {
         throw new Error(`Could not find panel group with Id ${panelGroupId} in order array`);
@@ -115,12 +116,11 @@ export function useEditMode() {
 /**
  * Gets an individual panel in the store. Throws if the panel can't be found.
  */ export function usePanel(panelGroupItemId) {
-    const { panelGroupId , itemIndex  } = panelGroupItemId;
+    const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
     const panel = useDashboardStore((store)=>{
-        var ref, ref1;
-        const panelRef = (ref1 = (ref = store.panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.items[itemIndex]) === null || ref1 === void 0 ? void 0 : ref1.content;
-        if (panelRef === undefined) return;
-        const panelKey = getPanelKeyFromRef(panelRef);
+        var ref;
+        const panelKey = (ref = store.panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.itemPanelKeys[panelGroupLayoutId];
+        if (panelKey === undefined) return;
         return store.panels[panelKey];
     });
     if (panel === undefined) {
@@ -148,11 +148,11 @@ export function useEditMode() {
  */ export function useDeletePanelDialog() {
     const deletePanelDialog = useDashboardStore((store)=>store.deletePanelDialog);
     // TODO: Refactor similar to other dialogs/editors so these are on the editor state itself
-    const deletePanels = useDashboardStore((store)=>store.deletePanels);
+    const deletePanel = useDashboardStore((store)=>store.deletePanel);
     const closeDeletePanelDialog = useDashboardStore((store)=>store.closeDeletePanelDialog);
     return {
         deletePanelDialog,
-        deletePanels,
+        deletePanel,
         closeDeletePanelDialog
     };
 }