Offer configured sources by label when adding accounts

The add-account service picker is now constrained to the game's
configured sources (no free text), each offered by its label (falling
back to the source key). Source editor tabs show the label too, so an
RSS-keyed source labelled e.g. Thursdoid reads as Thursdoid everywhere.
queue-users resolves the picked value back to the source by label.

Author: oskarrisberg

src/AddService.jsx

@@ -89,14 +89,14 @@ class AddService extends React.Component {
 
         if ( this.state.isOpen ) {
             returnNodes.push(
+                // Constrained (no freeSolo): an account can only be attached to a
+                // service the game has a configured source for, so it can't be
+                // created with a service nothing will index. The value comes from
+                // onChange (a picked option), not onInputChange (free text).
                 <Autocomplete
-                    filterOptions = { ( options ) => {
-                        return options;
-                    } }
-                    freeSolo
                     fullWidth
                     key = { 'add-account-service' }
-                    onInputChange = { ( event, value ) => {
+                    onChange = { ( event, value ) => {
                         this.handleServiceChange( value );
                     } }
                     openOnFocus
@@ -111,6 +111,7 @@ class AddService extends React.Component {
                             />
                         );
                     } }
+                    value = { this.state.service || null }
                 />
             );
             returnNodes.push(
@@ -141,6 +142,7 @@ class AddService extends React.Component {
                 >
                     <Button
                         color = { 'primary' }
+                        disabled = { !this.state.service || !this.state.identifier }
                         key = { 'add-account-save-button' }
                         onClick = { this.handleSave }
                         style = { styles.saveAccountButton }

src/GameSources.jsx

@@ -1327,12 +1327,19 @@ class GameSources extends React.Component {
                             variant = { 'scrollable' }
                         >
                             { services.map( ( service ) => {
+                                // Show the source's `label` (its human name, e.g.
+                                // an 'RSS'-keyed source labelled 'Thursdoid') on the
+                                // tab, falling back to the object key when unlabelled
+                                // — matching what the "Add account" picker offers and
+                                // what queue-users resolves accounts against.
+                                const tabLabel = this.props.sources[ service ].label || service;
+
                                 return (
                                     <Tab
                                         icon = { this.renderSourceIcon( service ) }
                                         iconPosition = { 'start' }
                                         key = { service }
-                                        label = { service }
+                                        label = { tabLabel }
                                         sx = { {
                                             minHeight: 'auto',
                                             // Disabled sources read at a glance as dimmed tabs.

src/Games.jsx

@@ -195,14 +195,24 @@ class Games extends React.Component {
 
         api.get( `/${ useId }/developers` )
             .then( ( developers ) => {
-                const services = [];
                 const groups = [];
 
-                for ( let i = 0; i < developers.data.length; i = i + 1 ) {
-                    for ( let accountIndex = 0; accountIndex < developers.data[ i ].accounts.length; accountIndex = accountIndex + 1 ) {
-                        services.push( developers.data[ i ].accounts[ accountIndex ].service );
-                    }
+                // The "Add account" service picker offers only the game's
+                // configured sources, so an account can't be attached to a service
+                // nothing will index. Each source is offered by its `label` (its
+                // human name, e.g. an 'RSS'-keyed source labelled 'Thursdoid'),
+                // falling back to the config.sources key when it has no label.
+                // queue-users resolves this value back to the source (by label,
+                // then key) when fanning out jobs.
+                const game = this.state.games.find( ( candidate ) => {
+                    return candidate.identifier === useId;
+                } );
+                const sources = ( game && game.config && game.config.sources ) || {};
+                const services = Object.keys( sources ).map( ( sourceKey ) => {
+                    return ( sources[ sourceKey ] && sources[ sourceKey ].label ) || sourceKey;
+                } );
 
+                for ( let i = 0; i < developers.data.length; i = i + 1 ) {
                     if ( developers.data[ i ].group ) {
                         groups.push( developers.data[ i ].group );
                     }