PropertiesView UI updates and sharing symbol icon in heirarchy mapping

1 files changed, 11 insertions, 40 deletions

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index f5a39898e..c7db657ff 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -3,19 +3,19 @@ import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Checkbox, Tooltip } from '@material-ui/core';
-import { intersection } from 'lodash';
+import { concat, intersection } from 'lodash';
 import { Lambda, action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { ColorState, SketchPicker } from 'react-color';
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../Utils';
-import { Doc, Field, FieldResult, NumListCast, Opt, StrListCast } from '../../fields/Doc';
-import { DocAcl, DocData, Height, Width } from '../../fields/DocSymbols';
+import { Doc, Field, FieldResult, NumListCast, Opt, ReverseHierarchyMap, StrListCast } from '../../fields/Doc';
+import { AclAdmin, DocAcl, DocData, Height, Width } from '../../fields/DocSymbols';
 import { Id } from '../../fields/FieldSymbols';
 import { InkField } from '../../fields/InkField';
 import { List } from '../../fields/List';
 import { ComputedField } from '../../fields/ScriptField';
 import { Cast, DocCast, NumCast, StrCast } from '../../fields/Types';
-import { SharingPermissions, normalizeEmail } from '../../fields/util';
+import { GetEffectiveAcl, SharingPermissions, normalizeEmail } from '../../fields/util';
 import { DocumentType } from '../documents/DocumentTypes';
 import { DocumentManager } from '../util/DocumentManager';
 import { GroupManager } from '../util/GroupManager';
@@ -321,7 +321,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     .filter(permission => !Doc.noviceMode || ![SharingPermissions.View].includes(permission as any))
                     .map(permission => (
                         <option className="propertiesView-permisssions-select" key={permission} value={permission}>
-                            {permission}
+                            {concat(ReverseHierarchyMap.get(permission)?.image, ' ', permission)}
                         </option>
                     ))}
             </select>
@@ -391,32 +391,13 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
      * @returns a colored dropdown bar reflective of the permission
      */
     colorACLDropDown(name: string, admin: boolean, permission: string, showExpansionIcon?: boolean) {
-        var dropDownText = '';
-        switch (StrCast(permission)) {
-            case SharingPermissions.Admin:
-                dropDownText = '⬢ ';
-                break;
-            case SharingPermissions.Edit:
-                dropDownText = '⬢ ';
-                break;
-            case SharingPermissions.Augment:
-                dropDownText = '⬟ ';
-                break;
-            case SharingPermissions.View:
-                dropDownText = '♦ ';
-                break;
-            case SharingPermissions.None:
-                dropDownText = '▲ ';
-                break;
-        }
+        var shareImage = ReverseHierarchyMap.get(permission)?.image;
         return (
             <div>
                 <div className={'propertiesView-shareDropDown'}>
                     <div className={`propertiesView-shareDropDown${permission}`}>
                         <div className="propertiesView-shareDropDown">
-                            {' '}
-                            {dropDownText}
-                            {admin && permission !== 'Owner' ? this.getPermissionsSelect(name, permission) : permission}
+                            {admin && permission !== 'Owner' ? this.getPermissionsSelect(name, permission) : concat(shareImage, ' ', permission)}
                         </div>
                     </div>
                 </div>
@@ -442,21 +423,12 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
      * @returns the sharing and permissions panel.
      */
     @computed get sharingTable() {
-        const docToUse = this.selectedDoc;
-        if (!docToUse) {
-            return null;
-        }
         // all selected docs
         const docs =
             SelectionManager.Views().length < 2 && this.selectedDoc ? [this.layoutDocAcls ? this.selectedDoc : this.dataDoc!] : SelectionManager.Views().map(docView => (this.layoutDocAcls ? docView.props.Document : docView.props.Document[DocData]));
-
         const target = docs[0];
 
-        // const effectiveAcls = GetEffectiveAcl(target);
-        // const showAdmin = effectiveAcls == AclAdmin || docToUse!['acl-' + normalizeEmail(Doc.CurrentUserEmail)] == 'Owner';
-        const curUserAcl = docToUse!['acl-' + normalizeEmail(Doc.CurrentUserEmail)];
-        const showAdmin = curUserAcl == 'Admin' || curUserAcl == 'Owner';
-
+        const showAdmin = GetEffectiveAcl(this.selectedDoc!) == AclAdmin
         const tableEntries = [];
         const usersAdded: string[] = []; // all shared users being added - organized by denormalized email
 
@@ -469,12 +441,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 }
             }
             if (userOnDoc && !usersAdded.includes(eachUser.user.email) && eachUser.user.email != 'Public' && eachUser.user.email != target.author) {
-                // tableEntries.unshift(this.sharingItem(eachUser.user.email, showAdmin, permission, false)); // adds each user
                 usersAdded.push(eachUser.user.email);
             }
         });
 
-        // adds each user to the table
+        // sorts and then adds each user to the table
         usersAdded.sort(this.sortUsers);
         usersAdded.map(userEmail => {
             const permission = StrCast(target[`acl-${normalizeEmail(userEmail)}`]);
@@ -507,11 +478,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return (
             <div>
                 {' '}
-                Sharing Mode for Public / Guest Users
+                Public / Guest Users
                 <div>{this.colorACLDropDown('Public', showAdmin, StrCast(target['acl-Public']), false)}</div>
                 <div>
                     {' '}
-                    <br></br> Sharing Modes for Individual Users and Groups with Access to the Dashboard{' '}
+                    <br></br> Individual Users with Access to this Document{' '}
                 </div>
                 <div className="propertiesView-sharingTable">{<div> {tableEntries}</div>}</div>
             </div>