@perses-dev/dashboards 0.10.0 → 0.12.0

package/dist/components/TimeRangeControls/TimeRangeControls.js

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

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

@@ -1 +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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"}
+{"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, useMemo } 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  isRelativeTimeRange,\n  toAbsoluteTimeRange,\n} from '@perses-dev/core';\nimport { useDashboardTimeRange } 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 } = useDashboardTimeRange();\n\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n  const anchorEl = useRef();\n\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(timeRange) ? toAbsoluteTimeRange(timeRange) : timeRange;\n  }, [timeRange]);\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={convertedTimeRange}\n          onChange={(timeRange: AbsoluteTimeRange) => {\n            setTimeRange(timeRange);\n            setShowCustomDateSelector(false);\n          }}\n        />\n      </Popover>\n      <FormControl fullWidth>\n        <Box ref={anchorEl}>\n          <TimeRangeSelector\n            timeOptions={TIME_OPTIONS}\n            value={timeRange}\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              setShowCustomDateSelector(false);\n            }}\n            onCustomClick={() => {\n              setShowCustomDateSelector(true);\n            }}\n          />\n        </Box>\n      </FormControl>\n    </Stack>\n  );\n}\n"],"names":["useRef","useState","useMemo","Box","FormControl","Popover","Stack","AbsoluteTimePicker","TimeRangeSelector","isRelativeTimeRange","toAbsoluteTimeRange","useDashboardTimeRange","TIME_OPTIONS","value","pastDuration","display","TimeRangeControls","timeRange","setTimeRange","showCustomDateSelector","setShowCustomDateSelector","anchorEl","convertedTimeRange","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

@@ -11,38 +11,45 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
+import { generatePath } from 'react-router';
+import { createMemoryHistory } from 'history';
 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 { DashboardProvider, TimeRangeProvider } from '../../context';
 import { TimeRangeControls } from './TimeRangeControls';
+const history = createMemoryHistory({
+    initialEntries: [
+        generatePath('/dashboards/:id', {
+            id: 'test'
+        })
+    ]
+});
 describe('TimeRangeControls', ()=>{
     let initialState;
+    const testDefaultTimeRange = {
+        pastDuration: testDashboard.spec.duration
+    };
     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, {})
-                })
+        renderWithContext(/*#__PURE__*/ _jsx(DashboardProvider, {
+            initialState: initialState,
+            children: /*#__PURE__*/ _jsx(TimeRangeProvider, {
+                timeRange: testDefaultTimeRange,
+                children: /*#__PURE__*/ _jsx(TimeRangeControls, {})
             })
-        }));
+        }), undefined, history);
     };
     it('should render correct initial relative time shortcut', async ()=>{
         renderTimeRangeControls();
-        expect(screen.getByText('Last 1 day')).toBeInTheDocument();
+        expect(screen.getByText('Last 5 minutes')).toBeInTheDocument();
     });
+    // TODO: fix setTimeRange no-op, test query params
     it('should be able to select the first option', ()=>{
         renderTimeRangeControls();
         const dateButton = screen.getByRole('button');

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

@@ -1 +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"}
+{"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 { generatePath } from 'react-router';\nimport { createMemoryHistory } from 'history';\nimport userEvent from '@testing-library/user-event';\nimport { screen } from '@testing-library/react';\nimport { renderWithContext } from '../../test';\nimport testDashboard from '../../test/testDashboard';\nimport { DashboardProvider, DashboardStoreProps, TimeRangeProvider } from '../../context';\nimport { TimeRangeControls } from './TimeRangeControls';\n\nconst history = createMemoryHistory({\n  initialEntries: [generatePath('/dashboards/:id', { id: 'test' })],\n});\n\ndescribe('TimeRangeControls', () => {\n  let initialState: DashboardStoreProps;\n  const testDefaultTimeRange = { pastDuration: testDashboard.spec.duration };\n\n  beforeEach(() => {\n    initialState = {\n      dashboardSpec: testDashboard.spec,\n    };\n  });\n\n  const renderTimeRangeControls = () => {\n    renderWithContext(\n      <DashboardProvider initialState={initialState}>\n        <TimeRangeProvider timeRange={testDefaultTimeRange}>\n          <TimeRangeControls />\n        </TimeRangeProvider>\n      </DashboardProvider>,\n      undefined,\n      history\n    );\n  };\n\n  it('should render correct initial relative time shortcut', async () => {\n    renderTimeRangeControls();\n    expect(screen.getByText('Last 5 minutes')).toBeInTheDocument();\n  });\n\n  // TODO: fix setTimeRange no-op, test query params\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":["generatePath","createMemoryHistory","userEvent","screen","renderWithContext","testDashboard","DashboardProvider","TimeRangeProvider","TimeRangeControls","history","initialEntries","id","describe","initialState","testDefaultTimeRange","pastDuration","spec","duration","beforeEach","dashboardSpec","renderTimeRangeControls","timeRange","undefined","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,SAASA,YAAY,QAAQ,cAAc,CAAC;AAC5C,SAASC,mBAAmB,QAAQ,SAAS,CAAC;AAC9C,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,SAASC,iBAAiB,QAAQ,YAAY,CAAC;AAC/C,OAAOC,aAAa,MAAM,0BAA0B,CAAC;AACrD,SAASC,iBAAiB,EAAuBC,iBAAiB,QAAQ,eAAe,CAAC;AAC1F,SAASC,iBAAiB,QAAQ,qBAAqB,CAAC;AAExD,MAAMC,OAAO,GAAGR,mBAAmB,CAAC;IAClCS,cAAc,EAAE;QAACV,YAAY,CAAC,iBAAiB,EAAE;YAAEW,EAAE,EAAE,MAAM;SAAE,CAAC;KAAC;CAClE,CAAC,AAAC;AAEHC,QAAQ,CAAC,mBAAmB,EAAE,IAAM;IAClC,IAAIC,YAAY,AAAqB,AAAC;IACtC,MAAMC,oBAAoB,GAAG;QAAEC,YAAY,EAAEV,aAAa,CAACW,IAAI,CAACC,QAAQ;KAAE,AAAC;IAE3EC,UAAU,CAAC,IAAM;QACfL,YAAY,GAAG;YACbM,aAAa,EAAEd,aAAa,CAACW,IAAI;SAClC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAMI,uBAAuB,GAAG,IAAM;QACpChB,iBAAiB,eACf,KAACE,iBAAiB;YAACO,YAAY,EAAEA,YAAY;sBAC3C,cAAA,KAACN,iBAAiB;gBAACc,SAAS,EAAEP,oBAAoB;0BAChD,cAAA,KAACN,iBAAiB,KAAG;cACH;UACF,EACpBc,SAAS,EACTb,OAAO,CACR,CAAC;IACJ,CAAC,AAAC;IAEFc,EAAE,CAAC,sDAAsD,EAAE,UAAY;QACrEH,uBAAuB,EAAE,CAAC;QAC1BI,MAAM,CAACrB,MAAM,CAACsB,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,kDAAkD;IAClDH,EAAE,CAAC,2CAA2C,EAAE,IAAM;QACpDH,uBAAuB,EAAE,CAAC;QAC1B,MAAMO,UAAU,GAAGxB,MAAM,CAACyB,SAAS,CAAC,QAAQ,CAAC,AAAC;QAC9C1B,SAAS,CAAC2B,KAAK,CAACF,UAAU,CAAC,CAAC;QAC5B,MAAMG,WAAW,GAAG3B,MAAM,CAACyB,SAAS,CAAC,QAAQ,EAAE;YAAEG,IAAI,EAAE,gBAAgB;SAAE,CAAC,AAAC;QAC3E7B,SAAS,CAAC2B,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/Variables/Variable.js

@@ -146,6 +146,7 @@ function ListVariable({ name  }) {
     return /*#__PURE__*/ _jsx(Box, {
         display: 'flex',
         children: /*#__PURE__*/ _jsxs(FormControl, {
+            fullWidth: true,
             children: [
                 /*#__PURE__*/ _jsx(InputLabel, {
                     id: name,

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

@@ -1 +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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"}
+{"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 fullWidth>\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","fullWidth","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.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;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"}
+{"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

@@ -16,6 +16,8 @@ import { Button, Stack, Box, TableContainer, TableBody, TableRow, TableCell, Tab
 import { useImmer } from 'use-immer';
 import PencilIcon from 'mdi-material-ui/Pencil';
 import TrashIcon from 'mdi-material-ui/TrashCan';
+import ArrowUp from 'mdi-material-ui/ArrowUp';
+import ArrowDown from 'mdi-material-ui/ArrowDown';
 import { VariableEditForm } from './VariableEditorForm';
 export function VariableEditor(props) {
     const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);
@@ -51,6 +53,27 @@ export function VariableEditor(props) {
             v.spec.display.hidden = visible === false;
         });
     };
+    const changeVariableOrder = (index, direction)=>{
+        setVariableDefinitions((draft)=>{
+            if (direction === 'up') {
+                const prevElement = draft[index - 1];
+                const currentElement = draft[index];
+                if (index === 0 || !prevElement || !currentElement) {
+                    return;
+                }
+                draft[index - 1] = currentElement;
+                draft[index] = prevElement;
+            } else {
+                const nextElement = draft[index + 1];
+                const currentElement1 = draft[index];
+                if (index === draft.length - 1 || !nextElement || !currentElement1) {
+                    return;
+                }
+                draft[index + 1] = currentElement1;
+                draft[index] = nextElement;
+            }
+        });
+    };
     return /*#__PURE__*/ _jsxs(Box, {
         p: 4,
         children: [
@@ -81,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"
                             })
                         ]
                     }),
@@ -160,6 +184,16 @@ export function VariableEditor(props) {
                                                         /*#__PURE__*/ _jsxs(TableCell, {
                                                             align: "right",
                                                             children: [
+                                                                /*#__PURE__*/ _jsx(IconButton, {
+                                                                    onClick: ()=>changeVariableOrder(idx, 'up'),
+                                                                    disabled: idx === 0,
+                                                                    children: /*#__PURE__*/ _jsx(ArrowUp, {})
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(IconButton, {
+                                                                    onClick: ()=>changeVariableOrder(idx, 'down'),
+                                                                    disabled: idx === variableDefinitions.length - 1,
+                                                                    children: /*#__PURE__*/ _jsx(ArrowDown, {})
+                                                                }),
                                                                 /*#__PURE__*/ _jsx(IconButton, {
                                                                     onClick: ()=>setVariableEditIdx(idx),
                                                                     children: /*#__PURE__*/ _jsx(PencilIcon, {})

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';\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  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={() => 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","VariableEditForm","VariableEditor","props","variableDefinitions","setVariableDefinitions","variableEditIdx","setVariableEditIdx","currentEditingVariableDefinition","removeVariable","index","draft","splice","addVariable","push","kind","spec","name","value","toggleVariableVisibility","visible","v","display","hidden","p","variant","mb","initialVariableDefinition","onChange","definition","onCancel","direction","spacing","justifyContent","onClick","disabled","component","sx","minWidth","aria-label","align","map","idx","scope","checked","e","target","fontWeight"],"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,QAAQ,QAAQ,OAAO,CAAC;AACjC,SACEC,MAAM,EACNC,KAAK,EACLC,GAAG,EACHC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,MAAM,EACNC,UAAU,EACVC,UAAU,QACL,eAAe,CAAC;AAEvB,SAASC,QAAQ,QAAQ,WAAW,CAAC;AACrC,OAAOC,UAAU,MAAM,wBAAwB,CAAC;AAChD,OAAOC,SAAS,MAAM,0BAA0B,CAAC;AAEjD,SAASC,gBAAgB,QAAQ,sBAAsB,CAAC;AAExD,OAAO,SAASC,cAAc,CAACC,KAI9B,EAAE;IACD,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGP,QAAQ,CAACK,KAAK,CAACC,mBAAmB,CAAC,AAAC;IAC1F,MAAM,CAACE,eAAe,EAAEC,kBAAkB,CAAC,GAAGvB,QAAQ,CAAgB,IAAI,CAAC,AAAC;IAE5E,MAAMwB,gCAAgC,GAAG,OAAOF,eAAe,KAAK,QAAQ,IAAIF,mBAAmB,CAACE,eAAe,CAAC,AAAC;IAErH,MAAMG,cAAc,GAAG,CAACC,KAAa,GAAK;QACxCL,sBAAsB,CAAC,CAACM,KAAK,GAAK;YAChCA,KAAK,CAACC,MAAM,CAACF,KAAK,EAAE,CAAC,CAAC,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC,AAAC;IAEF,MAAMG,WAAW,GAAG,IAAM;QACxBR,sBAAsB,CAAC,CAACM,KAAK,GAAK;YAChCA,KAAK,CAACG,IAAI,CAAC;gBACTC,IAAI,EAAE,cAAc;gBACpBC,IAAI,EAAE;oBACJC,IAAI,EAAE,aAAa;oBACnBC,KAAK,EAAE,EAAE;iBACV;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,AAAC;IAEF,MAAMC,wBAAwB,GAAG,CAACT,KAAa,EAAEU,OAAgB,GAAK;QACpEf,sBAAsB,CAAC,CAACM,KAAK,GAAK;YAChC,MAAMU,CAAC,GAAGV,KAAK,CAACD,KAAK,CAAC,AAAC;YACvB,IAAI,CAACW,CAAC,EAAE;gBACN,OAAO;YACT,CAAC;YACD,IAAI,CAACA,CAAC,CAACL,IAAI,CAACM,OAAO,EAAE;gBACnBD,CAAC,CAACL,IAAI,CAACM,OAAO,GAAG;oBACfC,MAAM,EAAE,KAAK;iBACd,CAAC;YACJ,CAAC;YACDF,CAAC,CAACL,IAAI,CAACM,OAAO,CAACC,MAAM,GAAGH,OAAO,KAAK,KAAK,CAAC;QAC5C,CAAC,CAAC,CAAC;IACL,CAAC,AAAC;IAEF,qBACE,MAACjC,GAAG;QAACqC,CAAC,EAAE,CAAC;;YACNhB,gCAAgC,kBAC/B;;kCACE,KAACZ,UAAU;wBAAC6B,OAAO,EAAC,IAAI;wBAACC,EAAE,EAAE,CAAC;kCAAE,eAEhC;sBAAa;kCACb,KAACzB,gBAAgB;wBACf0B,yBAAyB,EAAEnB,gCAAgC;wBAC3DoB,QAAQ,EAAE,CAACC,UAAU,GAAK;4BACxBxB,sBAAsB,CAAC,CAACM,KAAK,GAAK;gCAChCA,KAAK,CAACL,eAAe,CAAC,GAAGuB,UAAU,CAAC;gCACpCtB,kBAAkB,CAAC,IAAI,CAAC,CAAC;4BAC3B,CAAC,CAAC,CAAC;wBACL,CAAC;wBACDuB,QAAQ,EAAE,IAAMvB,kBAAkB,CAAC,IAAI,CAAC;sBACxC;;cACD,AACJ;YACA,CAACC,gCAAgC,kBAChC;;kCACE,MAACtB,KAAK;wBAAC6C,SAAS,EAAC,KAAK;wBAACC,OAAO,EAAE,CAAC;wBAAEC,cAAc,EAAC,KAAK;;0CACrD,KAAChD,MAAM;gCACLiD,OAAO,EAAE,IAAM;oCACb/B,KAAK,CAAC2B,QAAQ,EAAE,CAAC;gCACnB,CAAC;0CACF,QAED;8BAAS;0CACT,KAAC7C,MAAM;gCACLkD,QAAQ,EAAEhC,KAAK,CAACC,mBAAmB,KAAKA,mBAAmB;gCAC3DqB,OAAO,EAAC,WAAW;gCACnBS,OAAO,EAAE,IAAM;oCACb/B,KAAK,CAACyB,QAAQ,CAACxB,mBAAmB,CAAC,CAAC;gCACtC,CAAC;0CACF,eAED;8BAAS;;sBACH;kCACR,KAACR,UAAU;wBAAC6B,OAAO,EAAC,IAAI;wBAACC,EAAE,EAAE,CAAC;kCAAE,eAEhC;sBAAa;kCACb,MAACxC,KAAK;wBAAC8C,OAAO,EAAE,CAAC;;0CACf,KAAC5C,cAAc;gCAACgD,SAAS,EAAE3C,KAAK;0CAC9B,cAAA,MAACD,KAAK;oCAAC6C,EAAE,EAAE;wCAAEC,QAAQ,EAAE,GAAG;qCAAE;oCAAEC,YAAU,EAAC,cAAc;;sDACrD,KAAC7C,SAAS;sDACR,cAAA,MAACJ,QAAQ;;kEACP,KAACC,SAAS;kEAAC,YAAU;sDAAY;kEACjC,KAACA,SAAS;kEAAC,eAAa;sDAAY;kEACpC,KAACA,SAAS;kEAAC,eAAa;sDAAY;kEACpC,KAACA,SAAS;wDAACiD,KAAK,EAAC,OAAO;kEAAC,QAAM;sDAAY;;8CAClC;0CACD;sDACZ,KAACnD,SAAS;sDACPe,mBAAmB,CAACqC,GAAG,CAAC,CAACpB,CAAC,EAAEqB,GAAG;oDAIfrB,GAAc;8DAH7B,OAAA,MAAC/B,QAAQ;;sEACP,KAACC,SAAS;4DAAC6C,SAAS,EAAC,IAAI;4DAACO,KAAK,EAAC,KAAK;sEACnC,cAAA,KAAChD,MAAM;gEACLiD,OAAO,EAAEvB,CAAAA,CAAAA,GAAc,GAAdA,CAAC,CAACL,IAAI,CAACM,OAAO,cAAdD,GAAc,WAAQ,GAAtBA,KAAAA,CAAsB,GAAtBA,GAAc,CAAEE,MAAM,CAAA,KAAK,IAAI;gEACxCK,QAAQ,EAAE,CAACiB,CAAC,GAAK;oEACf1B,wBAAwB,CAACuB,GAAG,EAAEG,CAAC,CAACC,MAAM,CAACF,OAAO,CAAC,CAAC;gEAClD,CAAC;8DACD;0DACQ;sEACZ,KAACrD,SAAS;4DAAC6C,SAAS,EAAC,IAAI;4DAACO,KAAK,EAAC,KAAK;4DAACN,EAAE,EAAE;gEAAEU,UAAU,EAAE,MAAM;6DAAE;sEAC7D1B,CAAC,CAACL,IAAI,CAACC,IAAI;0DACF;sEACZ,KAAC1B,SAAS;sEAAE8B,CAAC,CAACN,IAAI;0DAAa;sEAC/B,MAACxB,SAAS;4DAACiD,KAAK,EAAC,OAAO;;8EACtB,KAAC3C,UAAU;oEAACqC,OAAO,EAAE,IAAM3B,kBAAkB,CAACmC,GAAG,CAAC;8EAChD,cAAA,KAAC3C,UAAU,KAAG;kEACH;8EACb,KAACF,UAAU;oEAACqC,OAAO,EAAE,IAAMzB,cAAc,CAACiC,GAAG,CAAC;8EAC5C,cAAA,KAAC1C,SAAS,KAAG;kEACF;;0DACH;;mDApBCqB,CAAC,CAACL,IAAI,CAACC,IAAI,CAqBf,CAAA;6CACZ,CAAC;0CACQ;;kCACN;8BACO;0CACjB,KAAC9B,GAAG;gCAACmC,OAAO,EAAC,MAAM;0CACjB,cAAA,KAACrC,MAAM;oCAACiD,OAAO,EAAErB,WAAW;oCAAEY,OAAO,EAAC,WAAW;8CAAC,kBAElD;kCAAS;8BACL;;sBACA;;cACP,AACJ;;MACG,CACN;AACJ,CAAC"}
+{"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":"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"}
+{"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/components/Variables/VariableList.js

@@ -26,7 +26,6 @@ export function TemplateVariableList() {
     const showVariables = isEditMode ? showVariablesInEditMode : true;
     const { setVariableDefinitions  } = useTemplateVariableActions();
     return /*#__PURE__*/ _jsxs(Box, {
-        m: 2,
         children: [
             /*#__PURE__*/ _jsx(Drawer, {
                 anchor: 'right',

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/VariableList.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 { Button, Stack, Box, Drawer } from '@mui/material';\nimport EyeIcon from 'mdi-material-ui/Eye';\nimport PencilIcon from 'mdi-material-ui/Pencil';\n\nimport { useTemplateVariableDefinitions, useEditMode, useTemplateVariableActions } from '../../context';\nimport { TemplateVariable } from './Variable';\nimport { VariableEditor } from './VariableEditor';\n\nexport function TemplateVariableList() {\n  const [isEditing, setIsEditing] = useState(false);\n  const variableDefinitions = useTemplateVariableDefinitions();\n  const { isEditMode } = useEditMode();\n  const [showVariablesInEditMode, setShowVariablesInEditMode] = useState(true);\n  const showVariables = isEditMode ? showVariablesInEditMode : true;\n  const { setVariableDefinitions } = useTemplateVariableActions();\n\n  return (\n    <Box m={2}>\n      <Drawer anchor={'right'} open={isEditing}>\n        <VariableEditor\n          onCancel={() => {\n            setIsEditing(false);\n          }}\n          variableDefinitions={variableDefinitions}\n          onChange={(v) => {\n            setVariableDefinitions(v);\n            setIsEditing(false);\n          }}\n        />\n      </Drawer>\n      {isEditMode && (\n        <Box pb={2}>\n          <Button onClick={() => setShowVariablesInEditMode(!showVariablesInEditMode)} startIcon={<EyeIcon />}>\n            {showVariablesInEditMode ? 'Hide' : 'Show'} Variables\n          </Button>\n          <Button onClick={() => setIsEditing(true)} startIcon={<PencilIcon />}>\n            Edit Variables\n          </Button>\n        </Box>\n      )}\n      <Box display={'flex'} justifyContent=\"space-between\">\n        <Stack direction={'row'} spacing={2}>\n          {showVariables &&\n            variableDefinitions.map((v) => (\n              <Box key={v.spec.name} display={v.spec.display?.hidden ? 'none' : undefined}>\n                <TemplateVariable key={v.spec.name} name={v.spec.name} />\n              </Box>\n            ))}\n        </Stack>\n      </Box>\n    </Box>\n  );\n}\n"],"names":["useState","Button","Stack","Box","Drawer","EyeIcon","PencilIcon","useTemplateVariableDefinitions","useEditMode","useTemplateVariableActions","TemplateVariable","VariableEditor","TemplateVariableList","isEditing","setIsEditing","variableDefinitions","isEditMode","showVariablesInEditMode","setShowVariablesInEditMode","showVariables","setVariableDefinitions","m","anchor","open","onCancel","onChange","v","pb","onClick","startIcon","display","justifyContent","direction","spacing","map","spec","hidden","undefined","name"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/VariableList.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 { Button, Stack, Box, Drawer } from '@mui/material';\nimport EyeIcon from 'mdi-material-ui/Eye';\nimport PencilIcon from 'mdi-material-ui/Pencil';\n\nimport { useTemplateVariableDefinitions, useEditMode, useTemplateVariableActions } from '../../context';\nimport { TemplateVariable } from './Variable';\nimport { VariableEditor } from './VariableEditor';\n\nexport function TemplateVariableList() {\n  const [isEditing, setIsEditing] = useState(false);\n  const variableDefinitions = useTemplateVariableDefinitions();\n  const { isEditMode } = useEditMode();\n  const [showVariablesInEditMode, setShowVariablesInEditMode] = useState(true);\n  const showVariables = isEditMode ? showVariablesInEditMode : true;\n  const { setVariableDefinitions } = useTemplateVariableActions();\n\n  return (\n    <Box>\n      <Drawer anchor={'right'} open={isEditing}>\n        <VariableEditor\n          onCancel={() => {\n            setIsEditing(false);\n          }}\n          variableDefinitions={variableDefinitions}\n          onChange={(v) => {\n            setVariableDefinitions(v);\n            setIsEditing(false);\n          }}\n        />\n      </Drawer>\n      {isEditMode && (\n        <Box pb={2}>\n          <Button onClick={() => setShowVariablesInEditMode(!showVariablesInEditMode)} startIcon={<EyeIcon />}>\n            {showVariablesInEditMode ? 'Hide' : 'Show'} Variables\n          </Button>\n          <Button onClick={() => setIsEditing(true)} startIcon={<PencilIcon />}>\n            Edit Variables\n          </Button>\n        </Box>\n      )}\n      <Box display={'flex'} justifyContent=\"space-between\">\n        <Stack direction={'row'} spacing={2}>\n          {showVariables &&\n            variableDefinitions.map((v) => (\n              <Box key={v.spec.name} display={v.spec.display?.hidden ? 'none' : undefined}>\n                <TemplateVariable key={v.spec.name} name={v.spec.name} />\n              </Box>\n            ))}\n        </Stack>\n      </Box>\n    </Box>\n  );\n}\n"],"names":["useState","Button","Stack","Box","Drawer","EyeIcon","PencilIcon","useTemplateVariableDefinitions","useEditMode","useTemplateVariableActions","TemplateVariable","VariableEditor","TemplateVariableList","isEditing","setIsEditing","variableDefinitions","isEditMode","showVariablesInEditMode","setShowVariablesInEditMode","showVariables","setVariableDefinitions","anchor","open","onCancel","onChange","v","pb","onClick","startIcon","display","justifyContent","direction","spacing","map","spec","hidden","undefined","name"],"mappings":"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"}