chore(content-uploader): Migrate UploadsManagerAction (#3604)

* chore(content-uploader): Migrate UploadsManagerAction

* chore(content-uploader): comments

* chore(content-uploader): update onClick type

* chore(content-uploader): replace injectIntl by useIntl

---------

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

src/elements/content-uploader/UploadsManagerAction.js → src/elements/content-uploader/UploadsManagerAction.js.flow

@@ -1,36 +1,34 @@
-/**
- * @flow
- * @file Uploads Manager action component
- */
-
 import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
-import messages from '../common/messages';
-import PrimaryButton from '../../components/primary-button';
-import { STATUS_ERROR } from '../../constants';
+import { useIntl } from 'react-intl';
+import { Button } from '@box/blueprint-web';
+
 import { RESIN_TAG_TARGET } from '../../common/variables';
+import { STATUS_ERROR } from '../../constants';
+
+import messages from '../common/messages';
+import type { UploadStatus } from '../../common/types/upload';
+
 import './UploadsManagerAction.scss';
 
 type Props = {
-    hasMultipleFailedUploads: boolean,
-    onClick: Function,
-};
+    hasMultipleFailedUploads: boolean;
+    onClick: (status: UploadStatus) => void;
+}
 
-const UploadsManagerAction = ({ onClick, hasMultipleFailedUploads }: Props) => {
+const UploadsManagerAction = ({ hasMultipleFailedUploads, onClick }: Props) => {
     const handleResumeClick = event => {
         event.stopPropagation();
         onClick(STATUS_ERROR);
     };
-
+    const intl = useIntl();
     const resumeMessage = hasMultipleFailedUploads ? messages.resumeAll : messages.resume;
-
     const resin = { [RESIN_TAG_TARGET]: 'uploadresumeheader' };
 
     return (
         <div className="bcu-uploads-manager-action">
-            <PrimaryButton onClick={handleResumeClick} type="button" {...resin}>
-                <FormattedMessage {...resumeMessage} />
-            </PrimaryButton>
+            <Button onClick={handleResumeClick} size="small" variant="primary" {...resin}>
+                {intl.formatMessage(resumeMessage)}
+            </Button>
         </div>
     );
 };

src/elements/content-uploader/UploadsManagerAction.scss

@@ -1,7 +1,3 @@
 .bcu-uploads-manager-action {
     margin: 5px -20px 5px 5px;
-
-    .btn-primary {
-        display: flex;
-    }
 }

src/elements/content-uploader/UploadsManagerAction.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import { Button } from '@box/blueprint-web';
+
+import { RESIN_TAG_TARGET } from '../../common/variables';
+import { STATUS_ERROR } from '../../constants';
+
+import messages from '../common/messages';
+import type { UploadStatus } from '../../common/types/upload';
+
+import './UploadsManagerAction.scss';
+
+export interface UploadsManagerActionProps {
+    hasMultipleFailedUploads: boolean;
+    onClick: (status: UploadStatus) => void;
+}
+
+const UploadsManagerAction = ({ hasMultipleFailedUploads, onClick }: UploadsManagerActionProps) => {
+    const handleResumeClick = event => {
+        event.stopPropagation();
+        onClick(STATUS_ERROR);
+    };
+    const intl = useIntl();
+    const resumeMessage = hasMultipleFailedUploads ? messages.resumeAll : messages.resume;
+    const resin = { [RESIN_TAG_TARGET]: 'uploadresumeheader' };
+
+    return (
+        <div className="bcu-uploads-manager-action">
+            <Button onClick={handleResumeClick} size="small" variant="primary" {...resin}>
+                {intl.formatMessage(resumeMessage)}
+            </Button>
+        </div>
+    );
+};
+
+export default UploadsManagerAction;

src/elements/content-uploader/__tests__/UploadsManagerAction.test.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { render, screen, fireEvent } from '../../../test-utils/testing-library';
+
+import UploadsManagerAction, { UploadsManagerActionProps } from '../UploadsManagerAction';
+
+describe('elements/content-uploader/UploadsManagerAction', () => {
+    const getWrapper = (props: Partial<UploadsManagerActionProps>) =>
+        render(<UploadsManagerAction hasMultipleFailedUploads={false} onClick={jest.fn()} {...props} />);
+
+    test('should render correctly with hasMultipleFailedUploads as true', () => {
+        getWrapper({ hasMultipleFailedUploads: true });
+
+        expect(screen.getByText('Resume All')).toBeInTheDocument();
+    });
+
+    test('should render correctly with hasMultipleFailedUploads as false', () => {
+        getWrapper({ hasMultipleFailedUploads: false });
+
+        expect(screen.getByText('Resume')).toBeInTheDocument();
+        expect(screen.queryByText('Resume All')).not.toBeInTheDocument();
+    });
+
+    test('should call onClick when resume button is clicked', () => {
+        const handleResumeClick = jest.fn();
+        getWrapper({ onClick: handleResumeClick });
+
+        fireEvent.click(screen.getByText('Resume'));
+        expect(handleResumeClick).toHaveBeenCalledTimes(1);
+    });
+});