Add error display for curator and project adder inputs

src/views/studio/l10n.json

@@ -17,6 +17,7 @@
     "studio.projectsEmpty1": "This studio has no projects yet.",
     "studio.projectsEmpty2": "Suggest projects you want to add in the comments!",
     "studio.browseProjects": "Browse Projects",
+    "studio.projectErrors.checkUrl": "Could not add project. Check the URL and try again.",
 
     "studio.creatorRole": "Studio Creator",
 
@@ -32,6 +33,10 @@
     "studio.curatorsEmptyCanAdd1": "You don’t have curators right now.",
     "studio.curatorsEmptyCanAdd2": "Add some curators to collaborate with!",
     "studio.curatorsEmpty1": "This studio has no curators right now.",
+    "studio.curatorErrors.generic": "Could not invite curator.",
+    "studio.curatorErrors.alreadyCurator": "They are already part of the studio.",
+    "studio.curatorErrors.unknownUsername": "Could not invite a curator with that username.",
+    "studio.curatorErrors.tooFast": "You are adding curators too fast.",
 
     "studio.commentsHeader": "Comments",
 

src/views/studio/studio-curator-inviter.jsx

@@ -5,8 +5,20 @@ import {connect} from 'react-redux';
 import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
 
-import {inviteCurator} from './lib/studio-member-actions';
-import FlexRow from '../../components/flex-row/flex-row.jsx';
+import {Errors, inviteCurator} from './lib/studio-member-actions';
+import ValidationMessage from '../../components/forms/validation-message.jsx';
+
+const errorToMessageId = error => {
+    switch (error) {
+    case Errors.NETWORK: return 'studio.curatorErrors.generic';
+    case Errors.SERVER: return 'studio.curatorErrors.generic';
+    case Errors.PERMISSION: return 'studio.curatorErrors.generic';
+    case Errors.DUPLICATE: return 'studio.curatorErrors.alreadyCurator';
+    case Errors.UNKNOWN_USERNAME: return 'studio.curatorErrors.unknownUsername';
+    case Errors.RATE_LIMIT: return 'studio.curatorErrors.tooFast';
+    default: return 'studio.curatorErrors.generic';
+    }
+};
 
 const StudioCuratorInviter = ({onSubmit}) => {
     const [value, setValue] = useState('');
@@ -23,8 +35,16 @@ const StudioCuratorInviter = ({onSubmit}) => {
     return (
         <div className="studio-adder-section">
             <h3><FormattedMessage id="studio.inviteCuratorsHeader" /></h3>
-            <FlexRow>
+            <div className="studio-adder-row">
+                {error && <div className="studio-adder-error">
+                    <ValidationMessage
+                        mode="error"
+                        className="validation-left"
+                        message={<FormattedMessage id={errorToMessageId(error)} />}
+                    />
+                </div>}
                 <input
+                    className={classNames({'studio-adder-invalid-input': error})}
                     disabled={submitting}
                     type="text"
                     placeholder="<username>"
@@ -39,8 +59,7 @@ const StudioCuratorInviter = ({onSubmit}) => {
                     disabled={submitting}
                     onClick={submit}
                 ><FormattedMessage id="studio.inviteCurator" /></button>
-                {error && <div>{error}</div>}
-            </FlexRow>
+            </div>
         </div>
     );
 };

src/views/studio/studio-project-adder.jsx

@@ -7,7 +7,7 @@ import {FormattedMessage} from 'react-intl';
 
 import {addProject} from './lib/studio-project-actions';
 import UserProjectsModal from './modals/user-projects-modal.jsx';
-import FlexRow from '../../components/flex-row/flex-row.jsx';
+import ValidationMessage from '../../components/forms/validation-message.jsx';
 
 const StudioProjectAdder = ({onSubmit}) => {
     const [value, setValue] = useState('');
@@ -25,8 +25,16 @@ const StudioProjectAdder = ({onSubmit}) => {
     return (
         <div className="studio-adder-section">
             <h3><FormattedMessage id="studio.addProjectsHeader" /></h3>
-            <FlexRow>
+            <div className="studio-adder-row">
+                {error && <div className="studio-adder-error">
+                    <ValidationMessage
+                        mode="error"
+                        className="validation-left"
+                        message={<FormattedMessage id="studio.projectErrors.checkUrl" />}
+                    />
+                </div>}
                 <input
+                    className={classNames({'studio-adder-invalid-input': error})}
                     disabled={submitting}
                     type="text"
                     placeholder="<project id>"
@@ -41,7 +49,6 @@ const StudioProjectAdder = ({onSubmit}) => {
                     disabled={submitting}
                     onClick={submit}
                 ><FormattedMessage id="studio.addProject" /></button>
-                {error && <div>{error}</div>}
                 <div className="studio-adder-vertical-divider" />
                 <button
                     className="button"
@@ -50,7 +57,7 @@ const StudioProjectAdder = ({onSubmit}) => {
                     <FormattedMessage id="studio.browseProjects" />
                 </button>
                 {modalOpen && <UserProjectsModal onRequestClose={() => setModalOpen(false)} />}
-            </FlexRow>
+            </div>
         </div>
     );
 };

src/views/studio/studio.scss

@@ -13,6 +13,12 @@ $radius: 8px;
         min-width: auto;
         margin: 50px auto;
         display: block;
+        /* WAT Why does everything center at smaller widths??!! */
+        @media #{$intermediate-and-smaller} {
+            & {
+                text-align: unset !important;
+            }
+        }
 
         .studio-shell {
             padding: 0 20px;
@@ -220,30 +226,54 @@ $radius: 8px;
         color: #4C97FF;
     }
 
-    .flex-row {
-        margin: 0 -6px;
-        & > * {
-            margin: 0 6px;
+    .studio-adder-row {
+        display: flex;
+        flex-wrap: wrap-reverse; /* so error goes below at small sizes */
+
+        .studio-adder-error {
+            position: relative;
+
+            .validation-message {
+                transform: none;
+                width: 200px;
+            }
+            @media #{$intermediate-and-smaller} {
+                & {
+                    width: 100%;
+                    margin-top: .5rem;
+                    .validation-message {
+                        max-width: 100%;
+                        width: 100%;
+                        box-sizing: border-box;
+                    }
+                }
+            }
         }
-    }
 
-    input {
-        flex-grow: 1;
-        display: inline-block;
-        margin: .5em 0;
-        border: 1px solid $ui-border;
-        border-radius: .5rem;
-        padding: 1em 1.25em;
-        font-size: .8rem;
-    }
+        input {
+            flex-grow: 1;
+            display: inline-block;
+            border: 1px solid $ui-border;
+            border-radius: .5rem;
+            padding: 1em 1.25em;
+            font-size: .8rem;
+            margin-inline-end: 6px;
 
-    button {
-        flex-grow: 0;
-    }
+            &.studio-adder-invalid-input {
+                border: 1px solid $ui-orange;
+            }
+        }
 
-    .studio-adder-vertical-divider {
-        border: 1px solid $ui-border;
-        align-self: stretch;
+        button {
+            flex-grow: 0;
+            margin: 0;
+        }
+
+        .studio-adder-vertical-divider {
+            margin: 0 6px;
+            border: 1px solid $ui-border;
+            align-self: stretch;
+        }
     }
 }