Bug 1748289 - Replace platforms names with icons in Alerts View (#7353)

* Bug 1748289 - Replace platforms names with icons in Alerts View

* Bug 1748289 - Address change request

* Bug 1748289 - Improve test

* Bug 1748289 - Small refactoring

* Bug 1748289 - Make icon bigger

tests/ui/perfherder/alerts-view/alerts_table_row_test.jsx

@@ -3,6 +3,7 @@ import { render, cleanup, waitFor, fireEvent } from '@testing-library/react';
 
 import AlertTableRow from '../../../../ui/perfherder/alerts/AlertTableRow';
 import testAlertSummaries from '../../mock/alert_summaries';
+import { thPlatformMap } from '../../../../ui/helpers/constants';
 
 const testUser = {
   username: 'mozilla-ldap/test_user@mozilla.com',
@@ -91,12 +92,17 @@ test('Tests with duplicated suite and test name appears only once in Test column
 });
 
 test(`Platform column contains alerts's platform`, async () => {
-  const { getByTestId } = alertTableRowTest({ alert: testAlert, tags: false });
-  const { machine_platform: machinePlatform } = testAlert.series_signature;
-
-  const alertPlatform = await waitFor(() => getByTestId(`alert-platform`));
-
-  expect(alertPlatform.textContent).toBe(machinePlatform);
+  const { getByTestId, getByText } = alertTableRowTest({
+    alert: testAlert,
+    tags: false,
+  });
+  const { machine_platform: platform } = testAlert.series_signature;
+  const alertPlatform = await waitFor(() => getByTestId(`alert-platform-icon`));
+  fireEvent.mouseOver(alertPlatform);
+  const platformDisplayName = await waitFor(() =>
+    getByText(thPlatformMap[platform]),
+  );
+  expect(platformDisplayName).toBeInTheDocument();
 });
 
 test("Alert item with no tags or options displays 'No tags or options'", async () => {

ui/perfherder/alerts/AlertTablePlatform.jsx

@@ -1,15 +1,42 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Badge from 'reactstrap/lib/Badge';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import SimpleTooltip from '../../shared/SimpleTooltip';
+import { thPlatformMap } from '../../helpers/constants';
+import { phPlatformsIconsMap } from '../perf-helpers/constants';
 
 export default class AlertTablePlatform extends React.PureComponent {
+  getOSClassIcon(platform) {
+    if (platform.includes('linux')) {
+      return phPlatformsIconsMap.linux;
+    }
+    if (platform.includes('mac') || platform.includes('osx')) {
+      return phPlatformsIconsMap.macos;
+    }
+    if (platform.includes('win')) {
+      return phPlatformsIconsMap.windows;
+    }
+    if (platform.includes('android')) {
+      return phPlatformsIconsMap.android;
+    }
+    return phPlatformsIconsMap.other;
+  }
+
   render() {
     const { platform } = this.props;
 
     return (
-      <Badge color="light" data-testid="alert-platform">
-        {platform}
-      </Badge>
+      <SimpleTooltip
+        textClass="detail-hint pb-1 fa-lg"
+        text={
+          <FontAwesomeIcon
+            icon={this.getOSClassIcon(platform)}
+            data-testid="alert-platform-icon"
+          />
+        }
+        tooltipText={thPlatformMap[platform]}
+      />
     );
   }
 }

ui/perfherder/alerts/AlertTableRow.jsx

@@ -472,9 +472,11 @@ export default class AlertTableRow extends React.Component {
           )}
         </td>
         <td className="table-width-lg">
-          <AlertTablePlatform
-            platform={alert.series_signature.machine_platform}
-          />
+          <div className="information-container">
+            <AlertTablePlatform
+              platform={alert.series_signature.machine_platform}
+            />
+          </div>
         </td>
         <td className="table-width-lg">
           <div className="information-container">

ui/perfherder/perf-helpers/constants.js

@@ -3,7 +3,16 @@ import {
   faHourglassHalf,
   faHourglassEnd,
 } from '@fortawesome/free-solid-svg-icons';
-import { faHourglass } from '@fortawesome/free-regular-svg-icons';
+import {
+  faHourglass,
+  faQuestionCircle,
+} from '@fortawesome/free-regular-svg-icons';
+import {
+  faAndroid,
+  faApple,
+  faLinux,
+  faWindows,
+} from '@fortawesome/free-brands-svg-icons';
 
 export const tValueCareMin = 3; // Anything below this is "low" in confidence
 export const tValueConfidence = 5; // Anything above this is "high" in confidence
@@ -52,6 +61,14 @@ export const notSupportedAlertFiltersMessage = (filters) =>
 
 export const availablePlatforms = ['Windows', 'Linux', 'OSX', 'Android'];
 
+export const phPlatformsIconsMap = {
+  linux: faLinux,
+  macos: faApple,
+  windows: faWindows,
+  android: faAndroid,
+  other: faQuestionCircle,
+};
+
 export const summaryStatusMap = {
   'all statuses': -1,
   untriaged: 0,

ui/perfherder/tests/PlatformList.jsx

@@ -1,13 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-  faWindows,
-  faLinux,
-  faApple,
-  faAndroid,
-} from '@fortawesome/free-brands-svg-icons';
-import { faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
+
+import { phPlatformsIconsMap } from '../perf-helpers/constants';
 
 export default class PlatformList extends React.Component {
   linuxPlatforms = [];
@@ -23,7 +18,7 @@ export default class PlatformList extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      platforms: {},
+      platformsVersions: {},
       activePlatform: null,
       list: [],
     };
@@ -50,49 +45,29 @@ export default class PlatformList extends React.Component {
       }
     });
 
-    const platforms = {
-      linux: {
-        name: 'linux',
-        versions: this.linuxPlatforms,
-        icon: faLinux,
-      },
-      macos: {
-        name: 'macos',
-        versions: this.macosPlatforms,
-        icon: faApple,
-      },
-      windows: {
-        name: 'windows',
-        versions: this.windowsPlatforms,
-        icon: faWindows,
-      },
-      android: {
-        name: 'android',
-        versions: this.androidPlatforms,
-        icon: faAndroid,
-      },
-      other: {
-        name: 'other',
-        versions: this.otherPlatforms,
-        icon: faQuestionCircle,
-      },
+    const platformsVersions = {
+      linux: this.linuxPlatforms,
+      macos: this.macosPlatforms,
+      windows: this.windowsPlatforms,
+      android: this.androidPlatforms,
+      other: this.otherPlatforms,
     };
 
     this.setState({
-      platforms,
+      platformsVersions,
     });
   };
 
-  displayList = (name) => {
-    const { platforms, activePlatform } = this.state;
+  displayList = (platformName) => {
+    const { platformsVersions, activePlatform } = this.state;
     this.setState({
-      activePlatform: activePlatform === name ? null : name,
-      list: [...platforms[name].versions],
+      activePlatform: activePlatform === platformName ? null : platformName,
+      list: [...platformsVersions[platformName]],
     });
   };
 
   render() {
-    const { platforms, activePlatform, list } = this.state;
+    const { platformsVersions, activePlatform, list } = this.state;
 
     return (
       <div>
@@ -100,22 +75,22 @@ export default class PlatformList extends React.Component {
           className="text-left d-flex justify-content-center"
           data-testid="platform-icons"
         >
-          {Object.keys(platforms).map((key) => {
-            const platform = platforms[key];
-            const { name, icon, versions } = platform;
+          {Object.keys(platformsVersions).map((platformName) => {
+            const versions = platformsVersions[platformName];
+            const icon = phPlatformsIconsMap[platformName];
             return (
               versions.length !== 0 && (
                 <div
-                  key={`${name}`}
+                  key={`${platformName}`}
                   className={`icon-container ${
-                    activePlatform === name ? 'active-platform' : ''
+                    activePlatform === platformName ? 'active-platform' : ''
                   }`}
                 >
                   <FontAwesomeIcon
                     icon={icon}
                     title={versions.join(', ')}
-                    data-testid={`${name}-platform`}
-                    onClick={() => this.displayList(name)}
+                    data-testid={`${platformName}-platform`}
+                    onClick={() => this.displayList(platformName)}
                   />
                 </div>
               )