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
This commit is contained in:
noahtalerman 2021-01-04 17:22:02 -08:00 committed by GitHub
parent d52f850702
commit 0c921fe032
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 15 deletions

View File

@ -1,5 +1,4 @@
.target-list {
background-color: $ui-light-grey;
&__type {
padding: 0 8px 4px;

View File

@ -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>

View File

@ -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');

View File

@ -108,7 +108,7 @@
.Select-menu {
height: 498px;
max-height: 498px;
overflow: hidden;
overflow: scroll;
position: relative;
&::after {