feat(header-flyout): optionally allow header actions (#4164)

* feat(header-flyout): optionally allow header actions

* feat(header-flyout): update specs

* feat(header-flyout): add default value to prop

* feat(header-flyout): update snapshot

* feat(header-flyout): update spec message

* feat(header-flyout): update spec

* feat(flyout): rerun pipeline

* feat(flyout): rerun pipeline

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: jmcbgaston

src/components/flyout/OverlayHeader.tsx

@@ -12,12 +12,16 @@ export interface OverlayHeaderProps {
     children?: React.ReactNode;
     /** Set className to the overlay header */
     className?: string;
+    /** Are OverlayHeader actions enabled */
+    isOverlayHeaderActionEnabled?: boolean;
 }
 
-const OverlayHeader = ({ children, className }: OverlayHeaderProps) => {
+const OverlayHeader = ({ children, className, isOverlayHeaderActionEnabled = false }: OverlayHeaderProps) => {
     const handleClick = (event: React.SyntheticEvent<HTMLDivElement>): void => {
-        event.preventDefault();
-        event.stopPropagation();
+        if (!isOverlayHeaderActionEnabled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
     };
     // @ts-ignore TODO: figure out why this is giving a TS error
     const { closeOverlay } = React.useContext(FlyoutContext);

src/components/flyout/__tests__/OverlayHeader.test.js

@@ -52,5 +52,30 @@ describe('components/flyout/OverlayHeader', () => {
             fireEvent.click(screen.getByRole('button'));
             expect(overlayClick).toHaveBeenCalledTimes(0);
         });
+
+        test.each([
+            {
+                isOverlayHeaderActionEnabled: false,
+                expectedCallCount: 0,
+                behavior: 'prevent default and stop propagation',
+            },
+            { isOverlayHeaderActionEnabled: true, expectedCallCount: 1, behavior: 'allow default and propagation' },
+        ])(
+            'should $behavior when isOverlayHeaderActionEnabled is $isOverlayHeaderActionEnabled',
+            ({ isOverlayHeaderActionEnabled, expectedCallCount }) => {
+                const overlayClick = jest.fn();
+
+                render(
+                    <div role="presentation" onClick={overlayClick}>
+                        <OverlayHeader isOverlayHeaderActionEnabled={isOverlayHeaderActionEnabled}>
+                            <p>Hi</p>
+                        </OverlayHeader>
+                    </div>,
+                );
+
+                fireEvent.click(screen.getByRole('button'));
+                expect(overlayClick).toHaveBeenCalledTimes(expectedCallCount);
+            },
+        );
     });
 });

src/features/header-flyout/HeaderFlyout.js

@@ -20,6 +20,8 @@ type Props = FlyoutProps & {
     header?: React.Element<any>,
     /** Optional function to get the scrollRef in parent components */
     scrollRefFn?: any => any,
+    /** Are OverlayHeader actions enabled */
+    isOverlayHeaderActionEnabled?: boolean,
 };
 
 class HeaderFlyout extends React.Component<Props> {
@@ -30,7 +32,16 @@ class HeaderFlyout extends React.Component<Props> {
     };
 
     render() {
-        const { header, footer, flyoutButton, children, scrollRefFn, className, ...rest } = this.props;
+        const {
+            header,
+            footer,
+            flyoutButton,
+            children,
+            scrollRefFn,
+            className,
+            isOverlayHeaderActionEnabled = false,
+            ...rest
+        } = this.props;
 
         return (
             <Flyout
@@ -42,7 +53,9 @@ class HeaderFlyout extends React.Component<Props> {
             >
                 {flyoutButton}
                 <Overlay className="header-flyout-overlay">
-                    <OverlayHeader>{header && <h4 className="header-flyout-title">{header}</h4>}</OverlayHeader>
+                    <OverlayHeader isOverlayHeaderActionEnabled={isOverlayHeaderActionEnabled}>
+                        {header && <h4 className="header-flyout-title">{header}</h4>}
+                    </OverlayHeader>
                     <div className="header-flyout-list-container">
                         <div
                             className={classNames('flyout-list-container-body', {

src/features/header-flyout/__tests__/__snapshots__/HeaderFlyout.test.js.snap

@@ -21,7 +21,9 @@ exports[`components/core/header/components/HeaderFlyout render() should include
   <Overlay
     className="header-flyout-overlay"
   >
-    <OverlayHeader>
+    <OverlayHeader
+      isOverlayHeaderActionEnabled={false}
+    >
       <h4
         className="header-flyout-title"
       >
@@ -78,7 +80,9 @@ exports[`components/core/header/components/HeaderFlyout render() should render d
   <Overlay
     className="header-flyout-overlay"
   >
-    <OverlayHeader />
+    <OverlayHeader
+      isOverlayHeaderActionEnabled={false}
+    />
     <div
       className="header-flyout-list-container"
     >
@@ -123,7 +127,9 @@ exports[`components/core/header/components/HeaderFlyout render() should render t
   <Overlay
     className="header-flyout-overlay"
   >
-    <OverlayHeader />
+    <OverlayHeader
+      isOverlayHeaderActionEnabled={false}
+    />
     <div
       className="header-flyout-list-container"
     >