webpack/components/Errata/index.js in katello-4.6.2.1 vs webpack/components/Errata/index.js in katello-4.7.0.rc1

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TableText } from '@patternfly/react-table';
-import { Tooltip } from '@patternfly/react-core';
+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,
@@ -15,13 +15,15 @@
   EnhancementIcon,
   SquareIcon,
 } from '@patternfly/react-icons';
 import { TranslatedAnchor } from '../Table/components/TranslatedPlural';
 
-export const ErrataMapper = ({ data, id }) => data.map(({ x: type, y: count }) => <ErrataSummary count={count} type={type} key={`${count} ${type}`} id={id} />);
+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 }) => {
+export const ErrataSummary = ({ type, count, errataCategory }) => {
   let ErrataIcon;
   let label;
   let url;
   let color;
   switch (type) {
@@ -31,11 +33,11 @@
     color = '#0066cc';
     url = (
       <TranslatedAnchor
         id="errata-card-security-count"
         style={{ marginLeft: '0.4rem' }}
-        href="#/Content/errata?type=security"
+        href={`#/Content/errata?type=security&show=${errataCategory}`}
         count={count}
         plural="security advisories"
         singular="security advisory"
         zeroMsg="# security advisories"
         ariaLabel={`${count} security advisories`}
@@ -49,11 +51,11 @@
     color = '#8bc1f7';
     url = (
       <TranslatedAnchor
         id="errata-card-bugfix-count"
         style={{ marginLeft: '0.4rem' }}
-        href="#/Content/errata?type=bugfix"
+        href={`#/Content/errata?type=bugfix&show=${errataCategory}`}
         count={count}
         plural="bug fixes"
         singular="bug fix"
         zeroMsg="# bug fixes"
         ariaLabel={`${count} bug fixes`}
@@ -67,11 +69,11 @@
     color = '#002f5d';
     url = (
       <TranslatedAnchor
         id="errata-card-enhancement-count"
         style={{ marginLeft: '0.4rem' }}
-        href="#/Content/errata?type=enhancement"
+        href={`#/Content/errata?type=enhancement&show=${errataCategory}`}
         count={count}
         plural="enhancements"
         singular="enhancement"
         zeroMsg="# enhancements"
         ariaLabel={`${count} enhancements`}
@@ -98,19 +100,22 @@
 };
 
 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;
@@ -125,13 +130,15 @@
   if (!ErrataIcon) return null;
 
 
   return (
     <TableText wrapModifier="nowrap">
-      <Tooltip content={label} >
-        <ErrataIcon style={{ marginRight: '4px' }} />
-      </Tooltip>
+      <span style={{ marginRight: '4px' }}>
+        <Tooltip content={label}>
+          <ErrataIcon style={{ verticalAlign }} />
+        </Tooltip>
+      </span>
       {label}
     </TableText>
   );
 };
 
@@ -164,17 +171,43 @@
     label = __('N/A');
   }
   return (
     <TableText wrapModifier="nowrap">
       {color &&
-        <Tooltip content={label} >
-          <SecurityIcon color={color} />
-        </Tooltip>
+        <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,
 };