@perses-dev/dashboards 0.0.0-snapshot-time-chart-rewrite-4667058 → 0.0.0-snapshot-panel-extra-content-3-17f9c42

package/dist/views/ViewDashboard/DashboardApp.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box } from '@mui/material';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
-import { PanelDrawer, Dashboard, PanelGroupDialog, DeletePanelGroupDialog, DiscardChangesConfirmationDialog, DashboardToolbar, DeletePanelDialog, EditJsonDialog, SaveChangesConfirmationDialog } from '../../components';
+import { PanelDrawer, Dashboard, PanelGroupDialog, DeletePanelGroupDialog, DashboardDiscardChangesConfirmationDialog, DashboardToolbar, DeletePanelDialog, EditJsonDialog, SaveChangesConfirmationDialog } from '../../components';
 import { useDashboard, useDiscardChangesConfirmationDialog, useEditMode } from '../../context';
 export const DashboardApp = (props)=>{
     const { dashboardResource , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly ,  } = props;
@@ -89,7 +89,7 @@ export const DashboardApp = (props)=>{
                     /*#__PURE__*/ _jsx(PanelGroupDialog, {}),
                     /*#__PURE__*/ _jsx(DeletePanelGroupDialog, {}),
                     /*#__PURE__*/ _jsx(DeletePanelDialog, {}),
-                    /*#__PURE__*/ _jsx(DiscardChangesConfirmationDialog, {}),
+                    /*#__PURE__*/ _jsx(DashboardDiscardChangesConfirmationDialog, {}),
                     /*#__PURE__*/ _jsx(EditJsonDialog, {}),
                     /*#__PURE__*/ _jsx(SaveChangesConfirmationDialog, {})
                 ]

package/dist/views/ViewDashboard/DashboardApp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"sourcesContent":["// Copyright 2023 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 { Box } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport {\n  PanelDrawer,\n  Dashboard,\n  PanelGroupDialog,\n  DeletePanelGroupDialog,\n  DiscardChangesConfirmationDialog,\n  DashboardToolbar,\n  DeletePanelDialog,\n  EmptyDashboardProps,\n  EditJsonDialog,\n  SaveChangesConfirmationDialog,\n} from '../../components';\nimport { OnSaveDashboard, useDashboard, useDiscardChangesConfirmationDialog, useEditMode } from '../../context';\n\nexport interface DashboardAppProps {\n  emptyDashboardProps?: Partial<EmptyDashboardProps>;\n  dashboardResource: DashboardResource;\n  dashboardTitleComponent?: JSX.Element;\n  onSave?: OnSaveDashboard;\n  onDiscard?: (entity: DashboardResource) => void;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n}\n\nexport const DashboardApp = (props: DashboardAppProps) => {\n  const {\n    dashboardResource,\n    dashboardTitleComponent,\n    emptyDashboardProps,\n    onSave,\n    onDiscard,\n    initialVariableIsSticky,\n    isReadonly,\n  } = props;\n  const { setEditMode } = useEditMode();\n  const { dashboard, setDashboard } = useDashboard();\n  const [originalDashboard, setOriginalDashboard] = useState<DashboardResource | undefined>(undefined);\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const handleDiscardChanges = () => {\n    // Reset to the original spec and exit edit mode\n    if (originalDashboard) {\n      setDashboard(originalDashboard);\n    }\n    setEditMode(false);\n    closeDiscardChangesConfirmationDialog();\n    if (onDiscard) {\n      onDiscard(dashboard);\n    }\n  };\n\n  const onEditButtonClick = () => {\n    setEditMode(true);\n    setOriginalDashboard(dashboard);\n  };\n\n  const onCancelButtonClick = () => {\n    // check if dashboard has been modified\n    if (JSON.stringify(dashboard) === JSON.stringify(originalDashboard)) {\n      setEditMode(false);\n    } else {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          handleDiscardChanges();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n      });\n    }\n  };\n\n  return (\n    <Box\n      sx={{\n        flexGrow: 1,\n        overflowX: 'hidden',\n        overflowY: 'auto',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <DashboardToolbar\n        dashboardName={dashboardResource.metadata.name}\n        dashboardTitleComponent={dashboardTitleComponent}\n        initialVariableIsSticky={initialVariableIsSticky}\n        onSave={onSave}\n        isReadonly={isReadonly}\n        onEditButtonClick={onEditButtonClick}\n        onCancelButtonClick={onCancelButtonClick}\n      />\n      <Box sx={{ padding: (theme) => theme.spacing(2), height: '100%' }}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <Dashboard\n            emptyDashboardProps={{\n              onEditButtonClick,\n              ...emptyDashboardProps,\n            }}\n          />\n        </ErrorBoundary>\n        <PanelDrawer />\n        <PanelGroupDialog />\n        <DeletePanelGroupDialog />\n        <DeletePanelDialog />\n        <DiscardChangesConfirmationDialog />\n        <EditJsonDialog />\n        <SaveChangesConfirmationDialog />\n      </Box>\n    </Box>\n  );\n};\n"],"names":["useState","Box","ErrorAlert","ErrorBoundary","PanelDrawer","Dashboard","PanelGroupDialog","DeletePanelGroupDialog","DiscardChangesConfirmationDialog","DashboardToolbar","DeletePanelDialog","EditJsonDialog","SaveChangesConfirmationDialog","useDashboard","useDiscardChangesConfirmationDialog","useEditMode","DashboardApp","props","dashboardResource","dashboardTitleComponent","emptyDashboardProps","onSave","onDiscard","initialVariableIsSticky","isReadonly","setEditMode","dashboard","setDashboard","originalDashboard","setOriginalDashboard","undefined","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleDiscardChanges","onEditButtonClick","onCancelButtonClick","JSON","stringify","onDiscardChanges","onCancel","sx","flexGrow","overflowX","overflowY","display","flexDirection","dashboardName","metadata","name","padding","theme","spacing","height","FallbackComponent"],"mappings":"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"}
+{"version":3,"sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"sourcesContent":["// Copyright 2023 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 { Box } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport {\n  PanelDrawer,\n  Dashboard,\n  PanelGroupDialog,\n  DeletePanelGroupDialog,\n  DashboardDiscardChangesConfirmationDialog,\n  DashboardToolbar,\n  DeletePanelDialog,\n  EmptyDashboardProps,\n  EditJsonDialog,\n  SaveChangesConfirmationDialog,\n} from '../../components';\nimport { OnSaveDashboard, useDashboard, useDiscardChangesConfirmationDialog, useEditMode } from '../../context';\n\nexport interface DashboardAppProps {\n  emptyDashboardProps?: Partial<EmptyDashboardProps>;\n  dashboardResource: DashboardResource;\n  dashboardTitleComponent?: JSX.Element;\n  onSave?: OnSaveDashboard;\n  onDiscard?: (entity: DashboardResource) => void;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n}\n\nexport const DashboardApp = (props: DashboardAppProps) => {\n  const {\n    dashboardResource,\n    dashboardTitleComponent,\n    emptyDashboardProps,\n    onSave,\n    onDiscard,\n    initialVariableIsSticky,\n    isReadonly,\n  } = props;\n  const { setEditMode } = useEditMode();\n  const { dashboard, setDashboard } = useDashboard();\n  const [originalDashboard, setOriginalDashboard] = useState<DashboardResource | undefined>(undefined);\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const handleDiscardChanges = () => {\n    // Reset to the original spec and exit edit mode\n    if (originalDashboard) {\n      setDashboard(originalDashboard);\n    }\n    setEditMode(false);\n    closeDiscardChangesConfirmationDialog();\n    if (onDiscard) {\n      onDiscard(dashboard);\n    }\n  };\n\n  const onEditButtonClick = () => {\n    setEditMode(true);\n    setOriginalDashboard(dashboard);\n  };\n\n  const onCancelButtonClick = () => {\n    // check if dashboard has been modified\n    if (JSON.stringify(dashboard) === JSON.stringify(originalDashboard)) {\n      setEditMode(false);\n    } else {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          handleDiscardChanges();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n      });\n    }\n  };\n\n  return (\n    <Box\n      sx={{\n        flexGrow: 1,\n        overflowX: 'hidden',\n        overflowY: 'auto',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <DashboardToolbar\n        dashboardName={dashboardResource.metadata.name}\n        dashboardTitleComponent={dashboardTitleComponent}\n        initialVariableIsSticky={initialVariableIsSticky}\n        onSave={onSave}\n        isReadonly={isReadonly}\n        onEditButtonClick={onEditButtonClick}\n        onCancelButtonClick={onCancelButtonClick}\n      />\n      <Box sx={{ padding: (theme) => theme.spacing(2), height: '100%' }}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <Dashboard\n            emptyDashboardProps={{\n              onEditButtonClick,\n              ...emptyDashboardProps,\n            }}\n          />\n        </ErrorBoundary>\n        <PanelDrawer />\n        <PanelGroupDialog />\n        <DeletePanelGroupDialog />\n        <DeletePanelDialog />\n        <DashboardDiscardChangesConfirmationDialog />\n        <EditJsonDialog />\n        <SaveChangesConfirmationDialog />\n      </Box>\n    </Box>\n  );\n};\n"],"names":["useState","Box","ErrorAlert","ErrorBoundary","PanelDrawer","Dashboard","PanelGroupDialog","DeletePanelGroupDialog","DashboardDiscardChangesConfirmationDialog","DashboardToolbar","DeletePanelDialog","EditJsonDialog","SaveChangesConfirmationDialog","useDashboard","useDiscardChangesConfirmationDialog","useEditMode","DashboardApp","props","dashboardResource","dashboardTitleComponent","emptyDashboardProps","onSave","onDiscard","initialVariableIsSticky","isReadonly","setEditMode","dashboard","setDashboard","originalDashboard","setOriginalDashboard","undefined","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleDiscardChanges","onEditButtonClick","onCancelButtonClick","JSON","stringify","onDiscardChanges","onCancel","sx","flexGrow","overflowX","overflowY","display","flexDirection","dashboardName","metadata","name","padding","theme","spacing","height","FallbackComponent"],"mappings":"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"}

package/dist/views/ViewDashboard/ViewDashboard.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material';
-import { DatasourceStoreProviderProps } from '../../context';
+import { DatasourceStoreProviderProps, TemplateVariableProviderProps } from '../../context';
 import { DashboardAppProps } from './DashboardApp';
 export interface ViewDashboardProps extends Omit<BoxProps, 'children'>, DashboardAppProps {
     datasourceApi: DatasourceStoreProviderProps['datasourceApi'];
+    externalVariableDefinitions?: TemplateVariableProviderProps['externalVariableDefinitions'];
     isEditing?: boolean;
 }
 /**

package/dist/views/ViewDashboard/ViewDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewDashboard.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAG9C,OAAO,EAGL,4BAA4B,EAE7B,MAAM,eAAe,CAAC;AACvB,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEjE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,iBAAiB;IACvF,aAAa,EAAE,4BAA4B,CAAC,eAAe,CAAC,CAAC;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eA2DtD"}
+{"version":3,"file":"ViewDashboard.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9C,OAAO,EAGL,4BAA4B,EAE5B,6BAA6B,EAC9B,MAAM,eAAe,CAAC;AACvB,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEjE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,iBAAiB;IACvF,aAAa,EAAE,4BAA4B,CAAC,eAAe,CAAC,CAAC;IAC7D,2BAA2B,CAAC,EAAE,6BAA6B,CAAC,6BAA6B,CAAC,CAAC;IAC3F,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eA+DtD"}

package/dist/views/ViewDashboard/ViewDashboard.js

@@ -12,6 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
+import { DEFAULT_DASHBOARD_DURATION, DEFAULT_REFRESH_INTERVAL } from '@perses-dev/core';
 import { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';
 import { TimeRangeProvider, useInitialRefreshInterval, useInitialTimeRange } from '@perses-dev/plugin-system';
 import { TemplateVariableProvider, DashboardProvider, DatasourceStoreProvider } from '../../context';
@@ -19,14 +20,14 @@ import { DashboardApp } from './DashboardApp';
 /**
  * The View for displaying a Dashboard, along with the UI for selecting variable values.
  */ export function ViewDashboard(props) {
-    const { dashboardResource , datasourceApi , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly , isEditing , sx , ...others } = props;
+    const { dashboardResource , datasourceApi , externalVariableDefinitions , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly , isEditing , sx , ...others } = props;
     const { spec  } = dashboardResource;
     var _duration;
-    const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : '1h';
+    const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : DEFAULT_DASHBOARD_DURATION;
     var _refreshInterval;
-    const dashhboardRefreshInterval = (_refreshInterval = spec.refreshInterval) !== null && _refreshInterval !== void 0 ? _refreshInterval : '0s';
+    const dashboardRefreshInterval = (_refreshInterval = spec.refreshInterval) !== null && _refreshInterval !== void 0 ? _refreshInterval : DEFAULT_REFRESH_INTERVAL;
     const initialTimeRange = useInitialTimeRange(dashboardDuration);
-    const initialRefreshInterval = useInitialRefreshInterval(dashhboardRefreshInterval);
+    const initialRefreshInterval = useInitialRefreshInterval(dashboardRefreshInterval);
     return /*#__PURE__*/ _jsx(DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
@@ -41,6 +42,7 @@ import { DashboardApp } from './DashboardApp';
                 enabledURLParams: true,
                 children: /*#__PURE__*/ _jsx(TemplateVariableProvider, {
                     initialVariableDefinitions: spec.variables,
+                    externalVariableDefinitions: externalVariableDefinitions,
                     children: /*#__PURE__*/ _jsx(Box, {
                         sx: combineSx({
                             display: 'flex',

package/dist/views/ViewDashboard/ViewDashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"sourcesContent":["// Copyright 2023 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 { Box, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';\nimport { TimeRangeProvider, useInitialRefreshInterval, useInitialTimeRange } from '@perses-dev/plugin-system';\nimport {\n  TemplateVariableProvider,\n  DashboardProvider,\n  DatasourceStoreProviderProps,\n  DatasourceStoreProvider,\n} from '../../context';\nimport { DashboardApp, DashboardAppProps } from './DashboardApp';\n\nexport interface ViewDashboardProps extends Omit<BoxProps, 'children'>, DashboardAppProps {\n  datasourceApi: DatasourceStoreProviderProps['datasourceApi'];\n  isEditing?: boolean;\n}\n\n/**\n * The View for displaying a Dashboard, along with the UI for selecting variable values.\n */\nexport function ViewDashboard(props: ViewDashboardProps) {\n  const {\n    dashboardResource,\n    datasourceApi,\n    dashboardTitleComponent,\n    emptyDashboardProps,\n    onSave,\n    onDiscard,\n    initialVariableIsSticky,\n    isReadonly,\n    isEditing,\n    sx,\n    ...others\n  } = props;\n  const { spec } = dashboardResource;\n  const dashboardDuration = spec.duration ?? '1h';\n  const dashhboardRefreshInterval = spec.refreshInterval ?? '0s';\n  const initialTimeRange = useInitialTimeRange(dashboardDuration);\n  const initialRefreshInterval = useInitialRefreshInterval(dashhboardRefreshInterval);\n\n  return (\n    <DatasourceStoreProvider dashboardResource={dashboardResource} datasourceApi={datasourceApi}>\n      <DashboardProvider initialState={{ dashboardResource, isEditMode: !!isEditing }}>\n        <TimeRangeProvider\n          initialTimeRange={initialTimeRange}\n          initialRefreshInterval={initialRefreshInterval}\n          enabledURLParams={true}\n        >\n          <TemplateVariableProvider initialVariableDefinitions={spec.variables}>\n            <Box\n              sx={combineSx(\n                {\n                  display: 'flex',\n                  width: '100%',\n                  height: '100%',\n                  position: 'relative',\n                  overflow: 'hidden',\n                },\n                sx\n              )}\n              {...others}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <DashboardApp\n                  dashboardResource={dashboardResource}\n                  dashboardTitleComponent={dashboardTitleComponent}\n                  emptyDashboardProps={emptyDashboardProps}\n                  onSave={onSave}\n                  onDiscard={onDiscard}\n                  initialVariableIsSticky={initialVariableIsSticky}\n                  isReadonly={isReadonly}\n                />\n              </ErrorBoundary>\n            </Box>\n          </TemplateVariableProvider>\n        </TimeRangeProvider>\n      </DashboardProvider>\n    </DatasourceStoreProvider>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","combineSx","TimeRangeProvider","useInitialRefreshInterval","useInitialTimeRange","TemplateVariableProvider","DashboardProvider","DatasourceStoreProvider","DashboardApp","ViewDashboard","props","dashboardResource","datasourceApi","dashboardTitleComponent","emptyDashboardProps","onSave","onDiscard","initialVariableIsSticky","isReadonly","isEditing","sx","others","spec","dashboardDuration","duration","dashhboardRefreshInterval","refreshInterval","initialTimeRange","initialRefreshInterval","initialState","isEditMode","enabledURLParams","initialVariableDefinitions","variables","display","width","height","position","overflow","FallbackComponent"],"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,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,QAAQ,wBAAwB,CAAC;AAC9E,SAASC,iBAAiB,EAAEC,yBAAyB,EAAEC,mBAAmB,QAAQ,2BAA2B,CAAC;AAC9G,SACEC,wBAAwB,EACxBC,iBAAiB,EAEjBC,uBAAuB,QAClB,eAAe,CAAC;AACvB,SAASC,YAAY,QAA2B,gBAAgB,CAAC;AAOjE;;CAEC,GACD,OAAO,SAASC,aAAa,CAACC,KAAyB,EAAE;IACvD,MAAM,EACJC,iBAAiB,CAAA,EACjBC,aAAa,CAAA,EACbC,uBAAuB,CAAA,EACvBC,mBAAmB,CAAA,EACnBC,MAAM,CAAA,EACNC,SAAS,CAAA,EACTC,uBAAuB,CAAA,EACvBC,UAAU,CAAA,EACVC,SAAS,CAAA,EACTC,EAAE,CAAA,EACF,GAAGC,MAAM,EACV,GAAGX,KAAK,AAAC;IACV,MAAM,EAAEY,IAAI,CAAA,EAAE,GAAGX,iBAAiB,AAAC;QACTW,SAAa;IAAvC,MAAMC,iBAAiB,GAAGD,CAAAA,SAAa,GAAbA,IAAI,CAACE,QAAQ,cAAbF,SAAa,cAAbA,SAAa,GAAI,IAAI,AAAC;QACdA,gBAAoB;IAAtD,MAAMG,yBAAyB,GAAGH,CAAAA,gBAAoB,GAApBA,IAAI,CAACI,eAAe,cAApBJ,gBAAoB,cAApBA,gBAAoB,GAAI,IAAI,AAAC;IAC/D,MAAMK,gBAAgB,GAAGvB,mBAAmB,CAACmB,iBAAiB,CAAC,AAAC;IAChE,MAAMK,sBAAsB,GAAGzB,yBAAyB,CAACsB,yBAAyB,CAAC,AAAC;IAEpF,qBACE,KAAClB,uBAAuB;QAACI,iBAAiB,EAAEA,iBAAiB;QAAEC,aAAa,EAAEA,aAAa;kBACzF,cAAA,KAACN,iBAAiB;YAACuB,YAAY,EAAE;gBAAElB,iBAAiB;gBAAEmB,UAAU,EAAE,CAAC,CAACX,SAAS;aAAE;sBAC7E,cAAA,KAACjB,iBAAiB;gBAChByB,gBAAgB,EAAEA,gBAAgB;gBAClCC,sBAAsB,EAAEA,sBAAsB;gBAC9CG,gBAAgB,EAAE,IAAI;0BAEtB,cAAA,KAAC1B,wBAAwB;oBAAC2B,0BAA0B,EAAEV,IAAI,CAACW,SAAS;8BAClE,cAAA,KAACnC,GAAG;wBACFsB,EAAE,EAAEnB,SAAS,CACX;4BACEiC,OAAO,EAAE,MAAM;4BACfC,KAAK,EAAE,MAAM;4BACbC,MAAM,EAAE,MAAM;4BACdC,QAAQ,EAAE,UAAU;4BACpBC,QAAQ,EAAE,QAAQ;yBACnB,EACDlB,EAAE,CACH;wBACA,GAAGC,MAAM;kCAEV,cAAA,KAACtB,aAAa;4BAACwC,iBAAiB,EAAEvC,UAAU;sCAC1C,cAAA,KAACQ,YAAY;gCACXG,iBAAiB,EAAEA,iBAAiB;gCACpCE,uBAAuB,EAAEA,uBAAuB;gCAChDC,mBAAmB,EAAEA,mBAAmB;gCACxCC,MAAM,EAAEA,MAAM;gCACdC,SAAS,EAAEA,SAAS;gCACpBC,uBAAuB,EAAEA,uBAAuB;gCAChDC,UAAU,EAAEA,UAAU;8BACtB;0BACY;sBACZ;kBACmB;cACT;UACF;MACI,CAC1B;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"sourcesContent":["// Copyright 2023 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 { Box, BoxProps } from '@mui/material';\nimport { DEFAULT_DASHBOARD_DURATION, DEFAULT_REFRESH_INTERVAL } from '@perses-dev/core';\nimport { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';\nimport { TimeRangeProvider, useInitialRefreshInterval, useInitialTimeRange } from '@perses-dev/plugin-system';\nimport {\n  TemplateVariableProvider,\n  DashboardProvider,\n  DatasourceStoreProviderProps,\n  DatasourceStoreProvider,\n  TemplateVariableProviderProps,\n} from '../../context';\nimport { DashboardApp, DashboardAppProps } from './DashboardApp';\n\nexport interface ViewDashboardProps extends Omit<BoxProps, 'children'>, DashboardAppProps {\n  datasourceApi: DatasourceStoreProviderProps['datasourceApi'];\n  externalVariableDefinitions?: TemplateVariableProviderProps['externalVariableDefinitions'];\n  isEditing?: boolean;\n}\n\n/**\n * The View for displaying a Dashboard, along with the UI for selecting variable values.\n */\nexport function ViewDashboard(props: ViewDashboardProps) {\n  const {\n    dashboardResource,\n    datasourceApi,\n    externalVariableDefinitions,\n    dashboardTitleComponent,\n    emptyDashboardProps,\n    onSave,\n    onDiscard,\n    initialVariableIsSticky,\n    isReadonly,\n    isEditing,\n    sx,\n    ...others\n  } = props;\n  const { spec } = dashboardResource;\n  const dashboardDuration = spec.duration ?? DEFAULT_DASHBOARD_DURATION;\n  const dashboardRefreshInterval = spec.refreshInterval ?? DEFAULT_REFRESH_INTERVAL;\n  const initialTimeRange = useInitialTimeRange(dashboardDuration);\n  const initialRefreshInterval = useInitialRefreshInterval(dashboardRefreshInterval);\n\n  return (\n    <DatasourceStoreProvider dashboardResource={dashboardResource} datasourceApi={datasourceApi}>\n      <DashboardProvider initialState={{ dashboardResource, isEditMode: !!isEditing }}>\n        <TimeRangeProvider\n          initialTimeRange={initialTimeRange}\n          initialRefreshInterval={initialRefreshInterval}\n          enabledURLParams={true}\n        >\n          <TemplateVariableProvider\n            initialVariableDefinitions={spec.variables}\n            externalVariableDefinitions={externalVariableDefinitions}\n          >\n            <Box\n              sx={combineSx(\n                {\n                  display: 'flex',\n                  width: '100%',\n                  height: '100%',\n                  position: 'relative',\n                  overflow: 'hidden',\n                },\n                sx\n              )}\n              {...others}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <DashboardApp\n                  dashboardResource={dashboardResource}\n                  dashboardTitleComponent={dashboardTitleComponent}\n                  emptyDashboardProps={emptyDashboardProps}\n                  onSave={onSave}\n                  onDiscard={onDiscard}\n                  initialVariableIsSticky={initialVariableIsSticky}\n                  isReadonly={isReadonly}\n                />\n              </ErrorBoundary>\n            </Box>\n          </TemplateVariableProvider>\n        </TimeRangeProvider>\n      </DashboardProvider>\n    </DatasourceStoreProvider>\n  );\n}\n"],"names":["Box","DEFAULT_DASHBOARD_DURATION","DEFAULT_REFRESH_INTERVAL","ErrorBoundary","ErrorAlert","combineSx","TimeRangeProvider","useInitialRefreshInterval","useInitialTimeRange","TemplateVariableProvider","DashboardProvider","DatasourceStoreProvider","DashboardApp","ViewDashboard","props","dashboardResource","datasourceApi","externalVariableDefinitions","dashboardTitleComponent","emptyDashboardProps","onSave","onDiscard","initialVariableIsSticky","isReadonly","isEditing","sx","others","spec","dashboardDuration","duration","dashboardRefreshInterval","refreshInterval","initialTimeRange","initialRefreshInterval","initialState","isEditMode","enabledURLParams","initialVariableDefinitions","variables","display","width","height","position","overflow","FallbackComponent"],"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,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,0BAA0B,EAAEC,wBAAwB,QAAQ,kBAAkB,CAAC;AACxF,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,QAAQ,wBAAwB,CAAC;AAC9E,SAASC,iBAAiB,EAAEC,yBAAyB,EAAEC,mBAAmB,QAAQ,2BAA2B,CAAC;AAC9G,SACEC,wBAAwB,EACxBC,iBAAiB,EAEjBC,uBAAuB,QAElB,eAAe,CAAC;AACvB,SAASC,YAAY,QAA2B,gBAAgB,CAAC;AAQjE;;CAEC,GACD,OAAO,SAASC,aAAa,CAACC,KAAyB,EAAE;IACvD,MAAM,EACJC,iBAAiB,CAAA,EACjBC,aAAa,CAAA,EACbC,2BAA2B,CAAA,EAC3BC,uBAAuB,CAAA,EACvBC,mBAAmB,CAAA,EACnBC,MAAM,CAAA,EACNC,SAAS,CAAA,EACTC,uBAAuB,CAAA,EACvBC,UAAU,CAAA,EACVC,SAAS,CAAA,EACTC,EAAE,CAAA,EACF,GAAGC,MAAM,EACV,GAAGZ,KAAK,AAAC;IACV,MAAM,EAAEa,IAAI,CAAA,EAAE,GAAGZ,iBAAiB,AAAC;QACTY,SAAa;IAAvC,MAAMC,iBAAiB,GAAGD,CAAAA,SAAa,GAAbA,IAAI,CAACE,QAAQ,cAAbF,SAAa,cAAbA,SAAa,GAAI1B,0BAA0B,AAAC;QACrC0B,gBAAoB;IAArD,MAAMG,wBAAwB,GAAGH,CAAAA,gBAAoB,GAApBA,IAAI,CAACI,eAAe,cAApBJ,gBAAoB,cAApBA,gBAAoB,GAAIzB,wBAAwB,AAAC;IAClF,MAAM8B,gBAAgB,GAAGxB,mBAAmB,CAACoB,iBAAiB,CAAC,AAAC;IAChE,MAAMK,sBAAsB,GAAG1B,yBAAyB,CAACuB,wBAAwB,CAAC,AAAC;IAEnF,qBACE,KAACnB,uBAAuB;QAACI,iBAAiB,EAAEA,iBAAiB;QAAEC,aAAa,EAAEA,aAAa;kBACzF,cAAA,KAACN,iBAAiB;YAACwB,YAAY,EAAE;gBAAEnB,iBAAiB;gBAAEoB,UAAU,EAAE,CAAC,CAACX,SAAS;aAAE;sBAC7E,cAAA,KAAClB,iBAAiB;gBAChB0B,gBAAgB,EAAEA,gBAAgB;gBAClCC,sBAAsB,EAAEA,sBAAsB;gBAC9CG,gBAAgB,EAAE,IAAI;0BAEtB,cAAA,KAAC3B,wBAAwB;oBACvB4B,0BAA0B,EAAEV,IAAI,CAACW,SAAS;oBAC1CrB,2BAA2B,EAAEA,2BAA2B;8BAExD,cAAA,KAACjB,GAAG;wBACFyB,EAAE,EAAEpB,SAAS,CACX;4BACEkC,OAAO,EAAE,MAAM;4BACfC,KAAK,EAAE,MAAM;4BACbC,MAAM,EAAE,MAAM;4BACdC,QAAQ,EAAE,UAAU;4BACpBC,QAAQ,EAAE,QAAQ;yBACnB,EACDlB,EAAE,CACH;wBACA,GAAGC,MAAM;kCAEV,cAAA,KAACvB,aAAa;4BAACyC,iBAAiB,EAAExC,UAAU;sCAC1C,cAAA,KAACQ,YAAY;gCACXG,iBAAiB,EAAEA,iBAAiB;gCACpCG,uBAAuB,EAAEA,uBAAuB;gCAChDC,mBAAmB,EAAEA,mBAAmB;gCACxCC,MAAM,EAAEA,MAAM;gCACdC,SAAS,EAAEA,SAAS;gCACpBC,uBAAuB,EAAEA,uBAAuB;gCAChDC,UAAU,EAAEA,UAAU;8BACtB;0BACY;sBACZ;kBACmB;cACT;UACF;MACI,CAC1B;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.0.0-snapshot-time-chart-rewrite-4667058",
+  "version": "0.0.0-snapshot-panel-extra-content-3-17f9c42",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -29,9 +29,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "0.0.0-snapshot-time-chart-rewrite-4667058",
-    "@perses-dev/core": "0.0.0-snapshot-time-chart-rewrite-4667058",
-    "@perses-dev/plugin-system": "0.0.0-snapshot-time-chart-rewrite-4667058",
+    "@perses-dev/components": "0.0.0-snapshot-panel-extra-content-3-17f9c42",
+    "@perses-dev/core": "0.0.0-snapshot-panel-extra-content-3-17f9c42",
+    "@perses-dev/plugin-system": "0.0.0-snapshot-panel-extra-content-3-17f9c42",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^2.28.0",
     "immer": "^9.0.15",
@@ -44,8 +44,8 @@
     "zustand": "^4.3.3"
   },
   "devDependencies": {
-    "@perses-dev/internal-utils": "0.0.0-snapshot-time-chart-rewrite-4667058",
-    "@perses-dev/storybook": "0.0.0-snapshot-time-chart-rewrite-4667058",
+    "@perses-dev/internal-utils": "0.0.0-snapshot-panel-extra-content-3-17f9c42",
+    "@perses-dev/storybook": "0.0.0-snapshot-panel-extra-content-3-17f9c42",
     "history": "^5.3.0",
     "intersection-observer": "^0.12.2"
   },

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

@@ -1,399 +0,0 @@
-// Copyright 2023 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.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "VariableEditForm", {
-    enumerable: true,
-    get: ()=>VariableEditForm
-});
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _material = require("@mui/material");
-const _useImmer = require("use-immer");
-const _pluginSystem = require("@perses-dev/plugin-system");
-const _components = require("@perses-dev/components");
-const _variableModel = require("../variable-model");
-const _variablePreview = require("./VariablePreview");
-const _variableEditorFormModel = require("./variable-editor-form-model");
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interopRequireWildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {};
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-// TODO: Replace with proper validation library
-function getValidation(state) {
-    /** Name validation */ let name = null;
-    if (!state.name) {
-        name = 'Name is required';
-    }
-    // name can only contain alphanumeric characters and underscores and no spaces
-    if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {
-        name = 'Name can only contain alphanumeric characters, underscores, and dashes';
-    }
-    return {
-        name,
-        isValid: !name
-    };
-}
-function FallbackPreview() {
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-        children: "Error previewing values"
-    });
-}
-function VariableEditForm(props) {
-    const { initialVariableDefinition , onChange , onCancel  } = props;
-    const [state, setState] = (0, _useImmer.useImmer)((0, _variableEditorFormModel.getInitialState)(initialVariableDefinition));
-    const validation = (0, _react.useMemo)(()=>getValidation(state), [
-        state
-    ]);
-    const [previewKey, setPreviewKey] = (0, _react.useState)(0);
-    const refreshPreview = ()=>{
-        setPreviewKey((prev)=>prev + 1);
-    };
-    /** We use the `previewKey` that we increment to know when to explicitly update the
-   * spec that will be used for preview. The reason why we do this is to avoid
-   * having to re-fetch the values when the user is still editing the spec.
-   */ const previewSpec = (0, _react.useMemo)(()=>{
-        return (0, _variableEditorFormModel.getVariableDefinitionFromState)(state);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        previewKey
-    ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-                sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    padding: (theme)=>theme.spacing(1, 2),
-                    borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
-                },
-                children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                        variant: "h2",
-                        children: "Edit Variable"
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                        direction: "row",
-                        spacing: 1,
-                        sx: {
-                            marginLeft: 'auto'
-                        },
-                        children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                disabled: !validation.isValid,
-                                variant: "contained",
-                                onClick: ()=>{
-                                    onChange((0, _variableEditorFormModel.getVariableDefinitionFromState)(state));
-                                },
-                                children: "Update"
-                            }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                color: "secondary",
-                                variant: "outlined",
-                                onClick: ()=>{
-                                    onCancel();
-                                },
-                                children: "Cancel"
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-                padding: 2,
-                sx: {
-                    overflowY: 'scroll'
-                },
-                children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
-                        container: true,
-                        spacing: 2,
-                        mb: 2,
-                        children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                                item: true,
-                                xs: 8,
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                    required: true,
-                                    error: !!validation.name,
-                                    fullWidth: true,
-                                    label: "Name",
-                                    value: state.name,
-                                    helperText: validation.name,
-                                    onChange: (v)=>{
-                                        setState((draft)=>{
-                                            draft.name = v.target.value;
-                                        });
-                                    }
-                                })
-                            }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                                item: true,
-                                xs: 4,
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                    fullWidth: true,
-                                    label: "Display Label",
-                                    value: state.title || '',
-                                    onChange: (v)=>{
-                                        setState((draft)=>{
-                                            draft.title = v.target.value;
-                                        });
-                                    }
-                                })
-                            }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                                item: true,
-                                xs: 8,
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                    fullWidth: true,
-                                    label: "Description",
-                                    value: state.description,
-                                    onChange: (v)=>{
-                                        setState((draft)=>{
-                                            draft.description = v.target.value;
-                                        });
-                                    }
-                                })
-                            }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                                item: true,
-                                xs: 4,
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
-                                    fullWidth: true,
-                                    children: [
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
-                                            id: "variable-type-select-label",
-                                            children: "Type"
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Select, {
-                                            labelId: "variable-type-select-label",
-                                            id: "variable-type-select",
-                                            label: "Type",
-                                            value: state.kind,
-                                            onChange: (v)=>{
-                                                setState((draft)=>{
-                                                    draft.kind = v.target.value;
-                                                });
-                                            },
-                                            children: _variableModel.VARIABLE_TYPES.map((v)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
-                                                    value: v.kind,
-                                                    children: v.label
-                                                }, v.kind))
-                                        })
-                                    ]
-                                })
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Divider, {}),
-                    state.kind === 'TextVariable' && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                        children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                                py: 1,
-                                variant: "subtitle1",
-                                children: "Text Options"
-                            }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                                spacing: 2,
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variablePreview.VariablePreview, {
-                                            values: [
-                                                state.textVariableFields.value
-                                            ]
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                        label: "Value",
-                                        value: state.textVariableFields.value,
-                                        onChange: (v)=>{
-                                            setState((draft)=>{
-                                                draft.textVariableFields.value = v.target.value;
-                                            });
-                                        }
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    state.kind === 'ListVariable' && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                        children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                                py: 1,
-                                variant: "subtitle1",
-                                children: "List Options"
-                            }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                                spacing: 2,
-                                mb: 2,
-                                children: [
-                                    state.listVariableFields.plugin.kind ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
-                                            FallbackComponent: FallbackPreview,
-                                            resetKeys: [
-                                                previewSpec
-                                            ],
-                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variablePreview.VariableListPreview, {
-                                                definition: previewSpec,
-                                                onRefresh: refreshPreview
-                                            })
-                                        })
-                                    }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variablePreview.VariablePreview, {
-                                        isLoading: true
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                                        children: [
-                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
-                                                onClickAway: ()=>refreshPreview(),
-                                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {})
-                                            }),
-                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginEditor, {
-                                                width: "100%",
-                                                pluginType: "Variable",
-                                                pluginKindLabel: "Source",
-                                                value: state.listVariableFields.plugin,
-                                                onChange: (val)=>{
-                                                    setState((draft)=>{
-                                                        draft.listVariableFields.plugin = val;
-                                                    });
-                                                }
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
-                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                            label: "Capturing Regexp Filter",
-                                            value: state.listVariableFields.capturing_regexp || '',
-                                            onChange: (e)=>{
-                                                setState((draft)=>{
-                                                    if (e.target.value) {
-                                                        // TODO: do a better fix, if empty string => it should skip the filter
-                                                        draft.listVariableFields.capturing_regexp = e.target.value;
-                                                    } else {
-                                                        draft.listVariableFields.capturing_regexp = undefined;
-                                                    }
-                                                });
-                                            },
-                                            helperText: "Optional, if you want to filter on captured result."
-                                        })
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Divider, {}),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                                py: 1,
-                                variant: "subtitle1",
-                                children: "Dropdown Options"
-                            }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                                spacing: "2",
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                                        children: [
-                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControlLabel, {
-                                                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
-                                                    checked: state.listVariableFields.allowMultiple,
-                                                    onChange: (e)=>{
-                                                        setState((draft)=>{
-                                                            draft.listVariableFields.allowMultiple = e.target.checked;
-                                                        });
-                                                    }
-                                                }),
-                                                label: "Allow Multiple Values"
-                                            }),
-                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                                                variant: "caption",
-                                                children: "Enables multiple values to be selected at the same time"
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                                        children: [
-                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControlLabel, {
-                                                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
-                                                    checked: state.listVariableFields.allowAll,
-                                                    onChange: (e)=>{
-                                                        setState((draft)=>{
-                                                            draft.listVariableFields.allowAll = e.target.checked;
-                                                        });
-                                                    }
-                                                }),
-                                                label: "Allow All option"
-                                            }),
-                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                                                mb: 1,
-                                                variant: "caption",
-                                                children: "Enables an option to include all variable values"
-                                            }),
-                                            state.listVariableFields.allowAll && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                                label: "Custom All Value",
-                                                value: state.listVariableFields.customAllValue,
-                                                onChange: (e)=>{
-                                                    setState((draft)=>{
-                                                        if (e.target.value) {
-                                                            draft.listVariableFields.customAllValue = e.target.value;
-                                                        } else {
-                                                            draft.listVariableFields.customAllValue = undefined;
-                                                        }
-                                                    });
-                                                },
-                                                helperText: "When All is selected, this value will be used"
-                                            })
-                                        ]
-                                    })
-                                ]
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-}