@perses-dev/plugin-system 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-histogram-types-78c5104

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js

@@ -10,80 +10,51 @@
 // 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { zodResolver } from '@hookform/resolvers/zod';
-import { PluginEditor } from '../PluginEditor';
+import { Box, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';
+import { DiscardChangesConfirmationDialog, FormActions } from '@perses-dev/components';
+import { useState } from 'react';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
+import { useValidationSchemas } from '../../context';
 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
-        }
-    };
-}
+import { PluginEditor } from '../PluginEditor';
 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 { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete } = props;
     const [isDiscardDialogOpened, setDiscardDialogOpened] = useState(false);
-    const [action, setAction] = useState(initialAction);
     const titleAction = getTitleAction(action, isDraft);
     const submitText = getSubmitText(action, isDraft);
+    const { datasourceEditorSchema } = useValidationSchemas();
     const form = useForm({
-        resolver: zodResolver(datasourceEditValidationSchema),
+        resolver: zodResolver(datasourceEditorSchema),
         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
-        }
+        defaultValues: initialDatasourceDefinition
     });
-    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
-            }
-        });
+    /*
+   * Remove empty fields that are optional
+   */ function clearFormData(data) {
+        const result = {
+            ...data
+        };
+        if (result.spec.display?.name === undefined && result.spec.display?.description === undefined) {
+            delete result.spec.display;
+        }
+        return result;
+    }
+    const processForm = (data)=>{
+        onSave(clearFormData(data));
     };
     // 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)) {
+    function handleCancel() {
+        if (JSON.stringify(initialDatasourceDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {
             setDiscardDialogOpened(true);
         } else {
             onClose();
         }
-    }, [
-        state,
-        initialState,
-        setDiscardDialogOpened,
-        onClose
-    ]);
+    }
     return /*#__PURE__*/ _jsxs(FormProvider, {
         ...form,
         children: [
@@ -102,61 +73,15 @@ export function DatasourceEditorForm(props) {
                             " 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__*/ _jsx(FormActions, {
+                        action: action,
+                        submitText: submitText,
+                        isReadonly: isReadonly,
+                        isValid: form.formState.isValid,
+                        onActionChange: onActionChange,
+                        onSubmit: form.handleSubmit(processForm),
+                        onDelete: onDelete,
+                        onCancel: handleCancel
                     })
                 ]
             }),
@@ -175,10 +100,9 @@ export function DatasourceEditorForm(props) {
                                 item: true,
                                 xs: 4,
                                 children: /*#__PURE__*/ _jsx(Controller, {
+                                    control: form.control,
                                     name: "name",
-                                    render: ({ field, fieldState })=>{
-                                        var _fieldState_error;
-                                        return /*#__PURE__*/ _jsx(TextField, {
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                             ...field,
                                             required: true,
                                             fullWidth: true,
@@ -192,25 +116,21 @@ export function DatasourceEditorForm(props) {
                                                 readOnly: action === 'read'
                                             },
                                             error: !!fieldState.error,
-                                            helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? '',
                                             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, {
+                                    control: form.control,
+                                    name: "spec.display.name",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                             ...field,
                                             fullWidth: true,
                                             name: "title",
@@ -222,27 +142,21 @@ export function DatasourceEditorForm(props) {
                                                 readOnly: action === 'read'
                                             },
                                             error: !!fieldState.error,
-                                            helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? '',
                                             onChange: (event)=>{
-                                                setState((draft)=>{
-                                                    field.onChange(event);
-                                                    if (draft.spec.display) {
-                                                        draft.spec.display.name = event.target.value;
-                                                    }
-                                                });
+                                                field.onChange(event);
                                             }
-                                        });
-                                    }
+                                        })
                                 })
                             }),
                             /*#__PURE__*/ _jsx(Grid, {
                                 item: true,
                                 xs: 12,
                                 children: /*#__PURE__*/ _jsx(Controller, {
-                                    name: "description",
-                                    render: ({ field, fieldState })=>{
-                                        var _fieldState_error;
-                                        return /*#__PURE__*/ _jsx(TextField, {
+                                    control: form.control,
+                                    name: "spec.display.description",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                             ...field,
                                             fullWidth: true,
                                             name: "description",
@@ -254,17 +168,12 @@ export function DatasourceEditorForm(props) {
                                                 readOnly: action === 'read'
                                             },
                                             error: !!fieldState.error,
-                                            helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
-                                                setState((draft)=>{
-                                                    if (draft.spec.display) {
-                                                        draft.spec.display.description = event.target.value;
-                                                    }
-                                                });
                                             }
-                                        });
-                                    }
+                                        })
                                 })
                             }),
                             /*#__PURE__*/ _jsx(Grid, {
@@ -276,28 +185,26 @@ export function DatasourceEditorForm(props) {
                                 children: /*#__PURE__*/ _jsxs(Stack, {
                                     children: [
                                         /*#__PURE__*/ _jsx(Controller, {
-                                            name: "default",
+                                            control: form.control,
+                                            name: "spec.default",
                                             render: ({ field })=>/*#__PURE__*/ _jsx(FormControlLabel, {
-                                                    ...field,
+                                                    label: "Set as default",
                                                     control: /*#__PURE__*/ _jsx(Switch, {
-                                                        checked: state.spec.default,
+                                                        ...field,
+                                                        checked: !!field.value,
                                                         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,
+                                                form.getValues().spec.plugin.kind,
                                                 " to be used"
                                             ]
                                         })
@@ -312,17 +219,30 @@ export function DatasourceEditorForm(props) {
                         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(Controller, {
+                        control: form.control,
+                        name: "spec.plugin",
+                        render: ({ field })=>/*#__PURE__*/ _jsx(PluginEditor, {
+                                width: "100%",
+                                pluginTypes: [
+                                    'Datasource'
+                                ],
+                                pluginKindLabel: "Source",
+                                value: {
+                                    selection: {
+                                        type: 'Datasource',
+                                        kind: field.value.kind
+                                    },
+                                    spec: field.value.spec
+                                },
+                                isReadonly: action === 'read',
+                                onChange: (v)=>{
+                                    field.onChange({
+                                        kind: v.selection.kind,
+                                        spec: v.spec
+                                    });
+                                }
+                            })
                     })
                 ]
             }),

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

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

package/dist/components/DatasourceSelect.d.ts

@@ -1,7 +1,8 @@
-import { SelectProps } from '@mui/material';
+import { OutlinedSelectProps, BaseSelectProps } from '@mui/material';
 import { DatasourceSelector } from '@perses-dev/core';
+import { ReactElement } from 'react';
 type OmittedMuiProps = 'children' | 'value' | 'onChange';
-export interface DatasourceSelectProps extends Omit<SelectProps<string>, OmittedMuiProps> {
+export interface DatasourceSelectProps extends Omit<OutlinedSelectProps & BaseSelectProps<string>, OmittedMuiProps> {
     value: DatasourceSelector;
     onChange: (next: DatasourceSelector) => void;
     datasourcePluginKind: string;
@@ -11,11 +12,11 @@ export interface DatasourceSelectProps extends Omit<SelectProps<string>, Omitted
  * 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): import("react/jsx-runtime").JSX.Element;
+export declare function DatasourceSelect(props: DatasourceSelectProps): ReactElement;
 export declare function DatasourceName(props: {
     name: string;
     overridden?: boolean;
     overriding?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): ReactElement;
 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":"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"}
+{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../src/components/DatasourceSelect.tsx"],"names":[],"mappings":"AAcA,OAAO,EAUL,mBAAmB,EACnB,eAAe,EAChB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAK9C,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,mBAAmB,GAAG,eAAe,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACjH,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAuF3E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CAahH"}

package/dist/components/DatasourceSelect.js

@@ -23,10 +23,9 @@ import { useListDatasourceSelectItems } from '../runtime';
     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)=>{
+        const group = (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;
+        })?.selector.group;
         return {
             ...value,
             group
@@ -37,20 +36,17 @@ import { useListDatasourceSelectItems } from '../runtime';
     ]);
     // Convert the datasource list into menu items with name/group?/value strings that the Select input can work with
     const menuItems = useMemo(()=>{
-        return (data !== null && data !== void 0 ? data : []).map((itemGroup)=>({
+        return (data ?? []).map((itemGroup)=>({
                 group: itemGroup.group,
                 editLink: itemGroup.editLink,
-                items: itemGroup.items.map((item)=>{
-                    var _item_saved;
-                    return {
+                items: itemGroup.items.map((item)=>({
                         name: item.name,
                         overriding: item.overriding,
                         overridden: item.overridden,
-                        saved: (_item_saved = item.saved) !== null && _item_saved !== void 0 ? _item_saved : true,
+                        saved: item.saved ?? true,
                         group: item.selector.group,
                         value: selectorToOptionValue(item.selector)
-                    };
-                })
+                    }))
             }));
     }, [
         data
@@ -143,11 +139,10 @@ const OPTION_VALUE_DELIMITER = '_____';
  * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.
  * @param selector
  */ function selectorToOptionValue(selector) {
-    var _selector_group, _selector_name;
     return [
         selector.kind,
-        (_selector_group = selector.group) !== null && _selector_group !== void 0 ? _selector_group : '',
-        (_selector_name = selector.name) !== null && _selector_name !== void 0 ? _selector_name : ''
+        selector.group ?? '',
+        selector.name ?? ''
     ].join(OPTION_VALUE_DELIMITER);
 }
 /**

package/dist/components/DatasourceSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/DatasourceSelect.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport { Select, SelectProps, MenuItem, Stack, Divider, ListItemText, Chip, IconButton, Box } from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { useMemo } from 'react';\nimport { DatasourceSelectItemSelector, useListDatasourceSelectItems } from '../runtime';\n\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface DatasourceSelectProps extends Omit<SelectProps<string>, OmittedMuiProps> {\n  value: DatasourceSelector;\n  onChange: (next: DatasourceSelector) => void;\n  datasourcePluginKind: string;\n  project?: string;\n}\n\n/**\n * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for\n * the input deal with a `DatasourceSelector`.\n */\nexport function DatasourceSelect(props: DatasourceSelectProps) {\n  const { datasourcePluginKind, value, project, onChange, ...others } = props;\n  const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind, project);\n  // Rebuild the group of the value if not provided\n  const defaultValue = useMemo(() => {\n    const group = (data ?? [])\n      .flatMap((itemGroup) => itemGroup.items)\n      .find((item) => {\n        return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;\n      })?.selector.group;\n    return { ...value, group };\n  }, [value, data]);\n\n  // Convert the datasource list into menu items with name/group?/value strings that the Select input can work with\n  const menuItems = useMemo(() => {\n    return (data ?? []).map((itemGroup) => ({\n      group: itemGroup.group,\n      editLink: itemGroup.editLink,\n      items: itemGroup.items.map((item) => ({\n        name: item.name,\n        overriding: item.overriding,\n        overridden: item.overridden,\n        saved: item.saved ?? true,\n        group: item.selector.group,\n        value: selectorToOptionValue(item.selector),\n      })),\n    }));\n  }, [data]);\n\n  // While loading available values, just use an empty string so MUI select doesn't warn about values out of range\n  const optionValue = isLoading ? '' : selectorToOptionValue(defaultValue);\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange: SelectProps<string>['onChange'] = (e) => {\n    const next = optionValueToSelector(e.target.value);\n    onChange(next);\n  };\n\n  // We use a fake action event when we click on the action of the chip (hijack the \"delete\" feature).\n  // This is because the href link action is on the `deleteIcon` property already, but the `onDelete` property\n  // controls its visibility.\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const fakeActionEvent = () => {};\n\n  // TODO:\n  //  - Does this need a loading indicator of some kind?\n  //  - The group's edit link is not clickable once selected.\n  //  - The group's edit link is disabled if datasource is overridden.\n  //    Ref: https://github.com/mui/material-ui/issues/36572\n  return (\n    <Select {...others} value={optionValue} onChange={handleChange}>\n      {menuItems.map((menuItemGroup) => [\n        <Divider key={`${menuItemGroup.group}-divider`} />,\n        ...menuItemGroup.items.map((menuItem) => (\n          <MenuItem key={menuItem.value} value={menuItem.value} disabled={menuItem.overridden || !menuItem.saved}>\n            <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\">\n              <ListItemText>\n                <DatasourceName\n                  name={menuItem.name}\n                  overridden={menuItem.overridden}\n                  overriding={menuItem.overriding}\n                />\n              </ListItemText>\n              {!menuItem.saved && <ListItemText>Save the dashboard to enable this datasource</ListItemText>}\n              <ListItemText style={{ textAlign: 'right' }}>\n                {menuItemGroup.group && menuItemGroup.group.length > 0 && (\n                  <Chip\n                    disabled={false}\n                    label={menuItemGroup.group}\n                    size=\"small\"\n                    onDelete={menuItemGroup.editLink ? fakeActionEvent : undefined}\n                    deleteIcon={\n                      menuItemGroup.editLink ? (\n                        <IconButton href={menuItemGroup.editLink} target=\"_blank\">\n                          <OpenInNewIcon fontSize=\"small\" />\n                        </IconButton>\n                      ) : undefined\n                    }\n                  />\n                )}\n              </ListItemText>\n            </Stack>\n          </MenuItem>\n        )),\n      ])}\n    </Select>\n  );\n}\n\nexport function DatasourceName(props: { name: string; overridden?: boolean; overriding?: boolean }) {\n  const { name, overridden, overriding } = props;\n  return (\n    <>\n      {`${name} `}\n      {!overridden && overriding && (\n        <Box display=\"inline\" fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {overridden && '(overridden)'}\n    </>\n  );\n}\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a DatasourceSelectItemSelector,\n * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.\n * @param selector\n */\nfunction selectorToOptionValue(selector: DatasourceSelectItemSelector): string {\n  return [selector.kind, selector.group ?? '', selector.name ?? ''].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{kind}_____{group}_____{name}`,\n * returns a DatasourceSelector to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelector(optionValue: string): DatasourceSelector {\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const kind = words[0];\n  const name = words[2];\n  if (kind === undefined || name === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    kind,\n    name: name === '' ? undefined : name,\n  };\n}\n"],"names":["OpenInNewIcon","Select","MenuItem","Stack","Divider","ListItemText","Chip","IconButton","Box","useMemo","useListDatasourceSelectItems","DatasourceSelect","props","datasourcePluginKind","value","project","onChange","others","data","isLoading","defaultValue","group","flatMap","itemGroup","items","find","item","kind","selector","name","overridden","menuItems","map","editLink","overriding","saved","selectorToOptionValue","optionValue","handleChange","e","next","optionValueToSelector","target","fakeActionEvent","menuItemGroup","menuItem","disabled","direction","alignItems","justifyContent","width","DatasourceName","style","textAlign","length","label","size","onDelete","undefined","deleteIcon","href","fontSize","display","fontWeight","color","theme","palette","primary","main","OPTION_VALUE_DELIMITER","join","words","split","Error"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/DatasourceSelect.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport {\n  Select,\n  SelectProps,\n  MenuItem,\n  Stack,\n  Divider,\n  ListItemText,\n  Chip,\n  IconButton,\n  Box,\n  OutlinedSelectProps,\n  BaseSelectProps,\n} from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { ReactElement, useMemo } from 'react';\nimport { DatasourceSelectItemSelector, useListDatasourceSelectItems } from '../runtime';\n\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface DatasourceSelectProps extends Omit<OutlinedSelectProps & BaseSelectProps<string>, OmittedMuiProps> {\n  value: DatasourceSelector;\n  onChange: (next: DatasourceSelector) => void;\n  datasourcePluginKind: string;\n  project?: string;\n}\n\n/**\n * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for\n * the input deal with a `DatasourceSelector`.\n */\nexport function DatasourceSelect(props: DatasourceSelectProps): ReactElement {\n  const { datasourcePluginKind, value, project, onChange, ...others } = props;\n  const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind, project);\n  // Rebuild the group of the value if not provided\n  const defaultValue = useMemo(() => {\n    const group = (data ?? [])\n      .flatMap((itemGroup) => itemGroup.items)\n      .find((item) => {\n        return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;\n      })?.selector.group;\n    return { ...value, group };\n  }, [value, data]);\n\n  // Convert the datasource list into menu items with name/group?/value strings that the Select input can work with\n  const menuItems = useMemo(() => {\n    return (data ?? []).map((itemGroup) => ({\n      group: itemGroup.group,\n      editLink: itemGroup.editLink,\n      items: itemGroup.items.map((item) => ({\n        name: item.name,\n        overriding: item.overriding,\n        overridden: item.overridden,\n        saved: item.saved ?? true,\n        group: item.selector.group,\n        value: selectorToOptionValue(item.selector),\n      })),\n    }));\n  }, [data]);\n\n  // While loading available values, just use an empty string so MUI select doesn't warn about values out of range\n  const optionValue = isLoading ? '' : selectorToOptionValue(defaultValue);\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange: SelectProps<string>['onChange'] = (e) => {\n    const next = optionValueToSelector(e.target.value);\n    onChange(next);\n  };\n\n  // We use a fake action event when we click on the action of the chip (hijack the \"delete\" feature).\n  // This is because the href link action is on the `deleteIcon` property already, but the `onDelete` property\n  // controls its visibility.\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const fakeActionEvent = (): void => {};\n\n  // TODO:\n  //  - Does this need a loading indicator of some kind?\n  //  - The group's edit link is not clickable once selected.\n  //  - The group's edit link is disabled if datasource is overridden.\n  //    Ref: https://github.com/mui/material-ui/issues/36572\n  return (\n    <Select {...others} value={optionValue} onChange={handleChange}>\n      {menuItems.map((menuItemGroup) => [\n        <Divider key={`${menuItemGroup.group}-divider`} />,\n        ...menuItemGroup.items.map((menuItem) => (\n          <MenuItem key={menuItem.value} value={menuItem.value} disabled={menuItem.overridden || !menuItem.saved}>\n            <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\">\n              <ListItemText>\n                <DatasourceName\n                  name={menuItem.name}\n                  overridden={menuItem.overridden}\n                  overriding={menuItem.overriding}\n                />\n              </ListItemText>\n              {!menuItem.saved && <ListItemText>Save the dashboard to enable this datasource</ListItemText>}\n              <ListItemText style={{ textAlign: 'right' }}>\n                {menuItemGroup.group && menuItemGroup.group.length > 0 && (\n                  <Chip\n                    disabled={false}\n                    label={menuItemGroup.group}\n                    size=\"small\"\n                    onDelete={menuItemGroup.editLink ? fakeActionEvent : undefined}\n                    deleteIcon={\n                      menuItemGroup.editLink ? (\n                        <IconButton href={menuItemGroup.editLink} target=\"_blank\">\n                          <OpenInNewIcon fontSize=\"small\" />\n                        </IconButton>\n                      ) : undefined\n                    }\n                  />\n                )}\n              </ListItemText>\n            </Stack>\n          </MenuItem>\n        )),\n      ])}\n    </Select>\n  );\n}\n\nexport function DatasourceName(props: { name: string; overridden?: boolean; overriding?: boolean }): ReactElement {\n  const { name, overridden, overriding } = props;\n  return (\n    <>\n      {`${name} `}\n      {!overridden && overriding && (\n        <Box display=\"inline\" fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {overridden && '(overridden)'}\n    </>\n  );\n}\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a DatasourceSelectItemSelector,\n * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.\n * @param selector\n */\nfunction selectorToOptionValue(selector: DatasourceSelectItemSelector): string {\n  return [selector.kind, selector.group ?? '', selector.name ?? ''].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{kind}_____{group}_____{name}`,\n * returns a DatasourceSelector to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelector(optionValue: string): DatasourceSelector {\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const kind = words[0];\n  const name = words[2];\n  if (kind === undefined || name === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    kind,\n    name: name === '' ? undefined : name,\n  };\n}\n"],"names":["OpenInNewIcon","Select","MenuItem","Stack","Divider","ListItemText","Chip","IconButton","Box","useMemo","useListDatasourceSelectItems","DatasourceSelect","props","datasourcePluginKind","value","project","onChange","others","data","isLoading","defaultValue","group","flatMap","itemGroup","items","find","item","kind","selector","name","overridden","menuItems","map","editLink","overriding","saved","selectorToOptionValue","optionValue","handleChange","e","next","optionValueToSelector","target","fakeActionEvent","menuItemGroup","menuItem","disabled","direction","alignItems","justifyContent","width","DatasourceName","style","textAlign","length","label","size","onDelete","undefined","deleteIcon","href","fontSize","display","fontWeight","color","theme","palette","primary","main","OPTION_VALUE_DELIMITER","join","words","split","Error"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"HTTPSettingsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkB,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtE,OAAc,EAAY,YAAY,EAAY,MAAM,OAAO,CAAC;AAOhE,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,kBAAkB,CAAC;IACtC,gBAAgB,EAAE,kBAAkB,CAAC;CACtC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAwb1E"}