refactor(content-uploader): migrate IconName component (#3613)

* refactor(content-uploader): migrate IconName component

* fix: test case wording

* fix: export and InTheDocument

---------

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

i18n/en-US.properties

@@ -456,6 +456,8 @@ be.fileClassificationErrorHeaderMessage = Something went wrong when fetching cla
 be.fileDescriptionInlineErrorTitleMessage = Something went wrong when saving the description.
 # name of the File Request feature used to translate when a File Request is uploaded by the service
 be.fileRequestDisplayName = File Request
+# Icon title for a Box item of type folder
+be.folder = Folder
 # Message shown when there are no folder items.
 be.folderState = There are no items in this folder.
 # Aria label for button to get information about a file’s versions
@@ -494,8 +496,8 @@ be.keywordsAppliedList = Keywords were applied
 be.keywordsList = Keywords: {words}
 # Label for switching to list view
 be.listView = Switch to List View
-# Loading aria label.
-be.loading = loading
+# Label for loading state.
+be.loading = Loading
 # Message shown when folder items are still fetching.
 be.loadingState = Please wait while the items load...
 # Placeholder for a logo.

src/elements/common/messages.js

@@ -52,6 +52,11 @@ const messages = defineMessages({
         description: 'Message when new preview is available.',
         defaultMessage: 'A new version of this file is available.',
     },
+    loading: {
+        id: 'be.loading',
+        description: 'Label for loading state.',
+        defaultMessage: 'Loading',
+    },
     reload: {
         id: 'be.reload',
         description: 'Label for reload button.',
@@ -422,6 +427,11 @@ const messages = defineMessages({
         description: 'Title for the DocGen sidebar tab.',
         defaultMessage: 'Doc Gen Tags',
     },
+    sidebarDocGenTooltip: {
+        id: 'be.sidebarDocGenTooltip',
+        defaultMessage: 'Box Doc Gen',
+        description: 'Icon title for a Box file of type DocGen template',
+    },
     sidebarMetadataTitle: {
         id: 'be.sidebarMetadataTitle',
         description: 'Title for the preview metadata.',
@@ -1005,21 +1015,16 @@ const messages = defineMessages({
         description: 'Icon title for a Box item of type file',
         defaultMessage: 'File',
     },
+    folder: {
+        id: 'be.folder',
+        description: 'Icon title for a Box item of type folder',
+        defaultMessage: 'Folder',
+    },
     personalFolder: {
         id: 'be.personalFolder',
         description: 'Icon title for a Box item of type folder that is private and has no collaborators',
         defaultMessage: 'Personal Folder',
     },
-    sidebarDocGenTooltip: {
-        id: 'be.sidebarDocGenTooltip',
-        defaultMessage: 'Box Doc Gen',
-        description: 'Icon title for a Box file of type DocGen template',
-    },
-    loading: {
-        id: 'be.loading',
-        description: 'Loading aria label.',
-        defaultMessage: 'loading',
-    },
 });
 
 export default messages;

src/elements/content-uploader/IconName.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import { FolderPersonal } from '@box/blueprint-web-assets/icons/Content';
+import { Size8 } from '@box/blueprint-web-assets/tokens/tokens';
+import Badgeable from '../../components/badgeable';
+import FileIcon from '../../icons/file-icon/FileIcon';
+import IconAlertDefault from '../../icons/general/IconAlertDefault';
+import ItemName from './ItemName';
+import { STATUS_ERROR } from '../../constants';
+import messages from '../common/messages';
+import type { UploadStatus } from '../../common/types/upload';
+import './IconName.scss';
+
+export interface IconNameProps {
+    extension: string;
+    isFolder?: boolean;
+    isResumableUploadsEnabled: boolean;
+    name: string;
+    status: UploadStatus;
+}
+
+const IconName = ({ name, extension, isFolder = false, isResumableUploadsEnabled, status }: IconNameProps) => {
+    const { formatMessage } = useIntl();
+
+    let icon = isFolder ? (
+        <FolderPersonal height={Size8} aria-label={formatMessage(messages.folder)} width={Size8} />
+    ) : (
+        <FileIcon extension={extension} title={formatMessage(messages.file)} />
+    );
+
+    if (isResumableUploadsEnabled && status === STATUS_ERROR) {
+        icon = (
+            <Badgeable
+                className="bcu-icon-badge"
+                bottomRight={<IconAlertDefault height={18} title={formatMessage(messages.error)} width={18} />}
+            >
+                {icon}
+            </Badgeable>
+        );
+    }
+
+    return (
+        <div className="bcu-item-icon-name">
+            <div className="bcu-item-icon" data-testid="bcu-IconName-icon">
+                {icon}
+            </div>
+            <div className="bcu-item-name">
+                <ItemName name={name} />
+            </div>
+        </div>
+    );
+};
+
+export default IconName;

src/elements/content-uploader/ItemName.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import './ItemName.scss';
+
+export interface ItemNameProps {
+    name: string;
+}
+
+const ItemName = ({ name }: ItemNameProps) => <span className="bcu-item-label">{name}</span>;
+
+export default ItemName;

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { render, screen } from '../../../test-utils/testing-library';
+import IconName from '../IconName';
+import { STATUS_ERROR, STATUS_IN_PROGRESS } from '../../../constants';
+
+describe('elements/content-uploader/IconName', () => {
+    const renderComponent = (props = {}) => {
+        const defaultProps = {
+            extension: 'pdf',
+            name: 'test-item',
+            isResumableUploadsEnabled: false,
+            status: 'pending',
+        };
+        render(<IconName {...defaultProps} {...props} />);
+    };
+
+    test('renders component correctly', () => {
+        renderComponent();
+
+        expect(screen.getByRole('img', { name: 'File' })).toBeInTheDocument();
+        expect(screen.getByText('test-item')).toBeInTheDocument();
+    });
+
+    test('renders component correctly when item is a folder', () => {
+        renderComponent({ isFolder: true });
+
+        expect(screen.getByRole('img', { name: 'Folder' })).toBeInTheDocument();
+        expect(screen.getByText('test-item')).toBeInTheDocument();
+    });
+
+    test('renders alert badge when there is an error', () => {
+        renderComponent({ isResumableUploadsEnabled: true, status: STATUS_ERROR });
+
+        expect(screen.getByRole('img', { name: 'Error' })).toBeInTheDocument();
+    });
+
+    test('does not render alert badge when there is no error', () => {
+        renderComponent({ isResumableUploadsEnabled: true, status: STATUS_IN_PROGRESS });
+
+        expect(screen.queryByRole('img', { name: 'Error' })).not.toBeInTheDocument();
+    });
+});