1 files changed, 18 insertions, 15 deletions

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index c7db657ff..ab3864849 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -413,13 +413,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     };
 
     /**
-     * Sorting algorithm to sort groups.
-     */
-    sortGroups = (g1: Doc, g2: Doc) => {
-        return g1 > g2 ? -1 : g1 === g2 ? 0 : 1;
-    };
-
-    /**
      * @returns the sharing and permissions panel.
      */
     @computed get sharingTable() {
@@ -429,7 +422,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         const target = docs[0];
 
         const showAdmin = GetEffectiveAcl(this.selectedDoc!) == AclAdmin
-        const tableEntries = [];
+        const individualTableEntries = [];
         const usersAdded: string[] = []; // all shared users being added - organized by denormalized email
 
         // adds each user to usersAdded
@@ -449,32 +442,33 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         usersAdded.sort(this.sortUsers);
         usersAdded.map(userEmail => {
             const permission = StrCast(target[`acl-${normalizeEmail(userEmail)}`]);
-            tableEntries.unshift(this.sharingItem(userEmail, showAdmin, permission, false)); // adds each user
+            individualTableEntries.unshift(this.sharingItem(userEmail, showAdmin, permission, false)); // adds each user
         });
 
         // adds current user
         var userEmail = Doc.CurrentUserEmail;
         if (userEmail == 'guest') userEmail = 'Public';
         if (!usersAdded.includes(userEmail) && userEmail != 'Public' && userEmail != target.author) {
-            tableEntries.unshift(this.sharingItem(userEmail, showAdmin, StrCast(target[`acl-${normalizeEmail(userEmail)}`]), false)); // adds each user
+            individualTableEntries.unshift(this.sharingItem(userEmail, showAdmin, StrCast(target[`acl-${normalizeEmail(userEmail)}`]), false)); // adds each user
             usersAdded.push(userEmail);
         }
 
+        // shift owner to top
+        individualTableEntries.unshift(this.sharingItem(StrCast(target.author), showAdmin, 'Owner'), false);
+
         // adds groups
+        const groupTableEntries: JSX.Element[] = [];
         const groupList = GroupManager.Instance?.allGroups || [];
         groupList.map(group => {
             if (group.title != 'Public' && this.selectedDoc) {
                 const groupKey = 'acl-' + normalizeEmail(StrCast(group.title));
                 if (this.selectedDoc[groupKey] != '' && this.selectedDoc[groupKey] != undefined) {
                     const permission = StrCast(target[groupKey]);
-                    tableEntries.unshift(this.sharingItem(StrCast(group.title), showAdmin, permission, false));
+                    groupTableEntries.unshift(this.sharingItem(StrCast(group.title), showAdmin, permission, false));
                 }
             }
         });
 
-        // shift owner to top
-        tableEntries.unshift(this.sharingItem(StrCast(target.author), showAdmin, 'Owner'), false);
-
         return (
             <div>
                 {' '}
@@ -484,7 +478,16 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     {' '}
                     <br></br> Individual Users with Access to this Document{' '}
                 </div>
-                <div className="propertiesView-sharingTable">{<div> {tableEntries}</div>}</div>
+                <div className="propertiesView-sharingTable">{<div> {individualTableEntries}</div>}</div>
+                {groupTableEntries.length>0 ? 
+                    <div>
+                        <div>
+                            {' '}
+                            <br></br> Groups with Access to this Document{' '}
+                        </div>
+                        <div className="propertiesView-sharingTable">{<div> {groupTableEntries}</div>}</div>
+                    </div>
+                : null}
             </div>
         );
     }