feat: move the signal from query bar to outside of it CLOUDP-311778 (#6868)

* extracted signal out from the query bar

* added tests

* fixed light bulb showing up when it's not supposed to

* cleaned up traces of insights from query bar

* remove unused imports

Author: rubydong

packages/compass-components/src/components/signal-popover.spec.tsx

@@ -42,6 +42,30 @@ describe('SignalPopover', function () {
     expect(screen.getByText('Unbounded array detected')).to.exist;
     userEvent.click(screen.getByTitle('Show next insight'));
     expect(screen.getByText('Possibly bloated documents')).to.exist;
+
+    it('and the badge should read 2 insights without the icon showing up', function () {
+      expect(screen.getByText('2 insights')).to.exist;
+      expect(screen.getByTestId('insight-badge-icon').style.opacity).to.equal(
+        '0'
+      );
+    });
+  });
+
+  it('should show insights badge text by default if shouldExpandBadge is true', function () {
+    const { rerender } = render(
+      <SignalPopover signals={signals[0]} shouldExpandBadge={false} />
+    );
+
+    // opacity: 0 means that the text will not show up
+    expect(screen.getByTestId('insight-badge-text').style.opacity).to.equal(
+      '0'
+    );
+
+    rerender(<SignalPopover signals={signals[0]} shouldExpandBadge={true} />);
+    // opacity: 1 means that the text will show up
+    expect(screen.getByTestId('insight-badge-text').style.opacity).to.equal(
+      '1'
+    );
   });
 
   describe('SignalHooksProvider', function () {

packages/compass-components/src/components/signal-popover.tsx

@@ -124,6 +124,7 @@ type SignalPopoverProps = {
   darkMode?: boolean;
   onPopoverOpenChange?: (open: boolean) => void;
   className?: string;
+  shouldExpandBadge?: boolean;
 };
 
 const signalCardContentStyles = css({
@@ -441,6 +442,7 @@ const SignalPopover: React.FunctionComponent<SignalPopoverProps> = ({
   darkMode: _darkMode,
   onPopoverOpenChange: _onPopoverOpenChange,
   className,
+  shouldExpandBadge,
 }) => {
   const hooks = useContext(TrackingHooksContext);
   const darkMode = useDarkMode(_darkMode);
@@ -449,9 +451,11 @@ const SignalPopover: React.FunctionComponent<SignalPopoverProps> = ({
   const [hoverProps, isHovered, setHovered] = useHoverState();
   const [currentSignalIndex, setCurrentSignalIndex] = useState(0);
   const signals = Array.isArray(_signals) ? _signals : [_signals];
+
   const currentSignal = signals[currentSignalIndex];
   const multiSignals = signals.length > 1;
   const isActive = isHovered || popoverOpen;
+  const shouldShowFullBadge = isActive || shouldExpandBadge;
 
   const triggerRef = useRef<HTMLButtonElement>(null);
 
@@ -587,7 +591,9 @@ const SignalPopover: React.FunctionComponent<SignalPopoverProps> = ({
                         ]),
                     className
                   ),
-                  style: { width: isActive ? activeBadgeWidth : 18 },
+                  style: {
+                    width: shouldShowFullBadge ? activeBadgeWidth : 18,
+                  },
                   ref: triggerRef,
                 },
                 { ref: guideCueRef }
@@ -604,16 +610,18 @@ const SignalPopover: React.FunctionComponent<SignalPopoverProps> = ({
                       glyph="Bulb"
                       size="small"
                       className={cx(badgeIconStyles, badgeIconCollapsedStyles)}
-                      style={{ opacity: isActive ? 0 : 1 }}
+                      data-testid="insight-badge-icon"
+                      style={{ opacity: shouldShowFullBadge ? 0 : 1 }}
                     ></Icon>
                     <strong
                       className={cx(
                         badgeLabelStyles,
                         !multiSignals && singleInsightBadge
                       )}
+                      data-testid="insight-badge-text"
                       style={{
                         width: activeBadgeWidth,
-                        opacity: isActive ? 1 : 0,
+                        opacity: shouldShowFullBadge ? 1 : 0,
                       }}
                     >
                       {badgeLabel}

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

@@ -12,6 +12,7 @@ import {
   ErrorSummary,
   Select,
   Option,
+  SignalPopover,
 } from '@mongodb-js/compass-components';
 import type { MenuAction, Signal } from '@mongodb-js/compass-components';
 import { ViewSwitcher } from './view-switcher';
@@ -199,7 +200,6 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
     () => querySkip || queryLimit,
     [querySkip, queryLimit]
   );
-
   return (
     <div className={crudToolbarStyles}>
       <div className={crudQueryBarStyles}>
@@ -210,7 +210,6 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
           onApply={onApplyClicked}
           onReset={onResetClicked}
           showExplainButton={enableExplainPlan}
-          insights={insights}
         />
       </div>
       <div className={crudBarStyles}>
@@ -259,6 +258,9 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
               onClick={onDeleteButtonClicked}
             ></DeleteMenu>
           )}
+          {insights && (
+            <SignalPopover signals={insights} shouldExpandBadge={true} />
+          )}
         </div>
         <div className={toolbarRightActionStyles}>
           <Select

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

@@ -1,12 +1,10 @@
 import React, { useMemo, useRef } from 'react';
-import type { Signal } from '@mongodb-js/compass-components';
 import {
   css,
   cx,
   useFocusRing,
   palette,
   spacing,
-  SignalPopover,
   rafraf,
   useDarkMode,
 } from '@mongodb-js/compass-components';
@@ -78,30 +76,6 @@ const editorWithErrorStyles = css({
   },
 });
 
-const queryBarEditorOptionInsightsStyles = css({
-  alignSelf: 'flex-start',
-  // To align the icon in the middle of the first line of the editor input
-  // (<input height> - <insight badge height>) / 2
-  paddingTop: 3,
-  paddingBottom: 3,
-  paddingLeft: 3,
-  paddingRight: 3,
-
-  // We make container the size of the collapsed insight to avoid additional
-  // shrinking of the editor content when hoveing over the icon. In this case
-  // it's okay for the content to be hidden by the expanded badge as user is
-  // interacting with the badge
-  width: spacing[4],
-  height: spacing[4],
-  overflow: 'visible',
-  display: 'flex',
-  justifyContent: 'flex-end',
-});
-
-const insightsBadgeStyles = css({
-  flex: 'none',
-});
-
 type OptionEditorProps = {
   optionName: QueryOptionOfTypeDocument;
   namespace: string;
@@ -119,7 +93,6 @@ type OptionEditorProps = {
   serverVersion?: string;
   value?: string;
   ['data-testid']?: string;
-  insights?: Signal | Signal[];
   disabled?: boolean;
   recentQueries: AutoCompleteRecentQuery[];
   favoriteQueries: AutoCompleteFavoriteQuery[];
@@ -139,13 +112,11 @@ export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
   serverVersion = '3.6.0',
   value = '',
   ['data-testid']: dataTestId,
-  insights,
   disabled = false,
   recentQueries,
   favoriteQueries,
   onApplyQuery,
 }) => {
-  const showInsights = usePreference('showInsights');
   const editorContainerRef = useRef<HTMLDivElement>(null);
   const editorRef = useRef<EditorRef>(null);
   const isQueryHistoryAutocompleteEnabled = usePreference(
@@ -299,14 +270,6 @@ export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
         onPaste={onPaste}
         onBlur={onBlur}
       />
-      {showInsights && insights && (
-        <div className={queryBarEditorOptionInsightsStyles}>
-          <SignalPopover
-            className={insightsBadgeStyles}
-            signals={insights}
-          ></SignalPopover>
-        </div>
-      )}
     </div>
   );
 };

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

@@ -15,7 +15,6 @@ import {
 } from '@mongodb-js/compass-generative-ai';
 import { connect } from '../stores/context';
 import { useIsAIFeatureEnabled } from 'compass-preferences-model/provider';
-import type { Signal } from '@mongodb-js/compass-components';
 
 import {
   OPTION_DEFINITION,
@@ -124,7 +123,6 @@ type QueryBarProps = {
   expanded: boolean;
   placeholders?: Record<QueryProperty, string>;
   onExplain?: () => void;
-  insights?: Signal | Signal[];
   isAIInputVisible?: boolean;
   isAIFetching?: boolean;
   onShowAIInputClick: () => void;
@@ -153,7 +151,6 @@ export const QueryBar: React.FunctionComponent<QueryBarProps> = ({
   expanded: isQueryOptionsExpanded,
   placeholders,
   onExplain,
-  insights,
   isAIInputVisible = false,
   isAIFetching = false,
   onShowAIInputClick,
@@ -229,7 +226,6 @@ export const QueryBar: React.FunctionComponent<QueryBarProps> = ({
             id={filterQueryOptionId}
             onApply={onApply}
             placeholder={filterPlaceholder}
-            insights={insights}
             disabled={isAIFetching}
           />
           {showAIEntryButton && (

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

@@ -1,5 +1,4 @@
 import React, { useCallback, useRef } from 'react';
-import type { Signal } from '@mongodb-js/compass-components';
 import {
   Label,
   TextInput,
@@ -90,7 +89,6 @@ type QueryOptionProps = {
   onChange: (name: QueryBarProperty, value: string) => void;
   placeholder?: string | HTMLElement;
   onApply?(): void;
-  insights?: Signal | Signal[];
   disabled?: boolean;
 };
 
@@ -122,7 +120,6 @@ const QueryOption: React.FunctionComponent<QueryOptionProps> = ({
   name,
   value,
   onApply,
-  insights,
   disabled = false,
 }) => {
   const track = useTelemetry();
@@ -199,7 +196,6 @@ const QueryOption: React.FunctionComponent<QueryOptionProps> = ({
             value={value}
             data-testid={`query-bar-option-${name}-input`}
             onApply={onApply}
-            insights={insights}
             disabled={disabled}
           />
         ) : (