[Bug]: On Storybook 7, the code snippet doesn't work if one of the controls is hidden

[macabeus]

Describe the bug

I have a React component whose story has conditional controls, but I noticed that it doesn't outputs correctly the JSX if one of the controls is hidden.

The same code works on Storybook 6.

May be related to #22100

To Reproduce

import { Meta, StoryObj } from '@storybook/react';
import React from 'react';

const Example = (props) => {
  return <div>Message: {props.hasMessage ? props.message : 'no text'}</div>;
};

type Component = typeof Example;

const meta: Meta<Component> = {
  component: Example,
  argTypes: {
    hasMessage: { type: 'boolean' },
    message: {
      control: 'text',
      if: { arg: 'hasMessage' },
    },
  },
};

export default meta;

export const Default: StoryObj<Component> = {
  args: {
    hasMessage: false,
    message: 'foo',
  },
};

System

Environment Info:

  System:
    OS: macOS 13.2
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
  Browsers:
    Chrome: 111.0.5563.110
    Firefox: 109.0.1
    Safari: 16.3
  npmPackages:
    @storybook/addon-actions: ^7.0.4 => 7.0.4
    @storybook/addon-docs: ^7.0.4 => 7.0.4
    @storybook/addon-essentials: ^7.0.4 => 7.0.4
    @storybook/addon-links: ^7.0.4 => 7.0.4
    @storybook/addon-mdx-gfm: ^7.0.4 => 7.0.4
    @storybook/node-logger: ^7.0.4 => 7.0.4
    @storybook/react: ^7.0.4 => 7.0.4
    @storybook/react-vite: ^7.0.4 => 7.0.4

Additional context

No response

[shilman]

I can reproduce with your example.This is probably the root cause of your other issue #22100. This is pretty weird--taking a look now!

[shilman]

@tmeasday This looks like a bug here:

storybook/code/ui/blocks/src/blocks/Source.tsx

Lines 83 to 99 in e154c17

	const getStorySource = (
	storyId: StoryId,
	args: Args,
	sourceContext: SourceContextProps
	): SourceItem => {
	const { sources } = sourceContext;
	const sourceMap = sources?.[storyId];
	// If the source decorator hasn't provided args, we fallback to the "unknown args"
	// version of the source (which means if you render a story >1 time with different args
	// you'll get the same source value both times).
	const source = sourceMap?.[argsHash(args)] || sourceMap?.[UNKNOWN_ARGS_HASH];
	// source rendering is async so source is unavailable at the start of the render cycle,
	// so we fail gracefully here without warning
	return source || { code: '' };
	};

Is it possible that this doesn't take conditional controls into account? You can reproduce the problem by copying @macabeus 's example into a sandbox. The JSX is getting rendered successfully, but somehow this function is returning the empty string, which is causing other code to fallback to using the original story source in another part of the code.

[tmeasday]

@shilman I'll admit I don't know how the conditional args work -- where in the chain does the message arg get stripped off?

[winkerVSbecks]

@tmeasday Found a similar issue. Your PR might already fix it but, adding my example here.

I'm using the angular (latest) sandbox. The default button stories that come in the sandbox.

"Show code" works fine both on first load and when I interact with the size controls

However, if I add mapping to that control. Like so:

// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
const meta: Meta<Button> = {
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
  render: (args: Button) => ({
    props: {
      backgroundColor: null,
      ...args,
    },
  }),
  argTypes: {
    backgroundColor: {
      control: 'color',
    },
    size: {
      name: 'size',
      options: ['small', 'medium', 'large'],
      control: { type: 'radio' },
      mapping: {
        small: 'input-small',
        medium: 'input-medium',
        large: 'input-large',
      },
    },
  },
};

Show code works fine on first load, but breaks once I select the control

[tmeasday]

Thanks @winkerVSbecks. Mapping + conditional control filtering happen in the same place so this is indeed the same issue.

[shilman]

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.12 containing PR #22135 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

[shilman]

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.12 containing PR #22135 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade