From 0c921fe032316606d97299b15fc77962ee7c64ed Mon Sep 17 00:00:00 2001
From: noahtalerman <47070608+noahtalerman@users.noreply.github.com>
Date: Mon, 4 Jan 2021 17:22:02 -0800
Subject: [PATCH] Fix missing image assets in SelectTargetsDropdown. (#172)

- Add back <KolideIcon /> to SelectTargetsDropdown. <KolideIcon /> was prematurely replaced.
- Edit styles to allow SelectTargetsDropdown to vertically scroll on overflow.
Fixes #168
---
 .../SelectTargetsMenu/_styles.scss                 |  1 -
 .../TargetDetails/TargetDetails.jsx                | 14 +++++++-------
 .../TargetDetails/TargetDetails.tests.jsx          | 12 ++++++------
 .../fields/SelectTargetsDropdown/_styles.scss      |  2 +-
 4 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss
index b829f82fc9..4b13cd1c5a 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss
@@ -1,5 +1,4 @@
 .target-list {
-  background-color: $ui-light-grey;
 
   &__type {
     padding: 0 8px 4px;
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx
index c7acf68f75..5604ecb5a6 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx
@@ -5,7 +5,7 @@ import AceEditor from 'react-ace';
 import classnames from 'classnames';
 
 import hostHelpers from 'components/hosts/HostsTable/helpers';
-import Icon from 'components/icons/Icon';
+import KolideIcon from 'components/icons/KolideIcon';
 import PlatformIcon from 'components/icons/PlatformIcon';
 import targetInterface from 'interfaces/target';
 
@@ -60,16 +60,16 @@ class TargetDetails extends Component {
     return (
       <div className={`${hostBaseClass} ${className}`}>
         <button className={`button button--unstyled ${hostBaseClass}__back`} onClick={handleBackToResults}>
-          <Icon name="chevronleft" />Back
+          <KolideIcon name="chevronleft" />Back
         </button>
 
         <p className={`${hostBaseClass}__display-text`}>
-          <Icon name="single-host" fw className={`${hostBaseClass}__icon`} />
+          <KolideIcon name="single-host" fw className={`${hostBaseClass}__icon`} />
           <span>{displayText}</span>
         </p>
         <p className={statusClassName}>
-          {isOnline && <Icon name="success-check" fw className={`${hostBaseClass}__icon ${hostBaseClass}__icon--online`} />}
-          {isOffline && <Icon name="offline" fw className={`${hostBaseClass}__icon ${hostBaseClass}__icon--offline`} />}
+          {isOnline && <KolideIcon name="success-check" fw className={`${hostBaseClass}__icon ${hostBaseClass}__icon--online`} />}
+          {isOffline && <KolideIcon name="offline" fw className={`${hostBaseClass}__icon ${hostBaseClass}__icon--offline`} />}
           <span>{status}</span>
         </p>
         <table className={`${baseClass}__table`}>
@@ -123,11 +123,11 @@ class TargetDetails extends Component {
     return (
       <div className={`${labelBaseClass} ${className}`}>
         <button className={`button button--unstyled ${labelBaseClass}__back`} onClick={handleBackToResults}>
-          <Icon name="chevronleft" /> Back
+          <KolideIcon name="chevronleft" /> Back
         </button>
 
         <p className={`${labelBaseClass}__display-text`}>
-          <Icon name="label" fw className={`${labelBaseClass}__icon`} />
+          <KolideIcon name="label" fw className={`${labelBaseClass}__icon`} />
           <span>{displayText}</span>
         </p>
 
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.tests.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.tests.jsx
index 6bfeb97864..f015b0bdbd 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.tests.jsx
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.tests.jsx
@@ -48,9 +48,9 @@ describe('TargetDetails - component', () => {
       it('renders a success check icon when the target is online', () => {
         const target = { ...Test.Stubs.hostStub, status: 'online' };
         const Component = mount(<TargetDetails target={target} />);
-        const Icon = Component.find('Icon');
-        const onlineIcon = Icon.find('.host-target__icon--online');
-        const offlineIcon = Icon.find('.host-target__icon--offline');
+        const KolideIcon = Component.find('KolideIcon');
+        const onlineIcon = KolideIcon.find('.host-target__icon--online');
+        const offlineIcon = KolideIcon.find('.host-target__icon--offline');
 
         expect(onlineIcon.length).toBeGreaterThan(0, 'Expected the online icon to render');
         expect(offlineIcon.length).toEqual(0, 'Expected the offline icon to not render');
@@ -59,9 +59,9 @@ describe('TargetDetails - component', () => {
       it('renders a offline icon when the target is offline', () => {
         const target = { ...Test.Stubs.hostStub, status: 'offline' };
         const Component = mount(<TargetDetails target={target} />);
-        const Icon = Component.find('Icon');
-        const onlineIcon = Icon.find('.host-target__icon--online');
-        const offlineIcon = Icon.find('.host-target__icon--offline');
+        const KolideIcon = Component.find('KolideIcon');
+        const onlineIcon = KolideIcon.find('.host-target__icon--online');
+        const offlineIcon = KolideIcon.find('.host-target__icon--offline');
 
         expect(onlineIcon.length).toEqual(0, 'Expected the online icon to not render');
         expect(offlineIcon.length).toBeGreaterThan(0, 'Expected the offline icon to render');
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
index 98c174cafa..f7673739ab 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
@@ -108,7 +108,7 @@
     .Select-menu {
       height: 498px;
       max-height: 498px;
-      overflow: hidden;
+      overflow: scroll;
       position: relative;
 
       &::after {