Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add storybook to Lagoon UI #1456

Merged
merged 30 commits into from Dec 5, 2019
Merged

Add storybook to Lagoon UI #1456

merged 30 commits into from Dec 5, 2019

Conversation

@JohnAlbin
Copy link
Contributor

JohnAlbin commented Dec 4, 2019

Checklist

  • Affected Issues have been mentioned in the Closing issues section
  • Documentation has been written/updated.
  • Changelog entry has been written

From the new services/ui/README.md:

Storybook has been added to services/ui. Storybook is a set of web pages that can be browsed to see an example of all the components in the Lagoon UI.

To build a static set of webpages in services/ui/storybook-static, run:

cd services/ui
yarn install
yarn build-storybook

The static HTML files can be served through any method or with the provided yarn serve-storybook.

To run the Storybook development server (with hot-loading on file change), run:

cd services/ui
yarn install
yarn storybook

Known issues

Currently, there are 5 components that are misbehaving inside Storybook. They will be fixed in follow-ups.

  1. Pages / Deployments: GraphQL subscriptions don't currently work in our mocked Storybook environment. The browser freezes when subscribeToMore() is run, so the components can't be shown until that is fixed.
  2. Pages / Tasks: same as above.
  3. Pages / Environment / Default: When navigating to this page, it shows a "Internal Server Error". However, when the page is reloaded, the component is displayed without error. I've added a note in Storybook to explain this under Pages / Environment / @TODO.
  4. Components / DeployLatest: A few of the stories under this heading are marked @TODO because their state is dependent on a GraphQL Mutation that I don't know yet how to mock properly in Storybook.
  5. Components / ProjectDetailsSidebar: The component depends on CSS in the Project component to display properly. Both of these components need some refactoring to fix this.

Additionally, several components use React's UseState to track internal state. If you interact with those components in Storybook, you can get them to display those states, but you can't have Storybook show you those states on initial page load since Storybook can't mock the internal state.

Changelog Entry

Improvement - UI is now documented in Storybook (#1279)

Closing issues

closes #1279

@JohnAlbin JohnAlbin force-pushed the 1279-storybook-ui branch from 173ca3a to b5f6761 Dec 5, 2019
@JohnAlbin JohnAlbin force-pushed the 1279-storybook-ui branch from b5f6761 to 3a78030 Dec 5, 2019
@JohnAlbin JohnAlbin marked this pull request as ready for review Dec 5, 2019
@JohnAlbin JohnAlbin requested a review from rocketeerbkw Dec 5, 2019
@JohnAlbin

This comment has been minimized.

Copy link
Contributor Author

JohnAlbin commented Dec 5, 2019

The most interesting file from this PR is going to be services/api/src/mocks.js, which makes mocked Apollo resolvers for all types in typedefs.js.

@JohnAlbin JohnAlbin changed the title 1279 storybook ui Add storybook to Lagoon UI Dec 5, 2019
@simesy

This comment has been minimized.

Copy link
Contributor

simesy commented Dec 5, 2019

Cool :)

import { SchemaLink } from 'apollo-link-schema';
import { ApolloProvider } from 'react-apollo';
import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools';
import typeDefs from 'api/src/typeDefs';

This comment has been minimized.

Copy link
@rocketeerbkw

rocketeerbkw Dec 5, 2019

Member

How does this translate to the correct /services/api path on disk? In all the other services the way to reference code outside the service folder was to import a module, eg @lagoon/commons.

A related question is... since only the ui folder is copied into the container, storybook would not be able to run inside docker I presume? Is it only useful to run locally or would we want to consider building storybook inside the containers also?

This comment has been minimized.

Copy link
@JohnAlbin

JohnAlbin Dec 5, 2019

Author Contributor

How does this translate to the correct /services/api path on disk? In all the other services the way to reference code outside the service folder was to import a module, eg @lagoon/commons.

Honestly, I was scratching my head on this one too. PHPStorm rewrote the import path when I was moving files around. And, yet, it still worked fine from my local command line. There's no … config that I saw that referenced the services/api directory, so I have no idea why it actually works.

What's the proper way to import a file from one /services directory to another?

A related question is... since only the ui folder is copied into the container, storybook would not be able to run inside docker I presume?

If we can do a proper import of typedefs and mocks, then we can.

This comment has been minimized.

Copy link
@rocketeerbkw

rocketeerbkw Dec 5, 2019

Member

What's the proper way? Excellent question. The current way is to add code that needs to be in multiple services to the @lagoon/commons package in node-packages/commons and that can be imported anywhere it's needed.

Technically the API doesn't use the mocks, so it could go in the ui only. But that seems weird. Open to suggestions. This can also be a follow up issue with the other known issues.

@JohnAlbin JohnAlbin force-pushed the 1279-storybook-ui branch from d6a2367 to d1d3e5f Dec 5, 2019
@JohnAlbin JohnAlbin force-pushed the 1279-storybook-ui branch from d1d3e5f to 2214a8d Dec 5, 2019
Copy link
Member

rocketeerbkw left a comment

Overall LATM (looks awesome to me), with known issues that can have follow-ups

@Schnitzel Schnitzel merged commit 8c09dfb into master Dec 5, 2019
1 check passed
1 check passed
continuous-integration/jenkins/pr-merge This commit looks good
Details
@Schnitzel Schnitzel added this to the v1.2.0 milestone Dec 5, 2019
@JohnAlbin JohnAlbin deleted the 1279-storybook-ui branch Dec 6, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.