feat: Leave Studio Button

src/views/studio/l10n.json

@@ -22,6 +22,8 @@
     "studio.followErrors.confirmAccount": "A parent needs to confirm your account first",
     "studio.followErrors.generic": "Something went wrong following the studio",
 
+    "studio.leaveErrors.permissionDenied": "Something went wrong leaving 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",
@@ -32,6 +34,8 @@
     "studio.addProjectsHeader": "Add Projects",
     "studio.addProject": "Add by URL",
 
+    "studio.leaveStudio": "Leave Studio",
+
     "studio.openToAll": "Anyone can add projects",
 
     "studio.addProjects.noSharedYet": "You don’t have shared projects that you can add to this studio yet.",

src/views/studio/lib/studio-member-actions.js

@@ -202,6 +202,7 @@ const acceptInvitation = () => ((dispatch, getState) => new Promise((resolve, re
     });
 }));
 
+
 const transferHost = (password, newHostName, newHostId) =>
     ((dispatch, getState) => new Promise((resolve, reject) => {
         const state = getState();
@@ -223,6 +224,30 @@ const transferHost = (password, newHostName, newHostId) =>
         });
     }));
 
+const leaveStudio = () => ((dispatch, getState) => new Promise((resolve, reject) => {
+    const state = getState();
+    const studioId = selectStudioId(state);
+    const username = selectUsername(state);
+
+    api({
+        uri: `/site-api/users/curators-in/${studioId}/remove/`,
+        method: 'PUT',
+        withCredentials: true,
+        useCsrf: true,
+        params: {usernames: username},
+        host: ''
+    }, (err, body, res) => {
+        const error = normalizeError(err, body, res);
+        if (error) return reject(error);
+
+        dispatch(setRoles({curator: false, manager: false}));
+
+        window.location.href = '/my-stuff/';
+
+        return resolve();
+    });
+}));
+
 export {
     Errors,
     loadManagers,
@@ -232,5 +257,6 @@ export {
     promoteCurator,
     removeCurator,
     removeManager,
-    transferHost
+    transferHost,
+    leaveStudio
 };

src/views/studio/studio-leave.jsx

@@ -0,0 +1,87 @@
+/* eslint-disable react/jsx-no-bind */
+import React, {useState, useRef} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {FormattedMessage} from 'react-intl';
+import useOnClickOutside from 'use-onclickoutside';
+
+import {selectIsLeaving} from '../../redux/studio'; 
+import {selectCanLeaveStudio, Errors} from '../../redux/studio-permissions';
+import {leaveStudio} from './lib/studio-member-actions'; 
+
+import classNames from 'classnames';
+import ValidationMessage from '../../components/forms/validation-message.jsx';
+
+const errorToMessageId = (error) => {
+    switch (error) {
+    case Errors.PERMISSION: 
+        return 'studio.leaveErrors.permissionDenied'; 
+    default: 
+        return 'studio.leaveErrors.generic'; 
+    }
+};
+
+const StudioLeave = ({
+    canLeave,
+    isLeaving,
+    isMutating,
+    leavingError,
+    handleLeaving
+}) => {
+    const fieldClassName = classNames('button', 'mod-error', 'studio-leave-button', {
+        'mod-mutating': isMutating 
+    });
+    const [hideValidationMessage, setHideValidationMessage] = useState(false);
+
+    const ref = useRef(null);
+
+    useOnClickOutside(ref, () => {
+        setHideValidationMessage(true);
+    });
+
+    if (!canLeave) return null; 
+
+    return (
+        <div
+            className="studio-info-section"
+            ref={ref}
+        >
+            <button
+                className={fieldClassName}
+                disabled={isMutating}
+                onClick={() => {
+                    setHideValidationMessage(false);
+                    handleLeaving();
+                }}
+            >
+                {isMutating ? '...' : (
+                    <FormattedMessage id="studio.leaveStudio" />
+                )}
+            </button>
+            {leavingError && !hideValidationMessage && <ValidationMessage
+                mode="error"
+                message={<FormattedMessage id={errorToMessageId(leavingError)} />} 
+            />}
+        </div>
+    );
+};
+
+StudioLeave.propTypes = {
+    canLeave: PropTypes.bool,
+    isLeaving: PropTypes.bool,
+    isMutating: PropTypes.bool,
+    leavingError: PropTypes.string, 
+    handleLeaving: PropTypes.func
+};
+
+export default connect(
+    state => ({
+        canLeave: selectCanLeaveStudio(state),
+        isMutating: state.studio.isMutatingLeaving, 
+        leavingError: state.studio.leavingError,
+        isLeaving: selectIsLeaving(state)
+    }),
+    {
+        handleLeaving: leaveStudio 
+    }
+)(StudioLeave);

src/views/studio/studio.scss

@@ -177,6 +177,16 @@ $radius: 8px;
         width: 100%;
         box-sizing: border-box;
     }
+
+    .studio-leave-button {
+        padding-top: 14px;
+        padding-bottom: 14px;
+        font-size: 14px;
+        margin: 0;
+        width: 100%;
+        box-sizing: border-box;
+        background-color: $ui-red-dark;
+    }
 }
 
 .studio-section-load-error {