Bug 1745473 - Add icons for platforms in Tests View (#7345)

Bug 1745473 - Add unit tests

Bug 1745473 - Clean code

Bug 1745473 - Address PR requests

tests/ui/perfherder/tests_table_test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, cleanup, waitFor } from '@testing-library/react';
+import { render, cleanup, waitFor, fireEvent } from '@testing-library/react';
 
 import { noResultsMessage } from '../../../ui/perfherder/perf-helpers/constants';
 import TestsTable from '../../../ui/perfherder/tests/TestsTable';
@@ -61,3 +61,25 @@ test('Tests table should show data', async () => {
   expect(result1).toBeInTheDocument();
   expect(result2).toBeInTheDocument();
 });
+
+test('Clicking on platform icon displays the list of platforms', async () => {
+  const { getAllByTestId, getByTestId } = testsTable(
+    results,
+    projectsMap,
+    platformsMap,
+  );
+
+  const platformIcon = await waitFor(() => getAllByTestId('other-platform'));
+
+  expect(platformIcon[0]).not.toBeNull();
+
+  fireEvent.click(platformIcon[0]);
+
+  const platformList = await waitFor(() =>
+    getByTestId('displayed-platform-list'),
+  );
+
+  expect(platformList.childElementCount).toBe(2);
+  expect(platformList.children[0]).toHaveTextContent('platform2');
+  expect(platformList.children[1]).toHaveTextContent('platform1');
+});

ui/css/perf.css

@@ -620,3 +620,15 @@ li.pagination-active.active > button {
 .bottom-pagination-container {
   margin-top: 30px;
 }
+
+.icon-container {
+  margin: 0px 5px;
+  padding: 0px 3px 0px 3px;
+}
+
+.active-platform {
+  border: 1px solid;
+  border-radius: 3px;
+  background-color: #d3d3d3;
+  padding: 3px;
+}

ui/perfherder/tests/PlatformList.jsx

@@ -0,0 +1,141 @@
+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';
+
+export default class PlatformList extends React.Component {
+  linuxPlatforms = [];
+
+  macosPlatforms = [];
+
+  windowsPlatforms = [];
+
+  androidPlatforms = [];
+
+  otherPlatforms = [];
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      platforms: {},
+      activePlatform: null,
+      list: [],
+    };
+  }
+
+  componentDidMount() {
+    this.setPlatforms();
+  }
+
+  setPlatforms = () => {
+    const { items } = this.props;
+
+    items.forEach((platform) => {
+      if (platform.includes('linux')) {
+        this.linuxPlatforms.push(platform);
+      } else if (platform.includes('mac') || platform.includes('osx')) {
+        this.macosPlatforms.push(platform);
+      } else if (platform.includes('win')) {
+        this.windowsPlatforms.push(platform);
+      } else if (platform.includes('android')) {
+        this.androidPlatforms.push(platform);
+      } else {
+        this.otherPlatforms.push(platform);
+      }
+    });
+
+    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,
+      },
+    };
+
+    this.setState({
+      platforms,
+    });
+  };
+
+  displayList = (name) => {
+    const { platforms, activePlatform } = this.state;
+    this.setState({
+      activePlatform: activePlatform === name ? null : name,
+      list: [...platforms[name].versions],
+    });
+  };
+
+  render() {
+    const { platforms, activePlatform, list } = this.state;
+
+    return (
+      <div>
+        <span
+          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;
+            return (
+              versions.length !== 0 && (
+                <div
+                  key={`${name}`}
+                  className={`icon-container ${
+                    activePlatform === name ? 'active-platform' : ''
+                  }`}
+                >
+                  <FontAwesomeIcon
+                    icon={icon}
+                    title={versions.join(', ')}
+                    data-testid={`${name}-platform`}
+                    onClick={() => this.displayList(name)}
+                  />
+                </div>
+              )
+            );
+          })}
+        </span>
+        <div>
+          {activePlatform && (
+            <div data-testid="displayed-platform-list">
+              {list.map((item) => (
+                <div key={`${item}`}>{`${item}`}</div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+PlatformList.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.string).isRequired,
+};

ui/perfherder/tests/TestsTable.jsx

@@ -7,6 +7,7 @@ import { noResultsMessage } from '../perf-helpers/constants';
 import { Perfdocs, perfViews } from '../perf-helpers/perfdocs';
 
 import ItemList from './ItemList';
+import PlatformList from './PlatformList';
 
 export default function TestsTable(props) {
   const {
@@ -56,7 +57,7 @@ export default function TestsTable(props) {
       Cell: (props) => {
         if (platformsMap) {
           const platforms = props.value.map((id) => platformsMap[id]);
-          return <ItemList items={platforms} />;
+          return <PlatformList items={platforms} />;
         }
         return null;
       },