@perses-dev/dashboards 0.12.0 → 0.13.0

package/dist/context/TemplateVariableProvider/query-params.js

@@ -0,0 +1,64 @@
+// 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 { useQueryParams } from 'use-query-params';
+const variableQueryParameterPrefix = 'var-';
+export function getURLQueryParamName(name) {
+    return `${variableQueryParameterPrefix}${name}`;
+}
+export function encodeVariableValue(value) {
+    if (Array.isArray(value)) {
+        return value.join(',');
+    }
+    return value;
+}
+export function decodeVariableValue(value) {
+    if (!value) {
+        return null;
+    }
+    const values = value.split(',');
+    if (values.length === 1) {
+        return values[0];
+    }
+    return values;
+}
+const VariableValueParam = {
+    encode: encodeVariableValue,
+    decode: (v)=>{
+        if (typeof v === 'string') {
+            return decodeVariableValue(v);
+        }
+        return '';
+    }
+};
+export function useVariableQueryParams(defs) {
+    const config = {};
+    defs.forEach((def)=>{
+        const name = getURLQueryParamName(def.spec.name);
+        config[name] = VariableValueParam;
+    });
+    return useQueryParams(config);
+}
+export function getInitalValuesFromQueryParameters(queryParamValues) {
+    const values = {};
+    Object.keys(queryParamValues).forEach((key)=>{
+        const value = queryParamValues[key];
+        if (!value) {
+            return;
+        }
+        const name = key.replace(variableQueryParameterPrefix, '');
+        values[name] = value;
+    });
+    return values;
+}
+
+//# sourceMappingURL=query-params.js.map

package/dist/context/TemplateVariableProvider/query-params.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/context/TemplateVariableProvider/query-params.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 { VariableValue, VariableDefinition } from '@perses-dev/core';\nimport { QueryParamConfig, useQueryParams } from 'use-query-params';\n\nconst variableQueryParameterPrefix = 'var-';\n\nexport function getURLQueryParamName(name: string) {\n  return `${variableQueryParameterPrefix}${name}`;\n}\n\nexport function encodeVariableValue(value: VariableValue) {\n  if (Array.isArray(value)) {\n    return value.join(',');\n  }\n  return value;\n}\n\nexport function decodeVariableValue(value: string): VariableValue {\n  if (!value) {\n    return null;\n  }\n  const values = value.split(',');\n  if (values.length === 1) {\n    return values[0] as string;\n  }\n  return values;\n}\n\nconst VariableValueParam: QueryParamConfig<VariableValue> = {\n  encode: encodeVariableValue,\n  decode: (v) => {\n    if (typeof v === 'string') {\n      return decodeVariableValue(v);\n    }\n    return '';\n  },\n};\n\nexport function useVariableQueryParams(defs: VariableDefinition[]) {\n  const config: Record<string, typeof VariableValueParam> = {};\n  defs.forEach((def) => {\n    const name = getURLQueryParamName(def.spec.name);\n    config[name] = VariableValueParam;\n  });\n  return useQueryParams(config);\n}\n\nexport function getInitalValuesFromQueryParameters(\n  queryParamValues: Record<string, VariableValue>\n): Record<string, VariableValue> {\n  const values: Record<string, VariableValue> = {};\n  Object.keys(queryParamValues).forEach((key) => {\n    const value = queryParamValues[key];\n    if (!value) {\n      return;\n    }\n    const name = key.replace(variableQueryParameterPrefix, '');\n    values[name] = value;\n  });\n  return values;\n}\n"],"names":["useQueryParams","variableQueryParameterPrefix","getURLQueryParamName","name","encodeVariableValue","value","Array","isArray","join","decodeVariableValue","values","split","length","VariableValueParam","encode","decode","v","useVariableQueryParams","defs","config","forEach","def","spec","getInitalValuesFromQueryParameters","queryParamValues","Object","keys","key","replace"],"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;AAGjC,SAA2BA,cAAc,QAAQ,kBAAkB,CAAC;AAEpE,MAAMC,4BAA4B,GAAG,MAAM,AAAC;AAE5C,OAAO,SAASC,oBAAoB,CAACC,IAAY,EAAE;IACjD,OAAO,CAAC,EAAEF,4BAA4B,CAAC,EAAEE,IAAI,CAAC,CAAC,CAAC;AAClD,CAAC;AAED,OAAO,SAASC,mBAAmB,CAACC,KAAoB,EAAE;IACxD,IAAIC,KAAK,CAACC,OAAO,CAACF,KAAK,CAAC,EAAE;QACxB,OAAOA,KAAK,CAACG,IAAI,CAAC,GAAG,CAAC,CAAC;IACzB,CAAC;IACD,OAAOH,KAAK,CAAC;AACf,CAAC;AAED,OAAO,SAASI,mBAAmB,CAACJ,KAAa,EAAiB;IAChE,IAAI,CAACA,KAAK,EAAE;QACV,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAMK,MAAM,GAAGL,KAAK,CAACM,KAAK,CAAC,GAAG,CAAC,AAAC;IAChC,IAAID,MAAM,CAACE,MAAM,KAAK,CAAC,EAAE;QACvB,OAAOF,MAAM,CAAC,CAAC,CAAC,CAAW;IAC7B,CAAC;IACD,OAAOA,MAAM,CAAC;AAChB,CAAC;AAED,MAAMG,kBAAkB,GAAoC;IAC1DC,MAAM,EAAEV,mBAAmB;IAC3BW,MAAM,EAAE,CAACC,CAAC,GAAK;QACb,IAAI,OAAOA,CAAC,KAAK,QAAQ,EAAE;YACzB,OAAOP,mBAAmB,CAACO,CAAC,CAAC,CAAC;QAChC,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;CACF,AAAC;AAEF,OAAO,SAASC,sBAAsB,CAACC,IAA0B,EAAE;IACjE,MAAMC,MAAM,GAA8C,EAAE,AAAC;IAC7DD,IAAI,CAACE,OAAO,CAAC,CAACC,GAAG,GAAK;QACpB,MAAMlB,IAAI,GAAGD,oBAAoB,CAACmB,GAAG,CAACC,IAAI,CAACnB,IAAI,CAAC,AAAC;QACjDgB,MAAM,CAAChB,IAAI,CAAC,GAAGU,kBAAkB,CAAC;IACpC,CAAC,CAAC,CAAC;IACH,OAAOb,cAAc,CAACmB,MAAM,CAAC,CAAC;AAChC,CAAC;AAED,OAAO,SAASI,kCAAkC,CAChDC,gBAA+C,EAChB;IAC/B,MAAMd,MAAM,GAAkC,EAAE,AAAC;IACjDe,MAAM,CAACC,IAAI,CAACF,gBAAgB,CAAC,CAACJ,OAAO,CAAC,CAACO,GAAG,GAAK;QAC7C,MAAMtB,KAAK,GAAGmB,gBAAgB,CAACG,GAAG,CAAC,AAAC;QACpC,IAAI,CAACtB,KAAK,EAAE;YACV,OAAO;QACT,CAAC;QACD,MAAMF,IAAI,GAAGwB,GAAG,CAACC,OAAO,CAAC3B,4BAA4B,EAAE,EAAE,CAAC,AAAC;QAC3DS,MAAM,CAACP,IAAI,CAAC,GAAGE,KAAK,CAAC;IACvB,CAAC,CAAC,CAAC;IACH,OAAOK,MAAM,CAAC;AAChB,CAAC"}

package/dist/context/TemplateVariableProvider/query-params.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=query-params.test.d.ts.map

package/dist/context/TemplateVariableProvider/query-params.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-params.test.d.ts","sourceRoot":"","sources":["../../../src/context/TemplateVariableProvider/query-params.test.ts"],"names":[],"mappings":""}

package/dist/context/TemplateVariableProvider/query-params.test.js

@@ -0,0 +1,80 @@
+// 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 { getInitalValuesFromQueryParameters, decodeVariableValue, encodeVariableValue } from './query-params';
+describe('getInitalValuesFromQueryParameters', ()=>{
+    test('base case', ()=>{
+        expect(getInitalValuesFromQueryParameters({
+            'var-foo': 'bar',
+            'var-baz': [
+                'qux',
+                'quux'
+            ]
+        })).toEqual({
+            foo: 'bar',
+            baz: [
+                'qux',
+                'quux'
+            ]
+        });
+    });
+});
+describe('encodeVariableValue', ()=>{
+    const testCases = [
+        {
+            input: 'foo',
+            expected: 'foo'
+        },
+        {
+            input: [
+                'foo',
+                'bar'
+            ],
+            expected: 'foo,bar'
+        },
+        {
+            input: '$__all',
+            expected: '$__all'
+        }
+    ];
+    testCases.forEach(({ input , expected  })=>{
+        test(`encodes ${input} as ${expected}`, ()=>{
+            expect(encodeVariableValue(input)).toEqual(expected);
+        });
+    });
+});
+describe('decodeVariableValue', ()=>{
+    const testCases = [
+        {
+            input: 'foo',
+            expected: 'foo'
+        },
+        {
+            input: 'foo,bar',
+            expected: [
+                'foo',
+                'bar'
+            ]
+        },
+        {
+            input: '$__all',
+            expected: '$__all'
+        }
+    ];
+    testCases.forEach(({ input , expected  })=>{
+        test(`encodes ${input} as ${expected}`, ()=>{
+            expect(decodeVariableValue(input)).toEqual(expected);
+        });
+    });
+});
+
+//# sourceMappingURL=query-params.test.js.map

package/dist/context/TemplateVariableProvider/query-params.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/context/TemplateVariableProvider/query-params.test.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 { VariableValue } from '@perses-dev/core';\nimport { getInitalValuesFromQueryParameters, decodeVariableValue, encodeVariableValue } from './query-params';\n\ndescribe('getInitalValuesFromQueryParameters', () => {\n  test('base case', () => {\n    expect(\n      getInitalValuesFromQueryParameters({\n        'var-foo': 'bar',\n        'var-baz': ['qux', 'quux'],\n      })\n    ).toEqual({\n      foo: 'bar',\n      baz: ['qux', 'quux'],\n    });\n  });\n});\n\ndescribe('encodeVariableValue', () => {\n  const testCases = [\n    {\n      input: 'foo',\n      expected: 'foo',\n    },\n    {\n      input: ['foo', 'bar'],\n      expected: 'foo,bar',\n    },\n    {\n      input: '$__all',\n      expected: '$__all',\n    },\n  ];\n\n  testCases.forEach(({ input, expected }) => {\n    test(`encodes ${input} as ${expected}`, () => {\n      expect(encodeVariableValue(input)).toEqual(expected);\n    });\n  });\n});\n\ndescribe('decodeVariableValue', () => {\n  const testCases: Array<{ input: string; expected: VariableValue }> = [\n    {\n      input: 'foo',\n      expected: 'foo',\n    },\n    {\n      input: 'foo,bar',\n      expected: ['foo', 'bar'],\n    },\n    {\n      input: '$__all',\n      expected: '$__all',\n    },\n  ];\n\n  testCases.forEach(({ input, expected }) => {\n    test(`encodes ${input} as ${expected}`, () => {\n      expect(decodeVariableValue(input)).toEqual(expected);\n    });\n  });\n});\n"],"names":["getInitalValuesFromQueryParameters","decodeVariableValue","encodeVariableValue","describe","test","expect","toEqual","foo","baz","testCases","input","expected","forEach"],"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;AAGjC,SAASA,kCAAkC,EAAEC,mBAAmB,EAAEC,mBAAmB,QAAQ,gBAAgB,CAAC;AAE9GC,QAAQ,CAAC,oCAAoC,EAAE,IAAM;IACnDC,IAAI,CAAC,WAAW,EAAE,IAAM;QACtBC,MAAM,CACJL,kCAAkC,CAAC;YACjC,SAAS,EAAE,KAAK;YAChB,SAAS,EAAE;gBAAC,KAAK;gBAAE,MAAM;aAAC;SAC3B,CAAC,CACH,CAACM,OAAO,CAAC;YACRC,GAAG,EAAE,KAAK;YACVC,GAAG,EAAE;gBAAC,KAAK;gBAAE,MAAM;aAAC;SACrB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEHL,QAAQ,CAAC,qBAAqB,EAAE,IAAM;IACpC,MAAMM,SAAS,GAAG;QAChB;YACEC,KAAK,EAAE,KAAK;YACZC,QAAQ,EAAE,KAAK;SAChB;QACD;YACED,KAAK,EAAE;gBAAC,KAAK;gBAAE,KAAK;aAAC;YACrBC,QAAQ,EAAE,SAAS;SACpB;QACD;YACED,KAAK,EAAE,QAAQ;YACfC,QAAQ,EAAE,QAAQ;SACnB;KACF,AAAC;IAEFF,SAAS,CAACG,OAAO,CAAC,CAAC,EAAEF,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAK;QACzCP,IAAI,CAAC,CAAC,QAAQ,EAAEM,KAAK,CAAC,IAAI,EAAEC,QAAQ,CAAC,CAAC,EAAE,IAAM;YAC5CN,MAAM,CAACH,mBAAmB,CAACQ,KAAK,CAAC,CAAC,CAACJ,OAAO,CAACK,QAAQ,CAAC,CAAC;QACvD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEHR,QAAQ,CAAC,qBAAqB,EAAE,IAAM;IACpC,MAAMM,SAAS,GAAsD;QACnE;YACEC,KAAK,EAAE,KAAK;YACZC,QAAQ,EAAE,KAAK;SAChB;QACD;YACED,KAAK,EAAE,SAAS;YAChBC,QAAQ,EAAE;gBAAC,KAAK;gBAAE,KAAK;aAAC;SACzB;QACD;YACED,KAAK,EAAE,QAAQ;YACfC,QAAQ,EAAE,QAAQ;SACnB;KACF,AAAC;IAEFF,SAAS,CAACG,OAAO,CAAC,CAAC,EAAEF,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAK;QACzCP,IAAI,CAAC,CAAC,QAAQ,EAAEM,KAAK,CAAC,IAAI,EAAEC,QAAQ,CAAC,CAAC,EAAE,IAAM;YAC5CN,MAAM,CAACJ,mBAAmB,CAACS,KAAK,CAAC,CAAC,CAACJ,OAAO,CAACK,QAAQ,CAAC,CAAC;QACvD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/context/index.d.ts

@@ -2,5 +2,5 @@ export * from './DashboardProvider';
 export * from './DatasourceStoreProvider';
 export * from './TemplateVariableProvider';
 export * from './TimeRangeProvider';
-export * from './useDashboardSpec';
+export * from './useDashboard';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAaA,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAaA,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}

package/dist/context/index.js

@@ -14,6 +14,6 @@ export * from './DashboardProvider';
 export * from './DatasourceStoreProvider';
 export * from './TemplateVariableProvider';
 export * from './TimeRangeProvider';
-export * from './useDashboardSpec';
+export * from './useDashboard';
 
 //# sourceMappingURL=index.js.map

package/dist/context/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/context/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 './DashboardProvider';\nexport * from './DatasourceStoreProvider';\nexport * from './TemplateVariableProvider';\nexport * from './TimeRangeProvider';\nexport * from './useDashboardSpec';\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,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
+{"version":3,"sources":["../../src/context/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 './DashboardProvider';\nexport * from './DatasourceStoreProvider';\nexport * from './TemplateVariableProvider';\nexport * from './TimeRangeProvider';\nexport * from './useDashboard';\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,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}

package/dist/context/useDashboard.d.ts

@@ -0,0 +1,6 @@
+import { DashboardResource } from '@perses-dev/core';
+export declare function useDashboard(): {
+    dashboard: DashboardResource;
+    setDashboard: (dashboardResource: DashboardResource) => void;
+};
+//# sourceMappingURL=useDashboard.d.ts.map

package/dist/context/useDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDashboard.d.ts","sourceRoot":"","sources":["../../src/context/useDashboard.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkB,iBAAiB,EAAkB,MAAM,kBAAkB,CAAC;AAIrF,wBAAgB,YAAY;;sCA+Be,iBAAiB;EAS3D"}

package/dist/context/{useDashboardSpec.js → useDashboard.js}

@@ -13,31 +13,35 @@
 import { createPanelRef } from '@perses-dev/core';
 import { useDashboardStore } from './DashboardProvider';
 import { useTemplateVariableActions, useTemplateVariableDefinitions } from './TemplateVariableProvider';
-export function useDashboardSpec() {
-    const { panels , panelGroups , panelGroupOrder , defaultTimeRange , reset: resetDashboardStore ,  } = useDashboardStore(({ panels , panelGroups , panelGroupOrder , defaultTimeRange , reset  })=>({
+export function useDashboard() {
+    const { panels , panelGroups , panelGroupOrder , defaultTimeRange , metadata , setDashboard: setDashboardResource ,  } = useDashboardStore(({ panels , panelGroups , panelGroupOrder , defaultTimeRange , setDashboard , metadata  })=>({
             panels,
             panelGroups,
             panelGroupOrder,
             defaultTimeRange,
-            reset
+            setDashboard,
+            metadata
         }));
     const { setVariableDefinitions  } = useTemplateVariableActions();
     const variables = useTemplateVariableDefinitions();
     const layouts = convertPanelGroupsToLayouts(panelGroups, panelGroupOrder);
-    const spec = {
-        panels,
-        layouts,
-        variables,
-        duration: defaultTimeRange.pastDuration
+    const dashboard = {
+        kind: 'Dashboard',
+        metadata,
+        spec: {
+            panels,
+            layouts,
+            variables,
+            duration: defaultTimeRange.pastDuration
+        }
     };
-    const resetSpec = (spec)=>{
-        setVariableDefinitions(spec.variables);
-        // TODO: Should we call reset on the dashboard store with the spec?
-        resetDashboardStore();
+    const setDashboard = (dashboardResource)=>{
+        setVariableDefinitions(dashboardResource.spec.variables);
+        setDashboardResource(dashboardResource);
     };
     return {
-        spec,
-        resetSpec
+        dashboard,
+        setDashboard
     };
 }
 function convertPanelGroupsToLayouts(panelGroups, panelGroupOrder) {
@@ -81,4 +85,4 @@ function convertPanelGroupsToLayouts(panelGroups, panelGroupOrder) {
     return layouts;
 }
 
-//# sourceMappingURL=useDashboardSpec.js.map
+//# sourceMappingURL=useDashboard.js.map

package/dist/context/useDashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/useDashboard.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 { createPanelRef, DashboardResource, GridDefinition } from '@perses-dev/core';\nimport { PanelGroupDefinition, PanelGroupId, useDashboardStore } from './DashboardProvider';\nimport { useTemplateVariableActions, useTemplateVariableDefinitions } from './TemplateVariableProvider';\n\nexport function useDashboard() {\n  const {\n    panels,\n    panelGroups,\n    panelGroupOrder,\n    defaultTimeRange,\n    metadata,\n    setDashboard: setDashboardResource,\n  } = useDashboardStore(({ panels, panelGroups, panelGroupOrder, defaultTimeRange, setDashboard, metadata }) => ({\n    panels,\n    panelGroups,\n    panelGroupOrder,\n    defaultTimeRange,\n    setDashboard,\n    metadata,\n  }));\n  const { setVariableDefinitions } = useTemplateVariableActions();\n  const variables = useTemplateVariableDefinitions();\n  const layouts = convertPanelGroupsToLayouts(panelGroups, panelGroupOrder);\n\n  const dashboard: DashboardResource = {\n    kind: 'Dashboard',\n    metadata,\n    spec: {\n      panels,\n      layouts,\n      variables,\n      duration: defaultTimeRange.pastDuration,\n    },\n  };\n\n  const setDashboard = (dashboardResource: DashboardResource) => {\n    setVariableDefinitions(dashboardResource.spec.variables);\n    setDashboardResource(dashboardResource);\n  };\n\n  return {\n    dashboard,\n    setDashboard,\n  };\n}\n\nfunction convertPanelGroupsToLayouts(\n  panelGroups: Record<number, PanelGroupDefinition>,\n  panelGroupOrder: PanelGroupId[]\n): GridDefinition[] {\n  const layouts: GridDefinition[] = [];\n  panelGroupOrder.map((groupOrderId) => {\n    const group = panelGroups[groupOrderId];\n    if (group === undefined) {\n      throw new Error('panel group not found');\n    }\n    const { title, isCollapsed, itemLayouts, itemPanelKeys } = group;\n    let display = undefined;\n    if (title) {\n      display = {\n        title,\n        collapse: {\n          open: !isCollapsed,\n        },\n      };\n    }\n    const layout: GridDefinition = {\n      kind: 'Grid',\n      spec: {\n        display,\n        items: itemLayouts.map((layout) => {\n          const panelKey = itemPanelKeys[layout.i];\n          if (panelKey === undefined) {\n            throw new Error(`Missing panel key of layout ${layout.i}`);\n          }\n          return {\n            x: layout.x,\n            y: layout.y,\n            width: layout.w,\n            height: layout.h,\n            content: createPanelRef(panelKey),\n          };\n        }),\n      },\n    };\n    layouts.push(layout);\n  });\n\n  return layouts;\n}\n"],"names":["createPanelRef","useDashboardStore","useTemplateVariableActions","useTemplateVariableDefinitions","useDashboard","panels","panelGroups","panelGroupOrder","defaultTimeRange","metadata","setDashboard","setDashboardResource","setVariableDefinitions","variables","layouts","convertPanelGroupsToLayouts","dashboard","kind","spec","duration","pastDuration","dashboardResource","map","groupOrderId","group","undefined","Error","title","isCollapsed","itemLayouts","itemPanelKeys","display","collapse","open","layout","items","panelKey","i","x","y","width","w","height","h","content","push"],"mappings":"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"}

package/dist/test/plugin-registry.d.ts

@@ -1,12 +1,3 @@
-import { PluginRegistryProps, PluginImplementation, PluginType, PanelPlugin } from '@perses-dev/plugin-system';
-/**
- * Helper for mocking `PluginRegistry` data during tests. Returns props that can be spread on the `PluginRegistry`
- * component so that it will load the mock plugins you setup. You can use the `addMockPlugin` function that's returned
- * to add mock plugins before rendering components that use them.
- */
-export declare function mockPluginRegistryProps(): {
-    pluginRegistryProps: Omit<PluginRegistryProps, "children">;
-    addMockPlugin: <T extends PluginType>(pluginType: T, kind: string, plugin: PluginImplementation<T>) => void;
-};
-export declare const FAKE_PANEL_PLUGIN: PanelPlugin;
+import { MockPlugin } from '@perses-dev/plugin-system';
+export declare const MOCK_PLUGINS: MockPlugin[];
 //# sourceMappingURL=plugin-registry.d.ts.map

package/dist/test/plugin-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin-registry.d.ts","sourceRoot":"","sources":["../../src/test/plugin-registry.tsx"],"names":[],"mappings":"AAaA,OAAO,EACL,mBAAmB,EAEnB,oBAAoB,EACpB,UAAU,EACV,WAAW,EAEZ,MAAM,2BAA2B,CAAC;AAEnC;;;;GAIG;AACH,wBAAgB,uBAAuB;;+DAiB6B,MAAM;EA0BzE;AAED,eAAO,MAAM,iBAAiB,EAAE,WAQ/B,CAAC"}
+{"version":3,"file":"plugin-registry.d.ts","sourceRoot":"","sources":["../../src/test/plugin-registry.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAe,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAmBpE,eAAO,MAAM,YAAY,EAAE,UAAU,EAA6B,CAAC"}

package/dist/test/plugin-registry.js

@@ -11,64 +11,27 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Helper for mocking `PluginRegistry` data during tests. Returns props that can be spread on the `PluginRegistry`
- * component so that it will load the mock plugins you setup. You can use the `addMockPlugin` function that's returned
- * to add mock plugins before rendering components that use them.
- */ export function mockPluginRegistryProps() {
-    const mockPluginResource = {
-        kind: 'PluginModule',
-        metadata: {
-            name: 'Fake Plugin Module for Tests',
-            created_at: '',
-            updated_at: '',
-            version: 0
-        },
-        spec: {
-            plugins: []
-        }
-    };
-    const mockPluginModule = {};
-    // Allow adding mock plugins in tests
-    const addMockPlugin = (pluginType, kind, plugin)=>{
-        mockPluginResource.spec.plugins.push({
-            pluginType,
-            kind,
-            display: {
-                name: `Fake ${pluginType} Plugin for ${kind}`
-            }
-        });
-        // "Export" on the module under the same name as the kind the plugin handles
-        mockPluginModule[kind] = plugin;
-    };
-    const pluginRegistryProps = {
-        getInstalledPlugins () {
-            return Promise.resolve([
-                mockPluginResource
-            ]);
-        },
-        importPluginModule () {
-            return Promise.resolve(mockPluginModule);
-        }
-    };
-    return {
-        pluginRegistryProps,
-        addMockPlugin
-    };
-}
-export const FAKE_PANEL_PLUGIN = {
+const FakeTimeSeriesPlugin = {
     PanelComponent: ()=>{
         return /*#__PURE__*/ _jsx("div", {
-            role: "figure",
-            children: "FakePanel chart"
+            children: "TimeSeriesChart panel"
         });
     },
     OptionsEditorComponent: ()=>{
         return /*#__PURE__*/ _jsx("div", {
-            children: "Edit options here"
+            children: "TimeSeriesChart options"
         });
     },
     createInitialOptions: ()=>({})
 };
+const MOCK_TIME_SERIES_PANEL = {
+    pluginType: 'Panel',
+    kind: 'TimeSeriesChart',
+    plugin: FakeTimeSeriesPlugin
+};
+// Array of default mock plugins added to the PluginRegistry during test renders
+export const MOCK_PLUGINS = [
+    MOCK_TIME_SERIES_PANEL
+];
 
 //# sourceMappingURL=plugin-registry.js.map

package/dist/test/plugin-registry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test/plugin-registry.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.\nimport { UnknownSpec } from '@perses-dev/core';\nimport {\n  PluginRegistryProps,\n  PluginModuleResource,\n  PluginImplementation,\n  PluginType,\n  PanelPlugin,\n  Plugin,\n} from '@perses-dev/plugin-system';\n\n/**\n * Helper for mocking `PluginRegistry` data during tests. Returns props that can be spread on the `PluginRegistry`\n * component so that it will load the mock plugins you setup. You can use the `addMockPlugin` function that's returned\n * to add mock plugins before rendering components that use them.\n */\nexport function mockPluginRegistryProps() {\n  const mockPluginResource: PluginModuleResource = {\n    kind: 'PluginModule',\n    metadata: {\n      name: 'Fake Plugin Module for Tests',\n      created_at: '',\n      updated_at: '',\n      version: 0,\n    },\n    spec: {\n      plugins: [],\n    },\n  };\n\n  const mockPluginModule: Record<string, Plugin<UnknownSpec>> = {};\n\n  // Allow adding mock plugins in tests\n  const addMockPlugin = <T extends PluginType>(pluginType: T, kind: string, plugin: PluginImplementation<T>) => {\n    mockPluginResource.spec.plugins.push({\n      pluginType,\n      kind,\n      display: {\n        name: `Fake ${pluginType} Plugin for ${kind}`,\n      },\n    });\n\n    // \"Export\" on the module under the same name as the kind the plugin handles\n    mockPluginModule[kind] = plugin;\n  };\n\n  const pluginRegistryProps: Omit<PluginRegistryProps, 'children'> = {\n    getInstalledPlugins() {\n      return Promise.resolve([mockPluginResource]);\n    },\n    importPluginModule(/* resource */) {\n      return Promise.resolve(mockPluginModule);\n    },\n  };\n\n  return {\n    pluginRegistryProps,\n    addMockPlugin,\n  };\n}\n\nexport const FAKE_PANEL_PLUGIN: PanelPlugin = {\n  PanelComponent: () => {\n    return <div role=\"figure\">FakePanel chart</div>;\n  },\n  OptionsEditorComponent: () => {\n    return <div>Edit options here</div>;\n  },\n  createInitialOptions: () => ({}),\n};\n"],"names":["mockPluginRegistryProps","mockPluginResource","kind","metadata","name","created_at","updated_at","version","spec","plugins","mockPluginModule","addMockPlugin","pluginType","plugin","push","display","pluginRegistryProps","getInstalledPlugins","Promise","resolve","importPluginModule","FAKE_PANEL_PLUGIN","PanelComponent","div","role","OptionsEditorComponent","createInitialOptions"],"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;AACjC;AAUA;;;;CAIC,GACD,OAAO,SAASA,uBAAuB,GAAG;IACxC,MAAMC,kBAAkB,GAAyB;QAC/CC,IAAI,EAAE,cAAc;QACpBC,QAAQ,EAAE;YACRC,IAAI,EAAE,8BAA8B;YACpCC,UAAU,EAAE,EAAE;YACdC,UAAU,EAAE,EAAE;YACdC,OAAO,EAAE,CAAC;SACX;QACDC,IAAI,EAAE;YACJC,OAAO,EAAE,EAAE;SACZ;KACF,AAAC;IAEF,MAAMC,gBAAgB,GAAwC,EAAE,AAAC;IAEjE,qCAAqC;IACrC,MAAMC,aAAa,GAAG,CAAuBC,UAAa,EAAEV,IAAY,EAAEW,MAA+B,GAAK;QAC5GZ,kBAAkB,CAACO,IAAI,CAACC,OAAO,CAACK,IAAI,CAAC;YACnCF,UAAU;YACVV,IAAI;YACJa,OAAO,EAAE;gBACPX,IAAI,EAAE,CAAC,KAAK,EAAEQ,UAAU,CAAC,YAAY,EAAEV,IAAI,CAAC,CAAC;aAC9C;SACF,CAAC,CAAC;QAEH,4EAA4E;QAC5EQ,gBAAgB,CAACR,IAAI,CAAC,GAAGW,MAAM,CAAC;IAClC,CAAC,AAAC;IAEF,MAAMG,mBAAmB,GAA0C;QACjEC,mBAAmB,IAAG;YACpB,OAAOC,OAAO,CAACC,OAAO,CAAC;gBAAClB,kBAAkB;aAAC,CAAC,CAAC;QAC/C,CAAC;QACDmB,kBAAkB,IAAiB;YACjC,OAAOF,OAAO,CAACC,OAAO,CAACT,gBAAgB,CAAC,CAAC;QAC3C,CAAC;KACF,AAAC;IAEF,OAAO;QACLM,mBAAmB;QACnBL,aAAa;KACd,CAAC;AACJ,CAAC;AAED,OAAO,MAAMU,iBAAiB,GAAgB;IAC5CC,cAAc,EAAE,IAAM;QACpB,qBAAO,KAACC,KAAG;YAACC,IAAI,EAAC,QAAQ;sBAAC,iBAAe;UAAM,CAAC;IAClD,CAAC;IACDC,sBAAsB,EAAE,IAAM;QAC5B,qBAAO,KAACF,KAAG;sBAAC,mBAAiB;UAAM,CAAC;IACtC,CAAC;IACDG,oBAAoB,EAAE,IAAO,CAAA,EAAE,CAAA,AAAC;CACjC,CAAC"}
+{"version":3,"sources":["../../src/test/plugin-registry.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 { UnknownSpec } from '@perses-dev/core';\nimport { PanelPlugin, MockPlugin } from '@perses-dev/plugin-system';\n\nconst FakeTimeSeriesPlugin: PanelPlugin<UnknownSpec> = {\n  PanelComponent: () => {\n    return <div>TimeSeriesChart panel</div>;\n  },\n  OptionsEditorComponent: () => {\n    return <div>TimeSeriesChart options</div>;\n  },\n  createInitialOptions: () => ({}),\n};\n\nconst MOCK_TIME_SERIES_PANEL: MockPlugin = {\n  pluginType: 'Panel',\n  kind: 'TimeSeriesChart',\n  plugin: FakeTimeSeriesPlugin,\n};\n\n// Array of default mock plugins added to the PluginRegistry during test renders\nexport const MOCK_PLUGINS: MockPlugin[] = [MOCK_TIME_SERIES_PANEL];\n"],"names":["FakeTimeSeriesPlugin","PanelComponent","div","OptionsEditorComponent","createInitialOptions","MOCK_TIME_SERIES_PANEL","pluginType","kind","plugin","MOCK_PLUGINS"],"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;AAGA,MAAMA,oBAAoB,GAA6B;IACrDC,cAAc,EAAE,IAAM;QACpB,qBAAO,KAACC,KAAG;sBAAC,uBAAqB;UAAM,CAAC;IAC1C,CAAC;IACDC,sBAAsB,EAAE,IAAM;QAC5B,qBAAO,KAACD,KAAG;sBAAC,yBAAuB;UAAM,CAAC;IAC5C,CAAC;IACDE,oBAAoB,EAAE,IAAO,CAAA,EAAE,CAAA,AAAC;CACjC,AAAC;AAEF,MAAMC,sBAAsB,GAAe;IACzCC,UAAU,EAAE,OAAO;IACnBC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAER,oBAAoB;CAC7B,AAAC;AAEF,gFAAgF;AAChF,OAAO,MAAMS,YAAY,GAAiB;IAACJ,sBAAsB;CAAC,CAAC"}

package/dist/test/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/test/render.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAU,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,EAAuB,aAAa,EAAE,MAAM,SAAS,CAAC;AAM7D;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,EAAE,EAAE,KAAK,CAAC,YAAY,EACtB,OAAO,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,EACxC,OAAO,CAAC,EAAE,aAAa,gIAsBxB"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/test/render.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAU,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,EAAuB,aAAa,EAAE,MAAM,SAAS,CAAC;AAQ7D;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,EAAE,EAAE,KAAK,CAAC,YAAY,EACtB,OAAO,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,EACxC,OAAO,CAAC,EAAE,aAAa,gIAsBxB"}

package/dist/test/render.js

@@ -18,6 +18,8 @@ import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ChartsThemeProvider, testChartsTheme } from '@perses-dev/components';
+import { mockPluginRegistry, PluginRegistry } from '@perses-dev/plugin-system';
+import { MOCK_PLUGINS } from './plugin-registry';
 /**
  * Test helper to render a React component with some common app-level providers wrapped around it.
  */ export function renderWithContext(ui, options, history) {
@@ -42,7 +44,10 @@ import { ChartsThemeProvider, testChartsTheme } from '@perses-dev/components';
                     children: /*#__PURE__*/ _jsx(ChartsThemeProvider, {
                         themeName: "perses",
                         chartsTheme: testChartsTheme,
-                        children: ui
+                        children: /*#__PURE__*/ _jsx(PluginRegistry, {
+                            ...mockPluginRegistry(...MOCK_PLUGINS),
+                            children: ui
+                        })
                     })
                 })
             })

package/dist/test/render.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test/render.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 { render, RenderOptions } from '@testing-library/react';\nimport { unstable_HistoryRouter } from 'react-router-dom';\nimport { createMemoryHistory, MemoryHistory } from 'history';\nimport { QueryParamProvider } from 'use-query-params';\nimport { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { ChartsThemeProvider, testChartsTheme } from '@perses-dev/components';\n\n/**\n * Test helper to render a React component with some common app-level providers wrapped around it.\n */\nexport function renderWithContext(\n  ui: React.ReactElement,\n  options?: Omit<RenderOptions, 'queries'>,\n  history?: MemoryHistory\n) {\n  // Create a new QueryClient for each test to avoid caching issues\n  const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, retry: false } } });\n\n  const BaseRender = () => {\n    const HistoryRouter = unstable_HistoryRouter;\n    history = history ?? createMemoryHistory();\n    return (\n      <HistoryRouter history={history}>\n        <QueryClientProvider client={queryClient}>\n          <QueryParamProvider adapter={ReactRouter6Adapter}>\n            <ChartsThemeProvider themeName=\"perses\" chartsTheme={testChartsTheme}>\n              {ui}\n            </ChartsThemeProvider>\n          </QueryParamProvider>\n        </QueryClientProvider>\n      </HistoryRouter>\n    );\n  };\n\n  return render(<BaseRender />, options);\n}\n"],"names":["render","unstable_HistoryRouter","createMemoryHistory","QueryParamProvider","ReactRouter6Adapter","QueryClient","QueryClientProvider","ChartsThemeProvider","testChartsTheme","renderWithContext","ui","options","history","queryClient","defaultOptions","queries","refetchOnWindowFocus","retry","BaseRender","HistoryRouter","client","adapter","themeName","chartsTheme"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,MAAM,QAAuB,wBAAwB,CAAC;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB,CAAC;AAC1D,SAASC,mBAAmB,QAAuB,SAAS,CAAC;AAC7D,SAASC,kBAAkB,QAAQ,kBAAkB,CAAC;AACtD,SAASC,mBAAmB,QAAQ,0CAA0C,CAAC;AAC/E,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,uBAAuB,CAAC;AACzE,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,wBAAwB,CAAC;AAE9E;;CAEC,GACD,OAAO,SAASC,iBAAiB,CAC/BC,EAAsB,EACtBC,OAAwC,EACxCC,OAAuB,EACvB;IACA,iEAAiE;IACjE,MAAMC,WAAW,GAAG,IAAIR,WAAW,CAAC;QAAES,cAAc,EAAE;YAAEC,OAAO,EAAE;gBAAEC,oBAAoB,EAAE,KAAK;gBAAEC,KAAK,EAAE,KAAK;aAAE;SAAE;KAAE,CAAC,AAAC;IAEpH,MAAMC,UAAU,GAAG,IAAM;QACvB,MAAMC,aAAa,GAAGlB,sBAAsB,AAAC;QAC7CW,OAAO,GAAGA,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIV,mBAAmB,EAAE,CAAC;QAC3C,qBACE,KAACiB,aAAa;YAACP,OAAO,EAAEA,OAAO;sBAC7B,cAAA,KAACN,mBAAmB;gBAACc,MAAM,EAAEP,WAAW;0BACtC,cAAA,KAACV,kBAAkB;oBAACkB,OAAO,EAAEjB,mBAAmB;8BAC9C,cAAA,KAACG,mBAAmB;wBAACe,SAAS,EAAC,QAAQ;wBAACC,WAAW,EAAEf,eAAe;kCACjEE,EAAE;sBACiB;kBACH;cACD;UACR,CAChB;IACJ,CAAC,AAAC;IAEF,OAAOV,MAAM,eAAC,KAACkB,UAAU,KAAG,EAAEP,OAAO,CAAC,CAAC;AACzC,CAAC"}
+{"version":3,"sources":["../../src/test/render.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 { render, RenderOptions } from '@testing-library/react';\nimport { unstable_HistoryRouter } from 'react-router-dom';\nimport { createMemoryHistory, MemoryHistory } from 'history';\nimport { QueryParamProvider } from 'use-query-params';\nimport { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { ChartsThemeProvider, testChartsTheme } from '@perses-dev/components';\nimport { mockPluginRegistry, PluginRegistry } from '@perses-dev/plugin-system';\nimport { MOCK_PLUGINS } from './plugin-registry';\n\n/**\n * Test helper to render a React component with some common app-level providers wrapped around it.\n */\nexport function renderWithContext(\n  ui: React.ReactElement,\n  options?: Omit<RenderOptions, 'queries'>,\n  history?: MemoryHistory\n) {\n  // Create a new QueryClient for each test to avoid caching issues\n  const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, retry: false } } });\n\n  const BaseRender = () => {\n    const HistoryRouter = unstable_HistoryRouter;\n    history = history ?? createMemoryHistory();\n    return (\n      <HistoryRouter history={history}>\n        <QueryClientProvider client={queryClient}>\n          <QueryParamProvider adapter={ReactRouter6Adapter}>\n            <ChartsThemeProvider themeName=\"perses\" chartsTheme={testChartsTheme}>\n              <PluginRegistry {...mockPluginRegistry(...MOCK_PLUGINS)}>{ui}</PluginRegistry>\n            </ChartsThemeProvider>\n          </QueryParamProvider>\n        </QueryClientProvider>\n      </HistoryRouter>\n    );\n  };\n\n  return render(<BaseRender />, options);\n}\n"],"names":["render","unstable_HistoryRouter","createMemoryHistory","QueryParamProvider","ReactRouter6Adapter","QueryClient","QueryClientProvider","ChartsThemeProvider","testChartsTheme","mockPluginRegistry","PluginRegistry","MOCK_PLUGINS","renderWithContext","ui","options","history","queryClient","defaultOptions","queries","refetchOnWindowFocus","retry","BaseRender","HistoryRouter","client","adapter","themeName","chartsTheme"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,MAAM,QAAuB,wBAAwB,CAAC;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB,CAAC;AAC1D,SAASC,mBAAmB,QAAuB,SAAS,CAAC;AAC7D,SAASC,kBAAkB,QAAQ,kBAAkB,CAAC;AACtD,SAASC,mBAAmB,QAAQ,0CAA0C,CAAC;AAC/E,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,uBAAuB,CAAC;AACzE,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,wBAAwB,CAAC;AAC9E,SAASC,kBAAkB,EAAEC,cAAc,QAAQ,2BAA2B,CAAC;AAC/E,SAASC,YAAY,QAAQ,mBAAmB,CAAC;AAEjD;;CAEC,GACD,OAAO,SAASC,iBAAiB,CAC/BC,EAAsB,EACtBC,OAAwC,EACxCC,OAAuB,EACvB;IACA,iEAAiE;IACjE,MAAMC,WAAW,GAAG,IAAIX,WAAW,CAAC;QAAEY,cAAc,EAAE;YAAEC,OAAO,EAAE;gBAAEC,oBAAoB,EAAE,KAAK;gBAAEC,KAAK,EAAE,KAAK;aAAE;SAAE;KAAE,CAAC,AAAC;IAEpH,MAAMC,UAAU,GAAG,IAAM;QACvB,MAAMC,aAAa,GAAGrB,sBAAsB,AAAC;QAC7Cc,OAAO,GAAGA,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIb,mBAAmB,EAAE,CAAC;QAC3C,qBACE,KAACoB,aAAa;YAACP,OAAO,EAAEA,OAAO;sBAC7B,cAAA,KAACT,mBAAmB;gBAACiB,MAAM,EAAEP,WAAW;0BACtC,cAAA,KAACb,kBAAkB;oBAACqB,OAAO,EAAEpB,mBAAmB;8BAC9C,cAAA,KAACG,mBAAmB;wBAACkB,SAAS,EAAC,QAAQ;wBAACC,WAAW,EAAElB,eAAe;kCAClE,cAAA,KAACE,cAAc;4BAAE,GAAGD,kBAAkB,IAAIE,YAAY,CAAC;sCAAGE,EAAE;0BAAkB;sBAC1D;kBACH;cACD;UACR,CAChB;IACJ,CAAC,AAAC;IAEF,OAAOb,MAAM,eAAC,KAACqB,UAAU,KAAG,EAAEP,OAAO,CAAC,CAAC;AACzC,CAAC"}

package/dist/utils/component-ids.d.ts

@@ -0,0 +1,8 @@
+declare global {
+    var useIdValue: number;
+}
+/**
+ * Generates a unique (stable) ID for a component. Should be replaced with React.useId once we support only React 18.
+ */
+export declare function useId(prefix: string): string;
+//# sourceMappingURL=component-ids.d.ts.map

package/dist/utils/component-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-ids.d.ts","sourceRoot":"","sources":["../../src/utils/component-ids.ts"],"names":[],"mappings":"AAeA,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,UAAU,EAAE,MAAM,CAAC;CACxB;AAMD;;GAEG;AACH,wBAAgB,KAAK,CAAC,MAAM,EAAE,MAAM,UAMnC"}

package/dist/utils/component-ids.js

@@ -0,0 +1,27 @@
+// 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 { useRef } from 'react';
+if (globalThis.useIdValue === undefined) {
+    globalThis.useIdValue = 0;
+}
+/**
+ * Generates a unique (stable) ID for a component. Should be replaced with React.useId once we support only React 18.
+ */ export function useId(prefix) {
+    const id = useRef(undefined);
+    if (id.current === undefined) {
+        id.current = `${prefix}-${globalThis.useIdValue++}`;
+    }
+    return id.current;
+}
+
+//# sourceMappingURL=component-ids.js.map

package/dist/utils/component-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/component-ids.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 { useRef } from 'react';\n\ndeclare global {\n  // eslint-disable-next-line no-var\n  var useIdValue: number;\n}\n\nif (globalThis.useIdValue === undefined) {\n  globalThis.useIdValue = 0;\n}\n\n/**\n * Generates a unique (stable) ID for a component. Should be replaced with React.useId once we support only React 18.\n */\nexport function useId(prefix: string) {\n  const id = useRef<string | undefined>(undefined);\n  if (id.current === undefined) {\n    id.current = `${prefix}-${globalThis.useIdValue++}`;\n  }\n  return id.current;\n}\n"],"names":["useRef","globalThis","useIdValue","undefined","useId","prefix","id","current"],"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,MAAM,QAAQ,OAAO,CAAC;AAO/B,IAAIC,UAAU,CAACC,UAAU,KAAKC,SAAS,EAAE;IACvCF,UAAU,CAACC,UAAU,GAAG,CAAC,CAAC;AAC5B,CAAC;AAED;;CAEC,GACD,OAAO,SAASE,KAAK,CAACC,MAAc,EAAE;IACpC,MAAMC,EAAE,GAAGN,MAAM,CAAqBG,SAAS,CAAC,AAAC;IACjD,IAAIG,EAAE,CAACC,OAAO,KAAKJ,SAAS,EAAE;QAC5BG,EAAE,CAACC,OAAO,GAAG,CAAC,EAAEF,MAAM,CAAC,CAAC,EAAEJ,UAAU,CAACC,UAAU,EAAE,CAAC,CAAC,CAAC;IACtD,CAAC;IACD,OAAOI,EAAE,CAACC,OAAO,CAAC;AACpB,CAAC"}

package/dist/views/ViewDashboard/DashboardApp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardApp.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAKrD,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,UAAW,iBAAiB,gBAwBpD,CAAC"}
+{"version":3,"file":"DashboardApp.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAYrD,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,UAAW,iBAAiB,gBAkEpD,CAAC"}

package/dist/views/ViewDashboard/DashboardApp.js

@@ -11,13 +11,41 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Box } from '@mui/material';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
-import { PanelDrawer, Dashboard, PanelGroupDialog, DeletePanelGroupDialog } from '../../components';
-import { DashboardToolbar } from '../../components/DashboardToolbar';
-import DeletePanelDialog from '../../components/Panel/DeletePanelDialog';
+import { PanelDrawer, Dashboard, PanelGroupDialog, DeletePanelGroupDialog, UnsavedChangesConfirmationDialog, DashboardToolbar, DeletePanelDialog } from '../../components';
+import { useDashboard, useEditMode } from '../../context';
 export const DashboardApp = (props)=>{
     const { dashboardResource  } = props;
+    const { setEditMode  } = useEditMode();
+    const { dashboard , setDashboard  } = useDashboard();
+    const [originalDashboard, setOriginalDashboard] = useState(undefined);
+    const [isUnsavedDashboardDialogOpen, setUnsavedDashboardDialogIsOpen] = useState(false);
+    const saveDashboard = async ()=>{
+        setEditMode(false);
+        setUnsavedDashboardDialogIsOpen(false);
+    };
+    const cancelDashboard = ()=>{
+        // Reset to the original spec and exit edit mode
+        if (originalDashboard) {
+            setDashboard(originalDashboard);
+        }
+        setUnsavedDashboardDialogIsOpen(false);
+        setEditMode(false);
+    };
+    const onEditButtonClick = ()=>{
+        setEditMode(true);
+        setOriginalDashboard(dashboard);
+    };
+    const onCancelButtonClick = ()=>{
+        // check if dashboard has been modified
+        if (JSON.stringify(dashboard) === JSON.stringify(originalDashboard)) {
+            setEditMode(false);
+        } else {
+            setUnsavedDashboardDialogIsOpen(true);
+        }
+    };
     return /*#__PURE__*/ _jsxs(Box, {
         sx: {
             flexGrow: 1,
@@ -28,7 +56,9 @@ export const DashboardApp = (props)=>{
         },
         children: [
             /*#__PURE__*/ _jsx(DashboardToolbar, {
-                dashboardName: dashboardResource.metadata.name
+                dashboardName: dashboardResource.metadata.name,
+                onEditButtonClick: onEditButtonClick,
+                onCancelButtonClick: onCancelButtonClick
             }),
             /*#__PURE__*/ _jsxs(Box, {
                 sx: {
@@ -42,7 +72,12 @@ export const DashboardApp = (props)=>{
                     /*#__PURE__*/ _jsx(PanelDrawer, {}),
                     /*#__PURE__*/ _jsx(PanelGroupDialog, {}),
                     /*#__PURE__*/ _jsx(DeletePanelGroupDialog, {}),
-                    /*#__PURE__*/ _jsx(DeletePanelDialog, {})
+                    /*#__PURE__*/ _jsx(DeletePanelDialog, {}),
+                    /*#__PURE__*/ _jsx(UnsavedChangesConfirmationDialog, {
+                        isOpen: isUnsavedDashboardDialogOpen,
+                        onSave: saveDashboard,
+                        onClose: cancelDashboard
+                    })
                 ]
             })
         ]

package/dist/views/ViewDashboard/DashboardApp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/ViewDashboard/DashboardApp.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 { Box } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport { PanelDrawer, Dashboard, PanelGroupDialog, DeletePanelGroupDialog } from '../../components';\nimport { DashboardToolbar } from '../../components/DashboardToolbar';\nimport DeletePanelDialog from '../../components/Panel/DeletePanelDialog';\n\nexport interface DashboardAppProps {\n  dashboardResource: DashboardResource;\n}\n\nexport const DashboardApp = (props: DashboardAppProps) => {\n  const { dashboardResource } = props;\n  return (\n    <Box\n      sx={{\n        flexGrow: 1,\n        overflowX: 'hidden',\n        overflowY: 'auto',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <DashboardToolbar dashboardName={dashboardResource.metadata.name} />\n      <Box sx={{ padding: (theme) => theme.spacing(2) }}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <Dashboard />\n        </ErrorBoundary>\n        <PanelDrawer />\n        <PanelGroupDialog />\n        <DeletePanelGroupDialog />\n        <DeletePanelDialog />\n      </Box>\n    </Box>\n  );\n};\n"],"names":["Box","ErrorAlert","ErrorBoundary","PanelDrawer","Dashboard","PanelGroupDialog","DeletePanelGroupDialog","DashboardToolbar","DeletePanelDialog","DashboardApp","props","dashboardResource","sx","flexGrow","overflowX","overflowY","display","flexDirection","dashboardName","metadata","name","padding","theme","spacing","FallbackComponent"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AACpC,SAASC,UAAU,EAAEC,aAAa,QAAQ,wBAAwB,CAAC;AAEnE,SAASC,WAAW,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,sBAAsB,QAAQ,kBAAkB,CAAC;AACpG,SAASC,gBAAgB,QAAQ,mCAAmC,CAAC;AACrE,OAAOC,iBAAiB,MAAM,0CAA0C,CAAC;AAMzE,OAAO,MAAMC,YAAY,GAAG,CAACC,KAAwB,GAAK;IACxD,MAAM,EAAEC,iBAAiB,CAAA,EAAE,GAAGD,KAAK,AAAC;IACpC,qBACE,MAACV,GAAG;QACFY,EAAE,EAAE;YACFC,QAAQ,EAAE,CAAC;YACXC,SAAS,EAAE,QAAQ;YACnBC,SAAS,EAAE,MAAM;YACjBC,OAAO,EAAE,MAAM;YACfC,aAAa,EAAE,QAAQ;SACxB;;0BAED,KAACV,gBAAgB;gBAACW,aAAa,EAAEP,iBAAiB,CAACQ,QAAQ,CAACC,IAAI;cAAI;0BACpE,MAACpB,GAAG;gBAACY,EAAE,EAAE;oBAAES,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;iBAAE;;kCAC/C,KAACrB,aAAa;wBAACsB,iBAAiB,EAAEvB,UAAU;kCAC1C,cAAA,KAACG,SAAS,KAAG;sBACC;kCAChB,KAACD,WAAW,KAAG;kCACf,KAACE,gBAAgB,KAAG;kCACpB,KAACC,sBAAsB,KAAG;kCAC1B,KAACE,iBAAiB,KAAG;;cACjB;;MACF,CACN;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/views/ViewDashboard/DashboardApp.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 { Box } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport {\n  PanelDrawer,\n  Dashboard,\n  PanelGroupDialog,\n  DeletePanelGroupDialog,\n  UnsavedChangesConfirmationDialog,\n  DashboardToolbar,\n  DeletePanelDialog,\n} from '../../components';\nimport { useDashboard, useEditMode } from '../../context';\n\nexport interface DashboardAppProps {\n  dashboardResource: DashboardResource;\n}\n\nexport const DashboardApp = (props: DashboardAppProps) => {\n  const { dashboardResource } = props;\n  const { setEditMode } = useEditMode();\n  const { dashboard, setDashboard } = useDashboard();\n  const [originalDashboard, setOriginalDashboard] = useState<DashboardResource | undefined>(undefined);\n  const [isUnsavedDashboardDialogOpen, setUnsavedDashboardDialogIsOpen] = useState(false);\n\n  const saveDashboard = async () => {\n    setEditMode(false);\n    setUnsavedDashboardDialogIsOpen(false);\n  };\n\n  const cancelDashboard = () => {\n    // Reset to the original spec and exit edit mode\n    if (originalDashboard) {\n      setDashboard(originalDashboard);\n    }\n    setUnsavedDashboardDialogIsOpen(false);\n    setEditMode(false);\n  };\n\n  const onEditButtonClick = () => {\n    setEditMode(true);\n    setOriginalDashboard(dashboard);\n  };\n\n  const onCancelButtonClick = () => {\n    // check if dashboard has been modified\n    if (JSON.stringify(dashboard) === JSON.stringify(originalDashboard)) {\n      setEditMode(false);\n    } else {\n      setUnsavedDashboardDialogIsOpen(true);\n    }\n  };\n\n  return (\n    <Box\n      sx={{\n        flexGrow: 1,\n        overflowX: 'hidden',\n        overflowY: 'auto',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <DashboardToolbar\n        dashboardName={dashboardResource.metadata.name}\n        onEditButtonClick={onEditButtonClick}\n        onCancelButtonClick={onCancelButtonClick}\n      />\n      <Box sx={{ padding: (theme) => theme.spacing(2) }}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <Dashboard />\n        </ErrorBoundary>\n        <PanelDrawer />\n        <PanelGroupDialog />\n        <DeletePanelGroupDialog />\n        <DeletePanelDialog />\n        <UnsavedChangesConfirmationDialog\n          isOpen={isUnsavedDashboardDialogOpen}\n          onSave={saveDashboard}\n          onClose={cancelDashboard}\n        />\n      </Box>\n    </Box>\n  );\n};\n"],"names":["useState","Box","ErrorAlert","ErrorBoundary","PanelDrawer","Dashboard","PanelGroupDialog","DeletePanelGroupDialog","UnsavedChangesConfirmationDialog","DashboardToolbar","DeletePanelDialog","useDashboard","useEditMode","DashboardApp","props","dashboardResource","setEditMode","dashboard","setDashboard","originalDashboard","setOriginalDashboard","undefined","isUnsavedDashboardDialogOpen","setUnsavedDashboardDialogIsOpen","saveDashboard","cancelDashboard","onEditButtonClick","onCancelButtonClick","JSON","stringify","sx","flexGrow","overflowX","overflowY","display","flexDirection","dashboardName","metadata","name","padding","theme","spacing","FallbackComponent","isOpen","onSave","onClose"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,GAAG,QAAQ,eAAe,CAAC;AACpC,SAASC,UAAU,EAAEC,aAAa,QAAQ,wBAAwB,CAAC;AAEnE,SACEC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,sBAAsB,EACtBC,gCAAgC,EAChCC,gBAAgB,EAChBC,iBAAiB,QACZ,kBAAkB,CAAC;AAC1B,SAASC,YAAY,EAAEC,WAAW,QAAQ,eAAe,CAAC;AAM1D,OAAO,MAAMC,YAAY,GAAG,CAACC,KAAwB,GAAK;IACxD,MAAM,EAAEC,iBAAiB,CAAA,EAAE,GAAGD,KAAK,AAAC;IACpC,MAAM,EAAEE,WAAW,CAAA,EAAE,GAAGJ,WAAW,EAAE,AAAC;IACtC,MAAM,EAAEK,SAAS,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGP,YAAY,EAAE,AAAC;IACnD,MAAM,CAACQ,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGpB,QAAQ,CAAgCqB,SAAS,CAAC,AAAC;IACrG,MAAM,CAACC,4BAA4B,EAAEC,+BAA+B,CAAC,GAAGvB,QAAQ,CAAC,KAAK,CAAC,AAAC;IAExF,MAAMwB,aAAa,GAAG,UAAY;QAChCR,WAAW,CAAC,KAAK,CAAC,CAAC;QACnBO,+BAA+B,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC,AAAC;IAEF,MAAME,eAAe,GAAG,IAAM;QAC5B,gDAAgD;QAChD,IAAIN,iBAAiB,EAAE;YACrBD,YAAY,CAACC,iBAAiB,CAAC,CAAC;QAClC,CAAC;QACDI,+BAA+B,CAAC,KAAK,CAAC,CAAC;QACvCP,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,AAAC;IAEF,MAAMU,iBAAiB,GAAG,IAAM;QAC9BV,WAAW,CAAC,IAAI,CAAC,CAAC;QAClBI,oBAAoB,CAACH,SAAS,CAAC,CAAC;IAClC,CAAC,AAAC;IAEF,MAAMU,mBAAmB,GAAG,IAAM;QAChC,uCAAuC;QACvC,IAAIC,IAAI,CAACC,SAAS,CAACZ,SAAS,CAAC,KAAKW,IAAI,CAACC,SAAS,CAACV,iBAAiB,CAAC,EAAE;YACnEH,WAAW,CAAC,KAAK,CAAC,CAAC;QACrB,OAAO;YACLO,+BAA+B,CAAC,IAAI,CAAC,CAAC;QACxC,CAAC;IACH,CAAC,AAAC;IAEF,qBACE,MAACtB,GAAG;QACF6B,EAAE,EAAE;YACFC,QAAQ,EAAE,CAAC;YACXC,SAAS,EAAE,QAAQ;YACnBC,SAAS,EAAE,MAAM;YACjBC,OAAO,EAAE,MAAM;YACfC,aAAa,EAAE,QAAQ;SACxB;;0BAED,KAAC1B,gBAAgB;gBACf2B,aAAa,EAAErB,iBAAiB,CAACsB,QAAQ,CAACC,IAAI;gBAC9CZ,iBAAiB,EAAEA,iBAAiB;gBACpCC,mBAAmB,EAAEA,mBAAmB;cACxC;0BACF,MAAC1B,GAAG;gBAAC6B,EAAE,EAAE;oBAAES,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;iBAAE;;kCAC/C,KAACtC,aAAa;wBAACuC,iBAAiB,EAAExC,UAAU;kCAC1C,cAAA,KAACG,SAAS,KAAG;sBACC;kCAChB,KAACD,WAAW,KAAG;kCACf,KAACE,gBAAgB,KAAG;kCACpB,KAACC,sBAAsB,KAAG;kCAC1B,KAACG,iBAAiB,KAAG;kCACrB,KAACF,gCAAgC;wBAC/BmC,MAAM,EAAErB,4BAA4B;wBACpCsB,MAAM,EAAEpB,aAAa;wBACrBqB,OAAO,EAAEpB,eAAe;sBACxB;;cACE;;MACF,CACN;AACJ,CAAC,CAAC"}