Re-enable transaction duration alert story

x-pack/plugins/apm/public/components/alerting/TransactionDurationAlertTrigger/index.stories.tsx

@@ -3,9 +3,10 @@
  * 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 { cloneDeep, merge } from 'lodash';
-import React from 'react';
+import React, { ComponentType } from 'react';
+import { MemoryRouter, Route } from 'react-router-dom';
 import { TransactionDurationAlertTrigger } from '.';
 import { ApmPluginContextValue } from '../../../context/ApmPluginContext';
 import {
@@ -14,40 +15,55 @@ import {
 } from '../../../context/ApmPluginContext/MockApmPluginContext';
 import { MockUrlParamsContextProvider } from '../../../context/UrlParamsContext/MockUrlParamsContextProvider';
 
-// Disabling this because we currently don't have a way to mock `useEnvironments`
-// which is used by this component. Using the fetch-mock module should work, but
-// our current storybook setup has core-js-related problems when trying to import
-// it.
-// storiesOf('app/TransactionDurationAlertTrigger', module).add('example',
-// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-() => {
+export default {
+  title: 'app/TransactionDurationAlertTrigger',
+  component: TransactionDurationAlertTrigger,
+  decorators: [
+    (Story: ComponentType) => {
+      const contextMock = (merge(cloneDeep(mockApmPluginContextValue), {
+        core: {
+          http: {
+            get: (endpoint: string) => {
+              if (endpoint === '/api/apm/ui_filters/environments') {
+                return Promise.resolve(['production']);
+              } else {
+                return Promise.resolve({
+                  transactionTypes: ['request'],
+                });
+              }
+            },
+          },
+        },
+      }) as unknown) as ApmPluginContextValue;
+
+      return (
+        <div style={{ width: 400 }}>
+          <MemoryRouter initialEntries={['/transactions/test-service-name']}>
+            <Route path="/transactions/:serviceName">
+              <MockApmPluginContextWrapper value={contextMock}>
+                <MockUrlParamsContextProvider>
+                  <Story />
+                </MockUrlParamsContextProvider>
+              </MockApmPluginContextWrapper>
+            </Route>
+          </MemoryRouter>
+        </div>
+      );
+    },
+  ],
+};
+
+export function Example() {
   const params = {
     threshold: 1500,
     aggregationType: 'avg' as const,
     window: '5m',
   };
-
-  const contextMock = (merge(cloneDeep(mockApmPluginContextValue), {
-    core: {
-      http: {
-        get: () => {
-          return Promise.resolve({ transactionTypes: ['request'] });
-        },
-      },
-    },
-  }) as unknown) as ApmPluginContextValue;
-
   return (
-    <div style={{ width: 400 }}>
-      <MockApmPluginContextWrapper value={contextMock}>
-        <MockUrlParamsContextProvider>
-          <TransactionDurationAlertTrigger
-            alertParams={params as any}
-            setAlertParams={() => undefined}
-            setAlertProperty={() => undefined}
-          />
-        </MockUrlParamsContextProvider>
-      </MockApmPluginContextWrapper>
-    </div>
+    <TransactionDurationAlertTrigger
+      alertParams={params as any}
+      setAlertParams={() => undefined}
+      setAlertProperty={() => undefined}
+    />
   );
-};
+}