test: add ErrorModal tests and story

[ofhope]

No issue number

Changes:

Adds tests and Storybook story around the ErrorModal component

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[lindapaiste]

Looks good. I have some specific feedback but there's nothing here that's a problem.

[lindapaiste]

I think it might be better to define these options in the propTypes of the component rather than here. If we do it that way then Storybook will pick up on the options automatically and we'll also get the validation in prop-types.

ErrorModal.propTypes = {
  type: PropTypes.oneOf([
    'forceAuthentication',
    'staleSession',
    'staleProject',
    'oauthError'
  ]).isRequired,
  closeModal: PropTypes.func.isRequired,
  service: PropTypes.oneOf(['google', 'github'])
};

[ofhope]

The action wasn't picked up with this 😞 so left that argType.

[lindapaiste]

Yeah when I was playing around with it I left the closeModal in. I'm not aware of a trick for those, at least not yet.

FYI, if you want to keep it as a dropdown rather than radio buttons (I don't think it matters?) then you can provide a partial config like service: { control: { type: 'select' } } which specifies the control and it will still infer the options.

[lindapaiste]

FYI I tried seeing if wrapping in <Overlay> here would show us the actual UI but does not ☹️.

Not a problem. Maybe something we can play with later if we want to.

[ofhope]

Oh interesting. I'm still familiarising myself with the components in the application. I was wondering where the overlay was 😄 It would make a nicer story seeing the modal represented with the overlay.

[lindapaiste]

I have to try it again after the theming changes in #2326. I think the way that they SCSS gets generated is that it creates selectors like .light .overlay and .dark .overlay but not just .overlay. So it's possible that the overlay UI will work once it's inside the right parent container.

[lindapaiste]

Honestly it feels like a bit of a naming mistake that this is called ErrorModal when it doesn't include the modal part. Really it's more of an ErrorMessage!

It could potentially be modified so that it takes the overlay's title and ariaLabel as props and renders both the Overlay and the message.