From 0b3feef47a70e793bc94e817a322abad3a988bcb Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 31 May 2018 12:52:03 -0700
Subject: [PATCH] Hide settings items for non admins Update image uploader for
 use with team logo Fix can't cancel cropping modal

---
 app/components/Sidebar/Settings.js            | 26 +++++-----
 app/scenes/Settings/Details.js                |  2 +
 app/scenes/Settings/components/ImageUpload.js | 47 ++++++++++++-------
 3 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/app/components/Sidebar/Settings.js b/app/components/Sidebar/Settings.js
index 1ba89eae..20d4aed1 100644
--- a/app/components/Sidebar/Settings.js
+++ b/app/components/Sidebar/Settings.js
@@ -29,8 +29,8 @@ class SettingsSidebar extends React.Component<Props> {
   };
 
   render() {
-    const { team } = this.props.auth;
-    if (!team) return;
+    const { team, user } = this.props.auth;
+    if (!team || !user) return;
 
     return (
       <Sidebar>
@@ -54,21 +54,25 @@ class SettingsSidebar extends React.Component<Props> {
             </Section>
             <Section>
               <Header>Team</Header>
-              <SidebarLink to="/settings/details" icon={<SettingsIcon />}>
-                Details
-              </SidebarLink>
+              {user.isAdmin && (
+                <SidebarLink to="/settings/details" icon={<SettingsIcon />}>
+                  Details
+                </SidebarLink>
+              )}
               <SidebarLink to="/settings/members" icon={<UserIcon />}>
                 Members
               </SidebarLink>
               <SidebarLink to="/settings/shares" icon={<LinkIcon />}>
                 Share Links
               </SidebarLink>
-              <SidebarLink
-                to="/settings/integrations/slack"
-                icon={<SettingsIcon />}
-              >
-                Integrations
-              </SidebarLink>
+              {user.isAdmin && (
+                <SidebarLink
+                  to="/settings/integrations/slack"
+                  icon={<SettingsIcon />}
+                >
+                  Integrations
+                </SidebarLink>
+              )}
             </Section>
           </Scrollable>
         </Flex>
diff --git a/app/scenes/Settings/Details.js b/app/scenes/Settings/Details.js
index 4aa0b283..48bb52f1 100644
--- a/app/scenes/Settings/Details.js
+++ b/app/scenes/Settings/Details.js
@@ -78,6 +78,8 @@ class Details extends React.Component<Props> {
             <ImageUpload
               onSuccess={this.handleAvatarUpload}
               onError={this.handleAvatarError}
+              submitText="Crop logo"
+              borderRadius={0}
             >
               <Avatar src={avatarUrl} />
               <Flex auto align="center" justify="center">
diff --git a/app/scenes/Settings/components/ImageUpload.js b/app/scenes/Settings/components/ImageUpload.js
index b3ca7a81..6c452271 100644
--- a/app/scenes/Settings/components/ImageUpload.js
+++ b/app/scenes/Settings/components/ImageUpload.js
@@ -16,6 +16,8 @@ type Props = {
   children?: React.Node,
   onSuccess: string => *,
   onError: string => *,
+  submitText: string,
+  borderRadius: number,
 };
 
 @observer
@@ -26,6 +28,11 @@ class DropToImport extends React.Component<Props> {
   file: File;
   avatarEditorRef: AvatarEditor;
 
+  static defaultProps = {
+    submitText: 'Crop Picture',
+    borderRadius: 150,
+  };
+
   onDropAccepted = async (files: File[]) => {
     this.isCropping = true;
     this.file = files[0];
@@ -38,13 +45,18 @@ class DropToImport extends React.Component<Props> {
       const asset = await uploadFile(imageBlob, { name: this.file.name });
       this.props.onSuccess(asset.url);
     } catch (err) {
-      this.props.onError('Unable to upload image');
+      this.props.onError(err);
     } finally {
       this.isUploading = false;
       this.isCropping = false;
     }
   };
 
+  handleClose = () => {
+    this.isUploading = false;
+    this.isCropping = false;
+  };
+
   handleZoom = (event: SyntheticDragEvent<*>) => {
     let target = event.target;
     if (target instanceof HTMLInputElement) {
@@ -53,8 +65,10 @@ class DropToImport extends React.Component<Props> {
   };
 
   renderCropping() {
+    const { submitText } = this.props;
+
     return (
-      <Modal isOpen title="">
+      <Modal isOpen onRequestClose={this.handleClose} title="">
         <Flex auto column align="center" justify="center">
           <AvatarEditorContainer>
             <AvatarEditor
@@ -63,7 +77,7 @@ class DropToImport extends React.Component<Props> {
               width={250}
               height={250}
               border={25}
-              borderRadius={150}
+              borderRadius={this.props.borderRadius}
               color={[255, 255, 255, 0.6]} // RGBA
               scale={this.zoom}
               rotate={0}
@@ -79,7 +93,7 @@ class DropToImport extends React.Component<Props> {
           />
           {this.isUploading && <LoadingIndicator />}
           <CropButton onClick={this.handleCrop} disabled={this.isUploading}>
-            Crop avatar
+            {submitText}
           </CropButton>
         </Flex>
       </Modal>
@@ -89,19 +103,20 @@ class DropToImport extends React.Component<Props> {
   render() {
     if (this.isCropping) {
       return this.renderCropping();
-    } else {
-      return (
-        <Dropzone
-          accept="image/png, image/jpeg"
-          onDropAccepted={this.onDropAccepted}
-          style={{}}
-          disablePreview
-          {...this.props}
-        >
-          {this.props.children}
-        </Dropzone>
-      );
     }
+
+    return (
+      <Dropzone
+        accept="image/png, image/jpeg"
+        onDropAccepted={this.onDropAccepted}
+        style={{}}
+        disablePreview
+        onSuccess={this.props.onSuccess}
+        onError={this.props.onError}
+      >
+        {this.props.children}
+      </Dropzone>
+    );
   }
 }