"View external Storybook" link broken for URLs with a directory

[marksmccann]

Is your feature request related to a problem? Please describe

We are using Storybook Composition to import an app located in a directory on the domain (e.g. http://www.domain.com/storybook-app/) instead of the root (e.g. http://www.domain.com). Our configuration looks something like this:

refs: {
    'design-system': {
        title: "Storybook Design System",
        url: "https://www.domain.com/my-storybook-app/"
    }
}

With this type of url, the app successfully imports the external app however, the link to "View external Storybook" does not work. The link points to "https://www.domain.com/my-storybook-app" instead of "https://www.domain.com/my-storybook-app/". Because the trailing / is missing, the browser fails to load the app.

Describe the solution you'd like

I would like to append a trailing forward slash (/) to the "View external Storybook" link in the ref indicator flyout so that the link will successfully open a storybook app located in a directory of a URL.

Describe alternatives you've considered

These are the ways I have tried to make it work:

• Appending / in the configuration does not work. It is stripped from the url automatically.
• Appending /index.html fixes the link, but then the app fails to load in the left-hand nav.
• Escaping the / also does not work (e.g. \/ or \\/).

These are the possible solutions I have considered:

• Append / to the end of the url for the link's href.
• Append /index.html to the end of the url for the link's href.
• Strip the basename off the url before retrieving the stories.json config from the domain.

Are you able to assist to bring the feature to reality?

Yes, I'd love to help. However, I would like your opinion on the most desirable solution and a little direction on how best to proceed. Thanks!

[ndelangen]

@marksmccann I think if we append /index.html here:

storybook/lib/ui/src/components/sidebar/RefIndicator.tsx

Line 223 in 6c0e005

<Message href={url} target="_blank">

It should fix this issue.

[marksmccann]

@ndelangen Agreed. Would you like me to put a PR together?

[ndelangen]

@marksmccann yeah that'd be super appreciated !

[marksmccann]

@ndelangen Great, I'm on it!

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.34 containing PR #12932 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.