fix(compass-query-bar): add a maxTimeMS over 5min warning to CompassWeb COMPASS-9023 (#7380)

nbbeeken · web-flow · commit 44cc2ed63c4f · 2025-10-07T11:18:02.000-04:00
diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-options/pipeline-collation.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-options/pipeline-collation.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { connect } from 'react-redux';
 import type { ConnectedProps } from 'react-redux';
 import {
@@ -8,6 +8,7 @@ import {
   spacing,
   TextInput,
   palette,
+  Tooltip,
 } from '@mongodb-js/compass-components';
 
 import type { RootState } from '../../../modules';
@@ -58,16 +59,48 @@ const PipelineCollation: React.FunctionComponent<PipelineCollationProps> = ({
   maxTimeMSValue,
   maxTimeMSChanged,
 }) => {
+  const maxTimeMSEnvLimit = usePreference('maxTimeMSEnvLimit');
+
   const onMaxTimeMSChanged = useCallback(
     (evt: React.ChangeEvent<HTMLInputElement>) => {
       if (maxTimeMSChanged) {
-        maxTimeMSChanged(parseInt(evt.currentTarget.value, 10));
+        const parsed = Number(evt.currentTarget.value);
+        const newValue = Number.isNaN(parsed) ? 0 : parsed;
+
+        // When environment limit is set (> 0), enforce it
+        if (maxTimeMSEnvLimit && newValue > maxTimeMSEnvLimit) {
+          maxTimeMSChanged(maxTimeMSEnvLimit);
+        } else {
+          maxTimeMSChanged(newValue);
+        }
       }
     },
-    [maxTimeMSChanged]
+    [maxTimeMSChanged, maxTimeMSEnvLimit]
   );
+
   const maxTimeMSLimit = usePreference('maxTimeMS');
 
+  // Determine the effective max limit when environment limit is set (> 0)
+  const effectiveMaxLimit = useMemo(() => {
+    if (maxTimeMSEnvLimit) {
+      return maxTimeMSLimit
+        ? Math.min(maxTimeMSLimit, maxTimeMSEnvLimit)
+        : maxTimeMSEnvLimit;
+    }
+    return maxTimeMSLimit;
+  }, [maxTimeMSEnvLimit, maxTimeMSLimit]);
+
+  // Check if value exceeds the environment limit (when limit > 0)
+  const exceedsLimit = Boolean(
+    useMemo(() => {
+      return (
+        maxTimeMSEnvLimit &&
+        maxTimeMSValue &&
+        maxTimeMSValue >= maxTimeMSEnvLimit
+      );
+    }, [maxTimeMSEnvLimit, maxTimeMSValue])
+  );
+
   return (
     <div
       className={pipelineOptionsContainerStyles}
@@ -107,27 +140,45 @@ const PipelineCollation: React.FunctionComponent<PipelineCollationProps> = ({
       >
         Max Time MS
       </Label>
-      <TextInput
-        aria-labelledby={maxTimeMSLabelId}
-        id={maxTimeMSInputId}
-        data-testid="max-time-ms"
-        className={inputStyles}
-        placeholder={`${Math.min(
-          DEFAULT_MAX_TIME_MS,
-          maxTimeMSLimit || Infinity
-        )}`}
-        type="number"
-        min="0"
-        max={maxTimeMSLimit}
-        sizeVariant="small"
-        value={`${maxTimeMSValue ?? ''}`}
-        state={
-          maxTimeMSValue && maxTimeMSLimit && maxTimeMSValue > maxTimeMSLimit
-            ? 'error'
-            : 'none'
-        }
-        onChange={onMaxTimeMSChanged}
-      />
+      <Tooltip
+        enabled={exceedsLimit}
+        open={exceedsLimit}
+        trigger={({
+          children,
+          ...triggerProps
+        }: React.HTMLProps<HTMLDivElement>) => (
+          <div {...triggerProps}>
+            <TextInput
+              aria-labelledby={maxTimeMSLabelId}
+              id={maxTimeMSInputId}
+              data-testid="max-time-ms"
+              className={inputStyles}
+              placeholder={`${Math.min(
+                DEFAULT_MAX_TIME_MS,
+                effectiveMaxLimit || Infinity
+              )}`}
+              type="number"
+              min="0"
+              max={effectiveMaxLimit}
+              sizeVariant="small"
+              value={`${maxTimeMSValue ?? ''}`}
+              state={
+                (maxTimeMSValue &&
+                  effectiveMaxLimit &&
+                  maxTimeMSValue > effectiveMaxLimit) ||
+                exceedsLimit
+                  ? 'error'
+                  : 'none'
+              }
+              onChange={onMaxTimeMSChanged}
+            />
+            {children}
+          </div>
+        )}
+      >
+        Operations longer than 5 minutes are not supported in the web
+        environment
+      </Tooltip>
     </div>
   );
 };
diff --git a/packages/compass-preferences-model/src/preferences-schema.tsx b/packages/compass-preferences-model/src/preferences-schema.tsx
@@ -105,6 +105,8 @@ export type UserConfigurablePreferences = PermanentFeatureFlags &
     enableProxySupport: boolean;
     proxy: string;
     inferNamespacesFromPrivileges?: boolean;
+    // Features that are enabled by default in Date Explorer, but are disabled in Compass
+    maxTimeMSEnvLimit?: number;
   };
 
 /**
@@ -1062,6 +1064,17 @@ export const storedUserPreferencesProps: Required<{
     validator: z.boolean().default(true),
     type: 'boolean',
   },
+  maxTimeMSEnvLimit: {
+    ui: true,
+    cli: true,
+    global: true,
+    description: {
+      short:
+        'Maximum time limit for operations in environment (milliseconds). Set to 0 for no limit.',
+    },
+    validator: z.number().min(0).default(0),
+    type: 'number',
+  },
 
   ...allFeatureFlagsProps,
 };
diff --git a/packages/compass-query-bar/src/components/query-option.tsx b/packages/compass-query-bar/src/components/query-option.tsx
@@ -1,7 +1,8 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useMemo } from 'react';
 import {
   Label,
   TextInput,
+  Tooltip,
   css,
   cx,
   spacing,
@@ -20,6 +21,7 @@ import type { QueryProperty } from '../constants/query-properties';
 import type { RootState } from '../stores/query-bar-store';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import { useConnectionInfoRef } from '@mongodb-js/compass-connections/provider';
+import { usePreference } from 'compass-preferences-model/provider';
 
 const queryOptionStyles = css({
   display: 'flex',
@@ -153,6 +155,22 @@ const QueryOption: React.FunctionComponent<QueryOptionProps> = ({
     }
   }, [track, name, connectionInfoRef]);
 
+  // MaxTimeMS warning tooltip logic
+  const maxTimeMSEnvLimit = usePreference('maxTimeMSEnvLimit');
+  const numericValue = useMemo(() => {
+    if (!value) return 0;
+    const parsed = Number(value);
+    return Number.isNaN(parsed) ? 0 : parsed;
+  }, [value]);
+
+  const exceedsMaxTimeMSLimit = useMemo(() => {
+    return (
+      name === 'maxTimeMS' &&
+      maxTimeMSEnvLimit && // 0 is falsy, so no limit when 0
+      numericValue >= maxTimeMSEnvLimit
+    );
+  }, [name, maxTimeMSEnvLimit, numericValue]);
+
   return (
     <div
       className={cx(
@@ -200,30 +218,56 @@ const QueryOption: React.FunctionComponent<QueryOptionProps> = ({
           />
         ) : (
           <WithOptionDefinitionTextInputProps definition={optionDefinition}>
-            {({ props }) => (
-              <TextInput
-                aria-labelledby={`query-bar-option-input-${name}-label`}
-                id={id}
-                data-testid={`query-bar-option-${name}-input`}
-                className={cx(
-                  darkMode
-                    ? numericTextInputDarkStyles
-                    : numericTextInputLightStyles,
-                  hasError && optionInputWithErrorStyles
-                )}
-                type="text"
-                sizeVariant="small"
-                state={hasError ? 'error' : 'none'}
-                value={value}
-                onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
-                  onValueChange(evt.currentTarget.value)
-                }
-                onBlur={onBlurEditor}
-                placeholder={placeholder as string}
-                disabled={disabled}
-                {...props}
-              />
-            )}
+            {({ props }) => {
+              const textInput = (
+                <TextInput
+                  aria-labelledby={`query-bar-option-input-${name}-label`}
+                  id={id}
+                  data-testid={`query-bar-option-${name}-input`}
+                  className={cx(
+                    darkMode
+                      ? numericTextInputDarkStyles
+                      : numericTextInputLightStyles,
+                    hasError && optionInputWithErrorStyles
+                  )}
+                  type="text"
+                  sizeVariant="small"
+                  state={hasError ? 'error' : 'none'}
+                  value={value}
+                  onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
+                    onValueChange(evt.currentTarget.value)
+                  }
+                  onBlur={onBlurEditor}
+                  placeholder={placeholder as string}
+                  disabled={disabled}
+                  {...props}
+                />
+              );
+
+              // Wrap maxTimeMS field with tooltip in web environment when exceeding limit
+              if (exceedsMaxTimeMSLimit) {
+                return (
+                  <Tooltip
+                    enabled={true}
+                    open={true}
+                    trigger={({
+                      children,
+                      ...triggerProps
+                    }: React.HTMLProps<HTMLDivElement>) => (
+                      <div {...triggerProps}>
+                        {textInput}
+                        {children}
+                      </div>
+                    )}
+                  >
+                    Operations longer than 5 minutes are not supported in the
+                    web environment
+                  </Tooltip>
+                );
+              }
+
+              return textInput;
+            }}
           </WithOptionDefinitionTextInputProps>
         )}
       </div>
diff --git a/packages/compass-query-bar/src/constants/query-option-definition.ts b/packages/compass-query-bar/src/constants/query-option-definition.ts
@@ -70,12 +70,26 @@ export const OPTION_DEFINITION: {
     link: 'https://docs.mongodb.com/manual/reference/method/cursor.maxTimeMS/',
     extraTextInputProps() {
       const preferenceMaxTimeMS = usePreference('maxTimeMS');
-      const props: { max?: number; placeholder?: string } = {
-        max: preferenceMaxTimeMS,
+      const maxTimeMSEnvLimit = usePreference('maxTimeMSEnvLimit');
+
+      // Determine the effective max limit when environment limit is set (> 0)
+      const effectiveMaxLimit = maxTimeMSEnvLimit
+        ? preferenceMaxTimeMS
+          ? Math.min(preferenceMaxTimeMS, maxTimeMSEnvLimit)
+          : maxTimeMSEnvLimit
+        : preferenceMaxTimeMS;
+
+      const props: {
+        max?: number;
+        placeholder?: string;
+      } = {
+        max: effectiveMaxLimit,
       };
-      if (preferenceMaxTimeMS !== undefined && preferenceMaxTimeMS < 60000) {
-        props.placeholder = String(preferenceMaxTimeMS);
+
+      if (effectiveMaxLimit && effectiveMaxLimit < 60000) {
+        props.placeholder = `${+effectiveMaxLimit}`;
       }
+
       return props;
     },
   },
diff --git a/packages/compass-query-bar/src/stores/query-bar-reducer.ts b/packages/compass-query-bar/src/stores/query-bar-reducer.ts
@@ -52,7 +52,7 @@ type QueryBarState = {
 
 export const INITIAL_STATE: QueryBarState = {
   isReadonlyConnection: false,
-  fields: mapQueryToFormFields({}, DEFAULT_FIELD_VALUES),
+  fields: mapQueryToFormFields({ maxTimeMSEnvLimit: 0 }, DEFAULT_FIELD_VALUES),
   expanded: false,
   serverVersion: '3.6.0',
   lastAppliedQuery: { source: null, query: {} },
@@ -103,6 +103,7 @@ export const changeField = (
   return (dispatch, getState, { preferences }) => {
     const parsedValue = validateField(name, stringValue, {
       maxTimeMS: preferences.getPreferences().maxTimeMS ?? undefined,
+      maxTimeMSEnvLimit: preferences.getPreferences().maxTimeMSEnvLimit,
     });
     const isValid = parsedValue !== false;
     dispatch({
@@ -162,7 +163,7 @@ export const resetQuery = (
       return false;
     }
     const fields = mapQueryToFormFields(
-      { maxTimeMS: preferences.getPreferences().maxTimeMS },
+      preferences.getPreferences(),
       DEFAULT_FIELD_VALUES
     );
     dispatch({ type: QueryBarActions.ResetQuery, fields, source });
@@ -179,10 +180,7 @@ export const setQuery = (
   query: BaseQuery
 ): QueryBarThunkAction<void, SetQueryAction> => {
   return (dispatch, getState, { preferences }) => {
-    const fields = mapQueryToFormFields(
-      { maxTimeMS: preferences.getPreferences().maxTimeMS },
-      query
-    );
+    const fields = mapQueryToFormFields(preferences.getPreferences(), query);
     dispatch({ type: QueryBarActions.SetQuery, fields });
   };
 };
@@ -238,14 +236,11 @@ export const applyFromHistory = (
       }
       return acc;
     }, {});
-    const fields = mapQueryToFormFields(
-      { maxTimeMS: preferences.getPreferences().maxTimeMS },
-      {
-        ...DEFAULT_FIELD_VALUES,
-        ...query,
-        ...currentQuery,
-      }
-    );
+    const fields = mapQueryToFormFields(preferences.getPreferences(), {
+      ...DEFAULT_FIELD_VALUES,
+      ...query,
+      ...currentQuery,
+    });
     dispatch({
       type: QueryBarActions.ApplyFromHistory,
       fields,
diff --git a/packages/compass-query-bar/src/utils/query.ts b/packages/compass-query-bar/src/utils/query.ts
diff --git a/packages/compass-web/src/entrypoint.tsx b/packages/compass-web/src/entrypoint.tsx
