fix(dashboard): prevent initialState from being shared across dashboa…

…rd instances

packages/dashboard/src/store/index.ts

@@ -1,5 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit';
 import merge from 'lodash/merge';
+import cloneDeep from 'lodash/cloneDeep';
 import { initialState } from './state';
 import { dashboardReducer } from './reducer';
 import type { Store } from 'redux';
@@ -10,7 +11,12 @@ import type { RecursivePartial, DashboardConfiguration } from '~/types';
 export type DashboardStore = Store<DashboardState, DashboardAction>;
 
 export const configureDashboardStore = (preloadedState?: RecursivePartial<DashboardState>) => {
-  const mergedState = merge(initialState, preloadedState);
+  /**
+   * Merge modifies the source object so it must be cloned or initialState
+   * will be shared between different instances of the dashboard store.
+   */
+  const mergedState = cloneDeep(initialState);
+  merge(mergedState, preloadedState);
 
   const store = configureStore({
     reducer: dashboardReducer,

packages/dashboard/src/store/state.spec.ts

@@ -0,0 +1,25 @@
+import merge from 'lodash/merge';
+import { initialState } from './state';
+
+it('does not modify initialState', () => {
+  const illegalModification = () => {
+    merge(initialState, {
+      dashboardConfiguration: {
+        widgets: [
+          {
+            id: 'test-widget',
+            type: 'test',
+            x: 0,
+            y: 0,
+            z: 1,
+            height: 10,
+            width: 10,
+            properties: {},
+          },
+        ],
+      },
+    });
+  };
+
+  expect(illegalModification).toThrowError();
+});

packages/dashboard/src/store/state.ts

@@ -1,4 +1,5 @@
 import type { DashboardWidgetsConfiguration, DashboardWidget } from '~/types';
+import { deepFreeze } from '~/util/deepFreeze';
 
 export type DashboardState = {
   grid: {
@@ -15,7 +16,16 @@ export type DashboardState = {
   dashboardConfiguration: DashboardWidgetsConfiguration;
 };
 
-export const initialState: DashboardState = {
+/**
+ * default state for the dashboard to use.
+ *
+ * We want to prevent modification of this object
+ * since it is exported as a singleton and will be
+ * used to setup the initial dashboard state between
+ * different instances of dashboard.
+ *
+ */
+export const initialState: DashboardState = deepFreeze({
   grid: {
     enabled: true,
     width: 100,
@@ -31,4 +41,4 @@ export const initialState: DashboardState = {
     viewport: { duration: '5m' },
     widgets: [],
   },
-};
+});

packages/dashboard/src/util/deepFreeze.spec.ts

@@ -0,0 +1,29 @@
+import { deepFreeze } from './deepFreeze';
+
+it('prevents extensions of an object', () => {
+  const obj = deepFreeze({});
+
+  const illegalExtension = () => {
+    /**
+     * Should prevent extension even if you try to
+     * circumvent the type restrictions
+     */
+    (obj as any)['test'] = 1; // eslint-disable-line
+  };
+
+  expect(illegalExtension).toThrowError();
+});
+
+it('prevents modifications of an object', () => {
+  const obj = deepFreeze({
+    nestedObject: {
+      value: 1,
+    },
+  });
+
+  const illegalModification = () => {
+    obj.nestedObject.value = 2;
+  };
+
+  expect(illegalModification).toThrowError();
+});

packages/dashboard/src/util/deepFreeze.ts

@@ -0,0 +1,9 @@
+export const deepFreeze = <T extends object>(obj: T) => {
+  for (const key in obj) {
+    const value = obj[key];
+    if (value && typeof value === 'object' && !Object.isFrozen(value)) {
+      deepFreeze(value);
+    }
+  }
+  return Object.freeze(obj);
+};