From ace757c432ff5c4ba5124bfa18205e6b0a2083d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Marcondes?=
 <55978943+cauemarcondes@users.noreply.github.com>
Date: Thu, 3 Oct 2019 09:28:25 +0200
Subject: [PATCH] Changing status code colors on trace summary (#47114)
 (#47132)

---
 .../HttpInfoSummaryItem.test.tsx              | 29 +++++++++++++------
 .../Summary/HttpInfoSummaryItem/index.tsx     | 22 +++++++-------
 2 files changed, 32 insertions(+), 19 deletions(-)
 rename x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/{ => __test__}/HttpInfoSummaryItem.test.tsx (75%)

diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/HttpInfoSummaryItem.test.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/__test__/HttpInfoSummaryItem.test.tsx
similarity index 75%
rename from x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/HttpInfoSummaryItem.test.tsx
rename to x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/__test__/HttpInfoSummaryItem.test.tsx
index e87c16b9fd100a..7edc7eab3b3851 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/HttpInfoSummaryItem.test.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/__test__/HttpInfoSummaryItem.test.tsx
@@ -6,16 +6,16 @@
 
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { palettes } from '@elastic/eui';
-import { HttpInfoSummaryItem } from './';
-import * as exampleTransactions from '../__fixtures__/transactions';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { HttpInfoSummaryItem } from '../';
+import * as exampleTransactions from '../../__fixtures__/transactions';
 
 describe('HttpInfoSummaryItem', () => {
   describe('render', () => {
     const transaction = exampleTransactions.httpOk;
     const url = 'https://example.com';
     const method = 'get';
-    const props = { transaction, url, method, status: 200 };
+    const props = { transaction, url, method, status: 100 };
 
     it('renders', () => {
       expect(() =>
@@ -23,12 +23,23 @@ describe('HttpInfoSummaryItem', () => {
       ).not.toThrowError();
     });
 
-    describe('with status code 200', () => {
+    describe('with status code 100', () => {
       it('shows a success color', () => {
         const wrapper = mount(<HttpInfoSummaryItem {...props} />);
 
         expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
-          palettes.euiPaletteForStatus.colors[0]
+          theme.euiColorDarkShade
+        );
+      });
+    });
+
+    describe('with status code 200', () => {
+      it('shows a success color', () => {
+        const p = { ...props, status: 200 };
+        const wrapper = mount(<HttpInfoSummaryItem {...p} />);
+
+        expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
+          theme.euiColorSecondary
         );
       });
     });
@@ -40,7 +51,7 @@ describe('HttpInfoSummaryItem', () => {
         const wrapper = mount(<HttpInfoSummaryItem {...p} />);
 
         expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
-          palettes.euiPaletteForStatus.colors[4]
+          theme.euiColorDarkShade
         );
       });
     });
@@ -52,7 +63,7 @@ describe('HttpInfoSummaryItem', () => {
         const wrapper = mount(<HttpInfoSummaryItem {...p} />);
 
         expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
-          palettes.euiPaletteForStatus.colors[9]
+          theme.euiColorWarning
         );
       });
     });
@@ -64,7 +75,7 @@ describe('HttpInfoSummaryItem', () => {
         const wrapper = mount(<HttpInfoSummaryItem {...p} />);
 
         expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
-          palettes.euiPaletteForStatus.colors[9]
+          theme.euiColorDanger
         );
       });
     });
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/index.tsx
index d433dae75a1aee..5396b57fc27a6f 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/index.tsx
@@ -6,24 +6,26 @@
 
 import React from 'react';
 import { EuiToolTip, EuiBadge } from '@elastic/eui';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
-import { palettes } from '@elastic/eui';
 import { units, px, truncate, unit } from '../../../../style/variables';
 import { statusCodes } from './statusCodes';
 
-const statusColors = {
-  success: palettes.euiPaletteForStatus.colors[0],
-  warning: palettes.euiPaletteForStatus.colors[4],
-  error: palettes.euiPaletteForStatus.colors[9]
-};
+const {
+  euiColorDarkShade,
+  euiColorSecondary,
+  euiColorWarning,
+  euiColorDanger
+} = theme;
 
 function getStatusColor(status: number) {
   const colors: { [key: string]: string } = {
-    2: statusColors.success,
-    3: statusColors.warning,
-    4: statusColors.error,
-    5: statusColors.error
+    1: euiColorDarkShade,
+    2: euiColorSecondary,
+    3: euiColorDarkShade,
+    4: euiColorWarning,
+    5: euiColorDanger
   };
 
   return colors[status.toString().substr(0, 1)] || 'default';