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

Author: rubydong

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

@@ -42,9 +42,16 @@ 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 only if shouldExpandBadge is true', function () {
+  it('should show insights badge text by default if shouldExpandBadge is true', function () {
     const { rerender } = render(
       <SignalPopover signals={signals[0]} shouldExpandBadge={false} />
     );

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

@@ -451,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);
 
@@ -590,8 +592,7 @@ const SignalPopover: React.FunctionComponent<SignalPopoverProps> = ({
                     className
                   ),
                   style: {
-                    width:
-                      isActive || shouldExpandBadge ? activeBadgeWidth : 18,
+                    width: shouldShowFullBadge ? activeBadgeWidth : 18,
                   },
                   ref: triggerRef,
                 },
@@ -609,7 +610,8 @@ 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(
@@ -619,7 +621,7 @@ const SignalPopover: React.FunctionComponent<SignalPopoverProps> = ({
                       data-testid="insight-badge-text"
                       style={{
                         width: activeBadgeWidth,
-                        opacity: isActive || shouldExpandBadge ? 1 : 0,
+                        opacity: shouldShowFullBadge ? 1 : 0,
                       }}
                     >
                       {badgeLabel}