@perses-dev/plugin-system 0.41.1 → 0.42.1

package/dist/components/PluginEditor/PluginEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, usePluginEditor } from './plugin-editor-api';\n\n/**\n * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property\n * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's\n * editor component. It takes care of transitioning from one plugin kind to another \"all at once\" so that when the\n * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a\n * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the\n * `usePluginEditor` hook that powers this component.\n */\nexport function PluginEditor(props: PluginEditorProps) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { value, pluginType, pluginKindLabel, onChange: _, isReadonly, ...others } = props;\n  const { pendingKind, isLoading, error, onKindChange, onSpecChange } = usePluginEditor(props);\n  return (\n    <Box {...others}>\n      <PluginKindSelect\n        fullWidth={false}\n        sx={{ mb: 1, minWidth: 120 }}\n        margin=\"dense\"\n        label={pluginKindLabel}\n        pluginType={pluginType}\n        disabled={isLoading}\n        value={pendingKind !== '' ? pendingKind : value.kind}\n        InputProps={{ readOnly: isReadonly }}\n        error={!!error}\n        helperText={error?.message}\n        onChange={onKindChange}\n      />\n      <PluginSpecEditor\n        pluginType={pluginType}\n        pluginKind={value.kind}\n        value={value.spec}\n        onChange={onSpecChange}\n        isReadonly={isReadonly}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","value","pluginType","pluginKindLabel","onChange","_","isReadonly","others","pendingKind","isLoading","error","onKindChange","onSpecChange","fullWidth","sx","mb","minWidth","margin","label","disabled","kind","InputProps","readOnly","helperText","message","pluginKind","spec"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AACpC,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAA4BC,eAAe,QAAQ,sBAAsB;AAEzE;;;;;;;CAOC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,6DAA6D;IAC7D,MAAM,EAAEC,MAAK,EAAEC,WAAU,EAAEC,gBAAe,EAAEC,UAAUC,EAAC,EAAEC,WAAU,EAAE,GAAGC,QAAQ,GAAGP;IACnF,MAAM,EAAEQ,YAAW,EAAEC,UAAS,EAAEC,MAAK,EAAEC,aAAY,EAAEC,aAAY,EAAE,GAAGd,gBAAgBE;IACtF,qBACE,MAACL;QAAK,GAAGY,MAAM;;0BACb,KAACX;gBACCiB,WAAW;gBACXC,IAAI;oBAAEC,IAAI;oBAAGC,UAAU;gBAAI;gBAC3BC,QAAO;gBACPC,OAAOf;gBACPD,YAAYA;gBACZiB,UAAUV;gBACVR,OAAOO,gBAAgB,KAAKA,cAAcP,MAAMmB;gBAChDC,YAAY;oBAAEC,UAAUhB;gBAAW;gBACnCI,OAAO,CAAC,CAACA;gBACTa,YAAYb,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOc;gBACnBpB,UAAUO;;0BAEZ,KAACd;gBACCK,YAAYA;gBACZuB,YAAYxB,MAAMmB;gBAClBnB,OAAOA,MAAMyB;gBACbtB,UAAUQ;gBACVN,YAAYA;;;;AAIpB"}
+{"version":3,"sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, usePluginEditor } from './plugin-editor-api';\n\n/**\n * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property\n * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's\n * editor component. It takes care of transitioning from one plugin kind to another \"all at once\" so that when the\n * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a\n * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the\n * `usePluginEditor` hook that powers this component.\n */\nexport function PluginEditor(props: PluginEditorProps) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { value, pluginType, pluginKindLabel, onChange: _, isReadonly, isExplore, ...others } = props;\n  const { pendingKind, isLoading, error, onKindChange, onSpecChange } = usePluginEditor(props);\n  return (\n    <Box {...others}>\n      <PluginKindSelect\n        fullWidth={false}\n        sx={{ mb: 1, minWidth: 120 }}\n        margin=\"dense\"\n        label={pluginKindLabel}\n        pluginType={pluginType}\n        disabled={isLoading}\n        value={pendingKind !== '' ? pendingKind : value.kind}\n        InputProps={{ readOnly: isReadonly }}\n        error={!!error}\n        helperText={error?.message}\n        onChange={onKindChange}\n      />\n      <PluginSpecEditor\n        isExplore={isExplore}\n        pluginType={pluginType}\n        pluginKind={value.kind}\n        value={value.spec}\n        onChange={onSpecChange}\n        isReadonly={isReadonly}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","value","pluginType","pluginKindLabel","onChange","_","isReadonly","isExplore","others","pendingKind","isLoading","error","onKindChange","onSpecChange","fullWidth","sx","mb","minWidth","margin","label","disabled","kind","InputProps","readOnly","helperText","message","pluginKind","spec"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AACpC,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAA4BC,eAAe,QAAQ,sBAAsB;AAEzE;;;;;;;CAOC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,6DAA6D;IAC7D,MAAM,EAAEC,MAAK,EAAEC,WAAU,EAAEC,gBAAe,EAAEC,UAAUC,EAAC,EAAEC,WAAU,EAAEC,UAAS,EAAE,GAAGC,QAAQ,GAAGR;IAC9F,MAAM,EAAES,YAAW,EAAEC,UAAS,EAAEC,MAAK,EAAEC,aAAY,EAAEC,aAAY,EAAE,GAAGf,gBAAgBE;IACtF,qBACE,MAACL;QAAK,GAAGa,MAAM;;0BACb,KAACZ;gBACCkB,WAAW;gBACXC,IAAI;oBAAEC,IAAI;oBAAGC,UAAU;gBAAI;gBAC3BC,QAAO;gBACPC,OAAOhB;gBACPD,YAAYA;gBACZkB,UAAUV;gBACVT,OAAOQ,gBAAgB,KAAKA,cAAcR,MAAMoB;gBAChDC,YAAY;oBAAEC,UAAUjB;gBAAW;gBACnCK,OAAO,CAAC,CAACA;gBACTa,YAAYb,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOc;gBACnBrB,UAAUQ;;0BAEZ,KAACf;gBACCU,WAAWA;gBACXL,YAAYA;gBACZwB,YAAYzB,MAAMoB;gBAClBpB,OAAOA,MAAM0B;gBACbvB,UAAUS;gBACVP,YAAYA;;;;AAIpB"}

package/dist/components/PluginEditor/plugin-editor-api.d.ts

@@ -8,6 +8,7 @@ export interface PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {
     pluginKindLabel: string;
     value: Definition<UnknownSpec>;
     isReadonly?: boolean;
+    isExplore?: boolean;
     onChange: (next: Definition<UnknownSpec>) => void;
 }
 /**

package/dist/components/PluginEditor/plugin-editor-api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin-editor-api.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,WAAW,EAAY,MAAM,kBAAkB,CAAC;AAGrE,OAAO,EAAe,UAAU,EAAE,MAAM,aAAa,CAAC;AAOtD,aAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC;IACxE,UAAU,EAAE,UAAU,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACnD;AAKD;;GAEG;AACH,oBAAY,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IAChG,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB;;;;;;;EAqG1D"}
+{"version":3,"file":"plugin-editor-api.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,WAAW,EAAY,MAAM,kBAAkB,CAAC;AAGrE,OAAO,EAAe,UAAU,EAAE,MAAM,aAAa,CAAC;AAOtD,aAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC;IACxE,UAAU,EAAE,UAAU,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACnD;AAKD;;GAEG;AACH,oBAAY,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IAChG,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB;;;;;;;EAqG1D"}

package/dist/components/PluginEditor/plugin-editor-api.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { BoxProps } from '@mui/material';\nimport { Definition, UnknownSpec, useEvent } from '@perses-dev/core';\nimport { useState, useRef, useEffect } from 'react';\nimport { produce } from 'immer';\nimport { PanelPlugin, PluginType } from '../../model';\nimport { PluginKindSelectProps } from '../PluginKindSelect/PluginKindSelect';\nimport { PluginSpecEditorProps } from '../PluginSpecEditor/PluginSpecEditor';\nimport { usePlugin, usePluginRegistry } from '../../runtime';\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  pluginType: PluginType;\n  pluginKindLabel: string;\n  value: Definition<UnknownSpec>;\n  isReadonly?: boolean;\n  onChange: (next: Definition<UnknownSpec>) => void;\n}\n\ntype PreviousSpecState = Record<string, Record<string, UnknownSpec>>;\ntype HideQueryEditorState = Record<string, boolean>;\n\n/**\n * Props needed by the usePluginEditor hook.\n */\nexport type UsePluginEditorProps = Pick<PluginEditorProps, 'pluginType' | 'value' | 'onChange'> & {\n  onHideQueryEditorChange?: (isHidden: boolean) => void;\n};\n\n/**\n * Returns the state/handlers that power the `PluginEditor` component. Useful for custom components that want to provide\n * a different UI, but want the same behavior of changing `kind` and `spec` together on plugin kind changes. Also\n * remembers previous `spec` values that it's seen, allowing and restores those values if a user switches the plugin\n * kind back.\n */\nexport function usePluginEditor(props: UsePluginEditorProps) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const { pluginType, value, onHideQueryEditorChange = () => {} } = props; // setting onHideQueryEditorChange to empty function here because useEvent requires a function\n\n  // Keep a stable reference so we don't run the effect below when we don't need to\n  const onChange = useEvent(props.onChange);\n  const onHideQuery = useEvent(onHideQueryEditorChange);\n\n  // The previous spec state for PluginType and kind and a helper function for remembering current values\n  const prevSpecState = useRef<PreviousSpecState>({\n    [pluginType]: { [value.kind]: value.spec },\n  });\n  const rememberCurrentSpecState = useEvent(() => {\n    let byPluginType = prevSpecState.current[pluginType];\n    if (byPluginType === undefined) {\n      byPluginType = {};\n      prevSpecState.current[pluginType] = byPluginType;\n    }\n    byPluginType[value.kind] = value.spec;\n  });\n\n  // The previous hide query state for each panel kind\n  const hideQueryState = useRef<HideQueryEditorState>({\n    [value.kind]: false,\n  });\n\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPluginKind = defaultPluginKinds?.[pluginType];\n  const initPendingKind = !value.kind && defaultPluginKind ? defaultPluginKind : '';\n\n  // When kind changes and we haven't loaded that plugin before, we will need to enter a \"pending\" state so that we\n  // can generate proper initial spec values that match the new plugin kind\n  const [pendingKind, setPendingKind] = useState(initPendingKind);\n  const { data: plugin, isFetching, error } = usePlugin(pluginType, pendingKind);\n\n  useEffect(() => {\n    // Nothing to do if no new plugin kind is pending\n    if (pendingKind === '') return;\n\n    // Can't get spec value until we have a plugin\n    if (plugin === undefined) return;\n\n    // Fire an onChange to change to the pending kind with initial values from the plugin\n    rememberCurrentSpecState();\n    onChange({\n      kind: pendingKind,\n      spec: plugin.createInitialOptions(),\n    });\n\n    if (pluginType === 'Panel') {\n      const panelPlugin = plugin as PanelPlugin;\n      hideQueryState.current[pendingKind] = !!panelPlugin.hideQueryEditor;\n      if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.kind]) {\n        onHideQuery(!!panelPlugin.hideQueryEditor);\n      }\n    }\n\n    setPendingKind('');\n  }, [pendingKind, plugin, rememberCurrentSpecState, onChange, onHideQuery, hideQueryState, pluginType, value.kind]);\n\n  /**\n   * When the user tries to change the plugin kind, make sure we have the correct spec for that plugin kind before we\n   * make the switch.\n   */\n  const onKindChange: PluginKindSelectProps['onChange'] = (e) => {\n    const nextKind = e.target.value;\n\n    // If we already have state for this plugin type/kind from a previous selection, just use it\n    const previousState = prevSpecState.current[pluginType]?.[nextKind];\n    if (previousState !== undefined) {\n      rememberCurrentSpecState();\n      onChange({\n        kind: nextKind,\n        spec: previousState,\n      });\n    } else {\n      // Otherwise, kick off the async loading process\n      setPendingKind(nextKind);\n    }\n\n    if (\n      pluginType === 'Panel' &&\n      hideQueryState.current[nextKind] !== undefined &&\n      hideQueryState.current[value.kind] !== hideQueryState.current[nextKind]\n    ) {\n      onHideQuery(!!hideQueryState.current[nextKind]);\n    }\n  };\n\n  /**\n   * Spec changes are independent and always just set the spec state.\n   */\n  const onSpecChange: PluginSpecEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.spec = next;\n      })\n    );\n  };\n\n  return { pendingKind, isLoading: isFetching, error, onKindChange, onSpecChange, rememberCurrentSpecState };\n}\n"],"names":["useEvent","useState","useRef","useEffect","produce","usePlugin","usePluginRegistry","usePluginEditor","props","pluginType","value","onHideQueryEditorChange","onChange","onHideQuery","prevSpecState","kind","spec","rememberCurrentSpecState","byPluginType","current","undefined","hideQueryState","defaultPluginKinds","defaultPluginKind","initPendingKind","pendingKind","setPendingKind","data","plugin","isFetching","error","createInitialOptions","panelPlugin","hideQueryEditor","onKindChange","e","nextKind","target","previousState","onSpecChange","next","draft","isLoading"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { BoxProps } from '@mui/material';\nimport { Definition, UnknownSpec, useEvent } from '@perses-dev/core';\nimport { useState, useRef, useEffect } from 'react';\nimport { produce } from 'immer';\nimport { PanelPlugin, PluginType } from '../../model';\nimport { PluginKindSelectProps } from '../PluginKindSelect/PluginKindSelect';\nimport { PluginSpecEditorProps } from '../PluginSpecEditor/PluginSpecEditor';\nimport { usePlugin, usePluginRegistry } from '../../runtime';\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  pluginType: PluginType;\n  pluginKindLabel: string;\n  value: Definition<UnknownSpec>;\n  isReadonly?: boolean;\n  isExplore?: boolean;\n  onChange: (next: Definition<UnknownSpec>) => void;\n}\n\ntype PreviousSpecState = Record<string, Record<string, UnknownSpec>>;\ntype HideQueryEditorState = Record<string, boolean>;\n\n/**\n * Props needed by the usePluginEditor hook.\n */\nexport type UsePluginEditorProps = Pick<PluginEditorProps, 'pluginType' | 'value' | 'onChange'> & {\n  onHideQueryEditorChange?: (isHidden: boolean) => void;\n};\n\n/**\n * Returns the state/handlers that power the `PluginEditor` component. Useful for custom components that want to provide\n * a different UI, but want the same behavior of changing `kind` and `spec` together on plugin kind changes. Also\n * remembers previous `spec` values that it's seen, allowing and restores those values if a user switches the plugin\n * kind back.\n */\nexport function usePluginEditor(props: UsePluginEditorProps) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const { pluginType, value, onHideQueryEditorChange = () => {} } = props; // setting onHideQueryEditorChange to empty function here because useEvent requires a function\n\n  // Keep a stable reference so we don't run the effect below when we don't need to\n  const onChange = useEvent(props.onChange);\n  const onHideQuery = useEvent(onHideQueryEditorChange);\n\n  // The previous spec state for PluginType and kind and a helper function for remembering current values\n  const prevSpecState = useRef<PreviousSpecState>({\n    [pluginType]: { [value.kind]: value.spec },\n  });\n  const rememberCurrentSpecState = useEvent(() => {\n    let byPluginType = prevSpecState.current[pluginType];\n    if (byPluginType === undefined) {\n      byPluginType = {};\n      prevSpecState.current[pluginType] = byPluginType;\n    }\n    byPluginType[value.kind] = value.spec;\n  });\n\n  // The previous hide query state for each panel kind\n  const hideQueryState = useRef<HideQueryEditorState>({\n    [value.kind]: false,\n  });\n\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPluginKind = defaultPluginKinds?.[pluginType];\n  const initPendingKind = !value.kind && defaultPluginKind ? defaultPluginKind : '';\n\n  // When kind changes and we haven't loaded that plugin before, we will need to enter a \"pending\" state so that we\n  // can generate proper initial spec values that match the new plugin kind\n  const [pendingKind, setPendingKind] = useState(initPendingKind);\n  const { data: plugin, isFetching, error } = usePlugin(pluginType, pendingKind);\n\n  useEffect(() => {\n    // Nothing to do if no new plugin kind is pending\n    if (pendingKind === '') return;\n\n    // Can't get spec value until we have a plugin\n    if (plugin === undefined) return;\n\n    // Fire an onChange to change to the pending kind with initial values from the plugin\n    rememberCurrentSpecState();\n    onChange({\n      kind: pendingKind,\n      spec: plugin.createInitialOptions(),\n    });\n\n    if (pluginType === 'Panel') {\n      const panelPlugin = plugin as PanelPlugin;\n      hideQueryState.current[pendingKind] = !!panelPlugin.hideQueryEditor;\n      if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.kind]) {\n        onHideQuery(!!panelPlugin.hideQueryEditor);\n      }\n    }\n\n    setPendingKind('');\n  }, [pendingKind, plugin, rememberCurrentSpecState, onChange, onHideQuery, hideQueryState, pluginType, value.kind]);\n\n  /**\n   * When the user tries to change the plugin kind, make sure we have the correct spec for that plugin kind before we\n   * make the switch.\n   */\n  const onKindChange: PluginKindSelectProps['onChange'] = (e) => {\n    const nextKind = e.target.value;\n\n    // If we already have state for this plugin type/kind from a previous selection, just use it\n    const previousState = prevSpecState.current[pluginType]?.[nextKind];\n    if (previousState !== undefined) {\n      rememberCurrentSpecState();\n      onChange({\n        kind: nextKind,\n        spec: previousState,\n      });\n    } else {\n      // Otherwise, kick off the async loading process\n      setPendingKind(nextKind);\n    }\n\n    if (\n      pluginType === 'Panel' &&\n      hideQueryState.current[nextKind] !== undefined &&\n      hideQueryState.current[value.kind] !== hideQueryState.current[nextKind]\n    ) {\n      onHideQuery(!!hideQueryState.current[nextKind]);\n    }\n  };\n\n  /**\n   * Spec changes are independent and always just set the spec state.\n   */\n  const onSpecChange: PluginSpecEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.spec = next;\n      })\n    );\n  };\n\n  return { pendingKind, isLoading: isFetching, error, onKindChange, onSpecChange, rememberCurrentSpecState };\n}\n"],"names":["useEvent","useState","useRef","useEffect","produce","usePlugin","usePluginRegistry","usePluginEditor","props","pluginType","value","onHideQueryEditorChange","onChange","onHideQuery","prevSpecState","kind","spec","rememberCurrentSpecState","byPluginType","current","undefined","hideQueryState","defaultPluginKinds","defaultPluginKind","initPendingKind","pendingKind","setPendingKind","data","plugin","isFetching","error","createInitialOptions","panelPlugin","hideQueryEditor","onKindChange","e","nextKind","target","previousState","onSpecChange","next","draft","isLoading"],"mappings":"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"}

package/dist/components/PluginSpecEditor/PluginSpecEditor.d.ts

@@ -4,6 +4,7 @@ import { OptionsEditorProps, PluginType } from '../../model';
 export interface PluginSpecEditorProps extends OptionsEditorProps<UnknownSpec> {
     pluginType: PluginType;
     pluginKind: string;
+    isEditor?: boolean;
 }
 export declare function PluginSpecEditor(props: PluginSpecEditorProps): JSX.Element | null;
 //# sourceMappingURL=PluginSpecEditor.d.ts.map

package/dist/components/PluginSpecEditor/PluginSpecEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PluginSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginSpecEditor/PluginSpecEditor.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG7D,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IAC5E,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,sBA4B5D"}
+{"version":3,"file":"PluginSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginSpecEditor/PluginSpecEditor.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG7D,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IAC5E,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,sBA4B5D"}

package/dist/components/PluginSpecEditor/PluginSpecEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginSpecEditor/PluginSpecEditor.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 { ErrorAlert } from '@perses-dev/components';\nimport { UnknownSpec } from '@perses-dev/core';\nimport { OptionsEditorProps, PluginType } from '../../model';\nimport { usePlugin } from '../../runtime';\n\nexport interface PluginSpecEditorProps extends OptionsEditorProps<UnknownSpec> {\n  pluginType: PluginType;\n  pluginKind: string;\n}\n\nexport function PluginSpecEditor(props: PluginSpecEditorProps) {\n  const { pluginType, pluginKind, ...others } = props;\n  const { data: plugin, isLoading, error } = usePlugin(pluginType, pluginKind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  // TODO: Proper loading indicator\n  if (isLoading) {\n    return null;\n  }\n\n  if (plugin === undefined) {\n    throw new Error(`Missing implementation for ${pluginType} plugin with kind '${pluginKind}'`);\n  }\n\n  if (pluginType === 'Panel') {\n    throw new Error('This editor should not be used for panel type. Please use Panel Spec Editor instead.');\n  }\n\n  const { OptionsEditorComponent } = plugin;\n\n  if (OptionsEditorComponent !== undefined) {\n    return <OptionsEditorComponent {...others} />;\n  }\n\n  return null;\n}\n"],"names":["ErrorAlert","usePlugin","PluginSpecEditor","props","pluginType","pluginKind","others","data","plugin","isLoading","error","undefined","Error","OptionsEditorComponent"],"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,UAAU,QAAQ,yBAAyB;AAGpD,SAASC,SAAS,QAAQ,gBAAgB;AAO1C,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,WAAU,EAAEC,WAAU,EAAE,GAAGC,QAAQ,GAAGH;IAC9C,MAAM,EAAEI,MAAMC,OAAM,EAAEC,UAAS,EAAEC,MAAK,EAAE,GAAGT,UAAUG,YAAYC;IAEjE,IAAIK,OAAO;QACT,qBAAO,KAACV;YAAWU,OAAOA;;IAC5B;IAEA,iCAAiC;IACjC,IAAID,WAAW;QACb,OAAO;IACT;IAEA,IAAID,WAAWG,WAAW;QACxB,MAAM,IAAIC,MAAM,CAAC,2BAA2B,EAAER,WAAW,mBAAmB,EAAEC,WAAW,CAAC,CAAC;IAC7F;IAEA,IAAID,eAAe,SAAS;QAC1B,MAAM,IAAIQ,MAAM;IAClB;IAEA,MAAM,EAAEC,uBAAsB,EAAE,GAAGL;IAEnC,IAAIK,2BAA2BF,WAAW;QACxC,qBAAO,KAACE;YAAwB,GAAGP,MAAM;;IAC3C;IAEA,OAAO;AACT"}
+{"version":3,"sources":["../../../src/components/PluginSpecEditor/PluginSpecEditor.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 { ErrorAlert } from '@perses-dev/components';\nimport { UnknownSpec } from '@perses-dev/core';\nimport { OptionsEditorProps, PluginType } from '../../model';\nimport { usePlugin } from '../../runtime';\n\nexport interface PluginSpecEditorProps extends OptionsEditorProps<UnknownSpec> {\n  pluginType: PluginType;\n  pluginKind: string;\n  isEditor?: boolean;\n}\n\nexport function PluginSpecEditor(props: PluginSpecEditorProps) {\n  const { pluginType, pluginKind, ...others } = props;\n  const { data: plugin, isLoading, error } = usePlugin(pluginType, pluginKind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  // TODO: Proper loading indicator\n  if (isLoading) {\n    return null;\n  }\n\n  if (plugin === undefined) {\n    throw new Error(`Missing implementation for ${pluginType} plugin with kind '${pluginKind}'`);\n  }\n\n  if (pluginType === 'Panel') {\n    throw new Error('This editor should not be used for panel type. Please use Panel Spec Editor instead.');\n  }\n\n  const { OptionsEditorComponent } = plugin;\n\n  if (OptionsEditorComponent !== undefined) {\n    return <OptionsEditorComponent {...others} />;\n  }\n\n  return null;\n}\n"],"names":["ErrorAlert","usePlugin","PluginSpecEditor","props","pluginType","pluginKind","others","data","plugin","isLoading","error","undefined","Error","OptionsEditorComponent"],"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,UAAU,QAAQ,yBAAyB;AAGpD,SAASC,SAAS,QAAQ,gBAAgB;AAQ1C,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,WAAU,EAAEC,WAAU,EAAE,GAAGC,QAAQ,GAAGH;IAC9C,MAAM,EAAEI,MAAMC,OAAM,EAAEC,UAAS,EAAEC,MAAK,EAAE,GAAGT,UAAUG,YAAYC;IAEjE,IAAIK,OAAO;QACT,qBAAO,KAACV;YAAWU,OAAOA;;IAC5B;IAEA,iCAAiC;IACjC,IAAID,WAAW;QACb,OAAO;IACT;IAEA,IAAID,WAAWG,WAAW;QACxB,MAAM,IAAIC,MAAM,CAAC,2BAA2B,EAAER,WAAW,mBAAmB,EAAEC,WAAW,CAAC,CAAC;IAC7F;IAEA,IAAID,eAAe,SAAS;QAC1B,MAAM,IAAIQ,MAAM;IAClB;IAEA,MAAM,EAAEC,uBAAsB,EAAE,GAAGL;IAEnC,IAAIK,2BAA2BF,WAAW;QACxC,qBAAO,KAACE;YAAwB,GAAGP,MAAM;;IAC3C;IAEA,OAAO;AACT"}

package/dist/components/ProjectSelect.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { SelectProps } from '@mui/material';
+import { ProjectResource } from '@perses-dev/core';
+declare type OmittedMuiProps = 'children' | 'value' | 'onChange';
+export interface ProjectSelectProps extends Omit<SelectProps<string>, OmittedMuiProps> {
+    onChange: (next: ProjectResource) => void;
+    value: ProjectResource;
+}
+/**
+ * Displays a MUI input for selecting a Project of a particular kind. Note: The 'value' and `onChange` handler for
+ * the input deal with a `ProjectSelector`.
+ */
+export declare function ProjectSelect(props: ProjectSelectProps): JSX.Element;
+export {};
+//# sourceMappingURL=ProjectSelect.d.ts.map

package/dist/components/ProjectSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectSelect.d.ts","sourceRoot":"","sources":["../../src/components/ProjectSelect.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAU,WAAW,EAAiC,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAKnD,aAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACpF,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,eAAe,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAmCtD"}

package/dist/components/ProjectSelect.js

@@ -0,0 +1,91 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, MenuItem, Stack, ListItemText } from '@mui/material';
+import { useProjectList } from '../context';
+/**
+ * Displays a MUI input for selecting a Project of a particular kind. Note: The 'value' and `onChange` handler for
+ * the input deal with a `ProjectSelector`.
+ */ export function ProjectSelect(props) {
+    const { onChange , value , ...others } = props;
+    const { data , isLoading  } = useProjectList();
+    // While loading available values, just use an empty string so MUI select doesn't warn about values out of range
+    const optionValue = isLoading ? '' : projectToOptionValue(value);
+    // When the user makes a selection, convert the string option value back to a DatasourceSelector
+    const handleChange = (e)=>{
+        const next = optionValueToSelector(e.target.value);
+        onChange(next);
+    };
+    // TODO:
+    //  - Does this need a loading indicator of some kind?
+    //  - The group's edit link is not clickable once selected.
+    //  - The group's edit link is disabled if datasource is overridden.
+    //    Ref: https://github.com/mui/material-ui/issues/36572
+    return /*#__PURE__*/ _jsxs(Select, {
+        ...others,
+        value: optionValue,
+        onChange: handleChange,
+        children: [
+            /*#__PURE__*/ _jsx(MenuItem, {
+                value: 'none',
+                children: /*#__PURE__*/ _jsx(Stack, {
+                    direction: "row",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    width: "100%",
+                    height: 32,
+                    children: /*#__PURE__*/ _jsx(ListItemText, {
+                        children: "None"
+                    })
+                })
+            }),
+            data === null || data === void 0 ? void 0 : data.map((project)=>[
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: project.metadata.name,
+                        children: /*#__PURE__*/ _jsx(Stack, {
+                            direction: "row",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            width: "100%",
+                            height: 32,
+                            children: /*#__PURE__*/ _jsx(ListItemText, {
+                                children: project.metadata.name
+                            })
+                        })
+                    }, project.metadata.name)
+                ])
+        ]
+    });
+}
+/**
+ * Given a ProjectSelectItemSelector,
+ * returns a string value that can be used as a Select input value.
+ * @param selector
+ */ function projectToOptionValue(project) {
+    var _project_metadata_name;
+    return (_project_metadata_name = project.metadata.name) !== null && _project_metadata_name !== void 0 ? _project_metadata_name : 'none';
+}
+/**
+ * Given an option value name,
+ * returns a ProjectResource to be used by the query data model.
+ * @param optionValue
+ */ function optionValueToSelector(optionValue) {
+    return {
+        kind: 'Project',
+        metadata: {
+            name: optionValue
+        }
+    };
+}
+
+//# sourceMappingURL=ProjectSelect.js.map

package/dist/components/ProjectSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ProjectSelect.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 { Select, SelectProps, MenuItem, Stack, ListItemText } from '@mui/material';\nimport { ProjectResource } from '@perses-dev/core';\nimport { useProjectList } from '../context';\n\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface ProjectSelectProps extends Omit<SelectProps<string>, OmittedMuiProps> {\n  onChange: (next: ProjectResource) => void;\n  value: ProjectResource;\n}\n\n/**\n * Displays a MUI input for selecting a Project of a particular kind. Note: The 'value' and `onChange` handler for\n * the input deal with a `ProjectSelector`.\n */\nexport function ProjectSelect(props: ProjectSelectProps) {\n  const { onChange, value, ...others } = props;\n\n  const { data, isLoading } = useProjectList();\n\n  // While loading available values, just use an empty string so MUI select doesn't warn about values out of range\n  const optionValue = isLoading ? '' : projectToOptionValue(value);\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange: SelectProps<string>['onChange'] = (e) => {\n    const next = optionValueToSelector(e.target.value);\n    onChange(next);\n  };\n\n  // TODO:\n  //  - Does this need a loading indicator of some kind?\n  //  - The group's edit link is not clickable once selected.\n  //  - The group's edit link is disabled if datasource is overridden.\n  //    Ref: https://github.com/mui/material-ui/issues/36572\n  return (\n    <Select {...others} value={optionValue} onChange={handleChange}>\n      <MenuItem value={'none'}>\n        <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\" height={32}>\n          <ListItemText>None</ListItemText>\n        </Stack>\n      </MenuItem>\n      {data?.map((project: ProjectResource) => [\n        <MenuItem key={project.metadata.name} value={project.metadata.name}>\n          <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\" height={32}>\n            <ListItemText>{project.metadata.name}</ListItemText>\n          </Stack>\n        </MenuItem>,\n      ])}\n    </Select>\n  );\n}\n\n/**\n * Given a ProjectSelectItemSelector,\n * returns a string value that can be used as a Select input value.\n * @param selector\n */\nfunction projectToOptionValue(project: ProjectResource): string {\n  return project.metadata.name ?? 'none';\n}\n\n/**\n * Given an option value name,\n * returns a ProjectResource to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelector(optionValue: string): ProjectResource {\n  return {\n    kind: 'Project',\n    metadata: {\n      name: optionValue,\n    },\n  };\n}\n"],"names":["Select","MenuItem","Stack","ListItemText","useProjectList","ProjectSelect","props","onChange","value","others","data","isLoading","optionValue","projectToOptionValue","handleChange","e","next","optionValueToSelector","target","direction","alignItems","justifyContent","width","height","map","project","metadata","name","kind"],"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,MAAM,EAAeC,QAAQ,EAAEC,KAAK,EAAEC,YAAY,QAAQ,gBAAgB;AAEnF,SAASC,cAAc,QAAQ,aAAa;AAW5C;;;CAGC,GACD,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EAAEC,SAAQ,EAAEC,MAAK,EAAE,GAAGC,QAAQ,GAAGH;IAEvC,MAAM,EAAEI,KAAI,EAAEC,UAAS,EAAE,GAAGP;IAE5B,gHAAgH;IAChH,MAAMQ,cAAcD,YAAY,KAAKE,qBAAqBL;IAE1D,gGAAgG;IAChG,MAAMM,eAAgD,CAACC;QACrD,MAAMC,OAAOC,sBAAsBF,EAAEG,OAAOV;QAC5CD,SAASS;IACX;IAEA,QAAQ;IACR,sDAAsD;IACtD,2DAA2D;IAC3D,oEAAoE;IACpE,0DAA0D;IAC1D,qBACE,MAAChB;QAAQ,GAAGS,MAAM;QAAED,OAAOI;QAAaL,UAAUO;;0BAChD,KAACb;gBAASO,OAAO;0BACf,cAAA,KAACN;oBAAMiB,WAAU;oBAAMC,YAAW;oBAASC,gBAAe;oBAAgBC,OAAM;oBAAOC,QAAQ;8BAC7F,cAAA,KAACpB;kCAAa;;;;YAGjBO,iBAAAA,kBAAAA,KAAAA,IAAAA,KAAMc,IAAI,CAACC,UAA6B;kCACvC,KAACxB;wBAAqCO,OAAOiB,QAAQC,SAASC;kCAC5D,cAAA,KAACzB;4BAAMiB,WAAU;4BAAMC,YAAW;4BAASC,gBAAe;4BAAgBC,OAAM;4BAAOC,QAAQ;sCAC7F,cAAA,KAACpB;0CAAcsB,QAAQC,SAASC;;;uBAFrBF,QAAQC,SAASC;iBAKjC;;;AAGP;AAEA;;;;CAIC,GACD,SAASd,qBAAqBY,OAAwB;QAC7CA;IAAP,OAAOA,CAAAA,yBAAAA,QAAQC,SAASC,kBAAjBF,oCAAAA,yBAAyB;AAClC;AAEA;;;;CAIC,GACD,SAASR,sBAAsBL,WAAmB;IAChD,OAAO;QACLgB,MAAM;QACNF,UAAU;YACRC,MAAMf;QACR;IACF;AACF"}

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAM9E,MAAM,WAAW,0BAA0B;IACzC,OAAO,CAAC,EAAE,yBAAyB,EAAE,CAAC;IACtC,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,qBAAqB,CAAC,EAAE,OAAY,EAAE,QAAQ,EAAE,EAAE,0BAA0B,eAwG3F"}
+{"version":3,"file":"TimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAM9E,MAAM,WAAW,0BAA0B;IACzC,OAAO,CAAC,EAAE,yBAAyB,EAAE,CAAC;IACtC,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,qBAAqB,CAAC,EAAE,OAAY,EAAE,QAAQ,EAAE,EAAE,0BAA0B,eA0G3F"}

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.js

@@ -10,7 +10,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { produce } from 'immer';
 import { Button, Stack } from '@mui/material';
@@ -104,26 +104,28 @@ export function TimeSeriesQueryEditor({ queries =[] , onChange  }) {
             }
         }
     ];
-    return /*#__PURE__*/ _jsxs(Stack, {
-        spacing: 1,
+    return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
+            /*#__PURE__*/ _jsx(Stack, {
+                spacing: 1,
+                children: queryDefinitions.map((query, i)=>/*#__PURE__*/ _jsx(TimeSeriesQueryInput, {
+                        index: i,
+                        query: query,
+                        isCollapsed: !!queriesCollapsed[i],
+                        onChange: handleQueryChange,
+                        onDelete: hasMoreThanOneQuery ? handleQueryDelete : undefined,
+                        onCollapseExpand: handleQueryCollapseExpand
+                    }, i))
+            }),
             /*#__PURE__*/ _jsx(Button, {
                 variant: "contained",
                 startIcon: /*#__PURE__*/ _jsx(AddIcon, {}),
                 sx: {
-                    marginLeft: 'auto'
+                    marginTop: 1
                 },
                 onClick: handleQueryAdd,
                 children: "Add Query"
-            }),
-            queryDefinitions.map((query, i)=>/*#__PURE__*/ _jsx(TimeSeriesQueryInput, {
-                    index: i,
-                    query: query,
-                    isCollapsed: !!queriesCollapsed[i],
-                    onChange: handleQueryChange,
-                    onDelete: hasMoreThanOneQuery ? handleQueryDelete : undefined,
-                    onCollapseExpand: handleQueryCollapseExpand
-                }, i))
+            })
         ]
     });
 }

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.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 { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { TimeSeriesQueryDefinition, QueryDefinition } from '@perses-dev/core';\nimport { usePlugin, usePluginRegistry } from '../../runtime';\nimport { TimeSeriesQueryInput } from './TimeSeriesQueryInput';\n\nconst DEFAULT_QUERY_PLUGIN_TYPE = 'TimeSeriesQuery';\n\nexport interface TimeSeriesQueryEditorProps {\n  queries?: TimeSeriesQueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nexport function TimeSeriesQueryEditor({ queries = [], onChange }: TimeSeriesQueryEditorProps) {\n  const hasMoreThanOneQuery = queries.length > 1;\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultTimeSeriesQueryKind = defaultPluginKinds?.[DEFAULT_QUERY_PLUGIN_TYPE] ?? '';\n\n  const { data: defaultQueryPlugin } = usePlugin(DEFAULT_QUERY_PLUGIN_TYPE, defaultTimeSeriesQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // State for which queries are collapsed\n  // TODO: Would be easier if we had IDs for queries.\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: TimeSeriesQueryDefinition) => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryAdd = () => {\n    if (!defaultQueryPlugin) return;\n    onChange(\n      produce(queries, (draft) => {\n        const queryDef: TimeSeriesQueryDefinition = {\n          kind: DEFAULT_QUERY_PLUGIN_TYPE,\n          spec: {\n            plugin: { kind: defaultTimeSeriesQueryKind, spec: defaultQueryPlugin.createInitialOptions() },\n          },\n        };\n        if (draft) {\n          draft.push(queryDef);\n        } else {\n          draft = [...queries, queryDef];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number) => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number) => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: TimeSeriesQueryDefinition[] = queries.length\n    ? queries\n    : [\n        {\n          kind: 'TimeSeriesQuery',\n          spec: {\n            plugin: {\n              kind: defaultPluginKinds?.['TimeSeriesQuery'] ?? '',\n              spec: {\n                query: '',\n              },\n            },\n          },\n        },\n      ];\n\n  return (\n    <Stack spacing={1}>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginLeft: 'auto' }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n      {queryDefinitions.map((query: TimeSeriesQueryDefinition, i: number) => (\n        <TimeSeriesQueryInput\n          key={i}\n          index={i}\n          query={query}\n          isCollapsed={!!queriesCollapsed[i]}\n          onChange={handleQueryChange}\n          onDelete={hasMoreThanOneQuery ? handleQueryDelete : undefined}\n          onCollapseExpand={handleQueryCollapseExpand}\n        />\n      ))}\n    </Stack>\n  );\n}\n"],"names":["useState","produce","Button","Stack","AddIcon","usePlugin","usePluginRegistry","TimeSeriesQueryInput","DEFAULT_QUERY_PLUGIN_TYPE","TimeSeriesQueryEditor","queries","onChange","hasMoreThanOneQuery","length","defaultPluginKinds","defaultTimeSeriesQueryKind","data","defaultQueryPlugin","useErrorBoundary","enabled","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryAdd","kind","spec","plugin","createInitialOptions","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","query","spacing","variant","startIcon","sx","marginLeft","onClick","i","isCollapsed","onDelete","undefined","onCollapseExpand"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.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 { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { TimeSeriesQueryDefinition, QueryDefinition } from '@perses-dev/core';\nimport { usePlugin, usePluginRegistry } from '../../runtime';\nimport { TimeSeriesQueryInput } from './TimeSeriesQueryInput';\n\nconst DEFAULT_QUERY_PLUGIN_TYPE = 'TimeSeriesQuery';\n\nexport interface TimeSeriesQueryEditorProps {\n  queries?: TimeSeriesQueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nexport function TimeSeriesQueryEditor({ queries = [], onChange }: TimeSeriesQueryEditorProps) {\n  const hasMoreThanOneQuery = queries.length > 1;\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultTimeSeriesQueryKind = defaultPluginKinds?.[DEFAULT_QUERY_PLUGIN_TYPE] ?? '';\n\n  const { data: defaultQueryPlugin } = usePlugin(DEFAULT_QUERY_PLUGIN_TYPE, defaultTimeSeriesQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // State for which queries are collapsed\n  // TODO: Would be easier if we had IDs for queries.\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: TimeSeriesQueryDefinition) => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryAdd = () => {\n    if (!defaultQueryPlugin) return;\n    onChange(\n      produce(queries, (draft) => {\n        const queryDef: TimeSeriesQueryDefinition = {\n          kind: DEFAULT_QUERY_PLUGIN_TYPE,\n          spec: {\n            plugin: { kind: defaultTimeSeriesQueryKind, spec: defaultQueryPlugin.createInitialOptions() },\n          },\n        };\n        if (draft) {\n          draft.push(queryDef);\n        } else {\n          draft = [...queries, queryDef];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number) => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number) => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: TimeSeriesQueryDefinition[] = queries.length\n    ? queries\n    : [\n        {\n          kind: 'TimeSeriesQuery',\n          spec: {\n            plugin: {\n              kind: defaultPluginKinds?.['TimeSeriesQuery'] ?? '',\n              spec: {\n                query: '',\n              },\n            },\n          },\n        },\n      ];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: TimeSeriesQueryDefinition, i: number) => (\n          <TimeSeriesQueryInput\n            key={i}\n            index={i}\n            query={query}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onDelete={hasMoreThanOneQuery ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n}\n"],"names":["useState","produce","Button","Stack","AddIcon","usePlugin","usePluginRegistry","TimeSeriesQueryInput","DEFAULT_QUERY_PLUGIN_TYPE","TimeSeriesQueryEditor","queries","onChange","hasMoreThanOneQuery","length","defaultPluginKinds","defaultTimeSeriesQueryKind","data","defaultQueryPlugin","useErrorBoundary","enabled","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryAdd","kind","spec","plugin","createInitialOptions","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","query","spacing","i","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
 import { DispatchWithoutAction } from 'react';
-import { VariableDefinition } from '@perses-dev/core';
-import { Action } from '../../../utils';
+import { VariableDefinition, Action } from '@perses-dev/core';
 interface VariableEditorFormProps {
     initialVariableDefinition: VariableDefinition;
     initialAction: Action;

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

@@ -1 +1 @@
-{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,qBAAqB,EAAkC,MAAM,OAAO,CAAC;AAerF,OAAO,EAAE,kBAAkB,EAA0B,MAAM,kBAAkB,CAAC;AAI9E,OAAO,EAAE,MAAM,EAAiC,MAAM,gBAAgB,CAAC;AAWvE,UAAU,uBAAuB;IAC/B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,eAuYhE"}
+{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,qBAAqB,EAAkC,MAAM,OAAO,CAAC;AAerF,OAAO,EAAE,kBAAkB,EAA0B,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAetF,UAAU,uBAAuB;IAC/B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,eAgahE"}

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

@@ -73,7 +73,7 @@ export function VariableEditorForm(props) {
         setDiscardDialogOpened,
         onClose
     ]);
-    var _state_textVariableFields_constant;
+    var _state_textVariableFields_constant, _state_listVariableFields_capturingRegexp, _state_listVariableFields_sort;
     return /*#__PURE__*/ _jsxs(FormProvider, {
         ...form,
         children: [
@@ -385,7 +385,7 @@ export function VariableEditorForm(props) {
                                     /*#__PURE__*/ _jsx(Stack, {
                                         children: /*#__PURE__*/ _jsx(TextField, {
                                             label: "Capturing Regexp Filter",
-                                            value: state.listVariableFields.capturingRegexp || '',
+                                            value: (_state_listVariableFields_capturingRegexp = state.listVariableFields.capturingRegexp) !== null && _state_listVariableFields_capturingRegexp !== void 0 ? _state_listVariableFields_capturingRegexp : '',
                                             InputLabelProps: {
                                                 shrink: action === 'read' ? true : undefined
                                             },
@@ -404,6 +404,54 @@ export function VariableEditorForm(props) {
                                             },
                                             helperText: "Optional, if you want to filter on captured result."
                                         })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Stack, {
+                                        children: /*#__PURE__*/ _jsxs(TextField, {
+                                            select: true,
+                                            label: "Sort",
+                                            value: (_state_listVariableFields_sort = state.listVariableFields.sort) !== null && _state_listVariableFields_sort !== void 0 ? _state_listVariableFields_sort : '',
+                                            InputLabelProps: {
+                                                shrink: action === 'read' ? true : undefined
+                                            },
+                                            InputProps: {
+                                                readOnly: isReadonly
+                                            },
+                                            onChange: (e)=>{
+                                                setState((draft)=>{
+                                                    draft.listVariableFields.sort = e.target.value;
+                                                });
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: "none",
+                                                    children: "None"
+                                                }),
+                                                /*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: "alphabetical-asc",
+                                                    children: "Alphabetical, asc"
+                                                }),
+                                                /*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: "alphabetical-desc",
+                                                    children: "Alphabetical, desc"
+                                                }),
+                                                /*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: "numerical-asc",
+                                                    children: "Numerical, asc"
+                                                }),
+                                                /*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: "numerical-desc",
+                                                    children: "Numerical, desc"
+                                                }),
+                                                /*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: "alphabetical-ci-asc",
+                                                    children: "Alphabetical, case-insensitive, asc"
+                                                }),
+                                                /*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: "alphabetical-ci-desc",
+                                                    children: "Alphabetical, case-insensitive, desc"
+                                                })
+                                            ]
+                                        })
                                     })
                                 ]
                             }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.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 React, { DispatchWithoutAction, useCallback, useMemo, useState } from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControlLabel,\n  MenuItem,\n  Button,\n  Stack,\n  ClickAwayListener,\n  Divider,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { VariableDefinition, ListVariableDefinition } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorBoundary } from '@perses-dev/components';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Action, getSubmitText, getTitleAction } from '../../../utils';\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { PluginEditor } from '../../PluginEditor';\nimport { variableEditValidationSchema, VariableEditValidationType } from '../../../validation';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\nfunction FallbackPreview() {\n  return <div>Error previewing values</div>;\n}\n\ninterface VariableEditorFormProps {\n  initialVariableDefinition: VariableDefinition;\n  initialAction: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onSave: (def: VariableDefinition) => void;\n  onClose: () => void;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function VariableEditorForm(props: VariableEditorFormProps) {\n  const { initialVariableDefinition, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;\n\n  const initialState = getInitialState(initialVariableDefinition);\n  const [state, setState] = useImmer(initialState);\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const [previewKey, setPreviewKey] = useState(0);\n  const [action, setAction] = useState(initialAction);\n\n  const refreshPreview = () => {\n    setPreviewKey((prev) => prev + 1);\n  };\n\n  /** We use the `previewKey` that we increment to know when to explicitly update the\n   * spec that will be used for preview. The reason why we do this is to avoid\n   * having to re-fetch the values when the user is still editing the spec.\n   */\n  const previewSpec = useMemo(() => {\n    return getVariableDefinitionFromState(state) as ListVariableDefinition;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [previewKey]);\n\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const form = useForm<VariableEditValidationType>({\n    resolver: zodResolver(variableEditValidationSchema),\n    mode: 'onBlur',\n    defaultValues: state,\n  });\n\n  const processForm: SubmitHandler<VariableEditValidationType> = () => {\n    onSave(getVariableDefinitionFromState(state));\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  const handleCancel = useCallback(() => {\n    if (JSON.stringify(initialState) !== JSON.stringify(state)) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }, [state, initialState, setDiscardDialogOpened, onClose]);\n\n  return (\n    <FormProvider {...form}>\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\">{titleAction} Variable</Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          {action === 'read' ? (\n            <>\n              <Button disabled={isReadonly} variant=\"contained\" onClick={() => setAction('update')}>\n                Edit\n              </Button>\n              <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n                Delete\n              </Button>\n              <Divider\n                orientation=\"vertical\"\n                flexItem\n                sx={(theme) => ({\n                  borderColor: theme.palette.grey['500'],\n                  '&.MuiDivider-root': {\n                    marginLeft: 2,\n                    marginRight: 1,\n                  },\n                })}\n              />\n              <Button color=\"secondary\" variant=\"outlined\" onClick={onClose}>\n                Close\n              </Button>\n            </>\n          ) : (\n            <>\n              <Button\n                type=\"submit\"\n                variant=\"contained\"\n                disabled={!form.formState.isValid}\n                onClick={form.handleSubmit(processForm)}\n              >\n                {submitText}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </>\n          )}\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={8}>\n            <Controller\n              name=\"name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update',\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.name = event.target.value;\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              name=\"title\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Display Label\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.title = event.target.value;\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              name=\"description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Description\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.description = event.target.value;\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              name=\"kind\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  select\n                  {...field}\n                  fullWidth\n                  label=\"Type\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.kind = event.target.value as VariableEditorState['kind'];\n                    });\n                  }}\n                >\n                  {VARIABLE_TYPES.map((v) => (\n                    <MenuItem key={v.kind} value={v.kind}>\n                      {v.label}\n                    </MenuItem>\n                  ))}\n                </TextField>\n              )}\n            />\n          </Grid>\n        </Grid>\n\n        <Divider />\n\n        {state.kind === 'TextVariable' && (\n          <>\n            <Typography py={1} variant=\"subtitle1\">\n              Text Options\n            </Typography>\n            <Stack spacing={2}>\n              <Box>\n                <VariablePreview values={[state.textVariableFields.value]} />\n              </Box>\n              <TextField\n                label=\"Value\"\n                value={state.textVariableFields.value}\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.textVariableFields.value = v.target.value;\n                  });\n                }}\n              />\n              <FormControlLabel\n                control={\n                  <Switch\n                    checked={state.textVariableFields.constant ?? false}\n                    readOnly={action === 'read'}\n                    onChange={(e) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      setState((draft) => {\n                        draft.textVariableFields.constant = e.target.checked;\n                      });\n                    }}\n                  />\n                }\n                label=\"Constant\"\n              />\n            </Stack>\n          </>\n        )}\n\n        {state.kind === 'ListVariable' && (\n          <>\n            <Typography py={1} variant=\"subtitle1\">\n              List Options\n            </Typography>\n            <Stack spacing={2} mb={2}>\n              {state.listVariableFields.plugin.kind ? (\n                <Box>\n                  <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n                    <VariableListPreview definition={previewSpec} onRefresh={refreshPreview} />\n                  </ErrorBoundary>\n                </Box>\n              ) : (\n                <VariablePreview isLoading={true} />\n              )}\n\n              <Stack>\n                {/** Hack?: Cool technique to refresh the preview to simulate onBlur event */}\n                <ClickAwayListener onClickAway={() => refreshPreview()}>\n                  <Box />\n                </ClickAwayListener>\n                {/** */}\n                <PluginEditor\n                  width=\"100%\"\n                  pluginType=\"Variable\"\n                  pluginKindLabel=\"Source\"\n                  value={state.listVariableFields.plugin}\n                  isReadonly={action === 'read'}\n                  onChange={(val) => {\n                    setState((draft) => {\n                      draft.listVariableFields.plugin = val;\n                    });\n                  }}\n                />\n              </Stack>\n\n              <Stack>\n                <TextField\n                  label=\"Capturing Regexp Filter\"\n                  value={state.listVariableFields.capturingRegexp || ''}\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  onChange={(e) => {\n                    setState((draft) => {\n                      if (e.target.value) {\n                        // TODO: do a better fix, if empty string => it should skip the filter\n                        draft.listVariableFields.capturingRegexp = e.target.value;\n                      } else {\n                        draft.listVariableFields.capturingRegexp = undefined;\n                      }\n                    });\n                  }}\n                  helperText=\"Optional, if you want to filter on captured result.\"\n                />\n              </Stack>\n            </Stack>\n\n            <Divider />\n\n            <Typography py={1} variant=\"subtitle1\">\n              Dropdown Options\n            </Typography>\n            <Stack spacing=\"2\">\n              <Stack>\n                <FormControlLabel\n                  control={\n                    <Switch\n                      checked={state.listVariableFields.allowMultiple}\n                      readOnly={action === 'read'}\n                      onChange={(e) => {\n                        if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                        setState((draft) => {\n                          draft.listVariableFields.allowMultiple = e.target.checked;\n                        });\n                      }}\n                    />\n                  }\n                  label=\"Allow Multiple Values\"\n                />\n                <Typography variant=\"caption\">Enables multiple values to be selected at the same time</Typography>\n              </Stack>\n              <Stack>\n                <FormControlLabel\n                  control={\n                    <Switch\n                      checked={state.listVariableFields.allowAll}\n                      readOnly={action === 'read'}\n                      onChange={(e) => {\n                        if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                        setState((draft) => {\n                          draft.listVariableFields.allowAll = e.target.checked;\n                        });\n                      }}\n                    />\n                  }\n                  label=\"Allow All option\"\n                />\n                <Typography mb={1} variant=\"caption\">\n                  Enables an option to include all variable values\n                </Typography>\n                {state.listVariableFields.allowAll && (\n                  <TextField\n                    label=\"Custom All Value\"\n                    value={state.listVariableFields.customAllValue}\n                    InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                    InputProps={{\n                      readOnly: action === 'read',\n                    }}\n                    onChange={(e) => {\n                      setState((draft) => {\n                        if (e.target.value) {\n                          draft.listVariableFields.customAllValue = e.target.value;\n                        } else {\n                          draft.listVariableFields.customAllValue = undefined;\n                        }\n                      });\n                    }}\n                    helperText=\"When All is selected, this value will be used\"\n                  />\n                )}\n              </Stack>\n            </Stack>\n          </>\n        )}\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard these changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => {\n          setDiscardDialogOpened(false);\n        }}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["React","useCallback","useMemo","useState","Box","Typography","Switch","TextField","Grid","FormControlLabel","MenuItem","Button","Stack","ClickAwayListener","Divider","useImmer","DiscardChangesConfirmationDialog","ErrorBoundary","Controller","FormProvider","useForm","zodResolver","getSubmitText","getTitleAction","VARIABLE_TYPES","PluginEditor","variableEditValidationSchema","VariableListPreview","VariablePreview","getVariableDefinitionFromState","getInitialState","FallbackPreview","div","VariableEditorForm","props","initialVariableDefinition","initialAction","isDraft","isReadonly","onSave","onClose","onDelete","initialState","state","setState","isDiscardDialogOpened","setDiscardDialogOpened","previewKey","setPreviewKey","action","setAction","refreshPreview","prev","previewSpec","titleAction","submitText","form","resolver","mode","defaultValues","processForm","handleCancel","JSON","stringify","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","orientation","flexItem","borderColor","grey","marginRight","type","formState","isValid","handleSubmit","overflowY","container","mb","item","xs","name","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","undefined","InputProps","readOnly","error","helperText","message","onChange","event","draft","target","value","title","description","select","kind","map","v","py","values","textVariableFields","control","checked","constant","e","listVariableFields","plugin","FallbackComponent","resetKeys","definition","onRefresh","isLoading","onClickAway","width","pluginType","pluginKindLabel","val","capturingRegexp","allowMultiple","allowAll","customAllValue","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.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 React, { DispatchWithoutAction, useCallback, useMemo, useState } from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControlLabel,\n  MenuItem,\n  Button,\n  Stack,\n  ClickAwayListener,\n  Divider,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { VariableDefinition, ListVariableDefinition, Action } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorBoundary } from '@perses-dev/components';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { getSubmitText, getTitleAction } from '../../../utils';\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { PluginEditor } from '../../PluginEditor';\nimport { variableEditValidationSchema, VariableEditValidationType } from '../../../validation';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\nfunction FallbackPreview() {\n  return <div>Error previewing values</div>;\n}\n\ninterface VariableEditorFormProps {\n  initialVariableDefinition: VariableDefinition;\n  initialAction: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onSave: (def: VariableDefinition) => void;\n  onClose: () => void;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function VariableEditorForm(props: VariableEditorFormProps) {\n  const { initialVariableDefinition, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;\n\n  const initialState = getInitialState(initialVariableDefinition);\n  const [state, setState] = useImmer(initialState);\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const [previewKey, setPreviewKey] = useState(0);\n  const [action, setAction] = useState(initialAction);\n\n  const refreshPreview = () => {\n    setPreviewKey((prev) => prev + 1);\n  };\n\n  /** We use the `previewKey` that we increment to know when to explicitly update the\n   * spec that will be used for preview. The reason why we do this is to avoid\n   * having to re-fetch the values when the user is still editing the spec.\n   */\n  const previewSpec = useMemo(() => {\n    return getVariableDefinitionFromState(state) as ListVariableDefinition;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [previewKey]);\n\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const form = useForm<VariableEditValidationType>({\n    resolver: zodResolver(variableEditValidationSchema),\n    mode: 'onBlur',\n    defaultValues: state,\n  });\n\n  const processForm: SubmitHandler<VariableEditValidationType> = () => {\n    onSave(getVariableDefinitionFromState(state));\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  const handleCancel = useCallback(() => {\n    if (JSON.stringify(initialState) !== JSON.stringify(state)) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }, [state, initialState, setDiscardDialogOpened, onClose]);\n\n  return (\n    <FormProvider {...form}>\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\">{titleAction} Variable</Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          {action === 'read' ? (\n            <>\n              <Button disabled={isReadonly} variant=\"contained\" onClick={() => setAction('update')}>\n                Edit\n              </Button>\n              <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n                Delete\n              </Button>\n              <Divider\n                orientation=\"vertical\"\n                flexItem\n                sx={(theme) => ({\n                  borderColor: theme.palette.grey['500'],\n                  '&.MuiDivider-root': {\n                    marginLeft: 2,\n                    marginRight: 1,\n                  },\n                })}\n              />\n              <Button color=\"secondary\" variant=\"outlined\" onClick={onClose}>\n                Close\n              </Button>\n            </>\n          ) : (\n            <>\n              <Button\n                type=\"submit\"\n                variant=\"contained\"\n                disabled={!form.formState.isValid}\n                onClick={form.handleSubmit(processForm)}\n              >\n                {submitText}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </>\n          )}\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={8}>\n            <Controller\n              name=\"name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update',\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.name = event.target.value;\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              name=\"title\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Display Label\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.title = event.target.value;\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              name=\"description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Description\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.description = event.target.value;\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              name=\"kind\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  select\n                  {...field}\n                  fullWidth\n                  label=\"Type\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.kind = event.target.value as VariableEditorState['kind'];\n                    });\n                  }}\n                >\n                  {VARIABLE_TYPES.map((v) => (\n                    <MenuItem key={v.kind} value={v.kind}>\n                      {v.label}\n                    </MenuItem>\n                  ))}\n                </TextField>\n              )}\n            />\n          </Grid>\n        </Grid>\n\n        <Divider />\n\n        {state.kind === 'TextVariable' && (\n          <>\n            <Typography py={1} variant=\"subtitle1\">\n              Text Options\n            </Typography>\n            <Stack spacing={2}>\n              <Box>\n                <VariablePreview values={[state.textVariableFields.value]} />\n              </Box>\n              <TextField\n                label=\"Value\"\n                value={state.textVariableFields.value}\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.textVariableFields.value = v.target.value;\n                  });\n                }}\n              />\n              <FormControlLabel\n                control={\n                  <Switch\n                    checked={state.textVariableFields.constant ?? false}\n                    readOnly={action === 'read'}\n                    onChange={(e) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      setState((draft) => {\n                        draft.textVariableFields.constant = e.target.checked;\n                      });\n                    }}\n                  />\n                }\n                label=\"Constant\"\n              />\n            </Stack>\n          </>\n        )}\n\n        {state.kind === 'ListVariable' && (\n          <>\n            <Typography py={1} variant=\"subtitle1\">\n              List Options\n            </Typography>\n            <Stack spacing={2} mb={2}>\n              {state.listVariableFields.plugin.kind ? (\n                <Box>\n                  <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n                    <VariableListPreview definition={previewSpec} onRefresh={refreshPreview} />\n                  </ErrorBoundary>\n                </Box>\n              ) : (\n                <VariablePreview isLoading={true} />\n              )}\n\n              <Stack>\n                {/** Hack?: Cool technique to refresh the preview to simulate onBlur event */}\n                <ClickAwayListener onClickAway={() => refreshPreview()}>\n                  <Box />\n                </ClickAwayListener>\n                {/** */}\n                <PluginEditor\n                  width=\"100%\"\n                  pluginType=\"Variable\"\n                  pluginKindLabel=\"Source\"\n                  value={state.listVariableFields.plugin}\n                  isReadonly={action === 'read'}\n                  onChange={(val) => {\n                    setState((draft) => {\n                      draft.listVariableFields.plugin = val;\n                    });\n                  }}\n                />\n              </Stack>\n\n              <Stack>\n                <TextField\n                  label=\"Capturing Regexp Filter\"\n                  value={state.listVariableFields.capturingRegexp ?? ''}\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  onChange={(e) => {\n                    setState((draft) => {\n                      if (e.target.value) {\n                        // TODO: do a better fix, if empty string => it should skip the filter\n                        draft.listVariableFields.capturingRegexp = e.target.value;\n                      } else {\n                        draft.listVariableFields.capturingRegexp = undefined;\n                      }\n                    });\n                  }}\n                  helperText=\"Optional, if you want to filter on captured result.\"\n                />\n              </Stack>\n\n              <Stack>\n                <TextField\n                  select\n                  label=\"Sort\"\n                  value={state.listVariableFields.sort ?? ''}\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: isReadonly,\n                  }}\n                  onChange={(e) => {\n                    setState((draft) => {\n                      draft.listVariableFields.sort = e.target.value;\n                    });\n                  }}\n                >\n                  <MenuItem value=\"none\">None</MenuItem>\n                  <MenuItem value=\"alphabetical-asc\">Alphabetical, asc</MenuItem>\n                  <MenuItem value=\"alphabetical-desc\">Alphabetical, desc</MenuItem>\n                  <MenuItem value=\"numerical-asc\">Numerical, asc</MenuItem>\n                  <MenuItem value=\"numerical-desc\">Numerical, desc</MenuItem>\n                  <MenuItem value=\"alphabetical-ci-asc\">Alphabetical, case-insensitive, asc</MenuItem>\n                  <MenuItem value=\"alphabetical-ci-desc\">Alphabetical, case-insensitive, desc</MenuItem>\n                </TextField>\n              </Stack>\n            </Stack>\n\n            <Divider />\n\n            <Typography py={1} variant=\"subtitle1\">\n              Dropdown Options\n            </Typography>\n            <Stack spacing=\"2\">\n              <Stack>\n                <FormControlLabel\n                  control={\n                    <Switch\n                      checked={state.listVariableFields.allowMultiple}\n                      readOnly={action === 'read'}\n                      onChange={(e) => {\n                        if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                        setState((draft) => {\n                          draft.listVariableFields.allowMultiple = e.target.checked;\n                        });\n                      }}\n                    />\n                  }\n                  label=\"Allow Multiple Values\"\n                />\n                <Typography variant=\"caption\">Enables multiple values to be selected at the same time</Typography>\n              </Stack>\n              <Stack>\n                <FormControlLabel\n                  control={\n                    <Switch\n                      checked={state.listVariableFields.allowAll}\n                      readOnly={action === 'read'}\n                      onChange={(e) => {\n                        if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                        setState((draft) => {\n                          draft.listVariableFields.allowAll = e.target.checked;\n                        });\n                      }}\n                    />\n                  }\n                  label=\"Allow All option\"\n                />\n                <Typography mb={1} variant=\"caption\">\n                  Enables an option to include all variable values\n                </Typography>\n                {state.listVariableFields.allowAll && (\n                  <TextField\n                    label=\"Custom All Value\"\n                    value={state.listVariableFields.customAllValue}\n                    InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                    InputProps={{\n                      readOnly: action === 'read',\n                    }}\n                    onChange={(e) => {\n                      setState((draft) => {\n                        if (e.target.value) {\n                          draft.listVariableFields.customAllValue = e.target.value;\n                        } else {\n                          draft.listVariableFields.customAllValue = undefined;\n                        }\n                      });\n                    }}\n                    helperText=\"When All is selected, this value will be used\"\n                  />\n                )}\n              </Stack>\n            </Stack>\n          </>\n        )}\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard these changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => {\n          setDiscardDialogOpened(false);\n        }}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["React","useCallback","useMemo","useState","Box","Typography","Switch","TextField","Grid","FormControlLabel","MenuItem","Button","Stack","ClickAwayListener","Divider","useImmer","DiscardChangesConfirmationDialog","ErrorBoundary","Controller","FormProvider","useForm","zodResolver","getSubmitText","getTitleAction","VARIABLE_TYPES","PluginEditor","variableEditValidationSchema","VariableListPreview","VariablePreview","getVariableDefinitionFromState","getInitialState","FallbackPreview","div","VariableEditorForm","props","initialVariableDefinition","initialAction","isDraft","isReadonly","onSave","onClose","onDelete","initialState","state","setState","isDiscardDialogOpened","setDiscardDialogOpened","previewKey","setPreviewKey","action","setAction","refreshPreview","prev","previewSpec","titleAction","submitText","form","resolver","mode","defaultValues","processForm","handleCancel","JSON","stringify","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","orientation","flexItem","borderColor","grey","marginRight","type","formState","isValid","handleSubmit","overflowY","container","mb","item","xs","name","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","undefined","InputProps","readOnly","error","helperText","message","onChange","event","draft","target","value","title","description","select","kind","map","v","py","values","textVariableFields","control","checked","constant","e","listVariableFields","plugin","FallbackComponent","resetKeys","definition","onRefresh","isLoading","onClickAway","width","pluginType","pluginKindLabel","val","capturingRegexp","sort","allowMultiple","allowAll","customAllValue","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.d.ts

@@ -7,12 +7,13 @@ export declare function getInitialState(initialVariableDefinition: VariableDefin
     listVariableFields: {
         allowMultiple: boolean;
         allowAll: boolean;
+        customAllValue: string | undefined;
         capturingRegexp: string | undefined;
+        sort: string | undefined;
         plugin: {
             kind: string;
             spec: {};
         };
-        customAllValue: string | undefined;
     };
     textVariableFields: {
         value: string;