@perses-dev/plugin-system 0.39.0 → 0.40.1

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js

@@ -0,0 +1,334 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useImmer } from 'use-immer';
+import { Box, Button, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';
+import React, { useCallback, useState } from 'react';
+import { DiscardChangesConfirmationDialog } from '@perses-dev/components';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { PluginEditor } from '../PluginEditor';
+import { getSubmitText, getTitleAction } from '../../utils';
+import { datasourceEditValidationSchema } from '../../validation';
+/**
+ * This preprocessing ensures that we always have a defined object for the `display` property
+ * @param datasource
+ */ function getInitialState(datasource) {
+    var _datasource_spec_display, _datasource_spec_display1;
+    var _datasource_spec_display_name, _datasource_spec_display_description;
+    const patchedDisplay = {
+        name: (_datasource_spec_display_name = (_datasource_spec_display = datasource.spec.display) === null || _datasource_spec_display === void 0 ? void 0 : _datasource_spec_display.name) !== null && _datasource_spec_display_name !== void 0 ? _datasource_spec_display_name : '',
+        description: (_datasource_spec_display_description = (_datasource_spec_display1 = datasource.spec.display) === null || _datasource_spec_display1 === void 0 ? void 0 : _datasource_spec_display1.description) !== null && _datasource_spec_display_description !== void 0 ? _datasource_spec_display_description : ''
+    };
+    return {
+        ...datasource,
+        spec: {
+            ...datasource.spec,
+            display: patchedDisplay
+        }
+    };
+}
+export function DatasourceEditorForm(props) {
+    var _state_spec_display, _state_spec_display1;
+    const { initialDatasource , initialAction , isDraft , isReadonly , onSave , onClose , onDelete  } = props;
+    const patchedInitialDatasource = getInitialState(initialDatasource);
+    const [state, setState] = useImmer(patchedInitialDatasource);
+    const [isDiscardDialogOpened, setDiscardDialogOpened] = useState(false);
+    const [action, setAction] = useState(initialAction);
+    const titleAction = getTitleAction(action, isDraft);
+    const submitText = getSubmitText(action, isDraft);
+    const form = useForm({
+        resolver: zodResolver(datasourceEditValidationSchema),
+        mode: 'onBlur',
+        defaultValues: {
+            name: state.metadata.name,
+            title: (_state_spec_display = state.spec.display) === null || _state_spec_display === void 0 ? void 0 : _state_spec_display.name,
+            description: (_state_spec_display1 = state.spec.display) === null || _state_spec_display1 === void 0 ? void 0 : _state_spec_display1.description,
+            default: state.spec.default
+        }
+    });
+    const processForm = ()=>{
+        onSave(state);
+    };
+    // When user click on cancel, several possibilities:
+    // - create action: ask for discard approval
+    // - update action: ask for discard approval if changed
+    // - read action: don´t ask for discard approval
+    const handleCancel = useCallback(()=>{
+        if (JSON.stringify(patchedInitialDatasource) !== JSON.stringify(state)) {
+            setDiscardDialogOpened(true);
+        } else {
+            onClose();
+        }
+    }, [
+        state,
+        patchedInitialDatasource,
+        setDiscardDialogOpened,
+        onClose
+    ]);
+    return /*#__PURE__*/ _jsxs(FormProvider, {
+        ...form,
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: (theme)=>theme.spacing(1, 2),
+                    borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(Typography, {
+                        variant: "h2",
+                        children: [
+                            titleAction,
+                            " Datasource"
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            marginLeft: 'auto'
+                        },
+                        children: action === 'read' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    disabled: isReadonly,
+                                    variant: "contained",
+                                    onClick: ()=>setAction('update'),
+                                    children: "Edit"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    color: "error",
+                                    disabled: isReadonly,
+                                    variant: "outlined",
+                                    onClick: onDelete,
+                                    children: "Delete"
+                                }),
+                                /*#__PURE__*/ _jsx(Divider, {
+                                    orientation: "vertical",
+                                    flexItem: true,
+                                    sx: (theme)=>({
+                                            borderColor: theme.palette.grey['500'],
+                                            '&.MuiDivider-root': {
+                                                marginLeft: 2,
+                                                marginRight: 1
+                                            }
+                                        })
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    color: "secondary",
+                                    variant: "outlined",
+                                    onClick: onClose,
+                                    children: "Close"
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "contained",
+                                    disabled: !form.formState.isValid,
+                                    onClick: form.handleSubmit(processForm),
+                                    children: submitText
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    color: "secondary",
+                                    variant: "outlined",
+                                    onClick: handleCancel,
+                                    children: "Cancel"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Box, {
+                padding: 2,
+                sx: {
+                    overflowY: 'scroll'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(Grid, {
+                        container: true,
+                        spacing: 2,
+                        mb: 2,
+                        children: [
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 4,
+                                children: /*#__PURE__*/ _jsx(Controller, {
+                                    name: "name",
+                                    render: ({ field , fieldState  })=>{
+                                        var _fieldState_error;
+                                        /*#__PURE__*/ return _jsx(TextField, {
+                                            ...field,
+                                            required: true,
+                                            fullWidth: true,
+                                            name: "name",
+                                            label: "Name",
+                                            InputLabelProps: {
+                                                shrink: action === 'read' ? true : undefined
+                                            },
+                                            InputProps: {
+                                                disabled: action === 'update',
+                                                readOnly: action === 'read'
+                                            },
+                                            error: !!fieldState.error,
+                                            helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                            onChange: (event)=>{
+                                                field.onChange(event);
+                                                setState((draft)=>{
+                                                    draft.metadata.name = event.target.value;
+                                                });
+                                            }
+                                        });
+                                    }
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 8,
+                                children: /*#__PURE__*/ _jsx(Controller, {
+                                    name: "title",
+                                    render: ({ field , fieldState  })=>{
+                                        var _fieldState_error;
+                                        /*#__PURE__*/ return _jsx(TextField, {
+                                            ...field,
+                                            fullWidth: true,
+                                            name: "title",
+                                            label: "Display Label",
+                                            InputLabelProps: {
+                                                shrink: action === 'read' ? true : undefined
+                                            },
+                                            InputProps: {
+                                                readOnly: action === 'read'
+                                            },
+                                            error: !!fieldState.error,
+                                            helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                            onChange: (event)=>{
+                                                setState((draft)=>{
+                                                    field.onChange(event);
+                                                    if (draft.spec.display) {
+                                                        draft.spec.display.name = event.target.value;
+                                                    }
+                                                });
+                                            }
+                                        });
+                                    }
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 12,
+                                children: /*#__PURE__*/ _jsx(Controller, {
+                                    name: "description",
+                                    render: ({ field , fieldState  })=>{
+                                        var _fieldState_error;
+                                        /*#__PURE__*/ return _jsx(TextField, {
+                                            ...field,
+                                            fullWidth: true,
+                                            name: "description",
+                                            label: "Description",
+                                            InputLabelProps: {
+                                                shrink: action === 'read' ? true : undefined
+                                            },
+                                            InputProps: {
+                                                readOnly: action === 'read'
+                                            },
+                                            error: !!fieldState.error,
+                                            helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                            onChange: (event)=>{
+                                                field.onChange(event);
+                                                setState((draft)=>{
+                                                    if (draft.spec.display) {
+                                                        draft.spec.display.description = event.target.value;
+                                                    }
+                                                });
+                                            }
+                                        });
+                                    }
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 6,
+                                sx: {
+                                    paddingTop: '5px !important'
+                                },
+                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Controller, {
+                                            name: "default",
+                                            render: ({ field  })=>/*#__PURE__*/ _jsx(FormControlLabel, {
+                                                    ...field,
+                                                    control: /*#__PURE__*/ _jsx(Switch, {
+                                                        checked: state.spec.default,
+                                                        readOnly: action === 'read',
+                                                        onChange: (event)=>{
+                                                            if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
+                                                            field.onChange(event);
+                                                            setState((draft)=>{
+                                                                draft.spec.default = event.target.checked;
+                                                            });
+                                                        }
+                                                    }),
+                                                    label: "Set as default"
+                                                })
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Typography, {
+                                            variant: "caption",
+                                            children: [
+                                                "Whether this datasource should be the default ",
+                                                state.spec.plugin.kind,
+                                                " to be used"
+                                            ]
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Divider, {}),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        py: 1,
+                        variant: "h3",
+                        children: "Plugin Options"
+                    }),
+                    /*#__PURE__*/ _jsx(PluginEditor, {
+                        width: "100%",
+                        pluginType: "Datasource",
+                        pluginKindLabel: "Source",
+                        value: state.spec.plugin,
+                        isReadonly: action === 'read',
+                        onChange: (v)=>{
+                            setState((draft)=>{
+                                draft.spec.plugin = v;
+                            });
+                        }
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(DiscardChangesConfirmationDialog, {
+                description: "Are you sure you want to discard your changes? Changes cannot be recovered.",
+                isOpen: isDiscardDialogOpened,
+                onCancel: ()=>setDiscardDialogOpened(false),
+                onDiscardChanges: ()=>{
+                    setDiscardDialogOpened(false);
+                    onClose();
+                }
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=DatasourceEditorForm.js.map

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

@@ -0,0 +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 { useImmer } from 'use-immer';\nimport { Display, Datasource } from '@perses-dev/core';\nimport { Box, Button, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport React, { Dispatch, DispatchWithoutAction, useCallback, useState } from 'react';\nimport { DiscardChangesConfirmationDialog } from '@perses-dev/components';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { PluginEditor } from '../PluginEditor';\nimport { Action, getSubmitText, getTitleAction } from '../../utils';\nimport { datasourceEditValidationSchema, DatasourceEditValidationType } from '../../validation';\n\n/**\n * This preprocessing ensures that we always have a defined object for the `display` property\n * @param datasource\n */\nfunction getInitialState<T extends Datasource>(datasource: T): T {\n  const patchedDisplay: Display = {\n    name: datasource.spec.display?.name ?? '',\n    description: datasource.spec.display?.description ?? '',\n  };\n\n  return {\n    ...datasource,\n    spec: {\n      ...datasource.spec,\n      display: patchedDisplay,\n    },\n  };\n}\n\ninterface DatasourceEditorFormProps<T extends Datasource> {\n  initialDatasource: T;\n  initialAction: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onSave: Dispatch<T>;\n  onClose: DispatchWithoutAction;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm<T extends Datasource>(props: DatasourceEditorFormProps<T>) {\n  const { initialDatasource, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;\n\n  const patchedInitialDatasource = getInitialState(initialDatasource);\n  const [state, setState] = useImmer(patchedInitialDatasource);\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const [action, setAction] = useState(initialAction);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const form = useForm<DatasourceEditValidationType>({\n    resolver: zodResolver(datasourceEditValidationSchema),\n    mode: 'onBlur',\n    defaultValues: {\n      name: state.metadata.name,\n      title: state.spec.display?.name,\n      description: state.spec.display?.description,\n      default: state.spec.default,\n    },\n  });\n\n  const processForm: SubmitHandler<DatasourceEditValidationType> = () => {\n    onSave(state);\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  const handleCancel = useCallback(() => {\n    if (JSON.stringify(patchedInitialDatasource) !== JSON.stringify(state)) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }, [state, patchedInitialDatasource, setDiscardDialogOpened, onClose]);\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        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          {action === 'read' ? (\n            <>\n              <Button disabled={isReadonly} variant=\"contained\" onClick={() => setAction('update')}>\n                Edit\n              </Button>\n              <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n                Delete\n              </Button>\n              <Divider\n                orientation=\"vertical\"\n                flexItem\n                sx={(theme) => ({\n                  borderColor: theme.palette.grey['500'],\n                  '&.MuiDivider-root': {\n                    marginLeft: 2,\n                    marginRight: 1,\n                  },\n                })}\n              />\n              <Button color=\"secondary\" variant=\"outlined\" onClick={onClose}>\n                Close\n              </Button>\n            </>\n          ) : (\n            <>\n              <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={form.handleSubmit(processForm)}>\n                {submitText}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </>\n          )}\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={4}>\n            <Controller\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',\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.metadata.name = event.target.value;\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              name=\"title\"\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                  onChange={(event) => {\n                    setState((draft) => {\n                      field.onChange(event);\n                      if (draft.spec.display) {\n                        draft.spec.display.name = event.target.value;\n                      }\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Controller\n              name=\"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                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      if (draft.spec.display) {\n                        draft.spec.display.description = event.target.value;\n                      }\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n            <Stack>\n              <Controller\n                name=\"default\"\n                render={({ field }) => (\n                  <FormControlLabel\n                    {...field}\n                    control={\n                      <Switch\n                        checked={state.spec.default}\n                        readOnly={action === 'read'}\n                        onChange={(event) => {\n                          if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                          field.onChange(event);\n                          setState((draft) => {\n                            draft.spec.default = event.target.checked;\n                          });\n                        }}\n                      />\n                    }\n                    label=\"Set as default\"\n                  />\n                )}\n              />\n              <Typography variant=\"caption\">\n                Whether this datasource should be the default {state.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        <PluginEditor\n          width=\"100%\"\n          pluginType=\"Datasource\"\n          pluginKindLabel=\"Source\"\n          value={state.spec.plugin}\n          isReadonly={action === 'read'}\n          onChange={(v) => {\n            setState((draft) => {\n              draft.spec.plugin = v;\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":["useImmer","Box","Button","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","React","useCallback","useState","DiscardChangesConfirmationDialog","Controller","FormProvider","useForm","zodResolver","PluginEditor","getSubmitText","getTitleAction","datasourceEditValidationSchema","getInitialState","datasource","patchedDisplay","name","spec","display","description","DatasourceEditorForm","props","state","initialDatasource","initialAction","isDraft","isReadonly","onSave","onClose","onDelete","patchedInitialDatasource","setState","isDiscardDialogOpened","setDiscardDialogOpened","action","setAction","titleAction","submitText","form","resolver","mode","defaultValues","metadata","title","default","processForm","handleCancel","JSON","stringify","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","orientation","flexItem","borderColor","grey","marginRight","formState","isValid","handleSubmit","overflowY","container","mb","item","xs","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","undefined","InputProps","readOnly","error","helperText","message","onChange","event","draft","target","value","paddingTop","control","checked","plugin","kind","py","width","pluginType","pluginKindLabel","v","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}

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

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

package/dist/components/DatasourceEditorForm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceEditorForm/index.ts"],"names":[],"mappings":"AAaA,cAAc,wBAAwB,CAAC"}

package/dist/components/DatasourceEditorForm/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './DatasourceEditorForm';
+
+//# sourceMappingURL=index.js.map

package/dist/components/DatasourceEditorForm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DatasourceEditorForm/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './DatasourceEditorForm';\n"],"names":[],"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,cAAc,yBAAyB"}

package/dist/components/DatasourceSelect.d.ts

@@ -12,5 +12,10 @@ export interface DatasourceSelectProps extends Omit<SelectProps<string>, Omitted
  * the input deal with a `DatasourceSelector`.
  */
 export declare function DatasourceSelect(props: DatasourceSelectProps): JSX.Element;
+export declare function DatasourceName(props: {
+    name: string;
+    overridden?: boolean;
+    overriding?: boolean;
+}): JSX.Element;
 export {};
 //# sourceMappingURL=DatasourceSelect.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../src/components/DatasourceSelect.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAU,WAAW,EAAY,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,aAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACvF,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eA6B5D"}
+{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../src/components/DatasourceSelect.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAU,WAAW,EAAiE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,aAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACvF,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAsF5D;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,eAajG"}

package/dist/components/DatasourceSelect.js

@@ -10,62 +10,145 @@
 // 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 } from "react/jsx-runtime";
-import { Select, MenuItem } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import OpenInNewIcon from 'mdi-material-ui/OpenInNew';
+import { Select, MenuItem, Stack, Divider, ListItemText, Chip, IconButton, Box } from '@mui/material';
 import { useMemo } from 'react';
-import { useListDatasources } from '../runtime';
+import { useListDatasourceSelectItems } from '../runtime';
 /**
  * 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 , onChange , ...others } = props;
-    const { data , isLoading  } = useListDatasources(datasourcePluginKind);
-    // Convert the datasource list into menu items with name/value strings that the Select input can work with
+    const { data , isLoading  } = useListDatasourceSelectItems(datasourcePluginKind);
+    // Rebuild the group of the value if not provided
+    const defaultValue = useMemo(()=>{
+        var _flatMap_find;
+        const group = (_flatMap_find = (data !== null && data !== void 0 ? data : []).flatMap((itemGroup)=>itemGroup.items).find((item)=>{
+            return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;
+        })) === null || _flatMap_find === void 0 ? void 0 : _flatMap_find.selector.group;
+        return {
+            ...value,
+            group
+        };
+    }, [
+        value,
+        data
+    ]);
+    // Convert the datasource list into menu items with name/group?/value strings that the Select input can work with
     const menuItems = useMemo(()=>{
-        if (data === undefined) return [];
-        return data.map((ds)=>({
-                name: ds.name,
-                value: selectorToOptionValue(ds.selector)
+        return (data !== null && data !== void 0 ? data : []).map((itemGroup)=>({
+                group: itemGroup.group,
+                editLink: itemGroup.editLink,
+                items: itemGroup.items.map((item)=>({
+                        name: item.name,
+                        overriding: item.overriding,
+                        overridden: item.overridden,
+                        group: item.selector.group,
+                        value: selectorToOptionValue(item.selector)
+                    }))
             }));
     }, [
         data
     ]);
     // While loading available values, just use an empty string so MUI select doesn't warn about values out of range
-    const optionValue = isLoading ? '' : selectorToOptionValue(value);
+    const optionValue = isLoading ? '' : 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);
     };
-    // TODO: Does this need a loading indicator of some kind?
+    // 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,
         value: optionValue,
         onChange: handleChange,
-        children: menuItems.map((menuItem)=>/*#__PURE__*/ _jsx(MenuItem, {
-                value: menuItem.value,
-                children: menuItem.name
-            }, menuItem.value))
+        children: menuItems.map((menuItemGroup)=>[
+                /*#__PURE__*/ _jsx(Divider, {}, `${menuItemGroup.group}-divider`),
+                ...menuItemGroup.items.map((menuItem)=>/*#__PURE__*/ _jsx(MenuItem, {
+                        value: menuItem.value,
+                        disabled: menuItem.overridden,
+                        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
+                                    })
+                                }),
+                                /*#__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
+                                    })
+                                })
+                            ]
+                        })
+                    }, menuItem.value))
+            ])
+    });
+}
+export function DatasourceName(props) {
+    const { name , overridden , overriding  } = props;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            `${name} `,
+            !overridden && overriding && /*#__PURE__*/ _jsx(Box, {
+                display: "inline",
+                fontWeight: "normal",
+                color: (theme)=>theme.palette.primary.main,
+                children: "(overriding)"
+            }),
+            overridden && '(overridden)'
+        ]
     });
 }
 // Delimiter used to stringify/parse option values
 const OPTION_VALUE_DELIMITER = '_____';
 // Given a DatasourceSelector, returns a string value like `{kind}_____{name}` that can be used as a Select input value
 function selectorToOptionValue(selector) {
-    var _name;
+    var _selector_group, _selector_name;
     return [
         selector.kind,
-        (_name = selector.name) !== null && _name !== void 0 ? _name : ''
+        (_selector_group = selector.group) !== null && _selector_group !== void 0 ? _selector_group : '',
+        (_selector_name = selector.name) !== null && _selector_name !== void 0 ? _selector_name : ''
     ].join(OPTION_VALUE_DELIMITER);
 }
 // Given an option value name like `{kind}_____{name}`, returns a DatasourceSelector
 function optionValueToSelector(optionValue) {
-    const [kind, name] = optionValue.split(OPTION_VALUE_DELIMITER);
-    if (kind === undefined || name === undefined) {
+    const [kind, group, name] = optionValue.split(OPTION_VALUE_DELIMITER);
+    if (kind === undefined || group === undefined || name === undefined) {
         throw new Error('Invalid optionValue string');
     }
     return {
         kind,
+        group: group === '' ? undefined : group,
         name: name === '' ? undefined : name
     };
 }

package/dist/components/DatasourceSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/DatasourceSelect.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Select, SelectProps, MenuItem } from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { useMemo } from 'react';\nimport { useListDatasources } from '../runtime';\n\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface DatasourceSelectProps extends Omit<SelectProps<string>, OmittedMuiProps> {\n  value: DatasourceSelector;\n  onChange: (next: DatasourceSelector) => void;\n  datasourcePluginKind: string;\n}\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) {\n  const { datasourcePluginKind, value, onChange, ...others } = props;\n  const { data, isLoading } = useListDatasources(datasourcePluginKind);\n\n  // Convert the datasource list into menu items with name/value strings that the Select input can work with\n  const menuItems = useMemo(() => {\n    if (data === undefined) return [];\n    return data.map((ds) => ({ name: ds.name, value: selectorToOptionValue(ds.selector) }));\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(value);\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  // TODO: Does this need a loading indicator of some kind?\n  return (\n    <Select {...others} value={optionValue} onChange={handleChange}>\n      {menuItems.map((menuItem) => (\n        <MenuItem key={menuItem.value} value={menuItem.value}>\n          {menuItem.name}\n        </MenuItem>\n      ))}\n    </Select>\n  );\n}\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n// Given a DatasourceSelector, returns a string value like `{kind}_____{name}` that can be used as a Select input value\nfunction selectorToOptionValue(selector: DatasourceSelector): string {\n  return [selector.kind, selector.name ?? ''].join(OPTION_VALUE_DELIMITER);\n}\n\n// Given an option value name like `{kind}_____{name}`, returns a DatasourceSelector\nfunction optionValueToSelector(optionValue: string): DatasourceSelector {\n  const [kind, name] = optionValue.split(OPTION_VALUE_DELIMITER);\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":["Select","MenuItem","useMemo","useListDatasources","DatasourceSelect","props","datasourcePluginKind","value","onChange","others","data","isLoading","menuItems","undefined","map","ds","name","selectorToOptionValue","selector","optionValue","handleChange","e","next","optionValueToSelector","target","menuItem","OPTION_VALUE_DELIMITER","kind","join","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;AAAA,SAASA,MAAM,EAAeC,QAAQ,QAAQ,eAAe,CAAC;AAE9D,SAASC,OAAO,QAAQ,OAAO,CAAC;AAChC,SAASC,kBAAkB,QAAQ,YAAY,CAAC;AAYhD;;;CAGC,GACD,OAAO,SAASC,gBAAgB,CAACC,KAA4B,EAAE;IAC7D,MAAM,EAAEC,oBAAoB,CAAA,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGJ,KAAK,AAAC;IACnE,MAAM,EAAEK,IAAI,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGR,kBAAkB,CAACG,oBAAoB,CAAC,AAAC;IAErE,0GAA0G;IAC1G,MAAMM,SAAS,GAAGV,OAAO,CAAC,IAAM;QAC9B,IAAIQ,IAAI,KAAKG,SAAS,EAAE,OAAO,EAAE,CAAC;QAClC,OAAOH,IAAI,CAACI,GAAG,CAAC,CAACC,EAAE,GAAM,CAAA;gBAAEC,IAAI,EAAED,EAAE,CAACC,IAAI;gBAAET,KAAK,EAAEU,qBAAqB,CAACF,EAAE,CAACG,QAAQ,CAAC;aAAE,CAAA,AAAC,CAAC,CAAC;IAC1F,CAAC,EAAE;QAACR,IAAI;KAAC,CAAC,AAAC;IAEX,gHAAgH;IAChH,MAAMS,WAAW,GAAGR,SAAS,GAAG,EAAE,GAAGM,qBAAqB,CAACV,KAAK,CAAC,AAAC;IAElE,gGAAgG;IAChG,MAAMa,YAAY,GAAoC,CAACC,CAAC,GAAK;QAC3D,MAAMC,IAAI,GAAGC,qBAAqB,CAACF,CAAC,CAACG,MAAM,CAACjB,KAAK,CAAC,AAAC;QACnDC,QAAQ,CAACc,IAAI,CAAC,CAAC;IACjB,CAAC,AAAC;IAEF,yDAAyD;IACzD,qBACE,KAACtB,MAAM;QAAE,GAAGS,MAAM;QAAEF,KAAK,EAAEY,WAAW;QAAEX,QAAQ,EAAEY,YAAY;kBAC3DR,SAAS,CAACE,GAAG,CAAC,CAACW,QAAQ,iBACtB,KAACxB,QAAQ;gBAAsBM,KAAK,EAAEkB,QAAQ,CAAClB,KAAK;0BACjDkB,QAAQ,CAACT,IAAI;eADDS,QAAQ,CAAClB,KAAK,CAElB,AACZ,CAAC;MACK,CACT;AACJ,CAAC;AAED,kDAAkD;AAClD,MAAMmB,sBAAsB,GAAG,OAAO,AAAC;AAEvC,uHAAuH;AACvH,SAAST,qBAAqB,CAACC,QAA4B,EAAU;QAC5CA,KAAa;IAApC,OAAO;QAACA,QAAQ,CAACS,IAAI;QAAET,CAAAA,KAAa,GAAbA,QAAQ,CAACF,IAAI,cAAbE,KAAa,cAAbA,KAAa,GAAI,EAAE;KAAC,CAACU,IAAI,CAACF,sBAAsB,CAAC,CAAC;AAC3E,CAAC;AAED,oFAAoF;AACpF,SAASH,qBAAqB,CAACJ,WAAmB,EAAsB;IACtE,MAAM,CAACQ,IAAI,EAAEX,IAAI,CAAC,GAAGG,WAAW,CAACU,KAAK,CAACH,sBAAsB,CAAC,AAAC;IAC/D,IAAIC,IAAI,KAAKd,SAAS,IAAIG,IAAI,KAAKH,SAAS,EAAE;QAC5C,MAAM,IAAIiB,KAAK,CAAC,4BAA4B,CAAC,CAAC;IAChD,CAAC;IACD,OAAO;QACLH,IAAI;QACJX,IAAI,EAAEA,IAAI,KAAK,EAAE,GAAGH,SAAS,GAAGG,IAAI;KACrC,CAAC;AACJ,CAAC"}
+{"version":3,"sources":["../../src/components/DatasourceSelect.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport { Select, SelectProps, MenuItem, Stack, Divider, ListItemText, Chip, IconButton, Box } from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { useMemo } from 'react';\nimport { useListDatasourceSelectItems } from '../runtime';\n\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface DatasourceSelectProps extends Omit<SelectProps<string>, OmittedMuiProps> {\n  value: DatasourceSelector;\n  onChange: (next: DatasourceSelector) => void;\n  datasourcePluginKind: string;\n}\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) {\n  const { datasourcePluginKind, value, onChange, ...others } = props;\n  const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind);\n\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        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 = () => {};\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}>\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              <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 }) {\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// Given a DatasourceSelector, returns a string value like `{kind}_____{name}` that can be used as a Select input value\nfunction selectorToOptionValue(selector: DatasourceSelector): string {\n  return [selector.kind, selector.group ?? '', selector.name ?? ''].join(OPTION_VALUE_DELIMITER);\n}\n\n// Given an option value name like `{kind}_____{name}`, returns a DatasourceSelector\nfunction optionValueToSelector(optionValue: string): DatasourceSelector {\n  const [kind, group, name] = optionValue.split(OPTION_VALUE_DELIMITER);\n  if (kind === undefined || group === undefined || name === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    kind,\n    group: group === '' ? undefined : group,\n    name: name === '' ? undefined : name,\n  };\n}\n"],"names":["OpenInNewIcon","Select","MenuItem","Stack","Divider","ListItemText","Chip","IconButton","Box","useMemo","useListDatasourceSelectItems","DatasourceSelect","props","datasourcePluginKind","value","onChange","others","data","isLoading","defaultValue","group","flatMap","itemGroup","items","find","item","kind","selector","name","overridden","menuItems","map","editLink","overriding","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","split","Error"],"mappings":"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"}