Added support for title field in short URL table

src/short-urls/ShortUrlsList.scss

@@ -1,3 +1,3 @@
 .short-urls-list__header-icon {
-  margin-right: 5px;
+  margin-left: .4rem;
 }

src/short-urls/ShortUrlsTable.tsx

@@ -2,6 +2,7 @@ import { FC, ReactNode } from 'react';
 import { isEmpty } from 'ramda';
 import classNames from 'classnames';
 import { SelectedServer } from '../servers/data';
+import { titleIsSupported } from '../utils/helpers/features';
 import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
 import { ShortUrlsRowProps } from './helpers/ShortUrlsRow';
 import { OrderableFields } from './reducers/shortUrlsListParams';
@@ -25,10 +26,10 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
   className,
 }: ShortUrlsTableProps) => {
   const { error, loading, shortUrls } = shortUrlsList;
-  const orderableColumnsClasses = classNames('short-urls-table__header-cell', {
-    'short-urls-table__header-cell--with-action': !!orderByColumn,
-  });
+  const actionableFieldClasses = classNames({ 'short-urls-table__header-cell--with-action': !!orderByColumn });
+  const orderableColumnsClasses = classNames('short-urls-table__header-cell', actionableFieldClasses);
   const tableClasses = classNames('table table-hover', className);
+  const supportsTitle = titleIsSupported(selectedServer);
 
   const renderShortUrls = () => {
     if (error) {
@@ -62,20 +63,34 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
       <thead className="short-urls-table__header">
         <tr>
           <th className={orderableColumnsClasses} onClick={orderByColumn?.('dateCreated')}>
-            {renderOrderIcon?.('dateCreated')}
             Created at
+            {renderOrderIcon?.('dateCreated')}
           </th>
           <th className={orderableColumnsClasses} onClick={orderByColumn?.('shortCode')}>
-            {renderOrderIcon?.('shortCode')}
             Short URL
+            {renderOrderIcon?.('shortCode')}
           </th>
-          <th className={orderableColumnsClasses} onClick={orderByColumn?.('longUrl')}>
-            {renderOrderIcon?.('longUrl')}
-            Long URL
-          </th>
+          {!supportsTitle && (
+            <th className={orderableColumnsClasses} onClick={orderByColumn?.('longUrl')}>
+              Long URL
+              {renderOrderIcon?.('longUrl')}
+            </th>
+          ) || (
+            <th className="short-urls-table__header-cell">
+              <span className={actionableFieldClasses} onClick={orderByColumn?.('title')}>
+                Title
+                {renderOrderIcon?.('title')}
+              </span>
+              &nbsp;&nbsp;/&nbsp;&nbsp;
+              <span className={actionableFieldClasses} onClick={orderByColumn?.('longUrl')}>
+                <span className="indivisible">Long URL</span>
+                {renderOrderIcon?.('longUrl')}
+              </span>
+            </th>
+          )}
           <th className="short-urls-table__header-cell">Tags</th>
           <th className={orderableColumnsClasses} onClick={orderByColumn?.('visits')}>
-            <span className="indivisible">{renderOrderIcon?.('visits')} Visits</span>
+            <span className="indivisible">Visits{renderOrderIcon?.('visits')}</span>
           </th>
           <th className="short-urls-table__header-cell">&nbsp;</th>
         </tr>

src/short-urls/data/index.ts

@@ -23,6 +23,7 @@ export interface ShortUrl {
   meta: Required<Nullable<ShortUrlMeta>>;
   tags: string[];
   domain: string | null;
+  title?: string | null;
 }
 
 export interface ShortUrlMeta {

src/short-urls/helpers/ShortUrlsRow.scss

@@ -44,10 +44,6 @@
   position: relative;
 }
 
-.short-urls-row__cell--big {
-  transform: scale(1.5);
-}
-
 .short-urls-row__copy-hint {
   @include vertical-align(translateX(10px));
 

src/short-urls/helpers/ShortUrlsRow.tsx

@@ -64,9 +64,14 @@ const ShortUrlsRow = (
           </span>
         </span>
       </td>
-      <td className="short-urls-row__cell short-urls-row__cell--break" data-th="Long URL: ">
-        <ExternalLink href={shortUrl.longUrl} />
+      <td className="short-urls-row__cell short-urls-row__cell--break" data-th={`${shortUrl.title ? 'Title' : 'Long URL'}: `}>
+        <ExternalLink href={shortUrl.longUrl}>{shortUrl.title ?? shortUrl.longUrl}</ExternalLink>
       </td>
+      {shortUrl.title && (
+        <td className="short-urls-row__cell d-lg-none" data-th="Long URL: ">
+          <ExternalLink href={shortUrl.longUrl} />
+        </td>
+      )}
       <td className="short-urls-row__cell" data-th="Tags: ">{renderTags(shortUrl.tags)}</td>
       <td className="short-urls-row__cell text-md-right" data-th="Visits: ">
         <ShortUrlVisitsCount

src/short-urls/reducers/shortUrlsListParams.ts

@@ -8,6 +8,7 @@ export const SORTABLE_FIELDS = {
   dateCreated: 'Created at',
   shortCode: 'Short URL',
   longUrl: 'Long URL',
+  title: 'Title',
   visits: 'Visits',
 };