Update FE to use name

coder · Emyrk · Aug 2, 2023 · Jul 26, 2023 · Jul 26, 2023 · Jul 26, 2023
commit 974ba833a10033e1fe4db0cf1a63577daff6fdbd
diff --git a/enterprise/coderd/groups.go b/enterprise/coderd/groups.go
@@ -400,15 +400,11 @@ func convertGroup(g database.Group, users []database.User) codersdk.Group {
 	for _, user := range users {
 		orgs[user.ID] = []uuid.UUID{g.OrganizationID}
 	}
-	// Always default to the group name if the display name is empty
-	displayName := g.DisplayName
-	if displayName == "" {
-		displayName = g.Name
-	}
+
 	return codersdk.Group{
 		ID:             g.ID,
 		Name:           g.Name,
-		DisplayName:    displayName,
+		DisplayName:    g.DisplayName,
 		OrganizationID: g.OrganizationID,
 		AvatarURL:      g.AvatarURL,
 		QuotaAllowance: int(g.QuotaAllowance),

diff --git a/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx b/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx
@@ -71,15 +71,19 @@ export const UserOrGroupAutocomplete: React.FC<
       }}
       isOptionEqualToValue={(option, value) => option.id === value.id}
       getOptionLabel={(option) =>
-        isGroup(option) ? option.display_name : option.email
+        isGroup(option) ? option.display_name || option.name : option.email
       }
       renderOption={(props, option) => {
         const isOptionGroup = isGroup(option)
 
         return (
           <Box component="li" {...props}>
             <AvatarData
-              title={isOptionGroup ? option.display_name : option.username}
+              title={
+                isOptionGroup
+                  ? option.display_name || option.name
+                  : option.username
+              }
               subtitle={isOptionGroup ? getGroupSubtitle(option) : option.email}
               src={option.avatar_url}
             />

diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.tsx
@@ -52,6 +52,17 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
               fullWidth
               label="Name"
             />
+            <TextField
+              {...getFieldHelpers(
+                "display_name",
+                "Optional: keep empty to default to the name.",
+              )}
+              onChange={onChangeTrimmed(form)}
+              autoComplete="display_name"
+              autoFocus
+              fullWidth
+              label="Display Name"
+            />
             <TextField
               {...getFieldHelpers("avatar_url")}
               onChange={onChangeTrimmed(form)}

diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx
@@ -102,7 +102,9 @@ export const GroupPage: React.FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle(group?.display_name ?? "Loading...")}</title>
+        <title>
+          {pageTitle((group?.display_name || group?.name) ?? "Loading...")}
+        </title>
       </Helmet>
       <ChooseOne>
         <Cond condition={isLoading}>
@@ -128,10 +130,14 @@ export const GroupPage: React.FC = () => {
                 </Maybe>
               }
             >
-              <PageHeaderTitle>{group?.display_name}</PageHeaderTitle>
+              <PageHeaderTitle>
+                {group?.display_name || group?.name}
+              </PageHeaderTitle>
               <PageHeaderSubtitle>
                 {/* Show the name if it differs from the display name. */}
-                {group?.display_name !== group?.name ? group?.name : ""}{" "}
+                {group?.display_name && group?.display_name !== group?.name
+                  ? group?.name
+                  : ""}{" "}
               </PageHeaderSubtitle>
             </PageHeader>
 

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.display_name}
+                                  name={group.display_name || group.name}
                                   avatarURL={group.avatar_url}
                                 />
                               }
-                              title={group.display_name}
+                              title={group.display_name || group.name}
                               subtitle={`${group.members.length} members`}
                             />
                           </TableCell>

diff --git a/site/src/pages/GroupsPage/SettingsGroupPageView.tsx b/site/src/pages/GroupsPage/SettingsGroupPageView.tsx
@@ -35,8 +35,6 @@ const UpdateGroupForm: FC<{
   const form = useFormik<FormData>({
     initialValues: {
       name: group.name,
-      // If these are equal, keep the display name blank. A blank display name means
-      // default to using the 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.display_name}
+                              name={group.display_name || group.name}
                               avatarURL={group.avatar_url}
                             />
                           }
-                          title={group.display_name}
+                          title={group.display_name || group.name}
                           subtitle={getGroupSubtitle(group)}
                         />
                       </TableCell>

diff --git a/site/src/utils/groups.ts b/site/src/utils/groups.ts
@@ -3,7 +3,7 @@ import { Group } from "api/typesGenerated"
 export const everyOneGroup = (organizationId: string): Group => ({
   id: organizationId,
   name: "Everyone",
-  display_name: "Everyone",
+  display_name: "",
   organization_id: organizationId,
   members: [],
   avatar_url: "",