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

nbbeeken · nbbeeken · commit 26a282f0cfbe · 2025-09-29T15:51:47.000+02: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';
@@ -51,23 +52,58 @@ const collationInputId = 'aggregations-collation-toolbar-input';
 const maxTimeMSLabelId = 'aggregations-max-time-ms-toolbar-input-label';
 const maxTimeMSInputId = 'aggregations-max-time-ms-toolbar-input';
 
+// Data Explorer limits (5 minutes = 300,000ms)
+const WEB_MAX_TIME_MS_LIMIT = 300_000; // 5 minutes
+
 const PipelineCollation: React.FunctionComponent<PipelineCollationProps> = ({
   collationValue,
   collationHasError,
   collationStringChanged,
   maxTimeMSValue,
   maxTimeMSChanged,
 }) => {
+  const showMaxTimeMSWarning = Boolean(usePreference('showMaxTimeMSWarning'));
+
   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 warning is enabled, enforce the hard limit
+        if (showMaxTimeMSWarning && newValue > WEB_MAX_TIME_MS_LIMIT) {
+          maxTimeMSChanged(WEB_MAX_TIME_MS_LIMIT);
+        } else {
+          maxTimeMSChanged(newValue);
+        }
       }
     },
-    [maxTimeMSChanged]
+    [maxTimeMSChanged, showMaxTimeMSWarning]
   );
+
   const maxTimeMSLimit = usePreference('maxTimeMS');
 
+  // Determine the effective max limit when warning is enabled
+  const effectiveMaxLimit = useMemo(() => {
+    if (showMaxTimeMSWarning) {
+      return maxTimeMSLimit
+        ? Math.min(maxTimeMSLimit, WEB_MAX_TIME_MS_LIMIT)
+        : WEB_MAX_TIME_MS_LIMIT;
+    }
+    return maxTimeMSLimit;
+  }, [showMaxTimeMSWarning, maxTimeMSLimit]);
+
+  // Check if value exceeds the limit when warning is enabled
+  const exceedsLimit = Boolean(
+    useMemo(() => {
+      return (
+        showMaxTimeMSWarning &&
+        maxTimeMSValue &&
+        maxTimeMSValue >= WEB_MAX_TIME_MS_LIMIT
+      );
+    }, [showMaxTimeMSWarning, maxTimeMSValue])
+  );
+
   return (
     <div
       className={pipelineOptionsContainerStyles}
@@ -107,27 +143,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
+    showMaxTimeMSWarning?: boolean;
   };
 
 /**
@@ -1050,6 +1052,16 @@ export const storedUserPreferencesProps: Required<{
     validator: z.boolean().default(true),
     type: 'boolean',
   },
+  showMaxTimeMSWarning: {
+    ui: true,
+    cli: true,
+    global: true,
+    description: {
+      short: 'Show Max Time MS over 5min Warning for Data Explorer',
+    },
+    validator: z.boolean().default(false),
+    type: 'boolean',
+  },
 
   ...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',
@@ -79,6 +81,9 @@ export const documentEditorLabelContainerStyles = css(
   }
 );
 
+// Data Explorer limits for maxTimeMS (5 minutes = 300,000ms)
+const WEB_MAX_TIME_MS_LIMIT = 300_000; // 5 minutes
+
 type QueryBarProperty = Exclude<QueryProperty, 'update'>;
 
 type QueryOptionProps = {
@@ -153,6 +158,24 @@ const QueryOption: React.FunctionComponent<QueryOptionProps> = ({
     }
   }, [track, name, connectionInfoRef]);
 
+  // MaxTimeMS warning tooltip logic
+  const showMaxTimeMSWarning = Boolean(usePreference('showMaxTimeMSWarning'));
+  const numericValue = useMemo(() => {
+    if (!value) return 0;
+    const parsed = Number(value);
+    return Number.isNaN(parsed) ? 0 : parsed;
+  }, [value]);
+
+  const exceedsMaxTimeMSLimit = Boolean(
+    useMemo(() => {
+      return (
+        name === 'maxTimeMS' &&
+        showMaxTimeMSWarning &&
+        numericValue >= WEB_MAX_TIME_MS_LIMIT
+      );
+    }, [name, showMaxTimeMSWarning, numericValue])
+  );
+
   return (
     <div
       className={cx(
@@ -200,30 +223,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
@@ -9,6 +9,9 @@ export type QueryOptionOfTypeDocument = Exclude<
   'maxTimeMS' | 'limit' | 'skip'
 >;
 
+// Data Explorer limits (5 minutes = 300,000ms)
+const WEB_MAX_TIME_MS_LIMIT = 300_000; // 5 minutes
+
 export const OPTION_DEFINITION: {
   [optionName in QueryOption]: {
     name: optionName;
@@ -70,12 +73,27 @@ 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 showMaxTimeMSWarning =
+        usePreference('showMaxTimeMSWarning') ?? false;
+
+      // Determine the effective max limit when warning is enabled
+      const effectiveMaxLimit = showMaxTimeMSWarning
+        ? preferenceMaxTimeMS
+          ? Math.min(preferenceMaxTimeMS, WEB_MAX_TIME_MS_LIMIT)
+          : WEB_MAX_TIME_MS_LIMIT
+        : preferenceMaxTimeMS;
+
+      const props: {
+        max?: number;
+        placeholder?: string;
+      } = {
+        max: effectiveMaxLimit,
       };
-      if (preferenceMaxTimeMS !== undefined && preferenceMaxTimeMS < 60000) {
-        props.placeholder = String(preferenceMaxTimeMS);
+
+      if (effectiveMaxLimit !== undefined && effectiveMaxLimit < 60000) {
+        props.placeholder = String(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
@@ -103,6 +103,8 @@ export const changeField = (
   return (dispatch, getState, { preferences }) => {
     const parsedValue = validateField(name, stringValue, {
       maxTimeMS: preferences.getPreferences().maxTimeMS ?? undefined,
+      showMaxTimeMSWarning:
+        Boolean(preferences.getPreferences().showMaxTimeMSWarning) ?? false,
     });
     const isValid = parsedValue !== false;
     dispatch({
@@ -162,7 +164,12 @@ export const resetQuery = (
       return false;
     }
     const fields = mapQueryToFormFields(
-      { maxTimeMS: preferences.getPreferences().maxTimeMS },
+      {
+        maxTimeMS: preferences.getPreferences().maxTimeMS,
+        showMaxTimeMSWarning: Boolean(
+          preferences.getPreferences().showMaxTimeMSWarning
+        ),
+      },
       DEFAULT_FIELD_VALUES
     );
     dispatch({ type: QueryBarActions.ResetQuery, fields, source });
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
