From b9905c8bf40357397b2df5adad4b3cb7eb447fbd Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 12 Dec 2020 13:22:11 +0100
Subject: [PATCH] Ensured visits amount card displays warning for old shlink
 versions

---
 src/servers/Overview.tsx                | 11 ++++++++++-
 src/servers/services/provideServices.ts |  2 +-
 test/servers/Overview.test.tsx          | 11 ++++++++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/servers/Overview.tsx b/src/servers/Overview.tsx
index a209693b..0c4ab5c3 100644
--- a/src/servers/Overview.tsx
+++ b/src/servers/Overview.tsx
@@ -11,6 +11,7 @@ import { CreateShortUrlProps } from '../short-urls/CreateShortUrl';
 import { VisitsOverview } from '../visits/reducers/visitsOverview';
 import { isServerWithId, SelectedServer } from './data';
 import './Overview.scss';
+import { Versions } from '../utils/helpers/version';
 
 interface OverviewConnectProps {
   shortUrlsList: ShortUrlsListState;
@@ -25,6 +26,7 @@ interface OverviewConnectProps {
 export const Overview = (
   ShortUrlsTable: FC<ShortUrlsTableProps>,
   CreateShortUrl: FC<CreateShortUrlProps>,
+  ForServerVersion: FC<Versions>,
 ) => boundToMercureHub(({
   shortUrlsList,
   listShortUrls,
@@ -51,7 +53,14 @@ export const Overview = (
         <div className="col-sm-4">
           <Card className="overview__card mb-2" body>
             <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>
         </div>
         <div className="col-sm-4">
diff --git a/src/servers/services/provideServices.ts b/src/servers/services/provideServices.ts
index 13ce2ddc..14453446 100644
--- a/src/servers/services/provideServices.ts
+++ b/src/servers/services/provideServices.ts
@@ -44,7 +44,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
   bottle.serviceFactory('ServerError', ServerError, 'DeleteServerButton');
   bottle.decorator('ServerError', connect([ 'servers', 'selectedServer' ]));
 
-  bottle.serviceFactory('Overview', Overview, 'ShortUrlsTable', 'CreateShortUrl');
+  bottle.serviceFactory('Overview', Overview, 'ShortUrlsTable', 'CreateShortUrl', 'ForServerVersion');
   bottle.decorator('Overview', connect(
     [ 'shortUrlsList', 'tagsList', 'selectedServer', 'mercureInfo', 'visitsOverview' ],
     [ 'listShortUrls', 'listTags', 'createNewVisits', 'loadMercureInfo', 'loadVisitsOverview' ],
diff --git a/test/servers/Overview.test.tsx b/test/servers/Overview.test.tsx
index a92a2044..f2ea285f 100644
--- a/test/servers/Overview.test.tsx
+++ b/test/servers/Overview.test.tsx
@@ -1,3 +1,4 @@
+import { FC } from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import { CardText } from 'reactstrap';
@@ -14,10 +15,11 @@ describe('<Overview />', () => {
   let wrapper: ShallowWrapper;
   const ShortUrlsTable = () => null;
   const CreateShortUrl = () => null;
+  const ForServerVersion: FC = ({ children }) => <>{children}</>;
   const listShortUrls = jest.fn();
   const listTags = jest.fn();
   const loadVisitsOverview = jest.fn();
-  const Overview = overviewCreator(ShortUrlsTable, CreateShortUrl);
+  const Overview = overviewCreator(ShortUrlsTable, CreateShortUrl, ForServerVersion);
   const shortUrls = {
     pagination: { totalItems: 83710 },
   };
@@ -61,6 +63,13 @@ describe('<Overview />', () => {
     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', () => {
     const wrapper = createWrapper();