chore(content-explorer): Migrate IconCell (#3804)

i18n/en-US.properties

@@ -474,6 +474,8 @@ be.gridView.columnSize = Column size
 be.gridView.decreaseColumnSize = Decrease column size
 # Label for increasing the size of columns in grid view
 be.gridView.increaseColumnSize = Increase column size
+# Aria label for file icon
+be.iconFile = {extension} File
 # Label for in action.
 be.in = In
 # Text for last accessed date with last access prefix.

src/__mocks__/react-intl.js

@@ -57,3 +57,10 @@ export const injectIntl = Component => {
     WrapperComponent.displayName = Component.displayName || Component.name || 'Component';
     return WrapperComponent;
 };
+
+export const useIntl = () => ({
+    formatMessage: (message, values) => {
+        const imf = new IntlMessageFormat(message.defaultMessage || message.message, 'en');
+        return imf.format(values);
+    },
+});

src/elements/common/item/IconCell.js → src/elements/common/item/IconCell.js.flow

@@ -1,8 +1,3 @@
-/**
- * @flow
- * @author Box
- */
-
 import * as React from 'react';
 import { injectIntl } from 'react-intl';
 import type { IntlShape } from 'react-intl';
@@ -18,10 +13,24 @@ import messages from '../messages';
 
 import './IconCell.scss';
 
-type Props = { dimension?: number, intl: IntlShape, rowData: BoxItem };
+type Props = {
+    dimension?: number,
+    intl: IntlShape,
+    rowData: BoxItem
+};
 
-const IconCell = ({ intl, rowData, dimension }: Props) => {
-    const { type, extension, has_collaborations, is_externally_owned, archive_type }: BoxItem = rowData;
+const IconCell = ({
+    intl,
+    rowData,
+    dimension,
+}: Props) => {
+    const {
+        type,
+        extension,
+        has_collaborations,
+        is_externally_owned,
+        archive_type,
+    }: BoxItem = rowData;
     let title;
     const is_archive = archive_type === 'archive';
     const is_archive_folder = archive_type === 'folder_archive';

src/elements/common/item/IconCell.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+
+import { Archive, FolderArchive, FileBookmark } from '@box/blueprint-web-assets/icons/Content';
+import FileIcon from '../../../icons/file-icon/FileIcon';
+import FolderIcon from '../../../icons/folder-icon/FolderIcon';
+
+import type { BoxItem } from '../../../common/types/core';
+
+import { TYPE_FOLDER, TYPE_FILE, TYPE_WEBLINK } from '../../../constants';
+import messages from '../messages';
+
+import './IconCell.scss';
+
+export interface IconCellProps {
+    dimension?: number;
+    rowData: BoxItem;
+}
+
+const IconCell = ({ rowData, dimension }: IconCellProps) => {
+    const { formatMessage } = useIntl();
+    const { type, extension, has_collaborations, is_externally_owned, archive_type }: BoxItem = rowData;
+    const isArchive = archive_type === 'archive';
+    const isArchiveFolder = archive_type === 'folder_archive';
+    switch (type) {
+        case TYPE_FILE:
+            return <FileIcon dimension={dimension} extension={extension} />;
+        case TYPE_FOLDER:
+            if (isArchive) {
+                return <Archive aria-label={formatMessage(messages.archive)} height={dimension} width={dimension} />;
+            }
+            if (isArchiveFolder) {
+                return (
+                    <FolderArchive
+                        aria-label={formatMessage(messages.archivedFolder)}
+                        height={dimension}
+                        width={dimension}
+                    />
+                );
+            }
+            return <FolderIcon dimension={dimension} isCollab={has_collaborations} isExternal={is_externally_owned} />;
+        case TYPE_WEBLINK:
+            return <FileBookmark aria-label={formatMessage(messages.bookmark)} height={dimension} width={dimension} />;
+        default:
+            return <FileIcon dimension={dimension} />;
+    }
+};
+
+export default IconCell;

src/elements/common/item/__tests__/IconCell.test.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { render, screen } from '../../../../test-utils/testing-library';
+
+import IconCell from '../IconCell';
+import { TYPE_FILE, TYPE_FOLDER, TYPE_WEBLINK } from '../../../../constants';
+
+const archiveItem = {
+    type: TYPE_FOLDER,
+    archive_type: 'archive',
+};
+
+const externalFolderItem = {
+    type: TYPE_FOLDER,
+    has_collaborations: false,
+    is_externally_owned: true,
+};
+
+const fileItem = {
+    type: TYPE_FILE,
+    extension: 'pdf',
+};
+
+const folderArchiveItem = {
+    type: TYPE_FOLDER,
+    archive_type: 'folder_archive',
+};
+
+const folderItem = {
+    type: TYPE_FOLDER,
+    has_collaborations: true,
+    is_externally_owned: false,
+};
+
+const personalFolderItem = {
+    type: TYPE_FOLDER,
+    has_collaborations: false,
+    is_externally_owned: false,
+};
+
+const webLinkItem = {
+    type: TYPE_WEBLINK,
+};
+
+describe('elements/common/item/IconCell', () => {
+    const renderComponent = props => {
+        return render(<IconCell {...props} />);
+    };
+    test('renders file icon with correct title', () => {
+        renderComponent({ rowData: fileItem, dimension: 32 });
+        expect(screen.getByLabelText('PDF File')).toBeInTheDocument();
+    });
+
+    test('renders collaborated folder icon with correct title', () => {
+        renderComponent({ rowData: folderItem, dimension: 32 });
+        expect(screen.getByLabelText('Collaborated Folder')).toBeInTheDocument();
+    });
+
+    test('renders external folder icon with correct title', () => {
+        renderComponent({ rowData: externalFolderItem, dimension: 32 });
+        expect(screen.getByLabelText('External Folder')).toBeInTheDocument();
+    });
+
+    test('renders personal folder icon with correct title', () => {
+        renderComponent({ rowData: personalFolderItem, dimension: 32 });
+        expect(screen.getByLabelText('Personal Folder')).toBeInTheDocument();
+    });
+
+    test('renders archive icon with correct aria-label', () => {
+        renderComponent({ rowData: archiveItem, dimension: 32 });
+        expect(screen.getByLabelText('Archive')).toBeInTheDocument();
+    });
+
+    test('renders folder archive icon with correct aria-label', () => {
+        renderComponent({ rowData: folderArchiveItem, dimension: 32 });
+        expect(screen.getByLabelText('Archived Folder')).toBeInTheDocument();
+    });
+
+    test('renders bookmark icon with correct title', () => {
+        renderComponent({ rowData: webLinkItem, dimension: 32 });
+        expect(screen.getByLabelText('Bookmark')).toBeInTheDocument();
+    });
+});

src/elements/common/messages.js

@@ -1072,6 +1072,11 @@ const messages = defineMessages({
         description: 'Icon title for a Box item of type file',
         defaultMessage: 'File',
     },
+    iconFile: {
+        id: 'be.iconFile',
+        description: 'Aria label for file icon',
+        defaultMessage: '{extension} File',
+    },
     folder: {
         id: 'be.folder',
         description: 'Icon title for a Box item of type folder',

src/elements/content-explorer/__tests__/Content.test.tsx

@@ -80,7 +80,7 @@ describe('Content Component', () => {
         expect(screen.getByText('Item 1')).toBeInTheDocument();
         expect(screen.getByText('1000 Bytes')).toBeInTheDocument();
         expect(screen.getByText('Tue Oct 10 2023')).toBeInTheDocument();
-        expect(screen.getByText('File')).toBeInTheDocument();
+        expect(screen.getByLabelText('File')).toBeInTheDocument();
     });
 
     test('renders ItemGrid when viewMode is VIEW_MODE_GRID', () => {
@@ -91,6 +91,6 @@ describe('Content Component', () => {
         expect(screen.getByText('Item 1')).toBeInTheDocument();
         expect(screen.getByText('1000 Bytes')).toBeInTheDocument();
         expect(screen.getByText(/Last accessed on\s+Tue Oct 10 2023/)).toBeInTheDocument();
-        expect(screen.getByText('File')).toBeInTheDocument();
+        expect(screen.getByLabelText('File')).toBeInTheDocument();
     });
 });

src/elements/content-uploader/IconName.tsx

@@ -25,7 +25,7 @@ const IconName = ({ name, extension, isFolder = false, isResumableUploadsEnabled
     let icon = isFolder ? (
         <FolderPersonal height={Size8} aria-label={formatMessage(messages.folder)} width={Size8} />
     ) : (
-        <FileIcon extension={extension} title={formatMessage(messages.file)} />
+        <FileIcon extension={extension} />
     );
 
     if (isResumableUploadsEnabled && status === STATUS_ERROR) {

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

@@ -17,7 +17,7 @@ describe('elements/content-uploader/IconName', () => {
     test('renders component correctly', () => {
         renderComponent();
 
-        expect(screen.getByRole('img', { name: 'File' })).toBeInTheDocument();
+        expect(screen.getByRole('img', { name: 'PDF File' })).toBeInTheDocument();
         expect(screen.getByText('test-item')).toBeInTheDocument();
     });