From e1d2d0f8e1d2951bb953ae6904c1fc94c07784c3 Mon Sep 17 00:00:00 2001
From: Brittany Joiner <brittanyjoiner15@gmail.com>
Date: Tue, 21 Jan 2020 22:47:05 -0500
Subject: [PATCH] updates for sync badge

---
 .../Waterfall/SyncBadge.stories.tsx           | 61 +++++++++----------
 .../Waterfall/SyncBadge.tsx                   | 12 +++-
 2 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx
index cd64ea8a2d718f..c7d3f6cc6f0c6e 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx
@@ -8,40 +8,37 @@ import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { SyncBadge } from './SyncBadge';
 
-storiesOf('app/TransactionDetails/SyncBadge', module).add(
-  'sync=true',
-  () => {
-    return (
-      <SyncBadge sync={true}/>
-    );
-  },
-  {
-    info: {
-      source: false
+storiesOf('app/TransactionDetails/SyncBadge', module)
+  .add(
+    'sync=true',
+    () => {
+      return <SyncBadge sync={true} />;
+    },
+    {
+      info: {
+        source: false
+      }
     }
-  }
-).add(
+  )
+  .add(
     'sync=false',
-  () => {
-    return (
-      <SyncBadge sync={false}/>
-    );
-  },
-  {
-    info: {
-      source: false
+    () => {
+      return <SyncBadge sync={false} />;
+    },
+    {
+      info: {
+        source: false
+      }
     }
-  }
-).add(
+  )
+  .add(
     'sync=undefined',
-  () => {
-    return (
-      <SyncBadge/>
-    );
-  },
-  {
-    info: {
-      source: false
+    () => {
+      return <SyncBadge />;
+    },
+    {
+      info: {
+        source: false
+      }
     }
-  }
-)
+  );
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx
index 76bfcf09d717dd..ffdffc660578fa 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx
@@ -8,6 +8,7 @@ import { EuiBadge } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
 import { px, units } from '../../../../../../style/variables';
+import { i18n } from '@kbn/i18n';
 
 const SpanBadge = styled(EuiBadge)`
   display: inline-block;
@@ -21,9 +22,16 @@ interface SyncBadgeProps {
 export function SyncBadge({ sync }: SyncBadgeProps) {
   switch (sync) {
     case true:
-      return <SpanBadge>{'blocking'}</SpanBadge>;
+      return (
+        <SpanBadge>
+          {i18n.translate('xpack.apm.transactionDetails.syncBadgeBlocking', {
+            defaultMessage: 'blocking'
+          })}
+          blocking
+        </SpanBadge>
+      );
     case false:
-      return <SpanBadge>{'async'}</SpanBadge>;
+      return <SpanBadge>async</SpanBadge>;
     default:
       return null;
   }