Merge branch 'federation-restrictions-page' into 'develop'

Federation restrictions page See merge request soapbox-pub/soapbox-fe!641
2021-07-25 22:02:26 +00:00 · 2021-07-25 22:02:26 +00:00 · 3cec2d32e6
commit 3cec2d32e6
--- a/app/soapbox/features/federation_restrictions/components/instance_restrictions.js
+++ b/app/soapbox/features/federation_restrictions/components/instance_restrictions.js
@ -0,0 +1,177 @@
+'use strict';
+
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import Icon from 'soapbox/components/icon';
+
+const hasRestrictions = remoteInstance => {
+  return remoteInstance
+    .get('federation')
+    .deleteAll(['accept', 'reject_deletes', 'report_removal'])
+    .reduce((acc, value) => acc || value, false);
+};
+
+const mapStateToProps = state => {
+  return {
+    instance: state.get('instance'),
+  };
+};
+
+export default @connect(mapStateToProps)
+class InstanceRestrictions extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    remoteInstance: ImmutablePropTypes.map.isRequired,
+    instance: ImmutablePropTypes.map,
+  };
+
+  renderRestrictions = () => {
+    const { remoteInstance } = this.props;
+    const items = [];
+
+    const {
+      avatar_removal,
+      banner_removal,
+      federated_timeline_removal,
+      followers_only,
+      media_nsfw,
+      media_removal,
+    } = remoteInstance.get('federation').toJS();
+
+    const fullMediaRemoval = media_removal && avatar_removal && banner_removal;
+    const partialMediaRemoval = media_removal || avatar_removal || banner_removal;
+
+    if (followers_only) {
+      items.push((
+        <div className='federation-restriction' key='followers_only'>
+          <div className='federation-restriction__icon'>
+            <Icon id='lock' />
+          </div>
+          <div className='federation-restriction__message'>
+            <FormattedMessage
+              id='federation_restriction.followers_only'
+              defaultMessage='Hidden except to followers'
+            />
+          </div>
+        </div>
+      ));
+    } else if (federated_timeline_removal) {
+      items.push((
+        <div className='federation-restriction' key='federated_timeline_removal'>
+          <div className='federation-restriction__icon'>
+            <Icon id='unlock' />
+          </div>
+          <div className='federation-restriction__message'>
+            <FormattedMessage
+              id='federation_restriction.federated_timeline_removal'
+              defaultMessage='Fediverse timeline removal'
+            />
+          </div>
+        </div>
+      ));
+    }
+
+    if (fullMediaRemoval) {
+      items.push((
+        <div className='federation-restriction' key='full_media_removal'>
+          <div className='federation-restriction__icon'>
+            <Icon id='photo' />
+          </div>
+          <div className='federation-restriction__message'>
+            <FormattedMessage
+              id='federation_restriction.full_media_removal'
+              defaultMessage='Full media removal'
+            />
+          </div>
+        </div>
+      ));
+    } else if (partialMediaRemoval) {
+      items.push((
+        <div className='federation-restriction' key='partial_media_removal'>
+          <div className='federation-restriction__icon'>
+            <Icon id='photo' />
+          </div>
+          <div className='federation-restriction__message'>
+            <FormattedMessage
+              id='federation_restriction.partial_media_removal'
+              defaultMessage='Partial media removal'
+            />
+          </div>
+        </div>
+      ));
+    }
+
+    if (!fullMediaRemoval && media_nsfw) {
+      items.push((
+        <div className='federation-restriction' key='media_nsfw'>
+          <div className='federation-restriction__icon'>
+            <Icon id='eye-slash' />
+          </div>
+          <div className='federation-restriction__message'>
+            <FormattedMessage
+              id='federation_restriction.media_nsfw'
+              defaultMessage='Attachments marked NSFW'
+            />
+          </div>
+        </div>
+      ));
+    }
+
+    return items;
+  }
+
+  renderContent = () => {
+    const { instance, remoteInstance } = this.props;
+    if (!instance || !remoteInstance) return null;
+
+    const host = remoteInstance.get('host');
+    const siteTitle = instance.get('title');
+
+    if (remoteInstance.getIn(['federation', 'reject']) === true) {
+      return (
+        <div className='instance-restrictions__message'>
+          <Icon id='close' />
+          <FormattedMessage
+            id='remote_instance.federation_panel.restricted_message'
+            defaultMessage='{siteTitle} blocks all activities from {host}.'
+            values={{ host, siteTitle }}
+          />
+        </div>
+      );
+    } else if (hasRestrictions(remoteInstance)) {
+      return [
+        (
+          <div className='instance-restrictions__message'>
+            <FormattedMessage
+              id='remote_instance.federation_panel.some_restrictions_message'
+              defaultMessage='{siteTitle} has placed some restrictions on {host}.'
+              values={{ host, siteTitle }}
+            />
+          </div>
+        ),
+        this.renderRestrictions(),
+      ];
+    } else {
+      return (
+        <div className='instance-restrictions__message'>
+          <Icon id='check' />
+          <FormattedMessage
+            id='remote_instance.federation_panel.no_restrictions_message'
+            defaultMessage='{siteTitle} has placed no restrictions on {host}.'
+            values={{ host, siteTitle }}
+          />
+        </div>
+      );
+    }
+  }
+
+  render() {
+    return <div className='instance-restrictions'>{this.renderContent()}</div>;
+  }
+
+}
--- a/app/soapbox/features/federation_restrictions/components/restricted_instance.js
+++ b/app/soapbox/features/federation_restrictions/components/restricted_instance.js
@ -0,0 +1,59 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { makeGetRemoteInstance } from 'soapbox/selectors';
+import classNames from 'classnames';
+import InstanceRestrictions from './instance_restrictions';
+import Icon from 'soapbox/components/icon';
+
+const getRemoteInstance = makeGetRemoteInstance();
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    remoteInstance: getRemoteInstance(state, ownProps.host),
+  };
+};
+
+export default @connect(mapStateToProps)
+class RestrictedInstance extends ImmutablePureComponent {
+
+  static propTypes = {
+    host: PropTypes.string.isRequired,
+  }
+
+  state = {
+    expanded: false,
+  }
+
+  toggleExpanded = e => {
+    this.setState({ expanded: !this.state.expanded });
+    e.preventDefault();
+  }
+
+  render() {
+    const { remoteInstance } = this.props;
+    const { expanded } = this.state;
+
+    return (
+      <div className={classNames('restricted-instance', {
+        'restricted-instance--reject': remoteInstance.getIn(['federation', 'reject']),
+        'restricted-instance--expanded': expanded,
+      })}
+      >
+        <a href='#' className='restricted-instance__header' onClick={this.toggleExpanded}>
+          <div className='restricted-instance__icon'>
+            <Icon id={expanded ? 'caret-down' : 'caret-right'} />
+          </div>
+          <div className='restricted-instance__host'>
+            {remoteInstance.get('host')}
+          </div>
+        </a>
+        <div className='restricted-instance__restrictions'>
+          <InstanceRestrictions remoteInstance={remoteInstance} />
+        </div>
+      </div>
+    );
+  }
+
+}
--- a/app/soapbox/features/federation_restrictions/index.js
+++ b/app/soapbox/features/federation_restrictions/index.js
@ -0,0 +1,72 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import Column from '../ui/components/column';
+import { createSelector } from 'reselect';
+import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutable';
+import RestrictedInstance from './components/restricted_instance';
+import Accordion from 'soapbox/features/ui/components/accordion';
+
+const getHosts = createSelector([
+  state => state.getIn(['instance', 'pleroma', 'metadata', 'federation', 'mrf_simple'], ImmutableMap()),
+], (simplePolicy) => {
+  return simplePolicy
+    .deleteAll(['accept', 'reject_deletes', 'report_removal'])
+    .reduce((acc, hosts) => acc.union(hosts), ImmutableOrderedSet())
+    .sort();
+});
+
+const messages = defineMessages({
+  heading: { id: 'column.federation_restrictions', defaultMessage: 'Federation Restrictions' },
+  boxTitle: { id: 'federation_restrictions.explanation_box.title', defaultMessage: 'Instance-specific policies' },
+  boxMessage: { id: 'federation_restrictions.explanation_box.message', defaultMessage: 'Normally servers on the Fediverse can communicate freely. {siteTitle} has imposed restrictions on the following servers.' },
+});
+
+const mapStateToProps = state => ({
+  siteTitle: state.getIn(['instance', 'title']),
+  hosts: getHosts(state),
+});
+
+export default @connect(mapStateToProps)
+@injectIntl
+class FederationRestrictions extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+  };
+
+  state = {
+    explanationBoxExpanded: true,
+  }
+
+  toggleExplanationBox = setting => {
+    this.setState({ explanationBoxExpanded: setting });
+  }
+
+  render() {
+    const { intl, hosts, siteTitle } = this.props;
+    const { explanationBoxExpanded } = this.state;
+
+    return (
+      <Column icon='gavel' heading={intl.formatMessage(messages.heading)} backBtnSlim>
+        <div className='explanation-box'>
+          <Accordion
+            headline={intl.formatMessage(messages.boxTitle)}
+            expanded={explanationBoxExpanded}
+            onToggle={this.toggleExplanationBox}
+          >
+            {intl.formatMessage(messages.boxMessage, { siteTitle })}
+          </Accordion>
+
+        </div>
+
+        <div className='federation-restrictions'>
+          {hosts.map(host => <RestrictedInstance key={host} host={host} />)}
+        </div>
+      </Column>
+    );
+  }
+
+}
--- a/app/soapbox/features/ui/components/instance_info_panel.js
+++ b/app/soapbox/features/ui/components/instance_info_panel.js
@ -6,15 +6,8 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import Icon from 'soapbox/components/icon';
 import { makeGetRemoteInstance } from 'soapbox/selectors';
-
-const hasRestrictions = remoteInstance => {
-  return remoteInstance
-    .get('federation')
-    .deleteAll(['accept', 'reject_deletes', 'report_removal'])
-    .reduce((acc, value) => acc || value, false);
-};
+import InstanceRestrictions from 'soapbox/features/federation_restrictions/components/instance_restrictions';

 const getRemoteInstance = makeGetRemoteInstance();

@ -35,144 +28,9 @@ class InstanceInfoPanel extends ImmutablePureComponent {
    remoteInstance: ImmutablePropTypes.map,
  };

-  renderRestrictions = () => {
-    const { remoteInstance } = this.props;
-    const items = [];
-
-    const {
-      avatar_removal,
-      banner_removal,
-      federated_timeline_removal,
-      followers_only,
-      media_nsfw,
-      media_removal,
-    } = remoteInstance.get('federation').toJS();
-
-    const fullMediaRemoval = media_removal && avatar_removal && banner_removal;
-    const partialMediaRemoval = media_removal || avatar_removal || banner_removal;
-
-    if (followers_only) {
-      items.push((
-        <div className='federation-restriction' key='followers_only'>
-          <div className='federation-restriction__icon'>
-            <Icon id='lock' />
-          </div>
-          <div className='federation-restriction__message'>
-            <FormattedMessage
-              id='federation_restriction.followers_only'
-              defaultMessage='Hidden except to followers'
-            />
-          </div>
-        </div>
-      ));
-    } else if (federated_timeline_removal) {
-      items.push((
-        <div className='federation-restriction' key='federated_timeline_removal'>
-          <div className='federation-restriction__icon'>
-            <Icon id='unlock' />
-          </div>
-          <div className='federation-restriction__message'>
-            <FormattedMessage
-              id='federation_restriction.federated_timeline_removal'
-              defaultMessage='Fediverse timeline removal'
-            />
-          </div>
-        </div>
-      ));
-    }
-
-    if (fullMediaRemoval) {
-      items.push((
-        <div className='federation-restriction' key='full_media_removal'>
-          <div className='federation-restriction__icon'>
-            <Icon id='photo' />
-          </div>
-          <div className='federation-restriction__message'>
-            <FormattedMessage
-              id='federation_restriction.full_media_removal'
-              defaultMessage='Full media removal'
-            />
-          </div>
-        </div>
-      ));
-    } else if (partialMediaRemoval) {
-      items.push((
-        <div className='federation-restriction' key='partial_media_removal'>
-          <div className='federation-restriction__icon'>
-            <Icon id='photo' />
-          </div>
-          <div className='federation-restriction__message'>
-            <FormattedMessage
-              id='federation_restriction.partial_media_removal'
-              defaultMessage='Partial media removal'
-            />
-          </div>
-        </div>
-      ));
-    }
-
-    if (!fullMediaRemoval && media_nsfw) {
-      items.push((
-        <div className='federation-restriction' key='media_nsfw'>
-          <div className='federation-restriction__icon'>
-            <Icon id='eye-slash' />
-          </div>
-          <div className='federation-restriction__message'>
-            <FormattedMessage
-              id='federation_restriction.media_nsfw'
-              defaultMessage='Attachments marked NSFW'
-            />
-          </div>
-        </div>
-      ));
-    }
-
-    return items;
-  }
-
-  renderContent = () => {
-    const { host, instance, remoteInstance } = this.props;
-    if (!instance || !remoteInstance) return null;
-
-    if (remoteInstance.getIn(['federation', 'reject']) === true) {
-      return (
-        <div className='instance-federation-panel__message'>
-          <Icon id='close' />
-          <FormattedMessage
-            id='remote_instance.federation_panel.restricted_message'
-            defaultMessage='{siteTitle} blocks all activities from {host}.'
-            values={{ host, siteTitle: instance.get('title') }}
-          />
-        </div>
-      );
-    } else if (hasRestrictions(remoteInstance)) {
-      return [
-        (
-          <div className='instance-federation-panel__message'>
-            <FormattedMessage
-              id='remote_instance.federation_panel.some_restrictions_message'
-              defaultMessage='{siteTitle} has placed some restrictions on {host}.'
-              values={{ host, siteTitle: instance.get('title') }}
-            />
-          </div>
-        ),
-        this.renderRestrictions(),
-      ];
-    } else {
-      return (
-        <div className='instance-federation-panel__message'>
-          <Icon id='check' />
-          <FormattedMessage
-            id='remote_instance.federation_panel.no_restrictions_message'
-            defaultMessage='{siteTitle} has placed no restrictions on {host}.'
-            values={{ host, siteTitle: instance.get('title') }}
-          />
-        </div>
-      );
-    }
-  }
-
  render() {
+    const { remoteInstance } = this.props;
+
    return (
      <div className='wtf-panel instance-federation-panel'>
        <div className='wtf-panel-header'>
@ -182,7 +40,7 @@ class InstanceInfoPanel extends ImmutablePureComponent {
          </span>
        </div>
        <div className='wtf-panel__content'>
-          {this.renderContent()}
+          <InstanceRestrictions remoteInstance={remoteInstance} />
        </div>
      </div>
    );
--- a/app/soapbox/features/ui/index.js
+++ b/app/soapbox/features/ui/index.js
@ -97,6 +97,7 @@ import {
  CryptoDonate,
  ScheduledStatuses,
  UserIndex,
+  FederationRestrictions,
 } from './util/async-components';

 // Dummy import, to make sure that <Status /> ends up in the application bundle.
@ -272,6 +273,7 @@ class SwitchingColumnsArea extends React.PureComponent {
        <WrappedRoute path='/info' page={EmptyPage} component={ServerInfo} content={children} />

        <WrappedRoute path='/donate/crypto' publicRoute page={DefaultPage} component={CryptoDonate} content={children} />
+        <WrappedRoute path='/federation_restrictions' publicRoute page={DefaultPage} component={FederationRestrictions} content={children} />

        <WrappedRoute page={EmptyPage} component={GenericNotFound} content={children} />
      </Switch>
--- a/app/soapbox/features/ui/util/async-components.js
+++ b/app/soapbox/features/ui/util/async-components.js
@ -245,3 +245,7 @@ export function ScheduledStatuses() {
 export function UserIndex() {
  return import(/* webpackChunkName: "features/admin/user_index" */'../../admin/user_index');
 }
+
+export function FederationRestrictions() {
+  return import(/* webpackChunkName: "features/federation_restrictions" */'../../federation_restrictions');
+}
--- a/app/soapbox/selectors/index.js
+++ b/app/soapbox/selectors/index.js
@ -230,10 +230,12 @@ const getSimplePolicy = (state, host) => (

 export const makeGetRemoteInstance = () => {
  return createSelector([
+    (state, host) => host,
    getRemoteInstanceFavicon,
    getSimplePolicy,
-  ], (favicon, federation) => {
+  ], (host, favicon, federation) => {
    return ImmutableMap({
+      host,
      favicon,
      federation,
    });
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@ -83,6 +83,7 @@
@import 'components/crypto-donate';
@import 'components/datepicker';
@import 'components/remote-timeline';
+@import 'components/federation-restrictions';

 // Holiday
@import 'holiday/halloween';
--- a/app/styles/components/federation-restrictions.scss
+++ b/app/styles/components/federation-restrictions.scss
@ -0,0 +1,57 @@
+.federation-restrictions {
+  padding: 15px;
+}
+
+.restricted-instance {
+  &__header {
+    padding: 10px 0;
+    display: flex;
+    text-decoration: none;
+    color: var(--primary-text-color);
+  }
+
+  &__icon {
+    width: 16px;
+  }
+
+  &--expanded &__icon i.fa {
+    transform: translateX(-3px);
+  }
+
+  &--reject &__host {
+    text-decoration: line-through;
+  }
+
+  &__restrictions {
+    height: 0;
+    overflow: hidden;
+  }
+
+  &--expanded &__restrictions {
+    height: auto;
+  }
+
+  .instance-restrictions {
+    padding: 5px 0 5px 15px;
+    border-left: 3px solid hsla(var(--primary-text-color_hsl), 0.4);
+    color: var(--primary-text-color--faint);
+    margin-bottom: 15px;
+
+    .federation-restriction {
+      padding: 7px 0;
+      font-size: 14px;
+    }
+
+    &__message {
+      margin-bottom: 10px;
+
+      i.fa {
+        padding-right: 10px;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
--- a/app/styles/components/remote-timeline.scss
+++ b/app/styles/components/remote-timeline.scss
@ -1,16 +1,18 @@
 .instance-federation-panel {
-  &__message {
-    margin-bottom: 15px;
-
-    i.fa {
-      padding-right: 10px;
-    }
-  }
-
  .wtf-panel__content {
    box-sizing: border-box;
    padding: 15px;
  }
+
+  .instance-restrictions {
+    &__message {
+      margin-bottom: 15px;
+
+      i.fa {
+        padding-right: 10px;
+      }
+    }
+  }
 }

 .federation-restriction {