[LENS-911] MessageBar custom actions (#1188)

Author: dbchristopher

CHANGELOG.md

@@ -34,8 +34,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `Tooltip` now renders in a `Portal`
 - `TabList` now supports distribute prop
 - `MessageBar`
-  - Sets `canDismiss` to true by default
+  - MessageBar is dismissable by default. Use prop `noActions` in place of `canDismiss={false}` to hide dismiss button.
   - Adds new `visible` prop to toggle display externally
+  - Accepts primary and secondary action overrides and callbacks
 
 ### Fixed
 

packages/components/src/MessageBar/MessageBar.test.tsx

@@ -34,8 +34,45 @@ import {
 import { MessageBar } from './MessageBar'
 
 describe('MessageBar', () => {
-  describe('clear button functionality', () => {
-    test('clearable by default', () => {
+  test('controlled component', () => {
+    const handleDismiss = jest.fn()
+
+    const { getByText, queryByText, rerender } = renderWithTheme(
+      <MessageBar onPrimaryClick={handleDismiss} visible>
+        Message text
+      </MessageBar>
+    )
+
+    // visible message bar
+    expect(getByText('Message text')).toBeInTheDocument()
+
+    // dismiss callback
+    expect(handleDismiss).not.toHaveBeenCalled()
+
+    const dismissButton =
+      getByText('Dismiss Inform').closest('button') ||
+      document.createElement('button') // suppress typescript warning about possible null button
+
+    fireEvent.click(dismissButton)
+
+    expect(handleDismiss).toHaveBeenCalledTimes(1)
+
+    // message bar remains visible until `visible` prop is toggled
+    expect(getByText('Message text')).toBeInTheDocument()
+
+    // dismiss message bar through `visible` prop change
+    rerender(
+      withThemeProvider(
+        <MessageBar onPrimaryClick={handleDismiss} visible={false}>
+          Message text
+        </MessageBar>
+      )
+    )
+    expect(queryByText('Message text')).not.toBeInTheDocument()
+  })
+
+  describe('action buttons', () => {
+    test('renders standard Dismiss button by default', () => {
       const { getByText, queryByText } = renderWithTheme(
         <MessageBar>Message text</MessageBar>
       )
@@ -54,61 +91,107 @@ describe('MessageBar', () => {
       expect(queryByText('Message text')).not.toBeInTheDocument()
     })
 
-    test('controlled component', () => {
-      const handleDismiss = jest.fn()
-
+    test('hides the dismiss button', () => {
       const { getByText, queryByText, rerender } = renderWithTheme(
-        <MessageBar onDismiss={handleDismiss} visible>
-          Message text
-        </MessageBar>
+        <MessageBar>Message text</MessageBar>
       )
 
-      // visible message bar
-      expect(getByText('Message text')).toBeInTheDocument()
+      expect(getByText('Dismiss Inform')).toBeInTheDocument()
 
-      // dismiss callback
-      expect(handleDismiss).not.toHaveBeenCalled()
+      rerender(
+        withThemeProvider(<MessageBar noActions>Message text</MessageBar>)
+      )
 
-      const dismissButton =
-        getByText('Dismiss Inform').closest('button') ||
-        document.createElement('button') // suppress typescript warning about possible null button
+      expect(queryByText('Dismiss Inform')).not.toBeInTheDocument()
+    })
 
-      fireEvent.click(dismissButton)
+    test('accepts a text label to customize primaryAction', () => {
+      const handlePrimaryClick = jest.fn()
+      const { getByText, queryByText } = renderWithTheme(
+        <MessageBar
+          primaryAction="Take the red pill"
+          onPrimaryClick={handlePrimaryClick}
+        >
+          Do you want to know what the matrix is?
+        </MessageBar>
+      )
 
-      expect(handleDismiss).toHaveBeenCalledTimes(1)
+      const primaryButton = getByText('Take the red pill')
 
-      // message bar remains visible until `visible` prop is toggled
-      expect(getByText('Message text')).toBeInTheDocument()
+      expect(primaryButton).toBeInTheDocument()
+      expect(
+        getByText('Do you want to know what the matrix is?')
+      ).toBeInTheDocument()
+      expect(queryByText('Dismiss Inform')).not.toBeInTheDocument()
 
-      // dismiss message bar through `visible` prop change
-      rerender(
-        withThemeProvider(
-          <MessageBar onDismiss={handleDismiss} visible={false}>
-            Message text
-          </MessageBar>
-        )
-      )
-      expect(queryByText('Message text')).not.toBeInTheDocument()
+      fireEvent.click(primaryButton)
+
+      expect(handlePrimaryClick).toBeCalledTimes(1)
+      // clears messageBar on primary action click
+      expect(
+        queryByText('Do you want to know what the matrix is?')
+      ).not.toBeInTheDocument()
     })
 
-    test('`canDismiss` toggles the clear button', () => {
-      const { getByText, queryByText, rerender } = renderWithTheme(
-        <MessageBar>Message text</MessageBar>
+    test('accepts a text label to customize secondaryAction', () => {
+      const handleSecondaryClick = jest.fn()
+      const { getByText, queryByText } = renderWithTheme(
+        <MessageBar
+          secondaryAction="Take the blue pill"
+          onSecondaryClick={handleSecondaryClick}
+        >
+          Do you want to know what the matrix is?
+        </MessageBar>
       )
 
-      expect(getByText('Dismiss Inform')).toBeInTheDocument()
+      const secondaryButton = getByText('Take the blue pill')
 
-      rerender(
-        withThemeProvider(
-          <MessageBar canDismiss={false}>Message text</MessageBar>
-        )
+      expect(secondaryButton).toBeInTheDocument()
+      expect(
+        getByText('Do you want to know what the matrix is?')
+      ).toBeInTheDocument()
+
+      fireEvent.click(secondaryButton)
+
+      expect(handleSecondaryClick).toBeCalledTimes(1)
+      // clears messageBar on secondary action click
+      expect(
+        queryByText('Do you want to know what the matrix is?')
+      ).not.toBeInTheDocument()
+    })
+
+    test('renders custom JSX Button elements for primary and secondary actions', () => {
+      const { getByText, queryByText } = renderWithTheme(
+        <MessageBar
+          intent="inform"
+          primaryAction={<button>Take the red pill</button>}
+          secondaryAction={<button>Take the blue pill</button>}
+        >
+          Message text
+        </MessageBar>
       )
 
+      expect(getByText('Take the red pill')).toBeInTheDocument()
+      expect(getByText('Take the blue pill')).toBeInTheDocument()
       expect(queryByText('Dismiss Inform')).not.toBeInTheDocument()
     })
+
+    test('renders secondaryButton next to default Dismiss button', () => {
+      const { getByText } = renderWithTheme(
+        <MessageBar
+          intent="inform"
+          secondaryAction={<button>secondary action</button>}
+        >
+          Message text
+        </MessageBar>
+      )
+
+      expect(getByText('secondary action')).toBeInTheDocument()
+      expect(getByText('Dismiss Inform')).toBeInTheDocument()
+    })
   })
 
-  describe('MessageBar intents', () => {
+  describe('intent styling', () => {
     test('Warn MessageBar', () => {
       const { getByText, getByTitle } = renderWithTheme(
         <MessageBar intent="warn">Warn</MessageBar>