From c619138ecea0300633961d8965b557eb9f2d1eef Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Tue, 11 Oct 2022 15:17:19 -0300
Subject: [PATCH] fix: Display Everyone group in the autocomplete (#4488)

---
 .../UserOrGroupAutocomplete.tsx               |  5 ++---
 .../TemplatePermissionsPageView.tsx           |  3 ++-
 site/src/testHelpers/entities.ts              |  6 +++++-
 site/src/util/groups.ts                       | 21 +++++++++++++++++++
 .../template/searchUsersAndGroupsXService.ts  |  5 ++++-
 5 files changed, 34 insertions(+), 6 deletions(-)
 create mode 100644 site/src/util/groups.ts

diff --git a/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx b/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx
index 9e3f756722..15810bc48a 100644
--- a/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx
+++ b/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx
@@ -7,6 +7,7 @@ import { Group, User } from "api/typesGenerated"
 import { AvatarData } from "components/AvatarData/AvatarData"
 import debounce from "just-debounce-it"
 import { ChangeEvent, useState } from "react"
+import { getGroupSubtitle } from "util/groups"
 import { searchUsersAndGroupsMachine } from "xServices/template/searchUsersAndGroupsXService"
 
 export type UserOrGroupAutocompleteValue = User | Group | null
@@ -75,9 +76,7 @@ export const UserOrGroupAutocomplete: React.FC<
         return (
           <AvatarData
             title={isOptionGroup ? option.name : option.username}
-            subtitle={
-              isOptionGroup ? `${option.members.length} members` : option.email
-            }
+            subtitle={isOptionGroup ? getGroupSubtitle(option) : option.email}
             highlightTitle
             avatar={
               !isOptionGroup && option.avatar_url ? (
diff --git a/site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx b/site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
index 3b26474b71..980bb07148 100644
--- a/site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
+++ b/site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
@@ -29,6 +29,7 @@ import {
 import { FC, useState } from "react"
 import { Maybe } from "components/Conditionals/Maybe"
 import { GroupAvatar } from "components/GroupAvatar/GroupAvatar"
+import { getGroupSubtitle } from "util/groups"
 
 type AddTemplateUserOrGroupProps = {
   organizationId: string
@@ -239,7 +240,7 @@ export const TemplatePermissionsPageView: FC<
                       <AvatarData
                         avatar={<GroupAvatar name={group.name} />}
                         title={group.name}
-                        subtitle={`${group.members.length} members`}
+                        subtitle={getGroupSubtitle(group)}
                         highlightTitle
                       />
                     </TableCell>
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index 2d440bdbf4..a391a8ea29 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -1,4 +1,5 @@
 import { FieldError } from "api/errors"
+import { everyOneGroup } from "util/groups"
 import * as Types from "../api/types"
 import * as TypesGen from "../api/typesGenerated"
 
@@ -918,7 +919,10 @@ export const MockGroup: TypesGen.Group = {
 }
 
 export const MockTemplateACL: TypesGen.TemplateACL = {
-  group: [{ ...MockGroup, role: "admin" }],
+  group: [
+    { ...everyOneGroup(MockOrganization.id), role: "view" },
+    { ...MockGroup, role: "admin" },
+  ],
   users: [{ ...MockUser, role: "view" }],
 }
 
diff --git a/site/src/util/groups.ts b/site/src/util/groups.ts
new file mode 100644
index 0000000000..6f6f211a41
--- /dev/null
+++ b/site/src/util/groups.ts
@@ -0,0 +1,21 @@
+import { Group } from "api/typesGenerated"
+
+export const everyOneGroup = (organizationId: string): Group => ({
+  id: organizationId,
+  name: "Everyone",
+  organization_id: organizationId,
+  members: [],
+})
+
+export const getGroupSubtitle = (group: Group): string => {
+  // It is the everyone group when a group id is the same of the org id
+  if (group.id === group.organization_id) {
+    return `All users`
+  }
+
+  if (group.members.length === 1) {
+    return `1 member`
+  }
+
+  return `${group.members.length} members`
+}
diff --git a/site/src/xServices/template/searchUsersAndGroupsXService.ts b/site/src/xServices/template/searchUsersAndGroupsXService.ts
index eccfdb9099..ffcac8d3be 100644
--- a/site/src/xServices/template/searchUsersAndGroupsXService.ts
+++ b/site/src/xServices/template/searchUsersAndGroupsXService.ts
@@ -1,6 +1,7 @@
 import { getGroups, getUsers } from "api/api"
 import { Group, User } from "api/typesGenerated"
 import { queryToFilter } from "util/filters"
+import { everyOneGroup } from "util/groups"
 import { assign, createMachine } from "xstate"
 
 export type SearchUsersAndGroupsEvent =
@@ -61,7 +62,9 @@ export const searchUsersAndGroupsMachine = createMachine(
           getGroups(organizationId),
         ])
 
-        return { users, groups }
+        // The Everyone groups is not returned by the API so we have to add it
+        // manually
+        return { users, groups: [everyOneGroup(organizationId), ...groups] }
       },
     },
     actions: {