show display name on ui, show name if it differs on the group page

Emyrk · Emyrk · commit 8cfc0663e746 · 2023-07-26T15:32:53.000-04:00
diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go
diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json
diff --git a/docs/api/enterprise.md b/docs/api/enterprise.md
diff --git a/docs/api/schemas.md b/docs/api/schemas.md
diff --git a/enterprise/coderd/groups.go b/enterprise/coderd/groups.go
@@ -53,6 +53,7 @@ func (api *API) postGroupByOrganization(rw http.ResponseWriter, r *http.Request)
 		return
 	}
 
+	// Default the name and display name to the same.
 	if req.DisplayName == "" {
 		req.DisplayName = req.Name
 	}
diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx
@@ -33,6 +33,7 @@ import { pageTitle } from "utils/page"
 import { groupMachine } from "xServices/groups/groupXService"
 import { Maybe } from "components/Conditionals/Maybe"
 import { makeStyles } from "@mui/styles"
+import { PaginationStatus } from "components/PaginationStatus/PaginationStatus"
 
 const AddGroupMember: React.FC<{
   isLoading: boolean
@@ -101,7 +102,7 @@ export const GroupPage: React.FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle(group?.name ?? "Loading...")}</title>
+        <title>{pageTitle(group?.display_name ?? "Loading...")}</title>
       </Helmet>
       <ChooseOne>
         <Cond condition={isLoading}>
@@ -127,13 +128,14 @@ export const GroupPage: React.FC = () => {
                 </Maybe>
               }
             >
-              <PageHeaderTitle>{group?.name}</PageHeaderTitle>
+              <PageHeaderTitle>{group?.display_name}</PageHeaderTitle>
               <PageHeaderSubtitle>
-                {group?.members.length} members
+                {/* Show the name if it differs from the display name. */}
+                {group?.display_name !== group?.name ? group?.name : ""}{" "}
               </PageHeaderSubtitle>
             </PageHeader>
 
-            <Stack spacing={2.5}>
+            <Stack spacing={1}>
               <Maybe condition={canUpdateGroup}>
                 <AddGroupMember
                   isLoading={state.matches("addingMember")}
@@ -146,6 +148,13 @@ export const GroupPage: React.FC = () => {
                   }}
                 />
               </Maybe>
+              <PaginationStatus
+                isLoading={Boolean(isLoading)}
+                showing={group?.members.length ?? 0}
+                total={group?.members.length ?? 0}
+                label="members"
+              />
+
               <TableContainer>
                 <Table>
                   <TableHead>
diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx
@@ -137,11 +137,11 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
                             <AvatarData
                               avatar={
                                 <GroupAvatar
-                                  name={group.name}
+                                  name={group.display_name}
                                   avatarURL={group.avatar_url}
                                 />
                               }
-                              title={group.name}
+                              title={group.display_name}
                               subtitle={`${group.members.length} members`}
                             />
                           </TableCell>
diff --git a/site/src/pages/GroupsPage/SettingsGroupPageView.tsx b/site/src/pages/GroupsPage/SettingsGroupPageView.tsx
@@ -15,6 +15,7 @@ import { Stack } from "components/Stack/Stack"
 
 type FormData = {
   name: string
+  display_name: string
   avatar_url: string
   quota_allowance: number
 }
@@ -34,6 +35,7 @@ const UpdateGroupForm: FC<{
   const form = useFormik<FormData>({
     initialValues: {
       name: group.name,
+      display_name: group.display_name,
       avatar_url: group.avatar_url,
       quota_allowance: group.quota_allowance,
     },
diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
@@ -253,11 +253,11 @@ export const TemplatePermissionsPageView: FC<
                         <AvatarData
                           avatar={
                             <GroupAvatar
-                              name={group.name}
+                              name={group.display_name}
                               avatarURL={group.avatar_url}
                             />
                           }
-                          title={group.name}
+                          title={group.display_name}
                           subtitle={getGroupSubtitle(group)}
                         />
                       </TableCell>
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -1658,6 +1658,7 @@ export const MockWorkspaceQuota: TypesGen.WorkspaceQuota = {
 export const MockGroup: TypesGen.Group = {
   id: "fbd2116a-8961-4954-87ae-e4575bd29ce0",
   name: "Front-End",
+  display_name: "Front-End",
   avatar_url: "https://example.com",
   organization_id: MockOrganization.id,
   members: [MockUser, MockUser2],
diff --git a/site/src/utils/groups.ts b/site/src/utils/groups.ts
@@ -3,6 +3,7 @@ import { Group } from "api/typesGenerated"
 export const everyOneGroup = (organizationId: string): Group => ({
   id: organizationId,
   name: "Everyone",
+  display_name: "Everyone",
   organization_id: organizationId,
   members: [],
   avatar_url: "",
diff --git a/site/src/xServices/groups/editGroupXService.ts b/site/src/xServices/groups/editGroupXService.ts
@@ -23,7 +23,7 @@ export const editGroupMachine = createMachine(
       },
       events: {} as {
         type: "UPDATE"
-        data: { name: string; avatar_url: string; quota_allowance: number }
+        data: { display_name: string, name: string; avatar_url: string; quota_allowance: number }
       },
     },
     tsTypes: {} as import("./editGroupXService.typegen").Typegen0,
diff --git a/site/src/xServices/groups/groupXService.ts b/site/src/xServices/groups/groupXService.ts
@@ -183,6 +183,7 @@ export const groupMachine = createMachine(
 
         return patchGroup(group.id, {
           name: "",
+          display_name: "",
           add_users: [userId],
           remove_users: [],
         })
@@ -194,6 +195,7 @@ export const groupMachine = createMachine(
 
         return patchGroup(group.id, {
           name: "",
+          display_name: "",
           add_users: [],
           remove_users: [userId],
         })

Original file line number	Diff line number	Diff line change
`@@ -53,6 +53,7 @@ func (api API) postGroupByOrganization(rw http.ResponseWriter, r http.Request)`
`53`	`53`	`return`
`54`	`54`	`}`
`55`	`55`
	`56`	`+ // Default the name and display name to the same.`
`56`	`57`	`if req.DisplayName == "" {`
`57`	`58`	`req.DisplayName = req.Name`
`58`	`59`	`}`