Created component to allow selecting from existing domains list

src/short-urls/CreateShortUrl.tsx

@@ -13,6 +13,7 @@ import { useToggle } from '../utils/helpers/hooks';
 import { isReachableServer, SelectedServer } from '../servers/data';
 import { formatIsoDate } from '../utils/helpers/date';
 import { TagsSelectorProps } from '../tags/helpers/TagsSelector';
+import { DomainsDropdownProps } from '../domains/DomainsDropdown';
 import { ShortUrlData } from './data';
 import { ShortUrlCreation } from './reducers/shortUrlCreation';
 import UseExistingIfFoundInfoIcon from './UseExistingIfFoundInfoIcon';
@@ -46,6 +47,7 @@ const CreateShortUrl = (
   TagsSelector: FC<TagsSelectorProps>,
   CreateShortUrlResult: FC<CreateShortUrlResultProps>,
   ForServerVersion: FC<Versions>,
+  DomainsDropdown: FC<DomainsDropdownProps>,
 ) => ({ createShortUrl, shortUrlCreationResult, resetCreateShortUrl, selectedServer }: CreateShortUrlProps) => {
   const [ shortUrlCreation, setShortUrlCreation ] = useState(initialState);
   const [ moreOptionsVisible, toggleMoreOptionsVisible ] = useToggle();
@@ -87,6 +89,7 @@ const CreateShortUrl = (
 
   const currentServerVersion = isReachableServer(selectedServer) ? selectedServer.version : '';
   const disableDomain = !versionMatch(currentServerVersion, { minVersion: '1.19.0-beta.1' });
+  const showDomainsDropdown = versionMatch(currentServerVersion, { minVersion: '2.4.0' });
   const disableShortCodeLength = !versionMatch(currentServerVersion, { minVersion: '2.1.0' });
 
   return (
@@ -123,10 +126,18 @@ const CreateShortUrl = (
             })}
           </div>
           <div className="col-sm-4">
-            {renderOptionalInput('domain', 'Domain', 'text', {
+            {!showDomainsDropdown && renderOptionalInput('domain', 'Domain', 'text', {
               disabled: disableDomain,
               ...disableDomain && { title: 'Shlink 1.19.0 or higher is required to be able to provide the domain' },
             })}
+            {showDomainsDropdown && (
+              <FormGroup>
+                <DomainsDropdown
+                  value={shortUrlCreation.domain}
+                  onChange={(domain?: string) => setShortUrlCreation({ ...shortUrlCreation, domain })}
+                />
+              </FormGroup>
+            )}
           </div>
         </div>
 

src/short-urls/services/provideServices.ts

@@ -51,7 +51,14 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   );
   bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'useStateFlagTimeout');
 
-  bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'TagsSelector', 'CreateShortUrlResult', 'ForServerVersion');
+  bottle.serviceFactory(
+    'CreateShortUrl',
+    CreateShortUrl,
+    'TagsSelector',
+    'CreateShortUrlResult',
+    'ForServerVersion',
+    'DomainsDropdown',
+  );
   bottle.decorator(
     'CreateShortUrl',
     connect([ 'shortUrlCreationResult', 'selectedServer' ], [ 'createShortUrl', 'resetCreateShortUrl' ]),