New: Show Proper or Repack tag in interactive search

(cherry picked from commit efb000529b5dff42829df3ef151e4750a7b15cf6)

Closes #3141

frontend/src/Book/BookQuality.js

@@ -3,6 +3,7 @@ import React from 'react';
 import Label from 'Components/Label';
 import { kinds } from 'Helpers/Props';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 
 function getTooltip(title, quality, size, isMonitored, isCutoffNotMet) {
   const revision = quality.revision;
@@ -28,6 +29,36 @@ function getTooltip(title, quality, size, isMonitored, isCutoffNotMet) {
   return title;
 }
 
+function revisionLabel(className, quality, showRevision) {
+  if (!showRevision) {
+    return;
+  }
+
+  if (quality.revision.isRepack) {
+    return (
+      <Label
+        className={className}
+        kind={kinds.PRIMARY}
+        title={translate('Repack')}
+      >
+        R
+      </Label>
+    );
+  }
+
+  if (quality.revision.version && quality.revision.version > 1) {
+    return (
+      <Label
+        className={className}
+        kind={kinds.PRIMARY}
+        title={translate('Proper')}
+      >
+        P
+      </Label>
+    );
+  }
+}
+
 function BookQuality(props) {
   const {
     className,
@@ -35,7 +66,8 @@ function BookQuality(props) {
     quality,
     size,
     isMonitored,
-    isCutoffNotMet
+    isCutoffNotMet,
+    showRevision
   } = props;
 
   let kind = kinds.DEFAULT;
@@ -50,13 +82,15 @@ function BookQuality(props) {
   }
 
   return (
-    <Label
+    <span>
-      className={className}
+      <Label
-      kind={kind}
+        className={className}
-      title={getTooltip(title, quality, size, isMonitored, isCutoffNotMet)}
+        kind={kind}
-    >
+        title={getTooltip(title, quality, size, isMonitored, isCutoffNotMet)}
-      {quality.quality.name}
+      >
-    </Label>
+        {quality.quality.name}
+      </Label>{revisionLabel(className, quality, showRevision)}
+    </span>
   );
 }
 
@@ -66,12 +100,14 @@ BookQuality.propTypes = {
   quality: PropTypes.object.isRequired,
   size: PropTypes.number,
   isMonitored: PropTypes.bool,
-  isCutoffNotMet: PropTypes.bool
+  isCutoffNotMet: PropTypes.bool,
+  showRevision: PropTypes.bool
 };
 
 BookQuality.defaultProps = {
   title: '',
-  isMonitored: true
+  isMonitored: true,
+  showRevision: false
 };
 
 export default BookQuality;

frontend/src/InteractiveSearch/InteractiveSearchRow.css

@@ -28,6 +28,10 @@
   text-align: center;
 }
 
+.quality {
+  white-space: nowrap;
+}
+
 .customFormatScore {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 

frontend/src/InteractiveSearch/InteractiveSearchRow.js

@@ -178,7 +178,7 @@ class InteractiveSearchRow extends Component {
         </TableRowCell>
 
         <TableRowCell className={styles.quality}>
-          <BookQuality quality={quality} />
+          <BookQuality quality={quality} showRevision={true} />
         </TableRowCell>
 
         <TableRowCell className={styles.customFormatScore}>