@perses-dev/plugin-system 0.0.0-snapshot-panel-extra-content-3-17f9c42 → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js

@@ -0,0 +1,342 @@
+// 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 { 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(datasourceDefinition) {
+    var _datasourceDefinition_spec_display, _datasourceDefinition_spec_display1;
+    var _datasourceDefinition_spec_display_name, _datasourceDefinition_spec_display_description;
+    const patchedDisplay = {
+        name: (_datasourceDefinition_spec_display_name = (_datasourceDefinition_spec_display = datasourceDefinition.spec.display) === null || _datasourceDefinition_spec_display === void 0 ? void 0 : _datasourceDefinition_spec_display.name) !== null && _datasourceDefinition_spec_display_name !== void 0 ? _datasourceDefinition_spec_display_name : '',
+        description: (_datasourceDefinition_spec_display_description = (_datasourceDefinition_spec_display1 = datasourceDefinition.spec.display) === null || _datasourceDefinition_spec_display1 === void 0 ? void 0 : _datasourceDefinition_spec_display1.description) !== null && _datasourceDefinition_spec_display_description !== void 0 ? _datasourceDefinition_spec_display_description : ''
+    };
+    return {
+        name: datasourceDefinition.name,
+        spec: {
+            ...datasourceDefinition.spec,
+            display: patchedDisplay
+        }
+    };
+}
+export function DatasourceEditorForm(props) {
+    var _state_spec_display, _state_spec_display1;
+    const { initialDatasourceDefinition, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;
+    const initialState = getInitialState(initialDatasourceDefinition);
+    const [state, setState] = useImmer(initialState);
+    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.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 = ()=>{
+        var _state_spec_display, _state_spec_display1, _state_spec_display2, _state_spec_display3;
+        // reset display attributes to undefined when empty, because we don't want to save empty strings
+        onSave(state.name, {
+            ...state.spec,
+            display: {
+                name: ((_state_spec_display = state.spec.display) === null || _state_spec_display === void 0 ? void 0 : _state_spec_display.name) === '' ? undefined : (_state_spec_display1 = state.spec.display) === null || _state_spec_display1 === void 0 ? void 0 : _state_spec_display1.name,
+                description: ((_state_spec_display2 = state.spec.display) === null || _state_spec_display2 === void 0 ? void 0 : _state_spec_display2.description) === '' ? undefined : (_state_spec_display3 = state.spec.display) === null || _state_spec_display3 === void 0 ? void 0 : _state_spec_display3.description
+            }
+        });
+    };
+    // 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(initialState) !== JSON.stringify(state)) {
+            setDiscardDialogOpened(true);
+        } else {
+            onClose();
+        }
+    }, [
+        state,
+        initialState,
+        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;
+                                        return /*#__PURE__*/ _jsx(TextField, {
+                                            ...field,
+                                            required: true,
+                                            fullWidth: true,
+                                            name: "name",
+                                            label: "Name",
+                                            InputLabelProps: {
+                                                shrink: action === 'read' ? true : undefined
+                                            },
+                                            InputProps: {
+                                                disabled: action === 'update' && !isDraft,
+                                                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.name = event.target.value;
+                                                });
+                                            }
+                                        });
+                                    }
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 8,
+                                children: /*#__PURE__*/ _jsx(Controller, {
+                                    name: "title",
+                                    render: ({ field, fieldState })=>{
+                                        var _fieldState_error;
+                                        return /*#__PURE__*/ _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;
+                                        return /*#__PURE__*/ _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 { Action, DatasourceDefinition, DatasourceSpec } from '@perses-dev/core';\nimport { Box, Button, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport { 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 { 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(datasourceDefinition: DatasourceDefinition) {\n  const patchedDisplay = {\n    name: datasourceDefinition.spec.display?.name ?? '',\n    description: datasourceDefinition.spec.display?.description ?? '',\n  };\n\n  return {\n    name: datasourceDefinition.name,\n    spec: {\n      ...datasourceDefinition.spec,\n      display: patchedDisplay,\n    },\n  };\n}\n\ninterface DatasourceEditorFormProps {\n  initialDatasourceDefinition: DatasourceDefinition;\n  initialAction: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onSave: (name: string, spec: DatasourceSpec) => void;\n  onClose: DispatchWithoutAction;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm(props: DatasourceEditorFormProps) {\n  const { initialDatasourceDefinition, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;\n\n  const initialState = getInitialState(initialDatasourceDefinition);\n  const [state, setState] = useImmer(initialState);\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.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    // reset display attributes to undefined when empty, because we don't want to save empty strings\n    onSave(state.name, {\n      ...state.spec,\n      display: {\n        name: state.spec.display?.name === '' ? undefined : state.spec.display?.name,\n        description: state.spec.display?.description === '' ? undefined : state.spec.display?.description,\n      },\n    });\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(initialState) !== JSON.stringify(state)) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }, [state, initialState, 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' && !isDraft,\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.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","useCallback","useState","DiscardChangesConfirmationDialog","Controller","FormProvider","useForm","zodResolver","PluginEditor","getSubmitText","getTitleAction","datasourceEditValidationSchema","getInitialState","datasourceDefinition","patchedDisplay","name","spec","display","description","DatasourceEditorForm","props","state","initialDatasourceDefinition","initialAction","isDraft","isReadonly","onSave","onClose","onDelete","initialState","setState","isDiscardDialogOpened","setDiscardDialogOpened","action","setAction","titleAction","submitText","form","resolver","mode","defaultValues","title","default","processForm","undefined","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","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

@@ -1,16 +1,21 @@
-/// <reference types="react" />
 import { SelectProps } from '@mui/material';
 import { DatasourceSelector } from '@perses-dev/core';
-declare type OmittedMuiProps = 'children' | 'value' | 'onChange';
+type OmittedMuiProps = 'children' | 'value' | 'onChange';
 export interface DatasourceSelectProps extends Omit<SelectProps<string>, OmittedMuiProps> {
     value: DatasourceSelector;
     onChange: (next: DatasourceSelector) => void;
     datasourcePluginKind: string;
+    project?: string;
 }
 /**
  * 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 declare function DatasourceSelect(props: DatasourceSelectProps): JSX.Element;
+export declare function DatasourceSelect(props: DatasourceSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatasourceName(props: {
+    name: string;
+    overridden?: boolean;
+    overriding?: boolean;
+}): import("react/jsx-runtime").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,KAAK,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;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAuF5D;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,2CAajG"}

package/dist/components/DatasourceSelect.js

@@ -10,57 +10,154 @@
 // 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 { datasourcePluginKind, value, project, onChange, ...others } = props;
+    const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind, project);
+    // 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)=>{
+                    var _item_saved;
+                    return {
+                        name: item.name,
+                        overriding: item.overriding,
+                        overridden: item.overridden,
+                        saved: (_item_saved = item.saved) !== null && _item_saved !== void 0 ? _item_saved : true,
+                        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 || !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
+                                    })
+                                })
+                            ]
+                        })
+                    }, 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;
+/**
+ * Given a DatasourceSelectItemSelector,
+ * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.
+ * @param selector
+ */ function selectorToOptionValue(selector) {
+    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);
+/**
+ * Given an option value name like `{kind}_____{group}_____{name}`,
+ * returns a DatasourceSelector to be used by the query data model.
+ * @param optionValue
+ */ function optionValueToSelector(optionValue) {
+    const words = optionValue.split(OPTION_VALUE_DELIMITER);
+    const kind = words[0];
+    const name = words[2];
     if (kind === undefined || name === undefined) {
         throw new Error('Invalid optionValue string');
     }