fix: disableUsingOriginal bug

Author: nutboltu

packages/mock-addon/src/Panel.js

@@ -7,17 +7,18 @@ import { MockItem } from './components/MockItem';
 import { ErrorItem } from './components/ErrorItem';
 
 export const Panel = (props) => {
-    const [mockData, setState] = useAddonState(ADDON_ID, []);
+    const [state, setState] = useAddonState(ADDON_ID, { mockData: [], disableUsingOriginal: false });
     const emit = useChannel({
-        [EVENTS.SEND]: (newMockData) => {
-            setState(newMockData);
+        [EVENTS.SEND]: (newState) => {
+            setState(newState);
         },
     });
 
     const onChange = (item, key, value) => {
         emit(EVENTS.UPDATE, { item, key, value });
     };
 
+    const { mockData, disableUsingOriginal } = state;
     if (!mockData || mockData.length === 0) {
         return (
             <AddonPanel {...props}>
@@ -51,6 +52,7 @@ export const Panel = (props) => {
                             onChange={(key, value) =>
                                 onChange(item, key, value)
                             }
+                            disableUsingOriginal={disableUsingOriginal}
                             {...rest}
                         />
                     );

packages/mock-addon/src/components/MockItem/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useParameter } from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
 import { ObjectControl, RangeControl } from '@storybook/blocks';
 import { Form, Placeholder, TabsState } from '@storybook/components';
@@ -86,8 +85,8 @@ export const MockItem = ({
     response,
     delay,
     onChange,
+    disableUsingOriginal,
 }) => {
-    const { disableUsingOriginal } = useParameter();
     return (
         <Card
             onToggle={(value) => onChange('skip', !value)}
@@ -159,4 +158,5 @@ MockItem.propTypes = {
     response: PropTypes.any,
     delay: PropTypes.number.isRequired,
     onChange: PropTypes.func.isRequired,
+    disableUsingOriginal: PropTypes.bool.isRequired,
 };

packages/mock-addon/src/withRoundTrip.js

@@ -18,8 +18,9 @@ export const withRoundTrip = (storyFn, context) => {
     const mockAddonConfigs = getParameter(parameters, GLOBAL_PARAM_KEY, {
         refreshStoryOnUpdate: false,
         globalMockData: [],
+        disableUsingOriginal: false,
     });
-    const { globalMockData, refreshStoryOnUpdate } = mockAddonConfigs;
+    const { globalMockData, refreshStoryOnUpdate, disableUsingOriginal } = mockAddonConfigs;
     const data = [...globalMockData, ...paramData];
 
     /**
@@ -29,7 +30,10 @@ export const withRoundTrip = (storyFn, context) => {
     if (INITIAL_MOUNT_STATE) {
         faker.makeInitialRequestMap(data);
 
-        channel.emit(EVENTS.SEND, faker.getRequests());
+        channel.emit(EVENTS.SEND, {
+            mockData: faker.getRequests(),
+            disableUsingOriginal,
+        });
 
         channel.on(STORY_CHANGED, () => {
             STORY_CHANGED_STATE = true;
@@ -38,7 +42,10 @@ export const withRoundTrip = (storyFn, context) => {
         channel.on(EVENTS.UPDATE, ({ item, key, value }) => {
             faker.update(item, key, value);
             const req = faker.getRequests();
-            channel.emit(EVENTS.SEND, req);
+            channel.emit(EVENTS.SEND, {
+                mockData: req,
+                disableUsingOriginal,
+            });
             refreshStoryOnUpdate && channel.emit(FORCE_RE_RENDER);
         });
 
@@ -51,7 +58,10 @@ export const withRoundTrip = (storyFn, context) => {
      */
     if (STORY_CHANGED_STATE) {
         faker.makeInitialRequestMap(data);
-        channel.emit(EVENTS.SEND, faker.getRequests());
+        channel.emit(EVENTS.SEND, {
+            mockData: faker.getRequests(),
+            disableUsingOriginal,
+        });
         STORY_CHANGED_STATE = false;
     }
     return storyFn(context);