Oct 11, 2022 · Oct 11, 2022
diff --git a/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx b/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx
 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
        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
 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
                      <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
 import { FieldError } from "api/errors"
 import { everyOneGroup } from "util/groups"
 import * as Types from "../api/types"
 import * as TypesGen from "../api/typesGenerated"

 }

 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
 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
 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 =
          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: {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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
Expand DownExpand Up		@@ -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 ? (
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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
Expand DownExpand Up		@@ -211,7 +212,7 @@ export const TemplatePermissionsPageView: FC<
		<AvatarData
		avatar={<GroupAvatar name={group.name} />}
		title={group.name}
		subtitle={`${group.members.length} members`}
		subtitle={getGroupSubtitle(group)}
		highlightTitle
		/>
		</TableCell>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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"

Expand DownExpand Up		@@ -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" }],
		}

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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`
		}
Original file line number	Diff line number	Diff line change
		@@ -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 =
Expand DownExpand Up		@@ -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: {
Expand Down