Updated ShortUrlForm to ensure it does not render empty cards

src/short-urls/ShortUrlForm.tsx

@@ -3,25 +3,27 @@ import { InputType } from 'reactstrap/lib/Input';
 import { Button, FormGroup, Input, Row } from 'reactstrap';
 import { isEmpty, pipe, replace, trim } from 'ramda';
 import m from 'moment';
+import classNames from 'classnames';
 import DateInput, { DateInputProps } from '../utils/DateInput';
 import {
   supportsListingDomains,
   supportsSettingShortCodeLength,
   supportsShortUrlTitle,
+  supportsValidateUrl,
 } from '../utils/helpers/features';
 import { SimpleCard } from '../utils/SimpleCard';
 import { handleEventPreventingDefault, hasValue } from '../utils/utils';
 import Checkbox from '../utils/Checkbox';
 import { SelectedServer } from '../servers/data';
 import { TagsSelectorProps } from '../tags/helpers/TagsSelector';
-import { Versions } from '../utils/helpers/version';
 import { DomainSelectorProps } from '../domains/DomainSelector';
 import { formatIsoDate } from '../utils/helpers/date';
 import UseExistingIfFoundInfoIcon from './UseExistingIfFoundInfoIcon';
 import { ShortUrlData } from './data';
 import './ShortUrlForm.scss';
 
-type Mode = 'create' | 'create-basic' | 'edit';
+export type Mode = 'create' | 'create-basic' | 'edit';
+
 type DateFields = 'validSince' | 'validUntil';
 type NonDateFields = 'longUrl' | 'customSlug' | 'shortCodeLength' | 'domain' | 'maxVisits' | 'title';
 
@@ -37,7 +39,6 @@ const normalizeTag = pipe(trim, replace(/ /g, '-'));
 
 export const ShortUrlForm = (
   TagsSelector: FC<TagsSelectorProps>,
-  ForServerVersion: FC<Versions>,
   DomainSelector: FC<DomainSelectorProps>,
 ): FC<ShortUrlFormProps> => ({ mode, saving, onSave, initialState, selectedServer }) => { // eslint-disable-line complexity
   const [ shortUrlData, setShortUrlData ] = useState(initialState);
@@ -101,6 +102,13 @@ export const ShortUrlForm = (
   const showDomainSelector = supportsListingDomains(selectedServer);
   const disableShortCodeLength = !supportsSettingShortCodeLength(selectedServer);
   const supportsTitle = supportsShortUrlTitle(selectedServer);
+  const showCustomizeCard = supportsTitle || !isEdit;
+  const limitAccessCardClasses = classNames('mb-3', {
+    'col-sm-6': showCustomizeCard,
+    'col-sm-12': !showCustomizeCard,
+  });
+  const showValidateUrl = supportsValidateUrl(selectedServer);
+  const showExtraValidationsCard = showValidateUrl || !isEdit;
 
   return (
     <form className="short-url-form" onSubmit={submit}>
@@ -112,42 +120,44 @@ export const ShortUrlForm = (
           </SimpleCard>
 
           <Row>
-            <div className="col-sm-6 mb-3">
-              <SimpleCard title="Customize the short URL">
-                {supportsTitle && renderOptionalInput('title', 'Title')}
-                {!isEdit && (
-                  <>
-                    <Row>
-                      <div className="col-lg-6">
-                        {renderOptionalInput('customSlug', 'Custom slug', 'text', {
-                          disabled: hasValue(shortUrlData.shortCodeLength),
-                        })}
-                      </div>
-                      <div className="col-lg-6">
-                        {renderOptionalInput('shortCodeLength', 'Short code length', 'number', {
-                          min: 4,
-                          disabled: disableShortCodeLength || hasValue(shortUrlData.customSlug),
-                          ...disableShortCodeLength && {
-                            title: 'Shlink 2.1.0 or higher is required to be able to provide the short code length',
-                          },
-                        })}
-                      </div>
-                    </Row>
-                    {!showDomainSelector && renderOptionalInput('domain', 'Domain', 'text')}
-                    {showDomainSelector && (
-                      <FormGroup>
-                        <DomainSelector
-                          value={shortUrlData.domain}
-                          onChange={(domain?: string) => setShortUrlData({ ...shortUrlData, domain })}
-                        />
-                      </FormGroup>
-                    )}
-                  </>
-                )}
-              </SimpleCard>
-            </div>
+            {showCustomizeCard && (
+              <div className="col-sm-6 mb-3">
+                <SimpleCard title="Customize the short URL">
+                  {supportsTitle && renderOptionalInput('title', 'Title')}
+                  {!isEdit && (
+                    <>
+                      <Row>
+                        <div className="col-lg-6">
+                          {renderOptionalInput('customSlug', 'Custom slug', 'text', {
+                            disabled: hasValue(shortUrlData.shortCodeLength),
+                          })}
+                        </div>
+                        <div className="col-lg-6">
+                          {renderOptionalInput('shortCodeLength', 'Short code length', 'number', {
+                            min: 4,
+                            disabled: disableShortCodeLength || hasValue(shortUrlData.customSlug),
+                            ...disableShortCodeLength && {
+                              title: 'Shlink 2.1.0 or higher is required to be able to provide the short code length',
+                            },
+                          })}
+                        </div>
+                      </Row>
+                      {!showDomainSelector && renderOptionalInput('domain', 'Domain', 'text')}
+                      {showDomainSelector && (
+                        <FormGroup>
+                          <DomainSelector
+                            value={shortUrlData.domain}
+                            onChange={(domain?: string) => setShortUrlData({ ...shortUrlData, domain })}
+                          />
+                        </FormGroup>
+                      )}
+                    </>
+                  )}
+                </SimpleCard>
+              </div>
+            )}
 
-            <div className="col-sm-6 mb-3">
+            <div className={limitAccessCardClasses}>
               <SimpleCard title="Limit access to the short URL">
                 {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
                 {renderDateInput('validSince', 'Enabled since...', { maxDate: shortUrlData.validUntil ? m(shortUrlData.validUntil) : undefined })}
@@ -156,38 +166,40 @@ export const ShortUrlForm = (
             </div>
           </Row>
 
-          <SimpleCard title="Extra validations" className="mb-3">
-            {!isEdit && (
-              <p>
-                Make sure the long URL is valid, or ensure an existing short URL is returned if it matches all
-                provided data.
-              </p>
-            )}
-            <ForServerVersion minVersion="2.4.0">
-              <p>
-                <Checkbox
-                  inline
-                  checked={shortUrlData.validateUrl}
-                  onChange={(validateUrl) => setShortUrlData({ ...shortUrlData, validateUrl })}
-                >
-                  Validate URL
-                </Checkbox>
-              </p>
-            </ForServerVersion>
-            {!isEdit && (
-              <p>
-                <Checkbox
-                  inline
-                  className="mr-2"
-                  checked={shortUrlData.findIfExists}
-                  onChange={(findIfExists) => setShortUrlData({ ...shortUrlData, findIfExists })}
-                >
-                  Use existing URL if found
-                </Checkbox>
-                <UseExistingIfFoundInfoIcon />
-              </p>
-            )}
-          </SimpleCard>
+          {showExtraValidationsCard && (
+            <SimpleCard title="Extra validations" className="mb-3">
+              {!isEdit && (
+                <p>
+                  Make sure the long URL is valid, or ensure an existing short URL is returned if it matches all
+                  provided data.
+                </p>
+              )}
+              {showValidateUrl && (
+                <p>
+                  <Checkbox
+                    inline
+                    checked={shortUrlData.validateUrl}
+                    onChange={(validateUrl) => setShortUrlData({ ...shortUrlData, validateUrl })}
+                  >
+                    Validate URL
+                  </Checkbox>
+                </p>
+              )}
+              {!isEdit && (
+                <p>
+                  <Checkbox
+                    inline
+                    className="mr-2"
+                    checked={shortUrlData.findIfExists}
+                    onChange={(findIfExists) => setShortUrlData({ ...shortUrlData, findIfExists })}
+                  >
+                    Use existing URL if found
+                  </Checkbox>
+                  <UseExistingIfFoundInfoIcon />
+                </p>
+              )}
+            </SimpleCard>
+          )}
         </>
       )}
 

src/short-urls/services/provideServices.ts

@@ -34,7 +34,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator', 'useStateFlagTimeout');
   bottle.serviceFactory('ShortUrlsRowMenu', ShortUrlsRowMenu, 'DeleteShortUrlModal', 'QrCodeModal');
   bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'useStateFlagTimeout');
-  bottle.serviceFactory('ShortUrlForm', ShortUrlForm, 'TagsSelector', 'ForServerVersion', 'DomainSelector');
+  bottle.serviceFactory('ShortUrlForm', ShortUrlForm, 'TagsSelector', 'DomainSelector');
 
   bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'ShortUrlForm', 'CreateShortUrlResult');
   bottle.decorator(

src/utils/helpers/features.ts

@@ -12,6 +12,8 @@ export const supportsListingDomains = serverMatchesVersions({ minVersion: '2.4.0
 
 export const supportsQrCodeSvgFormat = supportsListingDomains;
 
+export const supportsValidateUrl = supportsListingDomains;
+
 export const supportsQrCodeSizeInQuery = serverMatchesVersions({ minVersion: '2.5.0' });
 
 export const supportsShortUrlTitle = serverMatchesVersions({ minVersion: '2.6.0' });

test/short-urls/ShortUrlForm.test.tsx

@@ -3,32 +3,37 @@ import moment from 'moment';
 import { identity } from 'ramda';
 import { Mock } from 'ts-mockery';
 import { Input } from 'reactstrap';
-import { ShortUrlForm as createShortUrlForm } from '../../src/short-urls/ShortUrlForm';
+import { ShortUrlForm as createShortUrlForm, Mode } from '../../src/short-urls/ShortUrlForm';
 import DateInput from '../../src/utils/DateInput';
 import { ShortUrlData } from '../../src/short-urls/data';
+import { ReachableServer, SelectedServer } from '../../src/servers/data';
+import { SimpleCard } from '../../src/utils/SimpleCard';
 
 describe('<ShortUrlForm />', () => {
   let wrapper: ShallowWrapper;
   const TagsSelector = () => null;
   const createShortUrl = jest.fn();
-
-  beforeEach(() => {
-    const ShortUrlForm = createShortUrlForm(TagsSelector, () => null, () => null);
+  const createWrapper = (selectedServer: SelectedServer = null, mode: Mode = 'create') => {
+    const ShortUrlForm = createShortUrlForm(TagsSelector, () => null);
 
     wrapper = shallow(
       <ShortUrlForm
-        selectedServer={null}
-        mode="create"
+        selectedServer={selectedServer}
+        mode={mode}
         saving={false}
         initialState={Mock.of<ShortUrlData>({ validateUrl: true, findIfExists: false })}
         onSave={createShortUrl}
       />,
     );
-  });
+
+    return wrapper;
+  };
+
   afterEach(() => wrapper.unmount());
   afterEach(jest.clearAllMocks);
 
   it('saves short URL with data set in form controls', () => {
+    const wrapper = createWrapper();
     const validSince = moment('2017-01-01');
     const validUntil = moment('2017-01-06');
 
@@ -56,4 +61,25 @@ describe('<ShortUrlForm />', () => {
       validateUrl: true,
     });
   });
+
+  it.each([
+    [ null, 'create' as Mode, 4 ],
+    [ null, 'create-basic' as Mode, 0 ],
+    [ Mock.of<ReachableServer>({ version: '2.6.0' }), 'create' as Mode, 4 ],
+    [ Mock.of<ReachableServer>({ version: '2.5.0' }), 'create' as Mode, 4 ],
+    [ Mock.of<ReachableServer>({ version: '2.4.0' }), 'create' as Mode, 4 ],
+    [ Mock.of<ReachableServer>({ version: '2.3.0' }), 'create' as Mode, 4 ],
+    [ Mock.of<ReachableServer>({ version: '2.6.0' }), 'edit' as Mode, 4 ],
+    [ Mock.of<ReachableServer>({ version: '2.5.0' }), 'edit' as Mode, 3 ],
+    [ Mock.of<ReachableServer>({ version: '2.4.0' }), 'edit' as Mode, 3 ],
+    [ Mock.of<ReachableServer>({ version: '2.3.0' }), 'edit' as Mode, 2 ],
+  ])(
+    'renders expected amount of cards based on server capabilities and mode',
+    (selectedServer, mode, expectedAmountOfCards) => {
+      const wrapper = createWrapper(selectedServer, mode);
+      const cards = wrapper.find(SimpleCard);
+
+      expect(cards).toHaveLength(expectedAmountOfCards);
+    },
+  );
 });