[DUOS-1767][risk=no] add tool tip to admin chair cancel icon (#1533)

* Add tool tips to cancel icon in admin and chair actions * Fix tooltips bug * Remove extra comma Co-authored-by: Shae Marks <[email protected]>
DataBiosphere · Apr 29, 2022 · 4f79251 · 4f79251
1 parent ac06aa9
commit 4f79251
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/src/components/SimpleTable.js b/src/components/SimpleTable.js
@@ -2,7 +2,6 @@ import { isNil } from 'lodash/fp';
 import { div, h, span } from 'react-hyperscript-helpers';
 import { Styles } from '../libs/theme';
 import ReactTooltip from 'react-tooltip';
-import { useEffect } from 'react';
 
 //Component that renders skeleton loader on loading
 const SkeletonLoader = ({columnRow, columnHeaders, baseStyle, tableSize}) => {
@@ -108,14 +107,18 @@ export default function SimpleTable(props) {
     onSort
   } = props;
 
-  useEffect(() => {
-    ReactTooltip.rebuild();
-  }, [rowData]);
-
   const {baseStyle, columnStyle, containerOverride} = styles;
   const columnRow = h(ColumnRow, {key: 'column-row-container', columnHeaders, baseStyle, columnStyle, sort, onSort});
   const tableTemplate = [columnRow, h(DataRows, {rowData, baseStyle, columnHeaders, key: 'table-data-rows'})];
   const output = isLoading ? h(SkeletonLoader, {columnRow, columnHeaders, baseStyle, tableSize}) : tableTemplate;
-  return div({className: 'table-data', style: containerOverride || Styles.TABLE.CONTAINER, role: 'table'},
-    [output, isNil(paginationBar) ? div() : paginationBar]);
+  return div([
+    div({className: 'table-data', style: containerOverride || Styles.TABLE.CONTAINER, role: 'table'},
+      [output, isNil(paginationBar) ? div() : paginationBar]),
+    h(ReactTooltip, {
+      place: 'left',
+      effect: 'solid',
+      multiline: true,
+      className: 'tooltip-wrapper'
+    })
+  ]);
 }
diff --git a/src/components/TableIconButton.js b/src/components/TableIconButton.js
@@ -3,6 +3,8 @@ import { h, span } from 'react-hyperscript-helpers';
 import { applyHoverEffects, setDivAttributes, setStyle } from '../libs/utils';
 import { makeStyles } from '@material-ui/core';
 import { isNil } from 'lodash';
+import {useEffect} from "react";
+import ReactTooltip from "react-tooltip";
 
 const useStyles = makeStyles({
   root: {
@@ -14,6 +16,11 @@ const useStyles = makeStyles({
 });
 
 export default function TableIconButton(props) {
+
+  useEffect(() => {
+    ReactTooltip.rebuild();
+  }, []);
+
   const onMouseEnterFn = (e) => {
     applyHoverEffects(e, hoverStyle);
   };

diff --git a/src/components/dar_collection_table/AdminActions.js b/src/components/dar_collection_table/AdminActions.js
@@ -73,6 +73,7 @@ export default function AdminActions(props) {
     onClick: () => cancelOnClick(collection),
     style: baseCancelButtonStyle,
     hoverStyle: hoverCancelButtonStyle,
+    dataTip: 'Cancel Elections',
     icon: Block,
   };
 

diff --git a/src/components/dar_collection_table/ChairActions.js b/src/components/dar_collection_table/ChairActions.js
@@ -174,6 +174,7 @@ export default function ChairActions(props) {
     onClick: () => cancelOnClick(collection),
     style: baseCancelButtonStyle,
     hoverStyle: hoverCancelButtonStyle,
+    dataTip: 'Cancel Elections',
     icon: Block,
   };