chore(preferences-model): hide all insights behind a feature flag (#4562)

Author: gribnoysup

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx

@@ -20,6 +20,7 @@ import {
 } from '../../../modules/pipeline-builder/builder-helpers';
 import { isOutputStage } from '../../../utils/stage';
 import { openCreateIndexModal } from '../../../modules/insights';
+import { usePreference } from 'compass-preferences-model';
 
 const containerStyles = css({
   display: 'flex',
@@ -72,9 +73,10 @@ export const PipelineActions: React.FunctionComponent<PipelineActionsProps> = ({
   showCollectionScanInsight,
   onCollectionScanInsightActionButtonClick,
 }) => {
+  const showInsights = usePreference('showInsights', React);
   return (
     <div className={containerStyles}>
-      {showCollectionScanInsight && (
+      {showInsights && showCollectionScanInsight && (
         <div>
           <SignalPopover
             signals={{

packages/compass-preferences-model/src/feature-flags.ts

@@ -18,6 +18,7 @@ export type FeatureFlags = {
   enableOidc: boolean; // Not capitalized "OIDC" for spawn arg casing.
   enableStageWizard: boolean;
   newExplainPlan: boolean;
+  showInsights: boolean;
 };
 
 export const featureFlags: Required<{
@@ -66,4 +67,12 @@ export const featureFlags: Required<{
       long: 'Explain plan is now accessible right from the query bar. To view a query’s execution plan, click “Explain” as you would on an aggregation pipeline.',
     },
   },
+
+  showInsights: {
+    stage: 'development',
+    description: {
+      short: 'Show performance insights',
+      long: 'Surface visual signals in the Compass interface to highlight potential performance issues and anti-patterns.',
+    },
+  },
 };

packages/compass-query-bar/src/components/option-editor.tsx

@@ -18,6 +18,7 @@ import {
 } from '@mongodb-js/compass-editor';
 import { connect } from 'react-redux';
 import type { QueryBarState } from '../stores/query-bar-reducer';
+import { usePreference } from 'compass-preferences-model';
 
 const editorStyles = css({
   position: 'relative',
@@ -82,6 +83,8 @@ const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
   ['data-testid']: dataTestId,
   insights,
 }) => {
+  const showInsights = usePreference('showInsights', React);
+
   const editorContainerRef = useRef<HTMLDivElement>(null);
 
   const focusRingProps = useFocusRing({
@@ -139,7 +142,7 @@ const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
         commands={commands}
         data-testid={dataTestId}
       />
-      {insights && (
+      {showInsights && insights && (
         <div className={queryBarEditorOptionInsightsStyles}>
           <SignalPopover signals={insights}></SignalPopover>
         </div>

packages/compass-sidebar/src/components/navigation-items.tsx

@@ -12,7 +12,7 @@ import {
   useDefaultAction,
   SignalPopover,
 } from '@mongodb-js/compass-components';
-import { withPreferences } from 'compass-preferences-model';
+import { usePreference, withPreferences } from 'compass-preferences-model';
 
 import type { ItemAction } from '@mongodb-js/compass-components';
 
@@ -128,10 +128,10 @@ export function NavigationItem<Actions extends string>({
   isActive: boolean;
   showTooManyCollectionsInsight?: boolean;
 }) {
+  const showInsights = usePreference('showInsights', React);
   const onClick = useCallback(() => {
     onAction('open-instance-workspace', tabName);
   }, [onAction, tabName]);
-
   const [hoverProps] = useHoverState();
   const focusRingProps = useFocusRing();
   const defaultActionProps = useDefaultAction(onClick);
@@ -155,7 +155,7 @@ export function NavigationItem<Actions extends string>({
           <Icon glyph={glyph} size="small"></Icon>
           {isExpanded && <span className={navigationItemLabel}>{label}</span>}
         </div>
-        {isExpanded && showTooManyCollectionsInsight && (
+        {showInsights && isExpanded && showTooManyCollectionsInsight && (
           <div className={signalContainerStyles}>
             <SignalPopover
               signals={{

packages/databases-collections-list/src/namespace-param.tsx

@@ -11,6 +11,7 @@ import {
   SignalPopover,
 } from '@mongodb-js/compass-components';
 import type { ViewType } from './use-view-type';
+import { usePreference } from 'compass-preferences-model';
 
 const namespaceParam = css({
   display: 'flex',
@@ -96,6 +97,8 @@ export const NamespaceParam: React.FunctionComponent<{
   viewType: ViewType;
   insights?: React.ComponentProps<typeof SignalPopover>['signals'];
 }> = ({ label, value, status, hint, viewType, insights }) => {
+  const showInsights = usePreference('showInsights', React);
+
   const renderedValue = useMemo(() => {
     const isReady = status !== 'initial' && status !== 'fetching';
     return (
@@ -160,7 +163,9 @@ export const NamespaceParam: React.FunctionComponent<{
         )}
       >
         {renderedValue}
-        {insights && <SignalPopover signals={insights}></SignalPopover>}
+        {showInsights && insights && (
+          <SignalPopover signals={insights}></SignalPopover>
+        )}
       </span>
     </div>
   );