Add new host transfer notification message.

src/views/messages/l10n.json

@@ -5,6 +5,8 @@
     "messages.activityStudios": "Studio Activity",
     "messages.activityForums": "Forum Activity",
     "messages.becomeManagerText": "{username} promoted you to manager for the studio {studio}",
+    "messages.becomeHostText": "{usernameOrScratchTeam} made you the host of the studio {studio}. As host, you now have the ability to edit the studio title, thumbnail, and description. Go say hello in the studio!",
+    "messages.becomeHostScratchTeam": "A Scratch Team member",
     "messages.curatorInviteText": "{actorLink} invited you to curate the studio {studioLink}. Visit the {tabLink} on the studio to accept the invitation",
     "messages.curatorTabText": "curator tab",
     "messages.favoriteText": "{profileLink} favorited your project {projectLink}",

src/views/messages/message-rows/become-host.jsx

@@ -0,0 +1,50 @@
+const classNames = require('classnames');
+const FormattedMessage = require('react-intl').FormattedMessage;
+const PropTypes = require('prop-types');
+const React = require('react');
+
+const SocialMessage = require('../../../components/social-message/social-message.jsx');
+
+const BecomeHostMessage = props => (
+    <SocialMessage
+        className={classNames(
+            'mod-become-host',
+            props.className
+        )}
+        datetime={props.datetimePromoted}
+        iconAlt="become host notification image"
+        iconSrc="/svgs/messages/host-transfer.svg"
+    >
+        <FormattedMessage
+            id="messages.becomeHostText"
+            values={{
+                usernameOrScratchTeam: (
+                    props.adminActor ?
+                        <FormattedMessage id="messages.becomeHostScratchTeam" /> :
+                        <a
+                            className="social-messages-profile-link"
+                            href={`/users/${props.actorUsername}/`}
+                        >
+                            {props.actorUsername}
+                        </a>
+                ),
+                studio: (
+                    <a href={`/studios/${props.studioId}/`}>
+                        {props.studioTitle}
+                    </a>
+                )
+            }}
+        />
+    </SocialMessage>
+);
+
+BecomeHostMessage.propTypes = {
+    actorUsername: PropTypes.string.isRequired,
+    adminActor: PropTypes.bool,
+    className: PropTypes.string,
+    datetimePromoted: PropTypes.string.isRequired,
+    studioId: PropTypes.number.isRequired,
+    studioTitle: PropTypes.string.isRequired
+};
+
+module.exports = BecomeHostMessage;

src/views/messages/presentation.jsx

@@ -17,6 +17,7 @@ const messageStatuses = require('../../redux/messages').Status;
 // Message Components
 const AdminMessage = require('./message-rows/admin-message.jsx');
 const BecomeManagerMessage = require('./message-rows/become-manager.jsx');
+const BecomeHostMessage = require('./message-rows/become-host.jsx');
 const CommentMessage = require('./message-rows/comment-message.jsx');
 const CuratorInviteMessage = require('./message-rows/curator-invite.jsx');
 const FavoriteProjectMessage = require('./message-rows/favorite-project.jsx');
@@ -147,6 +148,18 @@ class SocialMessagesList extends React.Component {
                     studioTitle={message.gallery_title}
                 />
             );
+        case 'becomehoststudio':
+            return (
+                <BecomeHostMessage
+                    actorUsername={message.actor_username}
+                    adminActor={message.admin_actor || false}
+                    className={className}
+                    datetimePromoted={message.datetime_created}
+                    key={key}
+                    studioId={message.gallery_id}
+                    studioTitle={message.gallery_title}
+                />
+            );
         case 'userjoin':
             return (
                 <UserJoinMessage

static/svgs/messages/host-transfer.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>studio invite - curate</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="studio-invite---curate" stroke="#0FBD8C" stroke-width="0.5" fill="#0FBD8C">
+            <path d="M4.79352402,7.91196409 C4.33236847,7.83924198 3.91176749,7.63827758 3.57628648,7.34408654 C3.04395515,6.8971911 2.70878357,6.22027595 2.70878357,5.47106889 C2.70878357,4.10409461 3.81287818,3 5.17985246,3 C6.54025475,3 7.64434936,4.10409461 7.64434936,5.47106889 C7.64434936,6.22684794 7.31574978,6.8971911 6.77684646,7.34408654 C7.45371132,7.66612766 8.03860896,8.17873799 8.4789266,8.82278468 C8.97839797,9.55884775 9.29385357,10.4723546 9.33985751,11.4647254 C9.3530015,11.5567332 9.3530015,11.6487411 9.3530015,11.740749 C9.3530015,14.3761177 1,14.3761177 1,11.740749 C1,9.7625795 2.05809067,8.06700563 3.57622076,7.34408654 C3.91171688,7.63829082 4.33234063,7.83926008 4.7935206,7.91197391 Z M5.1798196,7.94213779 C5.78443046,7.94212969 6.34960901,7.71868328 6.77678074,7.34408654 Z M13.2978164,6.8129558 C13.0257815,7.03908523 12.6711936,7.17255025 12.2923394,7.17255025 C11.8914479,7.17255025 11.5234164,7.02796643 11.2473927,6.78480274 C10.6953454,7.04768241 10.235306,7.50772183 9.93956636,8.09262909 C10.4390377,8.82869217 10.7544933,9.74219902 10.8004973,10.7345698 C12.3974913,11.1814652 15,10.8200057 15,9.63704715 C15,8.34893677 14.3099409,7.25141415 13.3307141,6.78480274 C13.3198884,6.79433966 13.3089212,6.80372494 13.2978164,6.8129558 C13.3089156,6.80357933 13.3199522,6.79413636 13.3308455,6.78453986 C13.6725891,6.48880023 13.8894648,6.05504878 13.8894648,5.56872139 C13.8894648,4.6815025 13.1731177,3.9651554 12.2924708,3.9651554 C11.405252,3.9651554 10.6889049,4.6815025 10.6889049,5.56872139 C10.6889049,6.05504878 10.9057806,6.48880023 11.2475242,6.78453986 C11.5235478,7.02770355 11.8915793,7.17228737 12.2924708,7.17228737 C12.6712285,7.17228737 13.0257321,7.03889042 13.2977397,6.81286593 Z" id="studio-icon"></path>
+        </g>
+    </g>
+</svg>