Added domain input to create short url form

src/short-urls/CreateShortUrl.js

@@ -1,6 +1,6 @@
 import { faAngleDoubleDown as downIcon, faAngleDoubleUp as upIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { assoc, dissoc, isNil, pipe, replace, trim } from 'ramda';
+import { assoc, dissoc, isEmpty, isNil, pipe, replace, trim } from 'ramda';
 import React from 'react';
 import { Collapse } from 'reactstrap';
 import * as PropTypes from 'prop-types';
@@ -23,6 +23,7 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShort
     longUrl: '',
     tags: [],
     customSlug: undefined,
+    domain: undefined,
     validSince: undefined,
     validUntil: undefined,
     maxVisits: undefined,
@@ -89,15 +90,25 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShort
             <div className="row">
               <div className="col-sm-6">
                 {renderOptionalInput('customSlug', 'Custom slug')}
-                {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
               </div>
               <div className="col-sm-6">
+                {renderOptionalInput('domain', 'Domain', 'text')}
+              </div>
+            </div>
+
+            <div className="row">
+              <div className="col-sm-4">
+                {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
+              </div>
+              <div className="col-sm-4">
                 {renderDateInput('validSince', 'Enabled since...', { maxDate: this.state.validUntil })}
+              </div>
+              <div className="col-sm-4">
                 {renderDateInput('validUntil', 'Enabled until...', { minDate: this.state.validSince })}
               </div>
             </div>
 
-            <div className="mb-3 text-right">
+            <div className="mb-4 text-right">
               <Checkbox
                 className="mr-2"
                 checked={this.state.findIfExists}
@@ -119,7 +130,10 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShort
               &nbsp;
               {this.state.moreOptionsVisible ? 'Less' : 'More'} options
             </button>
-            <button className="btn btn-outline-primary float-right" disabled={shortUrlCreationResult.loading}>
+            <button
+              className="btn btn-outline-primary float-right"
+              disabled={shortUrlCreationResult.loading || isEmpty(this.state.longUrl)}
+            >
               {shortUrlCreationResult.loading ? 'Creating...' : 'Create'}
             </button>
           </div>

src/short-urls/UseExistingIfFoundInfoIcon.js

@@ -20,7 +20,7 @@ const renderInfoModal = (isOpen, toggle) => (
       <ul>
         <li>
           When only the long URL is provided: The most recent match will be returned, or a new short URL will be created
-          if none is found
+          if none is found.
         </li>
         <li>
           When long URL and custom slug are provided: Same as in previous case, but it will try to match the short URL
@@ -33,9 +33,6 @@ const renderInfoModal = (isOpen, toggle) => (
           all provided data. If any of them does not match, a new short URL will be created
         </li>
       </ul>
-      <blockquote className="use-existing-if-found-info-icon__modal-quote">
-        <b>Important:</b> This feature will be ignored while using a Shlink version older than v1.16.0.
-      </blockquote>
     </ModalBody>
   </Modal>
 );

test/short-urls/CreateShortUrl.test.js

@@ -32,6 +32,7 @@ describe('<CreateShortUrl />', () => {
     const urlInput = wrapper.find('.form-control-lg');
     const tagsInput = wrapper.find(TagsSelector);
     const customSlugInput = wrapper.find('#customSlug');
+    const domain = wrapper.find('#domain');
     const maxVisitsInput = wrapper.find('#maxVisits');
     const dateInputs = wrapper.find(DateInput);
     const validSinceInput = dateInputs.at(0);
@@ -40,6 +41,7 @@ describe('<CreateShortUrl />', () => {
     urlInput.simulate('change', { target: { value: 'https://long-domain.com/foo/bar' } });
     tagsInput.simulate('change', [ 'tag_foo', 'tag_bar' ]);
     customSlugInput.simulate('change', { target: { value: 'my-slug' } });
+    domain.simulate('change', { target: { value: 'example.com' } });
     maxVisitsInput.simulate('change', { target: { value: '20' } });
     validSinceInput.simulate('change', validSince);
     validUntilInput.simulate('change', validUntil);
@@ -53,6 +55,7 @@ describe('<CreateShortUrl />', () => {
         longUrl: 'https://long-domain.com/foo/bar',
         tags: [ 'tag_foo', 'tag_bar' ],
         customSlug: 'my-slug',
+        domain: 'example.com',
         validSince: validSince.format(),
         validUntil: validUntil.format(),
         maxVisits: '20',