Ensured preview menu item is hidden when consuming Shlink 2

src/short-urls/helpers/ShortUrlsRowMenu.js

@@ -12,7 +12,9 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { Link } from 'react-router-dom';
 import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
 import PropTypes from 'prop-types';
+import { isEmpty } from 'ramda';
 import { serverType } from '../../servers/prop-types';
+import { compareVersions } from '../../utils/utils';
 import { shortUrlType } from '../reducers/shortUrlsList';
 import PreviewModal from './PreviewModal';
 import QrCodeModal from './QrCodeModal';
@@ -37,6 +39,8 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
   render() {
     const { onCopyToClipboard, shortUrl, selectedServer } = this.props;
     const completeShortUrl = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
+    const currentServerVersion = this.props.selectedServer ? this.props.selectedServer.version : '';
+    const showPreviewBtn = !isEmpty(currentServerVersion) && compareVersions(currentServerVersion, '<', '2.0.0');
     const toggleModal = (prop) => () => this.setState((prevState) => ({ [prop]: !prevState[prop] }));
     const toggleQrCode = toggleModal('isQrModalOpen');
     const togglePreview = toggleModal('isPreviewModalOpen');
@@ -70,17 +74,21 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
 
           <DropdownItem divider />
 
-          <DropdownItem onClick={togglePreview}>
+          {showPreviewBtn && (
-            <FontAwesomeIcon icon={pictureIcon} /> &nbsp;Preview
+            <React.Fragment>
-          </DropdownItem>
+              <DropdownItem onClick={togglePreview}>
-          <PreviewModal url={completeShortUrl} isOpen={this.state.isPreviewModalOpen} toggle={togglePreview} />
+                <FontAwesomeIcon icon={pictureIcon} /> &nbsp;Preview
+              </DropdownItem>
+              <PreviewModal url={completeShortUrl} isOpen={this.state.isPreviewModalOpen} toggle={togglePreview} />
+            </React.Fragment>
+          )}
 
           <DropdownItem onClick={toggleQrCode}>
             <FontAwesomeIcon icon={qrIcon} /> &nbsp;QR code
           </DropdownItem>
           <QrCodeModal url={completeShortUrl} isOpen={this.state.isQrModalOpen} toggle={toggleQrCode} />
 
-          <DropdownItem divider />
+          {showPreviewBtn && <DropdownItem divider />}
 
           <CopyToClipboard text={completeShortUrl} onCopy={onCopyToClipboard}>
             <DropdownItem>

test/short-urls/helpers/ShortUrlsRowMenu.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { ButtonDropdown, DropdownItem } from 'reactstrap';
+import each from 'jest-each';
 import createShortUrlsRowMenu from '../../../src/short-urls/helpers/ShortUrlsRowMenu';
 import PreviewModal from '../../../src/short-urls/helpers/PreviewModal';
 import QrCodeModal from '../../../src/short-urls/helpers/QrCodeModal';
@@ -15,18 +16,24 @@ describe('<ShortUrlsRowMenu />', () => {
     shortCode: 'abc123',
     shortUrl: 'https://doma.in/abc123',
   };
-
+  const createWrapper = (serverVersion = '1.21.1') => {
-  beforeEach(() => {
     const ShortUrlsRowMenu = createShortUrlsRowMenu(DeleteShortUrlModal, EditTagsModal);
 
     wrapper = shallow(
-      <ShortUrlsRowMenu selectedServer={selectedServer} shortUrl={shortUrl} onCopyToClipboard={onCopyToClipboard} />
+      <ShortUrlsRowMenu
+        selectedServer={{ ...selectedServer, version: serverVersion }}
+        shortUrl={shortUrl}
+        onCopyToClipboard={onCopyToClipboard}
+      />
     );
-  });
 
-  afterEach(() => wrapper.unmount());
+    return wrapper;
+  };
+
+  afterEach(() => wrapper && wrapper.unmount());
 
   it('renders modal windows', () => {
+    const wrapper = createWrapper();
     const deleteShortUrlModal = wrapper.find(DeleteShortUrlModal);
     const editTagsModal = wrapper.find(EditTagsModal);
     const previewModal = wrapper.find(PreviewModal);
@@ -38,10 +45,16 @@ describe('<ShortUrlsRowMenu />', () => {
     expect(qrCodeModal).toHaveLength(1);
   });
 
-  it('renders correct amount of menu items', () => {
+  each([
+    [ '1.20.3', 6, 2 ],
+    [ '1.21.0', 6, 2 ],
+    [ '1.21.1', 6, 2 ],
+    [ '2.0.0', 5, 1 ],
+    [ '2.0.1', 5, 1 ],
+    [ '2.1.0', 5, 1 ],
+  ]).it('renders correct amount of menu items depending on the version', (version, expectedNonDividerItems, expectedDividerItems) => {
+    const wrapper = createWrapper(version);
     const items = wrapper.find(DropdownItem);
-    const expectedNonDividerItems = 6;
-    const expectedDividerItems = 2;
 
     expect(items).toHaveLength(expectedNonDividerItems + expectedDividerItems);
     expect(items.find('[divider]')).toHaveLength(expectedDividerItems);
@@ -49,6 +62,7 @@ describe('<ShortUrlsRowMenu />', () => {
 
   describe('toggles state when toggling modal windows', () => {
     const assert = (modalComponent, stateProp, done) => {
+      const wrapper = createWrapper();
       const modal = wrapper.find(modalComponent);
 
       expect(wrapper.state(stateProp)).toEqual(false);
@@ -66,6 +80,7 @@ describe('<ShortUrlsRowMenu />', () => {
   });
 
   it('toggles dropdown state when toggling dropdown', (done) => {
+    const wrapper = createWrapper();
     const dropdown = wrapper.find(ButtonDropdown);
 
     expect(wrapper.state('isOpen')).toEqual(false);