Include deleted studio banner

src/redux/studio.js

@@ -26,6 +26,7 @@ const getInitialState = () => ({
     followers: 0,
     managers: 0,
     owner: null,
+    public: null,
 
     // BEWARE: classroomId is only loaded if the user is an educator
     classroomId: null,
@@ -111,6 +112,7 @@ const selectIsFetchingInfo = state => state.studio.infoStatus === Status.FETCHIN
 const selectIsFollowing = state => state.studio.following;
 const selectIsFetchingRoles = state => state.studio.rolesStatus === Status.FETCHING;
 const selectClassroomId = state => state.studio.classroomId;
+const selectStudioPublic = state => state.studio.public;
 
 // Thunks
 const getInfo = () => ((dispatch, getState) => {
@@ -133,7 +135,8 @@ const getInfo = () => ((dispatch, getState) => {
             followers: body.stats.followers,
             managers: body.stats.managers,
             projectCount: body.stats.projects,
-            owner: body.owner
+            owner: body.owner,
+            public: body.public
         }));
     });
 });
@@ -202,5 +205,6 @@ module.exports = {
     selectIsFetchingInfo,
     selectIsFetchingRoles,
     selectIsFollowing,
-    selectClassroomId
+    selectClassroomId,
+    selectStudioPublic
 };

src/views/studio/l10n.json

@@ -6,6 +6,8 @@
     "studio.tabNavCommentsWithCount": "Comments {commentCount}",
     "studio.tabNavActivity": "Activity",
 
+    "studio.showingDeleted": "Showing Deleted Studio",
+
     "studio.title": "Title",
     "studio.description": "Description",
     "studio.thumbnail": "Thumbnail",

src/views/studio/studio-deleted.jsx

+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {FormattedMessage} from 'react-intl';
+import {selectStudioPublic} from '../../redux/studio';
+
+const StudioDeleted = ({deleted}) => {
+    if (!deleted) return null;
+    return (<div className="studio-deleted studio-info-box studio-info-box-error">
+        <FormattedMessage id="studio.showingDeleted" />
+    </div>);
+};
+
+StudioDeleted.propTypes = {
+    deleted: PropTypes.bool
+};
+
+export default connect(
+    state => ({
+        deleted: selectStudioPublic(state) === false
+    })
+)(StudioDeleted);

src/views/studio/studio.jsx

@@ -25,6 +25,7 @@ import StudioActivity from './studio-activity.jsx';
 import StudioCuratorInvite from './studio-curator-invite.jsx';
 import StudioMeta from './studio-meta.jsx';
 import StudioAdminPanel from './studio-admin-panel.jsx';
+import StudioDeleted from './studio-deleted.jsx';
 
 import {
     projects,
@@ -57,6 +58,7 @@ const StudioShell = ({isAdmin, showCuratorMuteError, muteExpiresAtMs, studioLoad
         studioLoadFailed ?
             <NotAvailable /> :
             <div className="studio-shell">
+                <StudioDeleted />
                 <StudioMeta />
                 <div className="studio-info">
                     <StudioInfo />

src/views/studio/studio.scss

@@ -46,6 +46,13 @@ $radius: 8px;
     }
 }
 
+.studio-deleted {
+    /* Always make this box take up all the columns */
+    grid-column: 1 / -1;
+    padding: 1rem;
+    box-sizing: border-box;
+}
+
 .studio-info {
     justify-self: center;
     width: 300px;