fleet/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetIcon.jsx
noahtalerman 49e71e4ed6
Add new icons for Hosts page. Fix hosts list width on wide screens. (#128)
- Add new PNG files for the new icons in the left side navigation and the right side labels on the Hosts page.
- Rename the old `<Icon />` component to `<KolideIcon />` and create a new `<Icon />` component. The ultimate goal is to get rid of the `<KolideIcon />` and `<PlatformIcon />` components and use the encompassing `<Icon />` component for all icons. The full transition will be made when we have icon assets to replace all the kolide icons and platform icons. Currently, we don't.
- Rename the `icon_name_for_label.js` utility to `icon_name.js` because the utility now includes `iconNameForLabel()` and `iconNameForPlatform()` functions.
- Fixes issue #127.
2020-12-14 18:24:16 -08:00

30 lines
782 B
JavaScript

import React from 'react';
import classnames from 'classnames';
import KolideIcon from 'components/icons/KolideIcon';
import targetInterface from 'interfaces/target';
const baseClass = 'target-option';
const TargetIcon = ({ target }) => {
const iconName = () => {
const { name, platform, target_type: targetType } = target;
if (targetType === 'labels') {
return name === 'All Hosts' ? 'all-hosts' : 'label';
}
return platform === 'darwin' ? 'apple' : platform;
};
const { status } = target;
const targetClasses = classnames(`${baseClass}__icon`, `${baseClass}__icon--${status}`);
return <KolideIcon name={iconName()} className={targetClasses} />;
};
TargetIcon.propTypes = { target: targetInterface.isRequired };
export default TargetIcon;