webpack/components/Errata/index.js
import React from 'react';
import PropTypes from 'prop-types';
import { TableText } from '@patternfly/react-table';
import { Tooltip, ToggleGroupItem } from '@patternfly/react-core';
import {
chart_color_black_500 as pfBlack,
chart_color_gold_400 as pfGold,
chart_color_orange_300 as pfOrange,
chart_color_red_200 as pfRed,
} from '@patternfly/react-tokens';
import { translate as __ } from 'foremanReact/common/I18n';
import {
BugIcon,
SecurityIcon,
EnhancementIcon,
SquareIcon,
} from '@patternfly/react-icons';
import { TranslatedAnchor } from '../Table/components/TranslatedPlural';
export const ErrataMapper = ({ data, id, errataCategory }) =>
data.map(({ x: type, y: count }) =>
<ErrataSummary count={count} type={type} key={`${count} ${type}`} id={id} errataCategory={errataCategory} />);
export const ErrataSummary = ({ type, count, errataCategory }) => {
let ErrataIcon;
let label;
let url;
let color;
switch (type) {
case 'security':
label = __('Security');
ErrataIcon = SecurityIcon;
color = '#0066cc';
url = (
<TranslatedAnchor
id="errata-card-security-count"
style={{ marginLeft: '0.4rem' }}
href={`#/Content/errata?type=security&show=${errataCategory}`}
count={count}
plural="security advisories"
singular="security advisory"
zeroMsg="# security advisories"
ariaLabel={`${count} security advisories`}
/>
);
break;
case 'recommended':
case 'bugfix':
label = __('Bugfix');
ErrataIcon = BugIcon;
color = '#8bc1f7';
url = (
<TranslatedAnchor
id="errata-card-bugfix-count"
style={{ marginLeft: '0.4rem' }}
href={`#/Content/errata?type=bugfix&show=${errataCategory}`}
count={count}
plural="bug fixes"
singular="bug fix"
zeroMsg="# bug fixes"
ariaLabel={`${count} bug fixes`}
/>
);
break;
case 'enhancement':
case 'optional':
label = __('Enhancement');
ErrataIcon = EnhancementIcon;
color = '#002f5d';
url = (
<TranslatedAnchor
id="errata-card-enhancement-count"
style={{ marginLeft: '0.4rem' }}
href={`#/Content/errata?type=enhancement&show=${errataCategory}`}
count={count}
plural="enhancements"
singular="enhancement"
zeroMsg="# enhancements"
ariaLabel={`${count} enhancements`}
/>
);
break;
default:
}
if (!ErrataIcon) return null;
return (
<span style={{ whiteSpace: 'normal', fontSize: 'small' }}>
<TableText>
<SquareIcon size="sm" color={color} />
<span style={{ marginLeft: '8px' }}>
<Tooltip content={label} >
<ErrataIcon />
</Tooltip>
{url}
</span>
</TableText>
</span>
);
};
ErrataSummary.propTypes = {
type: PropTypes.string.isRequired,
count: PropTypes.number.isRequired,
errataCategory: PropTypes.string.isRequired,
};
export const ErrataType = ({ type }) => {
let ErrataIcon;
let label;
let verticalAlign = '-0.125em';
switch (type) {
case 'security':
label = __('Security');
ErrataIcon = SecurityIcon;
verticalAlign = '-0.2em';
break;
case 'recommended':
case 'bugfix':
label = __('Bugfix');
ErrataIcon = BugIcon;
break;
case 'enhancement':
case 'optional':
label = __('Enhancement');
ErrataIcon = EnhancementIcon;
break;
default:
}
if (!ErrataIcon) return null;
return (
<TableText wrapModifier="nowrap">
<span style={{ marginRight: '4px' }}>
<Tooltip content={label}>
<ErrataIcon style={{ verticalAlign }} />
</Tooltip>
</span>
{label}
</TableText>
);
};
ErrataType.propTypes = {
type: PropTypes.string.isRequired,
};
export const ErrataSeverity = ({ severity }) => {
let color;
let label;
switch (severity) {
case 'Low':
color = pfBlack.value;
label = __('Low');
break;
case 'Moderate':
color = pfGold.value;
label = __('Moderate');
break;
case 'Important':
color = pfOrange.value;
label = __('Important');
break;
case 'Critical':
color = pfRed.value;
label = __('Critical');
break;
default:
label = __('N/A');
}
return (
<TableText wrapModifier="nowrap">
{color &&
<span style={{ marginRight: '4px' }}>
<Tooltip content={label} >
<SecurityIcon color={color} style={{ verticalAlign: '-0.2em' }} />
</Tooltip>
</span>
}
{label}
</TableText>
);
};
ErrataSeverity.propTypes = {
severity: PropTypes.string.isRequired,
};
export const ErrataToggleGroupItem = ({
text, tooltipText, isSelected, onChange, ...toggleGroupItemProps
}) => (
<Tooltip
content={tooltipText}
position="top"
enableFlip
>
<ToggleGroupItem
text={text}
isSelected={isSelected}
onChange={onChange}
{...toggleGroupItemProps}
/>
</Tooltip>
);
ErrataToggleGroupItem.propTypes = {
text: PropTypes.string.isRequired,
tooltipText: PropTypes.string.isRequired,
isSelected: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired,
};