2000: Added tooltips

config-overrides.js

@@ -5,5 +5,11 @@ module.exports = function override(config, env) {
     'remote-component.config.js': `${__dirname}/src/remote-component.config.js`,
   };
 
+  config.module.rules.push({
+    test: /\.mjs$/,
+    include: /node_modules/,
+    type: "javascript/auto"
+  });
+
   return config;
 };

package.json

@@ -45,6 +45,7 @@
     "react-select": "^5.2.2",
     "react-table": "^7.7.0",
     "react-toastify": "^8.1.0",
+    "react-tooltip": "^5.28.0",
     "rrule": "^2.7.2",
     "typescript": "^4.4.2",
     "ulid": "^2.3.0"

src/components/util/forms/form-checkbox.jsx

@@ -12,7 +12,6 @@ import { FormCheck, FormGroup } from "react-bootstrap";
  * @param {string} props.value The value of the checkbox
  * @param {Function} props.onChange The callback for changes in the checkbox
  * @param {string} props.formGroupClasses Classes for the formgroup
- * @param {boolean} props.required Whether the checkbox is required.
  * @returns {object} A checkbox.
  */
 function FormCheckbox({

src/components/util/forms/form-input.jsx

@@ -2,6 +2,7 @@ import { React } from "react";
 import PropTypes from "prop-types";
 import { FormControl, FormGroup, FormLabel, InputGroup } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
+import Tooltip from "../tooltip";
 
 /**
  * An input for forms.
@@ -36,19 +37,23 @@ function FormInput({
   inputGroupExtra,
   disabled,
   required,
+  tooltip = null,
   ...rest
 }) {
   const { t } = useTranslation("common");
   const invalidInputText = invalidText || t("form-input.validation-text");
   /* eslint-disable react/jsx-props-no-spreading */
   return (
     <FormGroup className={formGroupClasses}>
-      {label && (
+      {label && (<>
         <FormLabel htmlFor={name}>
           {label}
           {required && " *"}
         </FormLabel>
-      )}
+        {tooltip !== null && (
+          <Tooltip id={`tooltip-${name}`} content={tooltip} />
+        )}
+      </>)}
       <InputGroup hasValidation>
         <FormControl
           name={name}
@@ -82,6 +87,7 @@ FormInput.defaultProps = {
   label: null,
   inputGroupExtra: null,
   required: false,
+  tooltip: null,
 };
 
 FormInput.propTypes = {
@@ -98,6 +104,7 @@ FormInput.propTypes = {
   disabled: PropTypes.bool,
   required: PropTypes.bool,
   inputGroupExtra: PropTypes.node,
+  tooltip: PropTypes.string,
 };
 
 export default FormInput;

src/components/util/forms/select.jsx

@@ -2,6 +2,9 @@ import { React, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { FormGroup } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faQuestionCircle} from "@fortawesome/free-solid-svg-icons";
+import {Tooltip} from "react-tooltip";
 
 /**
  * @param {object} props The props.
@@ -30,6 +33,7 @@ function Select({
   formGroupClasses,
   isRequired,
   allowNull,
+  tooltip = null,
 }) {
   const { t } = useTranslation("common");
   const textOnError = errorText || t("select.validation-text");
@@ -61,6 +65,16 @@ function Select({
         {label}
         {required && " *"}
       </label>
+      {tooltip !== null && (
+        <>
+          <a data-tooltip-id={`tooltip-${name}`}> <FontAwesomeIcon icon={faQuestionCircle} className="text-black-50" /></a>
+          <Tooltip
+            id={`tooltip-${name}`}
+            openOnClick={true}
+            content={tooltip}
+          />
+        </>
+      )}
       <select
         className={classes}
         required={isRequired}