FederationRestrictions: make RestrictedInstance function like an accordion

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>;
+  }
+
+}

app/soapbox/features/federation_restrictions/components/restricted_instance.js

@@ -4,6 +4,8 @@ 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();
 
@@ -20,12 +22,36 @@ class RestrictedInstance extends ImmutablePureComponent {
     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']) })}>
-        {remoteInstance.get('host')}
+      <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>
     );
   }

app/styles/components/federation-restrictions.scss

@@ -3,9 +3,55 @@
 }
 
 .restricted-instance {
-  padding: 10px 0;
+  &__header {
+    padding: 10px 0;
+    display: flex;
+    text-decoration: none;
+    color: var(--primary-text-color);
+  }
 
-  &--reject {
+  &__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;
+      }
+    }
+  }
 }