[SharedUX] Fix Storybook (#144677)

## Summary

When working on changing one of our components, I noticed that the our
storybook is missing a lot of components. You can see that there are no
components under `No Data` besides `Prompt`:
<img width="224" alt="Screenshot 2022-11-04 at 18 14 22"
src="https://user-images.githubusercontent.com/1937956/200268753-f2708d0b-f467-46d2-b04f-5426df1ae141.png">

Troubleshooting was challenging because the console was full of
misleading errors, but also - because storybook does not load source
maps - another issue we should look into.

After some digging, the root cause was coming from using `jest.fn` in
`redirect_app_links` component:

https://github.com/elastic/kibana/blob/main/packages/shared-ux/link/redirect_app/mocks/src/jest.ts#L19
Since we have a nice component tree here, the other components' stories
directly or indirectly depend on this module, so they failed to load.

I believe something in the jest configuration was not properly
configured, so it prevented `jest.fn()` to resolve. But given this is
the only place where we use `jest.fn` in that module, I replaced it with
a stub and got rid of jest entirely. And voila - stories are back:
<img width="642" alt="Screenshot 2022-11-07 at 09 54 27"
src="https://user-images.githubusercontent.com/1937956/200269730-549d3fca-392f-42e9-a941-6ef37000242e.png">

I also added `npm_module_types` to a few places where I thought they
were missing.


### Checklist

Delete any items that are not applicable to this PR.



### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Maja Grubic 2022-11-08 18:29:59 +01:00 committed by GitHub
parent 03166d29b0
commit dd03796cdf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 6 additions and 16 deletions

View file

@ -67,7 +67,7 @@ TYPES_DEPS = [
"@npm//@types/react",
"@npm//@storybook/addon-actions",
"@npm//rxjs",
"//packages/shared-ux/link/redirect_app/types",
"//packages/shared-ux/link/redirect_app/types:npm_module_types",
"//packages/shared-ux/storybook/mock:npm_module_types",
]

View file

@ -1,13 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
module.exports = {
preset: '@kbn/test',
rootDir: '../../../../..',
roots: ['<rootDir>/packages/shared-ux/link/redirect_app/mocks'],
};

View file

@ -16,7 +16,9 @@ import {
type Params = Pick<RedirectAppLinksServices, 'navigateToUrl'>;
const defaultParams: Params = {
navigateToUrl: jest.fn(),
navigateToUrl: (url: string) => {
return new Promise<void>(() => {});
},
};
/**

View file

@ -47,6 +47,7 @@ NPM_MODULE_EXTRA_FILES = [
# eg. "@npm//lodash"
RUNTIME_DEPS = [
"@npm//react",
"@npm//@storybook/addon-actions",
"//packages/shared-ux/card/no_data/mocks",
"//packages/shared-ux/storybook/mock",
]
@ -64,7 +65,7 @@ TYPES_DEPS = [
"@npm//@types/node",
"@npm//@types/jest",
"@npm//@types/react",
"//packages/shared-ux/page/no_data/types",
"//packages/shared-ux/page/no_data/types:npm_module_types",
"//packages/shared-ux/card/no_data/mocks:npm_module_types",
"//packages/shared-ux/storybook/mock:npm_module_types",
]