Jest and Storybook fixes (#104991)

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

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { Story } from '@storybook/react';
 import { cloneDeep, merge } from 'lodash';
 import React, { ComponentType } from 'react';
 import { MemoryRouter, Route } from 'react-router-dom';
@@ -14,13 +15,14 @@ import {
   mockApmPluginContextValue,
   MockApmPluginContextWrapper,
 } from '../../../context/apm_plugin/mock_apm_plugin_context';
+import { ApmServiceContextProvider } from '../../../context/apm_service/apm_service_context';
 import { MockUrlParamsContextProvider } from '../../../context/url_params_context/mock_url_params_context_provider';
 
 export default {
   title: 'alerting/TransactionDurationAlertTrigger',
   component: TransactionDurationAlertTrigger,
   decorators: [
-    (Story: ComponentType) => {
+    (StoryComponent: ComponentType) => {
       const contextMock = (merge(cloneDeep(mockApmPluginContextValue), {
         core: {
           http: {
@@ -39,11 +41,13 @@ export default {
 
       return (
         <div style={{ width: 400 }}>
-          <MemoryRouter initialEntries={['/transactions/test-service-name']}>
-            <Route path="/transactions/:serviceName">
+          <MemoryRouter initialEntries={['/services/test-service-name']}>
+            <Route path="/services/:serviceName">
               <MockApmPluginContextWrapper value={contextMock}>
                 <MockUrlParamsContextProvider>
-                  <Story />
+                  <ApmServiceContextProvider>
+                    <StoryComponent />
+                  </ApmServiceContextProvider>
                 </MockUrlParamsContextProvider>
               </MockApmPluginContextWrapper>
             </Route>
@@ -54,7 +58,7 @@ export default {
   ],
 };
 
-export function Example() {
+export const Example: Story = () => {
   const params = {
     threshold: 1500,
     aggregationType: 'avg' as const,
@@ -67,4 +71,4 @@ export function Example() {
       setAlertProperty={() => undefined}
     />
   );
-}
+};

x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/custom_link_table.tsx

@@ -49,7 +49,7 @@ export function CustomLinkTable({ items = [], onCustomLinkSelected }: Props) {
       truncateText: true,
     },
     {
-      width: 160,
+      width: '160px',
       align: 'right',
       field: '@timestamp',
       name: i18n.translate(

x-pack/plugins/apm/public/components/app/Settings/schema/schema.stories.tsx

@@ -12,6 +12,7 @@ import { CoreStart } from '../../../../../../../../src/core/public';
 import { MockApmPluginContextWrapper } from '../../../../context/apm_plugin/mock_apm_plugin_context';
 import { createCallApmApi } from '../../../../services/rest/createCallApmApi';
 import { Schema } from './';
+import { ConfirmSwitchModal } from './confirm_switch_modal';
 
 interface Args {
   hasCloudAgentPolicy: boolean;
@@ -107,3 +108,18 @@ export default {
 export const Example: Story = () => {
   return <Schema />;
 };
+
+interface ModalArgs {
+  unsupportedConfigs: Array<{ key: string; value: string }>;
+}
+
+export const Modal: Story<ModalArgs> = ({ unsupportedConfigs }) => {
+  return (
+    <ConfirmSwitchModal
+      onCancel={() => {}}
+      onConfirm={() => {}}
+      unsupportedConfigs={unsupportedConfigs}
+    />
+  );
+};
+Modal.args = { unsupportedConfigs: [{ key: 'test', value: '123' }] };

x-pack/plugins/apm/public/components/app/error_group_overview/List/index.tsx

@@ -79,7 +79,7 @@ function ErrorGroupList({ items, serviceName }: Props) {
         ),
         field: 'groupId',
         sortable: false,
-        width: unit * 6,
+        width: `${unit * 6}px`,
         render: (groupId: string) => {
           return (
             <GroupIdLink serviceName={serviceName} errorGroupId={groupId}>

x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx

@@ -84,7 +84,7 @@ export function getServiceColumns({
       name: i18n.translate('xpack.apm.servicesTable.healthColumnLabel', {
         defaultMessage: 'Health',
       }),
-      width: unit * 6,
+      width: `${unit * 6}px`,
       sortable: true,
       render: (_, { healthStatus }) => {
         return (
@@ -135,7 +135,7 @@ export function getServiceColumns({
       name: i18n.translate('xpack.apm.servicesTable.environmentColumnLabel', {
         defaultMessage: 'Environment',
       }),
-      width: unit * 10,
+      width: `${unit * 10}px`,
       sortable: true,
       render: (_, { environments }) => (
         <EnvironmentBadge environments={environments ?? []} />
@@ -149,7 +149,7 @@ export function getServiceColumns({
               'xpack.apm.servicesTable.transactionColumnLabel',
               { defaultMessage: 'Transaction type' }
             ),
-            width: unit * 10,
+            width: `${unit * 10}px`,
             sortable: true,
           },
         ]
@@ -169,7 +169,7 @@ export function getServiceColumns({
         />
       ),
       align: 'left',
-      width: unit * 10,
+      width: `${unit * 10}px`,
     },
     {
       field: 'transactionsPerMinute',
@@ -186,7 +186,7 @@ export function getServiceColumns({
         />
       ),
       align: 'left',
-      width: unit * 10,
+      width: `${unit * 10}px`,
     },
     {
       field: 'transactionErrorRate',
@@ -209,7 +209,7 @@ export function getServiceColumns({
         );
       },
       align: 'left',
-      width: unit * 10,
+      width: `${unit * 10}px`,
     },
   ];
 }

x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx

@@ -32,9 +32,10 @@ import { fromQuery } from '../../shared/Links/url_helpers';
 import { MockUrlParamsContextProvider } from '../../../context/url_params_context/mock_url_params_context_provider';
 import { uiSettingsServiceMock } from '../../../../../../../src/core/public/mocks';
 
-const KibanaReactContext = createKibanaReactContext({
+const KibanaReactContext = createKibanaReactContext(({
+  uiSettings: { get: () => true },
   usageCollection: { reportUiCounter: () => {} },
-} as Partial<CoreStart>);
+} as unknown) as Partial<CoreStart>);
 
 const mockParams = {
   rangeFrom: 'now-15m',

x-pack/plugins/apm/public/components/app/transaction_overview/transaction_overview.test.tsx

@@ -24,9 +24,10 @@ import {
 import { fromQuery } from '../../shared/Links/url_helpers';
 import { TransactionOverview } from './';
 
-const KibanaReactContext = createKibanaReactContext({
+const KibanaReactContext = createKibanaReactContext(({
+  uiSettings: { get: () => true },
   usageCollection: { reportUiCounter: () => {} },
-} as Partial<CoreStart>);
+} as unknown) as Partial<CoreStart>);
 
 const history = createMemoryHistory();
 jest.spyOn(history, 'push');

x-pack/plugins/apm/public/components/shared/agent_icon/agent_icon.stories.tsx

@@ -7,73 +7,63 @@
 
 import {
   EuiCard,
-  EuiCodeBlock,
   EuiFlexGroup,
   EuiFlexItem,
   EuiImage,
-  EuiSpacer,
   EuiToolTip,
 } from '@elastic/eui';
+import type { Story } from '@storybook/react';
 import React from 'react';
 import { AGENT_NAMES } from '../../../../common/agent_name';
-import { useTheme } from '../../../hooks/use_theme';
 import { getAgentIcon } from './get_agent_icon';
 import { AgentIcon } from './index';
 
 export default {
-  title: 'shared/icons',
+  title: 'shared/AgentIcon',
   component: AgentIcon,
 };
 
-export function AgentIcons() {
-  const theme = useTheme();
+export const List: Story = (_args, { globals }) => {
+  const darkMode = globals.euiTheme.includes('dark');
 
   return (
-    <>
-      <EuiCodeBlock language="html" isCopyable paddingSize="m">
-        {'<AgentIcon agentName="dotnet" />'}
-      </EuiCodeBlock>
-
-      <EuiSpacer />
-
-      <EuiFlexGroup gutterSize="l" wrap={true}>
-        {AGENT_NAMES.map((agentName) => {
-          return (
-            <EuiFlexItem key={agentName} grow={false}>
-              <EuiCard
-                icon={
-                  <>
-                    <p>
-                      <EuiToolTip
-                        position="top"
-                        content="Icon rendered with `EuiImage`"
-                      >
-                        <EuiImage
-                          size="s"
-                          hasShadow
-                          alt={agentName}
-                          src={getAgentIcon(agentName, theme.darkMode)}
-                        />
-                      </EuiToolTip>
-                    </p>
-                  </>
-                }
-                title={agentName}
-                description={
-                  <div>
+    <EuiFlexGroup gutterSize="l" wrap={true}>
+      {AGENT_NAMES.map((agentName) => {
+        return (
+          <EuiFlexItem key={agentName} grow={false}>
+            <EuiCard
+              icon={
+                <>
+                  <p>
                     <EuiToolTip
-                      position="bottom"
-                      content="Icon rendered with `AgentIcon`"
+                      position="top"
+                      content="Icon rendered with `EuiImage`"
                     >
-                      <AgentIcon agentName={agentName} />
+                      <EuiImage
+                        size="s"
+                        hasShadow
+                        alt={agentName}
+                        src={getAgentIcon(agentName, darkMode)}
+                      />
                     </EuiToolTip>
-                  </div>
-                }
-              />
-            </EuiFlexItem>
-          );
-        })}
-      </EuiFlexGroup>
-    </>
+                  </p>
+                </>
+              }
+              title={agentName}
+              description={
+                <div>
+                  <EuiToolTip
+                    position="bottom"
+                    content="Icon rendered with `AgentIcon`"
+                  >
+                    <AgentIcon agentName={agentName} />
+                  </EuiToolTip>
+                </div>
+              }
+            />
+          </EuiFlexItem>
+        );
+      })}
+    </EuiFlexGroup>
   );
-}
+};

x-pack/plugins/apm/public/components/shared/charts/latency_chart/latency_chart.stories.tsx

@@ -14,7 +14,7 @@ import {
   ApmPluginContext,
   ApmPluginContextValue,
 } from '../../../../context/apm_plugin/apm_plugin_context';
-import { ApmServiceContextProvider } from '../../../../context/apm_service/apm_service_context';
+import { APMServiceContext } from '../../../../context/apm_service/apm_service_context';
 import { ChartPointerEventContextProvider } from '../../../../context/chart_pointer_event/chart_pointer_event_context';
 import { MockUrlParamsContextProvider } from '../../../../context/url_params_context/mock_url_params_context_provider';
 import {
@@ -41,6 +41,7 @@ export default {
   decorators: [
     (Story: ComponentType, { args }: StoryContext) => {
       const { alertsResponse, latencyChartResponse } = args as Args;
+      const serviceName = 'testService';
 
       const apmPluginContextMock = ({
         core: {
@@ -51,10 +52,8 @@ export default {
             basePath: { prepend: () => {} },
             get: (endpoint: string) => {
               switch (endpoint) {
-                case '/api/apm/services/test-service/transactions/charts/latency':
+                case `/api/apm/services/${serviceName}/transactions/charts/latency`:
                   return latencyChartResponse;
-                case '/api/apm/services/test-service/alerts':
-                  return alertsResponse;
                 default:
                   return {};
               }
@@ -68,24 +67,32 @@ export default {
 
       createCallApmApi(apmPluginContextMock.core);
 
+      const transactionType = `${Math.random()}`; // So we don't memoize
+
       return (
         <ApmPluginContext.Provider value={apmPluginContextMock}>
-          <MemoryRouter initialEntries={[`/app/apm/services/test-service`]}>
-            <Route path="/app/apm/services/:serviceName">
+          <MemoryRouter initialEntries={[`/services/${serviceName}`]}>
+            <Route path="/services/:serviceName">
               <KibanaContextProvider
                 services={{ ...apmPluginContextMock.core }}
               >
                 <MockUrlParamsContextProvider
                   params={{
                     latencyAggregationType: LatencyAggregationType.avg,
-                    transactionType: `${Math.random()}`, // So we don't memoize
                   }}
                 >
-                  <ApmServiceContextProvider>
+                  <APMServiceContext.Provider
+                    value={{
+                      alerts: alertsResponse.alerts,
+                      serviceName,
+                      transactionType,
+                      transactionTypes: [],
+                    }}
+                  >
                     <ChartPointerEventContextProvider>
                       <Story />
                     </ChartPointerEventContextProvider>
-                  </ApmServiceContextProvider>
+                  </APMServiceContext.Provider>
                 </MockUrlParamsContextProvider>
               </KibanaContextProvider>
             </Route>

x-pack/plugins/apm/public/components/shared/managed_table/index.tsx

@@ -19,7 +19,7 @@ export interface ITableColumn<T> {
   field?: string;
   dataType?: string;
   align?: string;
-  width?: string | number;
+  width?: string;
   sortable?: boolean;
   render?: (value: any, item: T) => unknown;
 }

x-pack/plugins/apm/public/components/shared/span_icon/span_icon.stories.tsx

@@ -7,13 +7,12 @@
 
 import {
   EuiCard,
-  EuiCodeBlock,
   EuiFlexGroup,
   EuiFlexItem,
   EuiImage,
-  EuiSpacer,
   EuiToolTip,
 } from '@elastic/eui';
+import type { Story } from '@storybook/react';
 import React from 'react';
 import { getSpanIcon, spanTypeIcons } from './get_span_icon';
 import { SpanIcon } from './index';
@@ -21,72 +20,64 @@ import { SpanIcon } from './index';
 const spanTypes = Object.keys(spanTypeIcons);
 
 export default {
-  title: 'shared/icons',
+  title: 'shared/SpanIcon',
   component: SpanIcon,
 };
 
-export function SpanIcons() {
+export const List: Story = () => {
   return (
-    <>
-      <EuiCodeBlock language="html" isCopyable paddingSize="m">
-        {'<SpanIcon type="db" subtype="cassandra" />'}
-      </EuiCodeBlock>
+    <EuiFlexGroup gutterSize="l" wrap={true}>
+      {spanTypes.map((type) => {
+        const subTypes = Object.keys(spanTypeIcons[type]);
+        return subTypes.map((subType) => {
+          const id = `${type}.${subType}`;
 
-      <EuiSpacer />
-
-      <EuiFlexGroup gutterSize="l" wrap={true}>
-        {spanTypes.map((type) => {
-          const subTypes = Object.keys(spanTypeIcons[type]);
-          return subTypes.map((subType) => {
-            const id = `${type}.${subType}`;
-
-            return (
-              <EuiFlexItem key={id}>
-                <EuiCard
-                  icon={
-                    <p>
+          return (
+            <EuiFlexItem key={id}>
+              <EuiCard
+                icon={
+                  <p>
+                    <EuiToolTip
+                      position="top"
+                      content="Icon rendered with `EuiImage`"
+                    >
+                      <EuiImage
+                        size="s"
+                        hasShadow
+                        alt={id}
+                        src={getSpanIcon(type, subType)}
+                      />
+                    </EuiToolTip>
+                  </p>
+                }
+                title={id}
+                description={
+                  <>
+                    <div>
                       <EuiToolTip
-                        position="top"
-                        content="Icon rendered with `EuiImage`"
+                        position="bottom"
+                        content="Icon rendered with `SpanIcon`"
                       >
-                        <EuiImage
-                          size="s"
-                          hasShadow
-                          alt={id}
-                          src={getSpanIcon(type, subType)}
-                        />
+                        <SpanIcon type={type} subType={subType} />
                       </EuiToolTip>
-                    </p>
-                  }
-                  title={id}
-                  description={
-                    <>
-                      <div>
-                        <EuiToolTip
-                          position="bottom"
-                          content="Icon rendered with `SpanIcon`"
-                        >
-                          <SpanIcon type={type} subType={subType} />
-                        </EuiToolTip>
-                      </div>
+                    </div>
 
-                      <code
-                        style={{
-                          textAlign: 'left',
-                          whiteSpace: 'nowrap',
-                        }}
-                      >
-                        <div>span.type: {type}</div>
-                        <div>span.subtype: {subType}</div>
-                      </code>
-                    </>
-                  }
-                />
-              </EuiFlexItem>
-            );
-          });
-        })}
-      </EuiFlexGroup>
-    </>
+                    <code
+                      style={{
+                        textAlign: 'left',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      <div>span.type: {type}</div>
+                      <div>span.subtype: {subType}</div>
+                    </code>
+                  </>
+                }
+              />
+            </EuiFlexItem>
+          );
+        });
+      })}
+    </EuiFlexGroup>
   );
-}
+};