New: Tooltips for quality size limits

frontend/src/Settings/Quality/Definition/QualityDefinition.js

@@ -3,10 +3,12 @@ import React, { Component } from 'react';
 import ReactSlider from 'react-slider';
 import formatBytes from 'Utilities/Number/formatBytes';
 import roundNumber from 'Utilities/Number/roundNumber';
-import { kinds } from 'Helpers/Props';
+import { kinds, tooltipPositions } from 'Helpers/Props';
 import Label from 'Components/Label';
 import NumberInput from 'Components/Form/NumberInput';
 import TextInput from 'Components/Form/TextInput';
+import Popover from 'Components/Tooltip/Popover';
+import QualityDefinitionLimits from './QualityDefinitionLimits';
 import styles from './QualityDefinition.css';
 
 const MIN = 0;
@@ -139,12 +141,10 @@ class QualityDefinition extends Component {
     } = this.state;
 
     const minBytes = minSize * 1024 * 1024;
-    const minThirty = formatBytes(minBytes * 30, 2);
-    const minSixty = formatBytes(minBytes * 60, 2);
+    const minSixty = `${formatBytes(minBytes * 60, 2)}/h`;
 
     const maxBytes = maxSize && maxSize * 1024 * 1024;
-    const maxThirty = maxBytes ? formatBytes(maxBytes * 30, 2) : 'Unlimited';
-    const maxSixty = maxBytes ? formatBytes(maxBytes * 60, 2) : 'Unlimited';
+    const maxSixty = maxBytes ? `${formatBytes(maxBytes * 60, 2)}/h` : 'Unlimited';
 
     return (
       <div className={styles.qualityDefinition}>
@@ -178,13 +178,35 @@ class QualityDefinition extends Component {
 
           <div className={styles.sizes}>
             <div>
-              <Label kind={kinds.WARNING}>{minThirty}</Label>
-              <Label kind={kinds.INFO}>{minSixty}</Label>
+              <Popover
+                anchor={
+                  <Label kind={kinds.INFO}>{minSixty}</Label>
+                }
+                title="Minimum Limits"
+                body={
+                  <QualityDefinitionLimits
+                    bytes={minBytes}
+                    message="No minimum for any runtime"
+                  />
+                }
+                position={tooltipPositions.BOTTOM}
+              />
             </div>
 
             <div>
-              <Label kind={kinds.WARNING}>{maxThirty}</Label>
-              <Label kind={kinds.INFO}>{maxSixty}</Label>
+              <Popover
+                anchor={
+                  <Label kind={kinds.WARNING}>{maxSixty}</Label>
+                }
+                title="Maximim Limits"
+                body={
+                  <QualityDefinitionLimits
+                    bytes={maxBytes}
+                    message="No limit for any runtime"
+                  />
+                }
+                position={tooltipPositions.BOTTOM}
+              />
             </div>
           </div>
         </div>

frontend/src/Settings/Quality/Definition/QualityDefinitionLimits.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import formatBytes from 'Utilities/Number/formatBytes';
+
+function QualityDefinitionLimits(props) {
+  const {
+    bytes,
+    message
+  } = props;
+
+  if (!bytes) {
+    return <div>{message}</div>;
+  }
+
+  const thirty = formatBytes(bytes * 30, 2);
+  const fourtyFive = formatBytes(bytes * 30, 2);
+  const sixty = formatBytes(bytes * 30, 2);
+
+  return (
+    <div>
+      <div>30 Minutes: {thirty}</div>
+      <div>45 Minutes: {fourtyFive}</div>
+      <div>60 Minutes: {sixty}</div>
+    </div>
+  );
+}
+
+QualityDefinitionLimits.propTypes = {
+  bytes: PropTypes.number.isRequired,
+  message: PropTypes.string.isRequired
+};
+
+export default QualityDefinitionLimits;