Remove Debug component in studios

src/views/studio/debug.jsx

-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Debug = ({label, data}) => (<div style={{padding: '2rem', border: '1px solid red', margin: '2rem'}}>
-    <small>{label}</small>
-    <code>
-        <pre style={{fontSize: '0.75rem'}}>
-            {JSON.stringify(data, null, '  ')}
-        </pre>
-    </code>
-</div>);
-
-Debug.propTypes = {
-    label: PropTypes.string,
-    data: PropTypes.any // eslint-disable-line react/forbid-prop-types
-};
-
-export default Debug;

src/views/studio/l10n.json

@@ -21,6 +21,12 @@
     "studio.followErrors.confirmEmail": "Please confirm your email address first",
     "studio.followErrors.generic": "Something went wrong following the studio",
 
+    "studio.sectionLoadError.projectsHeadline": "Something went wrong loading projects",
+    "studio.sectionLoadError.curatorsHeadline": "Something went wrong loading curators",
+    "studio.sectionLoadError.managersHeadline": "Something went wrong loading managers",
+    "studio.sectionLoadError.activityHeadline": "Something went wrong loading managers",
+    "studio.sectionLoadError.tryAgain": "Try again",
+
     "studio.projectsHeader": "Projects",
     "studio.addProjectsHeader": "Add Projects",
     "studio.addProject": "Add",

src/views/studio/studio-activity.jsx

@@ -6,7 +6,6 @@ import {connect} from 'react-redux';
 
 import {activity} from './lib/redux-modules';
 import {loadActivity} from './lib/studio-activity-actions';
-import Debug from './debug.jsx';
 import classNames from 'classnames';
 
 import SocialMessage from '../../components/social-message/social-message.jsx';
@@ -181,10 +180,15 @@ const StudioActivity = ({items, loading, error, moreToLoad, onLoadMore}) => {
                 <h2><FormattedMessage id="studio.activityHeader" /></h2>
             </div>
             {loading && <div>Loading...</div>}
-            {error && <Debug
-                label="Error"
-                data={error}
-            />}
+            {error && <div className="studio-section-load-error studio-info-box studio-info-box-error">
+                <h3><FormattedMessage id="studio.sectionLoadError.activityHeadline" /></h3>
+                <button
+                    className="button"
+                    onClick={onLoadMore}
+                >
+                    <FormattedMessage id="studio.sectionLoadError.tryAgain" />
+                </button>
+            </div>}
             <ul
                 className="studio-messages-list"
             >

src/views/studio/studio-curators.jsx

@@ -5,7 +5,6 @@ import {FormattedMessage} from 'react-intl';
 import classNames from 'classnames';
 
 import {curators} from './lib/redux-modules';
-import Debug from './debug.jsx';
 import {CuratorTile} from './studio-member-tile.jsx';
 import CuratorInviter from './studio-curator-inviter.jsx';
 import {loadCurators} from './lib/studio-member-actions';
@@ -28,10 +27,15 @@ const StudioCurators = ({
                     <h2><FormattedMessage id="studio.curatorsHeader" /></h2>
                 </div>
                 {canInviteCurators && <CuratorInviter />}
-                {error && <Debug
-                    label="Error"
-                    data={error}
-                />}
+                {error && <div className="studio-section-load-error studio-info-box studio-info-box-error">
+                    <h3><FormattedMessage id="studio.sectionLoadError.curatorsHeadline" /></h3>
+                    <button
+                        className="button"
+                        onClick={onLoadMore}
+                    >
+                        <FormattedMessage id="studio.sectionLoadError.tryAgain" />
+                    </button>
+                </div>}
                 <div className="studio-members-grid">
                     {items.length === 0 && !loading ? (
                         <div className="studio-empty">

src/views/studio/studio-managers.jsx

@@ -12,7 +12,6 @@ import {
     selectStudioHasReachedManagerThreshold
 } from '../../redux/studio.js';
 import {loadManagers} from './lib/studio-member-actions';
-import Debug from './debug.jsx';
 import {ManagerTile} from './studio-member-tile.jsx';
 import StudioInfoBox from './studio-info-box.jsx';
 import AlertProvider from '../../components/alert/alert-provider.jsx';
@@ -85,10 +84,15 @@ const StudioManagers = ({
                         </div>
                     }
                 </div>
-                {error && <Debug
-                    label="Error"
-                    data={error}
-                />}
+                {error && <div className="studio-section-load-error studio-info-box studio-info-box-error">
+                    <h3><FormattedMessage id="studio.sectionLoadError.managersHeadline" /></h3>
+                    <button
+                        className="button"
+                        onClick={onLoadMore}
+                    >
+                        <FormattedMessage id="studio.sectionLoadError.tryAgain" />
+                    </button>
+                </div>}
                 <div className="studio-members-grid">
                     {items.map(item =>
                         (<ManagerTile

src/views/studio/studio-projects.jsx

@@ -7,7 +7,6 @@ import classNames from 'classnames';
 
 import {projects} from './lib/redux-modules';
 import {selectCanAddProjects, selectCanEditOpenToAll, selectShowProjectMuteError} from '../../redux/studio-permissions';
-import Debug from './debug.jsx';
 import StudioProjectAdder from './studio-project-adder.jsx';
 import StudioProjectTile from './studio-project-tile.jsx';
 import {loadProjects} from './lib/studio-project-actions.js';
@@ -24,7 +23,7 @@ const StudioProjects = ({
     useEffect(() => {
         if (items.length === 0) onLoadMore();
     }, []);
-    
+
     return (
         <AlertProvider>
             <div className="studio-projects">
@@ -49,12 +48,19 @@ const StudioProjects = ({
                     </CommentingStatus>
                 }
                 {canAddProjects && <StudioProjectAdder />}
-                {error && <Debug
-                    label="Error"
-                    data={error}
-                />}
+
+                {error && <div className="studio-section-load-error studio-info-box studio-info-box-error">
+                    <h3><FormattedMessage id="studio.sectionLoadError.projectsHeadline" /></h3>
+                    <button
+                        className="button"
+                        onClick={onLoadMore}
+                    >
+                        <FormattedMessage id="studio.sectionLoadError.tryAgain" />
+                    </button>
+                </div>}
+
                 <div className="studio-projects-grid">
-                    {items.length === 0 && !loading ? (
+                    {items.length === 0 && !loading && !error ? (
                         <div className="studio-empty">
                             {canAddProjects ? (
                                 <React.Fragment>

src/views/studio/studio.scss

@@ -174,6 +174,13 @@ $radius: 8px;
     }
 }
 
+.studio-section-load-error {
+    margin-top: 2rem;
+    padding: 1rem;
+    flex-direction: column;
+    text-align: center;
+}
+
 .studio-tab-nav {
     border-bottom: 1px solid $active-dark-gray;
     padding-bottom: 8px;