@perses-dev/dashboards 0.42.1 → 0.43.0-rc0

package/dist/components/EditJsonDialog/EditJsonDialog.js

@@ -18,7 +18,7 @@ import { useDatasourceStore, useTimeRange } from '@perses-dev/plugin-system';
 import { useEditJsonDialog } from '../../context/DashboardProvider';
 import { useDashboard } from '../../context/useDashboard';
 export const EditJsonDialog = (props)=>{
-    const { disableMetadataEdition  } = props;
+    const { isReadonly , disableMetadataEdition  } = props;
     const { editJsonDialog , closeEditJsonDialog  } = useEditJsonDialog();
     return /*#__PURE__*/ _jsxs(Dialog, {
         open: !!(editJsonDialog === null || editJsonDialog === void 0 ? void 0 : editJsonDialog.isOpen),
@@ -26,18 +26,22 @@ export const EditJsonDialog = (props)=>{
         fullWidth: true,
         maxWidth: "lg",
         children: [
-            /*#__PURE__*/ _jsx(Dialog.Header, {
+            /*#__PURE__*/ _jsxs(Dialog.Header, {
                 onClose: ()=>closeEditJsonDialog(),
-                children: "Edit Dashboard JSON"
+                children: [
+                    !isReadonly && 'Edit ',
+                    " Dashboard JSON"
+                ]
             }),
             (editJsonDialog === null || editJsonDialog === void 0 ? void 0 : editJsonDialog.isOpen) && /*#__PURE__*/ _jsx(EditJsonDialogForm, {
+                isReadonly: isReadonly,
                 disableMetadataEdition: disableMetadataEdition
             })
         ]
     });
 };
 const EditJsonDialogForm = (props)=>{
-    const { disableMetadataEdition  } = props;
+    const { isReadonly , disableMetadataEdition  } = props;
     const { closeEditJsonDialog  } = useEditJsonDialog();
     const { setTimeRange , setRefreshInterval  } = useTimeRange();
     const { dashboard , setDashboard  } = useDashboard();
@@ -71,7 +75,7 @@ const EditJsonDialogForm = (props)=>{
                     width: '100%'
                 },
                 children: [
-                    disableMetadataEdition && /*#__PURE__*/ _jsx(Alert, {
+                    disableMetadataEdition && !isReadonly && /*#__PURE__*/ _jsx(Alert, {
                         sx: {
                             marginBottom: (theme)=>theme.spacing(1)
                         },
@@ -84,12 +88,13 @@ const EditJsonDialogForm = (props)=>{
                             minHeight: "300px",
                             maxHeight: "70vh",
                             value: draftDashboard,
-                            onChange: (value)=>completeDraftDashboard(value)
+                            onChange: (value)=>completeDraftDashboard(value),
+                            readOnly: isReadonly
                         })
                     })
                 ]
             }),
-            /*#__PURE__*/ _jsx(Dialog.Actions, {
+            !isReadonly && /*#__PURE__*/ _jsx(Dialog.Actions, {
                 children: /*#__PURE__*/ _jsx(Dialog.PrimaryButton, {
                     onClick: handleApply,
                     children: "Apply"

package/dist/components/EditJsonDialog/EditJsonDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.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 { FormEvent, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useDatasourceStore, useTimeRange } from '@perses-dev/plugin-system';\nimport { useEditJsonDialog } from '../../context/DashboardProvider';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport interface EditJsonDialogProps {\n  disableMetadataEdition?: boolean;\n}\n\nexport const EditJsonDialog = (props: EditJsonDialogProps) => {\n  const { disableMetadataEdition } = props;\n  const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();\n\n  return (\n    <Dialog open={!!editJsonDialog?.isOpen} scroll=\"paper\" fullWidth maxWidth=\"lg\">\n      <Dialog.Header onClose={() => closeEditJsonDialog()}>Edit Dashboard JSON</Dialog.Header>\n      {editJsonDialog?.isOpen && <EditJsonDialogForm disableMetadataEdition={disableMetadataEdition} />}\n    </Dialog>\n  );\n};\n\nconst EditJsonDialogForm = (props: EditJsonDialogProps) => {\n  const { disableMetadataEdition } = props;\n  const { closeEditJsonDialog } = useEditJsonDialog();\n  const { setTimeRange, setRefreshInterval } = useTimeRange();\n  const { dashboard, setDashboard } = useDashboard();\n  const { setLocalDatasources } = useDatasourceStore();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent) => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\n    setTimeRange({ pastDuration: draftDashboard.spec.duration });\n    setRefreshInterval(draftDashboard.spec.refreshInterval ?? '0s');\n    setLocalDatasources(draftDashboard.spec.datasources ?? {});\n    closeEditJsonDialog();\n  };\n\n  const completeDraftDashboard = (dashboard: string | undefined) => {\n    try {\n      const json = JSON.parse(dashboard ?? '{}');\n      setDraftDashboard(json);\n    } catch (e) {\n      // do nothing\n    }\n  };\n\n  return (\n    <Dialog.Form onSubmit={handleApply}>\n      <Dialog.Content sx={{ width: '100%' }}>\n        {disableMetadataEdition && (\n          <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n            Metadata cannot be modified or saved.\n          </Alert>\n        )}\n        <FormControl fullWidth>\n          <JSONEditor\n            minHeight=\"300px\"\n            maxHeight=\"70vh\"\n            value={draftDashboard}\n            onChange={(value: string) => completeDraftDashboard(value)}\n          />\n        </FormControl>\n      </Dialog.Content>\n      <Dialog.Actions>\n        <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n      </Dialog.Actions>\n    </Dialog.Form>\n  );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useDatasourceStore","useTimeRange","useEditJsonDialog","useDashboard","EditJsonDialog","props","disableMetadataEdition","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","setTimeRange","setRefreshInterval","dashboard","setDashboard","setLocalDatasources","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","pastDuration","spec","duration","refreshInterval","datasources","completeDraftDashboard","json","JSON","parse","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","minHeight","maxHeight","value","onChange","Actions","PrimaryButton","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAoBA,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,KAAK,EAAEC,WAAW,QAAQ,gBAAgB;AACnD,SAASC,MAAM,EAAEC,UAAU,QAAQ,yBAAyB;AAC5D,SAASC,kBAAkB,EAAEC,YAAY,QAAQ,4BAA4B;AAC7E,SAASC,iBAAiB,QAAQ,kCAAkC;AACpE,SAASC,YAAY,QAAQ,6BAA6B;AAM1D,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,uBAAsB,EAAE,GAAGD;IACnC,MAAM,EAAEE,eAAc,EAAEC,oBAAmB,EAAE,GAAGN;IAEhD,qBACE,MAACJ;QAAOW,MAAM,CAAC,CAACF,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBG,MAAK;QAAGC,QAAO;QAAQC,SAAS;QAACC,UAAS;;0BACxE,KAACf,OAAOgB;gBAAOC,SAAS,IAAMP;0BAAuB;;YACpDD,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBG,MAAK,mBAAK,KAACM;gBAAmBV,wBAAwBA;;;;AAG7E,EAAE;AAEF,MAAMU,qBAAqB,CAACX;IAC1B,MAAM,EAAEC,uBAAsB,EAAE,GAAGD;IACnC,MAAM,EAAEG,oBAAmB,EAAE,GAAGN;IAChC,MAAM,EAAEe,aAAY,EAAEC,mBAAkB,EAAE,GAAGjB;IAC7C,MAAM,EAAEkB,UAAS,EAAEC,aAAY,EAAE,GAAGjB;IACpC,MAAM,EAAEkB,oBAAmB,EAAE,GAAGrB;IAChC,MAAM,CAACsB,gBAAgBC,kBAAkB,GAAG5B,SAASwB;IAErD,MAAMK,cAAc,CAACC;QACnBA,EAAEC;QACFN,aAAaE;QACbL,aAAa;YAAEU,cAAcL,eAAeM,KAAKC;QAAS;YACvCP;QAAnBJ,mBAAmBI,CAAAA,uCAAAA,eAAeM,KAAKE,6BAApBR,kDAAAA,uCAAuC;YACtCA;QAApBD,oBAAoBC,CAAAA,mCAAAA,eAAeM,KAAKG,yBAApBT,8CAAAA,mCAAmC,CAAC;QACxDd;IACF;IAEA,MAAMwB,yBAAyB,CAACb;QAC9B,IAAI;YACF,MAAMc,OAAOC,KAAKC,MAAMhB,sBAAAA,uBAAAA,YAAa;YACrCI,kBAAkBU;QACpB,EAAE,OAAOR,GAAG;QACV,aAAa;QACf;IACF;IAEA,qBACE,MAAC3B,OAAOsC;QAAKC,UAAUb;;0BACrB,MAAC1B,OAAOwC;gBAAQC,IAAI;oBAAEC,OAAO;gBAAO;;oBACjClC,wCACC,KAACV;wBAAM2C,IAAI;4BAAEE,cAAc,CAACC,QAAUA,MAAMC,QAAQ;wBAAG;wBAAGC,UAAS;kCAAU;;kCAI/E,KAAC/C;wBAAYe,SAAS;kCACpB,cAAA,KAACb;4BACC8C,WAAU;4BACVC,WAAU;4BACVC,OAAOzB;4BACP0B,UAAU,CAACD,QAAkBf,uBAAuBe;;;;;0BAI1D,KAACjD,OAAOmD;0BACN,cAAA,KAACnD,OAAOoD;oBAAcC,SAAS3B;8BAAa;;;;;AAIpD"}
+{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.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 { FormEvent, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useDatasourceStore, useTimeRange } from '@perses-dev/plugin-system';\nimport { useEditJsonDialog } from '../../context/DashboardProvider';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport interface EditJsonDialogProps {\n  isReadonly: boolean;\n  disableMetadataEdition?: boolean;\n}\n\nexport const EditJsonDialog = (props: EditJsonDialogProps) => {\n  const { isReadonly, disableMetadataEdition } = props;\n  const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();\n\n  return (\n    <Dialog open={!!editJsonDialog?.isOpen} scroll=\"paper\" fullWidth maxWidth=\"lg\">\n      <Dialog.Header onClose={() => closeEditJsonDialog()}>{!isReadonly && 'Edit '} Dashboard JSON</Dialog.Header>\n      {editJsonDialog?.isOpen && (\n        <EditJsonDialogForm isReadonly={isReadonly} disableMetadataEdition={disableMetadataEdition} />\n      )}\n    </Dialog>\n  );\n};\n\nconst EditJsonDialogForm = (props: EditJsonDialogProps) => {\n  const { isReadonly, disableMetadataEdition } = props;\n  const { closeEditJsonDialog } = useEditJsonDialog();\n  const { setTimeRange, setRefreshInterval } = useTimeRange();\n  const { dashboard, setDashboard } = useDashboard();\n  const { setLocalDatasources } = useDatasourceStore();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent) => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\n    setTimeRange({ pastDuration: draftDashboard.spec.duration });\n    setRefreshInterval(draftDashboard.spec.refreshInterval ?? '0s');\n    setLocalDatasources(draftDashboard.spec.datasources ?? {});\n    closeEditJsonDialog();\n  };\n\n  const completeDraftDashboard = (dashboard: string | undefined) => {\n    try {\n      const json = JSON.parse(dashboard ?? '{}');\n      setDraftDashboard(json);\n    } catch (e) {\n      // do nothing\n    }\n  };\n\n  return (\n    <Dialog.Form onSubmit={handleApply}>\n      <Dialog.Content sx={{ width: '100%' }}>\n        {disableMetadataEdition && !isReadonly && (\n          <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n            Metadata cannot be modified or saved.\n          </Alert>\n        )}\n        <FormControl fullWidth>\n          <JSONEditor\n            minHeight=\"300px\"\n            maxHeight=\"70vh\"\n            value={draftDashboard}\n            onChange={(value: string) => completeDraftDashboard(value)}\n            readOnly={isReadonly}\n          />\n        </FormControl>\n      </Dialog.Content>\n      {!isReadonly && (\n        <Dialog.Actions>\n          <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n        </Dialog.Actions>\n      )}\n    </Dialog.Form>\n  );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useDatasourceStore","useTimeRange","useEditJsonDialog","useDashboard","EditJsonDialog","props","isReadonly","disableMetadataEdition","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","setTimeRange","setRefreshInterval","dashboard","setDashboard","setLocalDatasources","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","pastDuration","spec","duration","refreshInterval","datasources","completeDraftDashboard","json","JSON","parse","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","minHeight","maxHeight","value","onChange","readOnly","Actions","PrimaryButton","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAoBA,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,KAAK,EAAEC,WAAW,QAAQ,gBAAgB;AACnD,SAASC,MAAM,EAAEC,UAAU,QAAQ,yBAAyB;AAC5D,SAASC,kBAAkB,EAAEC,YAAY,QAAQ,4BAA4B;AAC7E,SAASC,iBAAiB,QAAQ,kCAAkC;AACpE,SAASC,YAAY,QAAQ,6BAA6B;AAO1D,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,WAAU,EAAEC,uBAAsB,EAAE,GAAGF;IAC/C,MAAM,EAAEG,eAAc,EAAEC,oBAAmB,EAAE,GAAGP;IAEhD,qBACE,MAACJ;QAAOY,MAAM,CAAC,CAACF,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBG,MAAK;QAAGC,QAAO;QAAQC,SAAS;QAACC,UAAS;;0BACxE,MAAChB,OAAOiB;gBAAOC,SAAS,IAAMP;;oBAAwB,CAACH,cAAc;oBAAQ;;;YAC5EE,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBG,MAAK,mBACpB,KAACM;gBAAmBX,YAAYA;gBAAYC,wBAAwBA;;;;AAI5E,EAAE;AAEF,MAAMU,qBAAqB,CAACZ;IAC1B,MAAM,EAAEC,WAAU,EAAEC,uBAAsB,EAAE,GAAGF;IAC/C,MAAM,EAAEI,oBAAmB,EAAE,GAAGP;IAChC,MAAM,EAAEgB,aAAY,EAAEC,mBAAkB,EAAE,GAAGlB;IAC7C,MAAM,EAAEmB,UAAS,EAAEC,aAAY,EAAE,GAAGlB;IACpC,MAAM,EAAEmB,oBAAmB,EAAE,GAAGtB;IAChC,MAAM,CAACuB,gBAAgBC,kBAAkB,GAAG7B,SAASyB;IAErD,MAAMK,cAAc,CAACC;QACnBA,EAAEC;QACFN,aAAaE;QACbL,aAAa;YAAEU,cAAcL,eAAeM,KAAKC;QAAS;YACvCP;QAAnBJ,mBAAmBI,CAAAA,uCAAAA,eAAeM,KAAKE,6BAApBR,kDAAAA,uCAAuC;YACtCA;QAApBD,oBAAoBC,CAAAA,mCAAAA,eAAeM,KAAKG,yBAApBT,8CAAAA,mCAAmC,CAAC;QACxDd;IACF;IAEA,MAAMwB,yBAAyB,CAACb;QAC9B,IAAI;YACF,MAAMc,OAAOC,KAAKC,MAAMhB,sBAAAA,uBAAAA,YAAa;YACrCI,kBAAkBU;QACpB,EAAE,OAAOR,GAAG;QACV,aAAa;QACf;IACF;IAEA,qBACE,MAAC5B,OAAOuC;QAAKC,UAAUb;;0BACrB,MAAC3B,OAAOyC;gBAAQC,IAAI;oBAAEC,OAAO;gBAAO;;oBACjClC,0BAA0B,CAACD,4BAC1B,KAACV;wBAAM4C,IAAI;4BAAEE,cAAc,CAACC,QAAUA,MAAMC,QAAQ;wBAAG;wBAAGC,UAAS;kCAAU;;kCAI/E,KAAChD;wBAAYgB,SAAS;kCACpB,cAAA,KAACd;4BACC+C,WAAU;4BACVC,WAAU;4BACVC,OAAOzB;4BACP0B,UAAU,CAACD,QAAkBf,uBAAuBe;4BACpDE,UAAU5C;;;;;YAIf,CAACA,4BACA,KAACR,OAAOqD;0BACN,cAAA,KAACrD,OAAOsD;oBAAcC,SAAS5B;8BAAa;;;;;AAKtD"}

package/dist/components/Variables/EditVariablesButton.js

@@ -16,7 +16,7 @@ import { Button } from '@mui/material';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
 import { Drawer, InfoTooltip } from '@perses-dev/components';
 import { useBuiltinVariableDefinitions } from '@perses-dev/plugin-system';
-import { TOOLTIP_TEXT } from '../../constants';
+import { TOOLTIP_TEXT, editButtonStyle } from '../../constants';
 import { useTemplateExternalVariableDefinitions, useTemplateVariableActions, useTemplateVariableDefinitions } from '../../context';
 import { VariableEditor } from './VariableEditor';
 export function EditVariablesButton({ variant ='text' , label ='Variables' , color ='primary' , fullWidth  }) {
@@ -42,10 +42,7 @@ export function EditVariablesButton({ variant ='text' , label ='Variables' , col
                     variant: variant,
                     color: color,
                     fullWidth: fullWidth,
-                    sx: {
-                        whiteSpace: 'nowrap',
-                        minWidth: 'auto'
-                    },
+                    sx: editButtonStyle,
                     children: label
                 })
             }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/EditVariablesButton.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 { Button, ButtonProps } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';\nimport { useBuiltinVariableDefinitions } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport {\n  ExternalVariableDefinition,\n  useTemplateExternalVariableDefinitions,\n  useTemplateVariableActions,\n  useTemplateVariableDefinitions,\n} from '../../context';\nimport { VariableEditor } from './VariableEditor';\n\nexport interface EditVariablesButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport function EditVariablesButton({\n  variant = 'text',\n  label = 'Variables',\n  color = 'primary',\n  fullWidth,\n}: EditVariablesButtonProps) {\n  const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useTemplateExternalVariableDefinitions();\n  const builtinVariableDefinitions: BuiltinVariableDefinition[] = useBuiltinVariableDefinitions();\n  const { setVariableDefinitions } = useTemplateVariableActions();\n\n  const openVariableEditor = () => {\n    setIsVariableEditorOpen(true);\n  };\n\n  const closeVariableEditor = () => {\n    setIsVariableEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editVariables}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openVariableEditor}\n          aria-label={TOOLTIP_TEXT.editVariables}\n          variant={variant}\n          color={color}\n          fullWidth={fullWidth}\n          sx={{ whiteSpace: 'nowrap', minWidth: 'auto' }}\n        >\n          {label}\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isVariableEditorOpen}\n        onClose={closeVariableEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"variable-editor\"\n      >\n        <VariableEditor\n          variableDefinitions={variableDefinitions}\n          externalVariableDefinitions={externalVariableDefinitions}\n          builtinVariableDefinitions={builtinVariableDefinitions}\n          onCancel={closeVariableEditor}\n          onChange={(variables: VariableDefinition[]) => {\n            setVariableDefinitions(variables);\n            setIsVariableEditorOpen(false);\n          }}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","useBuiltinVariableDefinitions","TOOLTIP_TEXT","useTemplateExternalVariableDefinitions","useTemplateVariableActions","useTemplateVariableDefinitions","VariableEditor","EditVariablesButton","variant","label","color","fullWidth","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","externalVariableDefinitions","builtinVariableDefinitions","setVariableDefinitions","openVariableEditor","closeVariableEditor","description","editVariables","startIcon","onClick","aria-label","sx","whiteSpace","minWidth","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange","variables"],"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,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SAASC,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,yBAAyB;AAE7D,SAASC,6BAA6B,QAAQ,4BAA4B;AAC1E,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAEEC,sCAAsC,EACtCC,0BAA0B,EAC1BC,8BAA8B,QACzB,gBAAgB;AACvB,SAASC,cAAc,QAAQ,mBAAmB;AAmBlD,OAAO,SAASC,oBAAoB,EAClCC,SAAU,OAAM,EAChBC,OAAQ,YAAW,EACnBC,OAAQ,UAAS,EACjBC,UAAS,EACgB;IACzB,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGjB,SAAS;IACjE,MAAMkB,sBAA4CT;IAClD,MAAMU,8BAA4DZ;IAClE,MAAMa,6BAA0Df;IAChE,MAAM,EAAEgB,uBAAsB,EAAE,GAAGb;IAEnC,MAAMc,qBAAqB;QACzBL,wBAAwB;IAC1B;IAEA,MAAMM,sBAAsB;QAC1BN,wBAAwB;IAC1B;IAEA,qBACE;;0BACE,KAACb;gBAAYoB,aAAalB,aAAamB;0BACrC,cAAA,KAACxB;oBACCyB,yBAAW,KAACxB;oBACZyB,SAASL;oBACTM,cAAYtB,aAAamB;oBACzBb,SAASA;oBACTE,OAAOA;oBACPC,WAAWA;oBACXc,IAAI;wBAAEC,YAAY;wBAAUC,UAAU;oBAAO;8BAE5ClB;;;0BAGL,KAACV;gBACC6B,QAAQhB;gBACRiB,SAASV;gBACTW,YAAY;oBAAEL,IAAI;wBAAEM,OAAO;oBAAM;gBAAE;gBACnCC,eAAY;0BAEZ,cAAA,KAAC1B;oBACCQ,qBAAqBA;oBACrBC,6BAA6BA;oBAC7BC,4BAA4BA;oBAC5BiB,UAAUd;oBACVe,UAAU,CAACC;wBACTlB,uBAAuBkB;wBACvBtB,wBAAwB;oBAC1B;;;;;AAKV"}
+{"version":3,"sources":["../../../src/components/Variables/EditVariablesButton.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 { Button, ButtonProps } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';\nimport { useBuiltinVariableDefinitions } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport {\n  ExternalVariableDefinition,\n  useTemplateExternalVariableDefinitions,\n  useTemplateVariableActions,\n  useTemplateVariableDefinitions,\n} from '../../context';\nimport { VariableEditor } from './VariableEditor';\n\nexport interface EditVariablesButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport function EditVariablesButton({\n  variant = 'text',\n  label = 'Variables',\n  color = 'primary',\n  fullWidth,\n}: EditVariablesButtonProps) {\n  const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useTemplateExternalVariableDefinitions();\n  const builtinVariableDefinitions: BuiltinVariableDefinition[] = useBuiltinVariableDefinitions();\n  const { setVariableDefinitions } = useTemplateVariableActions();\n\n  const openVariableEditor = () => {\n    setIsVariableEditorOpen(true);\n  };\n\n  const closeVariableEditor = () => {\n    setIsVariableEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editVariables}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openVariableEditor}\n          aria-label={TOOLTIP_TEXT.editVariables}\n          variant={variant}\n          color={color}\n          fullWidth={fullWidth}\n          sx={editButtonStyle}\n        >\n          {label}\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isVariableEditorOpen}\n        onClose={closeVariableEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"variable-editor\"\n      >\n        <VariableEditor\n          variableDefinitions={variableDefinitions}\n          externalVariableDefinitions={externalVariableDefinitions}\n          builtinVariableDefinitions={builtinVariableDefinitions}\n          onCancel={closeVariableEditor}\n          onChange={(variables: VariableDefinition[]) => {\n            setVariableDefinitions(variables);\n            setIsVariableEditorOpen(false);\n          }}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","useBuiltinVariableDefinitions","TOOLTIP_TEXT","editButtonStyle","useTemplateExternalVariableDefinitions","useTemplateVariableActions","useTemplateVariableDefinitions","VariableEditor","EditVariablesButton","variant","label","color","fullWidth","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","externalVariableDefinitions","builtinVariableDefinitions","setVariableDefinitions","openVariableEditor","closeVariableEditor","description","editVariables","startIcon","onClick","aria-label","sx","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange","variables"],"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,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SAASC,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,yBAAyB;AAE7D,SAASC,6BAA6B,QAAQ,4BAA4B;AAC1E,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAEEC,sCAAsC,EACtCC,0BAA0B,EAC1BC,8BAA8B,QACzB,gBAAgB;AACvB,SAASC,cAAc,QAAQ,mBAAmB;AAmBlD,OAAO,SAASC,oBAAoB,EAClCC,SAAU,OAAM,EAChBC,OAAQ,YAAW,EACnBC,OAAQ,UAAS,EACjBC,UAAS,EACgB;IACzB,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGlB,SAAS;IACjE,MAAMmB,sBAA4CT;IAClD,MAAMU,8BAA4DZ;IAClE,MAAMa,6BAA0DhB;IAChE,MAAM,EAAEiB,uBAAsB,EAAE,GAAGb;IAEnC,MAAMc,qBAAqB;QACzBL,wBAAwB;IAC1B;IAEA,MAAMM,sBAAsB;QAC1BN,wBAAwB;IAC1B;IAEA,qBACE;;0BACE,KAACd;gBAAYqB,aAAanB,aAAaoB;0BACrC,cAAA,KAACzB;oBACC0B,yBAAW,KAACzB;oBACZ0B,SAASL;oBACTM,cAAYvB,aAAaoB;oBACzBb,SAASA;oBACTE,OAAOA;oBACPC,WAAWA;oBACXc,IAAIvB;8BAEHO;;;0BAGL,KAACX;gBACC4B,QAAQd;gBACRe,SAASR;gBACTS,YAAY;oBAAEH,IAAI;wBAAEI,OAAO;oBAAM;gBAAE;gBACnCC,eAAY;0BAEZ,cAAA,KAACxB;oBACCQ,qBAAqBA;oBACrBC,6BAA6BA;oBAC7BC,4BAA4BA;oBAC5Be,UAAUZ;oBACVa,UAAU,CAACC;wBACThB,uBAAuBgB;wBACvBpB,wBAAwB;oBAC1B;;;;;AAKV"}

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateVariable.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/TemplateVariable.tsx"],"names":[],"mappings":";AAeA,OAAO,EAGL,gBAAgB,EAEhB,WAAW,EACX,YAAY,EACZ,aAAa,EACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAA+B,cAAc,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACvG,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,aAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAcF,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,qBAAqB,eAWvE;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,SAAS,EAC/C,KAAK,EAAE,aAAa,GAAG,SAAS,EAChC,qBAAqB,EAAE,OAAO,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,GAC/D;IAED,KAAK,EAAE,aAAa,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IAEtC,eAAe,EAAE,cAAc,GAAG,cAAc,EAAE,CAAC;IAEnD,WAAW,EAAE,cAAc,EAAE,CAAC;CAC/B,CA2FA"}
+{"version":3,"file":"TemplateVariable.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/TemplateVariable.tsx"],"names":[],"mappings":";AAeA,OAAO,EAGL,gBAAgB,EAEhB,WAAW,EACX,YAAY,EACZ,aAAa,EACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAA+B,cAAc,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACvG,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAIvD,aAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAcF,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,qBAAqB,eAWvE;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,SAAS,EAC/C,KAAK,EAAE,aAAa,GAAG,SAAS,EAChC,qBAAqB,EAAE,OAAO,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,GAC/D;IAED,KAAK,EAAE,aAAa,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IAEtC,eAAe,EAAE,cAAc,GAAG,cAAc,EAAE,CAAC;IAEnD,WAAW,EAAE,cAAc,EAAE,CAAC;CAC/B,CA2FA"}

package/dist/components/Variables/TemplateVariable.js

@@ -16,6 +16,7 @@ import { LinearProgress, TextField, Autocomplete, Popper } from '@mui/material';
 import { DEFAULT_ALL_VALUE } from '@perses-dev/core';
 import { useListVariablePluginValues } from '@perses-dev/plugin-system';
 import { useTemplateVariable, useTemplateVariableActions } from '../../context';
+import { MAX_TEMPLATE_VARIABLE_WIDTH, MIN_TEMPLATE_VARIABLE_WIDTH } from '../../constants';
 function variableOptionToVariableValue(options) {
     if (options === null) {
         return null;
@@ -172,6 +173,18 @@ const StyledPopper = (props)=>/*#__PURE__*/ _jsx(Popper, {
         },
         placement: "bottom-start"
     });
+const LETTER_HSIZE = 8; // approximation
+const ARROW_OFFSET = 40; // right offset for list variables (= take into account the dropdown toggle size)
+const getWidthPx = (inputValue, kind)=>{
+    const width = (inputValue.length + 1) * LETTER_HSIZE + (kind == 'list' ? ARROW_OFFSET : 0);
+    if (width < MIN_TEMPLATE_VARIABLE_WIDTH) {
+        return MIN_TEMPLATE_VARIABLE_WIDTH;
+    } else if (width > MAX_TEMPLATE_VARIABLE_WIDTH) {
+        return MAX_TEMPLATE_VARIABLE_WIDTH;
+    } else {
+        return width;
+    }
+};
 function ListVariable({ name , source  }) {
     var _definition_spec_display;
     const ctx = useTemplateVariable(name, source);
@@ -180,6 +193,7 @@ function ListVariable({ name , source  }) {
     const { setVariableValue , setVariableLoading , setVariableOptions  } = useTemplateVariableActions();
     const { selectedOptions , value , loading , options , viewOptions  } = useListVariableState(definition === null || definition === void 0 ? void 0 : definition.spec, ctx.state, variablesOptionsQuery);
     const [inputValue, setInputValue] = useState('');
+    const [inputWidth, setInputWidth] = useState(MIN_TEMPLATE_VARIABLE_WIDTH);
     var _definition_spec_display_name;
     const title = (_definition_spec_display_name = (_definition_spec_display = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name;
     const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allowMultiple) === true;
@@ -215,21 +229,6 @@ function ListVariable({ name , source  }) {
         options,
         source
     ]);
-    const LETTER_HSIZE = 8; // approximation
-    const ARROW_OFFSET = 40;
-    const MIN_INPUT_WIDTH = 120;
-    const MAX_INPUT_WIDTH = 500;
-    const [inputWidth, setInputWidth] = useState(MIN_INPUT_WIDTH);
-    const handleInputResize = (newInputValue)=>{
-        const newInputValueSize = (newInputValue.length + 1) * LETTER_HSIZE + ARROW_OFFSET;
-        if (newInputValueSize < MIN_INPUT_WIDTH) {
-            setInputWidth(MIN_INPUT_WIDTH);
-        } else if (newInputValueSize > MAX_INPUT_WIDTH) {
-            setInputWidth(MAX_INPUT_WIDTH);
-        } else {
-            setInputWidth(newInputValueSize);
-        }
-    };
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(Autocomplete, {
@@ -274,7 +273,7 @@ function ListVariable({ name , source  }) {
                 onInputChange: (_, newInputValue)=>{
                     setInputValue(newInputValue);
                     if (!allowMultiple) {
-                        handleInputResize(newInputValue);
+                        setInputWidth(getWidthPx(newInputValue, 'list'));
                     }
                 },
                 options: viewOptions
@@ -290,6 +289,7 @@ function TextVariable({ name , source  }) {
     const definition = ctx.definition;
     var _state_value;
     const [tempValue, setTempValue] = useState((_state_value = state === null || state === void 0 ? void 0 : state.value) !== null && _state_value !== void 0 ? _state_value : '');
+    const [inputWidth, setInputWidth] = useState(getWidthPx(tempValue, 'text'));
     const { setVariableValue  } = useTemplateVariableActions();
     useEffect(()=>{
         var _state_value;
@@ -301,7 +301,11 @@ function TextVariable({ name , source  }) {
     return /*#__PURE__*/ _jsx(TextField, {
         title: tempValue,
         value: tempValue,
-        onChange: (e)=>setTempValue(e.target.value),
+        //onChange={(e) => setTempValue(e.target.value)}
+        onChange: (e)=>{
+            setTempValue(e.target.value);
+            setInputWidth(getWidthPx(e.target.value, 'text'));
+        },
         onBlur: ()=>setVariableValue(name, tempValue, source),
         placeholder: name,
         label: (_definition_spec_display_name = (_definition_spec_display = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name,
@@ -309,8 +313,12 @@ function TextVariable({ name , source  }) {
             readOnly: (_definition_spec_constant = definition === null || definition === void 0 ? void 0 : definition.spec.constant) !== null && _definition_spec_constant !== void 0 ? _definition_spec_constant : false
         },
         sx: {
+            width: `${inputWidth}px`,
             '& .MuiInputBase-root': {
                 minHeight: '38px'
+            },
+            '& .MuiInputBase-input': {
+                textOverflow: 'ellipsis'
             }
         }
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/TemplateVariable.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 { useEffect, useMemo, useState } from 'react';\nimport { LinearProgress, TextField, Autocomplete, Popper, PopperProps } from '@mui/material';\nimport {\n  DEFAULT_ALL_VALUE,\n  ListVariableDefinition,\n  ListVariableSpec,\n  TextVariableDefinition,\n  UnknownSpec,\n  VariableName,\n  VariableValue,\n} from '@perses-dev/core';\nimport { useListVariablePluginValues, VariableOption, VariableState } from '@perses-dev/plugin-system';\nimport { UseQueryResult } from '@tanstack/react-query';\nimport { useTemplateVariable, useTemplateVariableActions } from '../../context';\n\ntype TemplateVariableProps = {\n  name: VariableName;\n  source?: string;\n};\n\nfunction variableOptionToVariableValue(options: VariableOption | VariableOption[] | null): VariableValue {\n  if (options === null) {\n    return null;\n  }\n  if (Array.isArray(options)) {\n    return options.map((v) => {\n      return v.value;\n    });\n  }\n  return options.value;\n}\n\nexport function TemplateVariable({ name, source }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name, source);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} source={source} />;\n    case 'ListVariable':\n      return <ListVariable name={name} source={source} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\nexport function useListVariableState(\n  spec: ListVariableSpec<UnknownSpec> | undefined,\n  state: VariableState | undefined,\n  variablesOptionsQuery: Partial<UseQueryResult<VariableOption[]>>\n): {\n  // Value, Loading, Options are modified only when we want to save the changes made\n  value: VariableValue | undefined;\n  loading: boolean;\n  options: VariableOption[] | undefined;\n  // selectedOptions is/are the option(s) selected in the view\n  selectedOptions: VariableOption | VariableOption[];\n  // viewOptions are the options used in the view only (= options + All if allowed)\n  viewOptions: VariableOption[];\n} {\n  const allowMultiple = spec?.allowMultiple === true;\n  const allowAllValue = spec?.allowAllValue === true;\n  const sort = spec?.sort;\n  const loading = useMemo(() => variablesOptionsQuery.isFetching || false, [variablesOptionsQuery]);\n  const options = variablesOptionsQuery.data;\n\n  let value = state?.value;\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  // Sort the provided list of options according to the method defined\n  const sortedOptions = useMemo((): VariableOption[] => {\n    const opts = options ? [...options] : [];\n\n    if (!sort || sort === 'none') return opts;\n\n    switch (sort) {\n      case 'alphabetical-asc':\n        return opts.sort((a, b) => (a.label > b.label ? 1 : -1));\n      case 'alphabetical-desc':\n        return opts.sort((a, b) => (a.label > b.label ? -1 : 1));\n      case 'numerical-asc':\n        return opts.sort((a, b) => (parseInt(a.label) > parseInt(b.label) ? 1 : -1));\n      case 'numerical-desc':\n        return opts.sort((a, b) => (parseInt(a.label) < parseInt(b.label) ? 1 : -1));\n      case 'alphabetical-ci-asc':\n        return opts.sort((a, b) => (a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1));\n      case 'alphabetical-ci-desc':\n        return opts.sort((a, b) => (a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1));\n      default:\n        return opts;\n    }\n  }, [options, sort]);\n\n  const viewOptions = useMemo(() => {\n    let computedOptions = sortedOptions;\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  }, [allowAllValue, sortedOptions]);\n\n  const valueIsInOptions = useMemo(\n    () =>\n      Boolean(\n        viewOptions.find((v) => {\n          if (allowMultiple) {\n            return (value as string[]).includes(v.value);\n          }\n          return value === v.value;\n        })\n      ),\n    [viewOptions, value, allowMultiple]\n  );\n\n  value = useMemo(() => {\n    const firstOptionValue = viewOptions?.[allowAllValue ? 1 : 0]?.value;\n\n    // If there is no value but there are options, or the value is not in options, we set the value to the first option.\n    if (firstOptionValue) {\n      if (!valueIsInOptions || !value || value.length === 0) {\n        return allowMultiple ? [firstOptionValue] : firstOptionValue;\n      }\n    }\n\n    return value;\n  }, [viewOptions, value, valueIsInOptions, allowMultiple, allowAllValue]);\n\n  const selectedOptions = useMemo(() => {\n    // In the case Autocomplete.multiple equals false, Autocomplete.value expects a single object, not\n    // an array, hence this conditional\n    if (Array.isArray(value)) {\n      return viewOptions.filter((o) => {\n        return value?.includes(o.value);\n      });\n    } else {\n      return (\n        viewOptions.find((o) => {\n          return value === o.value;\n        }) ?? { value: '', label: '' }\n      );\n    }\n  }, [value, viewOptions]);\n\n  return { value, loading, options, selectedOptions, viewOptions };\n}\n\nconst StyledPopper = (props: PopperProps) => (\n  <Popper {...props} sx={{ minWidth: 'fit-content' }} placement=\"bottom-start\" />\n);\n\nfunction ListVariable({ name, source }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name, source);\n  const definition = ctx.definition as ListVariableDefinition;\n  const variablesOptionsQuery = useListVariablePluginValues(definition);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useTemplateVariableActions();\n  const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(\n    definition?.spec,\n    ctx.state,\n    variablesOptionsQuery\n  );\n  const [inputValue, setInputValue] = useState<string>('');\n\n  const title = definition?.spec.display?.name ?? name;\n  const allowMultiple = definition?.spec.allowMultiple === true;\n  const allowAllValue = definition?.spec.allowAllValue === true;\n\n  // Update value when changed\n  useEffect(() => {\n    if (value) {\n      setVariableValue(name, value, source);\n    }\n  }, [setVariableValue, name, value, source]);\n\n  // Update loading when changed\n  useEffect(() => {\n    setVariableLoading(name, loading, source);\n  }, [setVariableLoading, name, loading, source]);\n\n  // Update options when changed\n  useEffect(() => {\n    if (options) {\n      setVariableOptions(name, options, source);\n    }\n  }, [setVariableOptions, name, options, source]);\n\n  const LETTER_HSIZE = 8; // approximation\n  const ARROW_OFFSET = 40;\n  const MIN_INPUT_WIDTH = 120;\n  const MAX_INPUT_WIDTH = 500;\n  const [inputWidth, setInputWidth] = useState(MIN_INPUT_WIDTH);\n\n  const handleInputResize = (newInputValue: string) => {\n    const newInputValueSize = (newInputValue.length + 1) * LETTER_HSIZE + ARROW_OFFSET;\n    if (newInputValueSize < MIN_INPUT_WIDTH) {\n      setInputWidth(MIN_INPUT_WIDTH);\n    } else if (newInputValueSize > MAX_INPUT_WIDTH) {\n      setInputWidth(MAX_INPUT_WIDTH);\n    } else {\n      setInputWidth(newInputValueSize);\n    }\n  };\n\n  return (\n    <>\n      <Autocomplete\n        disablePortal\n        disableCloseOnSelect={allowMultiple}\n        multiple={allowMultiple}\n        fullWidth\n        limitTags={3}\n        size=\"small\"\n        disableClearable\n        PopperComponent={StyledPopper}\n        renderInput={(params) => {\n          return allowMultiple ? (\n            <TextField {...params} label={title} />\n          ) : (\n            <TextField {...params} label={title} style={{ width: `${inputWidth}px` }} />\n          );\n        }}\n        sx={{\n          '& .MuiInputBase-root': {\n            minHeight: '38px',\n          },\n          '& .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-sizeSmall': {\n            paddingY: '5px',\n            paddingLeft: '5px',\n          },\n        }}\n        value={selectedOptions}\n        onChange={(_, value) => {\n          if ((value === null || (Array.isArray(value) && value.length === 0)) && allowAllValue) {\n            setVariableValue(name, DEFAULT_ALL_VALUE, source);\n          } else {\n            setVariableValue(name, variableOptionToVariableValue(value), source);\n          }\n        }}\n        inputValue={inputValue}\n        onInputChange={(_, newInputValue) => {\n          setInputValue(newInputValue);\n          if (!allowMultiple) {\n            handleInputResize(newInputValue);\n          }\n        }}\n        options={viewOptions}\n      />\n      {loading && <LinearProgress />}\n    </>\n  );\n}\n\nfunction TextVariable({ name, source }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name, source);\n  const state = ctx.state;\n  const definition = ctx.definition as TextVariableDefinition;\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      title={tempValue as string}\n      value={tempValue}\n      onChange={(e) => setTempValue(e.target.value)}\n      onBlur={() => setVariableValue(name, tempValue, source)}\n      placeholder={name}\n      label={definition?.spec.display?.name ?? name}\n      InputProps={{\n        readOnly: definition?.spec.constant ?? false,\n      }}\n      sx={{\n        '& .MuiInputBase-root': {\n          minHeight: '38px',\n        },\n      }}\n    />\n  );\n}\n"],"names":["useEffect","useMemo","useState","LinearProgress","TextField","Autocomplete","Popper","DEFAULT_ALL_VALUE","useListVariablePluginValues","useTemplateVariable","useTemplateVariableActions","variableOptionToVariableValue","options","Array","isArray","map","v","value","TemplateVariable","name","source","ctx","kind","definition","TextVariable","ListVariable","div","useListVariableState","spec","state","variablesOptionsQuery","allowMultiple","allowAllValue","sort","loading","isFetching","data","sortedOptions","opts","a","b","label","parseInt","toLowerCase","viewOptions","computedOptions","valueIsInOptions","Boolean","find","includes","firstOptionValue","length","selectedOptions","filter","o","StyledPopper","props","sx","minWidth","placement","setVariableValue","setVariableLoading","setVariableOptions","inputValue","setInputValue","title","display","LETTER_HSIZE","ARROW_OFFSET","MIN_INPUT_WIDTH","MAX_INPUT_WIDTH","inputWidth","setInputWidth","handleInputResize","newInputValue","newInputValueSize","disablePortal","disableCloseOnSelect","multiple","fullWidth","limitTags","size","disableClearable","PopperComponent","renderInput","params","style","width","minHeight","paddingY","paddingLeft","onChange","_","onInputChange","tempValue","setTempValue","e","target","onBlur","placeholder","InputProps","readOnly","constant"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/TemplateVariable.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 { useEffect, useMemo, useState } from 'react';\nimport { LinearProgress, TextField, Autocomplete, Popper, PopperProps } from '@mui/material';\nimport {\n  DEFAULT_ALL_VALUE,\n  ListVariableDefinition,\n  ListVariableSpec,\n  TextVariableDefinition,\n  UnknownSpec,\n  VariableName,\n  VariableValue,\n} from '@perses-dev/core';\nimport { useListVariablePluginValues, VariableOption, VariableState } from '@perses-dev/plugin-system';\nimport { UseQueryResult } from '@tanstack/react-query';\nimport { useTemplateVariable, useTemplateVariableActions } from '../../context';\nimport { MAX_TEMPLATE_VARIABLE_WIDTH, MIN_TEMPLATE_VARIABLE_WIDTH } from '../../constants';\n\ntype TemplateVariableProps = {\n  name: VariableName;\n  source?: string;\n};\n\nfunction variableOptionToVariableValue(options: VariableOption | VariableOption[] | null): VariableValue {\n  if (options === null) {\n    return null;\n  }\n  if (Array.isArray(options)) {\n    return options.map((v) => {\n      return v.value;\n    });\n  }\n  return options.value;\n}\n\nexport function TemplateVariable({ name, source }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name, source);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} source={source} />;\n    case 'ListVariable':\n      return <ListVariable name={name} source={source} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\nexport function useListVariableState(\n  spec: ListVariableSpec<UnknownSpec> | undefined,\n  state: VariableState | undefined,\n  variablesOptionsQuery: Partial<UseQueryResult<VariableOption[]>>\n): {\n  // Value, Loading, Options are modified only when we want to save the changes made\n  value: VariableValue | undefined;\n  loading: boolean;\n  options: VariableOption[] | undefined;\n  // selectedOptions is/are the option(s) selected in the view\n  selectedOptions: VariableOption | VariableOption[];\n  // viewOptions are the options used in the view only (= options + All if allowed)\n  viewOptions: VariableOption[];\n} {\n  const allowMultiple = spec?.allowMultiple === true;\n  const allowAllValue = spec?.allowAllValue === true;\n  const sort = spec?.sort;\n  const loading = useMemo(() => variablesOptionsQuery.isFetching || false, [variablesOptionsQuery]);\n  const options = variablesOptionsQuery.data;\n\n  let value = state?.value;\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  // Sort the provided list of options according to the method defined\n  const sortedOptions = useMemo((): VariableOption[] => {\n    const opts = options ? [...options] : [];\n\n    if (!sort || sort === 'none') return opts;\n\n    switch (sort) {\n      case 'alphabetical-asc':\n        return opts.sort((a, b) => (a.label > b.label ? 1 : -1));\n      case 'alphabetical-desc':\n        return opts.sort((a, b) => (a.label > b.label ? -1 : 1));\n      case 'numerical-asc':\n        return opts.sort((a, b) => (parseInt(a.label) > parseInt(b.label) ? 1 : -1));\n      case 'numerical-desc':\n        return opts.sort((a, b) => (parseInt(a.label) < parseInt(b.label) ? 1 : -1));\n      case 'alphabetical-ci-asc':\n        return opts.sort((a, b) => (a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1));\n      case 'alphabetical-ci-desc':\n        return opts.sort((a, b) => (a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1));\n      default:\n        return opts;\n    }\n  }, [options, sort]);\n\n  const viewOptions = useMemo(() => {\n    let computedOptions = sortedOptions;\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  }, [allowAllValue, sortedOptions]);\n\n  const valueIsInOptions = useMemo(\n    () =>\n      Boolean(\n        viewOptions.find((v) => {\n          if (allowMultiple) {\n            return (value as string[]).includes(v.value);\n          }\n          return value === v.value;\n        })\n      ),\n    [viewOptions, value, allowMultiple]\n  );\n\n  value = useMemo(() => {\n    const firstOptionValue = viewOptions?.[allowAllValue ? 1 : 0]?.value;\n\n    // If there is no value but there are options, or the value is not in options, we set the value to the first option.\n    if (firstOptionValue) {\n      if (!valueIsInOptions || !value || value.length === 0) {\n        return allowMultiple ? [firstOptionValue] : firstOptionValue;\n      }\n    }\n\n    return value;\n  }, [viewOptions, value, valueIsInOptions, allowMultiple, allowAllValue]);\n\n  const selectedOptions = useMemo(() => {\n    // In the case Autocomplete.multiple equals false, Autocomplete.value expects a single object, not\n    // an array, hence this conditional\n    if (Array.isArray(value)) {\n      return viewOptions.filter((o) => {\n        return value?.includes(o.value);\n      });\n    } else {\n      return (\n        viewOptions.find((o) => {\n          return value === o.value;\n        }) ?? { value: '', label: '' }\n      );\n    }\n  }, [value, viewOptions]);\n\n  return { value, loading, options, selectedOptions, viewOptions };\n}\n\nconst StyledPopper = (props: PopperProps) => (\n  <Popper {...props} sx={{ minWidth: 'fit-content' }} placement=\"bottom-start\" />\n);\n\nconst LETTER_HSIZE = 8; // approximation\nconst ARROW_OFFSET = 40; // right offset for list variables (= take into account the dropdown toggle size)\nconst getWidthPx = (inputValue: string, kind: 'list' | 'text'): number => {\n  const width = (inputValue.length + 1) * LETTER_HSIZE + (kind == 'list' ? ARROW_OFFSET : 0);\n  if (width < MIN_TEMPLATE_VARIABLE_WIDTH) {\n    return MIN_TEMPLATE_VARIABLE_WIDTH;\n  } else if (width > MAX_TEMPLATE_VARIABLE_WIDTH) {\n    return MAX_TEMPLATE_VARIABLE_WIDTH;\n  } else {\n    return width;\n  }\n};\n\nfunction ListVariable({ name, source }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name, source);\n  const definition = ctx.definition as ListVariableDefinition;\n  const variablesOptionsQuery = useListVariablePluginValues(definition);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useTemplateVariableActions();\n  const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(\n    definition?.spec,\n    ctx.state,\n    variablesOptionsQuery\n  );\n  const [inputValue, setInputValue] = useState<string>('');\n  const [inputWidth, setInputWidth] = useState(MIN_TEMPLATE_VARIABLE_WIDTH);\n\n  const title = definition?.spec.display?.name ?? name;\n  const allowMultiple = definition?.spec.allowMultiple === true;\n  const allowAllValue = definition?.spec.allowAllValue === true;\n\n  // Update value when changed\n  useEffect(() => {\n    if (value) {\n      setVariableValue(name, value, source);\n    }\n  }, [setVariableValue, name, value, source]);\n\n  // Update loading when changed\n  useEffect(() => {\n    setVariableLoading(name, loading, source);\n  }, [setVariableLoading, name, loading, source]);\n\n  // Update options when changed\n  useEffect(() => {\n    if (options) {\n      setVariableOptions(name, options, source);\n    }\n  }, [setVariableOptions, name, options, source]);\n\n  return (\n    <>\n      <Autocomplete\n        disablePortal\n        disableCloseOnSelect={allowMultiple}\n        multiple={allowMultiple}\n        fullWidth\n        limitTags={3}\n        size=\"small\"\n        disableClearable\n        PopperComponent={StyledPopper}\n        renderInput={(params) => {\n          return allowMultiple ? (\n            <TextField {...params} label={title} />\n          ) : (\n            <TextField {...params} label={title} style={{ width: `${inputWidth}px` }} />\n          );\n        }}\n        sx={{\n          '& .MuiInputBase-root': {\n            minHeight: '38px',\n          },\n          '& .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-sizeSmall': {\n            paddingY: '5px',\n            paddingLeft: '5px',\n          },\n        }}\n        value={selectedOptions}\n        onChange={(_, value) => {\n          if ((value === null || (Array.isArray(value) && value.length === 0)) && allowAllValue) {\n            setVariableValue(name, DEFAULT_ALL_VALUE, source);\n          } else {\n            setVariableValue(name, variableOptionToVariableValue(value), source);\n          }\n        }}\n        inputValue={inputValue}\n        onInputChange={(_, newInputValue) => {\n          setInputValue(newInputValue);\n          if (!allowMultiple) {\n            setInputWidth(getWidthPx(newInputValue, 'list'));\n          }\n        }}\n        options={viewOptions}\n      />\n      {loading && <LinearProgress />}\n    </>\n  );\n}\n\nfunction TextVariable({ name, source }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name, source);\n  const state = ctx.state;\n  const definition = ctx.definition as TextVariableDefinition;\n  const [tempValue, setTempValue] = useState(state?.value ?? '');\n  const [inputWidth, setInputWidth] = useState(getWidthPx(tempValue as string, 'text'));\n  const { setVariableValue } = useTemplateVariableActions();\n\n  useEffect(() => {\n    setTempValue(state?.value ?? '');\n  }, [state?.value]);\n\n  return (\n    <TextField\n      title={tempValue as string}\n      value={tempValue}\n      //onChange={(e) => setTempValue(e.target.value)}\n      onChange={(e) => {\n        setTempValue(e.target.value);\n        setInputWidth(getWidthPx(e.target.value, 'text'));\n      }}\n      onBlur={() => setVariableValue(name, tempValue, source)}\n      placeholder={name}\n      label={definition?.spec.display?.name ?? name}\n      InputProps={{\n        readOnly: definition?.spec.constant ?? false,\n      }}\n      sx={{\n        width: `${inputWidth}px`,\n        '& .MuiInputBase-root': {\n          minHeight: '38px',\n        },\n        '& .MuiInputBase-input': {\n          textOverflow: 'ellipsis',\n        },\n      }}\n    />\n  );\n}\n"],"names":["useEffect","useMemo","useState","LinearProgress","TextField","Autocomplete","Popper","DEFAULT_ALL_VALUE","useListVariablePluginValues","useTemplateVariable","useTemplateVariableActions","MAX_TEMPLATE_VARIABLE_WIDTH","MIN_TEMPLATE_VARIABLE_WIDTH","variableOptionToVariableValue","options","Array","isArray","map","v","value","TemplateVariable","name","source","ctx","kind","definition","TextVariable","ListVariable","div","useListVariableState","spec","state","variablesOptionsQuery","allowMultiple","allowAllValue","sort","loading","isFetching","data","sortedOptions","opts","a","b","label","parseInt","toLowerCase","viewOptions","computedOptions","valueIsInOptions","Boolean","find","includes","firstOptionValue","length","selectedOptions","filter","o","StyledPopper","props","sx","minWidth","placement","LETTER_HSIZE","ARROW_OFFSET","getWidthPx","inputValue","width","setVariableValue","setVariableLoading","setVariableOptions","setInputValue","inputWidth","setInputWidth","title","display","disablePortal","disableCloseOnSelect","multiple","fullWidth","limitTags","size","disableClearable","PopperComponent","renderInput","params","style","minHeight","paddingY","paddingLeft","onChange","_","onInputChange","newInputValue","tempValue","setTempValue","e","target","onBlur","placeholder","InputProps","readOnly","constant","textOverflow"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAsB,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAYpE,wBAAgB,oBAAoB,gBAmBnC;AAED,wBAAgB,wBAAwB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,eAejG"}
+{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAsB,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAUpE,wBAAgB,oBAAoB,gBAmBnC;AAED,wBAAgB,wBAAwB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,eAcjG"}

package/dist/components/Variables/VariableList.js

@@ -13,9 +13,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { useTemplateExternalVariableDefinitions, useTemplateVariable, useTemplateVariableDefinitions } from '../../context';
+import { MAX_TEMPLATE_VARIABLE_WIDTH, MIN_TEMPLATE_VARIABLE_WIDTH } from '../../constants';
 import { TemplateVariable } from './TemplateVariable';
-const VARIABLE_INPUT_MIN_WIDTH = '120px';
-const VARIABLE_INPUT_MAX_WIDTH = '500px';
 export function TemplateVariableList() {
     const variableDefinitions = useTemplateVariableDefinitions();
     const externalVariableDefinitions = useTemplateExternalVariableDefinitions();
@@ -38,10 +37,9 @@ export function TemplateVariableListItem({ spec , source  }) {
     var _ref, _ref1;
     return /*#__PURE__*/ _jsx(Box, {
         display: ((_ctx_state = ctx.state) === null || _ctx_state === void 0 ? void 0 : _ctx_state.overridden) || ((_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.hidden) ? 'none' : undefined,
-        minWidth: VARIABLE_INPUT_MIN_WIDTH,
-        maxWidth: VARIABLE_INPUT_MAX_WIDTH,
-        marginBottom: 1,
-        marginRight: 1,
+        minWidth: `${MIN_TEMPLATE_VARIABLE_WIDTH}px`,
+        maxWidth: `${MAX_TEMPLATE_VARIABLE_WIDTH}px`,
+        flexShrink: 0,
         "data-testid": 'template-variable-' + spec.name,
         children: /*#__PURE__*/ _jsx(TemplateVariable, {
             name: spec.name,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/VariableList.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 } from '@mui/material';\nimport { VariableDefinition, VariableSpec } from '@perses-dev/core';\nimport {\n  ExternalVariableDefinition,\n  useTemplateExternalVariableDefinitions,\n  useTemplateVariable,\n  useTemplateVariableDefinitions,\n} from '../../context';\nimport { TemplateVariable } from './TemplateVariable';\n\nconst VARIABLE_INPUT_MIN_WIDTH = '120px';\nconst VARIABLE_INPUT_MAX_WIDTH = '500px';\n\nexport function TemplateVariableList() {\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useTemplateExternalVariableDefinitions();\n\n  return (\n    <>\n      {externalVariableDefinitions\n        .slice()\n        .reverse() // We reverse to have the most prioritized on top\n        .map((def) =>\n          def.definitions.map((v) => (\n            <TemplateVariableListItem key={v.spec.name + def.source} spec={v.spec} source={def.source} />\n          ))\n        )}\n      {variableDefinitions.map((v) => (\n        <TemplateVariableListItem key={v.spec.name} spec={v.spec} />\n      ))}\n    </>\n  );\n}\n\nexport function TemplateVariableListItem({ spec, source }: { spec: VariableSpec; source?: string }) {\n  const ctx = useTemplateVariable(spec.name, source);\n  return (\n    <Box\n      key={spec.name + source ?? ''}\n      display={ctx.state?.overridden || spec.display?.hidden ? 'none' : undefined}\n      minWidth={VARIABLE_INPUT_MIN_WIDTH}\n      maxWidth={VARIABLE_INPUT_MAX_WIDTH}\n      marginBottom={1}\n      marginRight={1}\n      data-testid={'template-variable-' + spec.name}\n    >\n      <TemplateVariable key={spec.name + source ?? ''} name={spec.name} source={source} />\n    </Box>\n  );\n}\n"],"names":["Box","useTemplateExternalVariableDefinitions","useTemplateVariable","useTemplateVariableDefinitions","TemplateVariable","VARIABLE_INPUT_MIN_WIDTH","VARIABLE_INPUT_MAX_WIDTH","TemplateVariableList","variableDefinitions","externalVariableDefinitions","slice","reverse","map","def","definitions","v","TemplateVariableListItem","spec","source","name","ctx","display","state","overridden","hidden","undefined","minWidth","maxWidth","marginBottom","marginRight","data-testid"],"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,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,SAEEC,sCAAsC,EACtCC,mBAAmB,EACnBC,8BAA8B,QACzB,gBAAgB;AACvB,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,MAAMC,2BAA2B;AACjC,MAAMC,2BAA2B;AAEjC,OAAO,SAASC;IACd,MAAMC,sBAA4CL;IAClD,MAAMM,8BAA4DR;IAElE,qBACE;;YACGQ,4BACEC,QACAC,UAAU,iDAAiD;aAC3DC,IAAI,CAACC,MACJA,IAAIC,YAAYF,IAAI,CAACG,kBACnB,KAACC;wBAAwDC,MAAMF,EAAEE;wBAAMC,QAAQL,IAAIK;uBAApDH,EAAEE,KAAKE,OAAON,IAAIK;YAGtDV,oBAAoBI,IAAI,CAACG,kBACxB,KAACC;oBAA2CC,MAAMF,EAAEE;mBAArBF,EAAEE,KAAKE;;;AAI9C;AAEA,OAAO,SAASH,yBAAyB,EAAEC,KAAI,EAAEC,OAAM,EAA2C;QAKnFE,YAAyBH;IAJtC,MAAMG,MAAMlB,oBAAoBe,KAAKE,MAAMD;QAWhBD,MARlBA;IAFT,qBACE,KAACjB;QAECqB,SAASD,CAAAA,CAAAA,aAAAA,IAAIE,mBAAJF,wBAAAA,KAAAA,IAAAA,WAAWG,UAAS,KAAKN,CAAAA,CAAAA,gBAAAA,KAAKI,qBAALJ,2BAAAA,KAAAA,IAAAA,cAAcO,MAAK,IAAI,SAASC;QAClEC,UAAUrB;QACVsB,UAAUrB;QACVsB,cAAc;QACdC,aAAa;QACbC,eAAa,uBAAuBb,KAAKE;kBAEzC,cAAA,KAACf;YAAgDe,MAAMF,KAAKE;YAAMD,QAAQA;WAAnDD,CAAAA,OAAAA,KAAKE,OAAOD,oBAAZD,kBAAAA,OAAsB;OARxCA,CAAAA,QAAAA,KAAKE,OAAOD,oBAAZD,mBAAAA,QAAsB;AAWjC"}
+{"version":3,"sources":["../../../src/components/Variables/VariableList.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 } from '@mui/material';\nimport { VariableDefinition, VariableSpec } from '@perses-dev/core';\nimport {\n  ExternalVariableDefinition,\n  useTemplateExternalVariableDefinitions,\n  useTemplateVariable,\n  useTemplateVariableDefinitions,\n} from '../../context';\nimport { MAX_TEMPLATE_VARIABLE_WIDTH, MIN_TEMPLATE_VARIABLE_WIDTH } from '../../constants';\nimport { TemplateVariable } from './TemplateVariable';\n\nexport function TemplateVariableList() {\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useTemplateExternalVariableDefinitions();\n\n  return (\n    <>\n      {externalVariableDefinitions\n        .slice()\n        .reverse() // We reverse to have the most prioritized on top\n        .map((def) =>\n          def.definitions.map((v) => (\n            <TemplateVariableListItem key={v.spec.name + def.source} spec={v.spec} source={def.source} />\n          ))\n        )}\n      {variableDefinitions.map((v) => (\n        <TemplateVariableListItem key={v.spec.name} spec={v.spec} />\n      ))}\n    </>\n  );\n}\n\nexport function TemplateVariableListItem({ spec, source }: { spec: VariableSpec; source?: string }) {\n  const ctx = useTemplateVariable(spec.name, source);\n  return (\n    <Box\n      key={spec.name + source ?? ''}\n      display={ctx.state?.overridden || spec.display?.hidden ? 'none' : undefined}\n      minWidth={`${MIN_TEMPLATE_VARIABLE_WIDTH}px`}\n      maxWidth={`${MAX_TEMPLATE_VARIABLE_WIDTH}px`}\n      flexShrink={0}\n      data-testid={'template-variable-' + spec.name}\n    >\n      <TemplateVariable key={spec.name + source ?? ''} name={spec.name} source={source} />\n    </Box>\n  );\n}\n"],"names":["Box","useTemplateExternalVariableDefinitions","useTemplateVariable","useTemplateVariableDefinitions","MAX_TEMPLATE_VARIABLE_WIDTH","MIN_TEMPLATE_VARIABLE_WIDTH","TemplateVariable","TemplateVariableList","variableDefinitions","externalVariableDefinitions","slice","reverse","map","def","definitions","v","TemplateVariableListItem","spec","source","name","ctx","display","state","overridden","hidden","undefined","minWidth","maxWidth","flexShrink","data-testid"],"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,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,SAEEC,sCAAsC,EACtCC,mBAAmB,EACnBC,8BAA8B,QACzB,gBAAgB;AACvB,SAASC,2BAA2B,EAAEC,2BAA2B,QAAQ,kBAAkB;AAC3F,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,OAAO,SAASC;IACd,MAAMC,sBAA4CL;IAClD,MAAMM,8BAA4DR;IAElE,qBACE;;YACGQ,4BACEC,QACAC,UAAU,iDAAiD;aAC3DC,IAAI,CAACC,MACJA,IAAIC,YAAYF,IAAI,CAACG,kBACnB,KAACC;wBAAwDC,MAAMF,EAAEE;wBAAMC,QAAQL,IAAIK;uBAApDH,EAAEE,KAAKE,OAAON,IAAIK;YAGtDV,oBAAoBI,IAAI,CAACG,kBACxB,KAACC;oBAA2CC,MAAMF,EAAEE;mBAArBF,EAAEE,KAAKE;;;AAI9C;AAEA,OAAO,SAASH,yBAAyB,EAAEC,KAAI,EAAEC,OAAM,EAA2C;QAKnFE,YAAyBH;IAJtC,MAAMG,MAAMlB,oBAAoBe,KAAKE,MAAMD;QAUhBD,MAPlBA;IAFT,qBACE,KAACjB;QAECqB,SAASD,CAAAA,CAAAA,aAAAA,IAAIE,mBAAJF,wBAAAA,KAAAA,IAAAA,WAAWG,UAAS,KAAKN,CAAAA,CAAAA,gBAAAA,KAAKI,qBAALJ,2BAAAA,KAAAA,IAAAA,cAAcO,MAAK,IAAI,SAASC;QAClEC,UAAU,CAAC,EAAErB,4BAA4B,EAAE,CAAC;QAC5CsB,UAAU,CAAC,EAAEvB,4BAA4B,EAAE,CAAC;QAC5CwB,YAAY;QACZC,eAAa,uBAAuBZ,KAAKE;kBAEzC,cAAA,KAACb;YAAgDa,MAAMF,KAAKE;YAAMD,QAAQA;WAAnDD,CAAAA,OAAAA,KAAKE,OAAOD,oBAAZD,kBAAAA,OAAsB;OAPxCA,CAAAA,QAAAA,KAAKE,OAAOD,oBAAZD,mBAAAA,QAAsB;AAUjC"}

package/dist/constants/index.d.ts

@@ -1,3 +1,4 @@
 export * from './grid-layout-config';
+export * from './styles';
 export * from './user-interface-text';
 //# sourceMappingURL=index.d.ts.map

package/dist/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAaA,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAaA,cAAc,sBAAsB,CAAC;AACrC,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC"}

package/dist/constants/index.js

@@ -11,6 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from './grid-layout-config';
+export * from './styles';
 export * from './user-interface-text';
 
 //# sourceMappingURL=index.js.map

package/dist/constants/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/constants/index.ts"],"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\nexport * from './grid-layout-config';\nexport * from './user-interface-text';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,uBAAuB;AACrC,cAAc,wBAAwB"}
+{"version":3,"sources":["../../src/constants/index.ts"],"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\nexport * from './grid-layout-config';\nexport * from './styles';\nexport * from './user-interface-text';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,uBAAuB;AACrC,cAAc,WAAW;AACzB,cAAc,wBAAwB"}

package/dist/constants/styles.d.ts

@@ -0,0 +1,5 @@
+import { SxProps, Theme } from '@mui/material';
+export declare const editButtonStyle: SxProps<Theme>;
+export declare const MIN_TEMPLATE_VARIABLE_WIDTH = 120;
+export declare const MAX_TEMPLATE_VARIABLE_WIDTH = 500;
+//# sourceMappingURL=styles.d.ts.map

package/dist/constants/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/constants/styles.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE/C,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,KAAK,CAM1C,CAAC;AAEF,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAC/C,eAAO,MAAM,2BAA2B,MAAM,CAAC"}

package/dist/constants/styles.js

@@ -0,0 +1,23 @@
+// 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.
+export const editButtonStyle = {
+    whiteSpace: 'nowrap',
+    minWidth: 'auto',
+    '& .MuiButton-startIcon': {
+        marginRight: 0.5
+    }
+};
+export const MIN_TEMPLATE_VARIABLE_WIDTH = 120;
+export const MAX_TEMPLATE_VARIABLE_WIDTH = 500;
+
+//# sourceMappingURL=styles.js.map

package/dist/constants/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants/styles.ts"],"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 { SxProps, Theme } from '@mui/material';\n\nexport const editButtonStyle: SxProps<Theme> = {\n  whiteSpace: 'nowrap',\n  minWidth: 'auto',\n  '& .MuiButton-startIcon': {\n    marginRight: 0.5,\n  },\n};\n\nexport const MIN_TEMPLATE_VARIABLE_WIDTH = 120;\nexport const MAX_TEMPLATE_VARIABLE_WIDTH = 500;\n"],"names":["editButtonStyle","whiteSpace","minWidth","marginRight","MIN_TEMPLATE_VARIABLE_WIDTH","MAX_TEMPLATE_VARIABLE_WIDTH"],"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;AAIjC,OAAO,MAAMA,kBAAkC;IAC7CC,YAAY;IACZC,UAAU;IACV,0BAA0B;QACxBC,aAAa;IACf;AACF,EAAE;AAEF,OAAO,MAAMC,8BAA8B,IAAI;AAC/C,OAAO,MAAMC,8BAA8B,IAAI"}

package/dist/constants/user-interface-text.d.ts

@@ -7,6 +7,7 @@ export declare const TOOLTIP_TEXT: {
     editVariables: string;
     refreshDashboard: string;
     refreshDashboardInterval: string;
+    viewJson: string;
     addPanelToGroup: string;
     deleteGroup: string;
     editGroup: string;

package/dist/constants/user-interface-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-interface-text.d.ts","sourceRoot":"","sources":["../../src/constants/user-interface-text.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;CAwBxB,CAAC;AAEF,eAAO,MAAM,eAAe;iCAEG,MAAM;6BACV,MAAM;2BACR,MAAM;+BACF,MAAM;6BACR,MAAM;2BAER,MAAM;gCACD,MAAM;6BACT,MAAM;2BACR,MAAM;CAC9B,CAAC"}
+{"version":3,"file":"user-interface-text.d.ts","sourceRoot":"","sources":["../../src/constants/user-interface-text.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;CAyBxB,CAAC;AAEF,eAAO,MAAM,eAAe;iCAEG,MAAM;6BACV,MAAM;2BACR,MAAM;+BACF,MAAM;6BACR,MAAM;2BAER,MAAM;gCACD,MAAM;6BACT,MAAM;2BACR,MAAM;CAC9B,CAAC"}

package/dist/constants/user-interface-text.js

@@ -20,6 +20,7 @@ export const TOOLTIP_TEXT = {
     editVariables: 'Edit variables',
     refreshDashboard: 'Refresh dashboard',
     refreshDashboardInterval: 'Auto refresh interval',
+    viewJson: 'View JSON',
     // Group buttons
     addPanelToGroup: 'Add panel to group',
     deleteGroup: 'Delete group',

package/dist/constants/user-interface-text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/constants/user-interface-text.ts"],"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\nexport const TOOLTIP_TEXT = {\n  // Toolbar buttons\n  addPanel: 'Add panel',\n  addGroup: 'Add panel group',\n  downloadDashboard: 'Download JSON',\n  editDatasources: 'Edit datasources',\n  editJson: 'Edit JSON',\n  editVariables: 'Edit variables',\n  refreshDashboard: 'Refresh dashboard',\n  refreshDashboardInterval: 'Auto refresh interval',\n  // Group buttons\n  addPanelToGroup: 'Add panel to group',\n  deleteGroup: 'Delete group',\n  editGroup: 'Edit group',\n  moveGroupDown: 'Move group down',\n  moveGroupUp: 'Move group up',\n  // Panel buttons\n  editPanel: 'Edit',\n  duplicatePanel: 'Duplicate',\n  deletePanel: 'Delete',\n  movePanel: 'Move',\n  // Variable editor buttons\n  refreshVariableValues: 'Refresh values',\n  copyVariableValues: 'Copy values to clipboard',\n};\n\nexport const ARIA_LABEL_TEXT = {\n  // Group buttons\n  addPanelToGroup: (groupName: string) => `add panel to group ${groupName}`,\n  deleteGroup: (groupName: string) => `delete group ${groupName}`,\n  editGroup: (groupName: string) => `edit group ${groupName}`,\n  moveGroupDown: (groupName: string) => `move group ${groupName} down`,\n  moveGroupUp: (groupName: string) => `move group ${groupName} up`,\n  // Panel buttons\n  editPanel: (panelName: string) => `edit panel ${panelName}`,\n  duplicatePanel: (panelName: string) => `duplicate panel ${panelName}`,\n  deletePanel: (panelName: string) => `delete panel ${panelName}`,\n  movePanel: (panelName: string) => `move panel ${panelName}`,\n};\n"],"names":["TOOLTIP_TEXT","addPanel","addGroup","downloadDashboard","editDatasources","editJson","editVariables","refreshDashboard","refreshDashboardInterval","addPanelToGroup","deleteGroup","editGroup","moveGroupDown","moveGroupUp","editPanel","duplicatePanel","deletePanel","movePanel","refreshVariableValues","copyVariableValues","ARIA_LABEL_TEXT","groupName","panelName"],"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,OAAO,MAAMA,eAAe;IAC1B,kBAAkB;IAClBC,UAAU;IACVC,UAAU;IACVC,mBAAmB;IACnBC,iBAAiB;IACjBC,UAAU;IACVC,eAAe;IACfC,kBAAkB;IAClBC,0BAA0B;IAC1B,gBAAgB;IAChBC,iBAAiB;IACjBC,aAAa;IACbC,WAAW;IACXC,eAAe;IACfC,aAAa;IACb,gBAAgB;IAChBC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;IACbC,WAAW;IACX,0BAA0B;IAC1BC,uBAAuB;IACvBC,oBAAoB;AACtB,EAAE;AAEF,OAAO,MAAMC,kBAAkB;IAC7B,gBAAgB;IAChBX,iBAAiB,CAACY,YAAsB,CAAC,mBAAmB,EAAEA,UAAU,CAAC;IACzEX,aAAa,CAACW,YAAsB,CAAC,aAAa,EAAEA,UAAU,CAAC;IAC/DV,WAAW,CAACU,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;IAC3DT,eAAe,CAACS,YAAsB,CAAC,WAAW,EAAEA,UAAU,KAAK,CAAC;IACpER,aAAa,CAACQ,YAAsB,CAAC,WAAW,EAAEA,UAAU,GAAG,CAAC;IAChE,gBAAgB;IAChBP,WAAW,CAACQ,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;IAC3DP,gBAAgB,CAACO,YAAsB,CAAC,gBAAgB,EAAEA,UAAU,CAAC;IACrEN,aAAa,CAACM,YAAsB,CAAC,aAAa,EAAEA,UAAU,CAAC;IAC/DL,WAAW,CAACK,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;AAC7D,EAAE"}
+{"version":3,"sources":["../../src/constants/user-interface-text.ts"],"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\nexport const TOOLTIP_TEXT = {\n  // Toolbar buttons\n  addPanel: 'Add panel',\n  addGroup: 'Add panel group',\n  downloadDashboard: 'Download JSON',\n  editDatasources: 'Edit datasources',\n  editJson: 'Edit JSON',\n  editVariables: 'Edit variables',\n  refreshDashboard: 'Refresh dashboard',\n  refreshDashboardInterval: 'Auto refresh interval',\n  viewJson: 'View JSON',\n  // Group buttons\n  addPanelToGroup: 'Add panel to group',\n  deleteGroup: 'Delete group',\n  editGroup: 'Edit group',\n  moveGroupDown: 'Move group down',\n  moveGroupUp: 'Move group up',\n  // Panel buttons\n  editPanel: 'Edit',\n  duplicatePanel: 'Duplicate',\n  deletePanel: 'Delete',\n  movePanel: 'Move',\n  // Variable editor buttons\n  refreshVariableValues: 'Refresh values',\n  copyVariableValues: 'Copy values to clipboard',\n};\n\nexport const ARIA_LABEL_TEXT = {\n  // Group buttons\n  addPanelToGroup: (groupName: string) => `add panel to group ${groupName}`,\n  deleteGroup: (groupName: string) => `delete group ${groupName}`,\n  editGroup: (groupName: string) => `edit group ${groupName}`,\n  moveGroupDown: (groupName: string) => `move group ${groupName} down`,\n  moveGroupUp: (groupName: string) => `move group ${groupName} up`,\n  // Panel buttons\n  editPanel: (panelName: string) => `edit panel ${panelName}`,\n  duplicatePanel: (panelName: string) => `duplicate panel ${panelName}`,\n  deletePanel: (panelName: string) => `delete panel ${panelName}`,\n  movePanel: (panelName: string) => `move panel ${panelName}`,\n};\n"],"names":["TOOLTIP_TEXT","addPanel","addGroup","downloadDashboard","editDatasources","editJson","editVariables","refreshDashboard","refreshDashboardInterval","viewJson","addPanelToGroup","deleteGroup","editGroup","moveGroupDown","moveGroupUp","editPanel","duplicatePanel","deletePanel","movePanel","refreshVariableValues","copyVariableValues","ARIA_LABEL_TEXT","groupName","panelName"],"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,OAAO,MAAMA,eAAe;IAC1B,kBAAkB;IAClBC,UAAU;IACVC,UAAU;IACVC,mBAAmB;IACnBC,iBAAiB;IACjBC,UAAU;IACVC,eAAe;IACfC,kBAAkB;IAClBC,0BAA0B;IAC1BC,UAAU;IACV,gBAAgB;IAChBC,iBAAiB;IACjBC,aAAa;IACbC,WAAW;IACXC,eAAe;IACfC,aAAa;IACb,gBAAgB;IAChBC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;IACbC,WAAW;IACX,0BAA0B;IAC1BC,uBAAuB;IACvBC,oBAAoB;AACtB,EAAE;AAEF,OAAO,MAAMC,kBAAkB;IAC7B,gBAAgB;IAChBX,iBAAiB,CAACY,YAAsB,CAAC,mBAAmB,EAAEA,UAAU,CAAC;IACzEX,aAAa,CAACW,YAAsB,CAAC,aAAa,EAAEA,UAAU,CAAC;IAC/DV,WAAW,CAACU,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;IAC3DT,eAAe,CAACS,YAAsB,CAAC,WAAW,EAAEA,UAAU,KAAK,CAAC;IACpER,aAAa,CAACQ,YAAsB,CAAC,WAAW,EAAEA,UAAU,GAAG,CAAC;IAChE,gBAAgB;IAChBP,WAAW,CAACQ,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;IAC3DP,gBAAgB,CAACO,YAAsB,CAAC,gBAAgB,EAAEA,UAAU,CAAC;IACrEN,aAAa,CAACM,YAAsB,CAAC,aAAa,EAAEA,UAAU,CAAC;IAC/DL,WAAW,CAACK,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;AAC7D,EAAE"}

package/dist/views/ViewDashboard/DashboardApp.js

@@ -20,7 +20,7 @@ import { useDashboard, useDiscardChangesConfirmationDialog, useEditMode } from '
 export const DashboardApp = (props)=>{
     const { dashboardResource , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly , isCreating  } = props;
     const chartsTheme = useChartsTheme();
-    const { setEditMode  } = useEditMode();
+    const { isEditMode , setEditMode  } = useEditMode();
     const { dashboard , setDashboard  } = useDashboard();
     const [originalDashboard, setOriginalDashboard] = useState(undefined);
     const { setSavedDatasources  } = useDatasourceStore();
@@ -100,6 +100,7 @@ export const DashboardApp = (props)=>{
                     /*#__PURE__*/ _jsx(DeletePanelDialog, {}),
                     /*#__PURE__*/ _jsx(DashboardDiscardChangesConfirmationDialog, {}),
                     /*#__PURE__*/ _jsx(EditJsonDialog, {
+                        isReadonly: !isEditMode,
                         disableMetadataEdition: !isCreating
                     }),
                     /*#__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 { ChartsProvider, ErrorAlert, ErrorBoundary, useChartsTheme } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport { useDatasourceStore } from '@perses-dev/plugin-system';\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  isCreating?: 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    isCreating,\n  } = props;\n\n  const chartsTheme = useChartsTheme();\n\n  const { setEditMode } = useEditMode();\n  const { dashboard, setDashboard } = useDashboard();\n  const [originalDashboard, setOriginalDashboard] = useState<DashboardResource | undefined>(undefined);\n  const { setSavedDatasources } = useDatasourceStore();\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    setSavedDatasources(dashboard.spec.datasources ?? {});\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        <ChartsProvider chartsTheme={chartsTheme} enablePinning={false}>\n          <PanelDrawer />\n        </ChartsProvider>\n        <PanelGroupDialog />\n        <DeletePanelGroupDialog />\n        <DeletePanelDialog />\n        <DashboardDiscardChangesConfirmationDialog />\n        <EditJsonDialog disableMetadataEdition={!isCreating} />\n        <SaveChangesConfirmationDialog />\n      </Box>\n    </Box>\n  );\n};\n"],"names":["useState","Box","ChartsProvider","ErrorAlert","ErrorBoundary","useChartsTheme","useDatasourceStore","PanelDrawer","Dashboard","PanelGroupDialog","DeletePanelGroupDialog","DashboardDiscardChangesConfirmationDialog","DashboardToolbar","DeletePanelDialog","EditJsonDialog","SaveChangesConfirmationDialog","useDashboard","useDiscardChangesConfirmationDialog","useEditMode","DashboardApp","props","dashboardResource","dashboardTitleComponent","emptyDashboardProps","onSave","onDiscard","initialVariableIsSticky","isReadonly","isCreating","chartsTheme","setEditMode","dashboard","setDashboard","originalDashboard","setOriginalDashboard","undefined","setSavedDatasources","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleDiscardChanges","onEditButtonClick","spec","datasources","onCancelButtonClick","JSON","stringify","onDiscardChanges","onCancel","sx","flexGrow","overflowX","overflowY","display","flexDirection","dashboardName","metadata","name","padding","theme","spacing","height","FallbackComponent","enablePinning","disableMetadataEdition"],"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,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,cAAc,EAAEC,UAAU,EAAEC,aAAa,EAAEC,cAAc,QAAQ,yBAAyB;AAEnG,SAASC,kBAAkB,QAAQ,4BAA4B;AAC/D,SACEC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,sBAAsB,EACtBC,yCAAyC,EACzCC,gBAAgB,EAChBC,iBAAiB,EAEjBC,cAAc,EACdC,6BAA6B,QACxB,mBAAmB;AAC1B,SAA0BC,YAAY,EAAEC,mCAAmC,EAAEC,WAAW,QAAQ,gBAAgB;AAahH,OAAO,MAAMC,eAAe,CAACC;IAC3B,MAAM,EACJC,kBAAiB,EACjBC,wBAAuB,EACvBC,oBAAmB,EACnBC,OAAM,EACNC,UAAS,EACTC,wBAAuB,EACvBC,WAAU,EACVC,WAAU,EACX,GAAGR;IAEJ,MAAMS,cAAcxB;IAEpB,MAAM,EAAEyB,YAAW,EAAE,GAAGZ;IACxB,MAAM,EAAEa,UAAS,EAAEC,aAAY,EAAE,GAAGhB;IACpC,MAAM,CAACiB,mBAAmBC,qBAAqB,GAAGlC,SAAwCmC;IAC1F,MAAM,EAAEC,oBAAmB,EAAE,GAAG9B;IAEhC,MAAM,EAAE+B,qCAAoC,EAAEC,sCAAqC,EAAE,GACnFrB;IAEF,MAAMsB,uBAAuB;QAC3B,gDAAgD;QAChD,IAAIN,mBAAmB;YACrBD,aAAaC;QACf;QACAH,YAAY;QACZQ;QACA,IAAIb,WAAW;YACbA,UAAUM;QACZ;IACF;IAEA,MAAMS,oBAAoB;QACxBV,YAAY;QACZI,qBAAqBH;YACDA;QAApBK,oBAAoBL,CAAAA,8BAAAA,UAAUU,KAAKC,yBAAfX,yCAAAA,8BAA8B,CAAC;IACrD;IAEA,MAAMY,sBAAsB;QAC1B,uCAAuC;QACvC,IAAIC,KAAKC,UAAUd,eAAea,KAAKC,UAAUZ,oBAAoB;YACnEH,YAAY;QACd,OAAO;YACLO,qCAAqC;gBACnCS,kBAAkB;oBAChBP;gBACF;gBACAQ,UAAU;oBACRT;gBACF;YACF;QACF;IACF;IAEA,qBACE,MAACrC;QACC+C,IAAI;YACFC,UAAU;YACVC,WAAW;YACXC,WAAW;YACXC,SAAS;YACTC,eAAe;QACjB;;0BAEA,KAACzC;gBACC0C,eAAejC,kBAAkBkC,SAASC;gBAC1ClC,yBAAyBA;gBACzBI,yBAAyBA;gBACzBF,QAAQA;gBACRG,YAAYA;gBACZa,mBAAmBA;gBACnBG,qBAAqBA;;0BAEvB,MAAC1C;gBAAI+C,IAAI;oBAAES,SAAS,CAACC,QAAUA,MAAMC,QAAQ;oBAAIC,QAAQ;gBAAO;;kCAC9D,KAACxD;wBAAcyD,mBAAmB1D;kCAChC,cAAA,KAACK;4BACCe,qBAAqB;gCACnBiB;gCACA,GAAGjB,mBAAmB;4BACxB;;;kCAGJ,KAACrB;wBAAe2B,aAAaA;wBAAaiC,eAAe;kCACvD,cAAA,KAACvD;;kCAEH,KAACE;kCACD,KAACC;kCACD,KAACG;kCACD,KAACF;kCACD,KAACG;wBAAeiD,wBAAwB,CAACnC;;kCACzC,KAACb;;;;;AAIT,EAAE"}
+{"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 { ChartsProvider, ErrorAlert, ErrorBoundary, useChartsTheme } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport { useDatasourceStore } from '@perses-dev/plugin-system';\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  isCreating?: 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    isCreating,\n  } = props;\n\n  const chartsTheme = useChartsTheme();\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { dashboard, setDashboard } = useDashboard();\n  const [originalDashboard, setOriginalDashboard] = useState<DashboardResource | undefined>(undefined);\n  const { setSavedDatasources } = useDatasourceStore();\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    setSavedDatasources(dashboard.spec.datasources ?? {});\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        <ChartsProvider chartsTheme={chartsTheme} enablePinning={false}>\n          <PanelDrawer />\n        </ChartsProvider>\n        <PanelGroupDialog />\n        <DeletePanelGroupDialog />\n        <DeletePanelDialog />\n        <DashboardDiscardChangesConfirmationDialog />\n        <EditJsonDialog isReadonly={!isEditMode} disableMetadataEdition={!isCreating} />\n        <SaveChangesConfirmationDialog />\n      </Box>\n    </Box>\n  );\n};\n"],"names":["useState","Box","ChartsProvider","ErrorAlert","ErrorBoundary","useChartsTheme","useDatasourceStore","PanelDrawer","Dashboard","PanelGroupDialog","DeletePanelGroupDialog","DashboardDiscardChangesConfirmationDialog","DashboardToolbar","DeletePanelDialog","EditJsonDialog","SaveChangesConfirmationDialog","useDashboard","useDiscardChangesConfirmationDialog","useEditMode","DashboardApp","props","dashboardResource","dashboardTitleComponent","emptyDashboardProps","onSave","onDiscard","initialVariableIsSticky","isReadonly","isCreating","chartsTheme","isEditMode","setEditMode","dashboard","setDashboard","originalDashboard","setOriginalDashboard","undefined","setSavedDatasources","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleDiscardChanges","onEditButtonClick","spec","datasources","onCancelButtonClick","JSON","stringify","onDiscardChanges","onCancel","sx","flexGrow","overflowX","overflowY","display","flexDirection","dashboardName","metadata","name","padding","theme","spacing","height","FallbackComponent","enablePinning","disableMetadataEdition"],"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,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,cAAc,EAAEC,UAAU,EAAEC,aAAa,EAAEC,cAAc,QAAQ,yBAAyB;AAEnG,SAASC,kBAAkB,QAAQ,4BAA4B;AAC/D,SACEC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,sBAAsB,EACtBC,yCAAyC,EACzCC,gBAAgB,EAChBC,iBAAiB,EAEjBC,cAAc,EACdC,6BAA6B,QACxB,mBAAmB;AAC1B,SAA0BC,YAAY,EAAEC,mCAAmC,EAAEC,WAAW,QAAQ,gBAAgB;AAahH,OAAO,MAAMC,eAAe,CAACC;IAC3B,MAAM,EACJC,kBAAiB,EACjBC,wBAAuB,EACvBC,oBAAmB,EACnBC,OAAM,EACNC,UAAS,EACTC,wBAAuB,EACvBC,WAAU,EACVC,WAAU,EACX,GAAGR;IAEJ,MAAMS,cAAcxB;IAEpB,MAAM,EAAEyB,WAAU,EAAEC,YAAW,EAAE,GAAGb;IACpC,MAAM,EAAEc,UAAS,EAAEC,aAAY,EAAE,GAAGjB;IACpC,MAAM,CAACkB,mBAAmBC,qBAAqB,GAAGnC,SAAwCoC;IAC1F,MAAM,EAAEC,oBAAmB,EAAE,GAAG/B;IAEhC,MAAM,EAAEgC,qCAAoC,EAAEC,sCAAqC,EAAE,GACnFtB;IAEF,MAAMuB,uBAAuB;QAC3B,gDAAgD;QAChD,IAAIN,mBAAmB;YACrBD,aAAaC;QACf;QACAH,YAAY;QACZQ;QACA,IAAId,WAAW;YACbA,UAAUO;QACZ;IACF;IAEA,MAAMS,oBAAoB;QACxBV,YAAY;QACZI,qBAAqBH;YACDA;QAApBK,oBAAoBL,CAAAA,8BAAAA,UAAUU,KAAKC,yBAAfX,yCAAAA,8BAA8B,CAAC;IACrD;IAEA,MAAMY,sBAAsB;QAC1B,uCAAuC;QACvC,IAAIC,KAAKC,UAAUd,eAAea,KAAKC,UAAUZ,oBAAoB;YACnEH,YAAY;QACd,OAAO;YACLO,qCAAqC;gBACnCS,kBAAkB;oBAChBP;gBACF;gBACAQ,UAAU;oBACRT;gBACF;YACF;QACF;IACF;IAEA,qBACE,MAACtC;QACCgD,IAAI;YACFC,UAAU;YACVC,WAAW;YACXC,WAAW;YACXC,SAAS;YACTC,eAAe;QACjB;;0BAEA,KAAC1C;gBACC2C,eAAelC,kBAAkBmC,SAASC;gBAC1CnC,yBAAyBA;gBACzBI,yBAAyBA;gBACzBF,QAAQA;gBACRG,YAAYA;gBACZc,mBAAmBA;gBACnBG,qBAAqBA;;0BAEvB,MAAC3C;gBAAIgD,IAAI;oBAAES,SAAS,CAACC,QAAUA,MAAMC,QAAQ;oBAAIC,QAAQ;gBAAO;;kCAC9D,KAACzD;wBAAc0D,mBAAmB3D;kCAChC,cAAA,KAACK;4BACCe,qBAAqB;gCACnBkB;gCACA,GAAGlB,mBAAmB;4BACxB;;;kCAGJ,KAACrB;wBAAe2B,aAAaA;wBAAakC,eAAe;kCACvD,cAAA,KAACxD;;kCAEH,KAACE;kCACD,KAACC;kCACD,KAACG;kCACD,KAACF;kCACD,KAACG;wBAAea,YAAY,CAACG;wBAAYkC,wBAAwB,CAACpC;;kCAClE,KAACb;;;;;AAIT,EAAE"}