From 5d8cd56de35cef8294cd08c97ed740824f8f9169 Mon Sep 17 00:00:00 2001
From: noahtalerman <47070608+noahtalerman@users.noreply.github.com>
Date: Tue, 30 Mar 2021 17:21:05 -0700
Subject: [PATCH] Add platform text to Queries list on "Pack" page (#561)

- Add platform text to the Queries list. This text better reflects the options in the "Platform" dropdown when scheduling a query.
- Remove platform icons.
---
 .../ScheduledQueriesListItem.jsx              | 45 ++++++++++++-------
 .../ScheduledQueriesListItem.tests.jsx        |  2 -
 .../queries/ScheduledQueriesList/_styles.scss | 11 ++++-
 3 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.jsx b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.jsx
index d8ecc202ba..0ca7b55791 100644
--- a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.jsx
+++ b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.jsx
@@ -5,12 +5,36 @@ import classnames from 'classnames';
 import Checkbox from 'components/forms/fields/Checkbox';
 import ClickableTableRow from 'components/ClickableTableRow';
 import KolideIcon from 'components/icons/KolideIcon';
-import PlatformIcon from 'components/icons/PlatformIcon';
-import { includes, isEmpty, isEqual } from 'lodash';
+import { isEqual, find } from 'lodash';
 import scheduledQueryInterface from 'interfaces/scheduled_query';
 
 const baseClass = 'scheduled-query-list-item';
 
+const generatePlatformText = (platforms) => {
+  const ALL_PLATFORMS = [
+    { text: 'All', value: 'all' },
+    { text: 'macOS', value: 'darwin' },
+    { text: 'Windows', value: 'windows' },
+    { text: 'Linux', value: 'linux' },
+  ];
+
+  if (platforms) {
+    const platformArray = platforms.split(',');
+
+    const textArray = platformArray.map((platform) => {
+      const text = find(ALL_PLATFORMS, { value: platform }).text;
+
+      return text;
+    });
+
+    const displayText = textArray.join(', ');
+
+    return displayText;
+  }
+
+  return '---';
+};
+
 class ScheduledQueriesListItem extends Component {
   static propTypes = {
     checked: PropTypes.bool,
@@ -63,21 +87,10 @@ class ScheduledQueriesListItem extends Component {
     return 'bold-plus';
   }
 
-  renderPlatformIcon = () => {
-    const { scheduledQuery: { platform } } = this.props;
-    const platformArr = platform ? platform.split(',') : [];
-
-    if (isEmpty(platformArr) || includes(platformArr, 'all')) {
-      return <PlatformIcon name="all" title="All Platforms" className={`${baseClass}__icon`} />;
-    }
-
-    return platformArr.map(pltf => <PlatformIcon name={pltf} title={pltf} className={`${baseClass}__icon`} key={pltf} />);
-  }
-
   render () {
     const { checked, disabled, isSelected, scheduledQuery } = this.props;
-    const { id, query_name: name, interval, shard, version } = scheduledQuery;
-    const { loggingTypeString, onDblClick, onCheck, onSelect, renderPlatformIcon } = this;
+    const { id, query_name: name, interval, shard, version, platform } = scheduledQuery;
+    const { loggingTypeString, onDblClick, onCheck, onSelect } = this;
     const rowClassname = classnames(baseClass, {
       [`${baseClass}--selected`]: isSelected,
     });
@@ -94,7 +107,7 @@ class ScheduledQueriesListItem extends Component {
         </td>
         <td className="scheduled-queries-list__query-name">{name}</td>
         <td>{interval}</td>
-        <td>{renderPlatformIcon()}</td>
+        <td>{generatePlatformText(platform)}</td>
         <td>{version ? `${version}+` : 'Any'}</td>
         <td>{shard}</td>
         <td><KolideIcon name={loggingTypeString()} /></td>
diff --git a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.tests.jsx b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.tests.jsx
index fcc959386c..5590596d00 100644
--- a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.tests.jsx
+++ b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.tests.jsx
@@ -18,7 +18,6 @@ describe('ScheduledQueriesListItem - component', () => {
     expect(component.text()).toContain(scheduledQueryStub.query_name);
     expect(component.text()).toContain(scheduledQueryStub.interval);
     expect(component.text()).toContain(scheduledQueryStub.shard);
-    expect(component.find('PlatformIcon').length).toEqual(1);
   });
 
   it('renders when the platform attribute is null', () => {
@@ -27,7 +26,6 @@ describe('ScheduledQueriesListItem - component', () => {
     expect(component.text()).toContain(scheduledQueryStub.query_name);
     expect(component.text()).toContain(scheduledQueryStub.interval);
     expect(component.text()).toContain(scheduledQueryStub.shard);
-    expect(component.find('PlatformIcon').length).toEqual(1);
   });
 
   it('renders a Checkbox component', () => {
diff --git a/frontend/components/queries/ScheduledQueriesList/_styles.scss b/frontend/components/queries/ScheduledQueriesList/_styles.scss
index 6c07e72d8f..2eb174901a 100644
--- a/frontend/components/queries/ScheduledQueriesList/_styles.scss
+++ b/frontend/components/queries/ScheduledQueriesList/_styles.scss
@@ -39,7 +39,6 @@
 
         &:nth-child(4) {
           width: 18%;
-          text-align: center;
         }
 
         &:nth-child(5) {
@@ -85,7 +84,15 @@
           color: $core-black;
         }
 
-        &:nth-child(4),
+        &:nth-child(4) {
+          font-size: 14px;
+          font-weight: $regular;
+          line-height: 2.71;
+          letter-spacing: -0.5px;
+          text-align: left;
+          color: $core-black;
+        }
+        
         &:nth-child(5),
         &:nth-child(6) {
           font-size: 14px;