Displayed amount of max visits on those URLs which have it

src/short-urls/ShortUrlsList.js

@@ -18,6 +18,7 @@ export const SORTABLE_FIELDS = {
   visits: 'Visits',
 };
 
+// FIXME Replace with typescript: (ShortUrlsRow component)
 const ShortUrlsList = (ShortUrlsRow) => class ShortUrlsList extends React.Component {
   static propTypes = {
     listShortUrls: PropTypes.func,

src/short-urls/helpers/ShortUrlsRow.js

@@ -2,6 +2,9 @@ import { isEmpty } from 'ramda';
 import React from 'react';
 import Moment from 'react-moment';
 import PropTypes from 'prop-types';
+import { UncontrolledTooltip } from 'reactstrap';
+import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { shortUrlsListParamsType } from '../reducers/shortUrlsListParams';
 import { serverType } from '../../servers/prop-types';
 import ExternalLink from '../../utils/ExternalLink';
@@ -9,6 +12,32 @@ import { shortUrlType } from '../reducers/shortUrlsList';
 import Tag from '../../tags/helpers/Tag';
 import './ShortUrlsRow.scss';
 
+const renderVisitsCount = (shortUrl) => {
+  const { visitsCount, meta } = shortUrl;
+  const maxVisits = meta && meta.maxVisits;
+
+  if (!maxVisits) {
+    return <span>{visitsCount}</span>;
+  }
+
+  return (
+    <React.Fragment>
+      <span>
+        {visitsCount}
+        <small id="maxVisitsControl" className="short-urls-row__max-visits-control">
+          {' '}/ {maxVisits}{' '}
+          <sup>
+            <FontAwesomeIcon icon={infoIcon} />
+          </sup>
+        </small>
+      </span>
+      <UncontrolledTooltip target="maxVisitsControl" placement="bottom">
+        This short URL will not accept more than <b>{maxVisits}</b> visits.
+      </UncontrolledTooltip>
+    </React.Fragment>
+  );
+};
+
 const ShortUrlsRow = (
   ShortUrlsRowMenu,
   colorGenerator,
@@ -56,7 +85,9 @@ const ShortUrlsRow = (
           <ExternalLink href={shortUrl.longUrl} />
         </td>
         <td className="short-urls-row__cell" data-th="Tags: ">{this.renderTags(shortUrl.tags)}</td>
-        <td className="short-urls-row__cell text-md-right" data-th="Visits: ">{shortUrl.visitsCount}</td>
+        <td className="short-urls-row__cell text-md-right" data-th="Visits: ">
+          {renderVisitsCount(shortUrl)}
+        </td>
         <td className="short-urls-row__cell short-urls-row__cell--relative">
           <small
             className="badge badge-warning short-urls-row__copy-hint"

src/short-urls/helpers/ShortUrlsRow.scss

@@ -51,3 +51,7 @@
     right: calc(100% + 10px);
   }
 }
+
+.short-urls-row__max-visits-control {
+  cursor: help;
+}