Add list selection on antenna setting page

app/controllers/api/v1/antennas_controller.rb

@@ -42,6 +42,6 @@ class Api::V1::AntennasController < Api::BaseController
   end
 
   def antenna_params
-    params.permit(:title, :stl, :with_media_only, :ignore_reblog)
+    params.permit(:title, :list_id, :stl, :with_media_only, :ignore_reblog)
   end
 end

app/javascript/mastodon/actions/antennas.js

@@ -151,10 +151,10 @@ export const createAntennaFail = error => ({
   error,
 });
 
-export const updateAntenna = (id, title, shouldReset, stl, with_media_only, ignore_reblog) => (dispatch, getState) => {
+export const updateAntenna = (id, title, shouldReset, list_id, stl, with_media_only, ignore_reblog) => (dispatch, getState) => {
   dispatch(updateAntennaRequest(id));
 
-  api(getState).put(`/api/v1/antennas/${id}`, { title, stl, with_media_only, ignore_reblog }).then(({ data }) => {
+  api(getState).put(`/api/v1/antennas/${id}`, { title, list_id, stl, with_media_only, ignore_reblog }).then(({ data }) => {
     dispatch(updateAntennaSuccess(data));
 
     if (shouldReset) {

app/javascript/mastodon/features/antenna_setting/index.jsx

@@ -8,10 +8,12 @@ import { Helmet } from 'react-helmet';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
+import Select, { NonceProvider } from 'react-select';
 import Toggle from 'react-toggle';
 
 import { fetchAntenna, deleteAntenna, updateAntenna } from 'mastodon/actions/antennas';
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
+import { fetchLists } from 'mastodon/actions/lists';
 import { openModal } from 'mastodon/actions/modal';
 import Button from 'mastodon/components/button';
 import Column from 'mastodon/components/column';
@@ -24,10 +26,13 @@ const messages = defineMessages({
   deleteMessage: { id: 'confirmations.delete_antenna.message', defaultMessage: 'Are you sure you want to permanently delete this antenna?' },
   deleteConfirm: { id: 'confirmations.delete_antenna.confirm', defaultMessage: 'Delete' },
   editAccounts: { id: 'antennas.edit_accounts', defaultMessage: 'Edit accounts' },
+  noOptions: { id: 'antennas.select.no_options_message', defaultMessage: 'Empty lists' },
+  placeholder: { id: 'antennas.select.placeholder', defaultMessage: 'Select list' },
 });
 
 const mapStateToProps = (state, props) => ({
   antenna: state.getIn(['antennas', props.params.id]),
+  lists: state.get('lists'),
 });
 
 class AntennaSetting extends PureComponent {
@@ -42,6 +47,7 @@ class AntennaSetting extends PureComponent {
     columnId: PropTypes.string,
     multiColumn: PropTypes.bool,
     antenna: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]),
+    lists: ImmutablePropTypes.list,
     intl: PropTypes.object.isRequired,
   };
 
@@ -70,6 +76,7 @@ class AntennaSetting extends PureComponent {
     const { id } = this.props.params;
 
     dispatch(fetchAntenna(id));
+    dispatch(fetchLists());
   }
 
   UNSAFE_componentWillReceiveProps (nextProps) {
@@ -121,23 +128,31 @@ class AntennaSetting extends PureComponent {
   onStlToggle = ({ target }) => {
     const { dispatch } = this.props;
     const { id } = this.props.params;
-    dispatch(updateAntenna(id, undefined, false, target.checked, undefined, undefined));
+    dispatch(updateAntenna(id, undefined, false, undefined, target.checked, undefined, undefined));
   };
 
   onMediaOnlyToggle = ({ target }) => {
     const { dispatch } = this.props;
     const { id } = this.props.params;
-    dispatch(updateAntenna(id, undefined, false, undefined, target.checked, undefined));
+    dispatch(updateAntenna(id, undefined, false, undefined, undefined, target.checked, undefined));
   };
 
   onIgnoreReblogToggle = ({ target }) => {
     const { dispatch } = this.props;
     const { id } = this.props.params;
-    dispatch(updateAntenna(id, undefined, false, undefined, undefined, target.checked));
+    dispatch(updateAntenna(id, undefined, false, undefined, undefined, undefined, target.checked));
   };
 
+  onSelect = value => {
+    const { dispatch } = this.props;
+    const { id } = this.props.params;
+    dispatch(updateAntenna(id, undefined, false, value.value, undefined, undefined, undefined));
+  };
+
+  noOptionsMessage = () => this.props.intl.formatMessage(messages.noOptions);
+
   render () {
-    const { columnId, multiColumn, antenna, intl } = this.props;
+    const { columnId, multiColumn, antenna, lists, intl } = this.props;
     const { id } = this.props.params;
     const pinned = !!columnId;
     const title  = antenna ? antenna.get('title') : id;
@@ -183,12 +198,16 @@ class AntennaSetting extends PureComponent {
     let stlAlert;
     if (isStl) {
       stlAlert = (
-        <div class='antenna-setting'>
+        <div className='antenna-setting'>
           <p><FormattedMessage id='antennas.in_stl_mode' defaultMessage='This antenna is in STL mode.' /></p>
         </div>
       );
     }
 
+    const listOptions = lists.toArray().map((list) => {
+      return { value: list[1].get('id'), label: list[1].get('title') }
+    });
+
     return (
       <Column bindToDocument={!multiColumn} ref={this.setRef} label={title}>
         <ColumnHeader
@@ -221,8 +240,7 @@ class AntennaSetting extends PureComponent {
         </ColumnHeader>
 
         {stlAlert}
-        {!isStl && (
+        <div className='antenna-setting'>
-          <div class='antenna-setting'>
           {antenna.get('list') ? (
             <p><FormattedMessage id='antennas.related_list' defaultMessage='This antenna is related to {listTitle}.' values={{ listTitle: antenna.getIn(['list', 'title']) }} /></p>
           ) : (
@@ -234,14 +252,31 @@ class AntennaSetting extends PureComponent {
             </>
           )}
 
+          <NonceProvider nonce={document.querySelector('meta[name=style-nonce]').content} cacheKey='lists'>
+            <Select
+              value={{ value: antenna.getIn(['list', 'id']), label: antenna.getIn(['list', 'title']) }}
+              options={listOptions}
+              noOptionsMessage={this.noOptionsMessage}
+              onChange={this.onSelect}
+              className='column-select__container'
+              classNamePrefix='column-select'
+              name='lists'
+              placeholder={this.props.intl.formatMessage(messages.placeholder)}
+              defaultOptions
+            />
+          </NonceProvider>
+
+          {!isStl && (
+            <>
               <h3><FormattedMessage id='antennas.accounts' defaultMessage='{count} accounts' values={{ count: antenna.get('accounts_count') }} /></h3>
               <Button text={intl.formatMessage(messages.editAccounts)} onClick={this.handleEditClick} />
 
               <h3><FormattedMessage id='antennas.domains' defaultMessage='{count} domains' values={{ count: antenna.get('domains_count') }} /></h3>
               <h3><FormattedMessage id='antennas.tags' defaultMessage='{count} tags' values={{ count: antenna.get('tags_count') }} /></h3>
               <h3><FormattedMessage id='antennas.keywords' defaultMessage='{count} keywords' values={{ count: antenna.get('keywords_count') }} /></h3>
-          </div>
+            </>
           )}
+        </div>
 
         <Helmet>
           <title>{title}</title>