From 90e82a62b3de4259ccf733a184c1fc8c6fbfdf55 Mon Sep 17 00:00:00 2001
From: noahtalerman <47070608+noahtalerman@users.noreply.github.com>
Date: Tue, 6 Apr 2021 14:41:07 -0700
Subject: [PATCH] Fix frontend bug on "Edit pack" page (#604)

Changes part of Fleet 3.10.0 prevented the frontend from handling any values other than `darwin`, `linux`, `all`, and `windows`. Users that manage packs via fleectl and the Fleet UI may encounter this bug when using 3.10.0.

- Adds a case for the frontend to handle `freebsd`, `posix`, `any`, and any other string specified in the `platform` key in pack configuration.
---
 .../ScheduledQueriesListItem.jsx               | 16 +++++++++++-----
 .../ScheduledQueriesListItem.tests.jsx         | 18 ++++++++++++++++++
 .../queries/ScheduledQueriesList/_styles.scss  |  1 +
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.jsx b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.jsx
index 0ca7b55791..6a850de029 100644
--- a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.jsx
+++ b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.jsx
@@ -13,16 +13,22 @@ 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' },
+    { text: 'macOS', value: 'darwin' },
   ];
 
   if (platforms) {
-    const platformArray = platforms.split(',');
+    const platformsArray = platforms.split(',');
 
-    const textArray = platformArray.map((platform) => {
-      const text = find(ALL_PLATFORMS, { value: platform }).text;
+    const textArray = platformsArray.map((platform) => {
+      // Trim spaces from the platform
+      const trimmedPlatform = platform.trim();
+      const platformObject = find(ALL_PLATFORMS, { value: trimmedPlatform });
+      // Convert trimmed value to the corresponding text if the value exists
+      // in the ALL_PLATFORMS array.
+      // Otherwise, just use the trimmed value.
+      const text = platformObject ? platformObject.text : trimmedPlatform;
 
       return text;
     });
@@ -32,7 +38,7 @@ const generatePlatformText = (platforms) => {
     return displayText;
   }
 
-  return '---';
+  return 'All';
 };
 
 class ScheduledQueriesListItem extends Component {
diff --git a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.tests.jsx b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.tests.jsx
index 0b59c3a927..7d7a3f42c2 100644
--- a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.tests.jsx
+++ b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.tests.jsx
@@ -29,6 +29,24 @@ describe('ScheduledQueriesListItem - component', () => {
     expect(component.text()).toContain(scheduledQueryStub.shard);
   });
 
+  it('renders the converted platform attributes', () => {
+    const scheduledQuery = { ...scheduledQueryStub, platform: 'darwin,linux,all,windows' };
+    const component = mount(<ScheduledQueriesListItem checked={false} {...defaultProps}scheduledQuery={scheduledQuery} />);
+    expect(component.text()).toContain('macOS');
+    expect(component.text()).toContain('Linux');
+    expect(component.text()).toContain('All');
+    expect(component.text()).toContain('Windows');
+  });
+
+  it('renders the platform attributes when there are no conversions', () => {
+    const scheduledQuery = { ...scheduledQueryStub, platform: 'darwin,freebsd,  bar, foo' };
+    const component = mount(<ScheduledQueriesListItem checked={false} {...defaultProps} scheduledQuery={scheduledQuery} />);
+    expect(component.text()).toContain('macOS');
+    expect(component.text()).toContain('freebsd');
+    expect(component.text()).toContain('bar');
+    expect(component.text()).toContain('foo');
+  });
+
   it('renders a Checkbox component', () => {
     const component = shallow(<ScheduledQueriesListItem {...defaultProps} />);
     expect(component.find('Checkbox').length).toEqual(1);
diff --git a/frontend/components/queries/ScheduledQueriesList/_styles.scss b/frontend/components/queries/ScheduledQueriesList/_styles.scss
index 2eb174901a..c74862f3ae 100644
--- a/frontend/components/queries/ScheduledQueriesList/_styles.scss
+++ b/frontend/components/queries/ScheduledQueriesList/_styles.scss
@@ -91,6 +91,7 @@
           letter-spacing: -0.5px;
           text-align: left;
           color: $core-black;
+          white-space: nowrap;
         }
         
         &:nth-child(5),