@perses-dev/plugin-system 0.41.1 → 0.42.0

package/dist/cjs/validation/role.js

@@ -0,0 +1,85 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    roleValidationSchema: function() {
+        return roleValidationSchema;
+    },
+    globalRoleValidationSchema: function() {
+        return globalRoleValidationSchema;
+    },
+    rolesEditorValidationSchema: function() {
+        return rolesEditorValidationSchema;
+    }
+});
+const _zod = require("zod");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const permissionValidationSchema = _zod.z.object({
+    // TODO: use SCOPE & ACTIONS constants
+    actions: _zod.z.array(_zod.z.enum([
+        '*',
+        'create',
+        'read',
+        'update',
+        'delete'
+    ])).nonempty('Must contains at least 1 action'),
+    scopes: _zod.z.array(_zod.z.enum([
+        '*',
+        'Dashboard',
+        'Datasource',
+        'Folder',
+        'GlobalDatasource',
+        'GlobalRole',
+        'GlobalRoleBinding',
+        'GlobalSecret',
+        'GlobalVariable',
+        'Project',
+        'Role',
+        'RoleBinding',
+        'Secret',
+        'User',
+        'Variable'
+    ])).nonempty('Must contains at least 1 scope')
+});
+const roleValidationSchema = _zod.z.object({
+    kind: _zod.z.literal('Role'),
+    metadata: _zod.z.object({
+        name: _pluginsystem.resourceIdValidationSchema,
+        project: _pluginsystem.resourceIdValidationSchema
+    }),
+    spec: _zod.z.object({
+        permissions: _zod.z.array(permissionValidationSchema)
+    })
+});
+const globalRoleValidationSchema = _zod.z.object({
+    kind: _zod.z.literal('GlobalRole'),
+    metadata: _zod.z.object({
+        name: _pluginsystem.resourceIdValidationSchema
+    }),
+    spec: _zod.z.object({
+        permissions: _zod.z.array(permissionValidationSchema)
+    })
+});
+const rolesEditorValidationSchema = _zod.z.discriminatedUnion('kind', [
+    roleValidationSchema,
+    globalRoleValidationSchema
+]);

package/dist/cjs/validation/rolebinding.js

@@ -0,0 +1,55 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "roleBindingsEditorValidationSchema", {
+    enumerable: true,
+    get: function() {
+        return roleBindingsEditorValidationSchema;
+    }
+});
+const _zod = require("zod");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const subjectValidationSchema = _zod.z.object({
+    kind: _zod.z.enum([
+        'User'
+    ]),
+    name: _pluginsystem.resourceIdValidationSchema
+});
+const roleBindingValidationSchema = _zod.z.object({
+    kind: _zod.z.literal('RoleBinding'),
+    metadata: _zod.z.object({
+        name: _pluginsystem.resourceIdValidationSchema,
+        project: _pluginsystem.resourceIdValidationSchema
+    }),
+    spec: _zod.z.object({
+        role: _pluginsystem.resourceIdValidationSchema,
+        subjects: _zod.z.array(subjectValidationSchema).nonempty()
+    })
+});
+const globalRoleBindingValidationSchema = _zod.z.object({
+    kind: _zod.z.literal('GlobalRoleBinding'),
+    metadata: _zod.z.object({
+        name: _pluginsystem.resourceIdValidationSchema
+    }),
+    spec: _zod.z.object({
+        role: _pluginsystem.resourceIdValidationSchema,
+        subjects: _zod.z.array(subjectValidationSchema)
+    })
+});
+const roleBindingsEditorValidationSchema = _zod.z.discriminatedUnion('kind', [
+    roleBindingValidationSchema,
+    globalRoleBindingValidationSchema
+]);

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

@@ -1,15 +1,15 @@
-import { Datasource } from '@perses-dev/core';
-import { Dispatch, DispatchWithoutAction } from 'react';
-import { Action } from '../../utils';
-interface DatasourceEditorFormProps<T extends Datasource> {
-    initialDatasource: T;
+import { Action, DatasourceSpec } from '@perses-dev/core';
+import { DispatchWithoutAction } from 'react';
+interface DatasourceEditorFormProps {
+    initialName: string;
+    initialSpec: DatasourceSpec;
     initialAction: Action;
     isDraft: boolean;
     isReadonly?: boolean;
-    onSave: Dispatch<T>;
+    onSave: (name: string, spec: DatasourceSpec) => void;
     onClose: DispatchWithoutAction;
     onDelete?: DispatchWithoutAction;
 }
-export declare function DatasourceEditorForm<T extends Datasource>(props: DatasourceEditorFormProps<T>): JSX.Element;
+export declare function DatasourceEditorForm(props: DatasourceEditorFormProps): JSX.Element;
 export {};
 //# sourceMappingURL=DatasourceEditorForm.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatasourceEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAW,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAc,EAAE,QAAQ,EAAE,qBAAqB,EAAyB,MAAM,OAAO,CAAC;AAKtF,OAAO,EAAE,MAAM,EAAiC,MAAM,aAAa,CAAC;AAsBpE,UAAU,yBAAyB,CAAC,CAAC,SAAS,UAAU;IACtD,iBAAiB,EAAE,CAAC,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpB,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,UAAU,EAAE,KAAK,EAAE,yBAAyB,CAAC,CAAC,CAAC,eAiO7F"}
+{"version":3,"file":"DatasourceEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,MAAM,EAAW,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEnE,OAAO,EAAE,qBAAqB,EAAyB,MAAM,OAAO,CAAC;AA2BrE,UAAU,yBAAyB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,cAAc,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACrD,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eA2OpE"}

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js

@@ -13,7 +13,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useImmer } from 'use-immer';
 import { Box, Button, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { DiscardChangesConfirmationDialog } from '@perses-dev/components';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -23,26 +23,26 @@ import { datasourceEditValidationSchema } from '../../validation';
 /**
  * This preprocessing ensures that we always have a defined object for the `display` property
  * @param datasource
- */ function getInitialState(datasource) {
-    var _datasource_spec_display, _datasource_spec_display1;
-    var _datasource_spec_display_name, _datasource_spec_display_description;
+ */ function getInitialState(name, spec) {
+    var _spec_display, _spec_display1;
+    var _spec_display_name, _spec_display_description;
     const patchedDisplay = {
-        name: (_datasource_spec_display_name = (_datasource_spec_display = datasource.spec.display) === null || _datasource_spec_display === void 0 ? void 0 : _datasource_spec_display.name) !== null && _datasource_spec_display_name !== void 0 ? _datasource_spec_display_name : '',
-        description: (_datasource_spec_display_description = (_datasource_spec_display1 = datasource.spec.display) === null || _datasource_spec_display1 === void 0 ? void 0 : _datasource_spec_display1.description) !== null && _datasource_spec_display_description !== void 0 ? _datasource_spec_display_description : ''
+        name: (_spec_display_name = (_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.name) !== null && _spec_display_name !== void 0 ? _spec_display_name : '',
+        description: (_spec_display_description = (_spec_display1 = spec.display) === null || _spec_display1 === void 0 ? void 0 : _spec_display1.description) !== null && _spec_display_description !== void 0 ? _spec_display_description : ''
     };
     return {
-        ...datasource,
+        name: name,
         spec: {
-            ...datasource.spec,
+            ...spec,
             display: patchedDisplay
         }
     };
 }
 export function DatasourceEditorForm(props) {
     var _state_spec_display, _state_spec_display1;
-    const { initialDatasource , initialAction , isDraft , isReadonly , onSave , onClose , onDelete  } = props;
-    const patchedInitialDatasource = getInitialState(initialDatasource);
-    const [state, setState] = useImmer(patchedInitialDatasource);
+    const { initialName , initialSpec , initialAction , isDraft , isReadonly , onSave , onClose , onDelete  } = props;
+    const initialState = getInitialState(initialName, initialSpec);
+    const [state, setState] = useImmer(initialState);
     const [isDiscardDialogOpened, setDiscardDialogOpened] = useState(false);
     const [action, setAction] = useState(initialAction);
     const titleAction = getTitleAction(action, isDraft);
@@ -51,28 +51,38 @@ export function DatasourceEditorForm(props) {
         resolver: zodResolver(datasourceEditValidationSchema),
         mode: 'onBlur',
         defaultValues: {
-            name: state.metadata.name,
+            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 = ()=>{
-        onSave(state);
+        var _state_spec_display;
+        // reset display name to undefined when empty, because we don't want an empty string as value
+        const name = (_state_spec_display = state.spec.display) === null || _state_spec_display === void 0 ? void 0 : _state_spec_display.name;
+        const finalDisplay = {
+            ...state.spec.display,
+            name: name ? name : undefined
+        };
+        onSave(state.name, {
+            ...state.spec,
+            display: finalDisplay
+        });
     };
     // When user click on cancel, several possibilities:
     // - create action: ask for discard approval
     // - update action: ask for discard approval if changed
     // - read action: don´t ask for discard approval
     const handleCancel = useCallback(()=>{
-        if (JSON.stringify(patchedInitialDatasource) !== JSON.stringify(state)) {
+        if (JSON.stringify(initialState) !== JSON.stringify(state)) {
             setDiscardDialogOpened(true);
         } else {
             onClose();
         }
     }, [
         state,
-        patchedInitialDatasource,
+        initialState,
         setDiscardDialogOpened,
         onClose
     ]);
@@ -188,7 +198,7 @@ export function DatasourceEditorForm(props) {
                                             onChange: (event)=>{
                                                 field.onChange(event);
                                                 setState((draft)=>{
-                                                    draft.metadata.name = event.target.value;
+                                                    draft.name = event.target.value;
                                                 });
                                             }
                                         });

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

@@ -6,6 +6,7 @@ export interface DatasourceSelectProps extends Omit<SelectProps<string>, Omitted
     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

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

package/dist/components/DatasourceSelect.js

@@ -19,8 +19,8 @@ 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  } = useListDatasourceSelectItems(datasourcePluginKind);
+    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;
@@ -37,6 +37,7 @@ 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(()=>{
+        var _item_saved;
         return (data !== null && data !== void 0 ? data : []).map((itemGroup)=>({
                 group: itemGroup.group,
                 editLink: itemGroup.editLink,
@@ -44,6 +45,7 @@ import { useListDatasourceSelectItems } from '../runtime';
                         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)
                     }))
@@ -76,7 +78,7 @@ import { useListDatasourceSelectItems } from '../runtime';
                 /*#__PURE__*/ _jsx(Divider, {}, `${menuItemGroup.group}-divider`),
                 ...menuItemGroup.items.map((menuItem)=>/*#__PURE__*/ _jsx(MenuItem, {
                         value: menuItem.value,
-                        disabled: menuItem.overridden,
+                        disabled: menuItem.overridden || !menuItem.saved,
                         children: /*#__PURE__*/ _jsxs(Stack, {
                             direction: "row",
                             alignItems: "center",
@@ -90,6 +92,9 @@ import { useListDatasourceSelectItems } from '../runtime';
                                         overriding: menuItem.overriding
                                     })
                                 }),
+                                !menuItem.saved && /*#__PURE__*/ _jsx(ListItemText, {
+                                    children: "Save the dashboard to enable this datasource"
+                                }),
                                 /*#__PURE__*/ _jsx(ListItemText, {
                                     style: {
                                         textAlign: 'right'
@@ -131,8 +136,11 @@ export function DatasourceName(props) {
 }
 // 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) {
+/**
+ * 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,
@@ -140,15 +148,19 @@ function selectorToOptionValue(selector) {
         (_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, group, name] = optionValue.split(OPTION_VALUE_DELIMITER);
-    if (kind === undefined || group === undefined || name === undefined) {
+/**
+ * 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');
     }
     return {
         kind,
-        group: group === '' ? undefined : group,
         name: name === '' ? undefined : name
     };
 }

package/dist/components/DatasourceSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/DatasourceSelect.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport { Select, SelectProps, MenuItem, Stack, Divider, ListItemText, Chip, IconButton, Box } from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { useMemo } from 'react';\nimport { useListDatasourceSelectItems } from '../runtime';\n\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface DatasourceSelectProps extends Omit<SelectProps<string>, OmittedMuiProps> {\n  value: DatasourceSelector;\n  onChange: (next: DatasourceSelector) => void;\n  datasourcePluginKind: string;\n}\n\n/**\n * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for\n * the input deal with a `DatasourceSelector`.\n */\nexport function DatasourceSelect(props: DatasourceSelectProps) {\n  const { datasourcePluginKind, value, onChange, ...others } = props;\n  const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind);\n\n  // Rebuild the group of the value if not provided\n  const defaultValue = useMemo(() => {\n    const group = (data ?? [])\n      .flatMap((itemGroup) => itemGroup.items)\n      .find((item) => {\n        return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;\n      })?.selector.group;\n    return { ...value, group };\n  }, [value, data]);\n\n  // Convert the datasource list into menu items with name/group?/value strings that the Select input can work with\n  const menuItems = useMemo(() => {\n    return (data ?? []).map((itemGroup) => ({\n      group: itemGroup.group,\n      editLink: itemGroup.editLink,\n      items: itemGroup.items.map((item) => ({\n        name: item.name,\n        overriding: item.overriding,\n        overridden: item.overridden,\n        group: item.selector.group,\n        value: selectorToOptionValue(item.selector),\n      })),\n    }));\n  }, [data]);\n\n  // While loading available values, just use an empty string so MUI select doesn't warn about values out of range\n  const optionValue = isLoading ? '' : selectorToOptionValue(defaultValue);\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange: SelectProps<string>['onChange'] = (e) => {\n    const next = optionValueToSelector(e.target.value);\n    onChange(next);\n  };\n\n  // We use a fake action event when we click on the action of the chip (hijack the \"delete\" feature).\n  // This is because the href link action is on the `deleteIcon` property already, but the `onDelete` property\n  // controls its visibility.\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const fakeActionEvent = () => {};\n\n  // TODO:\n  //  - Does this need a loading indicator of some kind?\n  //  - The group's edit link is not clickable once selected.\n  //  - The group's edit link is disabled if datasource is overridden.\n  //    Ref: https://github.com/mui/material-ui/issues/36572\n  return (\n    <Select {...others} value={optionValue} onChange={handleChange}>\n      {menuItems.map((menuItemGroup) => [\n        <Divider key={`${menuItemGroup.group}-divider`} />,\n        ...menuItemGroup.items.map((menuItem) => (\n          <MenuItem key={menuItem.value} value={menuItem.value} disabled={menuItem.overridden}>\n            <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\">\n              <ListItemText>\n                <DatasourceName\n                  name={menuItem.name}\n                  overridden={menuItem.overridden}\n                  overriding={menuItem.overriding}\n                />\n              </ListItemText>\n              <ListItemText style={{ textAlign: 'right' }}>\n                {menuItemGroup.group && menuItemGroup.group.length > 0 && (\n                  <Chip\n                    disabled={false}\n                    label={menuItemGroup.group}\n                    size=\"small\"\n                    onDelete={menuItemGroup.editLink ? fakeActionEvent : undefined}\n                    deleteIcon={\n                      menuItemGroup.editLink ? (\n                        <IconButton href={menuItemGroup.editLink} target=\"_blank\">\n                          <OpenInNewIcon fontSize=\"small\" />\n                        </IconButton>\n                      ) : undefined\n                    }\n                  />\n                )}\n              </ListItemText>\n            </Stack>\n          </MenuItem>\n        )),\n      ])}\n    </Select>\n  );\n}\n\nexport function DatasourceName(props: { name: string; overridden?: boolean; overriding?: boolean }) {\n  const { name, overridden, overriding } = props;\n  return (\n    <>\n      {`${name} `}\n      {!overridden && overriding && (\n        <Box display=\"inline\" fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {overridden && '(overridden)'}\n    </>\n  );\n}\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n// Given a DatasourceSelector, returns a string value like `{kind}_____{name}` that can be used as a Select input value\nfunction selectorToOptionValue(selector: DatasourceSelector): string {\n  return [selector.kind, selector.group ?? '', selector.name ?? ''].join(OPTION_VALUE_DELIMITER);\n}\n\n// Given an option value name like `{kind}_____{name}`, returns a DatasourceSelector\nfunction optionValueToSelector(optionValue: string): DatasourceSelector {\n  const [kind, group, name] = optionValue.split(OPTION_VALUE_DELIMITER);\n  if (kind === undefined || group === undefined || name === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    kind,\n    group: group === '' ? undefined : group,\n    name: name === '' ? undefined : name,\n  };\n}\n"],"names":["OpenInNewIcon","Select","MenuItem","Stack","Divider","ListItemText","Chip","IconButton","Box","useMemo","useListDatasourceSelectItems","DatasourceSelect","props","datasourcePluginKind","value","onChange","others","data","isLoading","defaultValue","group","flatMap","itemGroup","items","find","item","kind","selector","name","overridden","menuItems","map","editLink","overriding","selectorToOptionValue","optionValue","handleChange","e","next","optionValueToSelector","target","fakeActionEvent","menuItemGroup","menuItem","disabled","direction","alignItems","justifyContent","width","DatasourceName","style","textAlign","length","label","size","onDelete","undefined","deleteIcon","href","fontSize","display","fontWeight","color","theme","palette","primary","main","OPTION_VALUE_DELIMITER","join","split","Error"],"mappings":"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"}
+{"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":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,mBAAmB,4BAA4B;AACtD,SAASC,MAAM,EAAeC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAEC,YAAY,EAAEC,IAAI,EAAEC,UAAU,EAAEC,GAAG,QAAQ,gBAAgB;AAEnH,SAASC,OAAO,QAAQ,QAAQ;AAChC,SAAuCC,4BAA4B,QAAQ,aAAa;AAaxF;;;CAGC,GACD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,qBAAoB,EAAEC,MAAK,EAAEC,QAAO,EAAEC,SAAQ,EAAE,GAAGC,QAAQ,GAAGL;IACtE,MAAM,EAAEM,KAAI,EAAEC,UAAS,EAAE,GAAGT,6BAA6BG,sBAAsBE;IAC/E,iDAAiD;IACjD,MAAMK,eAAeX,QAAQ;YACb;QAAd,MAAMY,QAAQ,CAAA,gBAAA,AAACH,CAAAA,iBAAAA,kBAAAA,OAAQ,EAAE,AAAD,EACrBI,QAAQ,CAACC,YAAcA,UAAUC,OACjCC,KAAK,CAACC;YACL,OAAOZ,MAAMa,SAASD,KAAKE,SAASD,QAAQb,MAAMe,SAASH,KAAKE,SAASC,QAAQ,CAACH,KAAKI;QACzF,gBAJY,2BAAA,KAAA,IAAA,cAIRF,SAASP;QACf,OAAO;YAAE,GAAGP,KAAK;YAAEO;QAAM;IAC3B,GAAG;QAACP;QAAOI;KAAK;IAEhB,iHAAiH;IACjH,MAAMa,YAAYtB,QAAQ;YAQbiB;QAPX,OAAO,AAACR,CAAAA,iBAAAA,kBAAAA,OAAQ,EAAE,AAAD,EAAGc,IAAI,CAACT,YAAe,CAAA;gBACtCF,OAAOE,UAAUF;gBACjBY,UAAUV,UAAUU;gBACpBT,OAAOD,UAAUC,MAAMQ,IAAI,CAACN,OAAU,CAAA;wBACpCG,MAAMH,KAAKG;wBACXK,YAAYR,KAAKQ;wBACjBJ,YAAYJ,KAAKI;wBACjBK,OAAOT,CAAAA,cAAAA,KAAKS,mBAALT,yBAAAA,cAAc;wBACrBL,OAAOK,KAAKE,SAASP;wBACrBP,OAAOsB,sBAAsBV,KAAKE;oBACpC,CAAA;YACF,CAAA;IACF,GAAG;QAACV;KAAK;IAET,gHAAgH;IAChH,MAAMmB,cAAclB,YAAY,KAAKiB,sBAAsBhB;IAE3D,gGAAgG;IAChG,MAAMkB,eAAgD,CAACC;QACrD,MAAMC,OAAOC,sBAAsBF,EAAEG,OAAO5B;QAC5CE,SAASwB;IACX;IAEA,oGAAoG;IACpG,4GAA4G;IAC5G,2BAA2B;IAC3B,gEAAgE;IAChE,MAAMG,kBAAkB,KAAO;IAE/B,QAAQ;IACR,sDAAsD;IACtD,2DAA2D;IAC3D,oEAAoE;IACpE,0DAA0D;IAC1D,qBACE,KAAC1C;QAAQ,GAAGgB,MAAM;QAAEH,OAAOuB;QAAarB,UAAUsB;kBAC/CP,UAAUC,IAAI,CAACY,gBAAkB;8BAChC,KAACxC,aAAa,CAAC,EAAEwC,cAAcvB,MAAM,QAAQ,CAAC;mBAC3CuB,cAAcpB,MAAMQ,IAAI,CAACa,yBAC1B,KAAC3C;wBAA8BY,OAAO+B,SAAS/B;wBAAOgC,UAAUD,SAASf,cAAc,CAACe,SAASV;kCAC/F,cAAA,MAAChC;4BAAM4C,WAAU;4BAAMC,YAAW;4BAASC,gBAAe;4BAAgBC,OAAM;;8CAC9E,KAAC7C;8CACC,cAAA,KAAC8C;wCACCtB,MAAMgB,SAAShB;wCACfC,YAAYe,SAASf;wCACrBI,YAAYW,SAASX;;;gCAGxB,CAACW,SAASV,uBAAS,KAAC9B;8CAAa;;8CAClC,KAACA;oCAAa+C,OAAO;wCAAEC,WAAW;oCAAQ;8CACvCT,cAAcvB,SAASuB,cAAcvB,MAAMiC,SAAS,mBACnD,KAAChD;wCACCwC,UAAU;wCACVS,OAAOX,cAAcvB;wCACrBmC,MAAK;wCACLC,UAAUb,cAAcX,WAAWU,kBAAkBe;wCACrDC,YACEf,cAAcX,yBACZ,KAAC1B;4CAAWqD,MAAMhB,cAAcX;4CAAUS,QAAO;sDAC/C,cAAA,KAAC1C;gDAAc6D,UAAS;;6CAExBH;;;;;uBAtBDb,SAAS/B;aA8B3B;;AAGP;AAEA,OAAO,SAASqC,eAAevC,KAAmE;IAChG,MAAM,EAAEiB,KAAI,EAAEC,WAAU,EAAEI,WAAU,EAAE,GAAGtB;IACzC,qBACE;;YACG,CAAC,EAAEiB,KAAK,CAAC,CAAC;YACV,CAACC,cAAcI,4BACd,KAAC1B;gBAAIsD,SAAQ;gBAASC,YAAW;gBAASC,OAAO,CAACC,QAAUA,MAAMC,QAAQC,QAAQC;0BAAM;;YAIzFtC,cAAc;;;AAGrB;AAEA,kDAAkD;AAClD,MAAMuC,yBAAyB;AAE/B;;;;CAIC,GACD,SAASjC,sBAAsBR,QAAsC;QAC5CA,iBAAsBA;IAA7C,OAAO;QAACA,SAASD;QAAMC,CAAAA,kBAAAA,SAASP,mBAATO,6BAAAA,kBAAkB;QAAIA,CAAAA,iBAAAA,SAASC,kBAATD,4BAAAA,iBAAiB;KAAG,CAAC0C,KAAKD;AACzE;AAEA;;;;CAIC,GACD,SAAS5B,sBAAsBJ,WAAmB;IAChD,MAAMkC,QAAQlC,YAAYmC,MAAMH;IAChC,MAAM1C,OAAO4C,KAAK,CAAC,EAAE;IACrB,MAAM1C,OAAO0C,KAAK,CAAC,EAAE;IACrB,IAAI5C,SAAS+B,aAAa7B,SAAS6B,WAAW;QAC5C,MAAM,IAAIe,MAAM;IAClB;IACA,OAAO;QACL9C;QACAE,MAAMA,SAAS,KAAK6B,YAAY7B;IAClC;AACF"}

package/dist/components/PanelSpecEditor/PanelSpecEditor.d.ts

@@ -4,7 +4,7 @@ export interface PanelSpecEditorProps {
     panelDefinition: PanelDefinition;
     onQueriesChange: (queries: QueryDefinition[]) => void;
     onPluginSpecChange: (spec: UnknownSpec) => void;
-    onJSONChange: (panelDefinition: PanelDefinition) => void;
+    onJSONChange: (panelDefinitionStr: string) => void;
 }
 export declare function PanelSpecEditor(props: PanelSpecEditorProps): JSX.Element | null;
 //# sourceMappingURL=PanelSpecEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAMjF,MAAM,WAAW,oBAAoB;IACnC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,eAAe,EAAE,eAAe,KAAK,IAAI,CAAC;CAC1D;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,sBA0C1D"}
+{"version":3,"file":"PanelSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAMjF,MAAM,WAAW,oBAAoB;IACnC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,sBA6C1D"}

package/dist/components/PanelSpecEditor/PanelSpecEditor.js

@@ -57,6 +57,7 @@ export function PanelSpecEditor(props) {
     tabs.push({
         label: 'JSON',
         content: /*#__PURE__*/ _jsx(JSONEditor, {
+            maxHeight: "80vh",
             value: panelDefinition,
             onChange: onJSONChange
         })

package/dist/components/PanelSpecEditor/PanelSpecEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.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 { ErrorAlert, JSONEditor } from '@perses-dev/components';\nimport { PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { TimeSeriesQueryEditor } from '../TimeSeriesQueryEditor';\n\nexport interface PanelSpecEditorProps {\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinition: PanelDefinition) => void;\n}\n\nexport function PanelSpecEditor(props: PanelSpecEditorProps) {\n  const { panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;\n  const { kind } = panelDefinition.spec.plugin;\n  const { data: plugin, isLoading, error } = usePlugin('Panel', kind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  // TODO: Proper loading indicator\n  if (isLoading) {\n    return null;\n  }\n\n  if (plugin === undefined) {\n    throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n  }\n\n  const { panelOptionsEditorComponents, hideQueryEditor } = plugin as PanelPlugin;\n  let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n  if (!hideQueryEditor) {\n    // Since we only support TimeSeriesQuery for now, we will always show a TimeSeriesQueryEditor\n    tabs.push({\n      label: 'Query',\n      content: <TimeSeriesQueryEditor queries={panelDefinition.spec.queries ?? []} onChange={onQueriesChange} />,\n    });\n  }\n\n  if (panelOptionsEditorComponents !== undefined) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: <OptionsEditorComponent value={panelDefinition.spec.plugin.spec} onChange={onPluginSpecChange} />,\n      }))\n    );\n  }\n\n  // always show json editor by default\n  tabs.push({ label: 'JSON', content: <JSONEditor value={panelDefinition} onChange={onJSONChange} /> });\n\n  return <OptionsEditorTabs key={tabs.length} tabs={tabs} />;\n}\n"],"names":["ErrorAlert","JSONEditor","usePlugin","OptionsEditorTabs","TimeSeriesQueryEditor","PanelSpecEditor","props","panelDefinition","onJSONChange","onQueriesChange","onPluginSpecChange","kind","spec","plugin","data","isLoading","error","undefined","Error","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","queries","onChange","concat","map","OptionsEditorComponent","value","length"],"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,SAASA,UAAU,EAAEC,UAAU,QAAQ,yBAAyB;AAEhE,SAASC,SAAS,QAAQ,gBAAgB;AAE1C,SAAiCC,iBAAiB,QAAQ,uBAAuB;AACjF,SAASC,qBAAqB,QAAQ,2BAA2B;AASjE,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,gBAAe,EAAEC,aAAY,EAAEC,gBAAe,EAAEC,mBAAkB,EAAE,GAAGJ;IAC/E,MAAM,EAAEK,KAAI,EAAE,GAAGJ,gBAAgBK,KAAKC;IACtC,MAAM,EAAEC,MAAMD,OAAM,EAAEE,UAAS,EAAEC,MAAK,EAAE,GAAGd,UAAU,SAASS;IAE9D,IAAIK,OAAO;QACT,qBAAO,KAAChB;YAAWgB,OAAOA;;IAC5B;IAEA,iCAAiC;IACjC,IAAID,WAAW;QACb,OAAO;IACT;IAEA,IAAIF,WAAWI,WAAW;QACxB,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEP,KAAK,CAAC,CAAC;IAC/E;IAEA,MAAM,EAAEQ,6BAA4B,EAAEC,gBAAe,EAAE,GAAGP;IAC1D,IAAIQ,OAAuC,EAAE;IAE7C,IAAI,CAACD,iBAAiB;YAIuBb;QAH3C,6FAA6F;QAC7Fc,KAAKC,KAAK;YACRC,OAAO;YACPC,uBAAS,KAACpB;gBAAsBqB,SAASlB,CAAAA,gCAAAA,gBAAgBK,KAAKa,qBAArBlB,2CAAAA,gCAAgC,EAAE;gBAAEmB,UAAUjB;;QACzF;IACF;IAEA,IAAIU,iCAAiCF,WAAW;QAC9CI,OAAOA,KAAKM,OACVR,6BAA6BS,IAAI,CAAC,EAAEL,MAAK,EAAEC,SAASK,uBAAsB,EAAE,GAAM,CAAA;gBAChFN;gBACAC,uBAAS,KAACK;oBAAuBC,OAAOvB,gBAAgBK,KAAKC,OAAOD;oBAAMc,UAAUhB;;YACtF,CAAA;IAEJ;IAEA,qCAAqC;IACrCW,KAAKC,KAAK;QAAEC,OAAO;QAAQC,uBAAS,KAACvB;YAAW6B,OAAOvB;YAAiBmB,UAAUlB;;IAAiB;IAEnG,qBAAO,KAACL;QAAoCkB,MAAMA;OAAnBA,KAAKU;AACtC"}
+{"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.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 { ErrorAlert, JSONEditor } from '@perses-dev/components';\nimport { PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { TimeSeriesQueryEditor } from '../TimeSeriesQueryEditor';\n\nexport interface PanelSpecEditorProps {\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport function PanelSpecEditor(props: PanelSpecEditorProps) {\n  const { panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;\n  const { kind } = panelDefinition.spec.plugin;\n  const { data: plugin, isLoading, error } = usePlugin('Panel', kind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  // TODO: Proper loading indicator\n  if (isLoading) {\n    return null;\n  }\n\n  if (plugin === undefined) {\n    throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n  }\n\n  const { panelOptionsEditorComponents, hideQueryEditor } = plugin as PanelPlugin;\n  let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n  if (!hideQueryEditor) {\n    // Since we only support TimeSeriesQuery for now, we will always show a TimeSeriesQueryEditor\n    tabs.push({\n      label: 'Query',\n      content: <TimeSeriesQueryEditor queries={panelDefinition.spec.queries ?? []} onChange={onQueriesChange} />,\n    });\n  }\n\n  if (panelOptionsEditorComponents !== undefined) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: <OptionsEditorComponent value={panelDefinition.spec.plugin.spec} onChange={onPluginSpecChange} />,\n      }))\n    );\n  }\n\n  // always show json editor by default\n  tabs.push({\n    label: 'JSON',\n    content: <JSONEditor maxHeight=\"80vh\" value={panelDefinition} onChange={onJSONChange} />,\n  });\n\n  return <OptionsEditorTabs key={tabs.length} tabs={tabs} />;\n}\n"],"names":["ErrorAlert","JSONEditor","usePlugin","OptionsEditorTabs","TimeSeriesQueryEditor","PanelSpecEditor","props","panelDefinition","onJSONChange","onQueriesChange","onPluginSpecChange","kind","spec","plugin","data","isLoading","error","undefined","Error","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","queries","onChange","concat","map","OptionsEditorComponent","value","maxHeight","length"],"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,SAASA,UAAU,EAAEC,UAAU,QAAQ,yBAAyB;AAEhE,SAASC,SAAS,QAAQ,gBAAgB;AAE1C,SAAiCC,iBAAiB,QAAQ,uBAAuB;AACjF,SAASC,qBAAqB,QAAQ,2BAA2B;AASjE,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,gBAAe,EAAEC,aAAY,EAAEC,gBAAe,EAAEC,mBAAkB,EAAE,GAAGJ;IAC/E,MAAM,EAAEK,KAAI,EAAE,GAAGJ,gBAAgBK,KAAKC;IACtC,MAAM,EAAEC,MAAMD,OAAM,EAAEE,UAAS,EAAEC,MAAK,EAAE,GAAGd,UAAU,SAASS;IAE9D,IAAIK,OAAO;QACT,qBAAO,KAAChB;YAAWgB,OAAOA;;IAC5B;IAEA,iCAAiC;IACjC,IAAID,WAAW;QACb,OAAO;IACT;IAEA,IAAIF,WAAWI,WAAW;QACxB,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEP,KAAK,CAAC,CAAC;IAC/E;IAEA,MAAM,EAAEQ,6BAA4B,EAAEC,gBAAe,EAAE,GAAGP;IAC1D,IAAIQ,OAAuC,EAAE;IAE7C,IAAI,CAACD,iBAAiB;YAIuBb;QAH3C,6FAA6F;QAC7Fc,KAAKC,KAAK;YACRC,OAAO;YACPC,uBAAS,KAACpB;gBAAsBqB,SAASlB,CAAAA,gCAAAA,gBAAgBK,KAAKa,qBAArBlB,2CAAAA,gCAAgC,EAAE;gBAAEmB,UAAUjB;;QACzF;IACF;IAEA,IAAIU,iCAAiCF,WAAW;QAC9CI,OAAOA,KAAKM,OACVR,6BAA6BS,IAAI,CAAC,EAAEL,MAAK,EAAEC,SAASK,uBAAsB,EAAE,GAAM,CAAA;gBAChFN;gBACAC,uBAAS,KAACK;oBAAuBC,OAAOvB,gBAAgBK,KAAKC,OAAOD;oBAAMc,UAAUhB;;YACtF,CAAA;IAEJ;IAEA,qCAAqC;IACrCW,KAAKC,KAAK;QACRC,OAAO;QACPC,uBAAS,KAACvB;YAAW8B,WAAU;YAAOD,OAAOvB;YAAiBmB,UAAUlB;;IAC1E;IAEA,qBAAO,KAACL;QAAoCkB,MAAMA;OAAnBA,KAAKW;AACtC"}

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

@@ -1 +1 @@
-{"version":3,"file":"PluginEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,iBAAiB,EAAmB,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eA4BpD"}
+{"version":3,"file":"PluginEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,iBAAiB,EAAmB,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eA6BpD"}

package/dist/components/PluginEditor/PluginEditor.js

@@ -24,7 +24,7 @@ import { usePluginEditor } from './plugin-editor-api';
  * `usePluginEditor` hook that powers this component.
  */ export function PluginEditor(props) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { value , pluginType , pluginKindLabel , onChange: _ , isReadonly , ...others } = props;
+    const { value , pluginType , pluginKindLabel , onChange: _ , isReadonly , isExplore , ...others } = props;
     const { pendingKind , isLoading , error , onKindChange , onSpecChange  } = usePluginEditor(props);
     return /*#__PURE__*/ _jsxs(Box, {
         ...others,
@@ -48,6 +48,7 @@ import { usePluginEditor } from './plugin-editor-api';
                 onChange: onKindChange
             }),
             /*#__PURE__*/ _jsx(PluginSpecEditor, {
+                isExplore: isExplore,
                 pluginType: pluginType,
                 pluginKind: value.kind,
                 value: value.spec,