[APM] Storybook theme fixes (#69730)

* [APM] Storybook theme fixes The changes adding theme support in #69362 broke some of the Storybook stories. Add decorators to wrap some of the stories in the theme context. This should be done in a global decorator, but our current storybook setup doesn't support this. It also would be nice to be able to switch between light/dark mode, but that's something we can add in the future. * Remove unused import * Adds missing decorator to cytoscape examples + adds a new real-world example Co-authored-by: Oliver Gupte <olivergupte@gmail.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Jun 24, 2020 · fbab7af · fbab7af
1 parent 94e1b57
commit fbab7af
Show file tree

Hide file tree

Showing 4 changed files with 2,434 additions and 267 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx
@@ -10,60 +10,63 @@ import cytoscape from 'cytoscape';
 import React from 'react';
 import { Cytoscape } from '../Cytoscape';
 import { iconForNode } from '../icons';
+import { EuiThemeProvider } from '../../../../../../observability/public';
 
-storiesOf('app/ServiceMap/Cytoscape', module).add(
-  'example',
-  () => {
-    const elements: cytoscape.ElementDefinition[] = [
-      {
-        data: {
-          id: 'opbeans-python',
-          'service.name': 'opbeans-python',
-          'agent.name': 'python',
-        },
-      },
-      {
-        data: {
-          id: 'opbeans-node',
-          'service.name': 'opbeans-node',
-          'agent.name': 'nodejs',
-        },
-      },
-      {
-        data: {
-          id: 'opbeans-ruby',
-          'service.name': 'opbeans-ruby',
-          'agent.name': 'ruby',
-        },
-      },
-      { data: { source: 'opbeans-python', target: 'opbeans-node' } },
-      {
-        data: {
-          bidirectional: true,
-          source: 'opbeans-python',
-          target: 'opbeans-ruby',
-        },
-      },
-    ];
-    const height = 300;
-    const width = 1340;
-    const serviceName = 'opbeans-python';
-    return (
-      <Cytoscape
-        elements={elements}
-        height={height}
-        width={width}
-        serviceName={serviceName}
-      />
-    );
-  },
-  {
-    info: {
-      propTables: false,
-      source: false,
+storiesOf('app/ServiceMap/Cytoscape', module)
+  .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)
+  .add(
+    'example',
+    () => {
+      const elements: cytoscape.ElementDefinition[] = [
+        {
+          data: {
+            id: 'opbeans-python',
+            'service.name': 'opbeans-python',
+            'agent.name': 'python',
+          },
+        },
+        {
+          data: {
+            id: 'opbeans-node',
+            'service.name': 'opbeans-node',
+            'agent.name': 'nodejs',
+          },
+        },
+        {
+          data: {
+            id: 'opbeans-ruby',
+            'service.name': 'opbeans-ruby',
+            'agent.name': 'ruby',
+          },
+        },
+        { data: { source: 'opbeans-python', target: 'opbeans-node' } },
+        {
+          data: {
+            bidirectional: true,
+            source: 'opbeans-python',
+            target: 'opbeans-ruby',
+          },
+        },
+      ];
+      const height = 300;
+      const width = 1340;
+      const serviceName = 'opbeans-python';
+      return (
+        <Cytoscape
+          elements={elements}
+          height={height}
+          width={width}
+          serviceName={serviceName}
+        />
+      );
     },
-  }
-);
+    {
+      info: {
+        propTables: false,
+        source: false,
+      },
+    }
+  );
 
 storiesOf('app/ServiceMap/Cytoscape', module).add(
   'node icons',