New: HintedSelectInput Component

Co-Authored-By: taloth <taloth@users.noreply.github.com>

frontend/src/Settings/DownloadClients/RemotePathMappings/EditRemotePathMappingModalContent.js

@@ -61,7 +61,7 @@ function EditRemotePathMappingModalContent(props) {
                 <FormLabel>Host</FormLabel>
 
                 <FormInputGroup
-                  type={inputTypes.AUTO_COMPLETE}
+                  type={inputTypes.SELECT}
                   name="host"
                   helpText="The same host you specified for the remote Download Client"
                   {...host}
@@ -140,7 +140,7 @@ EditRemotePathMappingModalContent.propTypes = {
   isSaving: PropTypes.bool.isRequired,
   saveError: PropTypes.object,
   item: PropTypes.shape(remotePathMappingShape).isRequired,
-  downloadClientHosts: PropTypes.arrayOf(PropTypes.string).isRequired,
+  downloadClientHosts: PropTypes.arrayOf(PropTypes.object).isRequired,
   onInputChange: PropTypes.func.isRequired,
   onSavePress: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired,

frontend/src/Settings/DownloadClients/RemotePathMappings/EditRemotePathMappingModalContentConnector.js

@@ -16,17 +16,27 @@ const newRemotePathMapping = {
 const selectDownloadClientHosts = createSelector(
   (state) => state.settings.downloadClients.items,
   (downloadClients) => {
-    return downloadClients.reduce((acc, downloadClient) => {
+    const hosts = downloadClients.reduce((acc, downloadClient) => {
+      const name = downloadClient.name;
       const host = downloadClient.fields.find((field) => {
         return field.name === 'host';
       });
 
-      if (host && !acc.includes(host.value)) {
-        acc.push(host.value);
+      if (host) {
+        const group = acc[host.value] = acc[host.value] || [];
+        group.push(name);
       }
 
       return acc;
-    }, []);
+    }, {});
+
+    return Object.keys(hosts).map((host) => {
+      return {
+        key: host,
+        value: host,
+        hint: `${hosts[host].join(', ')}`
+      };
+    });
   }
 );