From 467afe6346bf3188461721fa78eed0f9ac214da7 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Wed, 1 Jul 2020 16:55:51 +0530
Subject: ui changes + related functionality changes

---
 src/client/util/GroupManager.tsx    |  91 ++++++-------
 src/client/util/GroupMemberView.tsx |   4 +-
 src/client/util/SharingManager.scss | 122 +++++++++++------
 src/client/util/SharingManager.tsx  | 252 +++++++++++++++++++++++-------------
 4 files changed, 289 insertions(+), 180 deletions(-)

(limited to 'src')

diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 7c68fc2a0..e352d46a8 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -89,7 +89,8 @@ export default class GroupManager extends React.Component<{}> {
     /**
      * @returns a list of all group documents.
      */
-    private getAllGroups(): Doc[] {
+    // private ?
+    getAllGroups(): Doc[] {
         const groupDoc = this.GroupManagerDoc;
         return groupDoc ? DocListCast(groupDoc.data) : [];
     }
@@ -98,7 +99,8 @@ export default class GroupManager extends React.Component<{}> {
      * @returns a group document based on the group name.
      * @param groupName 
      */
-    private getGroup(groupName: string): Doc | undefined {
+    // private?
+    getGroup(groupName: string): Doc | undefined {
         const groupDoc = this.getAllGroups().find(group => group.groupName === groupName);
         return groupDoc;
     }
@@ -172,8 +174,9 @@ export default class GroupManager extends React.Component<{}> {
     deleteGroup(group: Doc): boolean {
         if (group) {
             if (this.GroupManagerDoc && this.hasEditAccess(group)) {
+                // TODO look at this later
+                // SharingManager.Instance.setInternalGroupSharing(group, "Not Shared");
                 Doc.RemoveDocFromList(this.GroupManagerDoc, "data", group);
-                SharingManager.Instance.setInternalGroupSharing(group, "Not Shared");
                 if (group === this.currentGroup) {
                     runInAction(() => this.currentGroup = undefined);
                 }
@@ -248,48 +251,48 @@ export default class GroupManager extends React.Component<{}> {
     /**
      * A getter that @returns the interface rendered to view an individual group.
      */
-    private get editingInterface() {
-        const members: string[] = this.currentGroup ? JSON.parse(StrCast(this.currentGroup.members)) : [];
-        const options: UserOptions[] = this.currentGroup ? this.options.filter(option => !(JSON.parse(StrCast(this.currentGroup!.members)) as string[]).includes(option.value)) : [];
-        return (!this.currentGroup ? null :
-            <div className="editing-interface">
-                <div className="editing-header">
-                    <b>{this.currentGroup.groupName}</b>
-                    <div className={"close-button"} onClick={action(() => this.currentGroup = undefined)}>
-                        <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
-                    </div>
+    // private get editingInterface() {
+    //     const members: string[] = this.currentGroup ? JSON.parse(StrCast(this.currentGroup.members)) : [];
+    //     const options: UserOptions[] = this.currentGroup ? this.options.filter(option => !(JSON.parse(StrCast(this.currentGroup!.members)) as string[]).includes(option.value)) : [];
+    //     return (!this.currentGroup ? null :
+    //         <div className="editing-interface">
+    //             <div className="editing-header">
+    //                 <b>{this.currentGroup.groupName}</b>
+    //                 <div className={"close-button"} onClick={action(() => this.currentGroup = undefined)}>
+    //                     <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+    //                 </div>
 
-                    {this.hasEditAccess(this.currentGroup) ?
-                        <div className="group-buttons">
-                            <div className="add-member-dropdown">
-                                <Select
-                                    // isMulti={true}
-                                    isSearchable={true}
-                                    options={options}
-                                    onChange={selectedOption => this.addMemberToGroup(this.currentGroup!, (selectedOption as UserOptions).value)}
-                                    placeholder={"Add members"}
-                                    value={null}
-                                    closeMenuOnSelect={true}
-                                />
-                            </div>
-                            <button onClick={() => this.deleteGroup(this.currentGroup!)}>Delete group</button>
-                        </div> :
-                        null}
-                </div>
-                <div className="editing-contents">
-                    {members.map(member => (
-                        <div className="editing-row">
-                            <div className="user-email">
-                                {member}
-                            </div>
-                            {this.hasEditAccess(this.currentGroup!) ? <button onClick={() => this.removeMemberFromGroup(this.currentGroup!, member)}> Remove </button> : null}
-                        </div>
-                    ))}
-                </div>
-            </div>
-        );
+    //                 {this.hasEditAccess(this.currentGroup) ?
+    //                     <div className="group-buttons">
+    //                         <div className="add-member-dropdown">
+    //                             <Select
+    //                                 // isMulti={true}
+    //                                 isSearchable={true}
+    //                                 options={options}
+    //                                 onChange={selectedOption => this.addMemberToGroup(this.currentGroup!, (selectedOption as UserOptions).value)}
+    //                                 placeholder={"Add members"}
+    //                                 value={null}
+    //                                 closeMenuOnSelect={true}
+    //                             />
+    //                         </div>
+    //                         <button onClick={() => this.deleteGroup(this.currentGroup!)}>Delete group</button>
+    //                     </div> :
+    //                     null}
+    //             </div>
+    //             <div className="editing-contents">
+    //                 {members.map(member => (
+    //                     <div className="editing-row">
+    //                         <div className="user-email">
+    //                             {member}
+    //                         </div>
+    //                         {this.hasEditAccess(this.currentGroup!) ? <button onClick={() => this.removeMemberFromGroup(this.currentGroup!, member)}> Remove </button> : null}
+    //                     </div>
+    //                 ))}
+    //             </div>
+    //         </div>
+    //     );
 
-    }
+    // }
 
     /**
      * A getter that @returns the main interface for the GroupManager.
@@ -307,7 +310,7 @@ export default class GroupManager extends React.Component<{}> {
                 {this.currentGroup ?
                     <GroupMemberView
                         group={this.currentGroup}
-                        onCloseButtonClick={() => this.currentGroup = undefined}
+                        onCloseButtonClick={action(() => this.currentGroup = undefined)}
                     />
                     : null}
                 <div className="group-heading">
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index b2d75158e..c844892b1 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -8,7 +8,7 @@ import { action } from "mobx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as fa from '@fortawesome/free-solid-svg-icons';
 import Select from "react-select";
-import { Doc, Opt } from "../../fields/Doc";
+import { Doc } from "../../fields/Doc";
 import "./GroupMemberView.scss";
 
 library.add(fa.faWindowClose);
@@ -44,7 +44,7 @@ export default class GroupMemberView extends React.Component<GroupMemberViewProp
                                     closeMenuOnSelect={true}
                                 />
                             </div>
-                            <button onClick={() => GroupManager.Instance.deleteGroup(this.props.group)}>Delete group</button>
+                            <button onClick={() => console.log(GroupManager.Instance.deleteGroup(this.props.group))}>Delete group</button>
                         </div> :
                         null}
                 </div>
diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss
index fcbc05f8a..209c41651 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -1,9 +1,9 @@
 @import "../views/globalCssVariables";
 
 .sharing-interface {
-    display: flex;
-    flex-direction: column;
-    width: 730px;
+    // display: flex;
+    // flex-direction: column;
+    width: 600px;
 
     .dialogue-box {
         width: 450;
@@ -16,6 +16,66 @@
 
     .sharing-contents {
         display: flex;
+        flex-direction: column;
+
+        .share-setup {
+            display: flex;
+            margin-bottom: 20px;
+            align-items: center;
+            height: 36;
+
+            .user-search {
+                width: 90%;
+            }
+
+            .permissions-select {
+                z-index: 1;
+                margin-left: -100;
+                border: none;
+                outline: none;
+            }
+
+            .share-button {
+                height: 100%;
+                margin-left: 3%;
+            }
+        }
+
+        .main-container {
+            display: flex;
+
+
+            .individual-container,
+            .group-container {
+                width: 50%;
+
+                .share-title {
+                    margin-top: 20px;
+                    margin-bottom: 20px;
+                }
+
+                .groups-list,
+                .users-list {
+                    font-style: italic;
+                    background: white;
+                    border: 1px solid black;
+                    padding-left: 10px;
+                    padding-right: 10px;
+                    overflow-y: scroll;
+                    overflow-x: hidden;
+                    text-align: left;
+                    display: flex;
+                    align-content: center;
+                    align-items: center;
+                    text-align: center;
+                    justify-content: center;
+                    // color: red;
+                    color: black;
+                    height: 150px;
+                    margin: 0 2;
+                }
+            }
+        }
 
         button {
             background: $darker-alt-accent;
@@ -31,37 +91,6 @@
             transition: transform 0.2s;
             height: 25;
         }
-
-        .individual-container,
-        .group-container {
-            width: 50%;
-
-            .share-groups,
-            .share-individual {
-                margin-top: 20px;
-                margin-bottom: 20px;
-            }
-
-            .groups-list,
-            .users-list {
-                font-style: italic;
-                background: white;
-                border: 1px solid black;
-                padding-left: 10px;
-                padding-right: 10px;
-                overflow-y: scroll;
-                overflow-x: hidden;
-                text-align: left;
-                display: flex;
-                align-content: center;
-                align-items: center;
-                text-align: center;
-                justify-content: center;
-                color: red;
-                height: 150px;
-                margin: 0 2;
-            }
-        }
     }
 
     .focus-span {
@@ -69,11 +98,12 @@
     }
 
     p {
-        font-size: 15px;
+        font-size: 20px;
         text-align: left;
-        font-style: italic;
-        padding: 0;
+        // font-style: italic;
+        // padding: 0;
         margin: 0 0 20px 0;
+        color: black;
     }
 
     .hr-substitute {
@@ -108,9 +138,9 @@
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
-        width: 700px;
-        min-width: 700px;
-        max-width: 700px;
+        width: 100%;
+        // min-width: 700px;
+        // max-width: 700px;
         text-align: left;
         font-style: normal;
         font-size: 14;
@@ -118,20 +148,28 @@
         padding: 0;
         align-items: baseline;
 
+        &:hover .padding {
+            white-space: unset;
+        }
+
         .padding {
             padding: 0 10px 0 0;
             color: black;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            max-width: 48%;
         }
 
         .permissions-dropdown {
-            outline: none;
+            border: none;
             height: 25;
         }
 
         .edit-actions {
             display: flex;
             position: absolute;
-            right: 51.5%;
+            right: -10;
         }
 
     }
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 903f6e23e..491abe1dc 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -9,7 +9,6 @@ import { Utils } from "../../Utils";
 import "./SharingManager.scss";
 import { Id } from "../../fields/FieldSymbols";
 import { observer } from "mobx-react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { library } from '@fortawesome/fontawesome-svg-core';
 import * as fa from '@fortawesome/free-solid-svg-icons';
 import { DocumentView } from "../views/nodes/DocumentView";
@@ -17,8 +16,9 @@ import { SelectionManager } from "./SelectionManager";
 import { DocumentManager } from "./DocumentManager";
 import { CollectionView } from "../views/collections/CollectionView";
 import { DictationOverlay } from "../views/DictationOverlay";
-import GroupManager from "./GroupManager";
+import GroupManager, { UserOptions } from "./GroupManager";
 import GroupMemberView from "./GroupMemberView";
+import Select from "react-select";
 
 library.add(fa.faCopy);
 
@@ -28,18 +28,18 @@ export interface User {
 }
 
 export enum SharingPermissions {
-    None = "Not Shared",
-    View = "Can View",
+    Edit = "Can Edit",
     Add = "Can Add",
-    Edit = "Can Edit"
+    View = "Can View",
+    None = "Not Shared"
 }
 
-const ColorMapping = new Map<string, string>([
-    [SharingPermissions.None, "red"],
-    [SharingPermissions.View, "maroon"],
-    [SharingPermissions.Add, "blue"],
-    [SharingPermissions.Edit, "green"]
-]);
+// const ColorMapping = new Map<string, string>([
+//     [SharingPermissions.None, "red"],
+//     [SharingPermissions.View, "maroon"],
+//     [SharingPermissions.Add, "blue"],
+//     [SharingPermissions.Edit, "green"]
+// ]);
 
 const HierarchyMapping = new Map<string, string>([
     [SharingPermissions.None, "0"],
@@ -54,10 +54,18 @@ const HierarchyMapping = new Map<string, string>([
 
 ]);
 
+interface GroupOptions {
+    label: string;
+    options: UserOptions[];
+}
+
 const SharingKey = "sharingPermissions";
 const PublicKey = "publicLinkPermissions";
 const DefaultColor = "black";
 
+const groupType = "!groupType/";
+const indType = "!indType/";
+
 interface ValidatedUser {
     user: User;
     notificationDoc: Doc;
@@ -70,17 +78,18 @@ export default class SharingManager extends React.Component<{}> {
     public static Instance: SharingManager;
     @observable private isOpen = false;
     @observable private users: ValidatedUser[] = [];
-    @observable private groups: Doc[] = [];
+    // @observable private groups: Doc[] = [];
     @observable private targetDoc: Doc | undefined;
     @observable private targetDocView: DocumentView | undefined;
     @observable private copied = false;
     @observable private dialogueBoxOpacity = 1;
     @observable private overlayOpacity = 0.4;
-    @observable private groupToView: Opt<Doc>;
+    @observable private selectedUsers: UserOptions[] | null = null;
+    @observable private permissions: SharingPermissions = SharingPermissions.None;
 
-    private get linkVisible() {
-        return this.sharingDoc ? this.sharingDoc[PublicKey] !== SharingPermissions.None : false;
-    }
+    // private get linkVisible() {
+    //     return this.sharingDoc ? this.sharingDoc[PublicKey] !== SharingPermissions.None : false;
+    // }
 
     public open = (target: DocumentView) => {
         SelectionManager.DeselectAll();
@@ -94,7 +103,7 @@ export default class SharingManager extends React.Component<{}> {
             }
         }));
 
-        runInAction(() => this.groups = GroupManager.Instance.getAllGroupsCopy());
+        // runInAction(() => this.groups = GroupManager.Instance.getAllGroups());
     }
 
     public close = action(() => {
@@ -145,6 +154,7 @@ export default class SharingManager extends React.Component<{}> {
         const users: ValidatedUser[] = this.users.filter(user => members.includes(user.user.email));
 
         const sharingDoc = this.sharingDoc!;
+        console.log(sharingDoc)
         if (permission === SharingPermissions.None) {
             const metadata = sharingDoc[StrCast(group.groupName)];
             if (metadata) sharingDoc[StrCast(group.groupName)] = undefined;
@@ -158,7 +168,7 @@ export default class SharingManager extends React.Component<{}> {
         });
     }
 
-    setInternalSharing = async (recipient: ValidatedUser, state: string, group: Opt<Doc>) => {
+    setInternalSharing = async (recipient: ValidatedUser, state: string, group?: Doc) => {
         const { user, notificationDoc } = recipient;
         const target = this.targetDoc!;
         const manager = this.sharingDoc!;
@@ -207,13 +217,13 @@ export default class SharingManager extends React.Component<{}> {
         if (metadata) metadata.maxPermission = HierarchyMapping.get(`${max}`);
     }
 
-    private setExternalSharing = (state: string) => {
-        const sharingDoc = this.sharingDoc;
-        if (!sharingDoc) {
-            return;
-        }
-        sharingDoc[PublicKey] = state;
-    }
+    // private setExternalSharing = (state: string) => {
+    //     const sharingDoc = this.sharingDoc;
+    //     if (!sharingDoc) {
+    //         return;
+    //     }
+    //     sharingDoc[PublicKey] = state;
+    // }
 
     private get sharingUrl() {
         if (!this.targetDoc) {
@@ -282,18 +292,57 @@ export default class SharingManager extends React.Component<{}> {
         return StrCast(metadata instanceof Doc ? metadata.maxPermission : metadata, SharingPermissions.None);
     }
 
+    @action
+    handleUsersChange = (selectedOptions: any) => {
+        this.selectedUsers = selectedOptions as UserOptions[];
+    }
+
+    @action
+    handlePermissionsChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        this.permissions = event.currentTarget.value as SharingPermissions;
+    }
+
+    @action
+    share = () => {
+        this.selectedUsers?.forEach(user => {
+            if (user.value.includes(indType)) {
+                console.log(user);
+                console.log(this.users.find(u => u.user.email === user.label));
+                this.setInternalSharing(this.users.find(u => u.user.email === user.label)!, this.permissions);
+            }
+            else {
+                this.setInternalGroupSharing(GroupManager.Instance.getGroup(user.label)!, this.permissions);
+            }
+        });
+
+        this.selectedUsers = null;
+    }
+
     private get sharingInterface() {
         const existOtherUsers = this.users.length > 0;
-        const existGroups = this.groups.length > 0;
+        const existGroups = GroupManager.Instance?.getAllGroups().length > 0;
 
         // const manager = this.sharingDoc!;
 
+        const options: GroupOptions[] = GroupManager.Instance ?
+            [
+                {
+                    label: 'Individuals',
+                    options: GroupManager.Instance.options.map(({ label, value }) => ({ label, value: "!indType/" + value }))
+                },
+                {
+                    label: 'Groups',
+                    options: GroupManager.Instance.getAllGroups().map(({ groupName }) => ({ label: StrCast(groupName), value: "!groupType/" + StrCast(groupName) }))
+                }
+            ]
+            : [];
+
         return (
             <div className={"sharing-interface"}>
-                {this.groupToView ?
+                {GroupManager.Instance?.currentGroup ?
                     <GroupMemberView
-                        group={this.groupToView}
-                        onCloseButtonClick={action(() => this.groupToView = undefined)}
+                        group={GroupManager.Instance.currentGroup}
+                        onCloseButtonClick={action(() => GroupManager.Instance.currentGroup = undefined)}
                     /> :
                     null}
                 {/* <p className={"share-link"}>Manage the public link to {this.focusOn("this document...")}</p>
@@ -327,76 +376,95 @@ export default class SharingManager extends React.Component<{}> {
                 </div>
                 <div className={"hr-substitute"} /> */}
                 <div className="sharing-contents">
-                    <div className={"individual-container"}>
-                        <p className={"share-individual"}>Privately share {this.focusOn(StrCast(this.targetDoc?.title, "this document"))} with an individual...</p>
-                        <div className={"users-list"} style={{ display: existOtherUsers ? "block" : "flex", minHeight: existOtherUsers ? undefined : 150 }}>{/*200*/}
-                            {!existOtherUsers ? "There are no other users in your database." :
-                                this.users.map(({ user, notificationDoc }) => { // can't use async here
-                                    const userKey = user.userDocumentId;
-                                    const permissions = this.computePermissions(userKey);
-                                    const color = ColorMapping.get(permissions);
-
-                                    // console.log(manager);
-                                    // const metadata = manager[userKey] as Doc;
-                                    // const usersShared = StrCast(metadata?.usersShared, "");
-                                    // console.log(usersShared)
-
-
-                                    return (
-                                        <div
-                                            key={userKey}
-                                            className={"container"}
-                                        >
-                                            <span className={"padding"}>{user.email}</span>
-                                            {/* <div className={"shared-by"}>{usersShared}</div> */}
-                                            <div className="edit-actions">
-                                                <select
-                                                    className={"permissions-dropdown"}
-                                                    value={permissions}
-                                                    style={{ color, borderColor: color }}
-                                                    onChange={e => this.setInternalSharing({ user, notificationDoc }, e.currentTarget.value, undefined)}
-                                                >
-                                                    {this.sharingOptions}
-                                                </select>
+                    <p className={"share-title"}><b>Share </b>{this.focusOn(StrCast(this.targetDoc?.title, "this document"))}</p>
+                    <div className="share-setup">
+                        <Select
+                            className={"user-search"}
+                            placeholder={"Enter user or group name..."}
+                            isMulti
+                            closeMenuOnSelect={false}
+                            options={options}
+                            onChange={this.handleUsersChange}
+                            value={this.selectedUsers}
+                        />
+                        <select className="permissions-select" onChange={this.handlePermissionsChange}>
+                            {this.sharingOptions}
+                        </select>
+                        <button className="share-button" onClick={this.share}>
+                            Share
+                        </button>
+                    </div>
+                    <div className="main-container">
+                        <div className={"individual-container"}>
+                            <div className={"users-list"} style={{ display: existOtherUsers ? "block" : "flex", minHeight: existOtherUsers ? undefined : 150 }}>{/*200*/}
+                                {!existOtherUsers ? "There are no other users in your database." :
+                                    this.users.map(({ user, notificationDoc }) => { // can't use async here
+                                        const userKey = user.userDocumentId;
+                                        const permissions = this.computePermissions(userKey);
+                                        // const color = ColorMapping.get(permissions);
+
+                                        // console.log(manager);
+                                        // const metadata = manager[userKey] as Doc;
+                                        // const usersShared = StrCast(metadata?.usersShared, "");
+                                        // console.log(usersShared)
+
+
+                                        return permissions === SharingPermissions.None ? null : (
+                                            <div
+                                                key={userKey}
+                                                className={"container"}
+                                            >
+                                                <span className={"padding"}>{user.email}</span>
+                                                {/* <div className={"shared-by"}>{usersShared}</div> */}
+                                                <div className="edit-actions">
+                                                    <select
+                                                        className={"permissions-dropdown"}
+                                                        value={permissions}
+                                                        // style={{ color, borderColor: color }}
+                                                        onChange={e => this.setInternalSharing({ user, notificationDoc }, e.currentTarget.value)}
+                                                    >
+                                                        {this.sharingOptions}
+                                                    </select>
+                                                </div>
                                             </div>
-                                        </div>
-                                    );
-                                })
-                            }
+                                        );
+                                    })
+                                }
+                            </div>
                         </div>
-                    </div>
-                    <div className={"group-container"}>
-                        <p className={"share-groups"}>Privately share {this.focusOn(StrCast(this.targetDoc?.title, "this document"))} with a group...</p>
-                        <div className={"groups-list"} style={{ display: existGroups ? "block" : "flex", minHeight: existOtherUsers ? undefined : 150 }}>{/*200*/}
-                            {!existGroups ? "There are no groups in your database." :
-                                this.groups.map(group => {
-                                    const permissions = this.computePermissions(StrCast(group.groupName));
-                                    const color = ColorMapping.get(permissions);
-                                    return (
-                                        <div
-                                            key={StrCast(group.groupName)}
-                                            className={"container"}
-                                        >
-                                            <span className={"padding"}>{group.groupName}</span>
-                                            <div className="edit-actions">
-                                                <select
-                                                    className={"permissions-dropdown"}
-                                                    value={permissions}
-                                                    style={{ color, borderColor: color }}
-                                                    onChange={e => this.setInternalGroupSharing(group, e.currentTarget.value)}
-                                                >
-                                                    {this.sharingOptions}
-                                                </select>
-                                                <button onClick={action(() => this.groupToView = group)}>Edit</button>
+                        <div className={"group-container"}>
+                            <div className={"groups-list"} style={{ display: existGroups ? "block" : "flex", minHeight: existOtherUsers ? undefined : 150 }}>{/*200*/}
+                                {!existGroups ? "There are no groups in your database." :
+                                    GroupManager.Instance.getAllGroups().map(group => {
+                                        const permissions = this.computePermissions(StrCast(group.groupName));
+                                        // const color = ColorMapping.get(permissions);
+                                        return permissions === SharingPermissions.None ? null : (
+                                            <div
+                                                key={StrCast(group.groupName)}
+                                                className={"container"}
+                                            >
+                                                <span className={"padding"}>{group.groupName}</span>
+                                                <div className="edit-actions">
+                                                    <select
+                                                        className={"permissions-dropdown"}
+                                                        value={permissions}
+                                                        // style={{ color, borderColor: color }}
+                                                        onChange={e => this.setInternalGroupSharing(group, e.currentTarget.value)}
+                                                    >
+                                                        {this.sharingOptions}
+                                                    </select>
+                                                    <button onClick={action(() => GroupManager.Instance.currentGroup = group)}>Edit</button>
+                                                </div>
                                             </div>
-                                        </div>
-                                    );
-                                })
+                                        );
+                                    })
 
-                            }
+                                }
 
+                            </div>
                         </div>
                     </div>
+
                 </div>
                 <div className={"close-button"} onClick={this.close}>Done</div>
             </div>
-- 
cgit v1.2.3-70-g09d2