Remove Mock request panel on stories that do not use it

[AlexandreSi]

HI there,

Thank you for your work on this addon!

Here is my code:

export default {
  title: 'ProfileDetails',
  component: ProfileDetails,
  decorators: [paperDecorator, muiDecorator],
  argTypes: {
    profile: {
      control: { type: 'radio' },
      options: ['Complete profile', 'Without username nor bio'],
      defaultValue: 'Complete profile',
      mapping: {
        'Complete profile': completeProfile,
        'Without username nor bio': incompleteProfile,
      },
    },
  },
};

const apiDataServerSideError = {
  mockData: [
    {
      url: 'https://url.to.mock',
      method: 'GET',
      status: 500,
      response: { data: 'status' },
    },
  ],
};

export const MyProfile = (args: ArgsTypes) => (
  <ProfileDetails {...args} />
);
export const MyProfileWithAchievementLoadingError = (args: ArgsTypes) => (
  <ProfileDetails {...args} />
);
MyProfileWithAchievementLoadingError.decorators = [withMock];
MyProfileWithAchievementLoadingError.parameters = apiDataServerSideError;

Note: This is the unique part of my code where I use withMock.

Here is what happens to me:

https://user-images.githubusercontent.com/32449369/142604425-e7a6d8a8-841b-4fe3-b17f-69910f1fa7fa.mov

I feel like the panel, and the mock, should disappear when switching to a component that is not decorated with withMock.

[nutboltu]

@AlexandreSi This panel is registered at the beginning of the storybook config. If we want to hide it we have to do the re-registration every time there's a withMock decorator. This would be a costly approach. Do you have any other option?

[AlexandreSi]

Hi @nutboltu, thank you for your reply! I'm fine with the tab Mock Request present on every story, but I feel like that, if the content of the tab is present everywhere (for example in the component CommandPalette in my video), it would give the user the idea that mocking a request on this story would change something, although it doesn't. But I don't know if it would be costly.

[danielthedifficult]

I don't know if this is related to #114, but I wanted to suggest: If there is a way to unload/remove the service worker or mocking library for stories that don't import/use this addon, that would solve #114 (for me anyway).

[amydegenaro]

You can configure your stories to hide the panel by adding this to each story file:

  parameters: {
    mockAddon: { disable: true },
  },

Alternatively, you can add that to your global parameters in preview.js to disable the addon by default and then enable it for individual stories with { disable: false } .

[JBassx]

Hi, in the new version (4.3.0), it seems it doesn't work. Any update?