[APM] Storybook support (#54970)

Add Storybook with help from changes in #43529.

    We still need to do some work around having mocks for hooks and HTTP requests but the basics are there.

src/dev/storybook/aliases.ts

@@ -18,6 +18,7 @@
  */
 
 export const storybookAliases = {
+  apm: 'x-pack/legacy/plugins/apm/scripts/storybook.js',
   canvas: 'x-pack/legacy/plugins/canvas/scripts/storybook_new.js',
   embeddable: 'src/plugins/embeddable/scripts/storybook.js',
   infra: 'x-pack/legacy/plugins/infra/scripts/storybook.js',

x-pack/legacy/plugins/apm/public/components/app/ServiceMap/PlatinumLicensePrompt.stories.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { PlatinumLicensePrompt } from './PlatinumLicensePrompt';
+import {
+  ApmPluginContext,
+  ApmPluginContextValue
+} from '../../../context/ApmPluginContext';
+
+storiesOf('app/ServiceMap/PlatinumLicensePrompt', module).add(
+  'example',
+  () => {
+    const contextMock = ({
+      core: { http: { basePath: { prepend: () => {} } } }
+    } as unknown) as ApmPluginContextValue;
+
+    return (
+      <ApmPluginContext.Provider value={contextMock}>
+        <PlatinumLicensePrompt />
+      </ApmPluginContext.Provider>
+    );
+  },
+  {
+    info: {
+      source: false
+    }
+  }
+);

x-pack/legacy/plugins/apm/readme.md

@@ -40,7 +40,6 @@ For testing purposes APM uses 3 custom users:
 
 **kibana_write_user** Apps: read/write. Indices: None
 
-
 To create the users with the correct roles run the following script:
 
 ```sh
@@ -88,6 +87,12 @@ yarn prettier  "./x-pack/legacy/plugins/apm/**/*.{tsx,ts,js}" --write
 yarn eslint ./x-pack/legacy/plugins/apm --fix
 ```
 
+#### Storybook
+
+Start the [Storybook](https://storybook.js.org/) development environment with
+`yarn storybook apm`. All files with a .stories.tsx extension will be loaded.
+You can access the development environment at http://localhost:9001.
+
 #### Further resources
 
 - [Cypress integration tests](cypress/README.md)

x-pack/legacy/plugins/apm/scripts/storybook.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { join } from 'path';
+
+// eslint-disable-next-line
+require('@kbn/storybook').runStorybookCli({
+  name: 'apm',
+  storyGlobs: [
+    join(__dirname, '..', 'public', 'components', '**', '*.stories.tsx')
+  ]
+});