feat(roles): allow manual inputs in integer fields

* Remove +/- buttons in the integer fields of Roles form.
* Allow manual input in the integer fields.
* Add a logic to make time conversion between human-readable strings (e.g. "2 weeks") and numeric hours (336).
* Add proper validations on manual inputs.

Addresses: https://github.com/topcoder-platform/taas-app/issues/425, https://github.com/topcoder-platform/taas-app/issues/403#issuecomment-892774361

Author: cagdas001

src/components/IntegerField/index.jsx

@@ -1,6 +1,8 @@
-import React from "react";
+import React, { useMemo } from "react";
 import PT from "prop-types";
 import cn from "classnames";
+import IconExclamationMark from "components/Icons/ExclamationMarkCircled";
+import Popover from "components/Popover";
 import styles from "./styles.module.scss";
 
 /**
@@ -9,58 +11,119 @@ import styles from "./styles.module.scss";
  * @param {Object} props component properties
  * @param {string} [props.className] class name to be added to root element
  * @param {boolean} [props.isDisabled] if the field is disabled
+ * @param {boolean} [props.readOnly] if the field is readOnly
+ * @param {boolean} [props.displayButtons] whether to display +/- buttons
  * @param {string} props.name field's name
  * @param {number} props.value field's value
  * @param {number} [props.maxValue] maximum allowed value
  * @param {number} [props.minValue] minimum allowed value
- * @param {(v: number) => void} props.onChange
+ * @param {(v: number) => void} [props.onChange]
+ * @param {(v: string) => void} [props.onInputChange]
  * @returns {JSX.Element}
  */
 const IntegerField = ({
   className,
   isDisabled = false,
+  readOnly = true,
+  displayButtons = true,
   name,
+  onInputChange,
   onChange,
   value,
   maxValue = Infinity,
   minValue = -Infinity,
-}) => (
-  <div className={cn(styles.container, className)}>
-    <input
-      disabled={isDisabled}
-      readOnly
-      className={styles.input}
-      name={name}
-      value={value}
-    />
-    <button
-      className={styles.btnMinus}
-      onClick={(event) => {
-        event.stopPropagation();
-        if (!isDisabled) {
-          onChange(Math.max(value - 1, minValue));
-        }
-      }}
-    />
-    <button
-      className={styles.btnPlus}
-      onClick={(event) => {
-        event.stopPropagation();
-        if (!isDisabled) {
-          onChange(Math.min(+value + 1, maxValue));
-        }
-      }}
-    />
-  </div>
-);
+}) => {
+  const isInvalid = useMemo(
+    () =>
+      !!value &&
+      (isNaN(value) ||
+        !Number.isInteger(+value) ||
+        +value > maxValue ||
+        +value < minValue),
+    [value, minValue, maxValue]
+  );
+
+  const errorPopupContent = useMemo(() => {
+    if (value && (isNaN(value) || !Number.isInteger(+value))) {
+      return <>You must enter a valid integer.</>;
+    }
+    if (+value > maxValue) {
+      return (
+        <>
+          You must enter an integer less than or equal to{" "}
+          <strong>{maxValue}</strong>.
+        </>
+      );
+    }
+    if (+value < minValue) {
+      return (
+        <>
+          You must enter an integer greater than or equal to{" "}
+          <strong>{minValue}</strong>.
+        </>
+      );
+    }
+  }, [value, minValue, maxValue]);
+
+  return (
+    <div className={cn(styles.container, className)}>
+      {isInvalid && (
+        <Popover
+          className={styles.popup}
+          stopClickPropagation={true}
+          content={errorPopupContent}
+          strategy="fixed"
+        >
+          <IconExclamationMark className={styles.icon} />
+        </Popover>
+      )}
+      <input
+        type="number"
+        onChange={(event) => onInputChange && onInputChange(event.target.value)}
+        disabled={isDisabled}
+        readOnly={readOnly}
+        className={cn(styles.input, {
+          error: isInvalid,
+        })}
+        name={name}
+        value={value}
+      />
+      {displayButtons && (
+        <>
+          <button
+            className={styles.btnMinus}
+            onClick={(event) => {
+              event.stopPropagation();
+              if (!isDisabled) {
+                onChange(Math.max(value - 1, minValue));
+              }
+            }}
+          />
+          <button
+            className={styles.btnPlus}
+            onClick={(event) => {
+              event.stopPropagation();
+              if (!isDisabled) {
+                onChange(Math.min(+value + 1, maxValue));
+              }
+            }}
+          />
+        </>
+      )}
+    </div>
+  );
+};
 
 IntegerField.propTypes = {
   className: PT.string,
   isDisabled: PT.bool,
+  readOnly: PT.bool,
+  displayButtons: PT.bool,
   name: PT.string.isRequired,
   maxValue: PT.number,
   minValue: PT.number,
-  onChange: PT.func.isRequired,
+  onChange: PT.func,
+  onInputChange: PT.func,
   value: PT.number.isRequired,
 };
 

src/components/IntegerField/styles.module.scss

@@ -19,6 +19,11 @@ input.input {
   outline: none !important;
   box-shadow: none !important;
   text-align: center;
+  appearance: textfield;
+  &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 
   &:disabled {
     border-color: $control-disabled-border-color;
@@ -94,3 +99,17 @@ input.input {
     height: 9px;
   }
 }
+
+.popup {
+  margin-right: 5px;
+  max-width: 400px;
+  max-height: 200px;
+  line-height: $line-height-px;
+  white-space: normal;
+}
+
+.icon {
+  padding-top: 1px;
+  width: 15px;
+  height: 15px;
+}