@perses-dev/plugin-system 0.55.0-beta.8 → 0.55.0-rc.0

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

@@ -1 +1 @@
-{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceSelect/DatasourceSelect.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,KAAK,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEzE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAEV,yBAAyB,EACzB,4BAA4B,EAC5B,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAQvB,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,CAkH3E;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"}
+{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceSelect/DatasourceSelect.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,KAAK,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEzE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAEV,yBAAyB,EACzB,4BAA4B,EAC5B,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAQvB,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/DatasourceSelect.js

@@ -95,7 +95,6 @@ const emptyDatasourceOption = {
     // We use a fake action event when we click on the action of the chip (hijack the "delete" feature).
     // This is because the href link action is on the `deleteIcon` property already, but the `onDelete` property
     // controls its visibility.
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     const fakeActionEvent = ()=>{};
     return /*#__PURE__*/ _jsx(Autocomplete, {
         readOnly: readOnly,

package/dist/components/DatasourceSelect/DatasourceSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DatasourceSelect/DatasourceSelect.tsx"],"sourcesContent":["// Copyright 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 type { OutlinedSelectProps, BaseSelectProps } from '@mui/material';\nimport { Stack, ListItemText, Chip, IconButton, Box, Autocomplete, TextField } from '@mui/material';\nimport type { DatasourceSelector, VariableName } from '@perses-dev/spec';\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport type { ReactElement } from 'react';\nimport { useMemo } from 'react';\n\nimport type {\n  DatasourceSelectItem,\n  DatasourceSelectItemGroup,\n  DatasourceSelectItemSelector,\n  VariableStateMap,\n} from '../../runtime';\nimport { useListDatasourceSelectItems, useVariableValues } 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, readOnly, 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      readOnly={readOnly}\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":["Stack","ListItemText","Chip","IconButton","Box","Autocomplete","TextField","OpenInNewIcon","useMemo","useListDatasourceSelectItems","useVariableValues","parseVariables","DATASOURCE_VARIABLE_VALUE_PREFIX","VARIABLE_IDENTIFIER","emptyDatasourceOption","name","value","DatasourceSelect","props","datasourcePluginKind","project","readOnly","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/DatasourceSelect.tsx"],"sourcesContent":["// Copyright 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 type { OutlinedSelectProps, BaseSelectProps } from '@mui/material';\nimport { Stack, ListItemText, Chip, IconButton, Box, Autocomplete, TextField } from '@mui/material';\nimport type { DatasourceSelector, VariableName } from '@perses-dev/spec';\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport type { ReactElement } from 'react';\nimport { useMemo } from 'react';\n\nimport type {\n  DatasourceSelectItem,\n  DatasourceSelectItemGroup,\n  DatasourceSelectItemSelector,\n  VariableStateMap,\n} from '../../runtime';\nimport { useListDatasourceSelectItems, useVariableValues } 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, readOnly, 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  const fakeActionEvent = (): void => {};\n\n  return (\n    <Autocomplete<DataSourceOption>\n      readOnly={readOnly}\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":["Stack","ListItemText","Chip","IconButton","Box","Autocomplete","TextField","OpenInNewIcon","useMemo","useListDatasourceSelectItems","useVariableValues","parseVariables","DATASOURCE_VARIABLE_VALUE_PREFIX","VARIABLE_IDENTIFIER","emptyDatasourceOption","name","value","DatasourceSelect","props","datasourcePluginKind","project","readOnly","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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"DatasourceTestConnectionButton.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,KAAK,mCAAmC,GAAG;IACzC,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACrC,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEjC,eAAO,MAAM,8BAA8B,iDAIxC,mCAAmC,KAAG,YAqBxC,CAAC"}
+{"version":3,"file":"DatasourceTestConnectionButton.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,KAAK,mCAAmC,GAAG;IACzC,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACrC,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEjC,eAAO,MAAM,8BAA8B,iDAIxC,mCAAmC,KAAG,YAoBxC,CAAC"}

package/dist/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.js

@@ -19,14 +19,9 @@ export const DatasourceTestConnectionButton = ({ testConnection, disabled, ...bu
     const [isTesting, setIsTesting] = useState(false);
     const handleClick = useCallback(async ()=>{
         setIsTesting(true);
-        try {
-            await testConnection();
-            successSnackbar('Datasource is healthy');
-        } catch (e) {
+        await Promise.resolve().then(()=>testConnection()).then(()=>successSnackbar('Datasource is healthy')).catch((e)=>{
             exceptionSnackbar(e instanceof Error ? e : new Error('Datasource is not healthy'));
-        } finally{
-            setIsTesting(false);
-        }
+        }).finally(()=>setIsTesting(false));
     }, [
         testConnection,
         successSnackbar,

package/dist/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.tsx"],"sourcesContent":["// Copyright 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 type { ButtonProps } from '@mui/material';\nimport { Button } from '@mui/material';\nimport { useSnackbar } from '@perses-dev/components';\nimport type { ReactElement } from 'react';\nimport { useCallback, useState } from 'react';\n\ntype DatasourceTestConnectionButtonProps = {\n  testConnection: () => Promise<void>;\n} & Omit<ButtonProps, 'onClick'>;\n\nexport const DatasourceTestConnectionButton = ({\n  testConnection,\n  disabled,\n  ...buttonProps\n}: DatasourceTestConnectionButtonProps): ReactElement => {\n  const { successSnackbar, exceptionSnackbar } = useSnackbar();\n  const [isTesting, setIsTesting] = useState(false);\n\n  const handleClick = useCallback(async (): Promise<void> => {\n    setIsTesting(true);\n    try {\n      await testConnection();\n      successSnackbar('Datasource is healthy');\n    } catch (e) {\n      exceptionSnackbar(e instanceof Error ? e : new Error('Datasource is not healthy'));\n    } finally {\n      setIsTesting(false);\n    }\n  }, [testConnection, successSnackbar, exceptionSnackbar]);\n\n  return (\n    <Button onClick={handleClick} color=\"info\" variant=\"outlined\" disabled={disabled || isTesting} {...buttonProps}>\n      Test Connection\n    </Button>\n  );\n};\n"],"names":["Button","useSnackbar","useCallback","useState","DatasourceTestConnectionButton","testConnection","disabled","buttonProps","successSnackbar","exceptionSnackbar","isTesting","setIsTesting","handleClick","e","Error","onClick","color","variant"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,MAAM,QAAQ,gBAAgB;AACvC,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAM9C,OAAO,MAAMC,iCAAiC,CAAC,EAC7CC,cAAc,EACdC,QAAQ,EACR,GAAGC,aACiC;IACpC,MAAM,EAAEC,eAAe,EAAEC,iBAAiB,EAAE,GAAGR;IAC/C,MAAM,CAACS,WAAWC,aAAa,GAAGR,SAAS;IAE3C,MAAMS,cAAcV,YAAY;QAC9BS,aAAa;QACb,IAAI;YACF,MAAMN;YACNG,gBAAgB;QAClB,EAAE,OAAOK,GAAG;YACVJ,kBAAkBI,aAAaC,QAAQD,IAAI,IAAIC,MAAM;QACvD,SAAU;YACRH,aAAa;QACf;IACF,GAAG;QAACN;QAAgBG;QAAiBC;KAAkB;IAEvD,qBACE,KAACT;QAAOe,SAASH;QAAaI,OAAM;QAAOC,SAAQ;QAAWX,UAAUA,YAAYI;QAAY,GAAGH,WAAW;kBAAE;;AAIpH,EAAE"}
+{"version":3,"sources":["../../../src/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.tsx"],"sourcesContent":["// Copyright 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 type { ButtonProps } from '@mui/material';\nimport { Button } from '@mui/material';\nimport { useSnackbar } from '@perses-dev/components';\nimport type { ReactElement } from 'react';\nimport { useCallback, useState } from 'react';\n\ntype DatasourceTestConnectionButtonProps = {\n  testConnection: () => Promise<void>;\n} & Omit<ButtonProps, 'onClick'>;\n\nexport const DatasourceTestConnectionButton = ({\n  testConnection,\n  disabled,\n  ...buttonProps\n}: DatasourceTestConnectionButtonProps): ReactElement => {\n  const { successSnackbar, exceptionSnackbar } = useSnackbar();\n  const [isTesting, setIsTesting] = useState(false);\n\n  const handleClick = useCallback(async (): Promise<void> => {\n    setIsTesting(true);\n    await Promise.resolve()\n      .then(() => testConnection())\n      .then(() => successSnackbar('Datasource is healthy'))\n      .catch((e: unknown) => {\n        exceptionSnackbar(e instanceof Error ? e : new Error('Datasource is not healthy'));\n      })\n      .finally(() => setIsTesting(false));\n  }, [testConnection, successSnackbar, exceptionSnackbar]);\n\n  return (\n    <Button onClick={handleClick} color=\"info\" variant=\"outlined\" disabled={disabled || isTesting} {...buttonProps}>\n      Test Connection\n    </Button>\n  );\n};\n"],"names":["Button","useSnackbar","useCallback","useState","DatasourceTestConnectionButton","testConnection","disabled","buttonProps","successSnackbar","exceptionSnackbar","isTesting","setIsTesting","handleClick","Promise","resolve","then","catch","e","Error","finally","onClick","color","variant"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,MAAM,QAAQ,gBAAgB;AACvC,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAM9C,OAAO,MAAMC,iCAAiC,CAAC,EAC7CC,cAAc,EACdC,QAAQ,EACR,GAAGC,aACiC;IACpC,MAAM,EAAEC,eAAe,EAAEC,iBAAiB,EAAE,GAAGR;IAC/C,MAAM,CAACS,WAAWC,aAAa,GAAGR,SAAS;IAE3C,MAAMS,cAAcV,YAAY;QAC9BS,aAAa;QACb,MAAME,QAAQC,OAAO,GAClBC,IAAI,CAAC,IAAMV,kBACXU,IAAI,CAAC,IAAMP,gBAAgB,0BAC3BQ,KAAK,CAAC,CAACC;YACNR,kBAAkBQ,aAAaC,QAAQD,IAAI,IAAIC,MAAM;QACvD,GACCC,OAAO,CAAC,IAAMR,aAAa;IAChC,GAAG;QAACN;QAAgBG;QAAiBC;KAAkB;IAEvD,qBACE,KAACT;QAAOoB,SAASR;QAAaS,OAAM;QAAOC,SAAQ;QAAWhB,UAAUA,YAAYI;QAAY,GAAGH,WAAW;kBAAE;;AAIpH,EAAE"}

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

@@ -0,0 +1,11 @@
+import type { HTTPProxySpec } from '@perses-dev/spec';
+import type { ReactElement } from 'react';
+interface HTTPProxyOAuthPassthroughEditorProps {
+    value: HTTPProxySpec;
+    onChange: (next: HTTPProxySpec) => void;
+    isReadonly?: boolean;
+}
+/** Toggles forwarding of the logged-in user's OAuth/OIDC access token to the datasource. Disabling it unsets the field. */
+export declare function HTTPProxyOAuthPassthroughEditor({ value, onChange, isReadonly, }: HTTPProxyOAuthPassthroughEditorProps): ReactElement;
+export {};
+//# sourceMappingURL=HTTPProxyOAuthPassthroughEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HTTPProxyOAuthPassthroughEditor.d.ts","sourceRoot":"","sources":["../../../src/components/HTTPSettingsEditor/HTTPProxyOAuthPassthroughEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,UAAU,oCAAoC;IAC5C,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,2HAA2H;AAC3H,wBAAgB,+BAA+B,CAAC,EAC9C,KAAK,EACL,QAAQ,EACR,UAAU,GACX,EAAE,oCAAoC,GAAG,YAAY,CA4BrD"}

package/dist/components/HTTPSettingsEditor/HTTPProxyOAuthPassthroughEditor.js

@@ -0,0 +1,62 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControlLabel, Stack, Switch, Typography } from "@mui/material";
+import { useCallback, useId, useMemo } from "react";
+/** Toggles forwarding of the logged-in user's OAuth/OIDC access token to the datasource. Disabling it unsets the field. */ export function HTTPProxyOAuthPassthroughEditor({ value, onChange, isReadonly }) {
+    const descriptionId = useId();
+    const checked = value.oauthPassthrough ?? false;
+    const handleChange = useCallback((_, nextChecked)=>{
+        // The readOnly attribute does not prevent a checkbox from being toggled.
+        if (isReadonly) return;
+        onChange({
+            ...value,
+            oauthPassthrough: nextChecked ? true : undefined
+        });
+    }, [
+        isReadonly,
+        value,
+        onChange
+    ]);
+    const inputProps = useMemo(()=>({
+            'aria-describedby': descriptionId
+        }), [
+        descriptionId
+    ]);
+    const control = useMemo(()=>/*#__PURE__*/ _jsx(Switch, {
+            checked: checked,
+            readOnly: isReadonly,
+            inputProps: inputProps,
+            onChange: handleChange
+        }), [
+        checked,
+        isReadonly,
+        inputProps,
+        handleChange
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        children: [
+            /*#__PURE__*/ _jsx(FormControlLabel, {
+                label: "Forward OAuth identity",
+                control: control
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                id: descriptionId,
+                variant: "caption",
+                children: "Forward the OAuth/OIDC access token of the logged-in user to the datasource. Users must be signed in through an OAuth or OIDC provider. When enabled, the authentication settings of the secret are ignored, but its TLS settings still apply."
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=HTTPProxyOAuthPassthroughEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/HTTPSettingsEditor/HTTPProxyOAuthPassthroughEditor.tsx"],"sourcesContent":["// Copyright 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 type { SwitchProps } from '@mui/material';\nimport { FormControlLabel, Stack, Switch, Typography } from '@mui/material';\nimport type { HTTPProxySpec } from '@perses-dev/spec';\nimport type { ReactElement } from 'react';\nimport { useCallback, useId, useMemo } from 'react';\n\ninterface HTTPProxyOAuthPassthroughEditorProps {\n  value: HTTPProxySpec;\n  onChange: (next: HTTPProxySpec) => void;\n  isReadonly?: boolean;\n}\n\n/** Toggles forwarding of the logged-in user's OAuth/OIDC access token to the datasource. Disabling it unsets the field. */\nexport function HTTPProxyOAuthPassthroughEditor({\n  value,\n  onChange,\n  isReadonly,\n}: HTTPProxyOAuthPassthroughEditorProps): ReactElement {\n  const descriptionId = useId();\n  const checked = value.oauthPassthrough ?? false;\n\n  const handleChange = useCallback<NonNullable<SwitchProps['onChange']>>(\n    (_, nextChecked) => {\n      // The readOnly attribute does not prevent a checkbox from being toggled.\n      if (isReadonly) return;\n      onChange({ ...value, oauthPassthrough: nextChecked ? true : undefined });\n    },\n    [isReadonly, value, onChange],\n  );\n  const inputProps = useMemo(() => ({ 'aria-describedby': descriptionId }), [descriptionId]);\n  const control = useMemo(\n    () => <Switch checked={checked} readOnly={isReadonly} inputProps={inputProps} onChange={handleChange} />,\n    [checked, isReadonly, inputProps, handleChange],\n  );\n\n  return (\n    <Stack>\n      <FormControlLabel label=\"Forward OAuth identity\" control={control} />\n      <Typography id={descriptionId} variant=\"caption\">\n        Forward the OAuth/OIDC access token of the logged-in user to the datasource. Users must be signed in through an\n        OAuth or OIDC provider. When enabled, the authentication settings of the secret are ignored, but its TLS\n        settings still apply.\n      </Typography>\n    </Stack>\n  );\n}\n"],"names":["FormControlLabel","Stack","Switch","Typography","useCallback","useId","useMemo","HTTPProxyOAuthPassthroughEditor","value","onChange","isReadonly","descriptionId","checked","oauthPassthrough","handleChange","_","nextChecked","undefined","inputProps","control","readOnly","label","id","variant"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,gBAAgB,EAAEC,KAAK,EAAEC,MAAM,EAAEC,UAAU,QAAQ,gBAAgB;AAG5E,SAASC,WAAW,EAAEC,KAAK,EAAEC,OAAO,QAAQ,QAAQ;AAQpD,yHAAyH,GACzH,OAAO,SAASC,gCAAgC,EAC9CC,KAAK,EACLC,QAAQ,EACRC,UAAU,EAC2B;IACrC,MAAMC,gBAAgBN;IACtB,MAAMO,UAAUJ,MAAMK,gBAAgB,IAAI;IAE1C,MAAMC,eAAeV,YACnB,CAACW,GAAGC;QACF,yEAAyE;QACzE,IAAIN,YAAY;QAChBD,SAAS;YAAE,GAAGD,KAAK;YAAEK,kBAAkBG,cAAc,OAAOC;QAAU;IACxE,GACA;QAACP;QAAYF;QAAOC;KAAS;IAE/B,MAAMS,aAAaZ,QAAQ,IAAO,CAAA;YAAE,oBAAoBK;QAAc,CAAA,GAAI;QAACA;KAAc;IACzF,MAAMQ,UAAUb,QACd,kBAAM,KAACJ;YAAOU,SAASA;YAASQ,UAAUV;YAAYQ,YAAYA;YAAYT,UAAUK;YACxF;QAACF;QAASF;QAAYQ;QAAYJ;KAAa;IAGjD,qBACE,MAACb;;0BACC,KAACD;gBAAiBqB,OAAM;gBAAyBF,SAASA;;0BAC1D,KAAChB;gBAAWmB,IAAIX;gBAAeY,SAAQ;0BAAU;;;;AAOvD"}

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

@@ -0,0 +1,11 @@
+import type { HTTPProxySpec } from '@perses-dev/spec';
+import type { ReactElement } from 'react';
+interface HTTPProxyTimeoutEditorProps {
+    value: HTTPProxySpec;
+    onChange: (next: HTTPProxySpec) => void;
+    isReadonly?: boolean;
+}
+/** Edits the optional connection timeout of an HTTP proxy. An empty value unsets the timeout. */
+export declare function HTTPProxyTimeoutEditor({ value, onChange, isReadonly }: HTTPProxyTimeoutEditorProps): ReactElement;
+export {};
+//# sourceMappingURL=HTTPProxyTimeoutEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HTTPProxyTimeoutEditor.d.ts","sourceRoot":"","sources":["../../../src/components/HTTPSettingsEditor/HTTPProxyTimeoutEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAkB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtE,OAAO,KAAK,EAAe,YAAY,EAAE,MAAM,OAAO,CAAC;AAKvD,UAAU,2BAA2B;IACnC,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iGAAiG;AACjG,wBAAgB,sBAAsB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,2BAA2B,GAAG,YAAY,CAiCjH"}

package/dist/components/HTTPSettingsEditor/HTTPProxyTimeoutEditor.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright 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 { TextField } from "@mui/material";
+import { isDurationString } from "@perses-dev/spec";
+import { useCallback, useMemo } from "react";
+const timeoutFieldSx = {
+    mb: 2
+};
+/** Edits the optional connection timeout of an HTTP proxy. An empty value unsets the timeout. */ export function HTTPProxyTimeoutEditor({ value, onChange, isReadonly }) {
+    const timeout = value.timeout ?? '';
+    // TODO this thing should be handled by a form schema.
+    const isInvalid = timeout !== '' && !isDurationString(timeout);
+    const handleChange = useCallback((e)=>{
+        const nextTimeout = e.target.value;
+        onChange({
+            ...value,
+            timeout: nextTimeout === '' ? undefined : nextTimeout
+        });
+    }, [
+        value,
+        onChange
+    ]);
+    const inputProps = useMemo(()=>({
+            readOnly: isReadonly
+        }), [
+        isReadonly
+    ]);
+    const inputLabelProps = useMemo(()=>({
+            shrink: isReadonly ? true : undefined
+        }), [
+        isReadonly
+    ]);
+    return /*#__PURE__*/ _jsx(TextField, {
+        fullWidth: true,
+        label: "Timeout",
+        placeholder: "e.g. 30s, 1m30s",
+        value: timeout,
+        error: isInvalid,
+        helperText: isInvalid ? 'Must be a valid duration string (e.g. 30s, 1m30s)' : 'Maximum time allowed to establish a connection to the datasource. Leave empty or set to 0s to use the Perses server default.',
+        InputProps: inputProps,
+        InputLabelProps: inputLabelProps,
+        onChange: handleChange,
+        sx: timeoutFieldSx
+    });
+}
+
+//# sourceMappingURL=HTTPProxyTimeoutEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/HTTPSettingsEditor/HTTPProxyTimeoutEditor.tsx"],"sourcesContent":["// Copyright 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 { TextField } from '@mui/material';\nimport type { DurationString, HTTPProxySpec } from '@perses-dev/spec';\nimport { isDurationString } from '@perses-dev/spec';\nimport type { ChangeEvent, ReactElement } from 'react';\nimport { useCallback, useMemo } from 'react';\n\nconst timeoutFieldSx = { mb: 2 };\n\ninterface HTTPProxyTimeoutEditorProps {\n  value: HTTPProxySpec;\n  onChange: (next: HTTPProxySpec) => void;\n  isReadonly?: boolean;\n}\n\n/** Edits the optional connection timeout of an HTTP proxy. An empty value unsets the timeout. */\nexport function HTTPProxyTimeoutEditor({ value, onChange, isReadonly }: HTTPProxyTimeoutEditorProps): ReactElement {\n  const timeout = value.timeout ?? '';\n  // TODO this thing should be handled by a form schema.\n  const isInvalid = timeout !== '' && !isDurationString(timeout);\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n      const nextTimeout = e.target.value;\n      onChange({ ...value, timeout: nextTimeout === '' ? undefined : (nextTimeout as DurationString) });\n    },\n    [value, onChange],\n  );\n  const inputProps = useMemo(() => ({ readOnly: isReadonly }), [isReadonly]);\n  const inputLabelProps = useMemo(() => ({ shrink: isReadonly ? true : undefined }), [isReadonly]);\n\n  return (\n    <TextField\n      fullWidth\n      label=\"Timeout\"\n      placeholder=\"e.g. 30s, 1m30s\"\n      value={timeout}\n      error={isInvalid}\n      helperText={\n        isInvalid\n          ? 'Must be a valid duration string (e.g. 30s, 1m30s)'\n          : 'Maximum time allowed to establish a connection to the datasource. Leave empty or set to 0s to use the Perses server default.'\n      }\n      InputProps={inputProps}\n      InputLabelProps={inputLabelProps}\n      onChange={handleChange}\n      sx={timeoutFieldSx}\n    />\n  );\n}\n"],"names":["TextField","isDurationString","useCallback","useMemo","timeoutFieldSx","mb","HTTPProxyTimeoutEditor","value","onChange","isReadonly","timeout","isInvalid","handleChange","e","nextTimeout","target","undefined","inputProps","readOnly","inputLabelProps","shrink","fullWidth","label","placeholder","error","helperText","InputProps","InputLabelProps","sx"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,SAAS,QAAQ,gBAAgB;AAE1C,SAASC,gBAAgB,QAAQ,mBAAmB;AAEpD,SAASC,WAAW,EAAEC,OAAO,QAAQ,QAAQ;AAE7C,MAAMC,iBAAiB;IAAEC,IAAI;AAAE;AAQ/B,+FAA+F,GAC/F,OAAO,SAASC,uBAAuB,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,UAAU,EAA+B;IACjG,MAAMC,UAAUH,MAAMG,OAAO,IAAI;IACjC,sDAAsD;IACtD,MAAMC,YAAYD,YAAY,MAAM,CAACT,iBAAiBS;IAEtD,MAAME,eAAeV,YACnB,CAACW;QACC,MAAMC,cAAcD,EAAEE,MAAM,CAACR,KAAK;QAClCC,SAAS;YAAE,GAAGD,KAAK;YAAEG,SAASI,gBAAgB,KAAKE,YAAaF;QAA+B;IACjG,GACA;QAACP;QAAOC;KAAS;IAEnB,MAAMS,aAAad,QAAQ,IAAO,CAAA;YAAEe,UAAUT;QAAW,CAAA,GAAI;QAACA;KAAW;IACzE,MAAMU,kBAAkBhB,QAAQ,IAAO,CAAA;YAAEiB,QAAQX,aAAa,OAAOO;QAAU,CAAA,GAAI;QAACP;KAAW;IAE/F,qBACE,KAACT;QACCqB,SAAS;QACTC,OAAM;QACNC,aAAY;QACZhB,OAAOG;QACPc,OAAOb;QACPc,YACEd,YACI,sDACA;QAENe,YAAYT;QACZU,iBAAiBR;QACjBX,UAAUI;QACVgB,IAAIxB;;AAGV"}

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

@@ -8,6 +8,6 @@ export interface HTTPSettingsEditor {
     initialSpecProxy: HTTPDatasourceSpec;
     testConnection?: () => Promise<void>;
 }
-/** Edits direct URLs and proxy settings, including mutually exclusive allow/drop request header lists. */
+/** Edits direct URLs and proxy settings, including the connection timeout, mutually exclusive allow/drop request header lists, and OAuth identity forwarding. */
 export declare function HTTPSettingsEditor(props: HTTPSettingsEditor): ReactElement;
 //# sourceMappingURL=HTTPSettingsEditor.d.ts.map

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":"AAeA,OAAO,KAAK,EAAE,kBAAkB,EAAiB,MAAM,kBAAkB,CAAC;AAI1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAoB1C,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;IACrC,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACtC;AAED,0GAA0G;AAC1G,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAwe1E"}
+{"version":3,"file":"HTTPSettingsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,kBAAkB,EAAiB,MAAM,kBAAkB,CAAC;AAI1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAsB1C,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;IACrC,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACtC;AAED,iKAAiK;AACjK,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAkf1E"}

package/dist/components/HTTPSettingsEditor/HTTPSettingsEditor.js

@@ -15,21 +15,39 @@ import { Box, Grid, IconButton, MenuItem, Stack, TextField, Typography } from "@
 import { produce } from "immer";
 import MinusIcon from "mdi-material-ui/Minus";
 import PlusIcon from "mdi-material-ui/Plus";
-import React, { Fragment, useCallback, useState } from "react";
-import { Controller, useFieldArray, useForm } from "react-hook-form";
+import React, { Fragment, useCallback, useEffect, useMemo, useState } from "react";
+import { Controller, useFieldArray, useForm, useWatch } from "react-hook-form";
 import { z } from "zod";
 import { DatasourceTestConnectionButton } from "../DatasourceTestConnectionButton/index.js";
 import { OptionsEditorRadios } from "../OptionsEditorRadios/index.js";
 import { HTTPHeaderPolicyEditor } from "./HTTPHeaderPolicyEditor.js";
+import { HTTPProxyOAuthPassthroughEditor } from "./HTTPProxyOAuthPassthroughEditor.js";
+import { HTTPProxyTimeoutEditor } from "./HTTPProxyTimeoutEditor.js";
 const urlSchema = z.string().url();
-/** Edits direct URLs and proxy settings, including mutually exclusive allow/drop request header lists. */ export function HTTPSettingsEditor(props) {
-    const { value, onChange, isReadonly, initialSpecDirect, initialSpecProxy, testConnection } = props;
+/** Edits direct URLs and proxy settings, including the connection timeout, mutually exclusive allow/drop request header lists, and OAuth identity forwarding. */ export function HTTPSettingsEditor(props) {
+    const { value: providedValue, onChange, isReadonly, initialSpecDirect, initialSpecProxy, testConnection } = props;
     const strDirect = 'Direct access';
     const strProxy = 'Proxy';
-    // Initialize Proxy mode by default, if neither direct nor proxy mode is selected.
-    if (value.directUrl === undefined && value.proxy === undefined) {
-        Object.assign(value, initialSpecProxy);
-    }
+    // Initialize proxy mode without mutating the caller's datasource definition.
+    const value = useMemo(()=>{
+        if (providedValue.directUrl === undefined && providedValue.proxy === undefined) {
+            return {
+                ...providedValue,
+                ...initialSpecProxy
+            };
+        }
+        return providedValue;
+    }, [
+        providedValue,
+        initialSpecProxy
+    ]);
+    useEffect(()=>{
+        if (value !== providedValue) onChange(value);
+    }, [
+        value,
+        providedValue,
+        onChange
+    ]);
     // Use local state to maintain an array of header entries during editing, instead of
     // manipulating a map directly which causes weird UX.
     const headersForm = useForm({
@@ -45,7 +63,10 @@ const urlSchema = z.string().url();
         name: 'headers'
     });
     // Watch the headers array for changes to detect duplicates
-    const watchedHeaders = headersForm.watch('headers');
+    const watchedHeaders = useWatch({
+        control: headersForm.control,
+        name: 'headers'
+    });
     // Check for duplicate header names
     // TODO: duplication detection logic to be replaced by proper zod schema validation in the future
     // ref https://github.com/perses/perses/issues/3014
@@ -75,7 +96,7 @@ const urlSchema = z.string().url();
             }
         }));
     };
-    const handleHeaderPolicyChange = useCallback((next)=>{
+    const handleProxySpecChange = useCallback((next)=>{
         onChange(produce(value, (draft)=>{
             if (draft.proxy !== undefined) {
                 draft.proxy.spec = next;
@@ -127,6 +148,11 @@ const urlSchema = z.string().url();
                             disabled: !urlSchema.safeParse(value.proxy?.spec.url).success
                         })
                     }),
+                    value.proxy && /*#__PURE__*/ _jsx(HTTPProxyTimeoutEditor, {
+                        value: value.proxy.spec,
+                        isReadonly: isReadonly,
+                        onChange: handleProxySpecChange
+                    }),
                     /*#__PURE__*/ _jsx(Typography, {
                         variant: "h5",
                         mb: 2,
@@ -433,7 +459,7 @@ const urlSchema = z.string().url();
                     value.proxy && /*#__PURE__*/ _jsx(HTTPHeaderPolicyEditor, {
                         value: value.proxy.spec,
                         isReadonly: isReadonly,
-                        onChange: handleHeaderPolicyChange
+                        onChange: handleProxySpecChange
                     }),
                     /*#__PURE__*/ _jsxs(Stack, {
                         spacing: 1,
@@ -466,6 +492,11 @@ const urlSchema = z.string().url();
                                             }));
                                         }
                                     })
+                            }),
+                            value.proxy && /*#__PURE__*/ _jsx(HTTPProxyOAuthPassthroughEditor, {
+                                value: value.proxy.spec,
+                                isReadonly: isReadonly,
+                                onChange: handleProxySpecChange
                             })
                         ]
                     })
@@ -527,8 +558,7 @@ const urlSchema = z.string().url();
         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;
+            const { proxy: _proxy, ...newValue } = value;
             onChange({
                 ...newValue,
                 directUrl: previousSpecDirect.directUrl
@@ -536,8 +566,7 @@ const urlSchema = z.string().url();
         } 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;
+            const { directUrl: _directUrl, ...newValue } = value;
             onChange({
                 ...newValue,
                 proxy: previousSpecProxy.proxy