Controls: Reset button broken for !undefined URL values

[shilman]

When you set the value to an arg as !undefined in the URL, e.g. by following the reproduction steps in #18135, then hit the "reset" button in the controls UI, you would expect the story to return to its original state (equivalent of deleting args=xxx from the URL). However it retains the !undefined value.

[Tomastomaslol]

I had a look at this and if I understood it correctly ! is used as a "value prefix" for arguments and is used internally to store values as a string.

See:

• https://github.com/storybookjs/storybook/blob/next/lib/router/src/utils.ts#L90
• https://github.com/storybookjs/storybook/blob/next/lib/preview-web/src/parseArgsParam.ts#L42

If you pass !undefined as a query parameter it translates that internally to undefined but the query parameter stays as !undefined. Which means it can't be reset.

I'm not 100% sure I understand the use case correctly but to me, it looks like the ! prefix was meant for prefixing values internally and not intended to be used for values passed down as URL parameters?

Could the prefix be more complex?

what about something like:

    const INTERNAL_ONLY_ARGS_VALUE_PREFIX = 'INTERNAL_ONLY_ARGS_VALUE_PREFIX';

    if (type === 'value' && str.startsWith(INTERNAL_ONLY_ARGS_VALUE_PREFIX)) {
      if (str === `${INTERNAL_ONLY_ARGS_VALUE_PREFIX}undefined`) return undefined;
      if (str === `${INTERNAL_ONLY_ARGS_VALUE_PREFIX}null`) return null;
   }

Please let me know if I misunderstood something or if there is a better way to solve this 🙂

[Tomastomaslol]

https://storybook.js.org/docs/react/writing-stories/args#setting-args-through-the-url

It looks like ! was a feature that was documented and intended to be used by passing values through the URL as prameters.

I opened PR #18231 which fixes the issue by resetting all args to their initial value. Please let me know if this is a suitable fix! 🙂

[shilman]

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-rc.1 containing PR #18231 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.