@perses-dev/plugin-system 0.51.0-rc.0 → 0.51.0-rc.1

package/dist/cjs/components/DatasourceSelect.js

@@ -33,6 +33,12 @@ _export(exports, {
     isVariableDatasource: function() {
         return isVariableDatasource;
     },
+    optionValueToSelector: function() {
+        return optionValueToSelector;
+    },
+    selectorToOptionValue: function() {
+        return selectorToOptionValue;
+    },
     useDatasourceSelectValueToSelector: function() {
         return useDatasourceSelectValueToSelector;
     }
@@ -198,11 +204,7 @@ function DatasourceName(props) {
 }
 // Delimiter used to stringify/parse option values
 const OPTION_VALUE_DELIMITER = '_____';
-/**
- * Given a DatasourceSelectItemSelector,
- * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.
- * @param selector
- */ function selectorToOptionValue(selector) {
+function selectorToOptionValue(selector) {
     if (isVariableDatasource(selector)) {
         return `${DATASOURCE_VARIABLE_VALUE_PREFIX}${selector}`;
     }
@@ -212,11 +214,7 @@ const OPTION_VALUE_DELIMITER = '_____';
         selector.name ?? ''
     ].join(OPTION_VALUE_DELIMITER);
 }
-/**
- * Given an option value name like `{kind}_____{group}_____{name}`,
- * returns a DatasourceSelector to be used by the query data model.
- * @param optionValue
- */ function optionValueToSelector(optionValue) {
+function optionValueToSelector(optionValue) {
     if (optionValue.startsWith(DATASOURCE_VARIABLE_VALUE_PREFIX)) {
         return optionValue.split(DATASOURCE_VARIABLE_VALUE_PREFIX)[1];
     }

package/dist/cjs/components/HTTPSettingsEditor/HTTPSettingsEditor.js

@@ -78,6 +78,10 @@ function HTTPSettingsEditor(props) {
     const { value, onChange, isReadonly, initialSpecDirect, initialSpecProxy } = props;
     const strDirect = 'Direct access';
     const strProxy = 'Proxy';
+    // Initialize Proxy mode by default, if neither direct nor proxy mode is selected.
+    if (!value.directUrl && !value.proxy) {
+        Object.assign(value, initialSpecProxy);
+    }
     // utilitary function used for headers when renaming a property
     // -> TODO it would be cleaner to manipulate headers as an intermediary list instead, to avoid doing this.
     const buildNewHeaders = (oldHeaders, oldName, newName)=>{
@@ -487,8 +491,7 @@ function HTTPSettingsEditor(props) {
     // bug in case the tabs get eventually swapped in the future.
     const directModeId = tabs.findIndex((tab)=>tab.label === strDirect);
     const proxyModeId = tabs.findIndex((tab)=>tab.label === strProxy);
-    // In "update datasource" case, set defaultTab to the mode that this datasource is currently relying on.
-    // Otherwise (create datasource), set defaultTab to Direct access.
+    // Set defaultTab to the mode that this datasource is currently relying on.
     const defaultTab = value.proxy ? proxyModeId : directModeId;
     // For better user experience, save previous states in mind for both mode.
     // This avoids losing everything when the user changes their mind back.

package/dist/cjs/components/MultiQueryEditor/MultiQueryEditor.js

@@ -43,7 +43,7 @@ function useDefaultQueryDefinition(queryTypes) {
     const { defaultPluginKinds } = (0, _runtime.usePluginRegistry)();
     const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';
     const { data: defaultQueryPlugin } = (0, _runtime.usePlugin)(defaultQueryType, defaultQueryKind, {
-        throwOnError: true,
+        useErrorBoundary: true,
         enabled: true
     });
     // This default query definition is used if no query is provided initially or when we add a new query

package/dist/cjs/components/PanelSpecEditor/PanelSpecEditor.js

@@ -29,14 +29,14 @@ const _MultiQueryEditor = require("../MultiQueryEditor");
 function PanelSpecEditor(props) {
     const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
     const { kind } = panelDefinition.spec.plugin;
-    const { data: plugin, isPending, error } = (0, _runtime.usePlugin)('Panel', kind);
+    const { data: plugin, isLoading, error } = (0, _runtime.usePlugin)('Panel', kind);
     if (error) {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorAlert, {
             error: error
         });
     }
     // TODO: Proper loading indicator
-    if (isPending) {
+    if (isLoading) {
         return null;
     }
     if (plugin === undefined) {

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

@@ -73,11 +73,13 @@ function useListVariablePluginValues(definition) {
     };
     const spec = definition.spec.plugin.spec;
     const capturingRegexp = definition.spec.capturingRegexp !== undefined ? new RegExp(definition.spec.capturingRegexp, 'g') : undefined;
-    let dependsOnVariables;
+    let dependsOnVariables = Object.keys(allVariables); // Default to all variables
     if (variablePlugin?.dependsOn) {
         const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);
-        dependsOnVariables = dependencies.variables;
+        dependsOnVariables = dependencies.variables ? dependencies.variables : dependsOnVariables;
     }
+    // Exclude self variable to avoid circular dependency
+    dependsOnVariables = dependsOnVariables.filter((v)=>v !== definition.spec.name);
     const variables = (0, _runtime.useAllVariableValues)(dependsOnVariables);
     let waitToLoad = false;
     if (dependsOnVariables) {

package/dist/cjs/remote/PluginRuntime.js

@@ -112,11 +112,11 @@ const getPluginRuntime = ()=>{
                     }
                 },
                 '@tanstack/react-query': {
-                    version: '5.64.2',
+                    version: '4.39.1',
                     lib: ()=>_reactquery,
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^5.64.2'
+                        requiredVersion: '^4.39.1'
                     }
                 },
                 'react-hook-form': {
@@ -140,7 +140,7 @@ const getPluginRuntime = ()=>{
                     lib: ()=>require('@perses-dev/components'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.51.0-beta.0'
+                        requiredVersion: '^0.51.0-rc.0'
                     }
                 },
                 '@perses-dev/plugin-system': {
@@ -148,7 +148,7 @@ const getPluginRuntime = ()=>{
                     lib: ()=>require('@perses-dev/plugin-system'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.51.0-beta.0'
+                        requiredVersion: '^0.51.0-rc.0'
                     }
                 },
                 '@perses-dev/explore': {
@@ -156,7 +156,7 @@ const getPluginRuntime = ()=>{
                     lib: ()=>require('@perses-dev/explore'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.51.0-beta.0'
+                        requiredVersion: '^0.51.0-rc.0'
                     }
                 },
                 '@perses-dev/dashboards': {
@@ -164,7 +164,7 @@ const getPluginRuntime = ()=>{
                     lib: ()=>require('@perses-dev/dashboards'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.51.0-beta.0'
+                        requiredVersion: '^0.51.0-rc.0'
                     }
                 },
                 // Below are the shared modules that are used by the plugins, this can be part of the SDK

package/dist/cjs/runtime/time-series-queries.js

@@ -38,11 +38,11 @@ _export(exports, {
     }
 });
 const _reactquery = require("@tanstack/react-query");
-const _variables = require("./variables");
 const _TimeRangeProvider = require("./TimeRangeProvider");
 const _datasources = require("./datasources");
 const _pluginregistry = require("./plugin-registry");
 const _utils = require("./utils");
+const _variables = require("./variables");
 const TIME_SERIES_QUERY_KEY = 'TimeSeriesQuery';
 function getQueryOptions({ plugin, definition, context }) {
     const { timeRange, datasourceStore, suggestedStepMs, mode, variableState, refreshKey } = context;
@@ -115,6 +115,7 @@ function useTimeSeriesQueries(definitions, options, queryOptions) {
                 context
             });
             return {
+                ...queryOptions,
                 enabled: (queryOptions?.enabled ?? true) && queryEnabled,
                 queryKey: queryKey,
                 queryFn: async ()=>{

package/dist/cjs/test/render-hook.js

@@ -0,0 +1,31 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderHookWithContext", {
+    enumerable: true,
+    get: function() {
+        return renderHookWithContext;
+    }
+});
+const _react = require("@testing-library/react");
+const _utils = require("./utils");
+function renderHookWithContext(callback, contextOptions, renderHookOptions) {
+    const wrapper = (0, _utils.getTestContextWrapper)(contextOptions);
+    return (0, _react.renderHook)(callback, {
+        wrapper,
+        ...renderHookOptions
+    });
+}

package/dist/cjs/test/render.js

@@ -22,27 +22,10 @@ Object.defineProperty(exports, "renderWithContext", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("@testing-library/react");
-const _reactquery = require("@tanstack/react-query");
-const _PluginRegistry = require("../components/PluginRegistry");
-const _testplugins = require("./test-plugins");
+const _utils = require("./utils");
 function renderWithContext(ui, renderOptions, contextOptions) {
-    // Create a new QueryClient for each test to avoid caching issues
-    const queryClient = new _reactquery.QueryClient({
-        defaultOptions: {
-            queries: {
-                refetchOnWindowFocus: false,
-                retry: false
-            }
-        }
-    });
-    return (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
-        client: queryClient,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginRegistry.PluginRegistry, {
-            pluginLoader: _testplugins.testPluginLoader,
-            defaultPluginKinds: contextOptions?.defaultPluginKinds ?? {
-                TimeSeriesQuery: 'PrometheusTimeSeriesQuery'
-            },
-            children: ui
-        })
+    const Wrapper = (0, _utils.getTestContextWrapper)(contextOptions);
+    return (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(Wrapper, {
+        children: ui
     }), renderOptions);
 }

package/dist/cjs/test/utils.js

@@ -0,0 +1,49 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getTestContextWrapper", {
+    enumerable: true,
+    get: function() {
+        return getTestContextWrapper;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _reactquery = require("@tanstack/react-query");
+const _components = require("../components");
+const _testplugins = require("./test-plugins");
+function getTestContextWrapper(contextOptions) {
+    // Create a new QueryClient for each test to avoid caching issues
+    const queryClient = new _reactquery.QueryClient({
+        defaultOptions: {
+            queries: {
+                refetchOnWindowFocus: false,
+                retry: false
+            }
+        }
+    });
+    return function Wrapper({ children }) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
+            client: queryClient,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PluginRegistry, {
+                pluginLoader: _testplugins.testPluginLoader,
+                defaultPluginKinds: contextOptions?.defaultPluginKinds ?? {
+                    TimeSeriesQuery: 'PrometheusTimeSeriesQuery'
+                },
+                children: children
+            })
+        });
+    };
+}

package/dist/components/DatasourceSelect.d.ts

@@ -1,7 +1,7 @@
 import { OutlinedSelectProps, BaseSelectProps } from '@mui/material';
 import { DatasourceSelector, VariableName } from '@perses-dev/core';
 import { ReactElement } from 'react';
-import { DatasourceSelectItemGroup, VariableStateMap } from '../runtime';
+import { DatasourceSelectItemGroup, DatasourceSelectItemSelector, VariableStateMap } from '../runtime';
 type OmittedMuiProps = 'children' | 'value' | 'onChange';
 export type DatasourceSelectValue<T = DatasourceSelector> = T | VariableName;
 export interface DatasourceSelectProps extends Omit<OutlinedSelectProps & BaseSelectProps<string>, OmittedMuiProps> {
@@ -20,6 +20,18 @@ export declare function DatasourceName(props: {
     overridden?: boolean;
     overriding?: boolean;
 }): ReactElement;
+/**
+ * Given a DatasourceSelectItemSelector,
+ * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.
+ * @param selector
+ */
+export declare function selectorToOptionValue(selector: DatasourceSelectItemSelector | VariableName): string;
+/**
+ * Given an option value name like `{kind}_____{group}_____{name}`,
+ * returns a DatasourceSelector to be used by the query data model.
+ * @param optionValue
+ */
+export declare function optionValueToSelector(optionValue: string): DatasourceSelectValue;
 export declare function isVariableDatasource(value: DatasourceSelectValue | undefined): value is VariableName;
 export declare const datasourceSelectValueToSelector: (value: DatasourceSelectValue | undefined, variables: VariableStateMap, datasourceSelectItemGroups: DatasourceSelectItemGroup[] | undefined) => DatasourceSelector | undefined;
 export declare const useDatasourceSelectValueToSelector: (value: DatasourceSelectValue, datasourcePluginKind: string) => DatasourceSelector;

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

@@ -1 +1 @@
-{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../src/components/DatasourceSelect.tsx"],"names":[],"mappings":"AAcA,OAAO,EAML,mBAAmB,EACnB,eAAe,EAGhB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAEL,yBAAyB,EAIzB,gBAAgB,EACjB,MAAM,YAAY,CAAC;AAOpB,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAWzD,MAAM,MAAM,qBAAqB,CAAC,CAAC,GAAG,kBAAkB,IAAI,CAAC,GAAG,YAAY,CAAC;AAE7E,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,mBAAmB,GAAG,eAAe,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACjH,KAAK,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAiH3E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CAahH;AAuCD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,GAAG,KAAK,IAAI,YAAY,CAEpG;AAED,eAAO,MAAM,+BAA+B,UACnC,qBAAqB,GAAG,SAAS,aAC7B,gBAAgB,8BACC,yBAAyB,EAAE,GAAG,SAAS,KAClE,kBAAkB,GAAG,SA4BvB,CAAC;AAEF,eAAO,MAAM,kCAAkC,UACtC,qBAAqB,wBACN,MAAM,KAC3B,kBAQF,CAAC"}
+{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../src/components/DatasourceSelect.tsx"],"names":[],"mappings":"AAcA,OAAO,EAML,mBAAmB,EACnB,eAAe,EAGhB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAEL,yBAAyB,EACzB,4BAA4B,EAG5B,gBAAgB,EACjB,MAAM,YAAY,CAAC;AAOpB,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAWzD,MAAM,MAAM,qBAAqB,CAAC,CAAC,GAAG,kBAAkB,IAAI,CAAC,GAAG,YAAY,CAAC;AAE7E,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,mBAAmB,GAAG,eAAe,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACjH,KAAK,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAiH3E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CAahH;AAKD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,4BAA4B,GAAG,YAAY,GAAG,MAAM,CAKnG;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,WAAW,EAAE,MAAM,GAAG,qBAAqB,CAehF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,GAAG,KAAK,IAAI,YAAY,CAEpG;AAED,eAAO,MAAM,+BAA+B,UACnC,qBAAqB,GAAG,SAAS,aAC7B,gBAAgB,8BACC,yBAAyB,EAAE,GAAG,SAAS,KAClE,kBAAkB,GAAG,SA4BvB,CAAC;AAEF,eAAO,MAAM,kCAAkC,UACtC,qBAAqB,wBACN,MAAM,KAC3B,kBAQF,CAAC"}

package/dist/components/DatasourceSelect.js

@@ -174,7 +174,7 @@ const OPTION_VALUE_DELIMITER = '_____';
  * Given a DatasourceSelectItemSelector,
  * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.
  * @param selector
- */ function selectorToOptionValue(selector) {
+ */ export function selectorToOptionValue(selector) {
     if (isVariableDatasource(selector)) {
         return `${DATASOURCE_VARIABLE_VALUE_PREFIX}${selector}`;
     }
@@ -188,7 +188,7 @@ const OPTION_VALUE_DELIMITER = '_____';
  * Given an option value name like `{kind}_____{group}_____{name}`,
  * returns a DatasourceSelector to be used by the query data model.
  * @param optionValue
- */ function optionValueToSelector(optionValue) {
+ */ export function optionValueToSelector(optionValue) {
     if (optionValue.startsWith(DATASOURCE_VARIABLE_VALUE_PREFIX)) {
         return optionValue.split(DATASOURCE_VARIABLE_VALUE_PREFIX)[1];
     }

package/dist/components/DatasourceSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/DatasourceSelect.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 OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport {\n  Stack,\n  ListItemText,\n  Chip,\n  IconButton,\n  Box,\n  OutlinedSelectProps,\n  BaseSelectProps,\n  Autocomplete,\n  TextField,\n} from '@mui/material';\nimport { DatasourceSelector, VariableName } from '@perses-dev/core';\nimport { ReactElement, useMemo } from 'react';\nimport {\n  DatasourceSelectItem,\n  DatasourceSelectItemGroup,\n  DatasourceSelectItemSelector,\n  useListDatasourceSelectItems,\n  useVariableValues,\n  VariableStateMap,\n} from '../runtime';\nimport { parseVariables } from '../utils';\n\nconst DATASOURCE_VARIABLE_VALUE_PREFIX = '__DATASOURCE_VARIABLE_VALUE__';\nconst VARIABLE_IDENTIFIER = '$';\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\ntype DataSourceOption = {\n  groupEditLink?: string;\n  groupLabel?: string;\n  value: string;\n} & Omit<DatasourceSelectItem, 'selector'> &\n  Omit<DatasourceSelectItem['selector'], 'kind'>;\n\nconst emptyDatasourceOption: DataSourceOption = { name: '', value: '' };\n\nexport type DatasourceSelectValue<T = DatasourceSelector> = T | VariableName;\n\nexport interface DatasourceSelectProps extends Omit<OutlinedSelectProps & BaseSelectProps<string>, OmittedMuiProps> {\n  value: DatasourceSelectValue;\n  onChange: (next: DatasourceSelectValue) => void;\n  datasourcePluginKind: string;\n  project?: string;\n}\n\n/**\n * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for\n * the input deal with a `DatasourceSelector`.\n */\nexport function DatasourceSelect(props: DatasourceSelectProps): ReactElement {\n  const { datasourcePluginKind, value, project, onChange, ...others } = props;\n  const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind, project);\n  const variables = useVariableValues();\n\n  const defaultValue = useMemo<VariableName | DatasourceSelectItemSelector>(() => {\n    if (isVariableDatasource(value)) {\n      return value;\n    }\n\n    const group = (data ?? [])\n      .flatMap((itemGroup) => itemGroup.items)\n      .find((item) => {\n        return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;\n      })?.selector.group;\n    return { ...value, group };\n  }, [value, data]);\n\n  const options = useMemo<DataSourceOption[]>(() => {\n    const datasourceOptions = (data || []).flatMap<DataSourceOption>((itemGroup) =>\n      itemGroup.items.map<DataSourceOption>((item) => ({\n        groupLabel: itemGroup.group,\n        groupEditLink: itemGroup.editLink,\n        name: item.name,\n        overriding: item.overriding,\n        overridden: item.overridden,\n        saved: item.saved ?? true,\n        group: item.selector.group,\n        value: selectorToOptionValue(item.selector),\n      }))\n    );\n\n    const datasourceOptionsMap = new Map(datasourceOptions.map((option) => [option.name, option]));\n\n    const variableOptions = Object.entries(variables).flatMap<DataSourceOption>(([name, variable]) => {\n      if (Array.isArray(variable.value)) return [];\n\n      const associatedDatasource = datasourceOptionsMap.get(variable.value ?? '');\n      if (!associatedDatasource) return [];\n\n      return {\n        groupLabel: 'Variables',\n        name: `${VARIABLE_IDENTIFIER}${name}`,\n        saved: true,\n        value: `${DATASOURCE_VARIABLE_VALUE_PREFIX}${VARIABLE_IDENTIFIER}${name}`,\n      };\n    });\n\n    return [...datasourceOptions, ...variableOptions];\n  }, [data, variables]);\n\n  // While loading available values, just use an empty datasource option so MUI select doesn't warn about values out of range\n  const optionValue = isLoading\n    ? emptyDatasourceOption\n    : options.find((option) => option.value === selectorToOptionValue(defaultValue));\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange = (selectedOption: DataSourceOption | null): void => {\n    if (selectedOption) {\n      const next = optionValueToSelector(selectedOption?.value || '');\n      onChange(next);\n    } else {\n      onChange({ kind: datasourcePluginKind });\n    }\n  };\n\n  // We use a fake action event when we click on the action of the chip (hijack the \"delete\" feature).\n  // This is because the href link action is on the `deleteIcon` property already, but the `onDelete` property\n  // controls its visibility.\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const fakeActionEvent = (): void => {};\n\n  return (\n    <Autocomplete<DataSourceOption>\n      options={options}\n      renderInput={(params) => <TextField {...params} label={others.label} placeholder=\"\" />}\n      groupBy={(option) => option.groupLabel || 'No group'}\n      getOptionLabel={(option) => {\n        return option.name;\n      }}\n      onChange={(_, v) => handleChange(v)}\n      value={optionValue}\n      renderOption={(props, option) => {\n        return (\n          <li {...props} key={option.value}>\n            <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\">\n              <ListItemText>\n                <DatasourceName name={option.name} overridden={option.overridden} overriding={option.overriding} />\n              </ListItemText>\n              {!option.saved && <ListItemText>Save the dashboard to enable this datasource</ListItemText>}\n              <ListItemText style={{ textAlign: 'right' }}>\n                {option.groupLabel && option.groupLabel.length > 0 && (\n                  <Chip\n                    disabled={false}\n                    label={option.groupLabel}\n                    size=\"small\"\n                    onDelete={option.groupEditLink ? fakeActionEvent : undefined}\n                    deleteIcon={\n                      option.groupEditLink ? (\n                        <IconButton href={option.groupEditLink} target=\"_blank\">\n                          <OpenInNewIcon fontSize=\"small\" />\n                        </IconButton>\n                      ) : undefined\n                    }\n                  />\n                )}\n              </ListItemText>\n            </Stack>\n          </li>\n        );\n      }}\n    />\n  );\n}\n\nexport function DatasourceName(props: { name: string; overridden?: boolean; overriding?: boolean }): ReactElement {\n  const { name, overridden, overriding } = props;\n  return (\n    <>\n      {`${name} `}\n      {!overridden && overriding && (\n        <Box display=\"inline\" fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {overridden && '(overridden)'}\n    </>\n  );\n}\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a DatasourceSelectItemSelector,\n * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.\n * @param selector\n */\nfunction selectorToOptionValue(selector: DatasourceSelectItemSelector | VariableName): string {\n  if (isVariableDatasource(selector)) {\n    return `${DATASOURCE_VARIABLE_VALUE_PREFIX}${selector}`;\n  }\n  return [selector.kind, selector.group ?? '', selector.name ?? ''].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{kind}_____{group}_____{name}`,\n * returns a DatasourceSelector to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelector(optionValue: string): DatasourceSelectValue {\n  if (optionValue.startsWith(DATASOURCE_VARIABLE_VALUE_PREFIX)) {\n    return optionValue.split(DATASOURCE_VARIABLE_VALUE_PREFIX)[1]!;\n  }\n\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const kind = words[0];\n  const name = words[2];\n  if (kind === undefined || name === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    kind,\n    name: name === '' ? undefined : name,\n  };\n}\n\nexport function isVariableDatasource(value: DatasourceSelectValue | undefined): value is VariableName {\n  return typeof value === 'string' && value.startsWith(VARIABLE_IDENTIFIER);\n}\n\nexport const datasourceSelectValueToSelector = (\n  value: DatasourceSelectValue | undefined,\n  variables: VariableStateMap,\n  datasourceSelectItemGroups: DatasourceSelectItemGroup[] | undefined\n): DatasourceSelector | undefined => {\n  if (!isVariableDatasource(value)) {\n    return value;\n  }\n\n  const [variableName] = parseVariables(value);\n  const variable = variables[variableName ?? ''];\n\n  // If the variable is not defined or if its value is an array, we cannot determine a selector and return undefined\n  if (!variable || Array.isArray(variable.value)) {\n    return undefined;\n  }\n\n  const associatedDatasource = (datasourceSelectItemGroups || [])\n    .flatMap((itemGroup) => itemGroup.items)\n    .find((datasource) => datasource.name === variable.value);\n\n  // If the variable value is not a datasource, we cannot determine a selector and return undefined\n  if (associatedDatasource === undefined) {\n    return undefined;\n  }\n\n  const datasourceSelector: DatasourceSelector = {\n    kind: associatedDatasource.selector.kind,\n    name: associatedDatasource.selector.name,\n  };\n\n  return datasourceSelector;\n};\n\nexport const useDatasourceSelectValueToSelector = (\n  value: DatasourceSelectValue,\n  datasourcePluginKind: string\n): DatasourceSelector => {\n  const { data } = useListDatasourceSelectItems(datasourcePluginKind);\n  const variables = useVariableValues();\n  if (!isVariableDatasource(value)) {\n    return value;\n  }\n\n  return datasourceSelectValueToSelector(value, variables, data) ?? { kind: datasourcePluginKind };\n};\n"],"names":["OpenInNewIcon","Stack","ListItemText","Chip","IconButton","Box","Autocomplete","TextField","useMemo","useListDatasourceSelectItems","useVariableValues","parseVariables","DATASOURCE_VARIABLE_VALUE_PREFIX","VARIABLE_IDENTIFIER","emptyDatasourceOption","name","value","DatasourceSelect","props","datasourcePluginKind","project","onChange","others","data","isLoading","variables","defaultValue","isVariableDatasource","group","flatMap","itemGroup","items","find","item","kind","selector","overridden","options","datasourceOptions","map","groupLabel","groupEditLink","editLink","overriding","saved","selectorToOptionValue","datasourceOptionsMap","Map","option","variableOptions","Object","entries","variable","Array","isArray","associatedDatasource","get","optionValue","handleChange","selectedOption","next","optionValueToSelector","fakeActionEvent","renderInput","params","label","placeholder","groupBy","getOptionLabel","_","v","renderOption","li","key","direction","alignItems","justifyContent","width","DatasourceName","style","textAlign","length","disabled","size","onDelete","undefined","deleteIcon","href","target","fontSize","display","fontWeight","color","theme","palette","primary","main","OPTION_VALUE_DELIMITER","join","startsWith","split","words","Error","datasourceSelectValueToSelector","datasourceSelectItemGroups","variableName","datasource","datasourceSelector","useDatasourceSelectValueToSelector"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/DatasourceSelect.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 OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport {\n  Stack,\n  ListItemText,\n  Chip,\n  IconButton,\n  Box,\n  OutlinedSelectProps,\n  BaseSelectProps,\n  Autocomplete,\n  TextField,\n} from '@mui/material';\nimport { DatasourceSelector, VariableName } from '@perses-dev/core';\nimport { ReactElement, useMemo } from 'react';\nimport {\n  DatasourceSelectItem,\n  DatasourceSelectItemGroup,\n  DatasourceSelectItemSelector,\n  useListDatasourceSelectItems,\n  useVariableValues,\n  VariableStateMap,\n} from '../runtime';\nimport { parseVariables } from '../utils';\n\nconst DATASOURCE_VARIABLE_VALUE_PREFIX = '__DATASOURCE_VARIABLE_VALUE__';\nconst VARIABLE_IDENTIFIER = '$';\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\ntype DataSourceOption = {\n  groupEditLink?: string;\n  groupLabel?: string;\n  value: string;\n} & Omit<DatasourceSelectItem, 'selector'> &\n  Omit<DatasourceSelectItem['selector'], 'kind'>;\n\nconst emptyDatasourceOption: DataSourceOption = { name: '', value: '' };\n\nexport type DatasourceSelectValue<T = DatasourceSelector> = T | VariableName;\n\nexport interface DatasourceSelectProps extends Omit<OutlinedSelectProps & BaseSelectProps<string>, OmittedMuiProps> {\n  value: DatasourceSelectValue;\n  onChange: (next: DatasourceSelectValue) => void;\n  datasourcePluginKind: string;\n  project?: string;\n}\n\n/**\n * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for\n * the input deal with a `DatasourceSelector`.\n */\nexport function DatasourceSelect(props: DatasourceSelectProps): ReactElement {\n  const { datasourcePluginKind, value, project, onChange, ...others } = props;\n  const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind, project);\n  const variables = useVariableValues();\n\n  const defaultValue = useMemo<VariableName | DatasourceSelectItemSelector>(() => {\n    if (isVariableDatasource(value)) {\n      return value;\n    }\n\n    const group = (data ?? [])\n      .flatMap((itemGroup) => itemGroup.items)\n      .find((item) => {\n        return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;\n      })?.selector.group;\n    return { ...value, group };\n  }, [value, data]);\n\n  const options = useMemo<DataSourceOption[]>(() => {\n    const datasourceOptions = (data || []).flatMap<DataSourceOption>((itemGroup) =>\n      itemGroup.items.map<DataSourceOption>((item) => ({\n        groupLabel: itemGroup.group,\n        groupEditLink: itemGroup.editLink,\n        name: item.name,\n        overriding: item.overriding,\n        overridden: item.overridden,\n        saved: item.saved ?? true,\n        group: item.selector.group,\n        value: selectorToOptionValue(item.selector),\n      }))\n    );\n\n    const datasourceOptionsMap = new Map(datasourceOptions.map((option) => [option.name, option]));\n\n    const variableOptions = Object.entries(variables).flatMap<DataSourceOption>(([name, variable]) => {\n      if (Array.isArray(variable.value)) return [];\n\n      const associatedDatasource = datasourceOptionsMap.get(variable.value ?? '');\n      if (!associatedDatasource) return [];\n\n      return {\n        groupLabel: 'Variables',\n        name: `${VARIABLE_IDENTIFIER}${name}`,\n        saved: true,\n        value: `${DATASOURCE_VARIABLE_VALUE_PREFIX}${VARIABLE_IDENTIFIER}${name}`,\n      };\n    });\n\n    return [...datasourceOptions, ...variableOptions];\n  }, [data, variables]);\n\n  // While loading available values, just use an empty datasource option so MUI select doesn't warn about values out of range\n  const optionValue = isLoading\n    ? emptyDatasourceOption\n    : options.find((option) => option.value === selectorToOptionValue(defaultValue));\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange = (selectedOption: DataSourceOption | null): void => {\n    if (selectedOption) {\n      const next = optionValueToSelector(selectedOption?.value || '');\n      onChange(next);\n    } else {\n      onChange({ kind: datasourcePluginKind });\n    }\n  };\n\n  // We use a fake action event when we click on the action of the chip (hijack the \"delete\" feature).\n  // This is because the href link action is on the `deleteIcon` property already, but the `onDelete` property\n  // controls its visibility.\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const fakeActionEvent = (): void => {};\n\n  return (\n    <Autocomplete<DataSourceOption>\n      options={options}\n      renderInput={(params) => <TextField {...params} label={others.label} placeholder=\"\" />}\n      groupBy={(option) => option.groupLabel || 'No group'}\n      getOptionLabel={(option) => {\n        return option.name;\n      }}\n      onChange={(_, v) => handleChange(v)}\n      value={optionValue}\n      renderOption={(props, option) => {\n        return (\n          <li {...props} key={option.value}>\n            <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\">\n              <ListItemText>\n                <DatasourceName name={option.name} overridden={option.overridden} overriding={option.overriding} />\n              </ListItemText>\n              {!option.saved && <ListItemText>Save the dashboard to enable this datasource</ListItemText>}\n              <ListItemText style={{ textAlign: 'right' }}>\n                {option.groupLabel && option.groupLabel.length > 0 && (\n                  <Chip\n                    disabled={false}\n                    label={option.groupLabel}\n                    size=\"small\"\n                    onDelete={option.groupEditLink ? fakeActionEvent : undefined}\n                    deleteIcon={\n                      option.groupEditLink ? (\n                        <IconButton href={option.groupEditLink} target=\"_blank\">\n                          <OpenInNewIcon fontSize=\"small\" />\n                        </IconButton>\n                      ) : undefined\n                    }\n                  />\n                )}\n              </ListItemText>\n            </Stack>\n          </li>\n        );\n      }}\n    />\n  );\n}\n\nexport function DatasourceName(props: { name: string; overridden?: boolean; overriding?: boolean }): ReactElement {\n  const { name, overridden, overriding } = props;\n  return (\n    <>\n      {`${name} `}\n      {!overridden && overriding && (\n        <Box display=\"inline\" fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {overridden && '(overridden)'}\n    </>\n  );\n}\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a DatasourceSelectItemSelector,\n * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.\n * @param selector\n */\nexport function selectorToOptionValue(selector: DatasourceSelectItemSelector | VariableName): string {\n  if (isVariableDatasource(selector)) {\n    return `${DATASOURCE_VARIABLE_VALUE_PREFIX}${selector}`;\n  }\n  return [selector.kind, selector.group ?? '', selector.name ?? ''].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{kind}_____{group}_____{name}`,\n * returns a DatasourceSelector to be used by the query data model.\n * @param optionValue\n */\nexport function optionValueToSelector(optionValue: string): DatasourceSelectValue {\n  if (optionValue.startsWith(DATASOURCE_VARIABLE_VALUE_PREFIX)) {\n    return optionValue.split(DATASOURCE_VARIABLE_VALUE_PREFIX)[1]!;\n  }\n\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const kind = words[0];\n  const name = words[2];\n  if (kind === undefined || name === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    kind,\n    name: name === '' ? undefined : name,\n  };\n}\n\nexport function isVariableDatasource(value: DatasourceSelectValue | undefined): value is VariableName {\n  return typeof value === 'string' && value.startsWith(VARIABLE_IDENTIFIER);\n}\n\nexport const datasourceSelectValueToSelector = (\n  value: DatasourceSelectValue | undefined,\n  variables: VariableStateMap,\n  datasourceSelectItemGroups: DatasourceSelectItemGroup[] | undefined\n): DatasourceSelector | undefined => {\n  if (!isVariableDatasource(value)) {\n    return value;\n  }\n\n  const [variableName] = parseVariables(value);\n  const variable = variables[variableName ?? ''];\n\n  // If the variable is not defined or if its value is an array, we cannot determine a selector and return undefined\n  if (!variable || Array.isArray(variable.value)) {\n    return undefined;\n  }\n\n  const associatedDatasource = (datasourceSelectItemGroups || [])\n    .flatMap((itemGroup) => itemGroup.items)\n    .find((datasource) => datasource.name === variable.value);\n\n  // If the variable value is not a datasource, we cannot determine a selector and return undefined\n  if (associatedDatasource === undefined) {\n    return undefined;\n  }\n\n  const datasourceSelector: DatasourceSelector = {\n    kind: associatedDatasource.selector.kind,\n    name: associatedDatasource.selector.name,\n  };\n\n  return datasourceSelector;\n};\n\nexport const useDatasourceSelectValueToSelector = (\n  value: DatasourceSelectValue,\n  datasourcePluginKind: string\n): DatasourceSelector => {\n  const { data } = useListDatasourceSelectItems(datasourcePluginKind);\n  const variables = useVariableValues();\n  if (!isVariableDatasource(value)) {\n    return value;\n  }\n\n  return datasourceSelectValueToSelector(value, variables, data) ?? { kind: datasourcePluginKind };\n};\n"],"names":["OpenInNewIcon","Stack","ListItemText","Chip","IconButton","Box","Autocomplete","TextField","useMemo","useListDatasourceSelectItems","useVariableValues","parseVariables","DATASOURCE_VARIABLE_VALUE_PREFIX","VARIABLE_IDENTIFIER","emptyDatasourceOption","name","value","DatasourceSelect","props","datasourcePluginKind","project","onChange","others","data","isLoading","variables","defaultValue","isVariableDatasource","group","flatMap","itemGroup","items","find","item","kind","selector","overridden","options","datasourceOptions","map","groupLabel","groupEditLink","editLink","overriding","saved","selectorToOptionValue","datasourceOptionsMap","Map","option","variableOptions","Object","entries","variable","Array","isArray","associatedDatasource","get","optionValue","handleChange","selectedOption","next","optionValueToSelector","fakeActionEvent","renderInput","params","label","placeholder","groupBy","getOptionLabel","_","v","renderOption","li","key","direction","alignItems","justifyContent","width","DatasourceName","style","textAlign","length","disabled","size","onDelete","undefined","deleteIcon","href","target","fontSize","display","fontWeight","color","theme","palette","primary","main","OPTION_VALUE_DELIMITER","join","startsWith","split","words","Error","datasourceSelectValueToSelector","datasourceSelectItemGroups","variableName","datasource","datasourceSelector","useDatasourceSelectValueToSelector"],"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,OAAOA,mBAAmB,4BAA4B;AACtD,SACEC,KAAK,EACLC,YAAY,EACZC,IAAI,EACJC,UAAU,EACVC,GAAG,EAGHC,YAAY,EACZC,SAAS,QACJ,gBAAgB;AAEvB,SAAuBC,OAAO,QAAQ,QAAQ;AAC9C,SAIEC,4BAA4B,EAC5BC,iBAAiB,QAEZ,aAAa;AACpB,SAASC,cAAc,QAAQ,WAAW;AAE1C,MAAMC,mCAAmC;AACzC,MAAMC,sBAAsB;AAY5B,MAAMC,wBAA0C;IAAEC,MAAM;IAAIC,OAAO;AAAG;AAWtE;;;CAGC,GACD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,oBAAoB,EAAEH,KAAK,EAAEI,OAAO,EAAEC,QAAQ,EAAE,GAAGC,QAAQ,GAAGJ;IACtE,MAAM,EAAEK,IAAI,EAAEC,SAAS,EAAE,GAAGf,6BAA6BU,sBAAsBC;IAC/E,MAAMK,YAAYf;IAElB,MAAMgB,eAAelB,QAAqD;QACxE,IAAImB,qBAAqBX,QAAQ;YAC/B,OAAOA;QACT;QAEA,MAAMY,QAAQ,AAACL,CAAAA,QAAQ,EAAE,AAAD,EACrBM,OAAO,CAAC,CAACC,YAAcA,UAAUC,KAAK,EACtCC,IAAI,CAAC,CAACC;YACL,OAAOjB,MAAMkB,IAAI,KAAKD,KAAKE,QAAQ,CAACD,IAAI,IAAIlB,MAAMD,IAAI,KAAKkB,KAAKE,QAAQ,CAACpB,IAAI,IAAI,CAACkB,KAAKG,UAAU;QACnG,IAAID,SAASP;QACf,OAAO;YAAE,GAAGZ,KAAK;YAAEY;QAAM;IAC3B,GAAG;QAACZ;QAAOO;KAAK;IAEhB,MAAMc,UAAU7B,QAA4B;QAC1C,MAAM8B,oBAAoB,AAACf,CAAAA,QAAQ,EAAE,AAAD,EAAGM,OAAO,CAAmB,CAACC,YAChEA,UAAUC,KAAK,CAACQ,GAAG,CAAmB,CAACN,OAAU,CAAA;oBAC/CO,YAAYV,UAAUF,KAAK;oBAC3Ba,eAAeX,UAAUY,QAAQ;oBACjC3B,MAAMkB,KAAKlB,IAAI;oBACf4B,YAAYV,KAAKU,UAAU;oBAC3BP,YAAYH,KAAKG,UAAU;oBAC3BQ,OAAOX,KAAKW,KAAK,IAAI;oBACrBhB,OAAOK,KAAKE,QAAQ,CAACP,KAAK;oBAC1BZ,OAAO6B,sBAAsBZ,KAAKE,QAAQ;gBAC5C,CAAA;QAGF,MAAMW,uBAAuB,IAAIC,IAAIT,kBAAkBC,GAAG,CAAC,CAACS,SAAW;gBAACA,OAAOjC,IAAI;gBAAEiC;aAAO;QAE5F,MAAMC,kBAAkBC,OAAOC,OAAO,CAAC1B,WAAWI,OAAO,CAAmB,CAAC,CAACd,MAAMqC,SAAS;YAC3F,IAAIC,MAAMC,OAAO,CAACF,SAASpC,KAAK,GAAG,OAAO,EAAE;YAE5C,MAAMuC,uBAAuBT,qBAAqBU,GAAG,CAACJ,SAASpC,KAAK,IAAI;YACxE,IAAI,CAACuC,sBAAsB,OAAO,EAAE;YAEpC,OAAO;gBACLf,YAAY;gBACZzB,MAAM,GAAGF,sBAAsBE,MAAM;gBACrC6B,OAAO;gBACP5B,OAAO,GAAGJ,mCAAmCC,sBAAsBE,MAAM;YAC3E;QACF;QAEA,OAAO;eAAIuB;eAAsBW;SAAgB;IACnD,GAAG;QAAC1B;QAAME;KAAU;IAEpB,2HAA2H;IAC3H,MAAMgC,cAAcjC,YAChBV,wBACAuB,QAAQL,IAAI,CAAC,CAACgB,SAAWA,OAAOhC,KAAK,KAAK6B,sBAAsBnB;IAEpE,gGAAgG;IAChG,MAAMgC,eAAe,CAACC;QACpB,IAAIA,gBAAgB;YAClB,MAAMC,OAAOC,sBAAsBF,gBAAgB3C,SAAS;YAC5DK,SAASuC;QACX,OAAO;YACLvC,SAAS;gBAAEa,MAAMf;YAAqB;QACxC;IACF;IAEA,oGAAoG;IACpG,4GAA4G;IAC5G,2BAA2B;IAC3B,gEAAgE;IAChE,MAAM2C,kBAAkB,KAAa;IAErC,qBACE,KAACxD;QACC+B,SAASA;QACT0B,aAAa,CAACC,uBAAW,KAACzD;gBAAW,GAAGyD,MAAM;gBAAEC,OAAO3C,OAAO2C,KAAK;gBAAEC,aAAY;;QACjFC,SAAS,CAACnB,SAAWA,OAAOR,UAAU,IAAI;QAC1C4B,gBAAgB,CAACpB;YACf,OAAOA,OAAOjC,IAAI;QACpB;QACAM,UAAU,CAACgD,GAAGC,IAAMZ,aAAaY;QACjCtD,OAAOyC;QACPc,cAAc,CAACrD,OAAO8B;YACpB,qBACE,eAACwB;gBAAI,GAAGtD,KAAK;gBAAEuD,KAAKzB,OAAOhC,KAAK;6BAC9B,MAACf;gBAAMyE,WAAU;gBAAMC,YAAW;gBAASC,gBAAe;gBAAgBC,OAAM;;kCAC9E,KAAC3E;kCACC,cAAA,KAAC4E;4BAAe/D,MAAMiC,OAAOjC,IAAI;4BAAEqB,YAAYY,OAAOZ,UAAU;4BAAEO,YAAYK,OAAOL,UAAU;;;oBAEhG,CAACK,OAAOJ,KAAK,kBAAI,KAAC1C;kCAAa;;kCAChC,KAACA;wBAAa6E,OAAO;4BAAEC,WAAW;wBAAQ;kCACvChC,OAAOR,UAAU,IAAIQ,OAAOR,UAAU,CAACyC,MAAM,GAAG,mBAC/C,KAAC9E;4BACC+E,UAAU;4BACVjB,OAAOjB,OAAOR,UAAU;4BACxB2C,MAAK;4BACLC,UAAUpC,OAAOP,aAAa,GAAGqB,kBAAkBuB;4BACnDC,YACEtC,OAAOP,aAAa,iBAClB,KAACrC;gCAAWmF,MAAMvC,OAAOP,aAAa;gCAAE+C,QAAO;0CAC7C,cAAA,KAACxF;oCAAcyF,UAAS;;iCAExBJ;;;;;QAQpB;;AAGN;AAEA,OAAO,SAASP,eAAe5D,KAAmE;IAChG,MAAM,EAAEH,IAAI,EAAEqB,UAAU,EAAEO,UAAU,EAAE,GAAGzB;IACzC,qBACE;;YACG,GAAGH,KAAK,CAAC,CAAC;YACV,CAACqB,cAAcO,4BACd,KAACtC;gBAAIqF,SAAQ;gBAASC,YAAW;gBAASC,OAAO,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO,CAACC,IAAI;0BAAE;;YAIzF5D,cAAc;;;AAGrB;AAEA,kDAAkD;AAClD,MAAM6D,yBAAyB;AAE/B;;;;CAIC,GACD,OAAO,SAASpD,sBAAsBV,QAAqD;IACzF,IAAIR,qBAAqBQ,WAAW;QAClC,OAAO,GAAGvB,mCAAmCuB,UAAU;IACzD;IACA,OAAO;QAACA,SAASD,IAAI;QAAEC,SAASP,KAAK,IAAI;QAAIO,SAASpB,IAAI,IAAI;KAAG,CAACmF,IAAI,CAACD;AACzE;AAEA;;;;CAIC,GACD,OAAO,SAASpC,sBAAsBJ,WAAmB;IACvD,IAAIA,YAAY0C,UAAU,CAACvF,mCAAmC;QAC5D,OAAO6C,YAAY2C,KAAK,CAACxF,iCAAiC,CAAC,EAAE;IAC/D;IAEA,MAAMyF,QAAQ5C,YAAY2C,KAAK,CAACH;IAChC,MAAM/D,OAAOmE,KAAK,CAAC,EAAE;IACrB,MAAMtF,OAAOsF,KAAK,CAAC,EAAE;IACrB,IAAInE,SAASmD,aAAatE,SAASsE,WAAW;QAC5C,MAAM,IAAIiB,MAAM;IAClB;IACA,OAAO;QACLpE;QACAnB,MAAMA,SAAS,KAAKsE,YAAYtE;IAClC;AACF;AAEA,OAAO,SAASY,qBAAqBX,KAAwC;IAC3E,OAAO,OAAOA,UAAU,YAAYA,MAAMmF,UAAU,CAACtF;AACvD;AAEA,OAAO,MAAM0F,kCAAkC,CAC7CvF,OACAS,WACA+E;IAEA,IAAI,CAAC7E,qBAAqBX,QAAQ;QAChC,OAAOA;IACT;IAEA,MAAM,CAACyF,aAAa,GAAG9F,eAAeK;IACtC,MAAMoC,WAAW3B,SAAS,CAACgF,gBAAgB,GAAG;IAE9C,kHAAkH;IAClH,IAAI,CAACrD,YAAYC,MAAMC,OAAO,CAACF,SAASpC,KAAK,GAAG;QAC9C,OAAOqE;IACT;IAEA,MAAM9B,uBAAuB,AAACiD,CAAAA,8BAA8B,EAAE,AAAD,EAC1D3E,OAAO,CAAC,CAACC,YAAcA,UAAUC,KAAK,EACtCC,IAAI,CAAC,CAAC0E,aAAeA,WAAW3F,IAAI,KAAKqC,SAASpC,KAAK;IAE1D,iGAAiG;IACjG,IAAIuC,yBAAyB8B,WAAW;QACtC,OAAOA;IACT;IAEA,MAAMsB,qBAAyC;QAC7CzE,MAAMqB,qBAAqBpB,QAAQ,CAACD,IAAI;QACxCnB,MAAMwC,qBAAqBpB,QAAQ,CAACpB,IAAI;IAC1C;IAEA,OAAO4F;AACT,EAAE;AAEF,OAAO,MAAMC,qCAAqC,CAChD5F,OACAG;IAEA,MAAM,EAAEI,IAAI,EAAE,GAAGd,6BAA6BU;IAC9C,MAAMM,YAAYf;IAClB,IAAI,CAACiB,qBAAqBX,QAAQ;QAChC,OAAOA;IACT;IAEA,OAAOuF,gCAAgCvF,OAAOS,WAAWF,SAAS;QAAEW,MAAMf;IAAqB;AACjG,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"HTTPSettingsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkB,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtE,OAAc,EAAY,YAAY,EAAY,MAAM,OAAO,CAAC;AAOhE,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,kBAAkB,CAAC;IACtC,gBAAgB,EAAE,kBAAkB,CAAC;CACtC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAwb1E"}
+{"version":3,"file":"HTTPSettingsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkB,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtE,OAAc,EAAY,YAAY,EAAY,MAAM,OAAO,CAAC;AAOhE,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,kBAAkB,CAAC;IACtC,gBAAgB,EAAE,kBAAkB,CAAC;CACtC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA4b1E"}

package/dist/components/HTTPSettingsEditor/HTTPSettingsEditor.js

@@ -22,6 +22,10 @@ export function HTTPSettingsEditor(props) {
     const { value, onChange, isReadonly, initialSpecDirect, initialSpecProxy } = props;
     const strDirect = 'Direct access';
     const strProxy = 'Proxy';
+    // Initialize Proxy mode by default, if neither direct nor proxy mode is selected.
+    if (!value.directUrl && !value.proxy) {
+        Object.assign(value, initialSpecProxy);
+    }
     // utilitary function used for headers when renaming a property
     // -> TODO it would be cleaner to manipulate headers as an intermediary list instead, to avoid doing this.
     const buildNewHeaders = (oldHeaders, oldName, newName)=>{
@@ -431,8 +435,7 @@ export function HTTPSettingsEditor(props) {
     // bug in case the tabs get eventually swapped in the future.
     const directModeId = tabs.findIndex((tab)=>tab.label === strDirect);
     const proxyModeId = tabs.findIndex((tab)=>tab.label === strProxy);
-    // In "update datasource" case, set defaultTab to the mode that this datasource is currently relying on.
-    // Otherwise (create datasource), set defaultTab to Direct access.
+    // Set defaultTab to the mode that this datasource is currently relying on.
     const defaultTab = value.proxy ? proxyModeId : directModeId;
     // For better user experience, save previous states in mind for both mode.
     // This avoids losing everything when the user changes their mind back.

package/dist/components/HTTPSettingsEditor/HTTPSettingsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx"],"sourcesContent":["// Copyright 2024 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 { RequestHeaders, HTTPDatasourceSpec } from '@perses-dev/core';\nimport { Grid, IconButton, MenuItem, TextField, Typography } from '@mui/material';\nimport React, { Fragment, ReactElement, useState } from 'react';\nimport { produce } from 'immer';\nimport { Controller } from 'react-hook-form';\nimport MinusIcon from 'mdi-material-ui/Minus';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { OptionsEditorRadios } from '../OptionsEditorRadios';\n\nexport interface HTTPSettingsEditor {\n  value: HTTPDatasourceSpec;\n  onChange: (next: HTTPDatasourceSpec) => void;\n  isReadonly?: boolean;\n  initialSpecDirect: HTTPDatasourceSpec;\n  initialSpecProxy: HTTPDatasourceSpec;\n}\n\nexport function HTTPSettingsEditor(props: HTTPSettingsEditor): ReactElement {\n  const { value, onChange, isReadonly, initialSpecDirect, initialSpecProxy } = props;\n  const strDirect = 'Direct access';\n  const strProxy = 'Proxy';\n\n  // utilitary function used for headers when renaming a property\n  // -> TODO it would be cleaner to manipulate headers as an intermediary list instead, to avoid doing this.\n  const buildNewHeaders = (\n    oldHeaders: RequestHeaders | undefined,\n    oldName: string,\n    newName: string\n  ): RequestHeaders | undefined => {\n    if (oldHeaders === undefined) return oldHeaders;\n    const keys = Object.keys(oldHeaders);\n    const newHeaders = keys.reduce<Record<string, string>>((acc, val) => {\n      if (val === oldName) {\n        acc[newName] = oldHeaders[oldName] || '';\n      } else {\n        acc[val] = oldHeaders[val] || '';\n      }\n      return acc;\n    }, {});\n\n    return { ...newHeaders };\n  };\n\n  const tabs = [\n    {\n      label: strDirect,\n      content: (\n        <Controller\n          name=\"URL\"\n          render={({ field, fieldState }) => (\n            <TextField\n              {...field}\n              fullWidth\n              label=\"URL\"\n              value={value.directUrl || ''}\n              error={!!fieldState.error}\n              helperText={fieldState.error?.message}\n              InputProps={{\n                readOnly: isReadonly,\n              }}\n              InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n              onChange={(e) => {\n                field.onChange(e);\n                onChange(\n                  produce(value, (draft) => {\n                    draft.directUrl = e.target.value;\n                  })\n                );\n              }}\n            />\n          )}\n        />\n      ),\n    },\n    {\n      label: strProxy,\n      content: (\n        <>\n          <Controller\n            name=\"URL\"\n            render={({ field, fieldState }) => (\n              <TextField\n                {...field}\n                fullWidth\n                label=\"URL\"\n                value={value.proxy?.spec.url || ''}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                InputProps={{\n                  readOnly: isReadonly,\n                }}\n                InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                onChange={(e) => {\n                  field.onChange(e);\n                  onChange(\n                    produce(value, (draft) => {\n                      if (draft.proxy !== undefined) {\n                        draft.proxy.spec.url = e.target.value;\n                      }\n                    })\n                  );\n                }}\n                sx={{ mb: 2 }}\n              />\n            )}\n          />\n          <Typography variant=\"h4\" mb={2}>\n            Allowed endpoints\n          </Typography>\n          <Grid container spacing={2} mb={2}>\n            {value.proxy?.spec.allowedEndpoints && value.proxy?.spec.allowedEndpoints.length !== 0 ? (\n              value.proxy.spec.allowedEndpoints.map(({ endpointPattern, method }, i) => {\n                return (\n                  <Fragment key={i}>\n                    <Grid item xs={8}>\n                      <Controller\n                        name={`Endpoint pattern ${i}`}\n                        render={({ field, fieldState }) => (\n                          <TextField\n                            {...field}\n                            fullWidth\n                            label=\"Endpoint pattern\"\n                            value={endpointPattern}\n                            error={!!fieldState.error}\n                            helperText={fieldState.error?.message}\n                            InputProps={{\n                              readOnly: isReadonly,\n                            }}\n                            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                            onChange={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.allowedEndpoints = draft.proxy.spec.allowedEndpoints?.map(\n                                      (item, itemIndex) => {\n                                        if (i === itemIndex) {\n                                          return {\n                                            endpointPattern: e.target.value,\n                                            method: item.method,\n                                          };\n                                        } else {\n                                          return item;\n                                        }\n                                      }\n                                    );\n                                  }\n                                })\n                              );\n                            }}\n                          />\n                        )}\n                      />\n                    </Grid>\n                    <Grid item xs={3}>\n                      <Controller\n                        name={`Method ${i}`}\n                        render={({ field, fieldState }) => (\n                          <TextField\n                            {...field}\n                            select\n                            fullWidth\n                            label=\"Method\"\n                            value={method}\n                            error={!!fieldState.error}\n                            helperText={fieldState.error?.message}\n                            InputProps={{\n                              readOnly: isReadonly,\n                            }}\n                            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                            onChange={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.allowedEndpoints = draft.proxy.spec.allowedEndpoints?.map(\n                                      (item, itemIndex) => {\n                                        if (i === itemIndex) {\n                                          return {\n                                            endpointPattern: item.endpointPattern,\n                                            method: e.target.value,\n                                          };\n                                        } else {\n                                          return item;\n                                        }\n                                      }\n                                    );\n                                  }\n                                })\n                              );\n                            }}\n                          >\n                            <MenuItem value=\"GET\">GET</MenuItem>\n                            <MenuItem value=\"POST\">POST</MenuItem>\n                            <MenuItem value=\"PUT\">PUT</MenuItem>\n                            <MenuItem value=\"PATCH\">PATCH</MenuItem>\n                            <MenuItem value=\"DELETE\">DELETE</MenuItem>\n                          </TextField>\n                        )}\n                      />\n                    </Grid>\n                    <Grid item xs={1}>\n                      <Controller\n                        name={`Remove Endpoint ${i}`}\n                        render={({ field }) => (\n                          <IconButton\n                            {...field}\n                            disabled={isReadonly}\n                            // Remove the given allowed endpoint from the list\n                            onClick={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.allowedEndpoints = [\n                                      ...(draft.proxy.spec.allowedEndpoints?.filter((item, itemIndex) => {\n                                        return itemIndex !== i;\n                                      }) || []),\n                                    ];\n                                  }\n                                })\n                              );\n                            }}\n                          >\n                            <MinusIcon />\n                          </IconButton>\n                        )}\n                      />\n                    </Grid>\n                  </Fragment>\n                );\n              })\n            ) : (\n              <Grid item xs={4}>\n                <Typography sx={{ fontStyle: 'italic' }}>None</Typography>\n              </Grid>\n            )}\n            <Grid item xs={12} sx={{ paddingTop: '0px !important', paddingLeft: '5px !important' }}>\n              <IconButton\n                disabled={isReadonly}\n                // Add a new (empty) allowed endpoint to the list\n                onClick={() =>\n                  onChange(\n                    produce(value, (draft) => {\n                      if (draft.proxy !== undefined) {\n                        draft.proxy.spec.allowedEndpoints = [\n                          ...(draft.proxy.spec.allowedEndpoints ?? []),\n                          { endpointPattern: '', method: '' },\n                        ];\n                      }\n                    })\n                  )\n                }\n              >\n                <PlusIcon />\n              </IconButton>\n            </Grid>\n          </Grid>\n          <Typography variant=\"h4\" mb={2}>\n            Request Headers\n          </Typography>\n          <Grid container spacing={2} mb={2}>\n            {value.proxy?.spec.headers &&\n              Object.keys(value.proxy.spec.headers).map((headerName, i) => {\n                return (\n                  <Fragment key={i}>\n                    <Grid item xs={4}>\n                      <Controller\n                        name={`Header name ${i}`}\n                        render={({ field, fieldState }) => (\n                          <TextField\n                            {...field}\n                            fullWidth\n                            label=\"Header name\"\n                            value={headerName}\n                            error={!!fieldState.error}\n                            helperText={fieldState.error?.message}\n                            InputProps={{\n                              readOnly: isReadonly,\n                            }}\n                            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                            onChange={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.headers = buildNewHeaders(\n                                      draft.proxy.spec.headers,\n                                      headerName,\n                                      e.target.value\n                                    );\n                                  }\n                                })\n                              );\n                            }}\n                          />\n                        )}\n                      />\n                    </Grid>\n                    <Grid item xs={7}>\n                      <Controller\n                        name={`Header value ${i}`}\n                        render={({ field, fieldState }) => (\n                          <TextField\n                            {...field}\n                            fullWidth\n                            label=\"Header value\"\n                            value={value.proxy?.spec.headers?.[headerName]}\n                            error={!!fieldState.error}\n                            helperText={fieldState.error?.message}\n                            InputProps={{\n                              readOnly: isReadonly,\n                            }}\n                            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                            onChange={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.headers = {\n                                      ...draft.proxy.spec.headers,\n                                      [headerName]: e.target.value,\n                                    };\n                                  }\n                                })\n                              );\n                            }}\n                          />\n                        )}\n                      />\n                    </Grid>\n                    <Grid item xs={1}>\n                      <Controller\n                        name={`Remove Header ${i}`}\n                        render={({ field }) => (\n                          <IconButton\n                            {...field}\n                            disabled={isReadonly}\n                            // Remove the given header from the list\n                            onClick={(e) => {\n                              field.onChange(e);\n                              const newHeaders = { ...value.proxy?.spec.headers };\n                              delete newHeaders[headerName];\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.headers = newHeaders;\n                                  }\n                                })\n                              );\n                            }}\n                          >\n                            <MinusIcon />\n                          </IconButton>\n                        )}\n                      />\n                    </Grid>\n                  </Fragment>\n                );\n              })}\n            <Grid item xs={12} sx={{ paddingTop: '0px !important', paddingLeft: '5px !important' }}>\n              <IconButton\n                disabled={isReadonly}\n                // Add a new (empty) header to the list\n                onClick={() =>\n                  onChange(\n                    produce(value, (draft) => {\n                      if (draft.proxy !== undefined) {\n                        draft.proxy.spec.headers = { ...draft.proxy.spec.headers, '': '' };\n                      }\n                    })\n                  )\n                }\n              >\n                <PlusIcon />\n              </IconButton>\n            </Grid>\n          </Grid>\n\n          <Controller\n            name=\"Secret\"\n            render={({ field, fieldState }) => (\n              <TextField\n                {...field}\n                fullWidth\n                label=\"Secret\"\n                value={value.proxy?.spec.secret || ''}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                InputProps={{\n                  readOnly: isReadonly,\n                }}\n                InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                onChange={(e) => {\n                  field.onChange(e);\n                  onChange(\n                    produce(value, (draft) => {\n                      if (draft.proxy !== undefined) {\n                        draft.proxy.spec.secret = e.target.value;\n                      }\n                    })\n                  );\n                }}\n              />\n            )}\n          />\n        </>\n      ),\n    },\n  ];\n\n  // Use of findIndex instead of providing hardcoded values to avoid desynchronisatio or\n  // bug in case the tabs get eventually swapped in the future.\n  const directModeId = tabs.findIndex((tab) => tab.label === strDirect);\n  const proxyModeId = tabs.findIndex((tab) => tab.label === strProxy);\n\n  // In \"update datasource\" case, set defaultTab to the mode that this datasource is currently relying on.\n  // Otherwise (create datasource), set defaultTab to Direct access.\n  const defaultTab = value.proxy ? proxyModeId : directModeId;\n\n  // For better user experience, save previous states in mind for both mode.\n  // This avoids losing everything when the user changes their mind back.\n  const [previousSpecDirect, setPreviousSpecDirect] = useState(initialSpecDirect);\n  const [previousSpecProxy, setPreviousSpecProxy] = useState(initialSpecProxy);\n\n  // When changing mode, remove previous mode's config + append default values for the new mode.\n  const handleModeChange = (v: number): void => {\n    if (tabs[v]?.label === strDirect) {\n      setPreviousSpecProxy(value);\n\n      // Copy all settings (for example, scrapeInterval), except 'proxy'\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { proxy, ...newValue } = value;\n      onChange({ ...newValue, directUrl: previousSpecDirect.directUrl });\n    } else if (tabs[v]?.label === strProxy) {\n      setPreviousSpecDirect(value);\n\n      // Copy all settings (for example, scrapeInterval), except 'directUrl'\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { directUrl, ...newValue } = value;\n      onChange({ ...newValue, proxy: previousSpecProxy.proxy });\n    }\n  };\n\n  return (\n    <>\n      <Typography variant=\"h4\" mt={2}>\n        HTTP Settings\n      </Typography>\n      <OptionsEditorRadios\n        isReadonly={isReadonly}\n        tabs={tabs}\n        defaultTab={defaultTab}\n        onModeChange={handleModeChange}\n      />\n    </>\n  );\n}\n"],"names":["Grid","IconButton","MenuItem","TextField","Typography","React","Fragment","useState","produce","Controller","MinusIcon","PlusIcon","OptionsEditorRadios","HTTPSettingsEditor","props","value","onChange","isReadonly","initialSpecDirect","initialSpecProxy","strDirect","strProxy","buildNewHeaders","oldHeaders","oldName","newName","undefined","keys","Object","newHeaders","reduce","acc","val","tabs","label","content","name","render","field","fieldState","fullWidth","directUrl","error","helperText","message","InputProps","readOnly","InputLabelProps","shrink","e","draft","target","proxy","spec","url","sx","mb","variant","container","spacing","allowedEndpoints","length","map","endpointPattern","method","i","item","xs","itemIndex","select","disabled","onClick","filter","fontStyle","paddingTop","paddingLeft","headers","headerName","secret","directModeId","findIndex","tab","proxyModeId","defaultTab","previousSpecDirect","setPreviousSpecDirect","previousSpecProxy","setPreviousSpecProxy","handleModeChange","v","newValue","mt","onModeChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx"],"sourcesContent":["// Copyright 2024 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 { RequestHeaders, HTTPDatasourceSpec } from '@perses-dev/core';\nimport { Grid, IconButton, MenuItem, TextField, Typography } from '@mui/material';\nimport React, { Fragment, ReactElement, useState } from 'react';\nimport { produce } from 'immer';\nimport { Controller } from 'react-hook-form';\nimport MinusIcon from 'mdi-material-ui/Minus';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { OptionsEditorRadios } from '../OptionsEditorRadios';\n\nexport interface HTTPSettingsEditor {\n  value: HTTPDatasourceSpec;\n  onChange: (next: HTTPDatasourceSpec) => void;\n  isReadonly?: boolean;\n  initialSpecDirect: HTTPDatasourceSpec;\n  initialSpecProxy: HTTPDatasourceSpec;\n}\n\nexport function HTTPSettingsEditor(props: HTTPSettingsEditor): ReactElement {\n  const { value, onChange, isReadonly, initialSpecDirect, initialSpecProxy } = props;\n  const strDirect = 'Direct access';\n  const strProxy = 'Proxy';\n\n  // Initialize Proxy mode by default, if neither direct nor proxy mode is selected.\n  if (!value.directUrl && !value.proxy) {\n    Object.assign(value, initialSpecProxy);\n  }\n\n  // utilitary function used for headers when renaming a property\n  // -> TODO it would be cleaner to manipulate headers as an intermediary list instead, to avoid doing this.\n  const buildNewHeaders = (\n    oldHeaders: RequestHeaders | undefined,\n    oldName: string,\n    newName: string\n  ): RequestHeaders | undefined => {\n    if (oldHeaders === undefined) return oldHeaders;\n    const keys = Object.keys(oldHeaders);\n    const newHeaders = keys.reduce<Record<string, string>>((acc, val) => {\n      if (val === oldName) {\n        acc[newName] = oldHeaders[oldName] || '';\n      } else {\n        acc[val] = oldHeaders[val] || '';\n      }\n      return acc;\n    }, {});\n\n    return { ...newHeaders };\n  };\n\n  const tabs = [\n    {\n      label: strDirect,\n      content: (\n        <Controller\n          name=\"URL\"\n          render={({ field, fieldState }) => (\n            <TextField\n              {...field}\n              fullWidth\n              label=\"URL\"\n              value={value.directUrl || ''}\n              error={!!fieldState.error}\n              helperText={fieldState.error?.message}\n              InputProps={{\n                readOnly: isReadonly,\n              }}\n              InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n              onChange={(e) => {\n                field.onChange(e);\n                onChange(\n                  produce(value, (draft) => {\n                    draft.directUrl = e.target.value;\n                  })\n                );\n              }}\n            />\n          )}\n        />\n      ),\n    },\n    {\n      label: strProxy,\n      content: (\n        <>\n          <Controller\n            name=\"URL\"\n            render={({ field, fieldState }) => (\n              <TextField\n                {...field}\n                fullWidth\n                label=\"URL\"\n                value={value.proxy?.spec.url || ''}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                InputProps={{\n                  readOnly: isReadonly,\n                }}\n                InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                onChange={(e) => {\n                  field.onChange(e);\n                  onChange(\n                    produce(value, (draft) => {\n                      if (draft.proxy !== undefined) {\n                        draft.proxy.spec.url = e.target.value;\n                      }\n                    })\n                  );\n                }}\n                sx={{ mb: 2 }}\n              />\n            )}\n          />\n          <Typography variant=\"h4\" mb={2}>\n            Allowed endpoints\n          </Typography>\n          <Grid container spacing={2} mb={2}>\n            {value.proxy?.spec.allowedEndpoints && value.proxy?.spec.allowedEndpoints.length !== 0 ? (\n              value.proxy.spec.allowedEndpoints.map(({ endpointPattern, method }, i) => {\n                return (\n                  <Fragment key={i}>\n                    <Grid item xs={8}>\n                      <Controller\n                        name={`Endpoint pattern ${i}`}\n                        render={({ field, fieldState }) => (\n                          <TextField\n                            {...field}\n                            fullWidth\n                            label=\"Endpoint pattern\"\n                            value={endpointPattern}\n                            error={!!fieldState.error}\n                            helperText={fieldState.error?.message}\n                            InputProps={{\n                              readOnly: isReadonly,\n                            }}\n                            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                            onChange={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.allowedEndpoints = draft.proxy.spec.allowedEndpoints?.map(\n                                      (item, itemIndex) => {\n                                        if (i === itemIndex) {\n                                          return {\n                                            endpointPattern: e.target.value,\n                                            method: item.method,\n                                          };\n                                        } else {\n                                          return item;\n                                        }\n                                      }\n                                    );\n                                  }\n                                })\n                              );\n                            }}\n                          />\n                        )}\n                      />\n                    </Grid>\n                    <Grid item xs={3}>\n                      <Controller\n                        name={`Method ${i}`}\n                        render={({ field, fieldState }) => (\n                          <TextField\n                            {...field}\n                            select\n                            fullWidth\n                            label=\"Method\"\n                            value={method}\n                            error={!!fieldState.error}\n                            helperText={fieldState.error?.message}\n                            InputProps={{\n                              readOnly: isReadonly,\n                            }}\n                            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                            onChange={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.allowedEndpoints = draft.proxy.spec.allowedEndpoints?.map(\n                                      (item, itemIndex) => {\n                                        if (i === itemIndex) {\n                                          return {\n                                            endpointPattern: item.endpointPattern,\n                                            method: e.target.value,\n                                          };\n                                        } else {\n                                          return item;\n                                        }\n                                      }\n                                    );\n                                  }\n                                })\n                              );\n                            }}\n                          >\n                            <MenuItem value=\"GET\">GET</MenuItem>\n                            <MenuItem value=\"POST\">POST</MenuItem>\n                            <MenuItem value=\"PUT\">PUT</MenuItem>\n                            <MenuItem value=\"PATCH\">PATCH</MenuItem>\n                            <MenuItem value=\"DELETE\">DELETE</MenuItem>\n                          </TextField>\n                        )}\n                      />\n                    </Grid>\n                    <Grid item xs={1}>\n                      <Controller\n                        name={`Remove Endpoint ${i}`}\n                        render={({ field }) => (\n                          <IconButton\n                            {...field}\n                            disabled={isReadonly}\n                            // Remove the given allowed endpoint from the list\n                            onClick={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.allowedEndpoints = [\n                                      ...(draft.proxy.spec.allowedEndpoints?.filter((item, itemIndex) => {\n                                        return itemIndex !== i;\n                                      }) || []),\n                                    ];\n                                  }\n                                })\n                              );\n                            }}\n                          >\n                            <MinusIcon />\n                          </IconButton>\n                        )}\n                      />\n                    </Grid>\n                  </Fragment>\n                );\n              })\n            ) : (\n              <Grid item xs={4}>\n                <Typography sx={{ fontStyle: 'italic' }}>None</Typography>\n              </Grid>\n            )}\n            <Grid item xs={12} sx={{ paddingTop: '0px !important', paddingLeft: '5px !important' }}>\n              <IconButton\n                disabled={isReadonly}\n                // Add a new (empty) allowed endpoint to the list\n                onClick={() =>\n                  onChange(\n                    produce(value, (draft) => {\n                      if (draft.proxy !== undefined) {\n                        draft.proxy.spec.allowedEndpoints = [\n                          ...(draft.proxy.spec.allowedEndpoints ?? []),\n                          { endpointPattern: '', method: '' },\n                        ];\n                      }\n                    })\n                  )\n                }\n              >\n                <PlusIcon />\n              </IconButton>\n            </Grid>\n          </Grid>\n          <Typography variant=\"h4\" mb={2}>\n            Request Headers\n          </Typography>\n          <Grid container spacing={2} mb={2}>\n            {value.proxy?.spec.headers &&\n              Object.keys(value.proxy.spec.headers).map((headerName, i) => {\n                return (\n                  <Fragment key={i}>\n                    <Grid item xs={4}>\n                      <Controller\n                        name={`Header name ${i}`}\n                        render={({ field, fieldState }) => (\n                          <TextField\n                            {...field}\n                            fullWidth\n                            label=\"Header name\"\n                            value={headerName}\n                            error={!!fieldState.error}\n                            helperText={fieldState.error?.message}\n                            InputProps={{\n                              readOnly: isReadonly,\n                            }}\n                            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                            onChange={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.headers = buildNewHeaders(\n                                      draft.proxy.spec.headers,\n                                      headerName,\n                                      e.target.value\n                                    );\n                                  }\n                                })\n                              );\n                            }}\n                          />\n                        )}\n                      />\n                    </Grid>\n                    <Grid item xs={7}>\n                      <Controller\n                        name={`Header value ${i}`}\n                        render={({ field, fieldState }) => (\n                          <TextField\n                            {...field}\n                            fullWidth\n                            label=\"Header value\"\n                            value={value.proxy?.spec.headers?.[headerName]}\n                            error={!!fieldState.error}\n                            helperText={fieldState.error?.message}\n                            InputProps={{\n                              readOnly: isReadonly,\n                            }}\n                            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                            onChange={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.headers = {\n                                      ...draft.proxy.spec.headers,\n                                      [headerName]: e.target.value,\n                                    };\n                                  }\n                                })\n                              );\n                            }}\n                          />\n                        )}\n                      />\n                    </Grid>\n                    <Grid item xs={1}>\n                      <Controller\n                        name={`Remove Header ${i}`}\n                        render={({ field }) => (\n                          <IconButton\n                            {...field}\n                            disabled={isReadonly}\n                            // Remove the given header from the list\n                            onClick={(e) => {\n                              field.onChange(e);\n                              const newHeaders = { ...value.proxy?.spec.headers };\n                              delete newHeaders[headerName];\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.headers = newHeaders;\n                                  }\n                                })\n                              );\n                            }}\n                          >\n                            <MinusIcon />\n                          </IconButton>\n                        )}\n                      />\n                    </Grid>\n                  </Fragment>\n                );\n              })}\n            <Grid item xs={12} sx={{ paddingTop: '0px !important', paddingLeft: '5px !important' }}>\n              <IconButton\n                disabled={isReadonly}\n                // Add a new (empty) header to the list\n                onClick={() =>\n                  onChange(\n                    produce(value, (draft) => {\n                      if (draft.proxy !== undefined) {\n                        draft.proxy.spec.headers = { ...draft.proxy.spec.headers, '': '' };\n                      }\n                    })\n                  )\n                }\n              >\n                <PlusIcon />\n              </IconButton>\n            </Grid>\n          </Grid>\n\n          <Controller\n            name=\"Secret\"\n            render={({ field, fieldState }) => (\n              <TextField\n                {...field}\n                fullWidth\n                label=\"Secret\"\n                value={value.proxy?.spec.secret || ''}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                InputProps={{\n                  readOnly: isReadonly,\n                }}\n                InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                onChange={(e) => {\n                  field.onChange(e);\n                  onChange(\n                    produce(value, (draft) => {\n                      if (draft.proxy !== undefined) {\n                        draft.proxy.spec.secret = e.target.value;\n                      }\n                    })\n                  );\n                }}\n              />\n            )}\n          />\n        </>\n      ),\n    },\n  ];\n\n  // Use of findIndex instead of providing hardcoded values to avoid desynchronisatio or\n  // bug in case the tabs get eventually swapped in the future.\n  const directModeId = tabs.findIndex((tab) => tab.label === strDirect);\n  const proxyModeId = tabs.findIndex((tab) => tab.label === strProxy);\n\n  // Set defaultTab to the mode that this datasource is currently relying on.\n  const defaultTab = value.proxy ? proxyModeId : directModeId;\n\n  // For better user experience, save previous states in mind for both mode.\n  // This avoids losing everything when the user changes their mind back.\n  const [previousSpecDirect, setPreviousSpecDirect] = useState(initialSpecDirect);\n  const [previousSpecProxy, setPreviousSpecProxy] = useState(initialSpecProxy);\n\n  // When changing mode, remove previous mode's config + append default values for the new mode.\n  const handleModeChange = (v: number): void => {\n    if (tabs[v]?.label === strDirect) {\n      setPreviousSpecProxy(value);\n\n      // Copy all settings (for example, scrapeInterval), except 'proxy'\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { proxy, ...newValue } = value;\n      onChange({ ...newValue, directUrl: previousSpecDirect.directUrl });\n    } else if (tabs[v]?.label === strProxy) {\n      setPreviousSpecDirect(value);\n\n      // Copy all settings (for example, scrapeInterval), except 'directUrl'\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { directUrl, ...newValue } = value;\n      onChange({ ...newValue, proxy: previousSpecProxy.proxy });\n    }\n  };\n\n  return (\n    <>\n      <Typography variant=\"h4\" mt={2}>\n        HTTP Settings\n      </Typography>\n      <OptionsEditorRadios\n        isReadonly={isReadonly}\n        tabs={tabs}\n        defaultTab={defaultTab}\n        onModeChange={handleModeChange}\n      />\n    </>\n  );\n}\n"],"names":["Grid","IconButton","MenuItem","TextField","Typography","React","Fragment","useState","produce","Controller","MinusIcon","PlusIcon","OptionsEditorRadios","HTTPSettingsEditor","props","value","onChange","isReadonly","initialSpecDirect","initialSpecProxy","strDirect","strProxy","directUrl","proxy","Object","assign","buildNewHeaders","oldHeaders","oldName","newName","undefined","keys","newHeaders","reduce","acc","val","tabs","label","content","name","render","field","fieldState","fullWidth","error","helperText","message","InputProps","readOnly","InputLabelProps","shrink","e","draft","target","spec","url","sx","mb","variant","container","spacing","allowedEndpoints","length","map","endpointPattern","method","i","item","xs","itemIndex","select","disabled","onClick","filter","fontStyle","paddingTop","paddingLeft","headers","headerName","secret","directModeId","findIndex","tab","proxyModeId","defaultTab","previousSpecDirect","setPreviousSpecDirect","previousSpecProxy","setPreviousSpecProxy","handleModeChange","v","newValue","mt","onModeChange"],"mappings":"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"}