feat(content-picker): convert Footer to TypeScript (#3939)

* feat(content-picker): convert Footer component to TypeScript

* test(content-picker): convert Footer tests to TypeScript and React Testing Library

* fix(content-picker): restore disabled attribute for accessibility

* fix(content-picker): fix PrimaryButton props typing

* refactor(content-picker): switch Footer to use useIntl hook

* fix(content-picker): improve accessibility and test assertions

* fix(button-group): revert aria attribute changes

* fix(content-picker): remove group role test and attributes

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: devin-ai-integration[bot]

src/elements/content-picker/Footer.js renamed to src/elements/content-picker/Footer.tsx

@@ -1,53 +1,44 @@
-/**
- * @flow
- * @file Footer list component
- * @author Box
- */
-
 import * as React from 'react';
-import { injectIntl, FormattedMessage } from 'react-intl';
-import type { Node } from 'react';
-
+import { FormattedMessage, useIntl } from 'react-intl';
 import type { Collection, BoxItem } from '../../common/types/core';
-import Button from '../../components/button';
+import Button, { ButtonType } from '../../components/button';
 import ButtonGroup from '../../components/button-group';
 import IconCheck from '../../icons/general/IconCheck';
 import IconClose from '../../icons/general/IconClose';
 import messages from '../common/messages';
-
 import PrimaryButton from '../../components/primary-button';
 import Tooltip from '../common/Tooltip';
 import './Footer.scss';
 
-type Props = {
-    cancelButtonLabel?: string,
-    children?: any,
-    chooseButtonLabel?: string,
-    currentCollection: Collection,
-    hasHitSelectionLimit: boolean,
-    intl: any,
-    isSingleSelect: boolean,
-    onCancel: Function,
-    onChoose: Function,
-    onSelectedClick: Function,
-    renderCustomActionButtons?: ({
-        onCancel: Function,
-        onChoose: Function,
-        selectedCount: number,
-        selectedItems: BoxItem[],
-    }) => Node,
-    selectedCount: number,
-    selectedItems: BoxItem[],
-    showSelectedButton: boolean,
-};
+interface Props {
+    cancelButtonLabel?: string;
+    children?: React.ReactNode;
+    chooseButtonLabel?: string;
+    currentCollection: Collection;
+    hasHitSelectionLimit: boolean;
+    isSingleSelect: boolean;
+    onCancel: () => void;
+    onChoose: () => void;
+    onSelectedClick: () => void;
+    renderCustomActionButtons?: (options: {
+        currentFolderId: string;
+        currentFolderName: string;
+        onCancel: () => void;
+        onChoose: () => void;
+        selectedCount: number;
+        selectedItems: BoxItem[];
+    }) => React.ReactNode;
+    selectedCount: number;
+    selectedItems: BoxItem[];
+    showSelectedButton: boolean;
+}
 
 const Footer = ({
     currentCollection,
     selectedCount,
     selectedItems,
     onSelectedClick,
     hasHitSelectionLimit,
-    intl,
     isSingleSelect,
     onCancel,
     onChoose,
@@ -56,15 +47,17 @@ const Footer = ({
     children,
     renderCustomActionButtons,
     showSelectedButton,
-}: Props) => {
-    const cancelMessage = intl.formatMessage(messages.cancel);
-    const chooseMessage = intl.formatMessage(messages.choose);
+}: Props): React.ReactElement => {
+    const { formatMessage } = useIntl();
+    const cancelMessage = formatMessage(messages.cancel);
+    const chooseMessage = formatMessage(messages.choose);
     const isChooseButtonDisabled = !selectedCount;
+
     return (
         <footer className="bcp-footer">
             <div className="bcp-footer-left">
                 {showSelectedButton && !isSingleSelect && (
-                    <Button className="bcp-selected" onClick={onSelectedClick} type="button">
+                    <Button className="bcp-selected" onClick={onSelectedClick} type={ButtonType.BUTTON}>
                         <FormattedMessage
                             className="bcp-selected-count"
                             {...messages.selected}
@@ -80,7 +73,6 @@ const Footer = ({
             </div>
             <div className="bcp-footer-right">
                 {children}
-
                 {renderCustomActionButtons ? (
                     renderCustomActionButtons({
                         currentFolderId: currentCollection.id,
@@ -93,17 +85,17 @@ const Footer = ({
                 ) : (
                     <ButtonGroup className="bcp-footer-actions">
                         <Tooltip text={cancelButtonLabel || cancelMessage}>
-                            <Button aria-label={cancelMessage} onClick={onCancel} type="button">
+                            <Button aria-label={cancelMessage} onClick={onCancel} type={ButtonType.BUTTON}>
                                 <IconClose height={16} width={16} />
                             </Button>
                         </Tooltip>
                         <Tooltip isDisabled={isChooseButtonDisabled} text={chooseButtonLabel || chooseMessage}>
                             <PrimaryButton
                                 aria-label={chooseMessage}
-                                disabled={isChooseButtonDisabled} // sets disabled attribute
-                                isDisabled={isChooseButtonDisabled} // used in Button component
+                                isDisabled={isChooseButtonDisabled}
                                 onClick={onChoose}
-                                type="button"
+                                type={ButtonType.BUTTON}
+                                {...{ disabled: isChooseButtonDisabled }} // sets disabled attribute for native HTML button
                             >
                                 <IconCheck color="#fff" height={16} width={16} />
                             </PrimaryButton>
@@ -115,4 +107,4 @@ const Footer = ({
     );
 };
 
-export default injectIntl(Footer);
+export default Footer;

src/elements/content-picker/__tests__/Footer.test.js

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { render, screen } from '../../../test-utils/testing-library';
+import Footer from '../Footer';
+import type { Collection, BoxItem } from '../../../common/types/core';
+
+describe('elements/content-picker/Footer', () => {
+    const defaultProps = {
+        children: <div data-testid="footer-child" />,
+        currentCollection: { id: '123', name: 'Folder' } as Collection,
+        hasHitSelectionLimit: false,
+        isSingleSelect: false,
+        onCancel: jest.fn(),
+        onChoose: jest.fn(),
+        onSelectedClick: jest.fn(),
+        selectedCount: 0,
+        selectedItems: [] as BoxItem[],
+        showSelectedButton: true,
+    };
+
+    const renderComponent = (props = {}) => {
+        render(<Footer {...defaultProps} {...props} />);
+    };
+
+    test('should render Footer', () => {
+        renderComponent();
+
+        expect(screen.getByRole('contentinfo')).toBeInTheDocument();
+        expect(screen.getByTestId('footer-child')).toBeInTheDocument();
+    });
+
+    test('should render footer with disabled button', () => {
+        renderComponent();
+
+        const chooseButton = screen.getByRole('button', { name: 'Choose' });
+        expect(chooseButton).toHaveAttribute('aria-disabled', 'true');
+        expect(chooseButton).toBeDisabled();
+    });
+
+    test('should render Footer buttons with aria-label', () => {
+        renderComponent();
+
+        expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Choose' })).toBeInTheDocument();
+    });
+
+    test('should render Footer with custom action button', () => {
+        const renderCustomActionButtons = jest.fn().mockReturnValue(<div data-testid="custom-button" />);
+
+        renderComponent({
+            renderCustomActionButtons,
+        });
+
+        expect(screen.getByTestId('custom-button')).toBeInTheDocument();
+        expect(renderCustomActionButtons).toHaveBeenCalledWith({
+            currentFolderId: defaultProps.currentCollection.id,
+            currentFolderName: defaultProps.currentCollection.name,
+            onCancel: defaultProps.onCancel,
+            onChoose: defaultProps.onChoose,
+            selectedCount: defaultProps.selectedCount,
+            selectedItems: defaultProps.selectedItems,
+        });
+    });
+
+    test.each`
+        showSelectedButton | isSingleSelect | shown    | should
+        ${false}           | ${false}       | ${false} | ${'should not show selected button'}
+        ${false}           | ${true}        | ${false} | ${'should not show selected button'}
+        ${true}            | ${false}       | ${true}  | ${'should show selected button'}
+        ${true}            | ${true}        | ${false} | ${'should not show selected button'}
+    `('$should', ({ isSingleSelect, shown, showSelectedButton }) => {
+        renderComponent({ isSingleSelect, showSelectedButton });
+
+        const selectedButton = screen.queryByRole('button', { name: '0 Selected' });
+        expect(!!selectedButton).toBe(shown);
+    });
+});