Edit TagGroup component to support onClick and displaying titles

src/textual_summary/data/tag_group.js

@@ -5,15 +5,25 @@ export const tagGroupData = {
       icon: 'pficon pficon-zone',
       value: 'default',
       hoverClass: 'no-hover',
+      link: 'some link',
     },
     {
       label: 'My Company X Tags',
       value: [
-        { icon: 'fa fa-tag', label: 'Dan Test', value: ['Test 1'] },
+        { icon: 'fa fa-tag', label: 'Dan Test', value: ['Test 1'] , link: 'Dan Test link'},
         { icon: 'fa fa-tag', label: 'Demo bla', value: ['Policy', '2'] },
       ],
       hoverClass: 'no-hover',
     },
+    {
+      label: 'Other Tags',
+      value: [
+        { icon: 'fa fa-tag', label: 'Test', value: ['Test 1'] },
+        { icon: 'fa fa-tag', label: 'Demo 2', value: ['Policy', '2', '3'] },
+        { value: ['Demo 3'], title: 'Click to display the item' },
+      ],
+      title: 'All Other Tags',
+    },
   ],
   title: 'Smart Management',
 };

src/textual_summary/stories/TagGroup.stories.js

@@ -6,6 +6,6 @@ import { tagGroupData } from '../data/tag_group';
 
 storiesOf('TextualSummary', module)
   .add('TagGroup', () => {
-    return (<TagGroup items={tagGroupData.items} title={tagGroupData.title} />);
+    return (<TagGroup items={tagGroupData.items} title={tagGroupData.title} onClick={(e) => console.log(e)} />);
   })
 ;

src/textual_summary/tag_group.jsx

@@ -6,30 +6,39 @@ import IconOrImage from './icon_or_image';
  * Render a group of tags in a table.
  */
 export default class TagGroup extends React.Component {
+  /**
+   * Return onClick function if link is defined for an item/subitem
+   */
+  checkLinkItem = (link, e) => {
+    if (link) {
+      this.props.onClick(link, e);
+    }
+  }
+
   /**
    * Render a simple row. Label, icon, value.
    */
   renderTagRowSimple = item => (
     <tr key={item.key}>
       <td className="label">{item.label}</td>
-      <td>
-        <IconOrImage icon={item.icon} image={item.image} title={item.title} />
-        {item.value}
+      <td title={item.title} onClick={e => this.checkLinkItem(item.link, e)}>
+        <IconOrImage icon={item.icon} image={item.image} title={item.title} /> {item.value}
       </td>
     </tr>
   );
 
   /**
-   * Render a list of values joined with "<b> | </b>"
+   * Render a list of values joined with "<b> | </b>", with or without label
    */
   renderSubiteList = subitem => (
     <span>
-      {subitem.label}: {subitem.value.map((val, index) => (
+      &nbsp;
+      {subitem.label && `${subitem.label}: `}{subitem.value.map((val, index) => (
         <React.Fragment key={index}>
           {val}
           {(index < subitem.value.length - 1) && <b>&nbsp;|&nbsp;</b>}
         </React.Fragment>
-        ))}
+      ))}
     </span>
   );
 
@@ -46,9 +55,9 @@ export default class TagGroup extends React.Component {
       {item.value.map((subitem, index) => (
         <tr key={index}>
           {(index === 0) && (
-          <td rowSpan={item.value.length} className="label">{item.label}</td>
+          <td rowSpan={item.value.length} className="label" title={item.title}>{item.label}</td>
             )}
-          <td>
+          <td title={subitem.title} onClick={e => this.checkLinkItem(subitem.link, e)}>
             <IconOrImage icon={subitem.icon} image={subitem.image} text={subitem.text} />
             {this.renderSubiteList(subitem)}
           </td>
@@ -59,7 +68,7 @@ export default class TagGroup extends React.Component {
 
   render() {
     return (
-      <table className="table table-bordered table-striped table-summary-screen">
+      <table className="table table-bordered table-hover table-striped table-summary-screen">
         <thead>
           <tr>
             <th colSpan="2" align="left">{this.props.title}</th>
@@ -76,4 +85,5 @@ export default class TagGroup extends React.Component {
 TagGroup.propTypes = {
   title: PropTypes.string.isRequired,
   items: PropTypes.any.isRequired,
+  onClick: PropTypes.func,
 };

src/textual_summary/textual_group.jsx

@@ -15,7 +15,7 @@ const renderComponent = (props) => {
         <GenericGroup onClick={props.onClick} items={props.group.items} title={props.group.title} />
       );
     case 'TagGroup':
-      return <TagGroup items={props.group.items} title={props.group.title} />;
+      return <TagGroup onClick={props.onClick} items={props.group.items} title={props.group.title} />;
     case 'SimpleTable':
       return (
         <SimpleTable