@perses-dev/plugin-system 0.53.0-beta.1 → 0.53.0-beta.3

package/dist/components/PluginEditor/PluginEditor.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button } from '@mui/material';
 import Reload from 'mdi-material-ui/Reload';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
-import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
+import { useCallback } from 'react';
 import { PluginKindSelect } from '../PluginKindSelect';
 import { PluginSpecEditor } from '../PluginSpecEditor';
 import { usePluginEditor } from './plugin-editor-api';
@@ -25,47 +25,14 @@ import { usePluginEditor } from './plugin-editor-api';
  * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a
  * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the
  * `usePluginEditor` hook that powers this component.
- */ export const PluginEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, postExecuteRunQuery: refresh, filteredQueryPlugins, ...others } = props;
+ */ export function PluginEditor(props) {
+    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, onRunQuery, filteredQueryPlugins, ...others } = props;
     const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);
-    /* 
-     We could technically merge the watchedQuery, watchedOtherSpecs into a single watched-object,
-     because at the end of the day, they are all specs.
-     However, let's have them separated to keep the code simple and readable.
-     Reason: Only Query string field is common between all of them. Other specs may be different
-     Example: Legend, and MinSteps
-    */ const [watchedQuery, setWatchQuery] = useState(value.spec['query']);
-    const [watchedOtherSpecs, setWatchOtherSpecs] = useState(value.spec);
-    const runQueryHandler = useCallback(()=>{
-        onSpecChange({
-            ...value.spec,
-            ...watchedOtherSpecs,
-            query: watchedQuery
-        });
-        refresh?.();
+    const handleSpecChange = useCallback((nextSpec)=>{
+        onSpecChange(nextSpec);
     }, [
-        value.spec,
-        onSpecChange,
-        watchedQuery,
-        watchedOtherSpecs,
-        refresh
+        onSpecChange
     ]);
-    const queryHandlerSettings = useMemo(()=>{
-        return withRunQueryButton ? {
-            runWithOnBlur: false,
-            watchQueryChanges: (query)=>{
-                setWatchQuery(query);
-            },
-            setWatchOtherSpecs: (otherSpecs)=>{
-                setWatchOtherSpecs(otherSpecs);
-            }
-        } : undefined;
-    }, [
-        withRunQueryButton
-    ]);
-    useImperativeHandle(ref, ()=>({
-            flushChanges: runQueryHandler
-        }));
     return /*#__PURE__*/ _jsxs(Box, {
         ...others,
         children: [
@@ -99,11 +66,12 @@ import { usePluginEditor } from './plugin-editor-api';
                         onChange: onSelectionChange,
                         filteredQueryPlugins: filteredQueryPlugins
                     }),
-                    withRunQueryButton && !isLoading && /*#__PURE__*/ _jsx(Button, {
+                    withRunQueryButton && /*#__PURE__*/ _jsx(Button, {
                         "data-testid": "run_query_button",
                         variant: "contained",
                         startIcon: /*#__PURE__*/ _jsx(Reload, {}),
-                        onClick: runQueryHandler,
+                        onClick: onRunQuery,
+                        disabled: isLoading,
                         children: "Run Query"
                     })
                 ]
@@ -113,14 +81,12 @@ import { usePluginEditor } from './plugin-editor-api';
                 children: /*#__PURE__*/ _jsx(PluginSpecEditor, {
                     pluginSelection: value.selection,
                     value: value.spec,
-                    onChange: onSpecChange,
-                    isReadonly: isReadonly,
-                    queryHandlerSettings: queryHandlerSettings
+                    onChange: handleSpecChange,
+                    isReadonly: isReadonly
                 })
             })
         ]
     });
-});
-PluginEditor.displayName = 'PluginEditor';
+}
 
 //# sourceMappingURL=PluginEditor.js.map

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, Button } from '@mui/material';\nimport Reload from 'mdi-material-ui/Reload';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { forwardRef, ReactElement, useCallback, useImperativeHandle, useMemo, useState } from 'react';\nimport { UnknownSpec } from '@perses-dev/core';\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, PluginEditorRef, 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 */\n\nexport const PluginEditor = forwardRef<PluginEditorRef, PluginEditorProps>((props, ref): ReactElement => {\n  const {\n    value,\n    withRunQueryButton = true,\n    pluginTypes,\n    pluginKindLabel,\n    onChange: _,\n    isReadonly,\n    postExecuteRunQuery: refresh,\n    filteredQueryPlugins,\n    ...others\n  } = props;\n  const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);\n\n  /* \n     We could technically merge the watchedQuery, watchedOtherSpecs into a single watched-object,\n     because at the end of the day, they are all specs.\n     However, let's have them separated to keep the code simple and readable.\n     Reason: Only Query string field is common between all of them. Other specs may be different\n     Example: Legend, and MinSteps\n    */\n  const [watchedQuery, setWatchQuery] = useState<string>(value.spec['query'] as string);\n  const [watchedOtherSpecs, setWatchOtherSpecs] = useState<UnknownSpec>(value.spec);\n\n  const runQueryHandler = useCallback((): void => {\n    onSpecChange({ ...value.spec, ...watchedOtherSpecs, query: watchedQuery });\n    refresh?.();\n  }, [value.spec, onSpecChange, watchedQuery, watchedOtherSpecs, refresh]);\n\n  const queryHandlerSettings = useMemo(() => {\n    return withRunQueryButton\n      ? {\n          runWithOnBlur: false,\n          watchQueryChanges: (query: string): void => {\n            setWatchQuery(query);\n          },\n          setWatchOtherSpecs: (otherSpecs: UnknownSpec): void => {\n            setWatchOtherSpecs(otherSpecs);\n          },\n        }\n      : undefined;\n  }, [withRunQueryButton]);\n\n  useImperativeHandle(ref, () => ({ flushChanges: runQueryHandler }));\n\n  return (\n    <Box {...others}>\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: 1,\n          mb: 1,\n        }}\n      >\n        <PluginKindSelect\n          fullWidth={false}\n          sx={{ minWidth: 120 }}\n          margin=\"dense\"\n          label={pluginKindLabel}\n          pluginTypes={pluginTypes}\n          disabled={isLoading}\n          value={pendingSelection ? pendingSelection : value.selection}\n          slotProps={{ input: { readOnly: isReadonly } }}\n          error={!!error}\n          helperText={error?.message}\n          onChange={onSelectionChange}\n          filteredQueryPlugins={filteredQueryPlugins}\n        />\n\n        {withRunQueryButton && !isLoading && (\n          <Button data-testid=\"run_query_button\" variant=\"contained\" startIcon={<Reload />} onClick={runQueryHandler}>\n            Run Query\n          </Button>\n        )}\n      </Box>\n\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        <PluginSpecEditor\n          pluginSelection={value.selection}\n          value={value.spec}\n          onChange={onSpecChange}\n          isReadonly={isReadonly}\n          queryHandlerSettings={queryHandlerSettings}\n        />\n      </ErrorBoundary>\n    </Box>\n  );\n});\n\nPluginEditor.displayName = 'PluginEditor';\n"],"names":["Box","Button","Reload","ErrorAlert","ErrorBoundary","forwardRef","useCallback","useImperativeHandle","useMemo","useState","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","ref","value","withRunQueryButton","pluginTypes","pluginKindLabel","onChange","_","isReadonly","postExecuteRunQuery","refresh","filteredQueryPlugins","others","pendingSelection","isLoading","error","onSelectionChange","onSpecChange","watchedQuery","setWatchQuery","spec","watchedOtherSpecs","setWatchOtherSpecs","runQueryHandler","query","queryHandlerSettings","runWithOnBlur","watchQueryChanges","otherSpecs","undefined","flushChanges","sx","display","flexDirection","alignItems","justifyContent","gap","mb","fullWidth","minWidth","margin","label","disabled","selection","slotProps","input","readOnly","helperText","message","data-testid","variant","startIcon","onClick","FallbackComponent","pluginSelection","displayName"],"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,EAAEC,MAAM,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,yBAAyB;AAC5C,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AACnE,SAASC,UAAU,EAAgBC,WAAW,EAAEC,mBAAmB,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAEtG,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAA6CC,eAAe,QAAQ,sBAAsB;AAE1F;;;;;;;CAOC,GAED,OAAO,MAAMC,6BAAeR,WAA+C,CAACS,OAAOC;IACjF,MAAM,EACJC,KAAK,EACLC,qBAAqB,IAAI,EACzBC,WAAW,EACXC,eAAe,EACfC,UAAUC,CAAC,EACXC,UAAU,EACVC,qBAAqBC,OAAO,EAC5BC,oBAAoB,EACpB,GAAGC,QACJ,GAAGZ;IACJ,MAAM,EAAEa,gBAAgB,EAAEC,SAAS,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,YAAY,EAAE,GAAGnB,gBAAgBE;IAEhG;;;;;;IAME,GACF,MAAM,CAACkB,cAAcC,cAAc,GAAGxB,SAAiBO,MAAMkB,IAAI,CAAC,QAAQ;IAC1E,MAAM,CAACC,mBAAmBC,mBAAmB,GAAG3B,SAAsBO,MAAMkB,IAAI;IAEhF,MAAMG,kBAAkB/B,YAAY;QAClCyB,aAAa;YAAE,GAAGf,MAAMkB,IAAI;YAAE,GAAGC,iBAAiB;YAAEG,OAAON;QAAa;QACxER;IACF,GAAG;QAACR,MAAMkB,IAAI;QAAEH;QAAcC;QAAcG;QAAmBX;KAAQ;IAEvE,MAAMe,uBAAuB/B,QAAQ;QACnC,OAAOS,qBACH;YACEuB,eAAe;YACfC,mBAAmB,CAACH;gBAClBL,cAAcK;YAChB;YACAF,oBAAoB,CAACM;gBACnBN,mBAAmBM;YACrB;QACF,IACAC;IACN,GAAG;QAAC1B;KAAmB;IAEvBV,oBAAoBQ,KAAK,IAAO,CAAA;YAAE6B,cAAcP;QAAgB,CAAA;IAEhE,qBACE,MAACrC;QAAK,GAAG0B,MAAM;;0BACb,MAAC1B;gBACC6C,IAAI;oBACFC,SAAS;oBACTC,eAAe;oBACfC,YAAY;oBACZC,gBAAgB;oBAChBC,KAAK;oBACLC,IAAI;gBACN;;kCAEA,KAACzC;wBACC0C,WAAW;wBACXP,IAAI;4BAAEQ,UAAU;wBAAI;wBACpBC,QAAO;wBACPC,OAAOpC;wBACPD,aAAaA;wBACbsC,UAAU5B;wBACVZ,OAAOW,mBAAmBA,mBAAmBX,MAAMyC,SAAS;wBAC5DC,WAAW;4BAAEC,OAAO;gCAAEC,UAAUtC;4BAAW;wBAAE;wBAC7CO,OAAO,CAAC,CAACA;wBACTgC,YAAYhC,OAAOiC;wBACnB1C,UAAUU;wBACVL,sBAAsBA;;oBAGvBR,sBAAsB,CAACW,2BACtB,KAAC3B;wBAAO8D,eAAY;wBAAmBC,SAAQ;wBAAYC,yBAAW,KAAC/D;wBAAWgE,SAAS7B;kCAAiB;;;;0BAMhH,KAACjC;gBAAc+D,mBAAmBhE;0BAChC,cAAA,KAACQ;oBACCyD,iBAAiBpD,MAAMyC,SAAS;oBAChCzC,OAAOA,MAAMkB,IAAI;oBACjBd,UAAUW;oBACVT,YAAYA;oBACZiB,sBAAsBA;;;;;AAKhC,GAAG;AAEH1B,aAAawD,WAAW,GAAG"}
+{"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, Button } from '@mui/material';\nimport Reload from 'mdi-material-ui/Reload';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { ReactElement, useCallback } from 'react';\nimport { UnknownSpec } from '@perses-dev/core';\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 */\n\nexport function PluginEditor(props: PluginEditorProps): ReactElement {\n  const {\n    value,\n    withRunQueryButton = true,\n    pluginTypes,\n    pluginKindLabel,\n    onChange: _,\n    isReadonly,\n    onRunQuery,\n    filteredQueryPlugins,\n    ...others\n  } = props;\n\n  const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);\n\n  const handleSpecChange = useCallback(\n    (nextSpec: UnknownSpec) => {\n      onSpecChange(nextSpec);\n    },\n    [onSpecChange]\n  );\n\n  return (\n    <Box {...others}>\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: 1,\n          mb: 1,\n        }}\n      >\n        <PluginKindSelect\n          fullWidth={false}\n          sx={{ minWidth: 120 }}\n          margin=\"dense\"\n          label={pluginKindLabel}\n          pluginTypes={pluginTypes}\n          disabled={isLoading}\n          value={pendingSelection ? pendingSelection : value.selection}\n          slotProps={{ input: { readOnly: isReadonly } }}\n          error={!!error}\n          helperText={error?.message}\n          onChange={onSelectionChange}\n          filteredQueryPlugins={filteredQueryPlugins}\n        />\n\n        {withRunQueryButton && (\n          <Button\n            data-testid=\"run_query_button\"\n            variant=\"contained\"\n            startIcon={<Reload />}\n            onClick={onRunQuery}\n            disabled={isLoading}\n          >\n            Run Query\n          </Button>\n        )}\n      </Box>\n\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        <PluginSpecEditor\n          pluginSelection={value.selection}\n          value={value.spec}\n          onChange={handleSpecChange}\n          isReadonly={isReadonly}\n        />\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","Button","Reload","ErrorAlert","ErrorBoundary","useCallback","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","value","withRunQueryButton","pluginTypes","pluginKindLabel","onChange","_","isReadonly","onRunQuery","filteredQueryPlugins","others","pendingSelection","isLoading","error","onSelectionChange","onSpecChange","handleSpecChange","nextSpec","sx","display","flexDirection","alignItems","justifyContent","gap","mb","fullWidth","minWidth","margin","label","disabled","selection","slotProps","input","readOnly","helperText","message","data-testid","variant","startIcon","onClick","FallbackComponent","pluginSelection","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,EAAEC,MAAM,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,yBAAyB;AAC5C,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AACnE,SAAuBC,WAAW,QAAQ,QAAQ;AAElD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAA4BC,eAAe,QAAQ,sBAAsB;AAEzE;;;;;;;CAOC,GAED,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EACJC,KAAK,EACLC,qBAAqB,IAAI,EACzBC,WAAW,EACXC,eAAe,EACfC,UAAUC,CAAC,EACXC,UAAU,EACVC,UAAU,EACVC,oBAAoB,EACpB,GAAGC,QACJ,GAAGV;IAEJ,MAAM,EAAEW,gBAAgB,EAAEC,SAAS,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,YAAY,EAAE,GAAGjB,gBAAgBE;IAEhG,MAAMgB,mBAAmBrB,YACvB,CAACsB;QACCF,aAAaE;IACf,GACA;QAACF;KAAa;IAGhB,qBACE,MAACzB;QAAK,GAAGoB,MAAM;;0BACb,MAACpB;gBACC4B,IAAI;oBACFC,SAAS;oBACTC,eAAe;oBACfC,YAAY;oBACZC,gBAAgB;oBAChBC,KAAK;oBACLC,IAAI;gBACN;;kCAEA,KAAC5B;wBACC6B,WAAW;wBACXP,IAAI;4BAAEQ,UAAU;wBAAI;wBACpBC,QAAO;wBACPC,OAAOxB;wBACPD,aAAaA;wBACb0B,UAAUjB;wBACVX,OAAOU,mBAAmBA,mBAAmBV,MAAM6B,SAAS;wBAC5DC,WAAW;4BAAEC,OAAO;gCAAEC,UAAU1B;4BAAW;wBAAE;wBAC7CM,OAAO,CAAC,CAACA;wBACTqB,YAAYrB,OAAOsB;wBACnB9B,UAAUS;wBACVL,sBAAsBA;;oBAGvBP,oCACC,KAACX;wBACC6C,eAAY;wBACZC,SAAQ;wBACRC,yBAAW,KAAC9C;wBACZ+C,SAAS/B;wBACTqB,UAAUjB;kCACX;;;;0BAML,KAAClB;gBAAc8C,mBAAmB/C;0BAChC,cAAA,KAACI;oBACC4C,iBAAiBxC,MAAM6B,SAAS;oBAChC7B,OAAOA,MAAMyC,IAAI;oBACjBrC,UAAUW;oBACVT,YAAYA;;;;;AAKtB"}

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

@@ -18,7 +18,7 @@ export interface PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {
     withRunQueryButton?: boolean;
     filteredQueryPlugins?: string[];
     onChange: (next: PluginEditorValue) => void;
-    postExecuteRunQuery?: () => void;
+    onRunQuery?: () => void;
 }
 export interface PluginEditorRef {
     flushChanges?: () => 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,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAe,UAAU,EAAE,MAAM,aAAa,CAAC;AAMtD,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,qBAAqB,CAAC;IACjC,IAAI,EAAE,WAAW,CAAC;CACnB;AAID,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC;IACxE,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,iBAAiB,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,eAAe;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAKD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,aAAa,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IACjG,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG;IAC5D,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,wBAAwB,EAAE,MAAM,IAAI,CAAC;CACtC,CAyHA"}
+{"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,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAe,UAAU,EAAE,MAAM,aAAa,CAAC;AAMtD,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,qBAAqB,CAAC;IACjC,IAAI,EAAE,WAAW,CAAC;CACnB;AAID,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC;IACxE,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,iBAAiB,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,MAAM,WAAW,eAAe;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAKD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,aAAa,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IACjG,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG;IAC5D,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,wBAAwB,EAAE,MAAM,IAAI,CAAC;CACtC,CAyHA"}

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 { UnknownSpec } 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';\nimport { useEvent } from '../../utils';\n\nexport interface PluginEditorSelection {\n  type: PluginType;\n  kind: string;\n}\n\nexport interface PluginEditorValue {\n  selection: PluginEditorSelection;\n  spec: UnknownSpec;\n}\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  pluginTypes: PluginType[];\n  pluginKindLabel: string;\n  value: PluginEditorValue;\n  isReadonly?: boolean;\n  withRunQueryButton?: boolean;\n  filteredQueryPlugins?: string[];\n  onChange: (next: PluginEditorValue) => void;\n  postExecuteRunQuery?: () => void;\n}\n\nexport interface PluginEditorRef {\n  flushChanges?: () => 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, 'pluginTypes' | '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  pendingSelection?: PluginEditorSelection;\n  isLoading: boolean;\n  error: Error | null;\n  onSelectionChange: (s: PluginEditorSelection) => void;\n  onSpecChange: (next: UnknownSpec) => void;\n  rememberCurrentSpecState: () => void;\n} {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const { pluginTypes, value, onHideQueryEditorChange = (): void => {} } = 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    [value.selection.type]: { [value.selection.kind]: value.spec },\n  });\n  const rememberCurrentSpecState = useEvent(() => {\n    let byPluginType = prevSpecState.current[value.selection.type];\n    if (byPluginType === undefined) {\n      byPluginType = {};\n      prevSpecState.current[value.selection.type] = byPluginType;\n    }\n    byPluginType[value.selection.kind] = value.spec;\n  });\n\n  // The previous hide query state for each panel kind\n  const hideQueryState = useRef<HideQueryEditorState>({\n    [value.selection.kind]: false,\n  });\n\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPluginType = pluginTypes[0];\n  const defaultPluginKind = defaultPluginType ? defaultPluginKinds?.[defaultPluginType] : undefined;\n  const defaultPluginSelection =\n    defaultPluginType && defaultPluginKind\n      ? {\n          type: defaultPluginType,\n          kind: defaultPluginKind,\n        }\n      : undefined;\n  const initPendingSelection = !value.selection && defaultPluginSelection ? defaultPluginSelection : undefined;\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 [pendingSelection, setPendingSelection] = useState<PluginEditorSelection | undefined>(initPendingSelection);\n\n  // Take a default kind in case user write explicitly an empty kind in the initial value\n  useEffect(() => {\n    if (value.selection.kind === '') {\n      value.selection.kind = defaultPluginKind || '';\n    }\n  }, [value.selection, defaultPluginKind]);\n\n  const { data: plugin, isFetching, error } = usePlugin(pendingSelection?.type, pendingSelection?.kind || '');\n\n  useEffect(() => {\n    // Nothing to do if no new plugin kind is pending\n    if (!pendingSelection) 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      selection: pendingSelection,\n      spec: plugin.createInitialOptions ? plugin.createInitialOptions() : {},\n    });\n\n    if (pendingSelection.type === 'Panel') {\n      const panelPlugin = plugin as PanelPlugin;\n      hideQueryState.current[pendingSelection.kind] = !!panelPlugin.hideQueryEditor;\n      if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.selection.kind]) {\n        onHideQuery(!!panelPlugin.hideQueryEditor);\n      }\n    }\n    setPendingSelection(undefined);\n  }, [pendingSelection, plugin, rememberCurrentSpecState, onChange, onHideQuery, hideQueryState, value.selection]);\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 onSelectionChange: PluginKindSelectProps['onChange'] = (nextSelection) => {\n    // If we already have state for this plugin type/kind from a previous selection, just use it\n    const previousState = prevSpecState.current[nextSelection.type]?.[nextSelection.kind];\n    if (previousState !== undefined) {\n      rememberCurrentSpecState();\n      onChange({\n        selection: nextSelection,\n        spec: previousState,\n      });\n    } else {\n      // Otherwise, kick off the async loading process\n      setPendingSelection(nextSelection);\n    }\n\n    if (\n      nextSelection.type === 'Panel' &&\n      hideQueryState.current[nextSelection.kind] !== undefined &&\n      hideQueryState.current[value.selection.kind] !== hideQueryState.current[nextSelection.kind]\n    ) {\n      onHideQuery(!!hideQueryState.current[nextSelection.kind]);\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 {\n    pendingSelection,\n    isLoading: isFetching,\n    error,\n    onSelectionChange,\n    onSpecChange,\n    rememberCurrentSpecState,\n  };\n}\n"],"names":["useState","useRef","useEffect","produce","usePlugin","usePluginRegistry","useEvent","usePluginEditor","props","pluginTypes","value","onHideQueryEditorChange","onChange","onHideQuery","prevSpecState","selection","type","kind","spec","rememberCurrentSpecState","byPluginType","current","undefined","hideQueryState","defaultPluginKinds","defaultPluginType","defaultPluginKind","defaultPluginSelection","initPendingSelection","pendingSelection","setPendingSelection","data","plugin","isFetching","error","createInitialOptions","panelPlugin","hideQueryEditor","onSelectionChange","nextSelection","previousState","onSpecChange","next","draft","isLoading"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAIjC,SAASA,QAAQ,EAAEC,MAAM,EAAEC,SAAS,QAAQ,QAAQ;AACpD,SAASC,OAAO,QAAQ,QAAQ;AAIhC,SAASC,SAAS,EAAEC,iBAAiB,QAAQ,gBAAgB;AAC7D,SAASC,QAAQ,QAAQ,cAAc;AAyCvC;;;;;CAKC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IAQzD,gEAAgE;IAChE,MAAM,EAAEC,WAAW,EAAEC,KAAK,EAAEC,0BAA0B,KAAa,CAAC,EAAE,GAAGH,OAAO,8FAA8F;IAE9K,kFAAkF;IAClF,MAAMI,WAAWN,SAASE,MAAMI,QAAQ;IACxC,MAAMC,cAAcP,SAASK;IAE7B,uGAAuG;IACvG,MAAMG,gBAAgBb,OAA0B;QAC9C,CAACS,MAAMK,SAAS,CAACC,IAAI,CAAC,EAAE;YAAE,CAACN,MAAMK,SAAS,CAACE,IAAI,CAAC,EAAEP,MAAMQ,IAAI;QAAC;IAC/D;IACA,MAAMC,2BAA2Bb,SAAS;QACxC,IAAIc,eAAeN,cAAcO,OAAO,CAACX,MAAMK,SAAS,CAACC,IAAI,CAAC;QAC9D,IAAII,iBAAiBE,WAAW;YAC9BF,eAAe,CAAC;YAChBN,cAAcO,OAAO,CAACX,MAAMK,SAAS,CAACC,IAAI,CAAC,GAAGI;QAChD;QACAA,YAAY,CAACV,MAAMK,SAAS,CAACE,IAAI,CAAC,GAAGP,MAAMQ,IAAI;IACjD;IAEA,oDAAoD;IACpD,MAAMK,iBAAiBtB,OAA6B;QAClD,CAACS,MAAMK,SAAS,CAACE,IAAI,CAAC,EAAE;IAC1B;IAEA,MAAM,EAAEO,kBAAkB,EAAE,GAAGnB;IAC/B,MAAMoB,oBAAoBhB,WAAW,CAAC,EAAE;IACxC,MAAMiB,oBAAoBD,oBAAoBD,oBAAoB,CAACC,kBAAkB,GAAGH;IACxF,MAAMK,yBACJF,qBAAqBC,oBACjB;QACEV,MAAMS;QACNR,MAAMS;IACR,IACAJ;IACN,MAAMM,uBAAuB,CAAClB,MAAMK,SAAS,IAAIY,yBAAyBA,yBAAyBL;IAEnG,iHAAiH;IACjH,yEAAyE;IACzE,MAAM,CAACO,kBAAkBC,oBAAoB,GAAG9B,SAA4C4B;IAE5F,uFAAuF;IACvF1B,UAAU;QACR,IAAIQ,MAAMK,SAAS,CAACE,IAAI,KAAK,IAAI;YAC/BP,MAAMK,SAAS,CAACE,IAAI,GAAGS,qBAAqB;QAC9C;IACF,GAAG;QAAChB,MAAMK,SAAS;QAAEW;KAAkB;IAEvC,MAAM,EAAEK,MAAMC,MAAM,EAAEC,UAAU,EAAEC,KAAK,EAAE,GAAG9B,UAAUyB,kBAAkBb,MAAMa,kBAAkBZ,QAAQ;IAExGf,UAAU;QACR,iDAAiD;QACjD,IAAI,CAAC2B,kBAAkB;QAEvB,8CAA8C;QAC9C,IAAIG,WAAWV,WAAW;QAE1B,qFAAqF;QACrFH;QACAP,SAAS;YACPG,WAAWc;YACXX,MAAMc,OAAOG,oBAAoB,GAAGH,OAAOG,oBAAoB,KAAK,CAAC;QACvE;QAEA,IAAIN,iBAAiBb,IAAI,KAAK,SAAS;YACrC,MAAMoB,cAAcJ;YACpBT,eAAeF,OAAO,CAACQ,iBAAiBZ,IAAI,CAAC,GAAG,CAAC,CAACmB,YAAYC,eAAe;YAC7E,IAAI,CAAC,CAACD,YAAYC,eAAe,KAAKd,eAAeF,OAAO,CAACX,MAAMK,SAAS,CAACE,IAAI,CAAC,EAAE;gBAClFJ,YAAY,CAAC,CAACuB,YAAYC,eAAe;YAC3C;QACF;QACAP,oBAAoBR;IACtB,GAAG;QAACO;QAAkBG;QAAQb;QAA0BP;QAAUC;QAAaU;QAAgBb,MAAMK,SAAS;KAAC;IAE/G;;;GAGC,GACD,MAAMuB,oBAAuD,CAACC;QAC5D,4FAA4F;QAC5F,MAAMC,gBAAgB1B,cAAcO,OAAO,CAACkB,cAAcvB,IAAI,CAAC,EAAE,CAACuB,cAActB,IAAI,CAAC;QACrF,IAAIuB,kBAAkBlB,WAAW;YAC/BH;YACAP,SAAS;gBACPG,WAAWwB;gBACXrB,MAAMsB;YACR;QACF,OAAO;YACL,gDAAgD;YAChDV,oBAAoBS;QACtB;QAEA,IACEA,cAAcvB,IAAI,KAAK,WACvBO,eAAeF,OAAO,CAACkB,cAActB,IAAI,CAAC,KAAKK,aAC/CC,eAAeF,OAAO,CAACX,MAAMK,SAAS,CAACE,IAAI,CAAC,KAAKM,eAAeF,OAAO,CAACkB,cAActB,IAAI,CAAC,EAC3F;YACAJ,YAAY,CAAC,CAACU,eAAeF,OAAO,CAACkB,cAActB,IAAI,CAAC;QAC1D;IACF;IAEA;;GAEC,GACD,MAAMwB,eAAkD,CAACC;QACvD9B,SACET,QAAQO,OAAO,CAACiC;YACdA,MAAMzB,IAAI,GAAGwB;QACf;IAEJ;IAEA,OAAO;QACLb;QACAe,WAAWX;QACXC;QACAI;QACAG;QACAtB;IACF;AACF"}
+{"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 { UnknownSpec } from '@perses-dev/core';\nimport { useState, useRef, useEffect } from 'react';\nimport { produce } from 'immer';\nimport { PanelPlugin, PluginType } from '../../model';\nimport { PluginKindSelectProps } from '../PluginKindSelect';\nimport { PluginSpecEditorProps } from '../PluginSpecEditor';\nimport { usePlugin, usePluginRegistry } from '../../runtime';\nimport { useEvent } from '../../utils';\n\nexport interface PluginEditorSelection {\n  type: PluginType;\n  kind: string;\n}\n\nexport interface PluginEditorValue {\n  selection: PluginEditorSelection;\n  spec: UnknownSpec;\n}\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  pluginTypes: PluginType[];\n  pluginKindLabel: string;\n  value: PluginEditorValue;\n  isReadonly?: boolean;\n  withRunQueryButton?: boolean;\n  filteredQueryPlugins?: string[];\n  onChange: (next: PluginEditorValue) => void;\n  onRunQuery?: () => void;\n}\n\nexport interface PluginEditorRef {\n  flushChanges?: () => 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, 'pluginTypes' | '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  pendingSelection?: PluginEditorSelection;\n  isLoading: boolean;\n  error: Error | null;\n  onSelectionChange: (s: PluginEditorSelection) => void;\n  onSpecChange: (next: UnknownSpec) => void;\n  rememberCurrentSpecState: () => void;\n} {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const { pluginTypes, value, onHideQueryEditorChange = (): void => {} } = 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    [value.selection.type]: { [value.selection.kind]: value.spec },\n  });\n  const rememberCurrentSpecState = useEvent(() => {\n    let byPluginType = prevSpecState.current[value.selection.type];\n    if (byPluginType === undefined) {\n      byPluginType = {};\n      prevSpecState.current[value.selection.type] = byPluginType;\n    }\n    byPluginType[value.selection.kind] = value.spec;\n  });\n\n  // The previous hide query state for each panel kind\n  const hideQueryState = useRef<HideQueryEditorState>({\n    [value.selection.kind]: false,\n  });\n\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPluginType = pluginTypes[0];\n  const defaultPluginKind = defaultPluginType ? defaultPluginKinds?.[defaultPluginType] : undefined;\n  const defaultPluginSelection =\n    defaultPluginType && defaultPluginKind\n      ? {\n          type: defaultPluginType,\n          kind: defaultPluginKind,\n        }\n      : undefined;\n  const initPendingSelection = !value.selection && defaultPluginSelection ? defaultPluginSelection : undefined;\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 [pendingSelection, setPendingSelection] = useState<PluginEditorSelection | undefined>(initPendingSelection);\n\n  // Take a default kind in case user write explicitly an empty kind in the initial value\n  useEffect(() => {\n    if (value.selection.kind === '') {\n      value.selection.kind = defaultPluginKind || '';\n    }\n  }, [value.selection, defaultPluginKind]);\n\n  const { data: plugin, isFetching, error } = usePlugin(pendingSelection?.type, pendingSelection?.kind || '');\n\n  useEffect(() => {\n    // Nothing to do if no new plugin kind is pending\n    if (!pendingSelection) 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      selection: pendingSelection,\n      spec: plugin.createInitialOptions ? plugin.createInitialOptions() : {},\n    });\n\n    if (pendingSelection.type === 'Panel') {\n      const panelPlugin = plugin as PanelPlugin;\n      hideQueryState.current[pendingSelection.kind] = !!panelPlugin.hideQueryEditor;\n      if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.selection.kind]) {\n        onHideQuery(!!panelPlugin.hideQueryEditor);\n      }\n    }\n    setPendingSelection(undefined);\n  }, [pendingSelection, plugin, rememberCurrentSpecState, onChange, onHideQuery, hideQueryState, value.selection]);\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 onSelectionChange: PluginKindSelectProps['onChange'] = (nextSelection) => {\n    // If we already have state for this plugin type/kind from a previous selection, just use it\n    const previousState = prevSpecState.current[nextSelection.type]?.[nextSelection.kind];\n    if (previousState !== undefined) {\n      rememberCurrentSpecState();\n      onChange({\n        selection: nextSelection,\n        spec: previousState,\n      });\n    } else {\n      // Otherwise, kick off the async loading process\n      setPendingSelection(nextSelection);\n    }\n\n    if (\n      nextSelection.type === 'Panel' &&\n      hideQueryState.current[nextSelection.kind] !== undefined &&\n      hideQueryState.current[value.selection.kind] !== hideQueryState.current[nextSelection.kind]\n    ) {\n      onHideQuery(!!hideQueryState.current[nextSelection.kind]);\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 {\n    pendingSelection,\n    isLoading: isFetching,\n    error,\n    onSelectionChange,\n    onSpecChange,\n    rememberCurrentSpecState,\n  };\n}\n"],"names":["useState","useRef","useEffect","produce","usePlugin","usePluginRegistry","useEvent","usePluginEditor","props","pluginTypes","value","onHideQueryEditorChange","onChange","onHideQuery","prevSpecState","selection","type","kind","spec","rememberCurrentSpecState","byPluginType","current","undefined","hideQueryState","defaultPluginKinds","defaultPluginType","defaultPluginKind","defaultPluginSelection","initPendingSelection","pendingSelection","setPendingSelection","data","plugin","isFetching","error","createInitialOptions","panelPlugin","hideQueryEditor","onSelectionChange","nextSelection","previousState","onSpecChange","next","draft","isLoading"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,kBAAkB,EAA0B,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAmUtF,UAAU,uBAAuB;IAC/B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,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,EACjC,yBAAyB,EACzB,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,GAAG,YAAY,CAoMxC"}
+{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAyB,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,kBAAkB,EAA0B,MAAM,EAAE,MAAM,kBAAkB,CAAC;AA4UtF,UAAU,uBAAuB;IAC/B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,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,EACjC,yBAAyB,EACzB,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,GAAG,YAAY,CAoMxC"}

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

@@ -11,16 +11,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Stack, Divider } from '@mui/material';
 import { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions } from '@perses-dev/components';
 import { Controller, FormProvider, useForm, useFormContext, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useQueryClient } from '@tanstack/react-query';
 import { getSubmitText, getTitleAction } from '../../../utils';
 import { PluginEditor } from '../../PluginEditor';
 import { useValidationSchemas } from '../../../context';
 import { VARIABLE_TYPES } from '../variable-model';
-import { useTimeRange } from '../../../runtime';
 import { VariableListPreview, VariablePreview } from './VariablePreview';
 import { SORT_METHODS } from './variable-editor-form-model';
 function FallbackPreview() {
@@ -94,10 +94,29 @@ function TextVariableEditorForm({ action, control }) {
 }
 function ListVariableEditorForm({ action, control }) {
     const form = useFormContext();
-    /** We use `previewSpec` to know when to explicitly update the
-   * spec that will be used for preview. The reason why we do this is to avoid
+    const queryClient = useQueryClient();
+    const values = form.getValues();
+    /* We use `previewDefinition` to explicitly update the spec
+   * that will be used for preview when running query. The reason why we do this is to avoid
    * having to re-fetch the values when the user is still editing the spec.
-   */ const previewSpec = form.getValues();
+   * Using structuredClone to not have reference issues with nested objects.
+   */ const [previewDefinition, setPreviewDefinition] = useState(structuredClone(values));
+    const handleRunQuery = useCallback(async ()=>{
+        if (JSON.stringify(previewDefinition) === JSON.stringify(values)) {
+            await queryClient.invalidateQueries({
+                queryKey: [
+                    'variable',
+                    previewDefinition
+                ]
+            });
+        } else {
+            setPreviewDefinition(structuredClone(values));
+        }
+    }, [
+        previewDefinition,
+        queryClient,
+        values
+    ]);
     const plugin = useWatch({
         control,
         name: 'spec.plugin'
@@ -114,7 +133,6 @@ function ListVariableEditorForm({ action, control }) {
     });
     // When variable kind is selected we need to provide default values
     // TODO: check if react-hook-form has a better way to do this
-    const values = form.getValues();
     if (values.spec.allowAllValue === undefined) {
         form.setValue('spec.allowAllValue', false);
     }
@@ -130,7 +148,6 @@ function ListVariableEditorForm({ action, control }) {
     if (!values.spec.sort) {
         form.setValue('spec.sort', 'none');
     }
-    const { refresh } = useTimeRange();
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(Typography, {
@@ -146,11 +163,11 @@ function ListVariableEditorForm({ action, control }) {
                         children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                             FallbackComponent: FallbackPreview,
                             resetKeys: [
-                                previewSpec
+                                previewDefinition
                             ],
                             children: /*#__PURE__*/ _jsx(VariableListPreview, {
                                 sortMethod: sortMethod,
-                                definition: previewSpec
+                                definition: previewDefinition
                             })
                         })
                     }),
@@ -162,7 +179,6 @@ function ListVariableEditorForm({ action, control }) {
                                 name: "spec.plugin",
                                 render: ({ field })=>{
                                     return /*#__PURE__*/ _jsx(PluginEditor, {
-                                        postExecuteRunQuery: refresh,
                                         withRunQueryButton: true,
                                         width: "100%",
                                         pluginTypes: [
@@ -182,7 +198,8 @@ function ListVariableEditorForm({ action, control }) {
                                                 kind: v.selection.kind,
                                                 spec: v.spec
                                             });
-                                        }
+                                        },
+                                        onRunQuery: handleRunQuery
                                     });
                                 }
                             })

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 { DispatchWithoutAction, ReactElement, useState } from 'react';\nimport { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Stack, Divider } from '@mui/material';\nimport { VariableDefinition, ListVariableDefinition, Action } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions } from '@perses-dev/components';\nimport { Control, Controller, FormProvider, SubmitHandler, useForm, useFormContext, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { getSubmitText, getTitleAction } from '../../../utils';\nimport { PluginEditor } from '../../PluginEditor';\nimport { useValidationSchemas } from '../../../context';\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { useTimeRange } from '../../../runtime';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\nimport { SORT_METHODS, SortMethodName } from './variable-editor-form-model';\n\nfunction FallbackPreview(): ReactElement {\n  return <div>Error previewing values</div>;\n}\n\ninterface KindVariableEditorFormProps {\n  action: Action;\n  control: Control<VariableDefinition>;\n}\n\nfunction TextVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n  return (\n    <>\n      <Typography py={1} variant=\"subtitle1\">\n        Text Options\n      </Typography>\n      <Stack spacing={2}>\n        <Controller\n          control={control}\n          name=\"spec.value\"\n          render={({ field, fieldState }) => (\n            <>\n              <Box>\n                <VariablePreview values={[field.value]} />\n              </Box>\n              <TextField\n                {...field}\n                label=\"Value\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                value={field.value ?? ''}\n                onChange={(event) => {\n                  field.onChange(event);\n                }}\n              />\n            </>\n          )}\n        />\n        <Controller\n          control={control}\n          name=\"spec.constant\"\n          render={({ field }) => (\n            <FormControlLabel\n              label=\"Constant\"\n              control={\n                <Switch\n                  {...field}\n                  checked={!!field.value}\n                  readOnly={action === 'read'}\n                  value={field.value ?? false}\n                  onChange={(event) => {\n                    if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                    field.onChange(event);\n                  }}\n                />\n              }\n            />\n          )}\n        />\n      </Stack>\n    </>\n  );\n}\n\nfunction ListVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n  const form = useFormContext<VariableDefinition>();\n  /** We use `previewSpec` 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 = form.getValues() as ListVariableDefinition;\n\n  const plugin = useWatch<VariableDefinition, 'spec.plugin'>({ control, name: 'spec.plugin' });\n  const kind = plugin?.kind;\n  const pluginSpec = plugin?.spec;\n\n  const _allowAllValue = useWatch<VariableDefinition, 'spec.allowAllValue'>({\n    control: control,\n    name: 'spec.allowAllValue',\n  });\n\n  const sortMethod = useWatch<VariableDefinition, 'spec.sort'>({\n    control: control,\n    name: 'spec.sort',\n  }) as SortMethodName;\n\n  // When variable kind is selected we need to provide default values\n  // TODO: check if react-hook-form has a better way to do this\n  const values = form.getValues() as ListVariableDefinition;\n  if (values.spec.allowAllValue === undefined) {\n    form.setValue('spec.allowAllValue', false);\n  }\n\n  if (values.spec.allowMultiple === undefined) {\n    form.setValue('spec.allowMultiple', false);\n  }\n\n  if (!values.spec.plugin) {\n    form.setValue('spec.plugin', { kind: 'StaticListVariable', spec: {} });\n  }\n\n  if (!values.spec.sort) {\n    form.setValue('spec.sort', 'none');\n  }\n\n  const { refresh } = useTimeRange();\n\n  return (\n    <>\n      <Typography py={1} variant=\"subtitle1\">\n        List Options\n      </Typography>\n      <Stack spacing={2} mb={2}>\n        <Box>\n          <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n            <VariableListPreview sortMethod={sortMethod} definition={previewSpec} />\n          </ErrorBoundary>\n        </Box>\n        <Stack>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <Controller\n              control={control}\n              name=\"spec.plugin\"\n              render={({ field }) => {\n                return (\n                  <PluginEditor\n                    postExecuteRunQuery={refresh}\n                    withRunQueryButton\n                    width=\"100%\"\n                    pluginTypes={['Variable']}\n                    pluginKindLabel=\"Source\"\n                    value={{\n                      selection: {\n                        type: 'Variable',\n                        kind: kind ?? 'StaticListVariable',\n                      },\n                      spec: pluginSpec ?? {},\n                    }}\n                    isReadonly={action === 'read'}\n                    onChange={(v) => {\n                      field.onChange({ kind: v.selection.kind, spec: v.spec });\n                    }}\n                  />\n                );\n              }}\n            />\n          </ErrorBoundary>\n        </Stack>\n\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.capturingRegexp\"\n            render={({ field, fieldState }) => (\n              <TextField\n                {...field}\n                label=\"Capturing Regexp Filter\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                value={field.value ?? ''}\n                onChange={(event) => {\n                  if (event.target.value === '') {\n                    field.onChange(undefined);\n                  } else {\n                    field.onChange(event);\n                  }\n                }}\n                helperText={\n                  fieldState.error?.message\n                    ? fieldState.error.message\n                    : 'Optional, if you want to filter on captured result.'\n                }\n              />\n            )}\n          />\n        </Stack>\n\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.sort\"\n            render={({ field, fieldState }) => (\n              <TextField\n                select\n                {...field}\n                fullWidth\n                label=\"Sort\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                value={field.value ?? 'none'}\n                onChange={(event) => {\n                  field.onChange(event);\n                }}\n              >\n                {Object.keys(SORT_METHODS).map((key) => {\n                  if (!SORT_METHODS[key as SortMethodName]) return null;\n                  const { label } = SORT_METHODS[key as SortMethodName];\n                  return (\n                    <MenuItem key={key} value={key}>\n                      {label}\n                    </MenuItem>\n                  );\n                })}\n              </TextField>\n            )}\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          <Controller\n            control={control}\n            name=\"spec.allowMultiple\"\n            render={({ field }) => (\n              <FormControlLabel\n                label=\"Allow Multiple Values\"\n                control={\n                  <Switch\n                    {...field}\n                    checked={!!field.value}\n                    readOnly={action === 'read'}\n                    value={field.value ?? false}\n                    onChange={(event) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      field.onChange(event);\n                    }}\n                  />\n                }\n              />\n            )}\n          />\n          <Typography variant=\"caption\">Enables multiple values to be selected at the same time</Typography>\n        </Stack>\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.allowAllValue\"\n            render={({ field }) => (\n              <FormControlLabel\n                label=\"Allow All option\"\n                control={\n                  <Switch\n                    {...field}\n                    checked={!!field.value}\n                    readOnly={action === 'read'}\n                    value={field.value ?? false}\n                    onChange={(event) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      field.onChange(event);\n                    }}\n                  />\n                }\n              />\n            )}\n          />\n          <Typography mb={1} variant=\"caption\">\n            Enables an option to include all variable values\n          </Typography>\n          {_allowAllValue && (\n            <Controller\n              control={control}\n              name=\"spec.customAllValue\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Custom All Value\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={\n                    fieldState.error?.message\n                      ? fieldState.error.message\n                      : 'When All is selected, this value will be used'\n                  }\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    if (event.target.value === '') {\n                      field.onChange(undefined);\n                    } else {\n                      field.onChange(event);\n                    }\n                  }}\n                />\n              )}\n            />\n          )}\n        </Stack>\n      </Stack>\n    </>\n  );\n}\n\ninterface VariableEditorFormProps {\n  initialVariableDefinition: VariableDefinition;\n  action: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSave: (def: VariableDefinition) => void;\n  onClose: () => void;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function VariableEditorForm({\n  initialVariableDefinition,\n  action,\n  isDraft,\n  isReadonly,\n  onActionChange,\n  onSave,\n  onClose,\n  onDelete,\n}: VariableEditorFormProps): ReactElement {\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const { variableEditorSchema } = useValidationSchemas();\n  const form = useForm<VariableDefinition>({\n    resolver: zodResolver(variableEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialVariableDefinition,\n  });\n\n  const kind = useWatch({ control: form.control, name: 'kind' });\n\n  function clearFormData(data: VariableDefinition): VariableDefinition {\n    const result = { ...data };\n    if (\n      result.spec.display?.name === undefined &&\n      result.spec.display?.description === undefined &&\n      result.spec.display?.hidden === undefined\n    ) {\n      delete result.spec.display;\n    }\n    return result;\n  }\n\n  const processForm: SubmitHandler<VariableDefinition> = (data: VariableDefinition) => {\n    // reset display attributes to undefined when empty, because we don't want to save empty strings\n    onSave(clearFormData(data));\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  function handleCancel(): void {\n    if (JSON.stringify(initialVariableDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\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        <FormActions\n          action={action}\n          submitText={submitText}\n          isReadonly={isReadonly}\n          isValid={form.formState.isValid}\n          onActionChange={onActionChange}\n          onSubmit={form.handleSubmit(processForm)}\n          onDelete={onDelete}\n          onCancel={handleCancel}\n        />\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.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' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.name\"\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                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.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                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\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                  value={field.value ?? 'TextVariable'}\n                  onChange={(event) => {\n                    field.onChange(event);\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        {kind === 'TextVariable' && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <TextVariableEditorForm action={action} control={form.control} />\n          </ErrorBoundary>\n        )}\n        {kind === 'ListVariable' && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <ListVariableEditorForm action={action} control={form.control} />\n          </ErrorBoundary>\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":["useState","Box","Typography","Switch","TextField","Grid","FormControlLabel","MenuItem","Stack","Divider","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","FormActions","Controller","FormProvider","useForm","useFormContext","useWatch","zodResolver","getSubmitText","getTitleAction","PluginEditor","useValidationSchemas","VARIABLE_TYPES","useTimeRange","VariableListPreview","VariablePreview","SORT_METHODS","FallbackPreview","div","TextVariableEditorForm","action","control","py","variant","spacing","name","render","field","fieldState","values","value","label","InputLabelProps","shrink","undefined","InputProps","readOnly","error","helperText","message","onChange","event","checked","ListVariableEditorForm","form","previewSpec","getValues","plugin","kind","pluginSpec","spec","_allowAllValue","sortMethod","allowAllValue","setValue","allowMultiple","sort","refresh","mb","FallbackComponent","resetKeys","definition","postExecuteRunQuery","withRunQueryButton","width","pluginTypes","pluginKindLabel","selection","type","isReadonly","v","target","select","fullWidth","Object","keys","map","key","VariableEditorForm","initialVariableDefinition","isDraft","onActionChange","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","variableEditorSchema","resolver","mode","defaultValues","clearFormData","data","result","display","description","hidden","processForm","handleCancel","JSON","stringify","sx","alignItems","padding","theme","borderBottom","palette","divider","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","item","xs","required","disabled","isOpen","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 { DispatchWithoutAction, ReactElement, useCallback, useState } from 'react';\nimport { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Stack, Divider } from '@mui/material';\nimport { VariableDefinition, ListVariableDefinition, Action } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions } from '@perses-dev/components';\nimport { Control, Controller, FormProvider, SubmitHandler, useForm, useFormContext, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { getSubmitText, getTitleAction } from '../../../utils';\nimport { PluginEditor } from '../../PluginEditor';\nimport { useValidationSchemas } from '../../../context';\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\nimport { SORT_METHODS, SortMethodName } from './variable-editor-form-model';\n\nfunction FallbackPreview(): ReactElement {\n  return <div>Error previewing values</div>;\n}\n\ninterface KindVariableEditorFormProps {\n  action: Action;\n  control: Control<VariableDefinition>;\n}\n\nfunction TextVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n  return (\n    <>\n      <Typography py={1} variant=\"subtitle1\">\n        Text Options\n      </Typography>\n      <Stack spacing={2}>\n        <Controller\n          control={control}\n          name=\"spec.value\"\n          render={({ field, fieldState }) => (\n            <>\n              <Box>\n                <VariablePreview values={[field.value]} />\n              </Box>\n              <TextField\n                {...field}\n                label=\"Value\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                value={field.value ?? ''}\n                onChange={(event) => {\n                  field.onChange(event);\n                }}\n              />\n            </>\n          )}\n        />\n        <Controller\n          control={control}\n          name=\"spec.constant\"\n          render={({ field }) => (\n            <FormControlLabel\n              label=\"Constant\"\n              control={\n                <Switch\n                  {...field}\n                  checked={!!field.value}\n                  readOnly={action === 'read'}\n                  value={field.value ?? false}\n                  onChange={(event) => {\n                    if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                    field.onChange(event);\n                  }}\n                />\n              }\n            />\n          )}\n        />\n      </Stack>\n    </>\n  );\n}\n\nfunction ListVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n  const form = useFormContext<VariableDefinition>();\n  const queryClient = useQueryClient();\n\n  const values = form.getValues() as ListVariableDefinition;\n  /* We use `previewDefinition` to explicitly update the spec\n   * that will be used for preview when running query. 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   * Using structuredClone to not have reference issues with nested objects.\n   */\n  const [previewDefinition, setPreviewDefinition] = useState(structuredClone(values));\n\n  const handleRunQuery = useCallback(async () => {\n    if (JSON.stringify(previewDefinition) === JSON.stringify(values)) {\n      await queryClient.invalidateQueries({ queryKey: ['variable', previewDefinition] });\n    } else {\n      setPreviewDefinition(structuredClone(values));\n    }\n  }, [previewDefinition, queryClient, values]);\n\n  const plugin = useWatch<VariableDefinition, 'spec.plugin'>({ control, name: 'spec.plugin' });\n  const kind = plugin?.kind;\n  const pluginSpec = plugin?.spec;\n\n  const _allowAllValue = useWatch<VariableDefinition, 'spec.allowAllValue'>({\n    control: control,\n    name: 'spec.allowAllValue',\n  });\n\n  const sortMethod = useWatch<VariableDefinition, 'spec.sort'>({\n    control: control,\n    name: 'spec.sort',\n  }) as SortMethodName;\n\n  // When variable kind is selected we need to provide default values\n  // TODO: check if react-hook-form has a better way to do this\n  if (values.spec.allowAllValue === undefined) {\n    form.setValue('spec.allowAllValue', false);\n  }\n\n  if (values.spec.allowMultiple === undefined) {\n    form.setValue('spec.allowMultiple', false);\n  }\n\n  if (!values.spec.plugin) {\n    form.setValue('spec.plugin', { kind: 'StaticListVariable', spec: {} });\n  }\n\n  if (!values.spec.sort) {\n    form.setValue('spec.sort', 'none');\n  }\n\n  return (\n    <>\n      <Typography py={1} variant=\"subtitle1\">\n        List Options\n      </Typography>\n      <Stack spacing={2} mb={2}>\n        <Box>\n          <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewDefinition]}>\n            <VariableListPreview sortMethod={sortMethod} definition={previewDefinition} />\n          </ErrorBoundary>\n        </Box>\n        <Stack>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <Controller\n              control={control}\n              name=\"spec.plugin\"\n              render={({ field }) => {\n                return (\n                  <PluginEditor\n                    withRunQueryButton\n                    width=\"100%\"\n                    pluginTypes={['Variable']}\n                    pluginKindLabel=\"Source\"\n                    value={{\n                      selection: {\n                        type: 'Variable',\n                        kind: kind ?? 'StaticListVariable',\n                      },\n                      spec: pluginSpec ?? {},\n                    }}\n                    isReadonly={action === 'read'}\n                    onChange={(v) => {\n                      field.onChange({ kind: v.selection.kind, spec: v.spec });\n                    }}\n                    onRunQuery={handleRunQuery}\n                  />\n                );\n              }}\n            />\n          </ErrorBoundary>\n        </Stack>\n\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.capturingRegexp\"\n            render={({ field, fieldState }) => (\n              <TextField\n                {...field}\n                label=\"Capturing Regexp Filter\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                value={field.value ?? ''}\n                onChange={(event) => {\n                  if (event.target.value === '') {\n                    field.onChange(undefined);\n                  } else {\n                    field.onChange(event);\n                  }\n                }}\n                helperText={\n                  fieldState.error?.message\n                    ? fieldState.error.message\n                    : 'Optional, if you want to filter on captured result.'\n                }\n              />\n            )}\n          />\n        </Stack>\n\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.sort\"\n            render={({ field, fieldState }) => (\n              <TextField\n                select\n                {...field}\n                fullWidth\n                label=\"Sort\"\n                InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                InputProps={{\n                  readOnly: action === 'read',\n                }}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                value={field.value ?? 'none'}\n                onChange={(event) => {\n                  field.onChange(event);\n                }}\n              >\n                {Object.keys(SORT_METHODS).map((key) => {\n                  if (!SORT_METHODS[key as SortMethodName]) return null;\n                  const { label } = SORT_METHODS[key as SortMethodName];\n                  return (\n                    <MenuItem key={key} value={key}>\n                      {label}\n                    </MenuItem>\n                  );\n                })}\n              </TextField>\n            )}\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          <Controller\n            control={control}\n            name=\"spec.allowMultiple\"\n            render={({ field }) => (\n              <FormControlLabel\n                label=\"Allow Multiple Values\"\n                control={\n                  <Switch\n                    {...field}\n                    checked={!!field.value}\n                    readOnly={action === 'read'}\n                    value={field.value ?? false}\n                    onChange={(event) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      field.onChange(event);\n                    }}\n                  />\n                }\n              />\n            )}\n          />\n          <Typography variant=\"caption\">Enables multiple values to be selected at the same time</Typography>\n        </Stack>\n        <Stack>\n          <Controller\n            control={control}\n            name=\"spec.allowAllValue\"\n            render={({ field }) => (\n              <FormControlLabel\n                label=\"Allow All option\"\n                control={\n                  <Switch\n                    {...field}\n                    checked={!!field.value}\n                    readOnly={action === 'read'}\n                    value={field.value ?? false}\n                    onChange={(event) => {\n                      if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                      field.onChange(event);\n                    }}\n                  />\n                }\n              />\n            )}\n          />\n          <Typography mb={1} variant=\"caption\">\n            Enables an option to include all variable values\n          </Typography>\n          {_allowAllValue && (\n            <Controller\n              control={control}\n              name=\"spec.customAllValue\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Custom All Value\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={\n                    fieldState.error?.message\n                      ? fieldState.error.message\n                      : 'When All is selected, this value will be used'\n                  }\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    if (event.target.value === '') {\n                      field.onChange(undefined);\n                    } else {\n                      field.onChange(event);\n                    }\n                  }}\n                />\n              )}\n            />\n          )}\n        </Stack>\n      </Stack>\n    </>\n  );\n}\n\ninterface VariableEditorFormProps {\n  initialVariableDefinition: VariableDefinition;\n  action: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSave: (def: VariableDefinition) => void;\n  onClose: () => void;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function VariableEditorForm({\n  initialVariableDefinition,\n  action,\n  isDraft,\n  isReadonly,\n  onActionChange,\n  onSave,\n  onClose,\n  onDelete,\n}: VariableEditorFormProps): ReactElement {\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const { variableEditorSchema } = useValidationSchemas();\n  const form = useForm<VariableDefinition>({\n    resolver: zodResolver(variableEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialVariableDefinition,\n  });\n\n  const kind = useWatch({ control: form.control, name: 'kind' });\n\n  function clearFormData(data: VariableDefinition): VariableDefinition {\n    const result = { ...data };\n    if (\n      result.spec.display?.name === undefined &&\n      result.spec.display?.description === undefined &&\n      result.spec.display?.hidden === undefined\n    ) {\n      delete result.spec.display;\n    }\n    return result;\n  }\n\n  const processForm: SubmitHandler<VariableDefinition> = (data: VariableDefinition) => {\n    // reset display attributes to undefined when empty, because we don't want to save empty strings\n    onSave(clearFormData(data));\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  function handleCancel(): void {\n    if (JSON.stringify(initialVariableDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\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        <FormActions\n          action={action}\n          submitText={submitText}\n          isReadonly={isReadonly}\n          isValid={form.formState.isValid}\n          onActionChange={onActionChange}\n          onSubmit={form.handleSubmit(processForm)}\n          onDelete={onDelete}\n          onCancel={handleCancel}\n        />\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.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' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.name\"\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                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.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                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\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                  value={field.value ?? 'TextVariable'}\n                  onChange={(event) => {\n                    field.onChange(event);\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        {kind === 'TextVariable' && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <TextVariableEditorForm action={action} control={form.control} />\n          </ErrorBoundary>\n        )}\n        {kind === 'ListVariable' && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <ListVariableEditorForm action={action} control={form.control} />\n          </ErrorBoundary>\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":["useCallback","useState","Box","Typography","Switch","TextField","Grid","FormControlLabel","MenuItem","Stack","Divider","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","FormActions","Controller","FormProvider","useForm","useFormContext","useWatch","zodResolver","useQueryClient","getSubmitText","getTitleAction","PluginEditor","useValidationSchemas","VARIABLE_TYPES","VariableListPreview","VariablePreview","SORT_METHODS","FallbackPreview","div","TextVariableEditorForm","action","control","py","variant","spacing","name","render","field","fieldState","values","value","label","InputLabelProps","shrink","undefined","InputProps","readOnly","error","helperText","message","onChange","event","checked","ListVariableEditorForm","form","queryClient","getValues","previewDefinition","setPreviewDefinition","structuredClone","handleRunQuery","JSON","stringify","invalidateQueries","queryKey","plugin","kind","pluginSpec","spec","_allowAllValue","sortMethod","allowAllValue","setValue","allowMultiple","sort","mb","FallbackComponent","resetKeys","definition","withRunQueryButton","width","pluginTypes","pluginKindLabel","selection","type","isReadonly","v","onRunQuery","target","select","fullWidth","Object","keys","map","key","VariableEditorForm","initialVariableDefinition","isDraft","onActionChange","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","variableEditorSchema","resolver","mode","defaultValues","clearFormData","data","result","display","description","hidden","processForm","handleCancel","sx","alignItems","padding","theme","borderBottom","palette","divider","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","item","xs","required","disabled","isOpen","onDiscardChanges"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"VariablePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAI/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAI5D,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAuDzE;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,sBAAsB,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;CACxC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CAmBjF"}
+{"version":3,"file":"VariablePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAI/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAI5D,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA0DzE;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,sBAAsB,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;CACxC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CAmBjF"}

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

@@ -95,7 +95,7 @@ export function VariablePreview(props) {
                     },
                     children: [
                         variablePreviewState,
-                        values?.slice(0, maxValues).map((val, index)=>/*#__PURE__*/ _jsx(Chip, {
+                        values?.slice(0, maxValues).filter((val)=>val).map((val, index)=>/*#__PURE__*/ _jsx(Chip, {
                                 size: "small",
                                 label: val
                             }, index)),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.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, { ReactElement, useMemo, useState } from 'react';\nimport { Alert, Box, Card, Chip, CircularProgress, IconButton, Stack, Typography } from '@mui/material';\nimport { InfoTooltip, useSnackbar } from '@perses-dev/components';\nimport Clipboard from 'mdi-material-ui/ClipboardOutline';\nimport { ListVariableDefinition } from '@perses-dev/core';\nimport { TOOLTIP_TEXT } from '../../../constants';\nimport { useListVariablePluginValues } from '../variable-model';\nimport { SORT_METHODS } from './variable-editor-form-model';\n\nconst DEFAULT_MAX_PREVIEW_VALUES = 50;\n\ninterface VariablePreviewProps {\n  values?: string[];\n  isLoading?: boolean;\n  error?: string;\n}\n\nexport function VariablePreview(props: VariablePreviewProps): ReactElement {\n  const { values, isLoading, error } = props;\n  const [maxValues, setMaxValues] = useState<number | undefined>(DEFAULT_MAX_PREVIEW_VALUES);\n  const { infoSnackbar } = useSnackbar();\n  const showAll = (): void => {\n    setMaxValues(undefined);\n  };\n  let notShown = 0;\n\n  if (values && values?.length > 0 && maxValues) {\n    notShown = values.length - maxValues;\n  }\n\n  const variablePreviewState = useMemo((): JSX.Element | null => {\n    if (isLoading) {\n      return (\n        <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n          <CircularProgress />\n        </Stack>\n      );\n    } else if (error) {\n      return <Alert severity=\"error\">{error}</Alert>;\n    } else if (!values?.length) {\n      return <Alert severity=\"info\">No results</Alert>;\n    }\n    return null;\n  }, [error, isLoading, values]);\n\n  return (\n    <Box>\n      <Stack direction=\"row\" spacing={1} alignItems=\"center\" mb={1}>\n        <Typography variant=\"h4\">Preview Values</Typography>\n        <InfoTooltip description={TOOLTIP_TEXT.copyVariableValues}>\n          <IconButton\n            onClick={async () => {\n              if (values?.length) {\n                await navigator.clipboard.writeText(values.map((value) => value).join(', '));\n                infoSnackbar('Preview values copied to clipboard!');\n              }\n            }}\n            size=\"small\"\n          >\n            <Clipboard />\n          </IconButton>\n        </InfoTooltip>\n      </Stack>\n      <Card variant=\"outlined\">\n        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, m: 2 }}>\n          {variablePreviewState}\n          {values?.slice(0, maxValues).map((val, index) => <Chip size=\"small\" key={index} label={val} />)}\n          {notShown > 0 && <Chip onClick={showAll} variant=\"outlined\" size=\"small\" label={`+${notShown} more`} />}\n        </Box>\n      </Card>\n    </Box>\n  );\n}\n\ninterface VariableListPreviewProps {\n  definition: ListVariableDefinition;\n  sortMethod?: keyof typeof SORT_METHODS;\n}\n\nexport function VariableListPreview(props: VariableListPreviewProps): ReactElement {\n  const { definition, sortMethod } = props;\n  const { data, isFetching, error } = useListVariablePluginValues(definition);\n  const errorMessage = (error as Error)?.message;\n\n  const result = !sortMethod || sortMethod === 'none' || !data ? data : SORT_METHODS[sortMethod].sort(data);\n\n  const variablePreview = useMemo(\n    () => (\n      <VariablePreview\n        values={result?.map((val) => val.label || val.value)}\n        isLoading={isFetching}\n        error={errorMessage}\n      />\n    ),\n    [errorMessage, isFetching, result]\n  );\n\n  return variablePreview;\n}\n"],"names":["React","useMemo","useState","Alert","Box","Card","Chip","CircularProgress","IconButton","Stack","Typography","InfoTooltip","useSnackbar","Clipboard","TOOLTIP_TEXT","useListVariablePluginValues","SORT_METHODS","DEFAULT_MAX_PREVIEW_VALUES","VariablePreview","props","values","isLoading","error","maxValues","setMaxValues","infoSnackbar","showAll","undefined","notShown","length","variablePreviewState","width","sx","alignItems","justifyContent","severity","direction","spacing","mb","variant","description","copyVariableValues","onClick","navigator","clipboard","writeText","map","value","join","size","display","flexWrap","gap","m","slice","val","index","label","VariableListPreview","definition","sortMethod","data","isFetching","errorMessage","message","result","sort","variablePreview"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.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, { ReactElement, useMemo, useState } from 'react';\nimport { Alert, Box, Card, Chip, CircularProgress, IconButton, Stack, Typography } from '@mui/material';\nimport { InfoTooltip, useSnackbar } from '@perses-dev/components';\nimport Clipboard from 'mdi-material-ui/ClipboardOutline';\nimport { ListVariableDefinition } from '@perses-dev/core';\nimport { TOOLTIP_TEXT } from '../../../constants';\nimport { useListVariablePluginValues } from '../variable-model';\nimport { SORT_METHODS } from './variable-editor-form-model';\n\nconst DEFAULT_MAX_PREVIEW_VALUES = 50;\n\ninterface VariablePreviewProps {\n  values?: string[];\n  isLoading?: boolean;\n  error?: string;\n}\n\nexport function VariablePreview(props: VariablePreviewProps): ReactElement {\n  const { values, isLoading, error } = props;\n  const [maxValues, setMaxValues] = useState<number | undefined>(DEFAULT_MAX_PREVIEW_VALUES);\n  const { infoSnackbar } = useSnackbar();\n  const showAll = (): void => {\n    setMaxValues(undefined);\n  };\n  let notShown = 0;\n\n  if (values && values?.length > 0 && maxValues) {\n    notShown = values.length - maxValues;\n  }\n\n  const variablePreviewState = useMemo((): ReactElement | null => {\n    if (isLoading) {\n      return (\n        <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n          <CircularProgress />\n        </Stack>\n      );\n    } else if (error) {\n      return <Alert severity=\"error\">{error}</Alert>;\n    } else if (!values?.length) {\n      return <Alert severity=\"info\">No results</Alert>;\n    }\n    return null;\n  }, [error, isLoading, values]);\n\n  return (\n    <Box>\n      <Stack direction=\"row\" spacing={1} alignItems=\"center\" mb={1}>\n        <Typography variant=\"h4\">Preview Values</Typography>\n        <InfoTooltip description={TOOLTIP_TEXT.copyVariableValues}>\n          <IconButton\n            onClick={async () => {\n              if (values?.length) {\n                await navigator.clipboard.writeText(values.map((value) => value).join(', '));\n                infoSnackbar('Preview values copied to clipboard!');\n              }\n            }}\n            size=\"small\"\n          >\n            <Clipboard />\n          </IconButton>\n        </InfoTooltip>\n      </Stack>\n      <Card variant=\"outlined\">\n        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, m: 2 }}>\n          {variablePreviewState}\n          {values\n            ?.slice(0, maxValues)\n            .filter((val) => val)\n            .map((val, index) => <Chip size=\"small\" key={index} label={val} />)}\n          {notShown > 0 && <Chip onClick={showAll} variant=\"outlined\" size=\"small\" label={`+${notShown} more`} />}\n        </Box>\n      </Card>\n    </Box>\n  );\n}\n\ninterface VariableListPreviewProps {\n  definition: ListVariableDefinition;\n  sortMethod?: keyof typeof SORT_METHODS;\n}\n\nexport function VariableListPreview(props: VariableListPreviewProps): ReactElement {\n  const { definition, sortMethod } = props;\n  const { data, isFetching, error } = useListVariablePluginValues(definition);\n  const errorMessage = (error as Error)?.message;\n\n  const result = !sortMethod || sortMethod === 'none' || !data ? data : SORT_METHODS[sortMethod].sort(data);\n\n  const variablePreview = useMemo(\n    () => (\n      <VariablePreview\n        values={result?.map((val) => val.label || val.value)}\n        isLoading={isFetching}\n        error={errorMessage}\n      />\n    ),\n    [errorMessage, isFetching, result]\n  );\n\n  return variablePreview;\n}\n"],"names":["React","useMemo","useState","Alert","Box","Card","Chip","CircularProgress","IconButton","Stack","Typography","InfoTooltip","useSnackbar","Clipboard","TOOLTIP_TEXT","useListVariablePluginValues","SORT_METHODS","DEFAULT_MAX_PREVIEW_VALUES","VariablePreview","props","values","isLoading","error","maxValues","setMaxValues","infoSnackbar","showAll","undefined","notShown","length","variablePreviewState","width","sx","alignItems","justifyContent","severity","direction","spacing","mb","variant","description","copyVariableValues","onClick","navigator","clipboard","writeText","map","value","join","size","display","flexWrap","gap","m","slice","filter","val","index","label","VariableListPreview","definition","sortMethod","data","isFetching","errorMessage","message","result","sort","variablePreview"],"mappings":"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"}

package/dist/components/Variables/variable-model.js

@@ -41,7 +41,7 @@ export function useListVariablePluginValues(definition) {
     const { data: variablePlugin } = usePlugin('Variable', definition.spec.plugin.kind);
     const datasourceStore = useDatasourceStore();
     const allVariables = useAllVariableValues();
-    const { absoluteTimeRange: timeRange, refreshKey } = useTimeRange();
+    const { absoluteTimeRange: timeRange } = useTimeRange();
     const variablePluginCtx = {
         timeRange,
         datasourceStore,
@@ -64,10 +64,10 @@ export function useListVariablePluginValues(definition) {
     const variablesValueKey = getVariableValuesKey(variables);
     return useQuery({
         queryKey: [
+            'variable',
             definition,
-            variablesValueKey,
             timeRange,
-            refreshKey
+            variablesValueKey
         ],
         queryFn: async ({ signal })=>{
             const resp = await variablePlugin?.getVariableOptions(spec, {