Create EditFederationModal

app/soapbox/features/ui/components/edit_federation_modal.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { connect } from 'react-redux';
+import { SimpleForm, Checkbox } from 'soapbox/features/forms';
+import { makeGetRemoteInstance } from 'soapbox/selectors';
+
+const getRemoteInstance = makeGetRemoteInstance();
+
+const mapStateToProps = (state, { host }) => {
+  return {
+    remoteInstance: getRemoteInstance(state, host),
+  };
+};
+
+export default @connect(mapStateToProps)
+class EditFederationModal extends React.PureComponent {
+
+  static propTypes = {
+    host: PropTypes.string.isRequired,
+    remoteInstance: ImmutablePropTypes.map,
+  };
+
+  render() {
+    const { remoteInstance } = this.props;
+
+    const {
+      avatar_removal,
+      banner_removal,
+      federated_timeline_removal,
+      followers_only,
+      media_nsfw,
+      media_removal,
+      reject,
+    } = remoteInstance.get('federation').toJS();
+
+    return (
+      <div className='modal-root__modal edit-federation-modal'>
+        <h3>{remoteInstance.get('host')}</h3>
+        <SimpleForm>
+          <Checkbox label='reject' checked={reject} />
+          <Checkbox label='media removal' checked={avatar_removal && banner_removal && media_removal} />
+          <Checkbox label='force nsfw' checked={media_nsfw} />
+          <Checkbox label='unlisted' checked={federated_timeline_removal} />
+          <Checkbox label='followers only' checked={followers_only} />
+        </SimpleForm>
+      </div>
+    );
+  }
+
+}

app/soapbox/features/ui/components/modal_root.js

@@ -15,6 +15,7 @@ import HotkeysModal from './hotkeys_modal';
 import ComposeModal from './compose_modal';
 import UnauthorizedModal from './unauthorized_modal';
 import CryptoDonateModal from './crypto_donate_modal';
+import EditFederationModal from './edit_federation_modal';
 
 import {
   MuteModal,
@@ -41,6 +42,7 @@ const MODAL_COMPONENTS = {
   'COMPOSE': () => Promise.resolve({ default: ComposeModal }),
   'UNAUTHORIZED': () => Promise.resolve({ default: UnauthorizedModal }),
   'CRYPTO_DONATE': () => Promise.resolve({ default: CryptoDonateModal }),
+  'EDIT_FEDERATION': () => Promise.resolve({ default: EditFederationModal }),
 };
 
 export default class ModalRoot extends React.PureComponent {

app/styles/components/federation-restrictions.scss

@@ -63,3 +63,9 @@
     }
   }
 }
+
+.edit-federation-modal {
+  background: var(--foreground-color);
+  border-radius: 8px;
+  padding: 20px;
+}