Ensured visits amount card displays warning for old shlink versions

This commit is contained in:
Alejandro Celaya 2020-12-12 13:22:11 +01:00
parent 32957835b3
commit b9905c8bf4
3 changed files with 21 additions and 3 deletions

View file

@ -11,6 +11,7 @@ import { CreateShortUrlProps } from '../short-urls/CreateShortUrl';
import { VisitsOverview } from '../visits/reducers/visitsOverview'; import { VisitsOverview } from '../visits/reducers/visitsOverview';
import { isServerWithId, SelectedServer } from './data'; import { isServerWithId, SelectedServer } from './data';
import './Overview.scss'; import './Overview.scss';
import { Versions } from '../utils/helpers/version';
interface OverviewConnectProps { interface OverviewConnectProps {
shortUrlsList: ShortUrlsListState; shortUrlsList: ShortUrlsListState;
@ -25,6 +26,7 @@ interface OverviewConnectProps {
export const Overview = ( export const Overview = (
ShortUrlsTable: FC<ShortUrlsTableProps>, ShortUrlsTable: FC<ShortUrlsTableProps>,
CreateShortUrl: FC<CreateShortUrlProps>, CreateShortUrl: FC<CreateShortUrlProps>,
ForServerVersion: FC<Versions>,
) => boundToMercureHub(({ ) => boundToMercureHub(({
shortUrlsList, shortUrlsList,
listShortUrls, listShortUrls,
@ -51,7 +53,14 @@ export const Overview = (
<div className="col-sm-4"> <div className="col-sm-4">
<Card className="overview__card mb-2" body> <Card className="overview__card mb-2" body>
<CardTitle tag="h5" className="overview__card-title">Visits</CardTitle> <CardTitle tag="h5" className="overview__card-title">Visits</CardTitle>
<CardText tag="h2">{loadingVisits ? 'Loading...' : prettify(visitsCount)}</CardText> <CardText tag="h2">
<ForServerVersion minVersion="2.2.0">
{loadingVisits ? 'Loading...' : prettify(visitsCount)}
</ForServerVersion>
<ForServerVersion maxVersion="2.1.*">
<small className="text-muted"><i>Shlink 2.2 is needed</i></small>
</ForServerVersion>
</CardText>
</Card> </Card>
</div> </div>
<div className="col-sm-4"> <div className="col-sm-4">

View file

@ -44,7 +44,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
bottle.serviceFactory('ServerError', ServerError, 'DeleteServerButton'); bottle.serviceFactory('ServerError', ServerError, 'DeleteServerButton');
bottle.decorator('ServerError', connect([ 'servers', 'selectedServer' ])); bottle.decorator('ServerError', connect([ 'servers', 'selectedServer' ]));
bottle.serviceFactory('Overview', Overview, 'ShortUrlsTable', 'CreateShortUrl'); bottle.serviceFactory('Overview', Overview, 'ShortUrlsTable', 'CreateShortUrl', 'ForServerVersion');
bottle.decorator('Overview', connect( bottle.decorator('Overview', connect(
[ 'shortUrlsList', 'tagsList', 'selectedServer', 'mercureInfo', 'visitsOverview' ], [ 'shortUrlsList', 'tagsList', 'selectedServer', 'mercureInfo', 'visitsOverview' ],
[ 'listShortUrls', 'listTags', 'createNewVisits', 'loadMercureInfo', 'loadVisitsOverview' ], [ 'listShortUrls', 'listTags', 'createNewVisits', 'loadMercureInfo', 'loadVisitsOverview' ],

View file

@ -1,3 +1,4 @@
import { FC } from 'react';
import { shallow, ShallowWrapper } from 'enzyme'; import { shallow, ShallowWrapper } from 'enzyme';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { CardText } from 'reactstrap'; import { CardText } from 'reactstrap';
@ -14,10 +15,11 @@ describe('<Overview />', () => {
let wrapper: ShallowWrapper; let wrapper: ShallowWrapper;
const ShortUrlsTable = () => null; const ShortUrlsTable = () => null;
const CreateShortUrl = () => null; const CreateShortUrl = () => null;
const ForServerVersion: FC = ({ children }) => <>{children}</>;
const listShortUrls = jest.fn(); const listShortUrls = jest.fn();
const listTags = jest.fn(); const listTags = jest.fn();
const loadVisitsOverview = jest.fn(); const loadVisitsOverview = jest.fn();
const Overview = overviewCreator(ShortUrlsTable, CreateShortUrl); const Overview = overviewCreator(ShortUrlsTable, CreateShortUrl, ForServerVersion);
const shortUrls = { const shortUrls = {
pagination: { totalItems: 83710 }, pagination: { totalItems: 83710 },
}; };
@ -61,6 +63,13 @@ describe('<Overview />', () => {
expect(cards.at(2).html()).toContain(prettify(3)); expect(cards.at(2).html()).toContain(prettify(3));
}); });
test('first card displays warning for old shlink versions', () => {
const wrapper = createWrapper();
const firstCard = wrapper.find(CardText).first();
expect(firstCard.html()).toContain('Shlink 2.2 is needed');
});
test('nests complex components', () => { test('nests complex components', () => {
const wrapper = createWrapper(); const wrapper = createWrapper();