[WiP] Add support for relationship severance notifications to WebUI

app/javascript/mastodon/features/notifications/components/notification.jsx

@@ -12,6 +12,7 @@ import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/e
 import { ReactComponent as FlagIcon } from '@material-symbols/svg-600/outlined/flag-fill.svg';
 import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
 import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
+import { ReactComponent as LinkOffIcon } from '@material-symbols/svg-600/outlined/link_off.svg';
 import { ReactComponent as PersonIcon } from '@material-symbols/svg-600/outlined/person-fill.svg';
 import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add-fill.svg';
 import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
@@ -26,6 +27,7 @@ import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
 import FollowRequestContainer from '../containers/follow_request_container';
 
+import RelationshipsSeveranceEvent from './relationships_severance_event';
 import Report from './report';
 
 const messages = defineMessages({
@@ -36,6 +38,7 @@ const messages = defineMessages({
   reblog: { id: 'notification.reblog', defaultMessage: '{name} boosted your status' },
   status: { id: 'notification.status', defaultMessage: '{name} just posted' },
   update: { id: 'notification.update', defaultMessage: '{name} edited a post' },
+  severedRelationships: { id: 'notification.severed_relationships', defaultMessage: 'Relationships with {name} severed' },
   adminSignUp: { id: 'notification.admin.sign_up', defaultMessage: '{name} signed up' },
   adminReport: { id: 'notification.admin.report', defaultMessage: '{name} reported {target}' },
 });
@@ -358,6 +361,26 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
+  renderRelationshipsSevered (notification) {
+    const { intl, unread } = this.props;
+
+    return (
+      <HotKeys handlers={this.getHandlers()}>
+        <div className={classNames('notification notification-severed-relationships focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.adminReport, { name: notification.getIn(['event', 'target_name']) }), notification.get('created_at'))}>
+          <div className='notification__message'>
+            <Icon id='unlink' icon={LinkOffIcon} />
+
+            <span title={notification.get('created_at')}>
+              <FormattedMessage id='notification.severedRelationships' defaultMessage='Relationships with {name} severed' values={{ name: notification.getIn(['event', 'target_name']) }} />
+            </span>
+          </div>
+
+          <RelationshipsSeveranceEvent event={notification.get('event')} />
+        </div>
+      </HotKeys>
+    );
+  }
+
   renderAdminSignUp (notification, account, link) {
     const { intl, unread } = this.props;
 
@@ -429,6 +452,8 @@ class Notification extends ImmutablePureComponent {
       return this.renderUpdate(notification, link);
     case 'poll':
       return this.renderPoll(notification, account);
+    case 'relationships_severed':
+      return this.renderRelationshipsSevered(notification);
     case 'admin.sign_up':
       return this.renderAdminSignUp(notification, account, link);
     case 'admin.report':

app/javascript/mastodon/features/notifications/components/relationships_severance_event.jsx

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
+
+// This needs to be kept in sync with app/models/relationship_severance_event.rb
+const messages = defineMessages({
+  domain_block: { id: 'relationship_severance_notification.types.domain_block', defaultMessage: 'Domain has been suspended' },
+  user_domain_block: { id: 'relationship_severance_notification.types.user_domain_block', defaultMessage: 'You blocked this domain' },
+});
+
+const RelationshipsSeveranceEvent = ({ event, hidden }) => {
+  const intl = useIntl();
+
+  if (hidden || !event) {
+    return null;
+  }
+
+  return (
+    <div className='notification__report'>
+      <div className='notification__report__details'>
+        <div>
+          <RelativeTimestamp timestamp={event.get('created_at')} short={false} />
+          {' · '}
+          <FormattedMessage
+            id='relationship_severance_notification.relationships'
+            defaultMessage='{count, plural, one {# relationship} other {# relationships}}'
+            values={{ count: event.get('relationships_count', 0) }}
+          />
+          <br />
+          <strong>{intl.formatMessage(messages[event.get('type')])}</strong>
+        </div>
+
+        <div className='notification__report__actions'>
+          <a href='/severed_relationships' className='button' target='_blank' rel='noopener noreferrer'>
+            <FormattedMessage id='relationship_severance_notification.view' defaultMessage='View' />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+
+};
+
+RelationshipsSeveranceEvent.propTypes = {
+  event: ImmutablePropTypes.map,
+  hidden: PropTypes.bool,
+};
+
+export default RelationshipsSeveranceEvent;

app/javascript/mastodon/locales/en.json

@@ -431,6 +431,8 @@
   "notification.own_poll": "Your poll has ended",
   "notification.poll": "A poll you have voted in has ended",
   "notification.reblog": "{name} boosted your post",
+  "notification.severedRelationships": "Relationships with {name} severed",
+  "notification.severed_relationships": "Relationships with {name} severed",
   "notification.status": "{name} just posted",
   "notification.update": "{name} edited a post",
   "notifications.clear": "Clear notifications",
@@ -524,6 +526,10 @@
   "refresh": "Refresh",
   "regeneration_indicator.label": "Loading…",
   "regeneration_indicator.sublabel": "Your home feed is being prepared!",
+  "relationship_severance_notification.relationships": "{count, plural, one {# relationship} other {# relationships}}",
+  "relationship_severance_notification.types.domain_block": "Domain has been suspended",
+  "relationship_severance_notification.types.user_domain_block": "You blocked this domain",
+  "relationship_severance_notification.view": "View",
   "relative_time.days": "{number}d",
   "relative_time.full.days": "{number, plural, one {# day} other {# days}} ago",
   "relative_time.full.hours": "{number, plural, one {# hour} other {# hours}} ago",

app/javascript/mastodon/reducers/notifications.js

@@ -55,6 +55,7 @@ const notificationToMap = notification => ImmutableMap({
   created_at: notification.created_at,
   status: notification.status ? notification.status.id : null,
   report: notification.report ? fromJS(notification.report) : null,
+  event: notification.event ? fromJS(notification.event) : null,
 });
 
 const normalizeNotification = (state, notification, usePendingItems) => {