Better error reporting and group highlighting during term planting.

Author: krulis-martin

src/components/Groups/GroupsTreeView/GroupsTreeList.js

@@ -4,7 +4,18 @@ import PropTypes from 'prop-types';
 import GroupsTreeNode from './GroupsTreeNode.js';
 
 const GroupsTreeList = React.memo(
-  ({ groups, checkboxes, checked, setChecked, isExpanded = false, addAttribute, removeAttribute, locale }) => (
+  ({
+    groups,
+    checkboxes,
+    highlight,
+    checked,
+    errors,
+    setChecked,
+    isExpanded = false,
+    addAttribute,
+    removeAttribute,
+    locale,
+  }) => (
     <ul className="groupTree nav flex-column">
       {groups.map(group => (
         <GroupsTreeNode
@@ -15,8 +26,10 @@ const GroupsTreeList = React.memo(
           removeAttribute={removeAttribute}
           locale={locale}
           checkboxes={checkboxes}
+          highlight={highlight}
           checked={checked}
           setChecked={setChecked}
+          errors={errors}
         />
       ))}
     </ul>
@@ -26,7 +39,9 @@ const GroupsTreeList = React.memo(
 GroupsTreeList.propTypes = {
   groups: PropTypes.array.isRequired,
   checkboxes: PropTypes.func,
+  highlight: PropTypes.func,
   checked: PropTypes.object,
+  errors: PropTypes.object,
   setChecked: PropTypes.func,
   isExpanded: PropTypes.bool,
   addAttribute: PropTypes.func,

src/components/Groups/GroupsTreeView/GroupsTreeNode.js

@@ -8,7 +8,7 @@ import Button from '../../widgets/TheButton';
 import Confirm from '../../widgets/Confirm';
 import GroupsTreeList from './GroupsTreeList.js';
 import GroupMembershipIcon from '../GroupMembershipIcon';
-import Icon, { AddIcon, CloseIcon, GroupIcon, LectureIcon, LoadingIcon, TermIcon } from '../../icons';
+import Icon, { AddIcon, CloseIcon, GroupIcon, LectureIcon, LoadingIcon, TermIcon, WarningIcon } from '../../icons';
 import { EMPTY_OBJ } from '../../../helpers/common.js';
 
 const DEFAULT_ICON = ['far', 'square'];
@@ -48,7 +48,9 @@ const GroupsTreeNode = React.memo(
   ({
     group,
     checkboxes = null,
+    highlight = null,
     checked = null,
+    errors = null,
     setChecked = null,
     isExpanded = false,
     addAttribute,
@@ -73,29 +75,38 @@ const GroupsTreeNode = React.memo(
     const hasCheckbox = checkboxes ? checkboxes(group) : false;
     const isChecked = checked ? Boolean(checked[id]) : false;
     const clickHandler = hasCheckbox ? () => setChecked(id, !isChecked) : () => setOpen(!isOpen);
+    const error = (errors && errors[id]) || null;
+    const highlightClass = highlight ? highlight(group) : '';
+    const highlightIconClass = highlight ? highlight(group) : 'text-body-tertiary';
 
     return (
       <li>
         <span onClick={clickHandler} className="clearfix">
-          {hasCheckbox ? (
-            <Icon
-              icon={isChecked ? 'square-check' : DEFAULT_ICON}
-              className="text-success clickable"
-              gapRight={2}
-              fixedWidth
-            />
-          ) : checkboxes ? (
-            <Icon icon="square" className="text-body-secondary opacity-25" gapRight={2} fixedWidth />
-          ) : (
-            <Icon
-              icon={leafNode ? DEFAULT_ICON : isOpen ? 'minus-square' : 'plus-square'}
-              className="text-body-secondary clickable"
-              gapRight={2}
-              fixedWidth
-            />
-          )}
+          <span className={error ? 'text-danger fw-bold' : highlightClass}>
+            {hasCheckbox ? (
+              <Icon
+                icon={isChecked ? 'square-check' : DEFAULT_ICON}
+                className="text-success clickable"
+                gapRight={2}
+                fixedWidth
+              />
+            ) : checkboxes ? (
+              <Icon icon="square" className={`opacity-50 ${highlightIconClass}`} gapRight={2} fixedWidth />
+            ) : (
+              <Icon
+                icon={leafNode ? DEFAULT_ICON : isOpen ? 'minus-square' : 'plus-square'}
+                className={`clickable ${highlightIconClass}`}
+                gapRight={2}
+                fixedWidth
+              />
+            )}
+
+            {error && (
+              <WarningIcon gapRight className="text-danger" tooltip={error} tooltipId={`error-tooltip-${id}`} />
+            )}
 
-          {getLocalizedName(name, id, locale)}
+            {getLocalizedName(name, id, locale)}
+          </span>
 
           {admins && admins.length > 0 && (
             <span className="ps-2">
@@ -216,8 +227,10 @@ const GroupsTreeNode = React.memo(
               removeAttribute={removeAttribute}
               locale={locale}
               checkboxes={checkboxes}
+              highlight={highlight}
               checked={checked}
               setChecked={setChecked}
+              errors={errors}
             />
           </Collapse>
         )}
@@ -239,7 +252,9 @@ GroupsTreeNode.propTypes = {
     pending: PropTypes.bool,
   }),
   checkboxes: PropTypes.func,
+  highlight: PropTypes.func,
   checked: PropTypes.object,
+  errors: PropTypes.object,
   setChecked: PropTypes.func,
   isExpanded: PropTypes.bool,
   addAttribute: PropTypes.func,

src/components/Groups/GroupsTreeView/GroupsTreeView.js

@@ -14,11 +14,13 @@ const GroupsTreeView = ({
   groups,
   filter = null,
   checkboxes = null,
+  highlight = null,
   checked = null,
   setChecked = null,
   isExpanded = false,
   addAttribute = null,
   removeAttribute = null,
+  errors = null,
   intl: { locale },
 }) => {
   const topLevelGroups = getTopLevelGroups(groups, locale, filter);
@@ -33,8 +35,10 @@ const GroupsTreeView = ({
       addAttribute={addAttribute}
       removeAttribute={removeAttribute}
       checkboxes={checkboxes}
+      highlight={highlight}
       checked={checked}
       setChecked={setChecked}
+      errors={errors}
     />
   );
 };
@@ -43,7 +47,9 @@ GroupsTreeView.propTypes = {
   groups: PropTypes.object.isRequired, // plain object with groupId -> group mappings
   filter: PropTypes.func,
   checkboxes: PropTypes.func,
+  highlight: PropTypes.func,
   checked: PropTypes.object,
+  errors: PropTypes.object,
   setChecked: PropTypes.func,
   isExpanded: PropTypes.bool,
   addAttribute: PropTypes.func,

src/pages/GroupsSuperadmin/GroupsSuperadmin.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 import { Modal, Badge, Dropdown, ButtonGroup, Row, Col } from 'react-bootstrap';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import { FORM_ERROR } from 'final-form';
 import { lruMemoize } from 'reselect';
 
@@ -49,6 +49,10 @@ const plantingCheckboxSelector = lruMemoize(
     !group.children.some(g => g.attributes?.term?.includes(`${term.year}-${term.term}`))
 );
 
+const highlightClassGenerator = lruMemoize(
+  term => group => (group.attributes?.term?.includes(`${term.year}-${term.term}`) ? 'text-success fw-bold' : '')
+);
+
 class GroupsSuperadmin extends Component {
   state = {
     modalGroup: null,
@@ -61,7 +65,7 @@ class GroupsSuperadmin extends Component {
     plantGroupsCount: 0,
     plantGroupsPending: false,
     plantGroupsErrors: null,
-    plantedGroups: 5,
+    plantedGroups: 0,
   };
 
   openModalGroup = modalGroup =>
@@ -142,7 +146,11 @@ class GroupsSuperadmin extends Component {
   };
 
   plantGroups = async term => {
-    const { createTermGroup, reloadGroups } = this.props;
+    const {
+      createTermGroup,
+      reloadGroups,
+      intl: { formatMessage },
+    } = this.props;
     if (this.state.plantGroupsCount === 0) {
       return;
     }
@@ -166,7 +174,7 @@ class GroupsSuperadmin extends Component {
         await promises[id];
         ++plantedGroups;
       } catch (err) {
-        plantGroupsErrors[id] = getErrorMessage(err);
+        plantGroupsErrors[id] = getErrorMessage(formatMessage)(err);
       }
     }
 
@@ -320,6 +328,9 @@ class GroupsSuperadmin extends Component {
                         checkboxes={
                           this.state.plantTexts ? plantingCheckboxSelector(this.state.plantTerm || terms[0]) : null
                         }
+                        highlight={
+                          this.state.plantTexts ? highlightClassGenerator(this.state.plantTerm || terms[0]) : null
+                        }
                         checked={this.state.plantGroups}
                         addAttribute={!this.state.plantTexts ? this.openModalGroup : null}
                         removeAttribute={!this.state.plantTexts ? removeAttribute : null}
@@ -493,6 +504,7 @@ GroupsSuperadmin.propTypes = {
   removeAttribute: PropTypes.func.isRequired,
   createTermGroup: PropTypes.func.isRequired,
   reloadGroups: PropTypes.func.isRequired,
+  intl: PropTypes.object,
 };
 
 export default connect(
@@ -513,4 +525,4 @@ export default connect(
     createTermGroup: (parentId, term, texts) => dispatch(createTermGroup(parentId, term, texts)),
     reloadGroups: () => dispatch(fetchAllGroups()),
   })
-)(GroupsSuperadmin);
+)(injectIntl(GroupsSuperadmin));