Added title to short URL form

src/short-urls/ShortUrlForm.scss

@@ -1,6 +1,10 @@
 @import '../utils/base';
 
-.short-url-form .form-group:last-child,
+.short-url-form .card-body > .form-group:last-child,
 .short-url-form p:last-child {
   margin-bottom: 0;
 }
+
+.short-url-form .card {
+  height: 100%;
+}

src/short-urls/ShortUrlForm.tsx

@@ -1,10 +1,14 @@
 import { FC, useState } from 'react';
 import { InputType } from 'reactstrap/lib/Input';
-import { Button, FormGroup, Input } from 'reactstrap';
+import { Button, FormGroup, Input, Row } from 'reactstrap';
 import { isEmpty } from 'ramda';
 import * as m from 'moment';
 import DateInput, { DateInputProps } from '../utils/DateInput';
-import { supportsListingDomains, supportsSettingShortCodeLength } from '../utils/helpers/features';
+import {
+  supportsListingDomains,
+  supportsSettingShortCodeLength,
+  supportsShortUrlTitle,
+} from '../utils/helpers/features';
 import { SimpleCard } from '../utils/SimpleCard';
 import { handleEventPreventingDefault, hasValue } from '../utils/utils';
 import Checkbox from '../utils/Checkbox';
@@ -34,7 +38,7 @@ export const ShortUrlForm = (
   TagsSelector: FC<TagsSelectorProps>,
   ForServerVersion: FC<Versions>,
   DomainSelector: FC<DomainSelectorProps>,
-): FC<ShortUrlFormProps> => ({ mode, saving, onSave, initialState, selectedServer, children }) => {
+): FC<ShortUrlFormProps> => ({ mode, saving, onSave, initialState, selectedServer, children }) => { // eslint-disable-line complexity
   const [ shortUrlData, setShortUrlData ] = useState(initialState);
   const changeTags = (tags: string[]) => setShortUrlData({ ...shortUrlData, tags: tags.map(normalizeTag) });
   const reset = () => setShortUrlData(initialState);
@@ -88,6 +92,8 @@ export const ShortUrlForm = (
 
   const showDomainSelector = supportsListingDomains(selectedServer);
   const disableShortCodeLength = !supportsSettingShortCodeLength(selectedServer);
+  const supportsTitle = supportsShortUrlTitle(selectedServer);
+  const isEdit = mode === 'edit';
 
   return (
     <form className="short-url-form" onSubmit={submit}>
@@ -98,27 +104,38 @@ export const ShortUrlForm = (
             {basicComponents}
           </SimpleCard>
 
-          <div className="row">
+          <Row>
             <div className="col-sm-6 mb-3">
               <SimpleCard title="Customize the short URL">
-                {renderOptionalInput('customSlug', 'Custom slug', 'text', {
+                {supportsTitle && renderOptionalInput('title', 'Title')}
-                  disabled: hasValue(shortUrlData.shortCodeLength),
+                {!isEdit && (
-                })}
+                  <>
-                {renderOptionalInput('shortCodeLength', 'Short code length', 'number', {
+                    <Row>
-                  min: 4,
+                      <div className="col-lg-6">
-                  disabled: disableShortCodeLength || hasValue(shortUrlData.customSlug),
+                        {renderOptionalInput('customSlug', 'Custom slug', 'text', {
-                  ...disableShortCodeLength && {
+                          disabled: hasValue(shortUrlData.shortCodeLength),
-                    title: 'Shlink 2.1.0 or higher is required to be able to provide the short code length',
+                        })}
-                  },
+                      </div>
-                })}
+                      <div className="col-lg-6">
-                {!showDomainSelector && renderOptionalInput('domain', 'Domain', 'text')}
+                        {renderOptionalInput('shortCodeLength', 'Short code length', 'number', {
-                {showDomainSelector && (
+                          min: 4,
-                  <FormGroup>
+                          disabled: disableShortCodeLength || hasValue(shortUrlData.customSlug),
-                    <DomainSelector
+                          ...disableShortCodeLength && {
-                      value={shortUrlData.domain}
+                            title: 'Shlink 2.1.0 or higher is required to be able to provide the short code length',
-                      onChange={(domain?: string) => setShortUrlData({ ...shortUrlData, domain })}
+                          },
-                    />
+                        })}
-                  </FormGroup>
+                      </div>
+                    </Row>
+                    {!showDomainSelector && renderOptionalInput('domain', 'Domain', 'text')}
+                    {showDomainSelector && (
+                      <FormGroup>
+                        <DomainSelector
+                          value={shortUrlData.domain}
+                          onChange={(domain?: string) => setShortUrlData({ ...shortUrlData, domain })}
+                        />
+                      </FormGroup>
+                    )}
+                  </>
                 )}
               </SimpleCard>
             </div>
@@ -130,13 +147,15 @@ export const ShortUrlForm = (
                 {renderDateInput('validUntil', 'Enabled until...', { minDate: shortUrlData.validSince as m.Moment | undefined })}
               </SimpleCard>
             </div>
-          </div>
+          </Row>
 
           <SimpleCard title="Extra validations" className="mb-3">
-            <p>
+            {!isEdit && (
-              Make sure the long URL is valid, or ensure an existing short URL is returned if it matches all
+              <p>
-              provided data.
+                Make sure the long URL is valid, or ensure an existing short URL is returned if it matches all
-            </p>
+                provided data.
+              </p>
+            )}
             <ForServerVersion minVersion="2.4.0">
               <p>
                 <Checkbox
@@ -148,17 +167,19 @@ export const ShortUrlForm = (
                 </Checkbox>
               </p>
             </ForServerVersion>
-            <p>
+            {!isEdit && (
-              <Checkbox
+              <p>
-                inline
+                <Checkbox
-                className="mr-2"
+                  inline
-                checked={shortUrlData.findIfExists}
+                  className="mr-2"
-                onChange={(findIfExists) => setShortUrlData({ ...shortUrlData, findIfExists })}
+                  checked={shortUrlData.findIfExists}
-              >
+                  onChange={(findIfExists) => setShortUrlData({ ...shortUrlData, findIfExists })}
-                Use existing URL if found
+                >
-              </Checkbox>
+                  Use existing URL if found
-              <UseExistingIfFoundInfoIcon />
+                </Checkbox>
-            </p>
+                <UseExistingIfFoundInfoIcon />
+              </p>
+            )}
           </SimpleCard>
         </>
       )}