fix: validate name for saved searches (#964)

Author: SpencerTorres

.changeset/purple-keys-fry.md

@@ -0,0 +1,6 @@
+---
+"@hyperdx/api": patch
+"@hyperdx/app": patch
+---
+
+fix: validate name for saved searches

packages/api/src/routers/api/__tests__/savedSearch.test.ts

@@ -40,6 +40,14 @@ describe('savedSearch router', () => {
     expect(savedSearch.body.source).toBe(MOCK_SAVED_SEARCH.source);
   });
 
+  it('cannot create a saved search with empty name', async () => {
+    const { agent } = await getLoggedInAgent(server);
+    await agent
+      .post('/saved-search')
+      .send({ ...MOCK_SAVED_SEARCH, name: ' ' }) // Trimmed string will be empty and invalid
+      .expect(400);
+  });
+
   it('can update a saved search', async () => {
     const { agent } = await getLoggedInAgent(server);
     const savedSearch = await agent
@@ -53,6 +61,31 @@ describe('savedSearch router', () => {
     expect(updatedSavedSearch.body.name).toBe('warning');
   });
 
+  it('cannot update a saved search with empty name', async () => {
+    const { agent } = await getLoggedInAgent(server);
+    const savedSearch = await agent
+      .post('/saved-search')
+      .send(MOCK_SAVED_SEARCH)
+      .expect(200);
+    await agent
+      .patch(`/saved-search/${savedSearch.body._id}`)
+      .send({ name: ' ' }) // Trimmed string will be empty and invalid
+      .expect(400);
+  });
+
+  it('can update a saved search with undefined name', async () => {
+    const { agent } = await getLoggedInAgent(server);
+    const savedSearch = await agent
+      .post('/saved-search')
+      .send(MOCK_SAVED_SEARCH)
+      .expect(200);
+    const updatedSavedSearch = await agent
+      .patch(`/saved-search/${savedSearch.body._id}`)
+      .send({ name: undefined, select: 'SELECT 1' }) // Name is optional
+      .expect(200);
+    expect(updatedSavedSearch.body.select).toBe('SELECT 1');
+  });
+
   it('can get saved searches', async () => {
     const { agent } = await getLoggedInAgent(server);
     await agent.post('/saved-search').send(MOCK_SAVED_SEARCH).expect(200);

packages/api/src/routers/api/savedSearch.ts

@@ -31,7 +31,9 @@ router.get('/', async (req, res, next) => {
 router.post(
   '/',
   validateRequest({
-    body: SavedSearchSchema.omit({ id: true }),
+    body: SavedSearchSchema.omit({ id: true }).extend({
+      name: z.string().trim().min(1),
+    }),
   }),
   async (req, res, next) => {
     try {
@@ -49,7 +51,9 @@ router.post(
 router.patch(
   '/:id',
   validateRequest({
-    body: SavedSearchSchema.partial(),
+    body: SavedSearchSchema.partial().extend({
+      name: z.string().trim().min(1).optional(),
+    }),
     params: z.object({
       id: objectIdSchema,
     }),

packages/app/src/DBSearchPage.tsx

@@ -182,7 +182,12 @@ function SaveSearchModal({
     },
   );
 
-  const { control, handleSubmit } = useForm({
+  const {
+    control,
+    handleSubmit,
+    formState,
+    reset: resetForm,
+  } = useForm({
     ...(isUpdate
       ? {
           values: {
@@ -196,6 +201,13 @@ function SaveSearchModal({
     },
   });
 
+  const closeAndReset = () => {
+    resetForm();
+    onClose();
+  };
+
+  const isValidName = (name?: string): boolean =>
+    Boolean(name && name.trim().length > 0);
   const [tags, setTags] = useState<string[]>(savedSearch?.tags || []);
 
   // Update tags when savedSearch changes
@@ -260,7 +272,7 @@ function SaveSearchModal({
   return (
     <Modal
       opened={opened}
-      onClose={onClose}
+      onClose={closeAndReset}
       title="Save Search"
       centered
       size="lg"
@@ -309,7 +321,11 @@ function SaveSearchModal({
             <Text c="gray.4" size="xs" mb="xs">
               Name
             </Text>
-            <InputControlled control={control} name="name" />
+            <InputControlled
+              control={control}
+              name="name"
+              rules={{ required: true, validate: isValidName }}
+            />
           </Box>
           <Box mb="sm">
             <Text c="gray.4" size="xs" mb="xs">
@@ -347,7 +363,12 @@ function SaveSearchModal({
               </Tags>
             </Group>
           </Box>
-          <Button variant="outline" color="green" type="submit">
+          <Button
+            variant="outline"
+            color="green"
+            type="submit"
+            disabled={!formState.isValid}
+          >
             {isUpdate ? 'Update' : 'Save'}
           </Button>
         </Stack>