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', {
+  const actionableFieldClasses = classNames({ 'short-urls-table__header-cell--with-action': !!orderByColumn });
-    '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>
+          {!supportsTitle && (
             <th className={orderableColumnsClasses} onClick={orderByColumn?.('longUrl')}>
-            {renderOrderIcon?.('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: ">
+      <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',
 };
 

src/utils/helpers/features.ts

@@ -0,0 +1,7 @@
+import { isReachableServer, SelectedServer } from '../../servers/data';
+import { versionMatch, Versions } from './version';
+
+const serverMatchesVersions = (versions: Versions) => (selectedServer: SelectedServer): boolean =>
+  isReachableServer(selectedServer) && versionMatch(selectedServer.version, versions);
+
+export const titleIsSupported = serverMatchesVersions({ minVersion: '2.6.0' });

test/short-urls/ShortUrlsTable.test.tsx

@@ -2,23 +2,26 @@ import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ShortUrlsTable as shortUrlsTableCreator } from '../../src/short-urls/ShortUrlsTable';
-import { SORTABLE_FIELDS } from '../../src/short-urls/reducers/shortUrlsListParams';
+import { OrderableFields, SORTABLE_FIELDS } from '../../src/short-urls/reducers/shortUrlsListParams';
 import { ShortUrlsList } from '../../src/short-urls/reducers/shortUrlsList';
+import { ReachableServer, SelectedServer } from '../../src/servers/data';
 
 describe('<ShortUrlsTable />', () => {
   let wrapper: ShallowWrapper;
   const shortUrlsList = Mock.all<ShortUrlsList>();
   const orderByColumn = jest.fn();
   const ShortUrlsRow = () => null;
-
   const ShortUrlsTable = shortUrlsTableCreator(ShortUrlsRow);
 
-  beforeEach(() => {
+  const createWrapper = (server: SelectedServer = null) => {
     wrapper = shallow(
-      <ShortUrlsTable shortUrlsList={shortUrlsList} selectedServer={null} orderByColumn={() => orderByColumn} />,
+      <ShortUrlsTable shortUrlsList={shortUrlsList} selectedServer={server} orderByColumn={() => orderByColumn} />,
     );
-  });
 
+    return wrapper;
+  };
+
+  beforeEach(() => createWrapper());
   afterEach(jest.resetAllMocks);
   afterEach(() => wrapper?.unmount());
 
@@ -42,13 +45,13 @@ describe('<ShortUrlsTable />', () => {
     });
   });
 
-  it('should render 6 table header cells with conditional order by icon', () => {
+  it('should render table header cells with conditional order by icon', () => {
-    const getThElementForSortableField = (sortableField: string) => wrapper.find('table')
+    const getThElementForSortableField = (orderableField: string) => wrapper.find('table')
       .find('thead')
       .find('tr')
       .find('th')
-      .filterWhere((e) => e.text().includes(SORTABLE_FIELDS[sortableField as keyof typeof SORTABLE_FIELDS]));
+      .filterWhere((e) => e.text().includes(SORTABLE_FIELDS[orderableField as OrderableFields]));
-    const sortableFields = Object.keys(SORTABLE_FIELDS);
+    const sortableFields = Object.keys(SORTABLE_FIELDS).filter((sortableField) => sortableField !== 'title');
 
     expect.assertions(sortableFields.length);
     sortableFields.forEach((sortableField) => {
@@ -56,4 +59,18 @@ describe('<ShortUrlsTable />', () => {
       expect(orderByColumn).toHaveBeenCalled();
     });
   });
+
+  it.each([
+    [ '2.6.0' ],
+    [ '2.6.1' ],
+    [ '2.7.0' ],
+    [ '3.0.0' ],
+  ])('should render composed column when server supports title', (version) => {
+    const wrapper = createWrapper(Mock.of<ReachableServer>({ version }));
+    const composedColumn = wrapper.find('table').find('th').at(2);
+    const text = composedColumn.text();
+
+    expect(text).toContain('Title');
+    expect(text).toContain('Long URL');
+  });
 });