From 138e40315ddab412f69240c34d586fbeb63cdfb5 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 19 Dec 2021 12:52:49 +0100
Subject: [PATCH] Added custom slug field to the basic creation form in
 Overview page

---
 CHANGELOG.md                    |  1 +
 src/short-urls/ShortUrlForm.tsx | 25 +++++++++++++++++--------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9617821c..3cb6cea1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ## [Unreleased]
 ### Added
 * [#535](https://github.com/shlinkio/shlink-web-client/pull/535) Allowed editing default domain redirects when consuming Shlink 2.10 or newer.
+* [#531](https://github.com/shlinkio/shlink-web-client/pull/531) Added custom slug field to the basic creation form in the Overview page.
 
 ### Changed
 * [#534](https://github.com/shlinkio/shlink-web-client/pull/534) Updated axios.
diff --git a/src/short-urls/ShortUrlForm.tsx b/src/short-urls/ShortUrlForm.tsx
index 64caeec9..a8634173 100644
--- a/src/short-urls/ShortUrlForm.tsx
+++ b/src/short-urls/ShortUrlForm.tsx
@@ -41,6 +41,7 @@ export const ShortUrlForm = (
 ): FC<ShortUrlFormProps> => ({ mode, saving, onSave, initialState, selectedServer }) => {
   const [ shortUrlData, setShortUrlData ] = useState(initialState);
   const isEdit = mode === 'edit';
+  const isBasicMode = mode === 'create-basic';
   const hadTitleOriginally = hasValue(initialState.title);
   const changeTags = (tags: string[]) => setShortUrlData({ ...shortUrlData, tags: tags.map(normalizeTag) });
   const reset = () => setShortUrlData(initialState);
@@ -66,8 +67,14 @@ export const ShortUrlForm = (
     setShortUrlData(initialState);
   }, [ initialState ]);
 
-  const renderOptionalInput = (id: NonDateFields, placeholder: string, type: InputType = 'text', props = {}) => (
-    <FormGroup>
+  const renderOptionalInput = (
+    id: NonDateFields,
+    placeholder: string,
+    type: InputType = 'text',
+    props = {},
+    fromGroupProps = {},
+  ) => (
+    <FormGroup {...fromGroupProps}>
       <Input
         id={id}
         type={type}
@@ -101,10 +108,12 @@ export const ShortUrlForm = (
           onChange={(e) => setShortUrlData({ ...shortUrlData, longUrl: e.target.value })}
         />
       </FormGroup>
-
-      <FormGroup>
-        <TagsSelector selectedTags={shortUrlData.tags ?? []} onChange={changeTags} />
-      </FormGroup>
+      <Row>
+        {isBasicMode && renderOptionalInput('customSlug', 'Custom slug', 'text', { bsSize: 'lg' }, { className: 'col-lg-6' })}
+        <FormGroup className={isBasicMode ? 'col-lg-6' : 'col-12 mb-0'}>
+          <TagsSelector selectedTags={shortUrlData.tags ?? []} onChange={changeTags} />
+        </FormGroup>
+      </Row>
     </>
   );
 
@@ -118,8 +127,8 @@ export const ShortUrlForm = (
 
   return (
     <form className="short-url-form" onSubmit={submit}>
-      {mode === 'create-basic' && basicComponents}
-      {mode !== 'create-basic' && (
+      {isBasicMode && basicComponents}
+      {!isBasicMode && (
         <>
           <SimpleCard title="Basic options" className="mb-3">
             {basicComponents}