feat(query-bar, collection, explain-plan): replace explain plan tab with explain button COMPASS-6827 (#4465)

* feat(query-bar, collection, explain-plan): replace explain plan tab with explain button

* chore(query-bar): update label to match design

* chore(query-bar): hide cue if explain button was clicked

Author: gribnoysup

package-lock.json

@@ -7,11 +7,16 @@ export const explainAggregation = (): PipelineBuilderThunkAction<void> => {
     const pipeline = getPipelineFromBuilderState(getState(), pipelineBuilder);
     const {
       collationString: { value: collation },
+      maxTimeMS,
     } = getState();
 
     dispatch(
       localAppRegistryEmit('open-explain-plan-modal', {
-        aggregation: { pipeline, collation },
+        aggregation: {
+          pipeline,
+          collation,
+          maxTimeMS,
+        },
       })
     );
   };

packages/compass-aggregations/src/modules/explain.ts

@@ -59,16 +59,18 @@
     "@mongodb-js/compass-components": "^1.9.0",
     "@mongodb-js/compass-logging": "^1.1.6",
     "bson": "^5.2.0",
-    "hadron-app-registry": "^9.0.7",
-    "hadron-ipc": "^3.1.3",
+    "compass-preferences-model": "^2.8.0",
+    "hadron-app-registry": "^9.0.6",
+    "hadron-ipc": "^3.1.2",
     "react": "^17.0.2"
   },
   "dependencies": {
     "@mongodb-js/compass-components": "^1.9.0",
     "@mongodb-js/compass-logging": "^1.1.6",
     "bson": "^5.2.0",
-    "hadron-app-registry": "^9.0.7",
-    "hadron-ipc": "^3.1.3"
+    "compass-preferences-model": "^2.8.0",
+    "hadron-app-registry": "^9.0.6",
+    "hadron-ipc": "^3.1.2"
   },
   "devDependencies": {
     "@mongodb-js/eslint-config-compass": "^1.0.6",

packages/compass-collection/package.json

@@ -1,9 +1,9 @@
 import type AppRegistry from 'hadron-app-registry';
 import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
 import type { Document } from 'mongodb';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { TabNavBar, css } from '@mongodb-js/compass-components';
-
+import { usePreference } from 'compass-preferences-model';
 import CollectionHeader from '../collection-header';
 import { getCollectionStatsInitialState } from '../../modules/stats';
 import type { CollectionStatsMap } from '../../modules/stats';
@@ -77,13 +77,26 @@ const Collection: React.FunctionComponent<CollectionProps> = ({
   sourceName,
   activeSubTab,
   id,
-  tabs,
-  views,
+  tabs: _tabs,
+  views: _views,
   localAppRegistry,
   globalAppRegistry,
   changeActiveSubTab,
   scopedModals,
 }: CollectionProps) => {
+  const newExplainPlan = usePreference('newExplainPlan', React);
+  const explainPlanTabId = _tabs.indexOf('Explain Plan');
+  const tabs = useMemo(() => {
+    return _tabs.filter((_, id) => {
+      return !newExplainPlan || id !== explainPlanTabId;
+    });
+  }, [newExplainPlan, explainPlanTabId, _tabs]);
+  const views = useMemo(() => {
+    return _views.filter((_, id) => {
+      return !newExplainPlan || id !== explainPlanTabId;
+    });
+  }, [newExplainPlan, explainPlanTabId, _views]);
+
   const activeSubTabName =
     tabs && tabs.length > 0
       ? trackingIdForTabName(tabs[activeSubTab] || 'Unknown')

packages/compass-collection/src/components/collection/collection.tsx

@@ -8,15 +8,16 @@ import { mergeProps } from '../utils/merge-props';
 
 const optionContainerStyles = css({
   textAlign: 'center',
-  minWidth: spacing[4] * 5,
 });
 
 const optionsButtonStyles = css({
   // Reset button styles.
   backgroundColor: 'transparent',
   border: 'none',
-
-  padding: `${spacing[1]}px ${spacing[2]}px`,
+  paddingTop: spacing[1],
+  paddingBottom: spacing[1],
+  paddingLeft: spacing[2],
+  paddingRight: spacing[2],
 });
 
 const optionStyles = css({
@@ -25,6 +26,8 @@ const optionStyles = css({
 });
 
 type MoreOptionsToggleProps = {
+  label?: (expanded: boolean) => string;
+  'aria-label'?: (expanded: boolean) => string;
   'aria-controls': string;
   'data-testid'?: string;
   isExpanded: boolean;
@@ -40,20 +43,27 @@ export const MoreOptionsToggle: React.FunctionComponent<
   id,
   'data-testid': dataTestId,
   onToggleOptions,
+  label = (expanded) => {
+    return expanded ? 'Fewer Options' : 'More Options';
+  },
+  'aria-label': ariaLabel,
 }) => {
   const optionsIcon = useMemo(
     () => (isExpanded ? 'CaretDown' : 'CaretRight'),
     [isExpanded]
   );
-  const optionsLabel = useMemo(
-    () => (isExpanded ? 'Fewer Options' : 'More Options'),
-    [isExpanded]
-  );
+  const optionsLabel = label(isExpanded);
+  const labelStyle = useMemo(() => {
+    const maxLabelLength = Math.max(label(true).length, label(false).length);
+    return {
+      // Maximum char length of the more / less label + icon size + button padding
+      width: `calc(${maxLabelLength}ch + ${spacing[3]}px + ${spacing[2]}px)`,
+    };
+  }, [label]);
+  const optionsAriaLabel = ariaLabel?.(isExpanded) ?? optionsLabel;
   const focusRingProps = useFocusRing();
   const buttonProps = mergeProps(
-    {
-      className: optionsButtonStyles,
-    },
+    { className: optionsButtonStyles },
     focusRingProps
     // We cast here so that the `as` prop of link can be properly typed.
   ) as Partial<React.ComponentType<React.ComponentProps<typeof Link>>>;
@@ -62,9 +72,9 @@ export const MoreOptionsToggle: React.FunctionComponent<
   }, [onToggleOptions]);
 
   return (
-    <div className={optionContainerStyles}>
+    <div className={optionContainerStyles} style={labelStyle}>
       <Link
-        aria-label={optionsLabel}
+        aria-label={optionsAriaLabel}
         aria-expanded={isExpanded}
         aria-controls={ariaControls}
         as="button"

packages/compass-components/src/components/more-options-toggle.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * React useState, but the value is persisted in Web API compatible Storage and
+ * initial state is picked up from Storage if exists
+ *
+ * @param id storage key
+ * @param initialValue initial value to use if one is not available
+ * @param storage
+ * @returns
+ */
+function usePersistedState<S>(
+  id: string,
+  initialValue: S | (() => S),
+  storage: Storage = globalThis.localStorage
+) {
+  const idRef = useRef(id);
+  const storageRef = useRef(storage);
+  const [state, setState] = useState<S>(() => {
+    const initialStored = storageRef.current.getItem(idRef.current);
+    if (initialStored) {
+      try {
+        return JSON.parse(initialStored);
+      } catch (e) {
+        throw new Error(
+          'Failed to parse stored value, usePersistedState only supports serializeable values. ' +
+            (e as Error).message
+        );
+      }
+    }
+    if (typeof initialValue === 'function') {
+      return (initialValue as () => S)();
+    }
+    return initialValue;
+  });
+  useEffect(() => {
+    storageRef.current.setItem(idRef.current, JSON.stringify(state));
+  }, [state]);
+  return [state, setState] as const;
+}
+
+export { usePersistedState };

packages/compass-components/src/hooks/use-persisted-state.tsx

@@ -165,3 +165,4 @@ export {
 } from './hooks/use-hotkeys';
 export { rafraf } from './utils/rafraf';
 export { ComboboxWithCustomOption } from './components/combobox-with-custom-option';
+export { usePersistedState } from './hooks/use-persisted-state';

packages/compass-components/src/index.ts

@@ -178,6 +178,7 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
             buttonLabel="Find"
             onApply={onApplyClicked}
             onReset={onResetClicked}
+            showExplainButton
           />
         )}
       </div>

packages/compass-crud/src/components/crud-toolbar.tsx

@@ -32,9 +32,7 @@ describe('ExplainPlanModal', function () {
   });
 
   it('should render ready state', function () {
-    render({
-      status: 'ready',
-    });
+    render({ status: 'ready' });
     expect(screen.getByText('Query Performance Summary')).to.exist;
   });
 });

packages/compass-explain-plan/src/components/explain-plan-modal.spec.tsx

@@ -32,13 +32,15 @@ const ExplainPlanSummaryStat = <T extends string | boolean | number>({
   formatter = defaultFormatter,
   label,
   definition,
+  'data-testid': dataTestId,
 }: {
   as?: keyof ReactHTML;
   glyph?: ReactElement;
   value?: T;
   formatter?: (val: T) => string;
   label: ReactNode;
   definition: string;
+  ['data-testid']?: string;
 }): ReactElement | null => {
   return React.createElement(
     as,
@@ -54,6 +56,7 @@ const ExplainPlanSummaryStat = <T extends string | boolean | number>({
       definition={definition}
       className={statsTextStyles}
       tooltipProps={{ align: 'left', spacing: spacing[3] }}
+      data-testid={dataTestId}
     >
       {typeof value === 'undefined' ? (
         label
@@ -139,7 +142,10 @@ export const ExplainPlanSummary: React.FunctionComponent<
   }, [indexType]);
 
   return (
-    <KeylineCard className={summaryCardStyles}>
+    <KeylineCard
+      className={summaryCardStyles}
+      data-testid="explain-plan-summary"
+    >
       <Subtitle
         className={cx(
           summaryHeadingStyles,
@@ -161,6 +167,7 @@ export const ExplainPlanSummary: React.FunctionComponent<
             </svg>
           }
           value={docsReturned}
+          data-testid="docsReturned"
           label="documents returned"
           definition="Number of documents returned by the query."
         ></ExplainPlanSummaryStat>
@@ -176,6 +183,7 @@ export const ExplainPlanSummary: React.FunctionComponent<
             </svg>
           }
           value={docsExamined}
+          data-testid="docsExamined"
           label="documents examined"
           definition="Number of documents examined during query execution. When an index covers a query, this value is 0."
         ></ExplainPlanSummaryStat>
@@ -190,6 +198,7 @@ export const ExplainPlanSummary: React.FunctionComponent<
             </svg>
           }
           value={executionTimeMs}
+          data-testid="executionTimeMs"
           formatter={(val) => `${String(val)}\xa0ms`}
           label="execution time"
           definition="Total time in milliseconds for query plan selection and query execution."
@@ -207,6 +216,7 @@ export const ExplainPlanSummary: React.FunctionComponent<
             </svg>
           }
           value={sortedInMemory}
+          data-testid="sortedInMemory"
           formatter={(val) => (val ? 'Is' : 'Is not')}
           label="sorted in memory"
           definition="Indicates whether the sort operation occurred in system memory. In-memory sorts perform better than on-disk sorts."
@@ -223,6 +233,7 @@ export const ExplainPlanSummary: React.FunctionComponent<
             </svg>
           }
           value={indexKeysExamined}
+          data-testid="indexKeysExamined"
           label="index keys examined"
           definition="Number of indexes examined to fulfill the query."
         ></ExplainPlanSummaryStat>