have the icon show up as default and show full on expand

Author: rubydong

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

@@ -51,23 +51,6 @@ describe('SignalPopover', function () {
     });
   });
 
-  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 () {
     it('should call hooks through the signal lifecycle', function () {
       const hooks: React.ComponentProps<typeof SignalHooksProvider> = {

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

@@ -124,7 +124,6 @@ type SignalPopoverProps = {
   darkMode?: boolean;
   onPopoverOpenChange?: (open: boolean) => void;
   className?: string;
-  shouldExpandBadge?: boolean;
 };
 
 const signalCardContentStyles = css({
@@ -442,7 +441,6 @@ const SignalPopover: React.FunctionComponent<SignalPopoverProps> = ({
   darkMode: _darkMode,
   onPopoverOpenChange: _onPopoverOpenChange,
   className,
-  shouldExpandBadge,
 }) => {
   const hooks = useContext(TrackingHooksContext);
   const darkMode = useDarkMode(_darkMode);
@@ -455,7 +453,6 @@ const SignalPopover: React.FunctionComponent<SignalPopoverProps> = ({
   const currentSignal = signals[currentSignalIndex];
   const multiSignals = signals.length > 1;
   const isActive = isHovered || popoverOpen;
-  const shouldShowFullBadge = isActive || shouldExpandBadge;
 
   const triggerRef = useRef<HTMLButtonElement>(null);
 
@@ -592,7 +589,7 @@ const SignalPopover: React.FunctionComponent<SignalPopoverProps> = ({
                     className
                   ),
                   style: {
-                    width: shouldShowFullBadge ? activeBadgeWidth : 18,
+                    width: isActive ? activeBadgeWidth : 18,
                   },
                   ref: triggerRef,
                 },
@@ -611,7 +608,7 @@ const SignalPopover: React.FunctionComponent<SignalPopoverProps> = ({
                       size="small"
                       className={cx(badgeIconStyles, badgeIconCollapsedStyles)}
                       data-testid="insight-badge-icon"
-                      style={{ opacity: shouldShowFullBadge ? 0 : 1 }}
+                      style={{ opacity: isActive ? 0 : 1 }}
                     ></Icon>
                     <strong
                       className={cx(
@@ -621,7 +618,7 @@ const SignalPopover: React.FunctionComponent<SignalPopoverProps> = ({
                       data-testid="insight-badge-text"
                       style={{
                         width: activeBadgeWidth,
-                        opacity: shouldShowFullBadge ? 1 : 0,
+                        opacity: isActive ? 1 : 0,
                       }}
                     >
                       {badgeLabel}

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

@@ -258,9 +258,7 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
               onClick={onDeleteButtonClicked}
             ></DeleteMenu>
           )}
-          {insights && (
-            <SignalPopover signals={insights} shouldExpandBadge={true} />
-          )}
+          {insights && <SignalPopover signals={insights} />}
         </div>
         <div className={toolbarRightActionStyles}>
           <Select