feat: team setting to disable fetching field metadata (#1034)

knudtty · web-flow · commit 1dc1c82d5d26 · 2025-07-29T18:01:26.000Z
Closes HDX-2068 Allows a team to disable fetching field metadata across the app. Fetching is enabled by default. Here's the setting: <img width="1115" height="346" alt="image" src="https://github.com/user-attachments/assets/100e5ae9-6946-4215-a418-295294154452" /> And here's what it looks like when the setting is disabled: <img width="1627" height="829" alt="image" src="https://github.com/user-attachments/assets/0d020901-4b68-4239-baf3-f1c040074400" /> Notice that autocomplete is doing nothing and filters are not loaded
diff --git a/.changeset/blue-months-switch.md b/.changeset/blue-months-switch.md
@@ -0,0 +1,6 @@
+---
+"@hyperdx/api": patch
+"@hyperdx/app": patch
+---
+
+feat: add team setting to disable field metadata queries in app
diff --git a/packages/api/src/controllers/team.ts b/packages/api/src/controllers/team.ts
@@ -78,6 +78,17 @@ export function setTeamSearchRowLimit(
   return Team.findByIdAndUpdate(teamId, { searchRowLimit }, { new: true });
 }
 
+export function setTeamFieldMetadataDisabled(
+  teamId: ObjectId,
+  fieldMetadataDisabled: boolean,
+) {
+  return Team.findByIdAndUpdate(
+    teamId,
+    { fieldMetadataDisabled },
+    { new: true },
+  );
+}
+
 export async function getTags(teamId: ObjectId) {
   const [dashboardTags, savedSearchTags] = await Promise.all([
     Dashboard.aggregate([
diff --git a/packages/api/src/models/team.ts b/packages/api/src/models/team.ts
@@ -7,6 +7,7 @@ export interface ITeam {
   _id: ObjectId;
   name: string;
   searchRowLimit?: number;
+  fieldMetadataDisabled?: boolean;
   allowedAuthMethods?: 'password'[];
   apiKey: string;
   hookId: string;
@@ -20,6 +21,7 @@ export default mongoose.model<ITeam>(
     {
       name: String,
       searchRowLimit: Number,
+      fieldMetadataDisabled: Boolean,
       allowedAuthMethods: [String],
       hookId: {
         type: String,
diff --git a/packages/api/src/routers/api/team.ts b/packages/api/src/routers/api/team.ts
@@ -9,6 +9,7 @@ import {
   getTags,
   getTeam,
   rotateTeamApiKey,
+  setTeamFieldMetadataDisabled,
   setTeamName,
   setTeamSearchRowLimit,
 } from '@/controllers/team';
@@ -110,6 +111,31 @@ router.patch(
   },
 );
 
+router.patch(
+  '/field-metadata',
+  validateRequest({
+    body: z.object({
+      fieldMetadataDisabled: z.boolean(),
+    }),
+  }),
+  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 { fieldMetadataDisabled } = req.body;
+      const team = await setTeamFieldMetadataDisabled(
+        teamId,
+        fieldMetadataDisabled,
+      );
+      res.json({ fieldMetadataDisabled: team?.fieldMetadataDisabled });
+    } catch (e) {
+      next(e);
+    }
+  },
+);
+
 router.post(
   '/invitation',
   validateRequest({
diff --git a/packages/app/src/TeamPage.tsx b/packages/app/src/TeamPage.tsx
@@ -30,9 +30,11 @@ import {
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
+import { UseQueryResult } from '@tanstack/react-query';
 import CodeMirror, { placeholder } from '@uiw/react-codemirror';
 
 import { ConnectionForm } from '@/components/ConnectionForm';
+import SelectControlled from '@/components/SelectControlled';
 import { TableSourceForm } from '@/components/SourceForm';
 import { IS_LOCAL_MODE } from '@/config';
 
@@ -1060,11 +1062,11 @@ function TeamNameSection() {
   );
 }
 
-function TeamQueryConfigSection() {
-  const setSearchRowLimit = api.useSetTeamSearchRowLimit();
+function SearchRowLimitForm() {
   const { data: me, refetch: refetchMe } = api.useMe();
+  const setSearchRowLimit = api.useSetTeamSearchRowLimit();
   const hasAdminAccess = true;
-  const [isEditingQueryLimits, setIsEditingQueryLimits] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
   const searchRowLimit = me?.team.searchRowLimit ?? DEFAULT_SEARCH_ROW_LIMIT;
   const form = useForm<{ searchRowLimit: number }>({
     defaultValues: {
@@ -1090,7 +1092,7 @@ function TeamQueryConfigSection() {
                 message: 'Updated Search Row Limit',
               });
               refetchMe();
-              setIsEditingQueryLimits(false);
+              setIsEditing(false);
             },
           },
         );
@@ -1104,6 +1106,178 @@ function TeamQueryConfigSection() {
     [refetchMe, setSearchRowLimit, me?.team?.searchRowLimit],
   );
 
+  return (
+    <Stack gap="xs" mb="md">
+      <InputLabel c="gray.3" size="md">
+        Search Row Limit
+      </InputLabel>
+      {isEditing && hasAdminAccess ? (
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <Group>
+            <TextInput
+              size="xs"
+              type="number"
+              placeholder={searchRowLimit}
+              required
+              readOnly={!isEditing}
+              error={form.formState.errors.searchRowLimit?.message}
+              {...form.register('searchRowLimit', {
+                required: true,
+              })}
+              miw={300}
+              min={1}
+              max={100000}
+              autoFocus
+              onKeyDown={e => {
+                if (e.key === 'Escape') {
+                  setIsEditing(false);
+                }
+              }}
+            />
+            <Button
+              type="submit"
+              size="xs"
+              variant="light"
+              color="green"
+              loading={setSearchRowLimit.isPending}
+            >
+              Save
+            </Button>
+            <Button
+              type="button"
+              size="xs"
+              variant="default"
+              disabled={setSearchRowLimit.isPending}
+              onClick={() => {
+                setIsEditing(false);
+              }}
+            >
+              Cancel
+            </Button>
+          </Group>
+        </form>
+      ) : (
+        <Group>
+          <Text className="text-white">{searchRowLimit}</Text>
+          {hasAdminAccess && (
+            <Button
+              size="xs"
+              variant="default"
+              leftSection={<i className="bi bi-pencil text-slate-300" />}
+              onClick={() => setIsEditing(true)}
+            >
+              Change
+            </Button>
+          )}
+        </Group>
+      )}
+    </Stack>
+  );
+}
+
+function FieldMetadataForm() {
+  const { data: me, refetch: refetchMe } = api.useMe();
+  const setFieldMetadataDisabled = api.useSetFieldMetadataDisabled();
+  const hasAdminAccess = true;
+  const [isEditing, setIsEditing] = useState(false);
+  const fieldMetadataDisabled = me?.team.fieldMetadataDisabled ?? false;
+  const fieldMetadata = fieldMetadataDisabled ? 'Disabled' : 'Enabled';
+  const form = useForm<{ fieldMetadata: string }>({
+    defaultValues: {
+      fieldMetadata: fieldMetadata,
+    },
+  });
+
+  const onSubmit: SubmitHandler<{ fieldMetadata: string }> = useCallback(
+    async values => {
+      try {
+        setFieldMetadataDisabled.mutate(
+          {
+            fieldMetadataDisabled: values.fieldMetadata === 'Disabled',
+          },
+          {
+            onError: e => {
+              notifications.show({
+                color: 'red',
+                message: 'Failed to update Field Metadata Queries',
+              });
+            },
+            onSuccess: () => {
+              notifications.show({
+                color: 'green',
+                message: `${values.fieldMetadata} Field Metadata queries`,
+              });
+              refetchMe();
+              setIsEditing(false);
+            },
+          },
+        );
+      } catch (e) {
+        notifications.show({
+          color: 'red',
+          message: e.message,
+        });
+      }
+    },
+    [refetchMe, setFieldMetadataDisabled, me?.team?.searchRowLimit],
+  );
+
+  return (
+    <Stack gap="xs">
+      <InputLabel c="gray.3" size="md">
+        Field Metadata Queries
+      </InputLabel>
+      {isEditing && hasAdminAccess ? (
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <Group>
+            <SelectControlled
+              control={form.control}
+              name="fieldMetadata"
+              value={fieldMetadata}
+              data={['Enabled', 'Disabled']}
+            />
+            <Button
+              type="submit"
+              size="xs"
+              variant="light"
+              color="green"
+              loading={setFieldMetadataDisabled.isPending}
+            >
+              Save
+            </Button>
+            <Button
+              type="button"
+              size="xs"
+              variant="default"
+              disabled={setFieldMetadataDisabled.isPending}
+              onClick={() => {
+                setIsEditing(false);
+              }}
+            >
+              Cancel
+            </Button>
+          </Group>
+        </form>
+      ) : (
+        <Group>
+          <Text className="text-white">{fieldMetadata}</Text>
+          {hasAdminAccess && (
+            <Button
+              size="xs"
+              variant="default"
+              leftSection={<i className="bi bi-pencil text-slate-300" />}
+              onClick={() => setIsEditing(true)}
+            >
+              Change
+            </Button>
+          )}
+        </Group>
+      )}
+    </Stack>
+  );
+}
+
+function TeamQueryConfigSection() {
   return (
     <Box id="team_name">
       <Text size="md" c="gray.4">
@@ -1112,69 +1286,8 @@ function TeamQueryConfigSection() {
       <Divider my="md" />
       <Card>
         <Stack>
-          <InputLabel c="gray.3" size="md">
-            Search Row Limit
-          </InputLabel>
-          {isEditingQueryLimits && hasAdminAccess ? (
-            <form onSubmit={form.handleSubmit(onSubmit)}>
-              <Group>
-                <TextInput
-                  size="xs"
-                  type="number"
-                  placeholder={searchRowLimit}
-                  required
-                  readOnly={!isEditingQueryLimits}
-                  error={form.formState.errors.searchRowLimit?.message}
-                  {...form.register('searchRowLimit', {
-                    required: true,
-                  })}
-                  miw={300}
-                  min={1}
-                  max={100000}
-                  autoFocus
-                  onKeyDown={e => {
-                    if (e.key === 'Escape') {
-                      setIsEditingQueryLimits(false);
-                    }
-                  }}
-                />
-                <Button
-                  type="submit"
-                  size="xs"
-                  variant="light"
-                  color="green"
-                  loading={setSearchRowLimit.isPending}
-                >
-                  Save
-                </Button>
-                <Button
-                  type="button"
-                  size="xs"
-                  variant="default"
-                  disabled={setSearchRowLimit.isPending}
-                  onClick={() => {
-                    setIsEditingQueryLimits(false);
-                  }}
-                >
-                  Cancel
-                </Button>
-              </Group>
-            </form>
-          ) : (
-            <Group>
-              <Text className="text-white">{searchRowLimit}</Text>
-              {hasAdminAccess && (
-                <Button
-                  size="xs"
-                  variant="default"
-                  leftSection={<i className="bi bi-pencil text-slate-300" />}
-                  onClick={() => setIsEditingQueryLimits(true)}
-                >
-                  Change
-                </Button>
-              )}
-            </Group>
-          )}
+          <SearchRowLimitForm />
+          <FieldMetadataForm />
         </Stack>
       </Card>
     </Box>
diff --git a/packages/app/src/api.ts b/packages/app/src/api.ts
@@ -271,6 +271,15 @@ const api = {
         }).json(),
     });
   },
+  useSetFieldMetadataDisabled() {
+    return useMutation<any, HTTPError, { fieldMetadataDisabled: boolean }>({
+      mutationFn: async ({ fieldMetadataDisabled }) =>
+        hdxServer(`team/field-metadata`, {
+          method: 'PATCH',
+          json: { fieldMetadataDisabled },
+        }).json(),
+    });
+  },
   useTags() {
     return useQuery({
       queryKey: [`team/tags`],
diff --git a/packages/app/src/config.ts b/packages/app/src/config.ts
@@ -27,8 +27,6 @@ export const IS_OSS = process.env.NEXT_PUBLIC_IS_OSS ?? 'true' === 'true';
 export const IS_LOCAL_MODE = //true;
   // @ts-ignore
   (process.env.NEXT_PUBLIC_IS_LOCAL_MODE ?? 'false') === 'true';
-export const IS_METADATA_FIELD_FETCH_DISABLED =
-  HDX_DISABLE_METADATA_FIELD_FETCH === 'true';
 
 // Features in development
 export const IS_K8S_DASHBOARD_ENABLED = true;
diff --git a/packages/app/src/hooks/useMetadata.tsx b/packages/app/src/hooks/useMetadata.tsx
