@perses-dev/plugin-system 0.50.0 → 0.51.0-beta.0

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 { Select, SelectProps, MenuItem, Stack, Divider, ListItemText, Chip, IconButton, Box } from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { ReactElement, useMemo } from 'react';\nimport { DatasourceSelectItemSelector, useListDatasourceSelectItems } from '../runtime';\n\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface DatasourceSelectProps extends Omit<SelectProps<string>, OmittedMuiProps> {\n  value: DatasourceSelector;\n  onChange: (next: DatasourceSelector) => 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  // Rebuild the group of the value if not provided\n  const defaultValue = useMemo(() => {\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  // Convert the datasource list into menu items with name/group?/value strings that the Select input can work with\n  const menuItems = useMemo(() => {\n    return (data ?? []).map((itemGroup) => ({\n      group: itemGroup.group,\n      editLink: itemGroup.editLink,\n      items: itemGroup.items.map((item) => ({\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  }, [data]);\n\n  // While loading available values, just use an empty string so MUI select doesn't warn about values out of range\n  const optionValue = isLoading ? '' : selectorToOptionValue(defaultValue);\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange: SelectProps<string>['onChange'] = (e) => {\n    const next = optionValueToSelector(e.target.value);\n    onChange(next);\n  };\n\n  // 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  // TODO:\n  //  - Does this need a loading indicator of some kind?\n  //  - The group's edit link is not clickable once selected.\n  //  - The group's edit link is disabled if datasource is overridden.\n  //    Ref: https://github.com/mui/material-ui/issues/36572\n  return (\n    <Select {...others} value={optionValue} onChange={handleChange}>\n      {menuItems.map((menuItemGroup) => [\n        <Divider key={`${menuItemGroup.group}-divider`} />,\n        ...menuItemGroup.items.map((menuItem) => (\n          <MenuItem key={menuItem.value} value={menuItem.value} disabled={menuItem.overridden || !menuItem.saved}>\n            <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\">\n              <ListItemText>\n                <DatasourceName\n                  name={menuItem.name}\n                  overridden={menuItem.overridden}\n                  overriding={menuItem.overriding}\n                />\n              </ListItemText>\n              {!menuItem.saved && <ListItemText>Save the dashboard to enable this datasource</ListItemText>}\n              <ListItemText style={{ textAlign: 'right' }}>\n                {menuItemGroup.group && menuItemGroup.group.length > 0 && (\n                  <Chip\n                    disabled={false}\n                    label={menuItemGroup.group}\n                    size=\"small\"\n                    onDelete={menuItemGroup.editLink ? fakeActionEvent : undefined}\n                    deleteIcon={\n                      menuItemGroup.editLink ? (\n                        <IconButton href={menuItemGroup.editLink} target=\"_blank\">\n                          <OpenInNewIcon fontSize=\"small\" />\n                        </IconButton>\n                      ) : undefined\n                    }\n                  />\n                )}\n              </ListItemText>\n            </Stack>\n          </MenuItem>\n        )),\n      ])}\n    </Select>\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): string {\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): DatasourceSelector {\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"],"names":["OpenInNewIcon","Select","MenuItem","Stack","Divider","ListItemText","Chip","IconButton","Box","useMemo","useListDatasourceSelectItems","DatasourceSelect","props","datasourcePluginKind","value","project","onChange","others","data","isLoading","defaultValue","group","flatMap","itemGroup","items","find","item","kind","selector","name","overridden","menuItems","map","editLink","overriding","saved","selectorToOptionValue","optionValue","handleChange","e","next","optionValueToSelector","target","fakeActionEvent","menuItemGroup","menuItem","disabled","direction","alignItems","justifyContent","width","DatasourceName","style","textAlign","length","label","size","onDelete","undefined","deleteIcon","href","fontSize","display","fontWeight","color","theme","palette","primary","main","OPTION_VALUE_DELIMITER","join","words","split","Error"],"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  Select,\n  SelectProps,\n  MenuItem,\n  Stack,\n  Divider,\n  ListItemText,\n  Chip,\n  IconButton,\n  Box,\n  OutlinedSelectProps,\n  BaseSelectProps,\n} from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { ReactElement, useMemo } from 'react';\nimport { DatasourceSelectItemSelector, useListDatasourceSelectItems } from '../runtime';\n\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface DatasourceSelectProps extends Omit<OutlinedSelectProps & BaseSelectProps<string>, OmittedMuiProps> {\n  value: DatasourceSelector;\n  onChange: (next: DatasourceSelector) => 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  // Rebuild the group of the value if not provided\n  const defaultValue = useMemo(() => {\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  // Convert the datasource list into menu items with name/group?/value strings that the Select input can work with\n  const menuItems = useMemo(() => {\n    return (data ?? []).map((itemGroup) => ({\n      group: itemGroup.group,\n      editLink: itemGroup.editLink,\n      items: itemGroup.items.map((item) => ({\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  }, [data]);\n\n  // While loading available values, just use an empty string so MUI select doesn't warn about values out of range\n  const optionValue = isLoading ? '' : selectorToOptionValue(defaultValue);\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange: SelectProps<string>['onChange'] = (e) => {\n    const next = optionValueToSelector(e.target.value);\n    onChange(next);\n  };\n\n  // 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  // TODO:\n  //  - Does this need a loading indicator of some kind?\n  //  - The group's edit link is not clickable once selected.\n  //  - The group's edit link is disabled if datasource is overridden.\n  //    Ref: https://github.com/mui/material-ui/issues/36572\n  return (\n    <Select {...others} value={optionValue} onChange={handleChange}>\n      {menuItems.map((menuItemGroup) => [\n        <Divider key={`${menuItemGroup.group}-divider`} />,\n        ...menuItemGroup.items.map((menuItem) => (\n          <MenuItem key={menuItem.value} value={menuItem.value} disabled={menuItem.overridden || !menuItem.saved}>\n            <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\">\n              <ListItemText>\n                <DatasourceName\n                  name={menuItem.name}\n                  overridden={menuItem.overridden}\n                  overriding={menuItem.overriding}\n                />\n              </ListItemText>\n              {!menuItem.saved && <ListItemText>Save the dashboard to enable this datasource</ListItemText>}\n              <ListItemText style={{ textAlign: 'right' }}>\n                {menuItemGroup.group && menuItemGroup.group.length > 0 && (\n                  <Chip\n                    disabled={false}\n                    label={menuItemGroup.group}\n                    size=\"small\"\n                    onDelete={menuItemGroup.editLink ? fakeActionEvent : undefined}\n                    deleteIcon={\n                      menuItemGroup.editLink ? (\n                        <IconButton href={menuItemGroup.editLink} target=\"_blank\">\n                          <OpenInNewIcon fontSize=\"small\" />\n                        </IconButton>\n                      ) : undefined\n                    }\n                  />\n                )}\n              </ListItemText>\n            </Stack>\n          </MenuItem>\n        )),\n      ])}\n    </Select>\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): string {\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): DatasourceSelector {\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"],"names":["OpenInNewIcon","Select","MenuItem","Stack","Divider","ListItemText","Chip","IconButton","Box","useMemo","useListDatasourceSelectItems","DatasourceSelect","props","datasourcePluginKind","value","project","onChange","others","data","isLoading","defaultValue","group","flatMap","itemGroup","items","find","item","kind","selector","name","overridden","menuItems","map","editLink","overriding","saved","selectorToOptionValue","optionValue","handleChange","e","next","optionValueToSelector","target","fakeActionEvent","menuItemGroup","menuItem","disabled","direction","alignItems","justifyContent","width","DatasourceName","style","textAlign","length","label","size","onDelete","undefined","deleteIcon","href","fontSize","display","fontWeight","color","theme","palette","primary","main","OPTION_VALUE_DELIMITER","join","words","split","Error"],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+import { HTTPDatasourceSpec } from '@perses-dev/core';
+import { ReactElement } from 'react';
+export interface HTTPSettingsEditor {
+    value: HTTPDatasourceSpec;
+    onChange: (next: HTTPDatasourceSpec) => void;
+    isReadonly?: boolean;
+    initialSpecDirect: HTTPDatasourceSpec;
+    initialSpecProxy: HTTPDatasourceSpec;
+}
+export declare function HTTPSettingsEditor(props: HTTPSettingsEditor): ReactElement;
+//# sourceMappingURL=HTTPSettingsEditor.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/HTTPSettingsEditor/HTTPSettingsEditor.js

@@ -0,0 +1,480 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Grid, IconButton, MenuItem, TextField, Typography } from '@mui/material';
+import React, { Fragment, useState } from 'react';
+import { produce } from 'immer';
+import { Controller } from 'react-hook-form';
+import MinusIcon from 'mdi-material-ui/Minus';
+import PlusIcon from 'mdi-material-ui/Plus';
+import { OptionsEditorRadios } from '../OptionsEditorRadios';
+export function HTTPSettingsEditor(props) {
+    const { value, onChange, isReadonly, initialSpecDirect, initialSpecProxy } = props;
+    const strDirect = 'Direct access';
+    const strProxy = 'Proxy';
+    // 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)=>{
+        if (oldHeaders === undefined) return oldHeaders;
+        const keys = Object.keys(oldHeaders);
+        const newHeaders = keys.reduce((acc, val)=>{
+            if (val === oldName) {
+                acc[newName] = oldHeaders[oldName] || '';
+            } else {
+                acc[val] = oldHeaders[val] || '';
+            }
+            return acc;
+        }, {});
+        return {
+            ...newHeaders
+        };
+    };
+    const tabs = [
+        {
+            label: strDirect,
+            content: /*#__PURE__*/ _jsx(Controller, {
+                name: "URL",
+                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
+                        ...field,
+                        fullWidth: true,
+                        label: "URL",
+                        value: value.directUrl || '',
+                        error: !!fieldState.error,
+                        helperText: fieldState.error?.message,
+                        InputProps: {
+                            readOnly: isReadonly
+                        },
+                        InputLabelProps: {
+                            shrink: isReadonly ? true : undefined
+                        },
+                        onChange: (e)=>{
+                            field.onChange(e);
+                            onChange(produce(value, (draft)=>{
+                                draft.directUrl = e.target.value;
+                            }));
+                        }
+                    })
+            })
+        },
+        {
+            label: strProxy,
+            content: /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Controller, {
+                        name: "URL",
+                        render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
+                                ...field,
+                                fullWidth: true,
+                                label: "URL",
+                                value: value.proxy?.spec.url || '',
+                                error: !!fieldState.error,
+                                helperText: fieldState.error?.message,
+                                InputProps: {
+                                    readOnly: isReadonly
+                                },
+                                InputLabelProps: {
+                                    shrink: isReadonly ? true : undefined
+                                },
+                                onChange: (e)=>{
+                                    field.onChange(e);
+                                    onChange(produce(value, (draft)=>{
+                                        if (draft.proxy !== undefined) {
+                                            draft.proxy.spec.url = e.target.value;
+                                        }
+                                    }));
+                                },
+                                sx: {
+                                    mb: 2
+                                }
+                            })
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h4",
+                        mb: 2,
+                        children: "Allowed endpoints"
+                    }),
+                    /*#__PURE__*/ _jsxs(Grid, {
+                        container: true,
+                        spacing: 2,
+                        mb: 2,
+                        children: [
+                            value.proxy?.spec.allowedEndpoints && value.proxy?.spec.allowedEndpoints.length !== 0 ? value.proxy.spec.allowedEndpoints.map(({ endpointPattern, method }, i)=>{
+                                return /*#__PURE__*/ _jsxs(Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Grid, {
+                                            item: true,
+                                            xs: 8,
+                                            children: /*#__PURE__*/ _jsx(Controller, {
+                                                name: `Endpoint pattern ${i}`,
+                                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
+                                                        ...field,
+                                                        fullWidth: true,
+                                                        label: "Endpoint pattern",
+                                                        value: endpointPattern,
+                                                        error: !!fieldState.error,
+                                                        helperText: fieldState.error?.message,
+                                                        InputProps: {
+                                                            readOnly: isReadonly
+                                                        },
+                                                        InputLabelProps: {
+                                                            shrink: isReadonly ? true : undefined
+                                                        },
+                                                        onChange: (e)=>{
+                                                            field.onChange(e);
+                                                            onChange(produce(value, (draft)=>{
+                                                                if (draft.proxy !== undefined) {
+                                                                    draft.proxy.spec.allowedEndpoints = draft.proxy.spec.allowedEndpoints?.map((item, itemIndex)=>{
+                                                                        if (i === itemIndex) {
+                                                                            return {
+                                                                                endpointPattern: e.target.value,
+                                                                                method: item.method
+                                                                            };
+                                                                        } else {
+                                                                            return item;
+                                                                        }
+                                                                    });
+                                                                }
+                                                            }));
+                                                        }
+                                                    })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(Grid, {
+                                            item: true,
+                                            xs: 3,
+                                            children: /*#__PURE__*/ _jsx(Controller, {
+                                                name: `Method ${i}`,
+                                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsxs(TextField, {
+                                                        ...field,
+                                                        select: true,
+                                                        fullWidth: true,
+                                                        label: "Method",
+                                                        value: method,
+                                                        error: !!fieldState.error,
+                                                        helperText: fieldState.error?.message,
+                                                        InputProps: {
+                                                            readOnly: isReadonly
+                                                        },
+                                                        InputLabelProps: {
+                                                            shrink: isReadonly ? true : undefined
+                                                        },
+                                                        onChange: (e)=>{
+                                                            field.onChange(e);
+                                                            onChange(produce(value, (draft)=>{
+                                                                if (draft.proxy !== undefined) {
+                                                                    draft.proxy.spec.allowedEndpoints = draft.proxy.spec.allowedEndpoints?.map((item, itemIndex)=>{
+                                                                        if (i === itemIndex) {
+                                                                            return {
+                                                                                endpointPattern: item.endpointPattern,
+                                                                                method: e.target.value
+                                                                            };
+                                                                        } else {
+                                                                            return item;
+                                                                        }
+                                                                    });
+                                                                }
+                                                            }));
+                                                        },
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(MenuItem, {
+                                                                value: "GET",
+                                                                children: "GET"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(MenuItem, {
+                                                                value: "POST",
+                                                                children: "POST"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(MenuItem, {
+                                                                value: "PUT",
+                                                                children: "PUT"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(MenuItem, {
+                                                                value: "PATCH",
+                                                                children: "PATCH"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(MenuItem, {
+                                                                value: "DELETE",
+                                                                children: "DELETE"
+                                                            })
+                                                        ]
+                                                    })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(Grid, {
+                                            item: true,
+                                            xs: 1,
+                                            children: /*#__PURE__*/ _jsx(Controller, {
+                                                name: `Remove Endpoint ${i}`,
+                                                render: ({ field })=>/*#__PURE__*/ _jsx(IconButton, {
+                                                        ...field,
+                                                        disabled: isReadonly,
+                                                        // Remove the given allowed endpoint from the list
+                                                        onClick: (e)=>{
+                                                            field.onChange(e);
+                                                            onChange(produce(value, (draft)=>{
+                                                                if (draft.proxy !== undefined) {
+                                                                    draft.proxy.spec.allowedEndpoints = [
+                                                                        ...draft.proxy.spec.allowedEndpoints?.filter((item, itemIndex)=>{
+                                                                            return itemIndex !== i;
+                                                                        }) || []
+                                                                    ];
+                                                                }
+                                                            }));
+                                                        },
+                                                        children: /*#__PURE__*/ _jsx(MinusIcon, {})
+                                                    })
+                                            })
+                                        })
+                                    ]
+                                }, i);
+                            }) : /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 4,
+                                children: /*#__PURE__*/ _jsx(Typography, {
+                                    sx: {
+                                        fontStyle: 'italic'
+                                    },
+                                    children: "None"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 12,
+                                sx: {
+                                    paddingTop: '0px !important',
+                                    paddingLeft: '5px !important'
+                                },
+                                children: /*#__PURE__*/ _jsx(IconButton, {
+                                    disabled: isReadonly,
+                                    // Add a new (empty) allowed endpoint to the list
+                                    onClick: ()=>onChange(produce(value, (draft)=>{
+                                            if (draft.proxy !== undefined) {
+                                                draft.proxy.spec.allowedEndpoints = [
+                                                    ...draft.proxy.spec.allowedEndpoints ?? [],
+                                                    {
+                                                        endpointPattern: '',
+                                                        method: ''
+                                                    }
+                                                ];
+                                            }
+                                        })),
+                                    children: /*#__PURE__*/ _jsx(PlusIcon, {})
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h4",
+                        mb: 2,
+                        children: "Request Headers"
+                    }),
+                    /*#__PURE__*/ _jsxs(Grid, {
+                        container: true,
+                        spacing: 2,
+                        mb: 2,
+                        children: [
+                            value.proxy?.spec.headers && Object.keys(value.proxy.spec.headers).map((headerName, i)=>{
+                                return /*#__PURE__*/ _jsxs(Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Grid, {
+                                            item: true,
+                                            xs: 4,
+                                            children: /*#__PURE__*/ _jsx(Controller, {
+                                                name: `Header name ${i}`,
+                                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
+                                                        ...field,
+                                                        fullWidth: true,
+                                                        label: "Header name",
+                                                        value: headerName,
+                                                        error: !!fieldState.error,
+                                                        helperText: fieldState.error?.message,
+                                                        InputProps: {
+                                                            readOnly: isReadonly
+                                                        },
+                                                        InputLabelProps: {
+                                                            shrink: isReadonly ? true : undefined
+                                                        },
+                                                        onChange: (e)=>{
+                                                            field.onChange(e);
+                                                            onChange(produce(value, (draft)=>{
+                                                                if (draft.proxy !== undefined) {
+                                                                    draft.proxy.spec.headers = buildNewHeaders(draft.proxy.spec.headers, headerName, e.target.value);
+                                                                }
+                                                            }));
+                                                        }
+                                                    })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(Grid, {
+                                            item: true,
+                                            xs: 7,
+                                            children: /*#__PURE__*/ _jsx(Controller, {
+                                                name: `Header value ${i}`,
+                                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
+                                                        ...field,
+                                                        fullWidth: true,
+                                                        label: "Header value",
+                                                        value: value.proxy?.spec.headers?.[headerName],
+                                                        error: !!fieldState.error,
+                                                        helperText: fieldState.error?.message,
+                                                        InputProps: {
+                                                            readOnly: isReadonly
+                                                        },
+                                                        InputLabelProps: {
+                                                            shrink: isReadonly ? true : undefined
+                                                        },
+                                                        onChange: (e)=>{
+                                                            field.onChange(e);
+                                                            onChange(produce(value, (draft)=>{
+                                                                if (draft.proxy !== undefined) {
+                                                                    draft.proxy.spec.headers = {
+                                                                        ...draft.proxy.spec.headers,
+                                                                        [headerName]: e.target.value
+                                                                    };
+                                                                }
+                                                            }));
+                                                        }
+                                                    })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(Grid, {
+                                            item: true,
+                                            xs: 1,
+                                            children: /*#__PURE__*/ _jsx(Controller, {
+                                                name: `Remove Header ${i}`,
+                                                render: ({ field })=>/*#__PURE__*/ _jsx(IconButton, {
+                                                        ...field,
+                                                        disabled: isReadonly,
+                                                        // Remove the given header from the list
+                                                        onClick: (e)=>{
+                                                            field.onChange(e);
+                                                            const newHeaders = {
+                                                                ...value.proxy?.spec.headers
+                                                            };
+                                                            delete newHeaders[headerName];
+                                                            onChange(produce(value, (draft)=>{
+                                                                if (draft.proxy !== undefined) {
+                                                                    draft.proxy.spec.headers = newHeaders;
+                                                                }
+                                                            }));
+                                                        },
+                                                        children: /*#__PURE__*/ _jsx(MinusIcon, {})
+                                                    })
+                                            })
+                                        })
+                                    ]
+                                }, i);
+                            }),
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 12,
+                                sx: {
+                                    paddingTop: '0px !important',
+                                    paddingLeft: '5px !important'
+                                },
+                                children: /*#__PURE__*/ _jsx(IconButton, {
+                                    disabled: isReadonly,
+                                    // Add a new (empty) header to the list
+                                    onClick: ()=>onChange(produce(value, (draft)=>{
+                                            if (draft.proxy !== undefined) {
+                                                draft.proxy.spec.headers = {
+                                                    ...draft.proxy.spec.headers,
+                                                    '': ''
+                                                };
+                                            }
+                                        })),
+                                    children: /*#__PURE__*/ _jsx(PlusIcon, {})
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Controller, {
+                        name: "Secret",
+                        render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
+                                ...field,
+                                fullWidth: true,
+                                label: "Secret",
+                                value: value.proxy?.spec.secret || '',
+                                error: !!fieldState.error,
+                                helperText: fieldState.error?.message,
+                                InputProps: {
+                                    readOnly: isReadonly
+                                },
+                                InputLabelProps: {
+                                    shrink: isReadonly ? true : undefined
+                                },
+                                onChange: (e)=>{
+                                    field.onChange(e);
+                                    onChange(produce(value, (draft)=>{
+                                        if (draft.proxy !== undefined) {
+                                            draft.proxy.spec.secret = e.target.value;
+                                        }
+                                    }));
+                                }
+                            })
+                    })
+                ]
+            })
+        }
+    ];
+    // Use of findIndex instead of providing hardcoded values to avoid desynchronisatio or
+    // 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.
+    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.
+    const [previousSpecDirect, setPreviousSpecDirect] = useState(initialSpecDirect);
+    const [previousSpecProxy, setPreviousSpecProxy] = useState(initialSpecProxy);
+    // When changing mode, remove previous mode's config + append default values for the new mode.
+    const handleModeChange = (v)=>{
+        if (tabs[v]?.label === strDirect) {
+            setPreviousSpecProxy(value);
+            // Copy all settings (for example, scrapeInterval), except 'proxy'
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { proxy, ...newValue } = value;
+            onChange({
+                ...newValue,
+                directUrl: previousSpecDirect.directUrl
+            });
+        } else if (tabs[v]?.label === strProxy) {
+            setPreviousSpecDirect(value);
+            // Copy all settings (for example, scrapeInterval), except 'directUrl'
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { directUrl, ...newValue } = value;
+            onChange({
+                ...newValue,
+                proxy: previousSpecProxy.proxy
+            });
+        }
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "h4",
+                mt: 2,
+                children: "HTTP Settings"
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorRadios, {
+                isReadonly: isReadonly,
+                tabs: tabs,
+                defaultTab: defaultTab,
+                onModeChange: handleModeChange
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=HTTPSettingsEditor.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,2 @@
+export * from './HTTPSettingsEditor';
+//# sourceMappingURL=index.d.ts.map