feat: Allow to update team name (#688)

ernestii · web-flow · commit 7925642ae509 · 2025-03-18T15:15:26.000Z
![Screenshot 2025-03-17 at 7 48 10 PM](https://github.com/user-attachments/assets/4bba3c92-e472-45b7-b7f5-003443e96a12) ![Screenshot 2025-03-17 at 7 48 16 PM](https://github.com/user-attachments/assets/4dec057b-0908-4ddf-a534-68f8dbc339ea)
diff --git a/.changeset/gentle-lamps-drop.md b/.changeset/gentle-lamps-drop.md
@@ -0,0 +1,6 @@
+---
+'@hyperdx/api': patch
+'@hyperdx/app': patch
+---
+
+feat: Allow to update team name
diff --git a/packages/api/src/controllers/team.ts b/packages/api/src/controllers/team.ts
@@ -61,6 +61,10 @@ export function rotateTeamApiKey(teamId: ObjectId) {
   return Team.findByIdAndUpdate(teamId, { apiKey: uuidv4() }, { new: true });
 }
 
+export function setTeamName(teamId: ObjectId, name: string) {
+  return Team.findByIdAndUpdate(teamId, { name }, { new: true });
+}
+
 export async function getTags(teamId: ObjectId) {
   const [dashboardTags, logViewTags] = await Promise.all([
     Dashboard.aggregate([
diff --git a/packages/api/src/routers/api/team.ts b/packages/api/src/routers/api/team.ts
@@ -6,7 +6,12 @@ import { z } from 'zod';
 import { validateRequest } from 'zod-express-middleware';
 
 import * as config from '@/config';
-import { getTags, getTeam, rotateTeamApiKey } from '@/controllers/team';
+import {
+  getTags,
+  getTeam,
+  rotateTeamApiKey,
+  setTeamName,
+} from '@/controllers/team';
 import {
   deleteTeamMember,
   findUserByEmail,
@@ -78,6 +83,28 @@ router.patch('/apiKey', async (req, res, next) => {
   }
 });
 
+router.patch(
+  '/name',
+  validateRequest({
+    body: z.object({
+      name: z.string().min(1).max(100),
+    }),
+  }),
+  async (req, res, next) => {
+    try {
+      const teamId = req.user?.team;
+      if (teamId == null) {
+        throw new Error(`User ${req.user?._id} not associated with a team`);
+      }
+      const { name } = req.body;
+      const team = await setTeamName(teamId, name);
+      res.json({ name: team?.name });
+    } catch (e) {
+      next(e);
+    }
+  },
+);
+
 router.post(
   '/invitation',
   validateRequest({
diff --git a/packages/app/src/TeamPage.tsx b/packages/app/src/TeamPage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { FormEventHandler, useCallback, useState } from 'react';
 import Head from 'next/head';
 import {
   Button,
@@ -166,6 +166,7 @@ export default function TeamPage() {
   const deleteTeamInvitation = api.useDeleteTeamInvitation();
   const saveWebhook = api.useSaveWebhook();
   const deleteWebhook = api.useDeleteWebhook();
+  const setTeamName = api.useSetTeamName();
 
   const hasAdminAccess = true;
 
@@ -492,13 +493,43 @@ export default function TeamPage() {
     ],
   });
 
+  const [isEditingTeamName, setIsEditingTeamName] = useState(false);
+  const [editingTeamNameValue, setEditingTeamNameValue] = useState('');
+  const handleSetTeamName = useCallback<FormEventHandler<HTMLFormElement>>(
+    e => {
+      e.stopPropagation();
+      e.preventDefault();
+      setTeamName.mutate(
+        { name: editingTeamNameValue },
+        {
+          onError: e => {
+            notifications.show({
+              color: 'red',
+              message: 'Failed to update team name',
+            });
+          },
+          onSuccess: () => {
+            notifications.show({
+              color: 'green',
+              message: 'Updated team name',
+            });
+            refetchTeam();
+            setIsEditingTeamName(false);
+            setEditingTeamNameValue(team.name);
+          },
+        },
+      );
+    },
+    [editingTeamNameValue, refetchTeam, setTeamName, team?.name],
+  );
+
   return (
     <div className="TeamPage">
       <Head>
         <title>My Team - HyperDX</title>
       </Head>
       <div className={styles.header}>
-        <div>{team?.name || 'My team'}</div>
+        <div>Team Settings</div>
       </div>
       <div>
         <Container>
@@ -509,6 +540,69 @@ export default function TeamPage() {
           )}
           {!isLoading && team != null && (
             <Stack my={20} gap="xl">
+              <div className={styles.sectionHeader}>Team Name</div>
+              <Card>
+                {isEditingTeamName ? (
+                  <form onSubmit={handleSetTeamName}>
+                    <Group gap="xs">
+                      <TextInput
+                        size="xs"
+                        value={editingTeamNameValue}
+                        onChange={e => {
+                          setEditingTeamNameValue(e.target.value);
+                        }}
+                        placeholder="My Team"
+                        miw={300}
+                        required
+                        min={1}
+                        max={100}
+                        autoFocus
+                        onKeyDown={e => {
+                          if (e.key === 'Escape') {
+                            setIsEditingTeamName(false);
+                          }
+                        }}
+                      />
+                      <MButton
+                        type="submit"
+                        size="xs"
+                        variant="light"
+                        color="green"
+                        loading={setTeamName.isLoading}
+                      >
+                        Save
+                      </MButton>
+                      <MButton
+                        type="button"
+                        size="xs"
+                        variant="default"
+                        disabled={setTeamName.isLoading}
+                        onClick={() => setIsEditingTeamName(false)}
+                      >
+                        Cancel
+                      </MButton>
+                    </Group>
+                  </form>
+                ) : (
+                  <Group gap="lg">
+                    <div className="text-slate-300 fs-7">{team.name}</div>
+                    <MButton
+                      size="xs"
+                      variant="default"
+                      leftSection={
+                        <i className="bi bi-pencil text-slate-300" />
+                      }
+                      onClick={() => {
+                        setIsEditingTeamName(true);
+                        setEditingTeamNameValue(team.name);
+                      }}
+                    >
+                      Change
+                    </MButton>
+                  </Group>
+                )}
+              </Card>
+
               <div className={styles.sectionHeader}>API Keys</div>
               <Card>
                 <div className="mb-3 text-slate-300 fs-7">
diff --git a/packages/app/src/api.ts b/packages/app/src/api.ts
@@ -777,6 +777,14 @@ const api = {
       hdxServer(`team/members`).json(),
     );
   },
+  useSetTeamName() {
+    return useMutation<any, HTTPError, { name: string }>(async ({ name }) =>
+      hdxServer(`team/name`, {
+        method: 'PATCH',
+        json: { name },
+      }).json(),
+    );
+  },
   useTags() {
     return useQuery<{ data: string[] }, HTTPError>(`team/tags`, () =>
       hdxServer(`team/tags`).json<{ data: string[] }>(),
