@perses-dev/dashboards 0.8.1 → 0.10.0

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

@@ -1 +1,74 @@
-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 testDashboard from '../../test/testDashboard';
+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 ()=>{
+        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({
+            id: 3,
+            title: 'New Panel Group',
+            isCollapsed: false,
+            items: []
+        });
+    });
+    it('should edit existing panel group', async ()=>{
+        var ref;
+        const storeApi = renderDialog();
+        // Open the dialog for an existing panel group
+        act(()=>storeApi.getState().openPanelGroupDialog(0));
+        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({
+            id: 0,
+            title: 'New Name',
+            isCollapsed: false,
+            items: (ref = testDashboard.spec.layouts[0]) === null || ref === void 0 ? void 0 : ref.spec.items
+        });
+    });
+});
+
+//# 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 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().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      id: 3,\n      title: 'New Panel Group',\n      isCollapsed: false,\n      items: [],\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      id: 0,\n      title: 'New Name',\n      isCollapsed: false,\n      items: testDashboard.spec.layouts[0]?.spec.items,\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","openPanelGroupDialog","nameInput","findByLabelText","type","click","getByText","layouts","expect","toContainEqual","id","title","isCollapsed","items","clear"],"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 { useDefaultTimeRange } 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 dashboardDefaultTimeRange = useDefaultTimeRange();
+    const { queryString  } = useQueryString();
+    const defaultTimeRange = getDefaultTimeRange(dashboardDefaultTimeRange, 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 { useDefaultTimeRange } 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 dashboardDefaultTimeRange = useDefaultTimeRange();\n  const { queryString } = useQueryString();\n\n  const defaultTimeRange = getDefaultTimeRange(dashboardDefaultTimeRange, 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","useDefaultTimeRange","TIME_OPTIONS","value","pastDuration","display","TimeRangeControls","timeRange","setTimeRange","dashboardDefaultTimeRange","queryString","defaultTimeRange","selectedTimeRange","setSelectedTimeRange","showCustomDateSelector","setShowCustomDateSelector","anchorEl","direction","spacing","current","anchorOrigin","vertical","horizontal","open","onClose","sx","theme","padding","initialTimeRange","onChange","fullWidth","ref","timeOptions","onSelectChange","event","duration","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"}

package/dist/components/Variables/Variable.js

@@ -1 +1,210 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useEffect,useRef}from"react";import{Select,FormControl,InputLabel,MenuItem,Box,LinearProgress,IconButton,TextField}from"@mui/material";import{Reload}from"mdi-material-ui";import{useTemplateVariable,useTemplateVariableActions,useTemplateVariableStore}from"../../context";export function TemplateVariable({name:e}){var a;const l=null===(a=useTemplateVariable(e).definition)||void 0===a?void 0:a.kind;switch(l){case"TextVariable":return _jsx(TextVariable,{name:e});case"ListVariable":return _jsx(ListVariable,{name:e})}return _jsxs("div",{children:["Unsupported Variable Kind: $",l]})}function ListVariable({name:e}){var a,l,t,i;const r=useTemplateVariable(e),n=r.definition,{setVariableValue:o,loadTemplateVariable:s}=useTemplateVariableActions(),u=!0===(null==n?void 0:n.options.allowMultiple);useEffect((()=>{s(e)}),[e,s]);let d=null===(a=r.state)||void 0===a?void 0:a.value;return u&&!Array.isArray(d)&&(d=[]),_jsxs(Box,{display:"flex",children:[_jsxs(FormControl,{children:[_jsx(InputLabel,{id:e,children:e}),_jsx(Select,{id:e,label:e,value:d,onChange:a=>{o(e,a.target.value)},multiple:u,children:null===(t=null===(l=r.state)||void 0===l?void 0:l.options)||void 0===t?void 0:t.map((e=>_jsx(MenuItem,{value:e.value,children:e.label},e.value)))}),(null===(i=r.state)||void 0===i?void 0:i.loading)&&_jsx(LinearProgress,{})]}),_jsx(IconButton,{onClick:()=>s(e),children:_jsx(Reload,{})})]})}function TextVariable({name:e}){const{state:a}=useTemplateVariable(e),l=useTemplateVariableStore().setVariableValue,t=useRef(null);return _jsx(TextField,{ref:t,defaultValue:null==a?void 0:a.value,onBlur:a=>l(e,a.target.value),placeholder:e,label:e})}
+// 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 { useEffect, useMemo, useState } from 'react';
+import { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextField } from '@mui/material';
+import { usePlugin, DEFAULT_ALL_VALUE, useTemplateVariableValues, useDatasourceStore } from '@perses-dev/plugin-system';
+import { useQuery } from '@tanstack/react-query';
+import { useTemplateVariable, useTemplateVariableActions } from '../../context';
+export function TemplateVariable({ name  }) {
+    var ref;
+    const ctx = useTemplateVariable(name);
+    const kind = (ref = ctx.definition) === null || ref === void 0 ? void 0 : ref.kind;
+    switch(kind){
+        case 'TextVariable':
+            return /*#__PURE__*/ _jsx(TextVariable, {
+                name: name
+            });
+        case 'ListVariable':
+            return /*#__PURE__*/ _jsx(ListVariable, {
+                name: name
+            });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            "Unsupported Variable Kind: $",
+            kind
+        ]
+    });
+}
+/**
+ * Returns a serialized string of the current state of variable values.
+ */ function getVariableValuesKey(v) {
+    return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
+}
+function ListVariable({ name  }) {
+    var ref, ref1, ref2, ref3;
+    const ctx = useTemplateVariable(name);
+    const definition = ctx.definition;
+    const { data: variablePlugin  } = usePlugin('Variable', definition.spec.plugin.kind);
+    const { setVariableValue , setVariableLoading , setVariableOptions  } = useTemplateVariableActions();
+    const datasourceStore = useDatasourceStore();
+    const spec = definition.spec.plugin.spec;
+    let dependsOnVariables;
+    if (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.dependsOn) {
+        dependsOnVariables = variablePlugin.dependsOn(spec);
+    }
+    const variables = useTemplateVariableValues(dependsOnVariables);
+    const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_multiple) === true;
+    const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_all_value) === true;
+    var ref4;
+    const label = (ref4 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.label) !== null && ref4 !== void 0 ? ref4 : name;
+    let waitToLoad = false;
+    if (dependsOnVariables) {
+        waitToLoad = dependsOnVariables.some((v)=>{
+            var ref;
+            return (ref = variables[v]) === null || ref === void 0 ? void 0 : ref.loading;
+        });
+    }
+    const variablesValueKey = getVariableValuesKey(variables);
+    const variablesOptionsQuery = useQuery([
+        name,
+        definition,
+        variablesValueKey
+    ], async ()=>{
+        const resp = await (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.getVariableOptions(spec, {
+            datasourceStore,
+            variables
+        }));
+        var ref;
+        return (ref = resp === null || resp === void 0 ? void 0 : resp.data) !== null && ref !== void 0 ? ref : [];
+    }, {
+        enabled: !!variablePlugin || waitToLoad
+    });
+    useEffect(()=>{
+        setVariableLoading(name, variablesOptionsQuery.isFetching);
+        if (variablesOptionsQuery.data) {
+            setVariableOptions(name, variablesOptionsQuery.data);
+        }
+    }, [
+        variablesOptionsQuery,
+        name,
+        setVariableLoading,
+        setVariableOptions
+    ]);
+    let value = (ref1 = ctx.state) === null || ref1 === void 0 ? void 0 : ref1.value;
+    const options = (ref2 = ctx.state) === null || ref2 === void 0 ? void 0 : ref2.options;
+    const loading = (ref3 = ctx.state) === null || ref3 === void 0 ? void 0 : ref3.loading;
+    // Make sure value is an array if allowMultiple is true
+    if (allowMultiple && !Array.isArray(value)) {
+        value = typeof value === 'string' ? [
+            value
+        ] : [];
+    }
+    const finalOptions = useMemo(()=>{
+        let computedOptions = options ? [
+            ...options
+        ] : [];
+        // Add the all value if it's allowed
+        if (allowAllValue) {
+            computedOptions = [
+                {
+                    value: DEFAULT_ALL_VALUE,
+                    label: 'All'
+                },
+                ...computedOptions
+            ];
+        }
+        return computedOptions;
+    }, [
+        options,
+        allowAllValue
+    ]);
+    useEffect(()=>{
+        const firstOption = finalOptions === null || finalOptions === void 0 ? void 0 : finalOptions[0];
+        const valueIsInOptions = Boolean(finalOptions.find((v)=>{
+            if (allowMultiple) {
+                return value.includes(v.value);
+            }
+            return value === v.value;
+        }));
+        // If there is no value but there are options, set the value to the first option.
+        if (!value && firstOption) {
+            setVariableValue(name, firstOption.value);
+        }
+        // If there is a value but it's not in the options, select the first value or set to null
+        if (value && !valueIsInOptions && !definition.spec.default_value) {
+            setVariableValue(name, (firstOption === null || firstOption === void 0 ? void 0 : firstOption.value) || null);
+        }
+    }, [
+        finalOptions,
+        setVariableValue,
+        value,
+        name,
+        allowMultiple
+    ]);
+    return /*#__PURE__*/ _jsx(Box, {
+        display: 'flex',
+        children: /*#__PURE__*/ _jsxs(FormControl, {
+            children: [
+                /*#__PURE__*/ _jsx(InputLabel, {
+                    id: name,
+                    children: label
+                }),
+                /*#__PURE__*/ _jsxs(Select, {
+                    sx: {
+                        minWidth: 100,
+                        maxWidth: 250
+                    },
+                    id: name,
+                    label: name,
+                    value: value !== null && value !== void 0 ? value : '',
+                    onChange: (e)=>{
+                        // Must be selected
+                        if (e.target.value === null || e.target.value.length === 0) {
+                            if (allowAllValue) {
+                                setVariableValue(name, DEFAULT_ALL_VALUE);
+                            }
+                            return;
+                        }
+                        setVariableValue(name, e.target.value);
+                    },
+                    multiple: allowMultiple,
+                    children: [
+                        loading && /*#__PURE__*/ _jsx(MenuItem, {
+                            value: "loading",
+                            disabled: true,
+                            children: "Loading"
+                        }),
+                        finalOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                value: option.value,
+                                children: option.label
+                            }, option.value))
+                    ]
+                }),
+                loading && /*#__PURE__*/ _jsx(LinearProgress, {})
+            ]
+        })
+    });
+}
+function TextVariable({ name  }) {
+    const { state  } = useTemplateVariable(name);
+    var ref;
+    const [tempValue, setTempValue] = useState((ref = state === null || state === void 0 ? void 0 : state.value) !== null && ref !== void 0 ? ref : '');
+    const { setVariableValue  } = useTemplateVariableActions();
+    useEffect(()=>{
+        var ref;
+        setTempValue((ref = state === null || state === void 0 ? void 0 : state.value) !== null && ref !== void 0 ? ref : '');
+    }, [
+        state === null || state === void 0 ? void 0 : state.value
+    ]);
+    return /*#__PURE__*/ _jsx(TextField, {
+        value: tempValue,
+        onChange: (e)=>setTempValue(e.target.value),
+        onBlur: ()=>setVariableValue(name, tempValue),
+        placeholder: name,
+        label: name
+    });
+}
+
+//# sourceMappingURL=Variable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Variables/Variable.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 { useEffect, useMemo, useState } from 'react';\nimport { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextField } from '@mui/material';\nimport { VariableName, ListVariableDefinition, VariableValue } from '@perses-dev/core';\nimport {\n  usePlugin,\n  DEFAULT_ALL_VALUE,\n  useTemplateVariableValues,\n  VariableStateMap,\n  useDatasourceStore,\n} from '@perses-dev/plugin-system';\nimport { useQuery } from '@tanstack/react-query';\nimport { useTemplateVariable, useTemplateVariableActions } from '../../context';\n\ntype TemplateVariableProps = {\n  name: VariableName;\n};\n\nexport function TemplateVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} />;\n    case 'ListVariable':\n      return <ListVariable name={name} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\n/**\n * Returns a serialized string of the current state of variable values.\n */\nfunction getVariableValuesKey(v: VariableStateMap) {\n  return Object.values(v)\n    .map((v) => JSON.stringify(v.value))\n    .join(',');\n}\n\nfunction ListVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\n  const definition = ctx.definition as ListVariableDefinition;\n  const { data: variablePlugin } = usePlugin('Variable', definition.spec.plugin.kind);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useTemplateVariableActions();\n  const datasourceStore = useDatasourceStore();\n\n  const spec = definition.spec.plugin.spec;\n\n  let dependsOnVariables: string[] | undefined;\n  if (variablePlugin?.dependsOn) {\n    dependsOnVariables = variablePlugin.dependsOn(spec);\n  }\n\n  const variables = useTemplateVariableValues(dependsOnVariables);\n  const allowMultiple = definition?.spec.allow_multiple === true;\n  const allowAllValue = definition?.spec.allow_all_value === true;\n  const label = definition?.spec.display?.label ?? name;\n\n  let waitToLoad = false;\n  if (dependsOnVariables) {\n    waitToLoad = dependsOnVariables.some((v) => variables[v]?.loading);\n  }\n\n  const variablesValueKey = getVariableValuesKey(variables);\n\n  const variablesOptionsQuery = useQuery(\n    [name, definition, variablesValueKey],\n    async () => {\n      const resp = await variablePlugin?.getVariableOptions(spec, { datasourceStore, variables });\n      return resp?.data ?? [];\n    },\n    { enabled: !!variablePlugin || waitToLoad }\n  );\n\n  useEffect(() => {\n    setVariableLoading(name, variablesOptionsQuery.isFetching);\n    if (variablesOptionsQuery.data) {\n      setVariableOptions(name, variablesOptionsQuery.data);\n    }\n  }, [variablesOptionsQuery, name, setVariableLoading, setVariableOptions]);\n\n  let value = ctx.state?.value;\n  const options = ctx.state?.options;\n  const loading = ctx.state?.loading;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  const finalOptions = useMemo(() => {\n    let computedOptions = options ? [...options] : [];\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [options, allowAllValue]);\n\n  useEffect(() => {\n    const firstOption = finalOptions?.[0];\n    const valueIsInOptions = Boolean(\n      finalOptions.find((v) => {\n        if (allowMultiple) {\n          return (value as string[]).includes(v.value);\n        }\n        return value === v.value;\n      })\n    );\n\n    // If there is no value but there are options, set the value to the first option.\n    if (!value && firstOption) {\n      setVariableValue(name, firstOption.value);\n    }\n\n    // If there is a value but it's not in the options, select the first value or set to null\n    if (value && !valueIsInOptions && !definition.spec.default_value) {\n      setVariableValue(name, firstOption?.value || null);\n    }\n  }, [finalOptions, setVariableValue, value, name, allowMultiple]);\n\n  return (\n    <Box display={'flex'}>\n      <FormControl>\n        <InputLabel id={name}>{label}</InputLabel>\n        <Select\n          sx={{ minWidth: 100, maxWidth: 250 }}\n          id={name}\n          label={name}\n          value={value ?? ''}\n          onChange={(e) => {\n            // Must be selected\n            if (e.target.value === null || e.target.value.length === 0) {\n              if (allowAllValue) {\n                setVariableValue(name, DEFAULT_ALL_VALUE);\n              }\n              return;\n            }\n            setVariableValue(name, e.target.value as VariableValue);\n          }}\n          multiple={allowMultiple}\n        >\n          {loading && (\n            <MenuItem value=\"loading\" disabled>\n              Loading\n            </MenuItem>\n          )}\n          {finalOptions.map((option) => (\n            <MenuItem key={option.value} value={option.value}>\n              {option.label}\n            </MenuItem>\n          ))}\n        </Select>\n        {loading && <LinearProgress />}\n      </FormControl>\n    </Box>\n  );\n}\n\nfunction TextVariable({ name }: TemplateVariableProps) {\n  const { state } = useTemplateVariable(name);\n  const [tempValue, setTempValue] = useState(state?.value ?? '');\n  const { setVariableValue } = useTemplateVariableActions();\n\n  useEffect(() => {\n    setTempValue(state?.value ?? '');\n  }, [state?.value]);\n\n  return (\n    <TextField\n      value={tempValue}\n      onChange={(e) => setTempValue(e.target.value)}\n      onBlur={() => setVariableValue(name, tempValue)}\n      placeholder={name}\n      label={name}\n    />\n  );\n}\n"],"names":["useEffect","useMemo","useState","Select","FormControl","InputLabel","MenuItem","Box","LinearProgress","TextField","usePlugin","DEFAULT_ALL_VALUE","useTemplateVariableValues","useDatasourceStore","useQuery","useTemplateVariable","useTemplateVariableActions","TemplateVariable","name","ctx","kind","definition","TextVariable","ListVariable","div","getVariableValuesKey","v","Object","values","map","JSON","stringify","value","join","data","variablePlugin","spec","plugin","setVariableValue","setVariableLoading","setVariableOptions","datasourceStore","dependsOnVariables","dependsOn","variables","allowMultiple","allow_multiple","allowAllValue","allow_all_value","label","display","waitToLoad","some","loading","variablesValueKey","variablesOptionsQuery","resp","getVariableOptions","enabled","isFetching","state","options","Array","isArray","finalOptions","computedOptions","firstOption","valueIsInOptions","Boolean","find","includes","default_value","id","sx","minWidth","maxWidth","onChange","e","target","length","multiple","disabled","option","tempValue","setTempValue","onBlur","placeholder"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { VariableDefinition } from '@perses-dev/core';
+export declare function VariableEditor(props: {
+    variableDefinitions: VariableDefinition[];
+    onChange: (variableDefinitions: VariableDefinition[]) => void;
+    onCancel: () => void;
+}): JSX.Element;
+//# sourceMappingURL=VariableEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtD,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,eAkIA"}