chore(compass-components): add signal-popover component COMPASS-6828 (#4517)

chore(compass-components): add signal-popover component

Author: gribnoysup

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

@@ -43,11 +43,11 @@ const closeButtonStyles = css({
 });
 
 type InteractivePopoverProps = {
-  className: string;
-  children: React.ReactElement;
+  className?: string;
+  children: React.ReactNode;
   trigger: (triggerProps: {
     onClick: (event: React.MouseEvent | React.TouchEvent) => void;
-    ref: React.RefObject<HTMLButtonElement>;
+    ref: React.LegacyRef<HTMLButtonElement>;
     children: React.ReactNode;
   }) => React.ReactElement;
   open: boolean;
@@ -56,7 +56,12 @@ type InteractivePopoverProps = {
    * List of selector to consider contained elements to skip closing on click
    */
   containedElements?: string[];
-};
+  containerClassName?: string;
+  closeButtonClassName?: string;
+} & Pick<
+  React.ComponentProps<typeof Popover>,
+  'align' | 'justify' | 'spacing' | 'popoverZIndex'
+>;
 
 function InteractivePopover({
   className,
@@ -65,6 +70,12 @@ function InteractivePopover({
   open,
   setOpen,
   containedElements = [],
+  align,
+  justify,
+  spacing,
+  popoverZIndex,
+  containerClassName,
+  closeButtonClassName,
 }: InteractivePopoverProps): React.ReactElement {
   const darkMode = useDarkMode();
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -141,47 +152,48 @@ function InteractivePopover({
     ref: triggerRef,
     children: (
       <Popover
-        align="bottom"
-        justify="start"
+        align={align ?? 'bottom'}
+        justify={justify ?? 'start'}
         active={open}
         adjustOnMutation
         usePortal
-        spacing={0}
+        spacing={spacing ?? 0}
         className={className}
         refEl={triggerRef}
+        popoverZIndex={popoverZIndex}
       >
-        {open && (
-          <FocusTrap
-            focusTrapOptions={{
-              clickOutsideDeactivates: true,
-              // Tests fail without a fallback. (https://github.com/focus-trap/focus-trap-react/issues/91)
-              fallbackFocus: `#${closeButtonId}`,
-            }}
+        <FocusTrap
+          active={open}
+          focusTrapOptions={{
+            clickOutsideDeactivates: true,
+            // Tests fail without a fallback. (https://github.com/focus-trap/focus-trap-react/issues/91)
+            fallbackFocus: `#${closeButtonId}`,
+          }}
+        >
+          <div
+            className={cx(
+              contentContainerStyles,
+              darkMode
+                ? contentContainerStylesDark
+                : contentContainerStylesLight,
+              containerClassName
+            )}
+            ref={popoverContentContainerRef}
           >
-            <div
-              className={cx(
-                contentContainerStyles,
-                darkMode
-                  ? contentContainerStylesDark
-                  : contentContainerStylesLight
-              )}
-              ref={popoverContentContainerRef}
+            {children}
+
+            <IconButton
+              className={cx(closeButtonStyles, closeButtonClassName)}
+              data-testid="interactive-popover-close-button"
+              onClick={onClose}
+              aria-label="Close"
+              id={closeButtonId}
+              ref={closeButtonRef}
             >
-              {children}
-
-              <IconButton
-                className={closeButtonStyles}
-                data-testid="interactive-popover-close-button"
-                onClick={onClose}
-                aria-label="Close"
-                id={closeButtonId}
-                ref={closeButtonRef}
-              >
-                <Icon glyph="X" />
-              </IconButton>
-            </div>
-          </FocusTrap>
-        )}
+              <Icon glyph="X" />
+            </IconButton>
+          </div>
+        </FocusTrap>
       </Popover>
     ),
   });

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, cleanup, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SignalPopover } from './signal-popover';
+import { expect } from 'chai';
+
+const signals = [
+  {
+    id: 'unbounded-array',
+    title: 'Unbounded array detected',
+    description:
+      'As arrays get larger, queries and indexes on that array field become less efficient. Ensure your arrays are bounded to maintain optimal query performance.',
+    learnMoreLink: 'https://example.com',
+    primaryActionButtonLabel: 'Bound those arrays',
+  },
+  {
+    id: 'bloated-docs',
+    title: 'Possibly bloated documents',
+    description:
+      'Large documents can slow down queries by decreasing the number of documents that can be stored in RAM. Consider breaking up your data into more collections with smaller documents, and using references to consolidate the data you need.',
+    learnMoreLink: 'https://example.com',
+  },
+];
+
+describe('SignalPopover', function () {
+  afterEach(cleanup);
+
+  it('should render a signal', function () {
+    render(<SignalPopover signals={signals[0]}></SignalPopover>);
+    userEvent.click(screen.getByTestId('insight-badge-button'));
+    expect(screen.getByText('Unbounded array detected')).to.exist;
+  });
+
+  it('should render multiple signals', function () {
+    render(<SignalPopover signals={signals}></SignalPopover>);
+    userEvent.click(screen.getByTestId('insight-badge-button'));
+    expect(screen.getByText('Unbounded array detected')).to.exist;
+    userEvent.click(screen.getByTitle('Show next insight'));
+    expect(screen.getByText('Possibly bloated documents')).to.exist;
+  });
+});