@perses-dev/dashboards 0.9.0 → 0.11.0

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js

@@ -0,0 +1,225 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Typography, Switch, TextField, Grid, FormControl, InputLabel, MenuItem, Select, Button, Stack } from '@mui/material';
+import { useImmer } from 'use-immer';
+import { PluginEditor } from '@perses-dev/plugin-system';
+import { getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';
+const VARIABLE_TYPES = [
+    'ListVariable',
+    'TextVariable'
+];
+const SectionHeader = ({ children  })=>/*#__PURE__*/ _jsx(Typography, {
+        pb: 2,
+        variant: "subtitle1",
+        children: children
+    });
+export function VariableEditForm({ initialVariableDefinition , onChange , onCancel  }) {
+    const [state, setState] = useImmer(getInitialState(initialVariableDefinition));
+    return /*#__PURE__*/ _jsxs(Box, {
+        children: [
+            /*#__PURE__*/ _jsx(SectionHeader, {
+                children: "General"
+            }),
+            /*#__PURE__*/ _jsxs(Grid, {
+                container: true,
+                spacing: 2,
+                mb: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(Grid, {
+                        item: true,
+                        xs: 6,
+                        children: /*#__PURE__*/ _jsx(TextField, {
+                            label: "Name",
+                            value: state.name,
+                            onChange: (v)=>{
+                                setState((draft)=>{
+                                    draft.name = v.target.value;
+                                });
+                            }
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        item: true,
+                        xs: 6,
+                        children: /*#__PURE__*/ _jsxs(FormControl, {
+                            fullWidth: true,
+                            children: [
+                                /*#__PURE__*/ _jsx(InputLabel, {
+                                    id: "variable-type-select-label",
+                                    children: "Type"
+                                }),
+                                /*#__PURE__*/ _jsx(Select, {
+                                    labelId: "variable-type-select-label",
+                                    id: "variable-type-select",
+                                    label: "Type",
+                                    value: state.kind,
+                                    onChange: (v)=>{
+                                        setState((draft)=>{
+                                            draft.kind = v.target.value;
+                                        });
+                                    },
+                                    children: VARIABLE_TYPES.map((v)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                            value: v,
+                                            children: v
+                                        }, v))
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        item: true,
+                        xs: 6,
+                        children: /*#__PURE__*/ _jsx(TextField, {
+                            label: "Label",
+                            value: state.label,
+                            onChange: (v)=>{
+                                setState((draft)=>{
+                                    draft.label = v.target.value;
+                                });
+                            }
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        item: true,
+                        xs: 12,
+                        children: /*#__PURE__*/ _jsx(TextField, {
+                            label: "Description",
+                            value: state.description,
+                            onChange: (v)=>{
+                                setState((draft)=>{
+                                    draft.description = v.target.value;
+                                });
+                            }
+                        })
+                    })
+                ]
+            }),
+            state.kind === 'TextVariable' && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(SectionHeader, {
+                        children: "Text Options"
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        container: true,
+                        spacing: 2,
+                        mb: 2,
+                        children: /*#__PURE__*/ _jsx(Grid, {
+                            item: true,
+                            xs: 12,
+                            children: /*#__PURE__*/ _jsx(TextField, {
+                                label: "Value",
+                                value: state.textVariableFields.value,
+                                onChange: (v)=>{
+                                    setState((draft)=>{
+                                        draft.textVariableFields.value = v.target.value;
+                                    });
+                                }
+                            })
+                        })
+                    })
+                ]
+            }),
+            state.kind === 'ListVariable' && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(SectionHeader, {
+                        children: "List Options"
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        container: true,
+                        spacing: 2,
+                        mb: 2,
+                        children: /*#__PURE__*/ _jsx(Grid, {
+                            item: true,
+                            xs: 6,
+                            children: /*#__PURE__*/ _jsx(PluginEditor, {
+                                width: 500,
+                                pluginType: "Variable",
+                                pluginKindLabel: "Source",
+                                value: state.listVariableFields.plugin,
+                                onChange: (val)=>{
+                                    setState((draft)=>{
+                                        draft.listVariableFields.plugin = val;
+                                    });
+                                }
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(SectionHeader, {
+                        children: "Dropdown Options"
+                    }),
+                    /*#__PURE__*/ _jsxs(Grid, {
+                        container: true,
+                        spacing: 1,
+                        mb: 1,
+                        children: [
+                            /*#__PURE__*/ _jsxs(Grid, {
+                                item: true,
+                                xs: 12,
+                                children: [
+                                    "Allow Multiple",
+                                    /*#__PURE__*/ _jsx(Switch, {
+                                        checked: state.listVariableFields.allowMultiple,
+                                        onChange: (e)=>{
+                                            setState((draft)=>{
+                                                draft.listVariableFields.allowMultiple = e.target.checked;
+                                            });
+                                        }
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Grid, {
+                                item: true,
+                                xs: 12,
+                                children: [
+                                    "Allow All",
+                                    /*#__PURE__*/ _jsx(Switch, {
+                                        checked: state.listVariableFields.allowAll,
+                                        onChange: (e)=>{
+                                            setState((draft)=>{
+                                                draft.listVariableFields.allowAll = e.target.checked;
+                                            });
+                                        }
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: 'row',
+                spacing: 2,
+                justifyContent: "end",
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        onClick: ()=>{
+                            onCancel();
+                        },
+                        children: "Cancel"
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        onClick: ()=>{
+                            onChange(getVariableDefinitionFromState(state));
+                        },
+                        children: "Update Variable"
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=VariableEditorForm.js.map

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"sourcesContent":["// Copyright 2022 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 React from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControl,\n  InputLabel,\n  MenuItem,\n  Select,\n  Button,\n  Stack,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { PluginEditor } from '@perses-dev/plugin-system';\nimport { VariableDefinition } from '@perses-dev/core';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\nconst VARIABLE_TYPES = ['ListVariable', 'TextVariable'] as const;\n\nconst SectionHeader = ({ children }: React.PropsWithChildren) => (\n  <Typography pb={2} variant=\"subtitle1\">\n    {children}\n  </Typography>\n);\n\nexport function VariableEditForm({\n  initialVariableDefinition,\n  onChange,\n  onCancel,\n}: {\n  initialVariableDefinition: VariableDefinition;\n  onChange: (def: VariableDefinition) => void;\n  onCancel: () => void;\n}) {\n  const [state, setState] = useImmer(getInitialState(initialVariableDefinition));\n\n  return (\n    <Box>\n      <SectionHeader>General</SectionHeader>\n      <Grid container spacing={2} mb={2}>\n        <Grid item xs={6}>\n          <TextField\n            label=\"Name\"\n            value={state.name}\n            onChange={(v) => {\n              setState((draft) => {\n                draft.name = v.target.value as string;\n              });\n            }}\n          />\n        </Grid>\n        <Grid item xs={6}>\n          <FormControl fullWidth>\n            <InputLabel id=\"variable-type-select-label\">Type</InputLabel>\n            <Select\n              labelId=\"variable-type-select-label\"\n              id=\"variable-type-select\"\n              label=\"Type\"\n              value={state.kind}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.kind = v.target.value as VariableEditorState['kind'];\n                });\n              }}\n            >\n              {VARIABLE_TYPES.map((v) => (\n                <MenuItem key={v} value={v}>\n                  {v}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={6}>\n          <TextField\n            label=\"Label\"\n            value={state.label}\n            onChange={(v) => {\n              setState((draft) => {\n                draft.label = v.target.value;\n              });\n            }}\n          />\n        </Grid>\n        <Grid item xs={12}>\n          <TextField\n            label=\"Description\"\n            value={state.description}\n            onChange={(v) => {\n              setState((draft) => {\n                draft.description = v.target.value;\n              });\n            }}\n          />\n        </Grid>\n      </Grid>\n\n      {state.kind === 'TextVariable' && (\n        <>\n          <SectionHeader>Text Options</SectionHeader>\n          <Grid container spacing={2} mb={2}>\n            <Grid item xs={12}>\n              <TextField\n                label=\"Value\"\n                value={state.textVariableFields.value}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.textVariableFields.value = v.target.value;\n                  });\n                }}\n              />\n            </Grid>\n          </Grid>\n        </>\n      )}\n\n      {state.kind === 'ListVariable' && (\n        <>\n          <SectionHeader>List Options</SectionHeader>\n          <Grid container spacing={2} mb={2}>\n            <Grid item xs={6}>\n              <PluginEditor\n                width={500}\n                pluginType=\"Variable\"\n                pluginKindLabel=\"Source\"\n                value={state.listVariableFields.plugin}\n                onChange={(val) => {\n                  setState((draft) => {\n                    draft.listVariableFields.plugin = val;\n                  });\n                }}\n              />\n            </Grid>\n          </Grid>\n\n          <SectionHeader>Dropdown Options</SectionHeader>\n          <Grid container spacing={1} mb={1}>\n            <Grid item xs={12}>\n              Allow Multiple\n              <Switch\n                checked={state.listVariableFields.allowMultiple}\n                onChange={(e) => {\n                  setState((draft) => {\n                    draft.listVariableFields.allowMultiple = e.target.checked;\n                  });\n                }}\n              />\n            </Grid>\n            <Grid item xs={12}>\n              Allow All\n              <Switch\n                checked={state.listVariableFields.allowAll}\n                onChange={(e) => {\n                  setState((draft) => {\n                    draft.listVariableFields.allowAll = e.target.checked;\n                  });\n                }}\n              />\n            </Grid>\n          </Grid>\n        </>\n      )}\n\n      <Stack direction={'row'} spacing={2} justifyContent=\"end\">\n        <Button\n          onClick={() => {\n            onCancel();\n          }}\n        >\n          Cancel\n        </Button>\n\n        <Button\n          variant=\"contained\"\n          onClick={() => {\n            onChange(getVariableDefinitionFromState(state));\n          }}\n        >\n          Update Variable\n        </Button>\n      </Stack>\n    </Box>\n  );\n}\n"],"names":["React","Box","Typography","Switch","TextField","Grid","FormControl","InputLabel","MenuItem","Select","Button","Stack","useImmer","PluginEditor","getVariableDefinitionFromState","getInitialState","VARIABLE_TYPES","SectionHeader","children","pb","variant","VariableEditForm","initialVariableDefinition","onChange","onCancel","state","setState","container","spacing","mb","item","xs","label","value","name","v","draft","target","fullWidth","id","labelId","kind","map","description","textVariableFields","width","pluginType","pluginKindLabel","listVariableFields","plugin","val","checked","allowMultiple","e","allowAll","direction","justifyContent","onClick"],"mappings":"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"}

package/dist/components/Variables/VariableEditorForm/index.d.ts

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

package/dist/components/Variables/VariableEditorForm/index.d.ts.map

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

package/dist/components/Variables/VariableEditorForm/index.js

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

package/dist/components/Variables/VariableEditorForm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/index.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './VariableEditorForm';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,sBAAsB,CAAC"}

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.d.ts

@@ -0,0 +1,21 @@
+import { VariableDefinition } from '@perses-dev/core';
+export declare function getInitialState(initialVariableDefinition: VariableDefinition): {
+    name: string;
+    label: string | undefined;
+    kind: "TextVariable" | "ListVariable";
+    description: string;
+    listVariableFields: {
+        allowMultiple: boolean;
+        allowAll: boolean;
+        plugin: {
+            kind: string;
+            spec: {};
+        };
+    };
+    textVariableFields: {
+        value: string;
+    };
+};
+export declare type VariableEditorState = ReturnType<typeof getInitialState>;
+export declare function getVariableDefinitionFromState(state: VariableEditorState): VariableDefinition;
+//# sourceMappingURL=variable-editor-form-model.d.ts.map

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variable-editor-form-model.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAkD,MAAM,kBAAkB,CAAC;AAEtG,wBAAgB,eAAe,CAAC,yBAAyB,EAAE,kBAAkB;;;;;;;;;;;;;;;;EA2B5E;AAED,oBAAY,mBAAmB,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAErE,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,mBAAmB,GAAG,kBAAkB,CAmC7F"}

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -0,0 +1,76 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export function getInitialState(initialVariableDefinition) {
+    var ref;
+    var _value;
+    const textVariableFields = {
+        value: (_value = initialVariableDefinition.spec.value) !== null && _value !== void 0 ? _value : ''
+    };
+    const listVariableFields = {
+        allowMultiple: false,
+        allowAll: false,
+        plugin: {
+            kind: '',
+            spec: {}
+        }
+    };
+    if (initialVariableDefinition.kind === 'ListVariable') {
+        var _allow_all_value;
+        listVariableFields.allowMultiple = (_allow_all_value = initialVariableDefinition.spec.allow_all_value) !== null && _allow_all_value !== void 0 ? _allow_all_value : false;
+        var _allow_all_value1;
+        listVariableFields.allowAll = (_allow_all_value1 = initialVariableDefinition.spec.allow_all_value) !== null && _allow_all_value1 !== void 0 ? _allow_all_value1 : false;
+        listVariableFields.plugin = initialVariableDefinition.spec.plugin;
+    }
+    return {
+        name: initialVariableDefinition.spec.name,
+        label: (ref = initialVariableDefinition.spec.display) === null || ref === void 0 ? void 0 : ref.label,
+        kind: initialVariableDefinition.kind,
+        description: '',
+        listVariableFields,
+        textVariableFields
+    };
+}
+export function getVariableDefinitionFromState(state) {
+    const { name , label , kind  } = state;
+    const commonSpec = {
+        name,
+        display: {
+            label
+        }
+    };
+    if (kind === 'TextVariable') {
+        const textVariableDefinition = {
+            kind,
+            spec: {
+                ...commonSpec,
+                ...state.textVariableFields
+            }
+        };
+        return textVariableDefinition;
+    }
+    if (kind === 'ListVariable') {
+        const listVariableDefinition = {
+            kind,
+            spec: {
+                ...commonSpec,
+                allow_multiple: state.listVariableFields.allowMultiple,
+                allow_all_value: state.listVariableFields.allowAll,
+                plugin: state.listVariableFields.plugin
+            }
+        };
+        return listVariableDefinition;
+    }
+    throw new Error(`Unknown variable kind: ${kind}`);
+}
+
+//# sourceMappingURL=variable-editor-form-model.js.map

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.ts"],"sourcesContent":["// Copyright 2022 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 { VariableDefinition, TextVariableDefinition, ListVariableDefinition } from '@perses-dev/core';\n\nexport function getInitialState(initialVariableDefinition: VariableDefinition) {\n  const textVariableFields = {\n    value: (initialVariableDefinition as TextVariableDefinition).spec.value ?? '',\n  };\n\n  const listVariableFields = {\n    allowMultiple: false,\n    allowAll: false,\n    plugin: {\n      kind: '',\n      spec: {},\n    },\n  };\n  if (initialVariableDefinition.kind === 'ListVariable') {\n    listVariableFields.allowMultiple = initialVariableDefinition.spec.allow_all_value ?? false;\n    listVariableFields.allowAll = initialVariableDefinition.spec.allow_all_value ?? false;\n    listVariableFields.plugin = initialVariableDefinition.spec.plugin;\n  }\n\n  return {\n    name: initialVariableDefinition.spec.name,\n    label: initialVariableDefinition.spec.display?.label,\n    kind: initialVariableDefinition.kind,\n    description: '',\n    listVariableFields,\n    textVariableFields,\n  };\n}\n\nexport type VariableEditorState = ReturnType<typeof getInitialState>;\n\nexport function getVariableDefinitionFromState(state: VariableEditorState): VariableDefinition {\n  const { name, label, kind } = state;\n\n  const commonSpec = {\n    name,\n    display: {\n      label,\n    },\n  };\n\n  if (kind === 'TextVariable') {\n    const textVariableDefinition: TextVariableDefinition = {\n      kind,\n      spec: {\n        ...commonSpec,\n        ...state.textVariableFields,\n      },\n    };\n    return textVariableDefinition;\n  }\n\n  if (kind === 'ListVariable') {\n    const listVariableDefinition: ListVariableDefinition = {\n      kind,\n      spec: {\n        ...commonSpec,\n        allow_multiple: state.listVariableFields.allowMultiple,\n        allow_all_value: state.listVariableFields.allowAll,\n        plugin: state.listVariableFields.plugin,\n      },\n    };\n\n    return listVariableDefinition;\n  }\n  throw new Error(`Unknown variable kind: ${kind}`);\n}\n"],"names":["getInitialState","initialVariableDefinition","textVariableFields","value","spec","listVariableFields","allowMultiple","allowAll","plugin","kind","allow_all_value","name","label","display","description","getVariableDefinitionFromState","state","commonSpec","textVariableDefinition","listVariableDefinition","allow_multiple","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;AAIjC,OAAO,SAASA,eAAe,CAACC,yBAA6C,EAAE;QAqBpEA,GAAsC;QAnBtC,MAAgE;IADzE,MAAMC,kBAAkB,GAAG;QACzBC,KAAK,EAAE,CAAA,MAAgE,GAAhE,AAACF,yBAAyB,CAA4BG,IAAI,CAACD,KAAK,cAAhE,MAAgE,cAAhE,MAAgE,GAAI,EAAE;KAC9E,AAAC;IAEF,MAAME,kBAAkB,GAAG;QACzBC,aAAa,EAAE,KAAK;QACpBC,QAAQ,EAAE,KAAK;QACfC,MAAM,EAAE;YACNC,IAAI,EAAE,EAAE;YACRL,IAAI,EAAE,EAAE;SACT;KACF,AAAC;IACF,IAAIH,yBAAyB,CAACQ,IAAI,KAAK,cAAc,EAAE;YAClBR,gBAA8C;QAAjFI,kBAAkB,CAACC,aAAa,GAAGL,CAAAA,gBAA8C,GAA9CA,yBAAyB,CAACG,IAAI,CAACM,eAAe,cAA9CT,gBAA8C,cAA9CA,gBAA8C,GAAI,KAAK,CAAC;YAC7DA,iBAA8C;QAA5EI,kBAAkB,CAACE,QAAQ,GAAGN,CAAAA,iBAA8C,GAA9CA,yBAAyB,CAACG,IAAI,CAACM,eAAe,cAA9CT,iBAA8C,cAA9CA,iBAA8C,GAAI,KAAK,CAAC;QACtFI,kBAAkB,CAACG,MAAM,GAAGP,yBAAyB,CAACG,IAAI,CAACI,MAAM,CAAC;IACpE,CAAC;IAED,OAAO;QACLG,IAAI,EAAEV,yBAAyB,CAACG,IAAI,CAACO,IAAI;QACzCC,KAAK,EAAEX,CAAAA,GAAsC,GAAtCA,yBAAyB,CAACG,IAAI,CAACS,OAAO,cAAtCZ,GAAsC,WAAO,GAA7CA,KAAAA,CAA6C,GAA7CA,GAAsC,CAAEW,KAAK;QACpDH,IAAI,EAAER,yBAAyB,CAACQ,IAAI;QACpCK,WAAW,EAAE,EAAE;QACfT,kBAAkB;QAClBH,kBAAkB;KACnB,CAAC;AACJ,CAAC;AAID,OAAO,SAASa,8BAA8B,CAACC,KAA0B,EAAsB;IAC7F,MAAM,EAAEL,IAAI,CAAA,EAAEC,KAAK,CAAA,EAAEH,IAAI,CAAA,EAAE,GAAGO,KAAK,AAAC;IAEpC,MAAMC,UAAU,GAAG;QACjBN,IAAI;QACJE,OAAO,EAAE;YACPD,KAAK;SACN;KACF,AAAC;IAEF,IAAIH,IAAI,KAAK,cAAc,EAAE;QAC3B,MAAMS,sBAAsB,GAA2B;YACrDT,IAAI;YACJL,IAAI,EAAE;gBACJ,GAAGa,UAAU;gBACb,GAAGD,KAAK,CAACd,kBAAkB;aAC5B;SACF,AAAC;QACF,OAAOgB,sBAAsB,CAAC;IAChC,CAAC;IAED,IAAIT,IAAI,KAAK,cAAc,EAAE;QAC3B,MAAMU,sBAAsB,GAA2B;YACrDV,IAAI;YACJL,IAAI,EAAE;gBACJ,GAAGa,UAAU;gBACbG,cAAc,EAAEJ,KAAK,CAACX,kBAAkB,CAACC,aAAa;gBACtDI,eAAe,EAAEM,KAAK,CAACX,kBAAkB,CAACE,QAAQ;gBAClDC,MAAM,EAAEQ,KAAK,CAACX,kBAAkB,CAACG,MAAM;aACxC;SACF,AAAC;QAEF,OAAOW,sBAAsB,CAAC;IAChC,CAAC;IACD,MAAM,IAAIE,KAAK,CAAC,CAAC,uBAAuB,EAAEZ,IAAI,CAAC,CAAC,CAAC,CAAC;AACpD,CAAC"}

package/dist/components/Variables/VariableList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":";AA8BA,wBAAgB,oBAAoB,gBA2CnC"}
+{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":";AAsBA,wBAAgB,oBAAoB,gBA4CnC"}

package/dist/components/Variables/VariableList.js

@@ -10,95 +10,70 @@
 // 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Button, Stack, Box, Drawer, TableContainer, TableBody, TableRow, TableCell, Table, Paper, TableHead } from '@mui/material';
-import { useTemplateVariableDefinitions, useEditMode } from '../../context';
+import { Button, Stack, Box, Drawer } from '@mui/material';
+import EyeIcon from 'mdi-material-ui/Eye';
+import PencilIcon from 'mdi-material-ui/Pencil';
+import { useTemplateVariableDefinitions, useEditMode, useTemplateVariableActions } from '../../context';
 import { TemplateVariable } from './Variable';
+import { VariableEditor } from './VariableEditor';
 export function TemplateVariableList() {
     const [isEditing, setIsEditing] = useState(false);
     const variableDefinitions = useTemplateVariableDefinitions();
     const { isEditMode  } = useEditMode();
-    return /*#__PURE__*/ _jsxs(_Fragment, {
+    const [showVariablesInEditMode, setShowVariablesInEditMode] = useState(true);
+    const showVariables = isEditMode ? showVariablesInEditMode : true;
+    const { setVariableDefinitions  } = useTemplateVariableActions();
+    return /*#__PURE__*/ _jsxs(Box, {
         children: [
             /*#__PURE__*/ _jsx(Drawer, {
                 anchor: 'right',
                 open: isEditing,
-                onClose: ()=>setIsEditing(false),
-                children: /*#__PURE__*/ _jsxs(Box, {
-                    width: 900,
-                    p: 4,
-                    children: [
-                        /*#__PURE__*/ _jsx(TableContainer, {
-                            component: Paper,
-                            children: /*#__PURE__*/ _jsxs(Table, {
-                                sx: {
-                                    minWidth: 650
-                                },
-                                "aria-label": "simple table",
-                                children: [
-                                    /*#__PURE__*/ _jsx(TableHead, {
-                                        children: /*#__PURE__*/ _jsxs(TableRow, {
-                                            children: [
-                                                /*#__PURE__*/ _jsx(TableCell, {
-                                                    children: "Variable Name"
-                                                }),
-                                                /*#__PURE__*/ _jsx(TableCell, {
-                                                    align: "right",
-                                                    children: "Type"
-                                                })
-                                            ]
-                                        })
-                                    }),
-                                    /*#__PURE__*/ _jsx(TableBody, {
-                                        children: variableDefinitions.map((v)=>/*#__PURE__*/ _jsxs(TableRow, {
-                                                sx: {
-                                                    '&:last-child td, &:last-child th': {
-                                                        border: 0
-                                                    }
-                                                },
-                                                children: [
-                                                    /*#__PURE__*/ _jsx(TableCell, {
-                                                        component: "th",
-                                                        scope: "row",
-                                                        sx: {
-                                                            fontWeight: 'bold'
-                                                        },
-                                                        children: v.spec.name
-                                                    }),
-                                                    /*#__PURE__*/ _jsx(TableCell, {
-                                                        align: "right",
-                                                        children: v.kind
-                                                    })
-                                                ]
-                                            }, v.spec.name))
-                                    })
-                                ]
-                            })
-                        }),
-                        /*#__PURE__*/ _jsx("pre", {
-                            children: JSON.stringify(variableDefinitions, null, 2)
-                        })
-                    ]
+                children: /*#__PURE__*/ _jsx(VariableEditor, {
+                    onCancel: ()=>{
+                        setIsEditing(false);
+                    },
+                    variableDefinitions: variableDefinitions,
+                    onChange: (v)=>{
+                        setVariableDefinitions(v);
+                        setIsEditing(false);
+                    }
                 })
             }),
+            isEditMode && /*#__PURE__*/ _jsxs(Box, {
+                pb: 2,
+                children: [
+                    /*#__PURE__*/ _jsxs(Button, {
+                        onClick: ()=>setShowVariablesInEditMode(!showVariablesInEditMode),
+                        startIcon: /*#__PURE__*/ _jsx(EyeIcon, {}),
+                        children: [
+                            showVariablesInEditMode ? 'Hide' : 'Show',
+                            " Variables"
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        onClick: ()=>setIsEditing(true),
+                        startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),
+                        children: "Edit Variables"
+                    })
+                ]
+            }),
             /*#__PURE__*/ _jsx(Box, {
                 display: 'flex',
                 justifyContent: "space-between",
-                children: /*#__PURE__*/ _jsxs(Stack, {
+                children: /*#__PURE__*/ _jsx(Stack, {
                     direction: 'row',
                     spacing: 2,
-                    children: [
-                        variableDefinitions.map((v)=>/*#__PURE__*/ _jsx(Box, {
-                                children: /*#__PURE__*/ _jsx(TemplateVariable, {
-                                    name: v.spec.name
-                                }, v.spec.name)
-                            }, v.spec.name)),
-                        isEditMode && /*#__PURE__*/ _jsx(Button, {
-                            onClick: ()=>setIsEditing(true),
-                            children: "Modify Variables"
-                        })
-                    ]
+                    children: showVariables && variableDefinitions.map((v)=>{
+                        var ref;
+                        /*#__PURE__*/ return _jsx(Box, {
+                            display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
+                            children: /*#__PURE__*/ _jsx(TemplateVariable, {
+                                name: v.spec.name
+                            }, v.spec.name)
+                        }, v.spec.name);
+                    })
                 })
             })
         ]

package/dist/components/Variables/VariableList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/VariableList.tsx"],"sourcesContent":["// Copyright 2022 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 { useState } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  Drawer,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell,\n  Table,\n  Paper,\n  TableHead,\n} from '@mui/material';\nimport { useTemplateVariableDefinitions, useEditMode } from '../../context';\nimport { TemplateVariable } from './Variable';\n\nexport function TemplateVariableList() {\n  const [isEditing, setIsEditing] = useState(false);\n  const variableDefinitions = useTemplateVariableDefinitions();\n  const { isEditMode } = useEditMode();\n  return (\n    <>\n      <Drawer anchor={'right'} open={isEditing} onClose={() => setIsEditing(false)}>\n        <Box width={900} p={4}>\n          <TableContainer component={Paper}>\n            <Table sx={{ minWidth: 650 }} aria-label=\"simple table\">\n              <TableHead>\n                <TableRow>\n                  <TableCell>Variable Name</TableCell>\n                  <TableCell align=\"right\">Type</TableCell>\n                </TableRow>\n              </TableHead>\n              <TableBody>\n                {variableDefinitions.map((v) => (\n                  <TableRow key={v.spec.name} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>\n                    <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                      {v.spec.name}\n                    </TableCell>\n                    <TableCell align=\"right\">{v.kind}</TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </TableContainer>\n          <pre>{JSON.stringify(variableDefinitions, null, 2)}</pre>\n        </Box>\n      </Drawer>\n      <Box display={'flex'} justifyContent=\"space-between\">\n        <Stack direction={'row'} spacing={2}>\n          {variableDefinitions.map((v) => (\n            <Box key={v.spec.name}>\n              <TemplateVariable key={v.spec.name} name={v.spec.name} />\n            </Box>\n          ))}\n          {isEditMode && <Button onClick={() => setIsEditing(true)}>Modify Variables</Button>}\n        </Stack>\n      </Box>\n    </>\n  );\n}\n"],"names":["useState","Button","Stack","Box","Drawer","TableContainer","TableBody","TableRow","TableCell","Table","Paper","TableHead","useTemplateVariableDefinitions","useEditMode","TemplateVariable","TemplateVariableList","isEditing","setIsEditing","variableDefinitions","isEditMode","anchor","open","onClose","width","p","component","sx","minWidth","aria-label","align","map","v","border","scope","fontWeight","spec","name","kind","pre","JSON","stringify","display","justifyContent","direction","spacing","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/VariableList.tsx"],"sourcesContent":["// Copyright 2022 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 { useState } from 'react';\nimport { Button, Stack, Box, Drawer } from '@mui/material';\nimport EyeIcon from 'mdi-material-ui/Eye';\nimport PencilIcon from 'mdi-material-ui/Pencil';\n\nimport { useTemplateVariableDefinitions, useEditMode, useTemplateVariableActions } from '../../context';\nimport { TemplateVariable } from './Variable';\nimport { VariableEditor } from './VariableEditor';\n\nexport function TemplateVariableList() {\n  const [isEditing, setIsEditing] = useState(false);\n  const variableDefinitions = useTemplateVariableDefinitions();\n  const { isEditMode } = useEditMode();\n  const [showVariablesInEditMode, setShowVariablesInEditMode] = useState(true);\n  const showVariables = isEditMode ? showVariablesInEditMode : true;\n  const { setVariableDefinitions } = useTemplateVariableActions();\n\n  return (\n    <Box>\n      <Drawer anchor={'right'} open={isEditing}>\n        <VariableEditor\n          onCancel={() => {\n            setIsEditing(false);\n          }}\n          variableDefinitions={variableDefinitions}\n          onChange={(v) => {\n            setVariableDefinitions(v);\n            setIsEditing(false);\n          }}\n        />\n      </Drawer>\n      {isEditMode && (\n        <Box pb={2}>\n          <Button onClick={() => setShowVariablesInEditMode(!showVariablesInEditMode)} startIcon={<EyeIcon />}>\n            {showVariablesInEditMode ? 'Hide' : 'Show'} Variables\n          </Button>\n          <Button onClick={() => setIsEditing(true)} startIcon={<PencilIcon />}>\n            Edit Variables\n          </Button>\n        </Box>\n      )}\n      <Box display={'flex'} justifyContent=\"space-between\">\n        <Stack direction={'row'} spacing={2}>\n          {showVariables &&\n            variableDefinitions.map((v) => (\n              <Box key={v.spec.name} display={v.spec.display?.hidden ? 'none' : undefined}>\n                <TemplateVariable key={v.spec.name} name={v.spec.name} />\n              </Box>\n            ))}\n        </Stack>\n      </Box>\n    </Box>\n  );\n}\n"],"names":["useState","Button","Stack","Box","Drawer","EyeIcon","PencilIcon","useTemplateVariableDefinitions","useEditMode","useTemplateVariableActions","TemplateVariable","VariableEditor","TemplateVariableList","isEditing","setIsEditing","variableDefinitions","isEditMode","showVariablesInEditMode","setShowVariablesInEditMode","showVariables","setVariableDefinitions","anchor","open","onCancel","onChange","v","pb","onClick","startIcon","display","justifyContent","direction","spacing","map","spec","hidden","undefined","name"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
 export * from './Variable';
 export * from './VariableList';
+export * from './VariableEditorForm';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/index.tsx"],"names":[],"mappings":"AAaA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/index.tsx"],"names":[],"mappings":"AAaA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC"}

package/dist/components/Variables/index.js

@@ -12,5 +12,6 @@
 // limitations under the License.
 export * from './Variable';
 export * from './VariableList';
+export * from './VariableEditorForm';
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/index.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './Variable';\nexport * from './VariableList';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC"}
+{"version":3,"sources":["../../../src/components/Variables/index.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './Variable';\nexport * from './VariableList';\nexport * from './VariableEditorForm';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC"}

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './Dashboard';
 export * from './GridLayout';
 export * from './Panel';
 export * from './PanelDrawer';
+export * from './PanelGroupDialog';
 export * from './TimeRangeControls';
 export * from './Variables';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC"}