npm - @perses-dev/plugin-system - Versions diffs - 0.51.0-beta.0 → 0.51.0-rc.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (107) hide show

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.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 { zodResolver } from '@hookform/resolvers/zod';\nimport { Box, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport { DiscardChangesConfirmationDialog, FormActions } from '@perses-dev/components';\nimport { Action, DatasourceDefinition } from '@perses-dev/core';\nimport { DispatchWithoutAction, ReactElement, useState } from 'react';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { useValidationSchemas } from '../../context';\nimport { getSubmitText, getTitleAction } from '../../utils';\nimport { PluginEditor } from '../PluginEditor';\n\ninterface DatasourceEditorFormProps {\n initialDatasourceDefinition: DatasourceDefinition;\n action: Action;\n isDraft: boolean;\n isReadonly?: boolean;\n onActionChange?: (action: Action) => void;\n onSave: (def: DatasourceDefinition) => void;\n onClose: DispatchWithoutAction;\n onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm(props: DatasourceEditorFormProps): ReactElement {\n const { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete } = props;\n\n const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n const titleAction = getTitleAction(action, isDraft);\n const submitText = getSubmitText(action, isDraft);\n\n const { datasourceEditorSchema } = useValidationSchemas();\n const form = useForm<DatasourceDefinition>({\n resolver: zodResolver(datasourceEditorSchema),\n mode: 'onBlur',\n defaultValues: initialDatasourceDefinition,\n });\n\n /\n Remove empty fields that are optional\n */\n function clearFormData(data: DatasourceDefinition): DatasourceDefinition {\n const result = { ...data };\n if (result.spec.display?.name === undefined && result.spec.display?.description === undefined) {\n delete result.spec.display;\n }\n return result;\n }\n\n const processForm: SubmitHandler<DatasourceDefinition> = (data: DatasourceDefinition) => {\n onSave(clearFormData(data));\n };\n\n // When user click on cancel, several possibilities:\n // - create action: ask for discard approval\n // - update action: ask for discard approval if changed\n // - read action: don´t ask for discard approval\n function handleCancel(): void {\n if (JSON.stringify(initialDatasourceDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n setDiscardDialogOpened(true);\n } else {\n onClose();\n }\n }\n\n return (\n <FormProvider {...form}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">{titleAction} Datasource</Typography>\n <FormActions\n action={action}\n submitText={submitText}\n isReadonly={isReadonly}\n isValid={form.formState.isValid}\n onActionChange={onActionChange}\n onSubmit={form.handleSubmit(processForm)}\n onDelete={onDelete}\n onCancel={handleCancel}\n />\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <Grid container spacing={2} mb={2}>\n <Grid item xs={4}>\n <Controller\n control={form.control}\n name=\"name\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n required\n fullWidth\n name=\"name\"\n label=\"Name\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n disabled: action === 'update' && !isDraft,\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={8}>\n <Controller\n control={form.control}\n name=\"spec.display.name\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n fullWidth\n name=\"title\"\n label=\"Display Label\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={12}>\n <Controller\n control={form.control}\n name=\"spec.display.description\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n fullWidth\n name=\"description\"\n label=\"Description\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n <Stack>\n <Controller\n control={form.control}\n name=\"spec.default\"\n render={({ field }) => (\n <FormControlLabel\n label=\"Set as default\"\n control={\n <Switch\n {...field}\n checked={!!field.value}\n readOnly={action === 'read'}\n onChange={(event) => {\n if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n field.onChange(event);\n }}\n />\n }\n />\n )}\n />\n <Typography variant=\"caption\">\n Whether this datasource should be the default {form.getValues().spec.plugin.kind} to be used\n </Typography>\n </Stack>\n </Grid>\n </Grid>\n <Divider />\n <Typography py={1} variant=\"h3\">\n Plugin Options\n </Typography>\n <Controller\n control={form.control}\n name=\"spec.plugin\"\n render={({ field }) => (\n <PluginEditor\n width=\"100%\"\n pluginTypes={['Datasource']}\n pluginKindLabel=\"Source\"\n value={{\n selection: {\n type: 'Datasource',\n kind: field.value.kind,\n },\n spec: field.value.spec,\n }}\n isReadonly={action === 'read'}\n onChange={(v) => {\n field.onChange({ kind: v.selection.kind, spec: v.spec });\n }}\n />\n )}\n />\n </Box>\n <DiscardChangesConfirmationDialog\n description=\"Are you sure you want to discard your changes? Changes cannot be recovered.\"\n isOpen={isDiscardDialogOpened}\n onCancel={() => setDiscardDialogOpened(false)}\n onDiscardChanges={() => {\n setDiscardDialogOpened(false);\n onClose();\n }}\n />\n </FormProvider>\n );\n}\n"],"names":["zodResolver","Box","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","DiscardChangesConfirmationDialog","FormActions","useState","Controller","FormProvider","useForm","useValidationSchemas","getSubmitText","getTitleAction","PluginEditor","DatasourceEditorForm","props","initialDatasourceDefinition","action","isDraft","isReadonly","onActionChange","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","datasourceEditorSchema","form","resolver","mode","defaultValues","clearFormData","data","result","spec","display","name","undefined","description","processForm","handleCancel","JSON","stringify","getValues","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","mb","item","xs","control","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","InputProps","disabled","readOnly","error","helperText","message","value","onChange","event","paddingTop","checked","plugin","kind","py","width","pluginTypes","pluginKindLabel","selection","type","v","isOpen","onDiscardChanges"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.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 { zodResolver } from '@hookform/resolvers/zod';\nimport { Box, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport { DiscardChangesConfirmationDialog, FormActions } from '@perses-dev/components';\nimport { Action, DatasourceDefinition } from '@perses-dev/core';\nimport { DispatchWithoutAction, ReactElement, useState } from 'react';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { useValidationSchemas } from '../../context';\nimport { getSubmitText, getTitleAction } from '../../utils';\nimport { PluginEditor } from '../PluginEditor';\n\ninterface DatasourceEditorFormProps {\n initialDatasourceDefinition: DatasourceDefinition;\n action: Action;\n isDraft: boolean;\n isReadonly?: boolean;\n onActionChange?: (action: Action) => void;\n onSave: (def: DatasourceDefinition) => void;\n onClose: DispatchWithoutAction;\n onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm(props: DatasourceEditorFormProps): ReactElement {\n const { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete } = props;\n\n const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n const titleAction = getTitleAction(action, isDraft);\n const submitText = getSubmitText(action, isDraft);\n\n const { datasourceEditorSchema } = useValidationSchemas();\n const form = useForm<DatasourceDefinition>({\n resolver: zodResolver(datasourceEditorSchema),\n mode: 'onBlur',\n defaultValues: initialDatasourceDefinition,\n });\n\n /\n Remove empty fields that are optional\n */\n function clearFormData(data: DatasourceDefinition): DatasourceDefinition {\n const result = { ...data };\n if (result.spec.display?.name === undefined && result.spec.display?.description === undefined) {\n delete result.spec.display;\n }\n return result;\n }\n\n const processForm: SubmitHandler<DatasourceDefinition> = (data: DatasourceDefinition) => {\n onSave(clearFormData(data));\n };\n\n // When user click on cancel, several possibilities:\n // - create action: ask for discard approval\n // - update action: ask for discard approval if changed\n // - read action: don´t ask for discard approval\n function handleCancel(): void {\n if (JSON.stringify(initialDatasourceDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n setDiscardDialogOpened(true);\n } else {\n onClose();\n }\n }\n\n return (\n <FormProvider {...form}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">{titleAction} Datasource</Typography>\n <FormActions\n action={action}\n submitText={submitText}\n isReadonly={isReadonly}\n isValid={form.formState.isValid}\n onActionChange={onActionChange}\n onSubmit={form.handleSubmit(processForm)}\n onDelete={onDelete}\n onCancel={handleCancel}\n />\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <Grid container spacing={2} mb={2}>\n <Grid item xs={4}>\n <Controller\n control={form.control}\n name=\"name\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n required\n fullWidth\n name=\"name\"\n label=\"Name\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n disabled: action === 'update' && !isDraft,\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={8}>\n <Controller\n control={form.control}\n name=\"spec.display.name\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n fullWidth\n name=\"title\"\n label=\"Display Label\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={12}>\n <Controller\n control={form.control}\n name=\"spec.display.description\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n fullWidth\n name=\"description\"\n label=\"Description\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n <Stack>\n <Controller\n control={form.control}\n name=\"spec.default\"\n render={({ field }) => (\n <FormControlLabel\n label=\"Set as default\"\n control={\n <Switch\n {...field}\n checked={!!field.value}\n readOnly={action === 'read'}\n onChange={(event) => {\n if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n field.onChange(event);\n }}\n />\n }\n />\n )}\n />\n <Typography variant=\"caption\">\n Whether this datasource should be the default {form.getValues().spec.plugin.kind} to be used\n </Typography>\n </Stack>\n </Grid>\n </Grid>\n <Divider />\n <Typography py={1} variant=\"h3\">\n Plugin Options\n </Typography>\n <Controller\n control={form.control}\n name=\"spec.plugin\"\n render={({ field }) => (\n <PluginEditor\n width=\"100%\"\n pluginTypes={['Datasource']}\n pluginKindLabel=\"Source\"\n value={{\n selection: {\n type: 'Datasource',\n kind: field.value.kind,\n },\n spec: field.value.spec,\n }}\n isReadonly={action === 'read'}\n onChange={(v) => {\n field.onChange({ kind: v.selection.kind, spec: v.spec });\n }}\n />\n )}\n />\n </Box>\n <DiscardChangesConfirmationDialog\n description=\"Are you sure you want to discard your changes? Changes cannot be recovered.\"\n isOpen={isDiscardDialogOpened}\n onCancel={() => setDiscardDialogOpened(false)}\n onDiscardChanges={() => {\n setDiscardDialogOpened(false);\n onClose();\n }}\n />\n </FormProvider>\n );\n}\n"],"names":["zodResolver","Box","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","DiscardChangesConfirmationDialog","FormActions","useState","Controller","FormProvider","useForm","useValidationSchemas","getSubmitText","getTitleAction","PluginEditor","DatasourceEditorForm","props","initialDatasourceDefinition","action","isDraft","isReadonly","onActionChange","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","datasourceEditorSchema","form","resolver","mode","defaultValues","clearFormData","data","result","spec","display","name","undefined","description","processForm","handleCancel","JSON","stringify","getValues","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","mb","item","xs","control","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","InputProps","disabled","readOnly","error","helperText","message","value","onChange","event","paddingTop","checked","plugin","kind","py","width","pluginTypes","pluginKindLabel","selection","type","v","isOpen","onDiscardChanges"],"mappings":"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"}

package/dist/components/DatasourceSelect.d.ts CHANGED Viewed

@@ -1,10 +1,12 @@
 import { OutlinedSelectProps, BaseSelectProps } from '@mui/material';
-import { DatasourceSelector } from '@perses-dev/core';
+import { DatasourceSelector, VariableName } from '@perses-dev/core';
 import { ReactElement } from 'react';
+import { DatasourceSelectItemGroup, VariableStateMap } from '../runtime';
 type OmittedMuiProps = 'children' | 'value' | 'onChange';
+export type DatasourceSelectValue<T = DatasourceSelector> = T | VariableName;
 export interface DatasourceSelectProps extends Omit<OutlinedSelectProps & BaseSelectProps<string>, OmittedMuiProps> {
-    value: DatasourceSelector;
-    onChange: (next: DatasourceSelector) => void;
+    value: DatasourceSelectValue;
+    onChange: (next: DatasourceSelectValue) => void;
     datasourcePluginKind: string;
     project?: string;
 }
@@ -18,5 +20,8 @@ export declare function DatasourceName(props: {
     overridden?: boolean;
     overriding?: boolean;
 }): ReactElement;
+export declare function isVariableDatasource(value: DatasourceSelectValue | undefined): value is VariableName;
+export declare const datasourceSelectValueToSelector: (value: DatasourceSelectValue | undefined, variables: VariableStateMap, datasourceSelectItemGroups: DatasourceSelectItemGroup[] | undefined) => DatasourceSelector | undefined;
+export declare const useDatasourceSelectValueToSelector: (value: DatasourceSelectValue, datasourcePluginKind: string) => DatasourceSelector;
 export {};
 //# sourceMappingURL=DatasourceSelect.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../src/components/DatasourceSelect.tsx"],"names":[],"mappings":"AAcA,OAAO,~~EAUL~~,mBAAmB,EACnB,eAAe,~~EAChB~~,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;~~AACtD~~,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;~~AAK9C~~,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;~~AAEzD~~,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,mBAAmB,GAAG,eAAe,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACjH,KAAK,EAAE,~~kBAAkB~~,CAAC;~~IAC1B~~,QAAQ,EAAE,CAAC,IAAI,EAAE,~~kBAAkB~~,KAAK,IAAI,CAAC;~~IAC7C~~,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,~~CAuF3E~~;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"}
1	+ {"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../src/components/DatasourceSelect.tsx"],"names":[],"mappings":"AAcA,OAAO,EAML,mBAAmB,EACnB,eAAe,EAGhB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAEL,yBAAyB,EAIzB,gBAAgB,EACjB,MAAM,YAAY,CAAC;AAOpB,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAWzD,MAAM,MAAM,qBAAqB,CAAC,CAAC,GAAG,kBAAkB,IAAI,CAAC,GAAG,YAAY,CAAC;AAE7E,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,mBAAmB,GAAG,eAAe,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACjH,KAAK,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAiH3E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CAahH;AAuCD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,GAAG,KAAK,IAAI,YAAY,CAEpG;AAED,eAAO,MAAM,+BAA+B,UACnC,qBAAqB,GAAG,SAAS,aAC7B,gBAAgB,8BACC,yBAAyB,EAAE,GAAG,SAAS,KAClE,kBAAkB,GAAG,SA4BvB,CAAC;AAEF,eAAO,MAAM,kCAAkC,UACtC,qBAAqB,wBACN,MAAM,KAC3B,kBAQF,CAAC"}

package/dist/components/DatasourceSelect.js CHANGED Viewed

@@ -11,18 +11,29 @@
 // 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 { createElement as _createElement } from "react";
 import OpenInNewIcon from 'mdi-material-ui/OpenInNew';
-import { Select, MenuItem, Stack, Divider, ListItemText, Chip, IconButton, Box } from '@mui/material';
+import { Stack, ListItemText, Chip, IconButton, Box, Autocomplete, TextField } from '@mui/material';
 import { useMemo } from 'react';
-import { useListDatasourceSelectItems } from '../runtime';
+import { useListDatasourceSelectItems, useVariableValues } from '../runtime';
+import { parseVariables } from '../utils';
+const DATASOURCE_VARIABLE_VALUE_PREFIX = '__DATASOURCE_VARIABLE_VALUE__';
+const VARIABLE_IDENTIFIER = '$';
+const emptyDatasourceOption = {
+    name: '',
+    value: ''
+};
 /**
  * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for
  * the input deal with a `DatasourceSelector`.
  */ export function DatasourceSelect(props) {
     const { datasourcePluginKind, value, project, onChange, ...others } = props;
     const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind, project);
-    // Rebuild the group of the value if not provided
+    const variables = useVariableValues();
     const defaultValue = useMemo(()=>{
+        if (isVariableDatasource(value)) {
+            return value;
+        }
         const group = (data ?? []).flatMap((itemGroup)=>itemGroup.items).find((item)=>{
             return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;
         })?.selector.group;
@@ -34,87 +45,112 @@ import { useListDatasourceSelectItems } from '../runtime';
         value,
         data
     ]);
-    // Convert the datasource list into menu items with name/group?/value strings that the Select input can work with
-    const menuItems = useMemo(()=>{
-        return (data ?? []).map((itemGroup)=>({
-                group: itemGroup.group,
-                editLink: itemGroup.editLink,
-                items: itemGroup.items.map((item)=>({
-                        name: item.name,
-                        overriding: item.overriding,
-                        overridden: item.overridden,
-                        saved: item.saved ?? true,
-                        group: item.selector.group,
-                        value: selectorToOptionValue(item.selector)
-                    }))
-            }));
+    const options = useMemo(()=>{
+        const datasourceOptions = (data || []).flatMap((itemGroup)=>itemGroup.items.map((item)=>({
+                    groupLabel: itemGroup.group,
+                    groupEditLink: itemGroup.editLink,
+                    name: item.name,
+                    overriding: item.overriding,
+                    overridden: item.overridden,
+                    saved: item.saved ?? true,
+                    group: item.selector.group,
+                    value: selectorToOptionValue(item.selector)
+                })));
+        const datasourceOptionsMap = new Map(datasourceOptions.map((option)=>[
+                option.name,
+                option
+            ]));
+        const variableOptions = Object.entries(variables).flatMap(([name, variable])=>{
+            if (Array.isArray(variable.value)) return [];
+            const associatedDatasource = datasourceOptionsMap.get(variable.value ?? '');
+            if (!associatedDatasource) return [];
+            return {
+                groupLabel: 'Variables',
+                name: `${VARIABLE_IDENTIFIER}${name}`,
+                saved: true,
+                value: `${DATASOURCE_VARIABLE_VALUE_PREFIX}${VARIABLE_IDENTIFIER}${name}`
+            };
+        });
+        return [
+            ...datasourceOptions,
+            ...variableOptions
+        ];
     }, [
-        data
+        data,
+        variables
     ]);
-    // While loading available values, just use an empty string so MUI select doesn't warn about values out of range
-    const optionValue = isLoading ? '' : selectorToOptionValue(defaultValue);
+    // While loading available values, just use an empty datasource option so MUI select doesn't warn about values out of range
+    const optionValue = isLoading ? emptyDatasourceOption : options.find((option)=>option.value === selectorToOptionValue(defaultValue));
     // When the user makes a selection, convert the string option value back to a DatasourceSelector
-    const handleChange = (e)=>{
-        const next = optionValueToSelector(e.target.value);
-        onChange(next);
+    const handleChange = (selectedOption)=>{
+        if (selectedOption) {
+            const next = optionValueToSelector(selectedOption?.value || '');
+            onChange(next);
+        } else {
+            onChange({
+                kind: datasourcePluginKind
+            });
+        }
     };
     // 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 = ()=>{};
-    // TODO:
-    //  - Does this need a loading indicator of some kind?
-    //  - The group's edit link is not clickable once selected.
-    //  - The group's edit link is disabled if datasource is overridden.
-    //    Ref: https://github.com/mui/material-ui/issues/36572
-    return /*#__PURE__*/ _jsx(Select, {
-        ...others,
+    return /*#__PURE__*/ _jsx(Autocomplete, {
+        options: options,
+        renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
+                ...params,
+                label: others.label,
+                placeholder: ""
+            }),
+        groupBy: (option)=>option.groupLabel || 'No group',
+        getOptionLabel: (option)=>{
+            return option.name;
+        },
+        onChange: (_, v)=>handleChange(v),
         value: optionValue,
-        onChange: handleChange,
-        children: menuItems.map((menuItemGroup)=>[
-                /*#__PURE__*/ _jsx(Divider, {}, `${menuItemGroup.group}-divider`),
-                ...menuItemGroup.items.map((menuItem)=>/*#__PURE__*/ _jsx(MenuItem, {
-                        value: menuItem.value,
-                        disabled: menuItem.overridden || !menuItem.saved,
-                        children: /*#__PURE__*/ _jsxs(Stack, {
-                            direction: "row",
-                            alignItems: "center",
-                            justifyContent: "space-between",
-                            width: "100%",
-                            children: [
-                                /*#__PURE__*/ _jsx(ListItemText, {
-                                    children: /*#__PURE__*/ _jsx(DatasourceName, {
-                                        name: menuItem.name,
-                                        overridden: menuItem.overridden,
-                                        overriding: menuItem.overriding
-                                    })
-                                }),
-                                !menuItem.saved && /*#__PURE__*/ _jsx(ListItemText, {
-                                    children: "Save the dashboard to enable this datasource"
-                                }),
-                                /*#__PURE__*/ _jsx(ListItemText, {
-                                    style: {
-                                        textAlign: 'right'
-                                    },
-                                    children: menuItemGroup.group && menuItemGroup.group.length > 0 && /*#__PURE__*/ _jsx(Chip, {
-                                        disabled: false,
-                                        label: menuItemGroup.group,
-                                        size: "small",
-                                        onDelete: menuItemGroup.editLink ? fakeActionEvent : undefined,
-                                        deleteIcon: menuItemGroup.editLink ? /*#__PURE__*/ _jsx(IconButton, {
-                                            href: menuItemGroup.editLink,
-                                            target: "_blank",
-                                            children: /*#__PURE__*/ _jsx(OpenInNewIcon, {
-                                                fontSize: "small"
-                                            })
-                                        }) : undefined
-                                    })
+        renderOption: (props, option)=>{
+            return /*#__PURE__*/ _createElement("li", {
+                ...props,
+                key: option.value
+            }, /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%",
+                children: [
+                    /*#__PURE__*/ _jsx(ListItemText, {
+                        children: /*#__PURE__*/ _jsx(DatasourceName, {
+                            name: option.name,
+                            overridden: option.overridden,
+                            overriding: option.overriding
+                        })
+                    }),
+                    !option.saved && /*#__PURE__*/ _jsx(ListItemText, {
+                        children: "Save the dashboard to enable this datasource"
+                    }),
+                    /*#__PURE__*/ _jsx(ListItemText, {
+                        style: {
+                            textAlign: 'right'
+                        },
+                        children: option.groupLabel && option.groupLabel.length > 0 && /*#__PURE__*/ _jsx(Chip, {
+                            disabled: false,
+                            label: option.groupLabel,
+                            size: "small",
+                            onDelete: option.groupEditLink ? fakeActionEvent : undefined,
+                            deleteIcon: option.groupEditLink ? /*#__PURE__*/ _jsx(IconButton, {
+                                href: option.groupEditLink,
+                                target: "_blank",
+                                children: /*#__PURE__*/ _jsx(OpenInNewIcon, {
+                                    fontSize: "small"
                                 })
-                            ]
+                            }) : undefined
                         })
-                    }, menuItem.value))
-            ])
+                    })
+                ]
+            }));
+        }
     });
 }
 export function DatasourceName(props) {
@@ -139,6 +175,9 @@ const OPTION_VALUE_DELIMITER = '_____';
  * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.
  * @param selector
  */ function selectorToOptionValue(selector) {
+    if (isVariableDatasource(selector)) {
+        return `${DATASOURCE_VARIABLE_VALUE_PREFIX}${selector}`;
+    }
     return [
         selector.kind,
         selector.group ?? '',
@@ -150,6 +189,9 @@ const OPTION_VALUE_DELIMITER = '_____';
  * returns a DatasourceSelector to be used by the query data model.
  * @param optionValue
  */ function optionValueToSelector(optionValue) {
+    if (optionValue.startsWith(DATASOURCE_VARIABLE_VALUE_PREFIX)) {
+        return optionValue.split(DATASOURCE_VARIABLE_VALUE_PREFIX)[1];
+    }
     const words = optionValue.split(OPTION_VALUE_DELIMITER);
     const kind = words[0];
     const name = words[2];
@@ -161,5 +203,39 @@ const OPTION_VALUE_DELIMITER = '_____';
         name: name === '' ? undefined : name
     };
 }
+export function isVariableDatasource(value) {
+    return typeof value === 'string' && value.startsWith(VARIABLE_IDENTIFIER);
+}
+export const datasourceSelectValueToSelector = (value, variables, datasourceSelectItemGroups)=>{
+    if (!isVariableDatasource(value)) {
+        return value;
+    }
+    const [variableName] = parseVariables(value);
+    const variable = variables[variableName ?? ''];
+    // If the variable is not defined or if its value is an array, we cannot determine a selector and return undefined
+    if (!variable || Array.isArray(variable.value)) {
+        return undefined;
+    }
+    const associatedDatasource = (datasourceSelectItemGroups || []).flatMap((itemGroup)=>itemGroup.items).find((datasource)=>datasource.name === variable.value);
+    // If the variable value is not a datasource, we cannot determine a selector and return undefined
+    if (associatedDatasource === undefined) {
+        return undefined;
+    }
+    const datasourceSelector = {
+        kind: associatedDatasource.selector.kind,
+        name: associatedDatasource.selector.name
+    };
+    return datasourceSelector;
+};
+export const useDatasourceSelectValueToSelector = (value, datasourcePluginKind)=>{
+    const { data } = useListDatasourceSelectItems(datasourcePluginKind);
+    const variables = useVariableValues();
+    if (!isVariableDatasource(value)) {
+        return value;
+    }
+    return datasourceSelectValueToSelector(value, variables, data) ?? {
+        kind: datasourcePluginKind
+    };
+};
 //# sourceMappingURL=DatasourceSelect.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/components/DatasourceSelect.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport {\n 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":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,mBAAmB,4BAA4B;AACtD,SACEC,MAAM,EAENC,QAAQ,EACRC,KAAK,EACLC,OAAO,EACPC,YAAY,EACZC,IAAI,EACJC,UAAU,EACVC,GAAG,QAGE,gBAAgB;AAEvB,SAAuBC,OAAO,QAAQ,QAAQ;AAC9C,SAAuCC,4BAA4B,QAAQ,aAAa;AAaxF;;;CAGC,GACD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,oBAAoB,EAAEC,KAAK,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGC,QAAQ,GAAGL;IACtE,MAAM,EAAEM,IAAI,EAAEC,SAAS,EAAE,GAAGT,6BAA6BG,sBAAsBE;IAC/E,iDAAiD;IACjD,MAAMK,eAAeX,QAAQ;QAC3B,MAAMY,QAAQ,AAACH,CAAAA,QAAQ,EAAE,AAAD,EACrBI,OAAO,CAAC,CAACC,YAAcA,UAAUC,KAAK,EACtCC,IAAI,CAAC,CAACC;YACL,OAAOZ,MAAMa,IAAI,KAAKD,KAAKE,QAAQ,CAACD,IAAI,IAAIb,MAAMe,IAAI,KAAKH,KAAKE,QAAQ,CAACC,IAAI,IAAI,CAACH,KAAKI,UAAU;QACnG,IAAIF,SAASP;QACf,OAAO;YAAE,GAAGP,KAAK;YAAEO;QAAM;IAC3B,GAAG;QAACP;QAAOI;KAAK;IAEhB,iHAAiH;IACjH,MAAMa,YAAYtB,QAAQ;QACxB,OAAO,AAACS,CAAAA,QAAQ,EAAE,AAAD,EAAGc,GAAG,CAAC,CAACT,YAAe,CAAA;gBACtCF,OAAOE,UAAUF,KAAK;gBACtBY,UAAUV,UAAUU,QAAQ;gBAC5BT,OAAOD,UAAUC,KAAK,CAACQ,GAAG,CAAC,CAACN,OAAU,CAAA;wBACpCG,MAAMH,KAAKG,IAAI;wBACfK,YAAYR,KAAKQ,UAAU;wBAC3BJ,YAAYJ,KAAKI,UAAU;wBAC3BK,OAAOT,KAAKS,KAAK,IAAI;wBACrBd,OAAOK,KAAKE,QAAQ,CAACP,KAAK;wBAC1BP,OAAOsB,sBAAsBV,KAAKE,QAAQ;oBAC5C,CAAA;YACF,CAAA;IACF,GAAG;QAACV;KAAK;IAET,gHAAgH;IAChH,MAAMmB,cAAclB,YAAY,KAAKiB,sBAAsBhB;IAE3D,gGAAgG;IAChG,MAAMkB,eAAgD,CAACC;QACrD,MAAMC,OAAOC,sBAAsBF,EAAEG,MAAM,CAAC5B,KAAK;QACjDE,SAASwB;IACX;IAEA,oGAAoG;IACpG,4GAA4G;IAC5G,2BAA2B;IAC3B,gEAAgE;IAChE,MAAMG,kBAAkB,KAAa;IAErC,QAAQ;IACR,sDAAsD;IACtD,2DAA2D;IAC3D,oEAAoE;IACpE,0DAA0D;IAC1D,qBACE,KAAC1C;QAAQ,GAAGgB,MAAM;QAAEH,OAAOuB;QAAarB,UAAUsB;kBAC/CP,UAAUC,GAAG,CAAC,CAACY,gBAAkB;8BAChC,KAACxC,aAAa,CAAC,EAAEwC,cAAcvB,KAAK,CAAC,QAAQ,CAAC;mBAC3CuB,cAAcpB,KAAK,CAACQ,GAAG,CAAC,CAACa,yBAC1B,KAAC3C;wBAA8BY,OAAO+B,SAAS/B,KAAK;wBAAEgC,UAAUD,SAASf,UAAU,IAAI,CAACe,SAASV,KAAK;kCACpG,cAAA,MAAChC;4BAAM4C,WAAU;4BAAMC,YAAW;4BAASC,gBAAe;4BAAgBC,OAAM;;8CAC9E,KAAC7C;8CACC,cAAA,KAAC8C;wCACCtB,MAAMgB,SAAShB,IAAI;wCACnBC,YAAYe,SAASf,UAAU;wCAC/BI,YAAYW,SAASX,UAAU;;;gCAGlC,CAACW,SAASV,KAAK,kBAAI,KAAC9B;8CAAa;;8CAClC,KAACA;oCAAa+C,OAAO;wCAAEC,WAAW;oCAAQ;8CACvCT,cAAcvB,KAAK,IAAIuB,cAAcvB,KAAK,CAACiC,MAAM,GAAG,mBACnD,KAAChD;wCACCwC,UAAU;wCACVS,OAAOX,cAAcvB,KAAK;wCAC1BmC,MAAK;wCACLC,UAAUb,cAAcX,QAAQ,GAAGU,kBAAkBe;wCACrDC,YACEf,cAAcX,QAAQ,iBACpB,KAAC1B;4CAAWqD,MAAMhB,cAAcX,QAAQ;4CAAES,QAAO;sDAC/C,cAAA,KAAC1C;gDAAc6D,UAAS;;6CAExBH;;;;;uBAtBDb,SAAS/B,KAAK;aA8BhC;;AAGP;AAEA,OAAO,SAASqC,eAAevC,KAAmE;IAChG,MAAM,EAAEiB,IAAI,EAAEC,UAAU,EAAEI,UAAU,EAAE,GAAGtB;IACzC,qBACE;;YACG,CAAC,EAAEiB,KAAK,CAAC,CAAC;YACV,CAACC,cAAcI,4BACd,KAAC1B;gBAAIsD,SAAQ;gBAASC,YAAW;gBAASC,OAAO,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO,CAACC,IAAI;0BAAE;;YAIzFtC,cAAc;;;AAGrB;AAEA,kDAAkD;AAClD,MAAMuC,yBAAyB;AAE/B;;;;CAIC,GACD,SAASjC,sBAAsBR,QAAsC;IACnE,OAAO;QAACA,SAASD,IAAI;QAAEC,SAASP,KAAK,IAAI;QAAIO,SAASC,IAAI,IAAI;KAAG,CAACyC,IAAI,CAACD;AACzE;AAEA;;;;CAIC,GACD,SAAS5B,sBAAsBJ,WAAmB;IAChD,MAAMkC,QAAQlC,YAAYmC,KAAK,CAACH;IAChC,MAAM1C,OAAO4C,KAAK,CAAC,EAAE;IACrB,MAAM1C,OAAO0C,KAAK,CAAC,EAAE;IACrB,IAAI5C,SAAS+B,aAAa7B,SAAS6B,WAAW;QAC5C,MAAM,IAAIe,MAAM;IAClB;IACA,OAAO;QACL9C;QACAE,MAAMA,SAAS,KAAK6B,YAAY7B;IAClC;AACF"}
1	+ {"version":3,"sources":["../../src/components/DatasourceSelect.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport {\n Stack,\n ListItemText,\n Chip,\n IconButton,\n Box,\n OutlinedSelectProps,\n BaseSelectProps,\n Autocomplete,\n TextField,\n} from '@mui/material';\nimport { DatasourceSelector, VariableName } from '@perses-dev/core';\nimport { ReactElement, useMemo } from 'react';\nimport {\n DatasourceSelectItem,\n DatasourceSelectItemGroup,\n DatasourceSelectItemSelector,\n useListDatasourceSelectItems,\n useVariableValues,\n VariableStateMap,\n} from '../runtime';\nimport { parseVariables } from '../utils';\n\nconst DATASOURCE_VARIABLE_VALUE_PREFIX = '__DATASOURCE_VARIABLE_VALUE__';\nconst VARIABLE_IDENTIFIER = '$';\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' \| 'value' \| 'onChange';\n\ntype DataSourceOption = {\n groupEditLink?: string;\n groupLabel?: string;\n value: string;\n} & Omit<DatasourceSelectItem, 'selector'> &\n Omit<DatasourceSelectItem['selector'], 'kind'>;\n\nconst emptyDatasourceOption: DataSourceOption = { name: '', value: '' };\n\nexport type DatasourceSelectValue<T = DatasourceSelector> = T \| VariableName;\n\nexport interface DatasourceSelectProps extends Omit<OutlinedSelectProps & BaseSelectProps<string>, OmittedMuiProps> {\n value: DatasourceSelectValue;\n onChange: (next: DatasourceSelectValue) => void;\n datasourcePluginKind: string;\n project?: string;\n}\n\n/*\n Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for\n * the input deal with a `DatasourceSelector`.\n /\nexport function DatasourceSelect(props: DatasourceSelectProps): ReactElement {\n const { datasourcePluginKind, value, project, onChange, ...others } = props;\n const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind, project);\n const variables = useVariableValues();\n\n const defaultValue = useMemo<VariableName \| DatasourceSelectItemSelector>(() => {\n if (isVariableDatasource(value)) {\n return value;\n }\n\n const group = (data ?? [])\n .flatMap((itemGroup) => itemGroup.items)\n .find((item) => {\n return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;\n })?.selector.group;\n return { ...value, group };\n }, [value, data]);\n\n const options = useMemo<DataSourceOption[]>(() => {\n const datasourceOptions = (data \|\| []).flatMap<DataSourceOption>((itemGroup) =>\n itemGroup.items.map<DataSourceOption>((item) => ({\n groupLabel: itemGroup.group,\n groupEditLink: itemGroup.editLink,\n name: item.name,\n overriding: item.overriding,\n overridden: item.overridden,\n saved: item.saved ?? true,\n group: item.selector.group,\n value: selectorToOptionValue(item.selector),\n }))\n );\n\n const datasourceOptionsMap = new Map(datasourceOptions.map((option) => [option.name, option]));\n\n const variableOptions = Object.entries(variables).flatMap<DataSourceOption>(([name, variable]) => {\n if (Array.isArray(variable.value)) return [];\n\n const associatedDatasource = datasourceOptionsMap.get(variable.value ?? '');\n if (!associatedDatasource) return [];\n\n return {\n groupLabel: 'Variables',\n name: `${VARIABLE_IDENTIFIER}${name}`,\n saved: true,\n value: `${DATASOURCE_VARIABLE_VALUE_PREFIX}${VARIABLE_IDENTIFIER}${name}`,\n };\n });\n\n return [...datasourceOptions, ...variableOptions];\n }, [data, variables]);\n\n // While loading available values, just use an empty datasource option so MUI select doesn't warn about values out of range\n const optionValue = isLoading\n ? emptyDatasourceOption\n : options.find((option) => option.value === selectorToOptionValue(defaultValue));\n\n // When the user makes a selection, convert the string option value back to a DatasourceSelector\n const handleChange = (selectedOption: DataSourceOption \| null): void => {\n if (selectedOption) {\n const next = optionValueToSelector(selectedOption?.value \|\| '');\n onChange(next);\n } else {\n onChange({ kind: datasourcePluginKind });\n }\n };\n\n // We use a fake action event when we click on the action of the chip (hijack the \"delete\" feature).\n // This is because the href link action is on the `deleteIcon` property already, but the `onDelete` property\n // controls its visibility.\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n const fakeActionEvent = (): void => {};\n\n return (\n <Autocomplete<DataSourceOption>\n options={options}\n renderInput={(params) => <TextField {...params} label={others.label} placeholder=\"\" />}\n groupBy={(option) => option.groupLabel \|\| 'No group'}\n getOptionLabel={(option) => {\n return option.name;\n }}\n onChange={(_, v) => handleChange(v)}\n value={optionValue}\n renderOption={(props, option) => {\n return (\n <li {...props} key={option.value}>\n <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\">\n <ListItemText>\n <DatasourceName name={option.name} overridden={option.overridden} overriding={option.overriding} />\n </ListItemText>\n {!option.saved && <ListItemText>Save the dashboard to enable this datasource</ListItemText>}\n <ListItemText style={{ textAlign: 'right' }}>\n {option.groupLabel && option.groupLabel.length > 0 && (\n <Chip\n disabled={false}\n label={option.groupLabel}\n size=\"small\"\n onDelete={option.groupEditLink ? fakeActionEvent : undefined}\n deleteIcon={\n option.groupEditLink ? (\n <IconButton href={option.groupEditLink} target=\"_blank\">\n <OpenInNewIcon fontSize=\"small\" />\n </IconButton>\n ) : undefined\n }\n />\n )}\n </ListItemText>\n </Stack>\n </li>\n );\n }}\n />\n );\n}\n\nexport function DatasourceName(props: { name: string; overridden?: boolean; overriding?: boolean }): ReactElement {\n const { name, overridden, overriding } = props;\n return (\n <>\n {`${name} `}\n {!overridden && overriding && (\n <Box display=\"inline\" fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n (overriding)\n </Box>\n )}\n {overridden && '(overridden)'}\n </>\n );\n}\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/\n Given a DatasourceSelectItemSelector,\n * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.\n * @param selector\n /\nfunction selectorToOptionValue(selector: DatasourceSelectItemSelector \| VariableName): string {\n if (isVariableDatasource(selector)) {\n return `${DATASOURCE_VARIABLE_VALUE_PREFIX}${selector}`;\n }\n return [selector.kind, selector.group ?? '', selector.name ?? ''].join(OPTION_VALUE_DELIMITER);\n}\n\n/\n Given an option value name like `{kind}_____{group}_____{name}`,\n * returns a DatasourceSelector to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelector(optionValue: string): DatasourceSelectValue {\n if (optionValue.startsWith(DATASOURCE_VARIABLE_VALUE_PREFIX)) {\n return optionValue.split(DATASOURCE_VARIABLE_VALUE_PREFIX)[1]!;\n }\n\n const words = optionValue.split(OPTION_VALUE_DELIMITER);\n const kind = words[0];\n const name = words[2];\n if (kind === undefined \|\| name === undefined) {\n throw new Error('Invalid optionValue string');\n }\n return {\n kind,\n name: name === '' ? undefined : name,\n };\n}\n\nexport function isVariableDatasource(value: DatasourceSelectValue \| undefined): value is VariableName {\n return typeof value === 'string' && value.startsWith(VARIABLE_IDENTIFIER);\n}\n\nexport const datasourceSelectValueToSelector = (\n value: DatasourceSelectValue \| undefined,\n variables: VariableStateMap,\n datasourceSelectItemGroups: DatasourceSelectItemGroup[] \| undefined\n): DatasourceSelector \| undefined => {\n if (!isVariableDatasource(value)) {\n return value;\n }\n\n const [variableName] = parseVariables(value);\n const variable = variables[variableName ?? ''];\n\n // If the variable is not defined or if its value is an array, we cannot determine a selector and return undefined\n if (!variable \|\| Array.isArray(variable.value)) {\n return undefined;\n }\n\n const associatedDatasource = (datasourceSelectItemGroups \|\| [])\n .flatMap((itemGroup) => itemGroup.items)\n .find((datasource) => datasource.name === variable.value);\n\n // If the variable value is not a datasource, we cannot determine a selector and return undefined\n if (associatedDatasource === undefined) {\n return undefined;\n }\n\n const datasourceSelector: DatasourceSelector = {\n kind: associatedDatasource.selector.kind,\n name: associatedDatasource.selector.name,\n };\n\n return datasourceSelector;\n};\n\nexport const useDatasourceSelectValueToSelector = (\n value: DatasourceSelectValue,\n datasourcePluginKind: string\n): DatasourceSelector => {\n const { data } = useListDatasourceSelectItems(datasourcePluginKind);\n const variables = useVariableValues();\n if (!isVariableDatasource(value)) {\n return value;\n }\n\n return datasourceSelectValueToSelector(value, variables, data) ?? { kind: datasourcePluginKind };\n};\n"],"names":["OpenInNewIcon","Stack","ListItemText","Chip","IconButton","Box","Autocomplete","TextField","useMemo","useListDatasourceSelectItems","useVariableValues","parseVariables","DATASOURCE_VARIABLE_VALUE_PREFIX","VARIABLE_IDENTIFIER","emptyDatasourceOption","name","value","DatasourceSelect","props","datasourcePluginKind","project","onChange","others","data","isLoading","variables","defaultValue","isVariableDatasource","group","flatMap","itemGroup","items","find","item","kind","selector","overridden","options","datasourceOptions","map","groupLabel","groupEditLink","editLink","overriding","saved","selectorToOptionValue","datasourceOptionsMap","Map","option","variableOptions","Object","entries","variable","Array","isArray","associatedDatasource","get","optionValue","handleChange","selectedOption","next","optionValueToSelector","fakeActionEvent","renderInput","params","label","placeholder","groupBy","getOptionLabel","_","v","renderOption","li","key","direction","alignItems","justifyContent","width","DatasourceName","style","textAlign","length","disabled","size","onDelete","undefined","deleteIcon","href","target","fontSize","display","fontWeight","color","theme","palette","primary","main","OPTION_VALUE_DELIMITER","join","startsWith","split","words","Error","datasourceSelectValueToSelector","datasourceSelectItemGroups","variableName","datasource","datasourceSelector","useDatasourceSelectValueToSelector"],"mappings":"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"}