Rough out import follows page and actions

app/soapbox/actions/import_follows.js

@@ -0,0 +1,18 @@
+import api from '../api';
+
+export const IMPORT_FOLLOWS_REQUEST = 'IMPORT_FOLLOWS_REQUEST';
+export const IMPORT_FOLLOWS_SUCCESS = 'IMPORT_FOLLOWS_SUCCESS';
+export const IMPORT_FOLLOWS_FAIL    = 'IMPORT_FOLLOWS_FAIL';
+
+export function importFollows(params) {
+  return (dispatch, getState) => {
+    dispatch({ type: IMPORT_FOLLOWS_REQUEST });
+    return api(getState)
+      .post('/api/pleroma/follow_import', params)
+      .then(response => {
+        dispatch({ type: IMPORT_FOLLOWS_SUCCESS, config: response.data });
+      }).catch(error => {
+        dispatch({ type: IMPORT_FOLLOWS_FAIL, error });
+      });
+  };
+}

app/soapbox/components/sidebar_menu.js

@@ -29,6 +29,7 @@ const messages = defineMessages({
   filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
   admin_settings: { id: 'navigation_bar.admin_settings', defaultMessage: 'Admin settings' },
   soapbox_config: { id: 'navigation_bar.soapbox_config', defaultMessage: 'Soapbox config' },
+  import_follows: { id: 'navigation_bar.import_follows', defaultMessage: 'Import follows' },
   security: { id: 'navigation_bar.security', defaultMessage: 'Security' },
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
   lists: { id: 'column.lists', defaultMessage: 'Lists' },
@@ -184,6 +185,10 @@ class SidebarMenu extends ImmutablePureComponent {
                 <Icon id='lock' />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.security)}</span>
               </NavLink>
+              <NavLink className='sidebar-menu-item' to='/settings/import' onClick={onClose}>
+                <Icon id='community' />
+                <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.import_follows)}</span>
+              </NavLink>
             </div>
 
             <div className='sidebar-menu__section'>

app/soapbox/features/compose/components/action_bar.js

@@ -20,6 +20,7 @@ const messages = defineMessages({
   filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
   admin_settings: { id: 'navigation_bar.admin_settings', defaultMessage: 'Admin settings' },
   soapbox_config: { id: 'navigation_bar.soapbox_config', defaultMessage: 'Soapbox config' },
+  import_follows: { id: 'navigation_bar.import_follows', defaultMessage: 'Import follows' },
   security: { id: 'navigation_bar.security', defaultMessage: 'Security' },
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
   keyboard_shortcuts: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Hotkeys' },
@@ -85,6 +86,7 @@ class ActionBar extends React.PureComponent {
     }
     menu.push({ text: intl.formatMessage(messages.preferences), to: '/settings/preferences' });
     menu.push({ text: intl.formatMessage(messages.security), to: '/auth/edit' });
+    menu.push({ text: intl.formatMessage(messages.import_follows), to: '/settings/import' });
     menu.push({ text: intl.formatMessage(messages.logout), to: '/auth/sign_out', action: onClickLogOut });
 
     return (

app/soapbox/features/import_follows/index.js

@@ -0,0 +1,352 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import PropTypes from 'prop-types';
+// import ImmutablePropTypes from 'react-immutable-proptypes';
+import Column from '../ui/components/column';
+import {
+  SimpleForm,
+  FieldsGroup,
+  // TextInput,
+  // Checkbox,
+  FileChooser,
+  // SimpleTextarea,
+  // ColorWithPicker,
+  // FileChooserLogo,
+} from 'soapbox/features/forms';
+// import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
+import { importFollows } from 'soapbox/actions/import_follows';
+// import Icon from 'soapbox/components/icon';
+// import { defaultConfig } from 'soapbox/actions/soapbox';
+import { uploadMedia } from 'soapbox/actions/media';
+
+const messages = defineMessages({
+  heading: { id: 'column.import_follows', defaultMessage: 'Import follows' },
+  // copyrightFooterLabel: { id: 'soapbox_config.copyright_footer.meta_fields.label_placeholder', defaultMessage: 'Copyright footer' },
+  // promoItemIcon: { id: 'soapbox_config.promo_panel.meta_fields.icon_placeholder', defaultMessage: 'Icon' },
+  // promoItemLabel: { id: 'soapbox_config.promo_panel.meta_fields.label_placeholder', defaultMessage: 'Label' },
+  // promoItemURL: { id: 'soapbox_config.promo_panel.meta_fields.url_placeholder', defaultMessage: 'URL' },
+  // homeFooterItemLabel: { id: 'soapbox_config.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' },
+  // homeFooterItemURL: { id: 'soapbox_config.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' },
+  // customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' },
+  // rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Raw JSON data' },
+  // rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Advanced: Edit the settings data directly.' },
+});
+
+// const templates = {
+//   promoPanelItem: ImmutableMap({ icon: '', text: '', url: '' }),
+//   footerItem: ImmutableMap({ title: '', url: '' }),
+// };
+
+const mapStateToProps = state => ({
+  follows: state.get('follows'),
+});
+
+export default @connect(mapStateToProps)
+@injectIntl
+class ImportFollows extends ImmutablePureComponent {
+
+  static propTypes = {
+    follows: PropTypes.string,
+    dispatch: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  state = {
+    isLoading: false,
+    follows: this.props.follows,
+    // rawJSON: JSON.stringify(this.props.soapbox, null, 2),
+    // jsonValid: true,
+  }
+
+  setConfig = (value) => {
+    // const { follows } = this.state;
+    // const config = soapbox.setIn(path, value);
+    this.setState({ follows: value });
+  };
+
+  putConfig = config => {
+    this.setState({ soapbox: config, jsonValid: true });
+  };
+
+  getParams = () => {
+    const { soapbox } = this.state;
+    return {
+      configs: [{
+        group: ':pleroma',
+        key: ':frontend_configurations',
+        value: [{
+          tuple: [':soapbox_fe', soapbox.toJS()],
+        }],
+      }],
+    };
+  }
+
+  handleSubmit = (event) => {
+    const { dispatch } = this.props;
+    dispatch(importFollows(this.getParams())).then(() => {
+      this.setState({ isLoading: false });
+    }).catch((error) => {
+      this.setState({ isLoading: false });
+    });
+    this.setState({ isLoading: true });
+    event.preventDefault();
+  }
+
+  handleChange = (path, getValue) => {
+    return e => {
+      this.setConfig(path, getValue(e));
+    };
+  };
+
+  handleFileChange = path => {
+    return e => {
+      const data = new FormData();
+      data.append('file', e.target.files[0]);
+      this.props.dispatch(uploadMedia(data)).then(({ data }) => {
+        this.handleChange(path, e => data.url)(e);
+      }).catch(() => {});
+    };
+  };
+
+  handleAddItem = (path, template) => {
+    return e => {
+      this.setConfig(
+        path,
+        this.getSoapboxConfig().getIn(path, ImmutableList()).push(template),
+      );
+    };
+  };
+
+  handleDeleteItem = path => {
+    return e => {
+      const soapbox = this.state.soapbox.deleteIn(path);
+      this.setState({ soapbox });
+    };
+  };
+
+  handleItemChange = (path, key, field, template) => {
+    return this.handleChange(
+      path, (e) =>
+        template
+          .merge(field)
+          .set(key, e.target.value)
+    );
+  };
+
+  handlePromoItemChange = (index, key, field) => {
+    return this.handleItemChange(
+      ['promoPanel', 'items', index], key, field, templates.promoPanelItem
+    );
+  };
+
+  handleHomeFooterItemChange = (index, key, field) => {
+    return this.handleItemChange(
+      ['navlinks', 'homeFooter', index], key, field, templates.footerItem
+    );
+  };
+
+  handleEditJSON = e => {
+    this.setState({ rawJSON: e.target.value });
+  }
+
+  getSoapboxConfig = () => {
+    return defaultConfig.mergeDeep(this.state.soapbox);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.soapbox !== this.props.soapbox) {
+      this.putConfig(this.props.soapbox);
+    }
+
+    if (prevState.soapbox !== this.state.soapbox) {
+      this.setState({ rawJSON: JSON.stringify(this.state.soapbox, null, 2) });
+    }
+
+    if (prevState.rawJSON !== this.state.rawJSON) {
+      try {
+        const data = fromJS(JSON.parse(this.state.rawJSON));
+        this.putConfig(data);
+      } catch {
+        this.setState({ jsonValid: false });
+      }
+    }
+  }
+
+  render() {
+    const { intl } = this.props;
+    const soapbox = this.getSoapboxConfig();
+
+    return (
+      <Column icon='cog' heading={intl.formatMessage(messages.heading)} backBtnSlim>
+        <SimpleForm onSubmit={this.handleSubmit}>
+          <fieldset disabled={this.state.isLoading}>
+            <FieldsGroup>
+              <div className='fields-row file-picker'>
+                <div className='fields-row__column fields-row__column-6'>
+                  <img src={soapbox.get('banner')} />
+                </div>
+                <div className='fields-row__column fields-group fields-row__column-6'>
+                  <FileChooser
+                    label={<FormattedMessage id='soapbox_config.fields.banner_label' defaultMessage='Banner' />}
+                    name='banner'
+                    hint={<FormattedMessage id='soapbox_config.hints.banner' defaultMessage='PNG, GIF or JPG. At most 2 MB. Will be displayed to 400x400px' />}
+                    onChange={this.handleFileChange(['banner'])}
+                  />
+                </div>
+              </div>
+            </FieldsGroup>
+            <FieldsGroup>
+              <div className='fields-row__column fields-group'>
+                <ColorWithPicker
+                  buttonId='brand_color'
+                  label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}
+                  value={soapbox.get('brandColor')}
+                  onChange={this.handleChange(['brandColor'], (e) => e.hex)}
+                />
+              </div>
+            </FieldsGroup>
+            <FieldsGroup>
+              <Checkbox
+                label={<FormattedMessage id='soapbox_config.fields.patron_enabled_label' defaultMessage='Patron module' />}
+                hint={<FormattedMessage id='soapbox_config.hints.patron_enabled' defaultMessage='Enables display of Patron module.  Requires installation of Patron module.' />}
+                name='patron'
+                checked={soapbox.getIn(['extensions', 'patron', 'enabled'])}
+                onChange={this.handleChange(
+                  ['extensions', 'patron', 'enabled'], (e) => e.checked,
+                )}
+              />
+            </FieldsGroup>
+            <FieldsGroup>
+              <TextInput
+                name='copyright'
+                label={intl.formatMessage(messages.copyrightFooterLabel)}
+                placeholder={intl.formatMessage(messages.copyrightFooterLabel)}
+                value={soapbox.get('copyright')}
+                onChange={this.handleChange(['copyright'], (e) => e.target.value)}
+              />
+            </FieldsGroup>
+            <FieldsGroup>
+              <div className='fields-row__column fields-group'>
+                <div className='input with_block_label'>
+                  <label><FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>
+                  <span className='hint'>
+                    <FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the left panel of the timelines page.' />
+                  </span>
+                  <span className='hint'>
+                    <FormattedMessage id='soapbox_config.hints.promo_panel_icons' defaultMessage='{ link }' values={{ link: <a target='_blank' href='https://forkaweso.me/Fork-Awesome/icons/'>Soapbox Icons List</a> }} />
+                  </span>
+                  {
+                    soapbox.getIn(['promoPanel', 'items']).map((field, i) => (
+                      <div className='row' key={i}>
+                        <TextInput
+                          label={intl.formatMessage(messages.promoItemIcon)}
+                          placeholder={intl.formatMessage(messages.promoItemIcon)}
+                          value={field.get('icon')}
+                          onChange={this.handlePromoItemChange(i, 'icon', field)}
+                        />
+                        <TextInput
+                          label={intl.formatMessage(messages.promoItemLabel)}
+                          placeholder={intl.formatMessage(messages.promoItemLabel)}
+                          value={field.get('text')}
+                          onChange={this.handlePromoItemChange(i, 'text', field)}
+                        />
+                        <TextInput
+                          label={intl.formatMessage(messages.promoItemURL)}
+                          placeholder={intl.formatMessage(messages.promoItemURL)}
+                          value={field.get('url')}
+                          onChange={this.handlePromoItemChange(i, 'url', field)}
+                        />
+                        <Icon id='times-circle' onClick={this.handleDeleteItem(['promoPanel', 'items', i])} />
+                      </div>
+                    ))
+                  }
+                  <div className='actions'>
+                    <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['promoPanel', 'items'], templates.promoPanelItem)}>
+                      <Icon id='plus-circle' />
+                      <FormattedMessage id='soapbox_config.fields.promo_panel.add' defaultMessage='Add new Promo panel item' />
+                    </div>
+                  </div>
+                </div>
+                <div className='input with_block_label'>
+                  <label><FormattedMessage id='soapbox_config.fields.home_footer_fields_label' defaultMessage='Home footer items' /></label>
+                  <span className='hint'>
+                    <FormattedMessage id='soapbox_config.hints.home_footer_fields' defaultMessage='You can have custom defined links displayed on the footer of your static pages' />
+                  </span>
+                  {
+                    soapbox.getIn(['navlinks', 'homeFooter']).map((field, i) => (
+                      <div className='row' key={i}>
+                        <TextInput
+                          label={intl.formatMessage(messages.homeFooterItemLabel)}
+                          placeholder={intl.formatMessage(messages.homeFooterItemLabel)}
+                          value={field.get('title')}
+                          onChange={this.handleHomeFooterItemChange(i, 'title', field)}
+                        />
+                        <TextInput
+                          label={intl.formatMessage(messages.homeFooterItemURL)}
+                          placeholder={intl.formatMessage(messages.homeFooterItemURL)}
+                          value={field.get('url')}
+                          onChange={this.handleHomeFooterItemChange(i, 'url', field)}
+                        />
+                        <Icon id='times-circle' onClick={this.handleDeleteItem(['navlinks', 'homeFooter', i])} />
+                      </div>
+                    ))
+                  }
+                  <div className='actions'>
+                    <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['navlinks', 'homeFooter'], templates.footerItem)}>
+                      <Icon id='plus-circle' />
+                      <FormattedMessage id='soapbox_config.fields.home_footer.add' defaultMessage='Add new Home Footer Item' />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className='input with_block_label'>
+                <label><FormattedMessage id='soapbox_config.fields.custom_css_fields_label' defaultMessage='Custom CSS' /></label>
+                <span className='hint'>
+                  <FormattedMessage id='soapbox_config.hints.custom_css_fields' defaultMessage='Insert a URL to a CSS file like `https://mysite.com/instance/custom.css`, or simply `/instance/custom.css`' />
+                </span>
+                {
+                  soapbox.get('customCss').map((field, i) => (
+                    <div className='row' key={i}>
+                      <TextInput
+                        label={intl.formatMessage(messages.customCssLabel)}
+                        placeholder={intl.formatMessage(messages.customCssLabel)}
+                        value={field}
+                        onChange={this.handleChange(['customCss', i], (e) => e.target.value)}
+                      />
+                      <Icon id='times-circle' onClick={this.handleDeleteItem(['customCss', i])} />
+                    </div>
+                  ))
+                }
+                <div className='actions'>
+                  <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['customCss'], '')}>
+                    <Icon id='plus-circle' />
+                    <FormattedMessage id='soapbox_config.fields.custom_css.add' defaultMessage='Add another custom CSS URL' />
+                  </div>
+                </div>
+              </div>
+            </FieldsGroup>
+            <FieldsGroup>
+              <div className={this.state.jsonValid ? 'code-editor' : 'code-editor code-editor--invalid'}>
+                <SimpleTextarea
+                  label={intl.formatMessage(messages.rawJSONLabel)}
+                  hint={intl.formatMessage(messages.rawJSONHint)}
+                  value={this.state.rawJSON}
+                  onChange={this.handleEditJSON}
+                  rows={12}
+                />
+              </div>
+            </FieldsGroup>
+          </fieldset>
+          <div className='actions'>
+            <button name='button' type='submit' className='btn button button-primary'>
+              <FormattedMessage id='soapbox_config.save' defaultMessage='Save' />
+            </button>
+          </div>
+        </SimpleForm>
+      </Column>
+    );
+  }
+
+}

app/soapbox/features/ui/index.js

@@ -78,6 +78,7 @@ import {
   Preferences,
   EditProfile,
   SoapboxConfig,
+  ImportFollows,
   PasswordReset,
   SecurityForm,
   MfaForm,
@@ -264,6 +265,7 @@ class SwitchingColumnsArea extends React.PureComponent {
         <WrappedRoute path='/settings/preferences' layout={LAYOUT.DEFAULT} component={Preferences} content={children} />
         <WrappedRoute path='/settings/profile' layout={LAYOUT.DEFAULT} component={EditProfile} content={children} />
         <WrappedRoute path='/soapbox/config' layout={LAYOUT.DEFAULT} component={SoapboxConfig} content={children} />
+        <WrappedRoute path='/settings/import' layout={LAYOUT.DEFAULT} component={ImportFollows} content={children} />
 
         <WrappedRoute layout={LAYOUT.EMPTY} component={GenericNotFound} content={children} />
       </Switch>

app/soapbox/features/ui/util/async-components.js

@@ -186,6 +186,10 @@ export function SoapboxConfig() {
   return import(/* webpackChunkName: "features/soapbox_config" */'../../soapbox_config');
 }
 
+export function ImportFollows() {
+  return import(/* webpackChunkName: "features/import_follows" */'../../import_follows');
+}
+
 export function PasswordReset() {
   return import(/* webpackChunkName: "features/auth_login" */'../../auth_login/components/password_reset');
 }