fix: Display Everyone group in the autocomplete (#4488)

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 ? (

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>

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" }],
 }
 

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`
+}

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: {