Added support for title field in short URL table

This commit is contained in:
Alejandro Celaya 2021-03-05 14:20:49 +01:00
parent a665e96908
commit 3c9c0fe994
8 changed files with 68 additions and 26 deletions

View file

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

View file

@ -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>
{!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>

View file

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

View file

@ -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));

View file

@ -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

View file

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

View file

@ -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' });

View file

@ -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', () => {
const getThElementForSortableField = (sortableField: string) => wrapper.find('table')
it('should render table header cells with conditional order by icon', () => {
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]));
const sortableFields = Object.keys(SORTABLE_FIELDS);
.filterWhere((e) => e.text().includes(SORTABLE_FIELDS[orderableField as OrderableFields]));
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');
});
});