@perses-dev/dashboards 0.43.0 → 0.44.0-rc0

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from '@mui/material';
 export interface EditVariablesButtonProps extends Pick<ButtonProps, 'fullWidth'> {
     /**
@@ -14,5 +13,5 @@ export interface EditVariablesButtonProps extends Pick<ButtonProps, 'fullWidth'>
      */
     label?: string;
 }
-export declare function EditVariablesButton({ variant, label, color, fullWidth, }: EditVariablesButtonProps): JSX.Element;
+export declare function EditVariablesButton({ variant, label, color, fullWidth, }: EditVariablesButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EditVariablesButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditVariablesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAcpD,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAgB,EAChB,KAAmB,EACnB,KAAiB,EACjB,SAAS,GACV,EAAE,wBAAwB,eAiD1B"}
+{"version":3,"file":"EditVariablesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAcpD,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAgB,EAChB,KAAmB,EACnB,KAAiB,EACjB,SAAS,GACV,EAAE,wBAAwB,2CAiD1B"}

package/dist/components/Variables/EditVariablesButton.js

@@ -19,12 +19,12 @@ import { useBuiltinVariableDefinitions } from '@perses-dev/plugin-system';
 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  }) {
+export function EditVariablesButton({ variant = 'text', label = 'Variables', color = 'primary', fullWidth }) {
     const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);
     const variableDefinitions = useTemplateVariableDefinitions();
     const externalVariableDefinitions = useTemplateExternalVariableDefinitions();
     const builtinVariableDefinitions = useBuiltinVariableDefinitions();
-    const { setVariableDefinitions  } = useTemplateVariableActions();
+    const { setVariableDefinitions } = useTemplateVariableActions();
     const openVariableEditor = ()=>{
         setIsVariableEditorOpen(true);
     };

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, 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"}
+{"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,UAAU,MAAM,EAChBC,QAAQ,WAAW,EACnBC,QAAQ,SAAS,EACjBC,SAAS,EACgB;IACzB,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGlB,SAAS;IACjE,MAAMmB,sBAA4CT;IAClD,MAAMU,8BAA4DZ;IAClE,MAAMa,6BAA0DhB;IAChE,MAAM,EAAEiB,sBAAsB,EAAE,GAAGb;IAEnC,MAAMc,qBAAqB;QACzBL,wBAAwB;IAC1B;IAEA,MAAMM,sBAAsB;QAC1BN,wBAAwB;IAC1B;IAEA,qBACE;;0BACE,KAACd;gBAAYqB,aAAanB,aAAaoB,aAAa;0BAClD,cAAA,KAACzB;oBACC0B,yBAAW,KAACzB;oBACZ0B,SAASL;oBACTM,cAAYvB,aAAaoB,aAAa;oBACtCb,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

@@ -1,12 +1,11 @@
-/// <reference types="react" />
 import { ListVariableSpec, UnknownSpec, VariableName, VariableValue } from '@perses-dev/core';
 import { VariableOption, VariableState } from '@perses-dev/plugin-system';
 import { UseQueryResult } from '@tanstack/react-query';
-declare type TemplateVariableProps = {
+type TemplateVariableProps = {
     name: VariableName;
     source?: string;
 };
-export declare function TemplateVariable({ name, source }: TemplateVariableProps): JSX.Element;
+export declare function TemplateVariable({ name, source }: TemplateVariableProps): import("react/jsx-runtime").JSX.Element;
 export declare function useListVariableState(spec: ListVariableSpec<UnknownSpec> | undefined, state: VariableState | undefined, variablesOptionsQuery: Partial<UseQueryResult<VariableOption[]>>): {
     value: VariableValue | undefined;
     loading: boolean;

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;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"}
+{"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,KAAK,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,2CAWvE;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

@@ -28,7 +28,7 @@ function variableOptionToVariableValue(options) {
     }
     return options.value;
 }
-export function TemplateVariable({ name , source  }) {
+export function TemplateVariable({ name, source }) {
     var _ctx_definition;
     const ctx = useTemplateVariable(name, source);
     const kind = (_ctx_definition = ctx.definition) === null || _ctx_definition === void 0 ? void 0 : _ctx_definition.kind;
@@ -55,10 +55,18 @@ export function useListVariableState(spec, state, variablesOptionsQuery) {
     const allowMultiple = (spec === null || spec === void 0 ? void 0 : spec.allowMultiple) === true;
     const allowAllValue = (spec === null || spec === void 0 ? void 0 : spec.allowAllValue) === true;
     const sort = spec === null || spec === void 0 ? void 0 : spec.sort;
-    const loading = useMemo(()=>variablesOptionsQuery.isFetching || false, [
-        variablesOptionsQuery
+    const loading = useMemo(()=>{
+        var _variablesOptionsQuery_isFetching;
+        return (_variablesOptionsQuery_isFetching = variablesOptionsQuery.isFetching) !== null && _variablesOptionsQuery_isFetching !== void 0 ? _variablesOptionsQuery_isFetching : false;
+    }, [
+        variablesOptionsQuery.isFetching
+    ]);
+    const options = useMemo(()=>{
+        var _variablesOptionsQuery_data;
+        return (_variablesOptionsQuery_data = variablesOptionsQuery.data) !== null && _variablesOptionsQuery_data !== void 0 ? _variablesOptionsQuery_data : [];
+    }, [
+        variablesOptionsQuery.data
     ]);
-    const options = variablesOptionsQuery.data;
     let value = state === null || state === void 0 ? void 0 : state.value;
     // Make sure value is an array if allowMultiple is true
     if (allowMultiple && !Array.isArray(value)) {
@@ -167,6 +175,7 @@ export function useListVariableState(spec, state, variablesOptionsQuery) {
     };
 }
 const StyledPopper = (props)=>/*#__PURE__*/ _jsx(Popper, {
+        placeholder: undefined,
         ...props,
         sx: {
             minWidth: 'fit-content'
@@ -185,17 +194,17 @@ const getWidthPx = (inputValue, kind)=>{
         return width;
     }
 };
-function ListVariable({ name , source  }) {
+function ListVariable({ name, source }) {
     var _definition_spec_display;
     const ctx = useTemplateVariable(name, source);
     const definition = ctx.definition;
     const variablesOptionsQuery = useListVariablePluginValues(definition);
-    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 { 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 title = (_definition_spec_display_name = definition === null || definition === void 0 ? void 0 : (_definition_spec_display = 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;
     const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allowAllValue) === true;
     // Update value when changed
@@ -282,7 +291,7 @@ function ListVariable({ name , source  }) {
         ]
     });
 }
-function TextVariable({ name , source  }) {
+function TextVariable({ name, source }) {
     var _definition_spec_display;
     const ctx = useTemplateVariable(name, source);
     const state = ctx.state;
@@ -290,7 +299,7 @@ function TextVariable({ name , source  }) {
     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();
+    const { setVariableValue } = useTemplateVariableActions();
     useEffect(()=>{
         var _state_value;
         setTempValue((_state_value = state === null || state === void 0 ? void 0 : state.value) !== null && _state_value !== void 0 ? _state_value : '');
@@ -308,7 +317,7 @@ function TextVariable({ name , source  }) {
         },
         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,
+        label: (_definition_spec_display_name = definition === null || definition === void 0 ? void 0 : (_definition_spec_display = 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,
         InputProps: {
             readOnly: (_definition_spec_constant = definition === null || definition === void 0 ? void 0 : definition.spec.constant) !== null && _definition_spec_constant !== void 0 ? _definition_spec_constant : false
         },

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';\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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"}
+{"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.isFetching]);\n  const options = useMemo(() => variablesOptionsQuery.data ?? [], [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 placeholder={undefined} {...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","placeholder","undefined","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","InputProps","readOnly","constant","textOverflow"],"mappings":"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"}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';
 import { VariableState } from '@perses-dev/plugin-system';
 import { ExternalVariableDefinition } from '../../context';
@@ -8,9 +7,9 @@ export declare function VariableEditor(props: {
     builtinVariableDefinitions: BuiltinVariableDefinition[];
     onChange: (variableDefinitions: VariableDefinition[]) => void;
     onCancel: () => void;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function VariableName(props: {
     name: string;
     state: VariableState | undefined;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=VariableEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":";AAoCA,OAAO,EAAU,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAUzF,OAAO,EAAsB,aAAa,EAAkB,MAAM,2BAA2B,CAAC;AAE9F,OAAO,EAAE,0BAA0B,EAAuC,MAAM,eAAe,CAAC;AAuBhG,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;IACxD,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eAkUA;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,eAoBrF"}
+{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":"AAoCA,OAAO,EAAU,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAUzF,OAAO,EAAsB,aAAa,EAAkB,MAAM,2BAA2B,CAAC;AAE9F,OAAO,EAAE,0BAA0B,EAAuC,MAAM,eAAe,CAAC;AAuBhG,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;IACxD,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,2CAmUA;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,2CAoBrF"}

package/dist/components/Variables/VariableEditor.js

@@ -61,7 +61,7 @@ export function VariableEditor(props) {
         variableDefinitions
     ]);
     const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
-    const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  } = useDiscardChangesConfirmationDialog();
+    const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } = useDiscardChangesConfirmationDialog();
     const handleCancel = ()=>{
         if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {
             openDiscardChangesConfirmationDialog({
@@ -141,7 +141,6 @@ export function VariableEditor(props) {
             draft.push(v);
         });
     };
-    var _getVariableLabelByKind, _v_spec_display_description, _getVariableLabelByKind1, _v_spec_display_description1;
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             currentEditingVariableDefinition && /*#__PURE__*/ _jsx(VariableEditorForm, {
@@ -243,9 +242,10 @@ export function VariableEditor(props) {
                                                         })
                                                     }),
                                                     /*#__PURE__*/ _jsx(TableBody, {
-                                                        children: variableDefinitions.map((v, idx)=>{
+                                                        children: variableDefinitions.map((v, idx)=>/*#__PURE__*/ {
                                                             var _v_spec_display, _v_spec_display1;
-                                                            /*#__PURE__*/ return _jsxs(TableRow, {
+                                                            var _getVariableLabelByKind, _v_spec_display_description;
+                                                            return _jsxs(TableRow, {
                                                                 children: [
                                                                     /*#__PURE__*/ _jsx(TableCell, {
                                                                         component: "th",
@@ -323,8 +323,7 @@ export function VariableEditor(props) {
                                         })
                                     ]
                                 }),
-                                externalVariableDefinitions && !externalVariableDefinitions.every((v)=>v.definitions.length === 0) && externalVariableDefinitions.map((extVar)=>{
-                                    return extVar.definitions.length > 0 && /*#__PURE__*/ _jsxs(Accordion, {
+                                externalVariableDefinitions && !externalVariableDefinitions.every((v)=>v.definitions.length === 0) && externalVariableDefinitions.map((extVar, key)=>extVar.definitions.length > 0 && /*#__PURE__*/ _jsxs(Accordion, {
                                         sx: (theme)=>({
                                                 '.MuiAccordionSummary-root': {
                                                     backgroundColor: theme.palette.background.lighter
@@ -405,9 +404,10 @@ export function VariableEditor(props) {
                                                                 })
                                                             }),
                                                             /*#__PURE__*/ _jsx(TableBody, {
-                                                                children: extVar.definitions.map((v)=>{
+                                                                children: extVar.definitions.map((v)=>/*#__PURE__*/ {
                                                                     var _v_spec_display, _v_spec_display1;
-                                                                    /*#__PURE__*/ return _jsxs(TableRow, {
+                                                                    var _getVariableLabelByKind, _v_spec_display_description;
+                                                                    return _jsxs(TableRow, {
                                                                         children: [
                                                                             /*#__PURE__*/ _jsx(TableCell, {
                                                                                 component: "th",
@@ -432,10 +432,10 @@ export function VariableEditor(props) {
                                                                                 })
                                                                             }),
                                                                             /*#__PURE__*/ _jsx(TableCell, {
-                                                                                children: (_getVariableLabelByKind1 = getVariableLabelByKind(v.kind)) !== null && _getVariableLabelByKind1 !== void 0 ? _getVariableLabelByKind1 : v.kind
+                                                                                children: (_getVariableLabelByKind = getVariableLabelByKind(v.kind)) !== null && _getVariableLabelByKind !== void 0 ? _getVariableLabelByKind : v.kind
                                                                             }),
                                                                             /*#__PURE__*/ _jsx(TableCell, {
-                                                                                children: (_v_spec_display_description1 = (_v_spec_display1 = v.spec.display) === null || _v_spec_display1 === void 0 ? void 0 : _v_spec_display1.description) !== null && _v_spec_display_description1 !== void 0 ? _v_spec_display_description1 : ''
+                                                                                children: (_v_spec_display_description = (_v_spec_display1 = v.spec.display) === null || _v_spec_display1 === void 0 ? void 0 : _v_spec_display1.description) !== null && _v_spec_display_description !== void 0 ? _v_spec_display_description : ''
                                                                             }),
                                                                             /*#__PURE__*/ _jsxs(TableCell, {
                                                                                 align: "right",
@@ -477,8 +477,7 @@ export function VariableEditor(props) {
                                                 })
                                             })
                                         ]
-                                    });
-                                }),
+                                    }, key)),
                                 builtinVariableDefinitions && /*#__PURE__*/ _jsx(BuiltinVariableAccordions, {
                                     builtinVariableDefinitions: builtinVariableDefinitions
                                 })
@@ -490,11 +489,11 @@ export function VariableEditor(props) {
         ]
     });
 }
-const TableCell = styled(MuiTableCell)(({ theme  })=>({
+const TableCell = styled(MuiTableCell)(({ theme })=>({
         borderBottom: `solid 1px ${theme.palette.divider}`
     }));
 export function VariableName(props) {
-    const { name , state  } = props;
+    const { name, state } = props;
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             !(state === null || state === void 0 ? void 0 : state.overridden) && `${name} `,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/VariableEditor.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, useMemo } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell as MuiTableCell,\n  Table,\n  TableHead,\n  Switch,\n  Typography,\n  IconButton,\n  Alert,\n  styled,\n  capitalize,\n  Tooltip,\n  Accordion,\n  AccordionSummary,\n  AccordionDetails,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { Action, BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\nimport ContentDuplicate from 'mdi-material-ui/ContentDuplicate';\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport ExpandMoreIcon from 'mdi-material-ui/ChevronUp';\n\nimport { VariableEditorForm, VariableState, VARIABLE_TYPES } from '@perses-dev/plugin-system';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ExternalVariableDefinition, useDiscardChangesConfirmationDialog } from '../../context';\nimport { hydrateTemplateVariableStates } from '../../context/TemplateVariableProvider/hydrationUtils';\nimport { BuiltinVariableAccordions } from './BuiltinVariableAccordions';\n\nfunction getVariableLabelByKind(kind: string) {\n  return VARIABLE_TYPES.find((variableType) => variableType.kind === kind)?.label;\n}\n\nfunction getValidation(variableDefinitions: VariableDefinition[]) {\n  const errors = [];\n\n  /**  Variable names must be unique */\n  const variableNames = variableDefinitions.map((variableDefinition) => variableDefinition.spec.name);\n  const uniqueVariableNames = new Set(variableNames);\n  if (variableNames.length !== uniqueVariableNames.size) {\n    errors.push('Variable names must be unique');\n  }\n  return {\n    errors: errors,\n    isValid: errors.length === 0,\n  };\n}\n\nexport function VariableEditor(props: {\n  variableDefinitions: VariableDefinition[];\n  externalVariableDefinitions: ExternalVariableDefinition[];\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n  onChange: (variableDefinitions: VariableDefinition[]) => void;\n  onCancel: () => void;\n}) {\n  const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n  const [variableEditIdx, setVariableEditIdx] = useState<number | null>(null);\n  const [variableFormAction, setVariableFormAction] = useState<Action>('update');\n\n  const externalVariableDefinitions = props.externalVariableDefinitions;\n  const builtinVariableDefinitions = props.builtinVariableDefinitions;\n  const validation = useMemo(() => getValidation(variableDefinitions), [variableDefinitions]);\n  const [variableState] = useMemo(() => {\n    return [hydrateTemplateVariableStates(variableDefinitions, {}, externalVariableDefinitions)];\n  }, [externalVariableDefinitions, variableDefinitions]);\n  const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n  const handleCancel = () => {\n    if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeVariable = (index: number) => {\n    setVariableDefinitions((draft) => {\n      draft.splice(index, 1);\n    });\n  };\n\n  const addVariable = () => {\n    setVariableFormAction('create');\n    setVariableDefinitions((draft) => {\n      draft.push({\n        kind: 'TextVariable',\n        spec: {\n          name: 'NewVariable',\n          value: '',\n        },\n      });\n    });\n    setVariableEditIdx(variableDefinitions.length);\n  };\n\n  const editVariable = (index: number) => {\n    setVariableFormAction('update');\n    setVariableEditIdx(index);\n  };\n\n  const toggleVariableVisibility = (index: number, visible: boolean) => {\n    setVariableDefinitions((draft) => {\n      const v = draft[index];\n      if (!v) {\n        return;\n      }\n      if (!v.spec.display) {\n        v.spec.display = {\n          name: v.spec.name,\n          hidden: false,\n        };\n      }\n      v.spec.display.hidden = visible === false;\n    });\n  };\n\n  const changeVariableOrder = (index: number, direction: 'up' | 'down') => {\n    setVariableDefinitions((draft) => {\n      if (direction === 'up') {\n        const prevElement = draft[index - 1];\n        const currentElement = draft[index];\n        if (index === 0 || !prevElement || !currentElement) {\n          return;\n        }\n        draft[index - 1] = currentElement;\n        draft[index] = prevElement;\n      } else {\n        const nextElement = draft[index + 1];\n        const currentElement = draft[index];\n        if (index === draft.length - 1 || !nextElement || !currentElement) {\n          return;\n        }\n        draft[index + 1] = currentElement;\n        draft[index] = nextElement;\n      }\n    });\n  };\n\n  const overrideVariable = (v: VariableDefinition) => {\n    setVariableDefinitions((draft) => {\n      draft.push(v);\n    });\n  };\n\n  return (\n    <>\n      {currentEditingVariableDefinition && (\n        <VariableEditorForm\n          initialVariableDefinition={currentEditingVariableDefinition}\n          initialAction={variableFormAction}\n          isDraft={true}\n          onSave={(definition: VariableDefinition) => {\n            setVariableDefinitions((draft) => {\n              draft[variableEditIdx] = definition;\n              setVariableEditIdx(null);\n            });\n          }}\n          onClose={() => {\n            if (variableFormAction === 'create') {\n              removeVariable(variableEditIdx);\n            }\n            setVariableEditIdx(null);\n          }}\n        />\n      )}\n      {!currentEditingVariableDefinition && (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">Edit Dashboard Variables</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.variableDefinitions === variableDefinitions || !validation.isValid}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(variableDefinitions);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                {!validation.isValid &&\n                  validation.errors.map((error) => (\n                    <Alert severity=\"error\" key={error}>\n                      {error}\n                    </Alert>\n                  ))}\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of variables\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Visibility</TableCell>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {variableDefinitions.map((v, idx) => (\n                        <TableRow key={v.spec.name}>\n                          <TableCell component=\"th\" scope=\"row\">\n                            <Switch\n                              checked={v.spec.display?.hidden !== true}\n                              onChange={(e) => {\n                                toggleVariableVisibility(idx, e.target.checked);\n                              }}\n                            />\n                          </TableCell>\n                          <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                            <VariableName name={v.spec.name} state={variableState.get({ name: v.spec.name })} />\n                          </TableCell>\n                          <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                          <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                          <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                            <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n                              <ArrowUp />\n                            </IconButton>\n                            <IconButton\n                              onClick={() => changeVariableOrder(idx, 'down')}\n                              disabled={idx === variableDefinitions.length - 1}\n                            >\n                              <ArrowDown />\n                            </IconButton>\n                            <IconButton onClick={() => editVariable(idx)}>\n                              <PencilIcon />\n                            </IconButton>\n                            <IconButton onClick={() => removeVariable(idx)}>\n                              <TrashIcon />\n                            </IconButton>\n                          </TableCell>\n                        </TableRow>\n                      ))}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginLeft: 'auto' }} onClick={addVariable}>\n                    Add Variable\n                  </Button>\n                </Box>\n              </Stack>\n              {externalVariableDefinitions &&\n                !externalVariableDefinitions.every((v) => v.definitions.length === 0) &&\n                externalVariableDefinitions.map(\n                  (extVar) =>\n                    extVar.definitions.length > 0 && (\n                      <Accordion\n                        sx={(theme) => ({\n                          '.MuiAccordionSummary-root': {\n                            backgroundColor: theme.palette.background.lighter,\n                          },\n                          '.MuiAccordionDetails-root': {\n                            backgroundColor: theme.palette.background.lighter,\n                          },\n                        })}\n                      >\n                        <AccordionSummary\n                          expandIcon={<ExpandMoreIcon />}\n                          aria-controls={extVar.source}\n                          id={extVar.source}\n                        >\n                          <Stack flexDirection=\"row\" alignItems=\"center\" justifyContent=\"start\">\n                            <>\n                              {extVar.tooltip ? (\n                                <Typography variant=\"h2\">\n                                  <InfoTooltip\n                                    title={extVar.tooltip.title || ''}\n                                    description={extVar.tooltip.description || ''}\n                                  >\n                                    <span>{capitalize(extVar.source)} Variables</span>\n                                  </InfoTooltip>\n                                </Typography>\n                              ) : (\n                                <Typography variant=\"h2\">{capitalize(extVar.source)} Variables</Typography>\n                              )}\n                              {extVar.editLink && (\n                                <IconButton href={extVar.editLink} target=\"_blank\">\n                                  <OpenInNewIcon fontSize=\"small\" />\n                                </IconButton>\n                              )}\n                            </>\n                          </Stack>\n                        </AccordionSummary>\n                        <AccordionDetails>\n                          <TableContainer>\n                            <Table sx={{ minWidth: 650 }} aria-label=\"table of external variables\">\n                              <TableHead>\n                                <TableRow>\n                                  <TableCell>Visibility</TableCell>\n                                  <TableCell>Name</TableCell>\n                                  <TableCell>Type</TableCell>\n                                  <TableCell>Description</TableCell>\n                                  <TableCell align=\"right\">Actions</TableCell>\n                                </TableRow>\n                              </TableHead>\n                              <TableBody>\n                                {extVar.definitions.map((v) => (\n                                  <TableRow key={v.spec.name}>\n                                    <TableCell component=\"th\" scope=\"row\">\n                                      <Switch checked={v.spec.display?.hidden !== true} disabled />\n                                    </TableCell>\n\n                                    <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                                      <VariableName\n                                        name={v.spec.name}\n                                        state={variableState.get({ name: v.spec.name, source: extVar.source })}\n                                      />\n                                    </TableCell>\n                                    <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                                    <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                                    <TableCell align=\"right\">\n                                      <Tooltip title=\"Override\">\n                                        <IconButton\n                                          onClick={() => overrideVariable(v)}\n                                          disabled={!!variableState.get({ name: v.spec.name })}\n                                        >\n                                          <ContentDuplicate />\n                                        </IconButton>\n                                      </Tooltip>\n                                      <IconButton disabled>\n                                        <ArrowUp />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <ArrowDown />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <PencilIcon />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <TrashIcon />\n                                      </IconButton>\n                                    </TableCell>\n                                  </TableRow>\n                                ))}\n                              </TableBody>\n                            </Table>\n                          </TableContainer>\n                        </AccordionDetails>\n                      </Accordion>\n                    )\n                )}\n              {builtinVariableDefinitions && (\n                <BuiltinVariableAccordions builtinVariableDefinitions={builtinVariableDefinitions} />\n              )}\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n  borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n\nexport function VariableName(props: { name: string; state: VariableState | undefined }) {\n  const { name, state } = props;\n  return (\n    <>\n      {!state?.overridden && `${name} `}\n      {!state?.overridden && state?.overriding && (\n        <Box fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {state?.overridden && (\n        <>\n          <Box color={(theme) => theme.palette.grey[500]}>{name}</Box>\n          <Box fontWeight=\"normal\" color={(theme) => theme.palette.grey[500]}>\n            (overridden)\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","MuiTableCell","Table","TableHead","Switch","Typography","IconButton","Alert","styled","capitalize","Tooltip","Accordion","AccordionSummary","AccordionDetails","AddIcon","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","ContentDuplicate","OpenInNewIcon","ExpandMoreIcon","VariableEditorForm","VARIABLE_TYPES","InfoTooltip","useDiscardChangesConfirmationDialog","hydrateTemplateVariableStates","BuiltinVariableAccordions","getVariableLabelByKind","kind","find","variableType","label","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","variableFormAction","setVariableFormAction","externalVariableDefinitions","builtinVariableDefinitions","validation","variableState","currentEditingVariableDefinition","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeVariable","index","draft","splice","addVariable","value","editVariable","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","overrideVariable","initialVariableDefinition","initialAction","isDraft","onSave","definition","onClose","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","onChange","color","overflowY","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight","VariableName","state","get","whiteSpace","startIcon","every","definitions","extVar","backgroundColor","background","lighter","expandIcon","aria-controls","source","id","flexDirection","justifyContent","tooltip","title","span","editLink","href","fontSize","overridden","overriding","primary","main","grey"],"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,EAAEC,OAAO,QAAQ,QAAQ;AAC1C,SACEC,MAAM,EACNC,KAAK,EACLC,GAAG,EACHC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,aAAaC,YAAY,EACzBC,KAAK,EACLC,SAAS,EACTC,MAAM,EACNC,UAAU,EACVC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,OAAO,EACPC,SAAS,EACTC,gBAAgB,EAChBC,gBAAgB,QACX,gBAAgB;AACvB,OAAOC,aAAa,uBAAuB;AAE3C,SAASC,QAAQ,QAAQ,YAAY;AACrC,OAAOC,gBAAgB,yBAAyB;AAChD,OAAOC,eAAe,2BAA2B;AACjD,OAAOC,aAAa,0BAA0B;AAC9C,OAAOC,eAAe,4BAA4B;AAClD,OAAOC,sBAAsB,mCAAmC;AAChE,OAAOC,mBAAmB,4BAA4B;AACtD,OAAOC,oBAAoB,4BAA4B;AAEvD,SAASC,kBAAkB,EAAiBC,cAAc,QAAQ,4BAA4B;AAC9F,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAAqCC,mCAAmC,QAAQ,gBAAgB;AAChG,SAASC,6BAA6B,QAAQ,wDAAwD;AACtG,SAASC,yBAAyB,QAAQ,8BAA8B;AAExE,SAASC,uBAAuBC,IAAY;QACnCN;IAAP,OAAOA,CAAAA,uBAAAA,eAAeO,KAAK,CAACC,eAAiBA,aAAaF,SAASA,mBAA5DN,kCAAAA,KAAAA,IAAAA,qBAAmES;AAC5E;AAEA,SAASC,cAAcC,mBAAyC;IAC9D,MAAMC,SAAS,EAAE;IAEjB,mCAAmC,GACnC,MAAMC,gBAAgBF,oBAAoBG,IAAI,CAACC,qBAAuBA,mBAAmBC,KAAKC;IAC9F,MAAMC,sBAAsB,IAAIC,IAAIN;IACpC,IAAIA,cAAcO,WAAWF,oBAAoBG,MAAM;QACrDT,OAAOU,KAAK;IACd;IACA,OAAO;QACLV,QAAQA;QACRW,SAASX,OAAOQ,WAAW;IAC7B;AACF;AAEA,OAAO,SAASI,eAAeC,KAM9B;IACC,MAAM,CAACd,qBAAqBe,uBAAuB,GAAGnC,SAASkC,MAAMd;IACrE,MAAM,CAACgB,iBAAiBC,mBAAmB,GAAG5D,SAAwB;IACtE,MAAM,CAAC6D,oBAAoBC,sBAAsB,GAAG9D,SAAiB;IAErE,MAAM+D,8BAA8BN,MAAMM;IAC1C,MAAMC,6BAA6BP,MAAMO;IACzC,MAAMC,aAAahE,QAAQ,IAAMyC,cAAcC,sBAAsB;QAACA;KAAoB;IAC1F,MAAM,CAACuB,cAAc,GAAGjE,QAAQ;QAC9B,OAAO;YAACkC,8BAA8BQ,qBAAqB,CAAC,GAAGoB;SAA6B;IAC9F,GAAG;QAACA;QAA6BpB;KAAoB;IACrD,MAAMwB,mCAAmC,OAAOR,oBAAoB,YAAYhB,mBAAmB,CAACgB,gBAAgB;IAEpH,MAAM,EAAES,qCAAoC,EAAEC,sCAAqC,EAAE,GACnFnC;IACF,MAAMoC,eAAe;QACnB,IAAIC,KAAKC,UAAUf,MAAMd,yBAAyB4B,KAAKC,UAAU7B,sBAAsB;YACrFyB,qCAAqC;gBACnCK,kBAAkB;oBAChBJ;oBACAZ,MAAMiB;gBACR;gBACAA,UAAU;oBACRL;gBACF;gBACAM,aACE;YACJ;QACF,OAAO;YACLlB,MAAMiB;QACR;IACF;IAEA,MAAME,iBAAiB,CAACC;QACtBnB,uBAAuB,CAACoB;YACtBA,MAAMC,OAAOF,OAAO;QACtB;IACF;IAEA,MAAMG,cAAc;QAClBlB,sBAAsB;QACtBJ,uBAAuB,CAACoB;YACtBA,MAAMxB,KAAK;gBACThB,MAAM;gBACNU,MAAM;oBACJC,MAAM;oBACNgC,OAAO;gBACT;YACF;QACF;QACArB,mBAAmBjB,oBAAoBS;IACzC;IAEA,MAAM8B,eAAe,CAACL;QACpBf,sBAAsB;QACtBF,mBAAmBiB;IACrB;IAEA,MAAMM,2BAA2B,CAACN,OAAeO;QAC/C1B,uBAAuB,CAACoB;YACtB,MAAMO,IAAIP,KAAK,CAACD,MAAM;YACtB,IAAI,CAACQ,GAAG;gBACN;YACF;YACA,IAAI,CAACA,EAAErC,KAAKsC,SAAS;gBACnBD,EAAErC,KAAKsC,UAAU;oBACfrC,MAAMoC,EAAErC,KAAKC;oBACbsC,QAAQ;gBACV;YACF;YACAF,EAAErC,KAAKsC,QAAQC,SAASH,YAAY;QACtC;IACF;IAEA,MAAMI,sBAAsB,CAACX,OAAeY;QAC1C/B,uBAAuB,CAACoB;YACtB,IAAIW,cAAc,MAAM;gBACtB,MAAMC,cAAcZ,KAAK,CAACD,QAAQ,EAAE;gBACpC,MAAMc,iBAAiBb,KAAK,CAACD,MAAM;gBACnC,IAAIA,UAAU,KAAK,CAACa,eAAe,CAACC,gBAAgB;oBAClD;gBACF;gBACAb,KAAK,CAACD,QAAQ,EAAE,GAAGc;gBACnBb,KAAK,CAACD,MAAM,GAAGa;YACjB,OAAO;gBACL,MAAME,cAAcd,KAAK,CAACD,QAAQ,EAAE;gBACpC,MAAMc,iBAAiBb,KAAK,CAACD,MAAM;gBACnC,IAAIA,UAAUC,MAAM1B,SAAS,KAAK,CAACwC,eAAe,CAACD,gBAAgB;oBACjE;gBACF;gBACAb,KAAK,CAACD,QAAQ,EAAE,GAAGc;gBACnBb,KAAK,CAACD,MAAM,GAAGe;YACjB;QACF;IACF;IAEA,MAAMC,mBAAmB,CAACR;QACxB3B,uBAAuB,CAACoB;YACtBA,MAAMxB,KAAK+B;QACb;IACF;QAmFoChD,yBACAgD,6BAgGUhD,0BACAgD;IAnL9C,qBACE;;YACGlB,kDACC,KAACpC;gBACC+D,2BAA2B3B;gBAC3B4B,eAAelC;gBACfmC,SAAS;gBACTC,QAAQ,CAACC;oBACPxC,uBAAuB,CAACoB;wBACtBA,KAAK,CAACnB,gBAAgB,GAAGuC;wBACzBtC,mBAAmB;oBACrB;gBACF;gBACAuC,SAAS;oBACP,IAAItC,uBAAuB,UAAU;wBACnCe,eAAejB;oBACjB;oBACAC,mBAAmB;gBACrB;;YAGH,CAACO,kDACA;;kCACE,MAAC/D;wBACCgG,IAAI;4BACFd,SAAS;4BACTe,YAAY;4BACZC,SAAS,CAACC,QAAUA,MAAMC,QAAQ,GAAG;4BACrCC,cAAc,CAACF,QAAU,CAAC,UAAU,EAAEA,MAAMG,QAAQC,QAAQ,CAAC;wBAC/D;;0CAEA,KAAC9F;gCAAW+F,SAAQ;0CAAK;;0CACzB,MAACzG;gCAAMsF,WAAU;gCAAMe,SAAS;gCAAGK,YAAW;;kDAC5C,KAAC3G;wCACC4G,UAAUrD,MAAMd,wBAAwBA,uBAAuB,CAACsB,WAAWV;wCAC3EqD,SAAQ;wCACRG,SAAS;4CACPtD,MAAMuD,SAASrE;wCACjB;kDACD;;kDAGD,KAACzC;wCAAO+G,OAAM;wCAAYL,SAAQ;wCAAWG,SAASzC;kDAAc;;;;;;kCAKxE,KAAClE;wBAAIkG,SAAS;wBAAGF,IAAI;4BAAEc,WAAW;wBAAS;kCACzC,cAAA,MAAC/G;4BAAMqG,SAAS;;8CACd,MAACrG;oCAAMqG,SAAS;;wCACb,CAACvC,WAAWV,WACXU,WAAWrB,OAAOE,IAAI,CAACqE,sBACrB,KAACpG;gDAAMqG,UAAS;0DACbD;+CAD0BA;sDAIjC,KAAC9G;sDACC,cAAA,MAACK;gDAAM0F,IAAI;oDAAEiB,UAAU;gDAAI;gDAAGC,cAAW;;kEACvC,KAAC3G;kEACC,cAAA,MAACJ;;8EACC,KAACC;8EAAU;;8EACX,KAACA;8EAAU;;8EACX,KAACA;8EAAU;;8EACX,KAACA;8EAAU;;8EACX,KAACA;oEAAU+G,OAAM;8EAAQ;;;;;kEAG7B,KAACjH;kEACEqC,oBAAoBG,IAAI,CAACuC,GAAGmC;gEAIZnC,iBAUDA;0EAbd,OAAA,MAAC9E;;kFACC,KAACC;wEAAUiH,WAAU;wEAAKC,OAAM;kFAC9B,cAAA,KAAC9G;4EACC+G,SAAStC,CAAAA,CAAAA,kBAAAA,EAAErC,KAAKsC,qBAAPD,6BAAAA,KAAAA,IAAAA,gBAAgBE,MAAK,MAAM;4EACpCyB,UAAU,CAACY;gFACTzC,yBAAyBqC,KAAKI,EAAEC,OAAOF;4EACzC;;;kFAGJ,KAACnH;wEAAUiH,WAAU;wEAAKC,OAAM;wEAAMtB,IAAI;4EAAE0B,YAAY;wEAAO;kFAC7D,cAAA,KAACC;4EAAa9E,MAAMoC,EAAErC,KAAKC;4EAAM+E,OAAO9D,cAAc+D,IAAI;gFAAEhF,MAAMoC,EAAErC,KAAKC;4EAAK;;;kFAEhF,KAACzC;kFAAW6B,CAAAA,0BAAAA,uBAAuBgD,EAAE/C,mBAAzBD,qCAAAA,0BAAkCgD,EAAE/C;;kFAChD,KAAC9B;kFAAW6E,CAAAA,8BAAAA,CAAAA,mBAAAA,EAAErC,KAAKsC,qBAAPD,8BAAAA,KAAAA,IAAAA,iBAAgBV,yBAAhBU,yCAAAA,8BAA+B;;kFAC3C,MAAC7E;wEAAU+G,OAAM;wEAAQnB,IAAI;4EAAE8B,YAAY;wEAAS;;0FAClD,KAACpH;gFAAWiG,SAAS,IAAMvB,oBAAoBgC,KAAK;gFAAOV,UAAUU,QAAQ;0FAC3E,cAAA,KAAC9F;;0FAEH,KAACZ;gFACCiG,SAAS,IAAMvB,oBAAoBgC,KAAK;gFACxCV,UAAUU,QAAQ7E,oBAAoBS,SAAS;0FAE/C,cAAA,KAACzB;;0FAEH,KAACb;gFAAWiG,SAAS,IAAM7B,aAAasC;0FACtC,cAAA,KAAChG;;0FAEH,KAACV;gFAAWiG,SAAS,IAAMnC,eAAe4C;0FACxC,cAAA,KAAC/F;;;;;+DA5BQ4D,EAAErC,KAAKC;;;;;;sDAoC9B,KAAC7C;4CAAIkF,SAAQ;sDACX,cAAA,KAACpF;gDAAO0G,SAAQ;gDAAYuB,yBAAW,KAAC7G;gDAAY8E,IAAI;oDAAES,YAAY;gDAAO;gDAAGE,SAAS/B;0DAAa;;;;;gCAKzGjB,+BACC,CAACA,4BAA4BqE,MAAM,CAAC/C,IAAMA,EAAEgD,YAAYjF,WAAW,MACnEW,4BAA4BjB,IAC1B,CAACwF;oCACCA,OAAAA,OAAOD,YAAYjF,SAAS,mBAC1B,MAACjC;wCACCiF,IAAI,CAACG,QAAW,CAAA;gDACd,6BAA6B;oDAC3BgC,iBAAiBhC,MAAMG,QAAQ8B,WAAWC;gDAC5C;gDACA,6BAA6B;oDAC3BF,iBAAiBhC,MAAMG,QAAQ8B,WAAWC;gDAC5C;4CACF,CAAA;;0DAEA,KAACrH;gDACCsH,0BAAY,KAAC5G;gDACb6G,iBAAeL,OAAOM;gDACtBC,IAAIP,OAAOM;0DAEX,cAAA,KAACzI;oDAAM2I,eAAc;oDAAMzC,YAAW;oDAAS0C,gBAAe;8DAC5D,cAAA;;4DACGT,OAAOU,wBACN,KAACnI;gEAAW+F,SAAQ;0EAClB,cAAA,KAAC3E;oEACCgH,OAAOX,OAAOU,QAAQC,SAAS;oEAC/BtE,aAAa2D,OAAOU,QAAQrE,eAAe;8EAE3C,cAAA,MAACuE;;4EAAMjI,WAAWqH,OAAOM;4EAAQ;;;;+EAIrC,MAAC/H;gEAAW+F,SAAQ;;oEAAM3F,WAAWqH,OAAOM;oEAAQ;;;4DAErDN,OAAOa,0BACN,KAACrI;gEAAWsI,MAAMd,OAAOa;gEAAUtB,QAAO;0EACxC,cAAA,KAAChG;oEAAcwH,UAAS;;;;;;;0DAMlC,KAAChI;0DACC,cAAA,KAAChB;8DACC,cAAA,MAACK;wDAAM0F,IAAI;4DAAEiB,UAAU;wDAAI;wDAAGC,cAAW;;0EACvC,KAAC3G;0EACC,cAAA,MAACJ;;sFACC,KAACC;sFAAU;;sFACX,KAACA;sFAAU;;sFACX,KAACA;sFAAU;;sFACX,KAACA;sFAAU;;sFACX,KAACA;4EAAU+G,OAAM;sFAAQ;;;;;0EAG7B,KAACjH;0EACEgI,OAAOD,YAAYvF,IAAI,CAACuC;wEAGFA,iBAUPA;kFAZd,OAAA,MAAC9E;;0FACC,KAACC;gFAAUiH,WAAU;gFAAKC,OAAM;0FAC9B,cAAA,KAAC9G;oFAAO+G,SAAStC,CAAAA,CAAAA,kBAAAA,EAAErC,KAAKsC,qBAAPD,6BAAAA,KAAAA,IAAAA,gBAAgBE,MAAK,MAAM;oFAAMuB,QAAQ;;;0FAG5D,KAACtG;gFAAUiH,WAAU;gFAAKC,OAAM;gFAAMtB,IAAI;oFAAE0B,YAAY;gFAAO;0FAC7D,cAAA,KAACC;oFACC9E,MAAMoC,EAAErC,KAAKC;oFACb+E,OAAO9D,cAAc+D,IAAI;wFAAEhF,MAAMoC,EAAErC,KAAKC;wFAAM2F,QAAQN,OAAOM;oFAAO;;;0FAGxE,KAACpI;0FAAW6B,CAAAA,2BAAAA,uBAAuBgD,EAAE/C,mBAAzBD,sCAAAA,2BAAkCgD,EAAE/C;;0FAChD,KAAC9B;0FAAW6E,CAAAA,+BAAAA,CAAAA,mBAAAA,EAAErC,KAAKsC,qBAAPD,8BAAAA,KAAAA,IAAAA,iBAAgBV,yBAAhBU,0CAAAA,+BAA+B;;0FAC3C,MAAC7E;gFAAU+G,OAAM;;kGACf,KAACrG;wFAAQ+H,OAAM;kGACb,cAAA,KAACnI;4FACCiG,SAAS,IAAMlB,iBAAiBR;4FAChCyB,UAAU,CAAC,CAAC5C,cAAc+D,IAAI;gGAAEhF,MAAMoC,EAAErC,KAAKC;4FAAK;sGAElD,cAAA,KAACrB;;;kGAGL,KAACd;wFAAWgG,QAAQ;kGAClB,cAAA,KAACpF;;kGAEH,KAACZ;wFAAWgG,QAAQ;kGAClB,cAAA,KAACnF;;kGAEH,KAACb;wFAAWgG,QAAQ;kGAClB,cAAA,KAACtF;;kGAEH,KAACV;wFAAWgG,QAAQ;kGAClB,cAAA,KAACrF;;;;;uEAhCQ4D,EAAErC,KAAKC;;;;;;;;;;gCA4CzCe,4CACC,KAAC5B;oCAA0B4B,4BAA4BA;;;;;;;;;AAQvE;AAEA,MAAMxD,YAAYQ,OAAOP,cAAc,CAAC,EAAE8F,MAAK,EAAE,GAAM,CAAA;QACrDE,cAAc,CAAC,UAAU,EAAEF,MAAMG,QAAQC,QAAQ,CAAC;IACpD,CAAA;AAEA,OAAO,SAASoB,aAAatE,KAAyD;IACpF,MAAM,EAAER,KAAI,EAAE+E,MAAK,EAAE,GAAGvE;IACxB,qBACE;;YACG,CAACuE,CAAAA,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOsB,UAAS,KAAK,CAAC,EAAErG,KAAK,CAAC,CAAC;YAChC,CAAC+E,CAAAA,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOsB,UAAS,KAAKtB,CAAAA,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOuB,UAAS,mBACrC,KAACnJ;gBAAI0H,YAAW;gBAASb,OAAO,CAACV,QAAUA,MAAMG,QAAQ8C,QAAQC;0BAAM;;YAIxEzB,CAAAA,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOsB,UAAS,mBACf;;kCACE,KAAClJ;wBAAI6G,OAAO,CAACV,QAAUA,MAAMG,QAAQgD,IAAI,CAAC,IAAI;kCAAGzG;;kCACjD,KAAC7C;wBAAI0H,YAAW;wBAASb,OAAO,CAACV,QAAUA,MAAMG,QAAQgD,IAAI,CAAC,IAAI;kCAAE;;;;;;AAO9E"}
+{"version":3,"sources":["../../../src/components/Variables/VariableEditor.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, useMemo } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell as MuiTableCell,\n  Table,\n  TableHead,\n  Switch,\n  Typography,\n  IconButton,\n  Alert,\n  styled,\n  capitalize,\n  Tooltip,\n  Accordion,\n  AccordionSummary,\n  AccordionDetails,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { Action, BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\nimport ContentDuplicate from 'mdi-material-ui/ContentDuplicate';\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport ExpandMoreIcon from 'mdi-material-ui/ChevronUp';\n\nimport { VariableEditorForm, VariableState, VARIABLE_TYPES } from '@perses-dev/plugin-system';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ExternalVariableDefinition, useDiscardChangesConfirmationDialog } from '../../context';\nimport { hydrateTemplateVariableStates } from '../../context/TemplateVariableProvider/hydrationUtils';\nimport { BuiltinVariableAccordions } from './BuiltinVariableAccordions';\n\nfunction getVariableLabelByKind(kind: string) {\n  return VARIABLE_TYPES.find((variableType) => variableType.kind === kind)?.label;\n}\n\nfunction getValidation(variableDefinitions: VariableDefinition[]) {\n  const errors = [];\n\n  /**  Variable names must be unique */\n  const variableNames = variableDefinitions.map((variableDefinition) => variableDefinition.spec.name);\n  const uniqueVariableNames = new Set(variableNames);\n  if (variableNames.length !== uniqueVariableNames.size) {\n    errors.push('Variable names must be unique');\n  }\n  return {\n    errors: errors,\n    isValid: errors.length === 0,\n  };\n}\n\nexport function VariableEditor(props: {\n  variableDefinitions: VariableDefinition[];\n  externalVariableDefinitions: ExternalVariableDefinition[];\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n  onChange: (variableDefinitions: VariableDefinition[]) => void;\n  onCancel: () => void;\n}) {\n  const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n  const [variableEditIdx, setVariableEditIdx] = useState<number | null>(null);\n  const [variableFormAction, setVariableFormAction] = useState<Action>('update');\n\n  const externalVariableDefinitions = props.externalVariableDefinitions;\n  const builtinVariableDefinitions = props.builtinVariableDefinitions;\n  const validation = useMemo(() => getValidation(variableDefinitions), [variableDefinitions]);\n  const [variableState] = useMemo(() => {\n    return [hydrateTemplateVariableStates(variableDefinitions, {}, externalVariableDefinitions)];\n  }, [externalVariableDefinitions, variableDefinitions]);\n  const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n  const handleCancel = () => {\n    if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeVariable = (index: number) => {\n    setVariableDefinitions((draft) => {\n      draft.splice(index, 1);\n    });\n  };\n\n  const addVariable = () => {\n    setVariableFormAction('create');\n    setVariableDefinitions((draft) => {\n      draft.push({\n        kind: 'TextVariable',\n        spec: {\n          name: 'NewVariable',\n          value: '',\n        },\n      });\n    });\n    setVariableEditIdx(variableDefinitions.length);\n  };\n\n  const editVariable = (index: number) => {\n    setVariableFormAction('update');\n    setVariableEditIdx(index);\n  };\n\n  const toggleVariableVisibility = (index: number, visible: boolean) => {\n    setVariableDefinitions((draft) => {\n      const v = draft[index];\n      if (!v) {\n        return;\n      }\n      if (!v.spec.display) {\n        v.spec.display = {\n          name: v.spec.name,\n          hidden: false,\n        };\n      }\n      v.spec.display.hidden = visible === false;\n    });\n  };\n\n  const changeVariableOrder = (index: number, direction: 'up' | 'down') => {\n    setVariableDefinitions((draft) => {\n      if (direction === 'up') {\n        const prevElement = draft[index - 1];\n        const currentElement = draft[index];\n        if (index === 0 || !prevElement || !currentElement) {\n          return;\n        }\n        draft[index - 1] = currentElement;\n        draft[index] = prevElement;\n      } else {\n        const nextElement = draft[index + 1];\n        const currentElement = draft[index];\n        if (index === draft.length - 1 || !nextElement || !currentElement) {\n          return;\n        }\n        draft[index + 1] = currentElement;\n        draft[index] = nextElement;\n      }\n    });\n  };\n\n  const overrideVariable = (v: VariableDefinition) => {\n    setVariableDefinitions((draft) => {\n      draft.push(v);\n    });\n  };\n\n  return (\n    <>\n      {currentEditingVariableDefinition && (\n        <VariableEditorForm\n          initialVariableDefinition={currentEditingVariableDefinition}\n          initialAction={variableFormAction}\n          isDraft={true}\n          onSave={(definition: VariableDefinition) => {\n            setVariableDefinitions((draft) => {\n              draft[variableEditIdx] = definition;\n              setVariableEditIdx(null);\n            });\n          }}\n          onClose={() => {\n            if (variableFormAction === 'create') {\n              removeVariable(variableEditIdx);\n            }\n            setVariableEditIdx(null);\n          }}\n        />\n      )}\n      {!currentEditingVariableDefinition && (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">Edit Dashboard Variables</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.variableDefinitions === variableDefinitions || !validation.isValid}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(variableDefinitions);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                {!validation.isValid &&\n                  validation.errors.map((error) => (\n                    <Alert severity=\"error\" key={error}>\n                      {error}\n                    </Alert>\n                  ))}\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of variables\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Visibility</TableCell>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {variableDefinitions.map((v, idx) => (\n                        <TableRow key={v.spec.name}>\n                          <TableCell component=\"th\" scope=\"row\">\n                            <Switch\n                              checked={v.spec.display?.hidden !== true}\n                              onChange={(e) => {\n                                toggleVariableVisibility(idx, e.target.checked);\n                              }}\n                            />\n                          </TableCell>\n                          <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                            <VariableName name={v.spec.name} state={variableState.get({ name: v.spec.name })} />\n                          </TableCell>\n                          <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                          <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                          <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                            <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n                              <ArrowUp />\n                            </IconButton>\n                            <IconButton\n                              onClick={() => changeVariableOrder(idx, 'down')}\n                              disabled={idx === variableDefinitions.length - 1}\n                            >\n                              <ArrowDown />\n                            </IconButton>\n                            <IconButton onClick={() => editVariable(idx)}>\n                              <PencilIcon />\n                            </IconButton>\n                            <IconButton onClick={() => removeVariable(idx)}>\n                              <TrashIcon />\n                            </IconButton>\n                          </TableCell>\n                        </TableRow>\n                      ))}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginLeft: 'auto' }} onClick={addVariable}>\n                    Add Variable\n                  </Button>\n                </Box>\n              </Stack>\n              {externalVariableDefinitions &&\n                !externalVariableDefinitions.every((v) => v.definitions.length === 0) &&\n                externalVariableDefinitions.map(\n                  (extVar, key) =>\n                    extVar.definitions.length > 0 && (\n                      <Accordion\n                        key={key}\n                        sx={(theme) => ({\n                          '.MuiAccordionSummary-root': {\n                            backgroundColor: theme.palette.background.lighter,\n                          },\n                          '.MuiAccordionDetails-root': {\n                            backgroundColor: theme.palette.background.lighter,\n                          },\n                        })}\n                      >\n                        <AccordionSummary\n                          expandIcon={<ExpandMoreIcon />}\n                          aria-controls={extVar.source}\n                          id={extVar.source}\n                        >\n                          <Stack flexDirection=\"row\" alignItems=\"center\" justifyContent=\"start\">\n                            <>\n                              {extVar.tooltip ? (\n                                <Typography variant=\"h2\">\n                                  <InfoTooltip\n                                    title={extVar.tooltip.title || ''}\n                                    description={extVar.tooltip.description || ''}\n                                  >\n                                    <span>{capitalize(extVar.source)} Variables</span>\n                                  </InfoTooltip>\n                                </Typography>\n                              ) : (\n                                <Typography variant=\"h2\">{capitalize(extVar.source)} Variables</Typography>\n                              )}\n                              {extVar.editLink && (\n                                <IconButton href={extVar.editLink} target=\"_blank\">\n                                  <OpenInNewIcon fontSize=\"small\" />\n                                </IconButton>\n                              )}\n                            </>\n                          </Stack>\n                        </AccordionSummary>\n                        <AccordionDetails>\n                          <TableContainer>\n                            <Table sx={{ minWidth: 650 }} aria-label=\"table of external variables\">\n                              <TableHead>\n                                <TableRow>\n                                  <TableCell>Visibility</TableCell>\n                                  <TableCell>Name</TableCell>\n                                  <TableCell>Type</TableCell>\n                                  <TableCell>Description</TableCell>\n                                  <TableCell align=\"right\">Actions</TableCell>\n                                </TableRow>\n                              </TableHead>\n                              <TableBody>\n                                {extVar.definitions.map((v) => (\n                                  <TableRow key={v.spec.name}>\n                                    <TableCell component=\"th\" scope=\"row\">\n                                      <Switch checked={v.spec.display?.hidden !== true} disabled />\n                                    </TableCell>\n\n                                    <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                                      <VariableName\n                                        name={v.spec.name}\n                                        state={variableState.get({ name: v.spec.name, source: extVar.source })}\n                                      />\n                                    </TableCell>\n                                    <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                                    <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                                    <TableCell align=\"right\">\n                                      <Tooltip title=\"Override\">\n                                        <IconButton\n                                          onClick={() => overrideVariable(v)}\n                                          disabled={!!variableState.get({ name: v.spec.name })}\n                                        >\n                                          <ContentDuplicate />\n                                        </IconButton>\n                                      </Tooltip>\n                                      <IconButton disabled>\n                                        <ArrowUp />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <ArrowDown />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <PencilIcon />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <TrashIcon />\n                                      </IconButton>\n                                    </TableCell>\n                                  </TableRow>\n                                ))}\n                              </TableBody>\n                            </Table>\n                          </TableContainer>\n                        </AccordionDetails>\n                      </Accordion>\n                    )\n                )}\n              {builtinVariableDefinitions && (\n                <BuiltinVariableAccordions builtinVariableDefinitions={builtinVariableDefinitions} />\n              )}\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n  borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n\nexport function VariableName(props: { name: string; state: VariableState | undefined }) {\n  const { name, state } = props;\n  return (\n    <>\n      {!state?.overridden && `${name} `}\n      {!state?.overridden && state?.overriding && (\n        <Box fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {state?.overridden && (\n        <>\n          <Box color={(theme) => theme.palette.grey[500]}>{name}</Box>\n          <Box fontWeight=\"normal\" color={(theme) => theme.palette.grey[500]}>\n            (overridden)\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","MuiTableCell","Table","TableHead","Switch","Typography","IconButton","Alert","styled","capitalize","Tooltip","Accordion","AccordionSummary","AccordionDetails","AddIcon","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","ContentDuplicate","OpenInNewIcon","ExpandMoreIcon","VariableEditorForm","VARIABLE_TYPES","InfoTooltip","useDiscardChangesConfirmationDialog","hydrateTemplateVariableStates","BuiltinVariableAccordions","getVariableLabelByKind","kind","find","variableType","label","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","variableFormAction","setVariableFormAction","externalVariableDefinitions","builtinVariableDefinitions","validation","variableState","currentEditingVariableDefinition","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeVariable","index","draft","splice","addVariable","value","editVariable","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","overrideVariable","initialVariableDefinition","initialAction","isDraft","onSave","definition","onClose","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","onChange","color","overflowY","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight","VariableName","state","get","whiteSpace","startIcon","every","definitions","extVar","key","backgroundColor","background","lighter","expandIcon","aria-controls","source","id","flexDirection","justifyContent","tooltip","title","span","editLink","href","fontSize","overridden","overriding","primary","main","grey"],"mappings":"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"}

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { VariableSpec } from '@perses-dev/core';
-export declare function TemplateVariableList(): JSX.Element;
+export declare function TemplateVariableList(): import("react/jsx-runtime").JSX.Element;
 export declare function TemplateVariableListItem({ spec, source }: {
     spec: VariableSpec;
     source?: string;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=VariableList.d.ts.map

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;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"}
+{"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,4CAmBnC;AAED,wBAAgB,wBAAwB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,2CAcjG"}

package/dist/components/Variables/VariableList.js

@@ -31,7 +31,7 @@ export function TemplateVariableList() {
         ]
     });
 }
-export function TemplateVariableListItem({ spec , source  }) {
+export function TemplateVariableListItem({ spec, source }) {
     var _ctx_state, _spec_display;
     const ctx = useTemplateVariable(spec.name, source);
     var _ref, _ref1;