feat: merge global parameters (#6900)

feat: merge global parameters

lib/client-api/src/client_api.js

@@ -8,6 +8,7 @@ import { toId } from '@storybook/router/utils';
 
 import mergeWith from 'lodash/mergeWith';
 import isEqual from 'lodash/isEqual';
+import get from 'lodash/get';
 
 import subscriptionsStore from './subscriptions_store';
 
@@ -102,7 +103,13 @@ export default class ClientApi {
   };
 
   addParameters = parameters => {
-    Object.assign(this._globalParameters, parameters);
+    this._globalParameters = {
+      ...this._globalParameters,
+      ...parameters,
+      options: {
+        ...merge(get(this._globalParameters, 'options', {}), get(parameters, 'options', {})),
+      },
+    };
   };
 
   clearDecorators = () => {

lib/client-api/src/client_api.test.js

@@ -112,6 +112,65 @@ describe('preview.client_api', () => {
     });
   });
 
+  describe('addParameters', () => {
+    it('should add parameters', () => {
+      const { clientApi } = getContext();
+
+      clientApi.addParameters({ a: '1' });
+
+      // eslint-disable-next-line no-underscore-dangle
+      expect(clientApi._globalParameters).toEqual({ a: '1', options: {} });
+    });
+
+    it('should merge options', () => {
+      const { clientApi } = getContext();
+
+      clientApi.addParameters({ options: { a: '1' } });
+      clientApi.addParameters({ options: { b: '2' } });
+
+      // eslint-disable-next-line no-underscore-dangle
+      expect(clientApi._globalParameters).toEqual({ options: { a: '1', b: '2' } });
+    });
+
+    it('should override specific properties in options', () => {
+      const { clientApi } = getContext();
+
+      clientApi.addParameters({ backgrounds: ['value'], options: { a: '1', b: '3' } });
+      clientApi.addParameters({ options: { a: '2' } });
+
+      // eslint-disable-next-line no-underscore-dangle
+      expect(clientApi._globalParameters).toEqual({
+        backgrounds: ['value'],
+        options: { a: '2', b: '3' },
+      });
+    });
+
+    it('should replace top level properties and override specific properties in options', () => {
+      const { clientApi } = getContext();
+
+      clientApi.addParameters({ backgrounds: ['value'], options: { a: '1', b: '3' } });
+      clientApi.addParameters({ backgrounds: [], options: { a: '2' } });
+
+      // eslint-disable-next-line no-underscore-dangle
+      expect(clientApi._globalParameters).toEqual({
+        backgrounds: [],
+        options: { a: '2', b: '3' },
+      });
+    });
+
+    it('should deep merge in options', () => {
+      const { clientApi } = getContext();
+
+      clientApi.addParameters({ options: { a: '1', b: '2', theming: { c: '3' } } });
+      clientApi.addParameters({ options: { theming: { c: '4', d: '5' } } });
+
+      // eslint-disable-next-line no-underscore-dangle
+      expect(clientApi._globalParameters).toEqual({
+        options: { a: '1', b: '2', theming: { c: '4', d: '5' } },
+      });
+    });
+  });
+
   describe('addDecorator', () => {
     it('should add local decorators', () => {
       const {