New: (UI) Minor improvements to metadata profiles listing

frontend/src/Settings/Profiles/Metadata/EditMetadataProfileModalContent.js

@@ -15,9 +15,6 @@ import { inputTypes, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import styles from './EditMetadataProfileModalContent.css';
 
-// Tab, enter, and comma
-const tagInputDelimiters = [9, 13, 188];
-
 function EditMetadataProfileModalContent(props) {
   const {
     isFetching,
@@ -189,7 +186,7 @@ function EditMetadataProfileModalContent(props) {
                   helpText={translate('IgnoredMetaHelpText')}
                   kind={kinds.DANGER}
                   placeholder={translate('IgnoredPlaceHolder')}
-                  delimiters={tagInputDelimiters}
+                  delimiters={['Tab', 'Enter', ',']}
                   {...ignored}
                   onChange={onInputChange}
                 />

frontend/src/Settings/Profiles/Metadata/MetadataProfile.css

@@ -23,9 +23,14 @@
   height: 36px;
 }
 
-.bookTypes {
+.enabled {
   display: flex;
   flex-wrap: wrap;
   margin-top: 5px;
-  pointer-events: all;
+}
+
+.label {
+  composes: label from '~Components/Label.css';
+
+  max-width: 100%;
 }

frontend/src/Settings/Profiles/Metadata/MetadataProfile.css.d.ts

@@ -1,8 +1,9 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  'bookTypes': string;
   'cloneButton': string;
+  'enabled': string;
+  'label': string;
   'metadataProfile': string;
   'name': string;
   'nameContainer': string;

frontend/src/Settings/Profiles/Metadata/MetadataProfile.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import MiddleTruncate from 'react-middle-truncate';
 import Card from 'Components/Card';
+import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import { icons, kinds } from 'Helpers/Props';
@@ -64,6 +66,9 @@ class MetadataProfile extends Component {
     const {
       id,
       name,
+      minPopularity,
+      minPages,
+      ignored,
       isDeleting
     } = this.props;
 
@@ -86,6 +91,48 @@ class MetadataProfile extends Component {
           />
         </div>
 
+        <div className={styles.enabled}>
+          {
+            minPopularity ?
+              <Label kind={kinds.DEFAULT}>
+                {translate('MinimumPopularity')}: {minPopularity}
+              </Label> :
+              null
+          }
+
+          {
+            minPages ?
+              <Label kind={kinds.DEFAULT}>
+                {translate('MinimumPages')}: {minPages}
+              </Label> :
+              null
+          }
+        </div>
+
+        <div>
+          {
+            ignored.map((item) => {
+              if (!item) {
+                return null;
+              }
+
+              return (
+                <Label
+                  className={styles.label}
+                  key={item}
+                  kind={kinds.DANGER}
+                >
+                  <MiddleTruncate
+                    text={item}
+                    start={10}
+                    end={10}
+                  />
+                </Label>
+              );
+            })
+          }
+        </div>
+
         <EditMetadataProfileModalConnector
           id={id}
           isOpen={this.state.isEditMetadataProfileModalOpen}
@@ -111,10 +158,19 @@ class MetadataProfile extends Component {
 MetadataProfile.propTypes = {
   id: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
+  minPopularity: PropTypes.number.isRequired,
+  minPages: PropTypes.number.isRequired,
+  ignored: PropTypes.arrayOf(PropTypes.string).isRequired,
   isDeleting: PropTypes.bool.isRequired,
   onConfirmDeleteMetadataProfile: PropTypes.func.isRequired,
   onCloneMetadataProfilePress: PropTypes.func.isRequired
 
 };
 
+MetadataProfile.defaultProps = {
+  minPopularity: 0,
+  minPages: 0,
+  ignored: []
+};
+
 export default MetadataProfile;