Set up API access in GitLab storybook
What does this MR do and why?
It improves gitlab-org/gitlab storybook instance to allow writing stories for components that depend on the Rest or GraphQL apis.
How does it work?
We use Storybook’s environment variables feature to inject a GitLab instance’s URL and a personal access token. Storybook sets up axios and exposes the personal access token in the arguments object so users can pass it to the Apollo Client for GraphQL.
This MR also introduces a custom panel where users can enter the API access parameters:
Motivation
I will work in replacing the "Open project in" popover that appears in the Repository view with a more advanced component in the current milestone. I will have to create a feature flag to control the rollout of the new UI. Feature flags create significant overhead in the development and code review processes. Implementing this component in Storybook separates the complexity of rolling out the component from the complexity of the implementing the component itself. This, in turn, creates more focused code reviews.
Demo stories
I modified the Content Editor story to connect with the Markdown REST API.
See demo
I also created a Workspaces UI story that demonstrates the GraphQL API:
See demo
Deprecate storybook-mirage
This Merge Request removes the storybook-mirage dependency. It wasn’t used by any of the stories, and it is a difficult and error-prone approach to mocking server-side requests.
How to set up and validate locally
- Follow the instructions in the documentation to set the GitLab instance URL and the personal access token.
- Run
yarn storybook:start - Try the Content Editor story or the Workspaces UI story.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.