Storybook and Jest cleanup (elastic#79305)

* Fix all broken stories
* Get rid of all Jest warnings
* Remove `@ts-expect-error`s added for JSON imports and fix their type errors
* Convert some stories to [Component Story Format](https://storybook.js.org/docs/react/api/csf)
* Replace story for Service Map with many external services with one for the popover with many external services
* Center and fit cytoscape maps in stories
* Rename some files to snake_case

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

@@ -4,41 +4,44 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { storiesOf } from '@storybook/react';
 import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 import { ErrorCountAlertTrigger } from '.';
 import { ApmPluginContextValue } from '../../../context/ApmPluginContext';
 import {
   mockApmPluginContextValue,
   MockApmPluginContextWrapper,
 } from '../../../context/ApmPluginContext/MockApmPluginContext';
 
-storiesOf('app/ErrorCountAlertTrigger', module).add(
-  'example',
-  () => {
-    const params = {
-      threshold: 2,
-      window: '5m',
-    };
-
-    return (
+export default {
+  title: 'app/ErrorCountAlertTrigger',
+  component: ErrorCountAlertTrigger,
+  decorators: [
+    (Story: React.ComponentClass) => (
       <MockApmPluginContextWrapper
         value={(mockApmPluginContextValue as unknown) as ApmPluginContextValue}
       >
-        <div style={{ width: 400 }}>
-          <ErrorCountAlertTrigger
-            alertParams={params as any}
-            setAlertParams={() => undefined}
-            setAlertProperty={() => undefined}
-          />
-        </div>
+        <MemoryRouter>
+          <div style={{ width: 400 }}>
+            <Story />
+          </div>
+        </MemoryRouter>
       </MockApmPluginContextWrapper>
-    );
-  },
-  {
-    info: {
-      propTablesExclude: [ErrorCountAlertTrigger, MockApmPluginContextWrapper],
-      source: false,
-    },
-  }
-);
+    ),
+  ],
+};
+
+export function Example() {
+  const params = {
+    threshold: 2,
+    window: '5m',
+  };
+
+  return (
+    <ErrorCountAlertTrigger
+      alertParams={params as any}
+      setAlertParams={() => undefined}
+      setAlertProperty={() => undefined}
+    />
+  );
+}

x-pack/plugins/apm/public/components/alerting/fields.test.tsx

@@ -9,7 +9,7 @@ import { act, fireEvent, render } from '@testing-library/react';
 import { expectTextsInDocument } from '../../utils/testHelpers';
 
 describe('alerting fields', () => {
-  describe('Service Fiels', () => {
+  describe('Service Field', () => {
     it('renders with value', () => {
       const component = render(<ServiceField value="foo" />);
       expectTextsInDocument(component, ['foo']);

x-pack/plugins/apm/public/components/alerting/fields.tsx

@@ -43,7 +43,7 @@ export function EnvironmentField({
       })}
     >
       <EuiSelect
-        value={currentValue}
+        defaultValue={currentValue}
         options={options}
         onChange={onChange}
         compressed
@@ -75,7 +75,7 @@ export function TransactionTypeField({
     <PopoverExpression value={currentValue} title={label}>
       <EuiSelect
         data-test-subj="transactionTypeField"
-        value={currentValue}
+        defaultValue={currentValue}
         options={options}
         onChange={onChange}
         compressed

x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/List.test.tsx

@@ -43,7 +43,6 @@ describe('ErrorGroupOverview -> List', () => {
       <MemoryRouter>
         <MockApmPluginContextWrapper>
           <MockUrlParamsContextProvider>
-            {/* @ts-expect-error invalid json props */}
             <ErrorGroupList items={props.items} serviceName="opbeans-python" />
           </MockUrlParamsContextProvider>
         </MockApmPluginContextWrapper>

x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/props.json

@@ -2,31 +2,39 @@
   "items": [
     {
       "message": "About to blow up!",
+      "type": "AssertionError",
       "occurrenceCount": 75,
       "culprit": "elasticapm.contrib.django.client.capture",
       "groupId": "a0ce2c8978ef92cdf2ff163ae28576ee",
-      "latestOccurrenceAt": "2018-01-10T10:06:37.561Z"
+      "latestOccurrenceAt": "2018-01-10T10:06:37.561Z",
+      "handled": true
     },
     {
       "message": "AssertionError: ",
+      "type": "AssertionError",
       "occurrenceCount": 75,
       "culprit": "opbeans.views.oopsie",
       "groupId": "f3ac95493913cc7a3cfec30a19d2120a",
-      "latestOccurrenceAt": "2018-01-10T10:06:37.630Z"
+      "latestOccurrenceAt": "2018-01-10T10:06:37.630Z",
+      "handled": true
     },
     {
       "message": "AssertionError: Bad luck!",
+      "type": "AssertionError",
       "occurrenceCount": 24,
       "culprit": "opbeans.tasks.update_stats",
       "groupId": "e90863d04b7a692435305f09bbe8c840",
-      "latestOccurrenceAt": "2018-01-10T10:06:36.859Z"
+      "latestOccurrenceAt": "2018-01-10T10:06:36.859Z",
+      "handled": true
     },
     {
       "message": "Customer with ID 8517 not found",
+      "type": "AssertionError",
       "occurrenceCount": 15,
       "culprit": "opbeans.views.customer",
       "groupId": "8673d8bf7a032e387c101bafbab0d2bc",
-      "latestOccurrenceAt": "2018-01-10T10:06:13.211Z"
+      "latestOccurrenceAt": "2018-01-10T10:06:13.211Z",
+      "handled": true
     }
   ],
   "location": {