feat(content-explorer): migrate empty state to blueprint (#3931)

* feat(content-explorer): migrate empty state to blueprint

* fix: add unit tests

* fix: flow type

* fix: e2e test

* fix: update apostrophe

Author: tjuanitas

i18n/en-US.properties

@@ -432,6 +432,20 @@ be.drawAnnotation = Drawing annotation mode
 be.editLabel = Edit
 # Message to the user when there are no Open With integrations
 be.emptyOpenWithDescription = No integrations are available for this file
+# Text shown in the empty state when there is an error
+be.emptyView.errorState = A network error has occurred while trying to load.
+# Text shown in the empty state when there are no folder items
+be.emptyView.folderState = There are no items in this folder.
+# Text shown in the empty state when the folder items are loading
+be.emptyView.loadingState = Please wait while the items load...
+# Text shown in the empty state when there are no items for the metadata query
+be.emptyView.metadataState = There are no items in this folder.
+# Text shown in the empty state when there are no recent items
+be.emptyView.recentsState = There are no recent items yet.
+# Text shown in the empty state when there no results for the search query
+be.emptyView.searchState = Sorry, we couldn't find what you're looking for.
+# Text shown in the empty state when there are no selected items
+be.emptyView.selectedState = You haven't selected any items yet.
 # Generic error label.
 be.error = Error
 # Default label for signifying error in the sub header.
@@ -440,8 +454,6 @@ be.errorBreadcrumb = Error
 be.errorOccured = An error occurred
 # Message to the user when the open with element errors
 be.errorOpenWithDescription = Opening this file with other services is currently unavailable
-# Message shown when there is an error.
-be.errorState = A network error has occurred while trying to load.
 # Header message to the user when an Open With integration fails to execute
 be.executeIntegrationOpenWithErrorHeader = We’re sorry, this integration is currently unavailable.
 # Sub header message to the user when an Open With integration fails to execute
@@ -468,8 +480,6 @@ be.fileDescriptionInlineErrorTitleMessage = Something went wrong when saving the
 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
 be.getVersionInfo = Get version information
 # Label for switching to grid view
@@ -534,8 +544,6 @@ be.keywordsList = Keywords: {words}
 be.listView = Switch to List View
 # 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.
 be.logo = Logo
 # Indicator on the footer that max items have been selected.
@@ -556,8 +564,6 @@ be.messageCenter.previewError = Sorry, we're having trouble showing this image.
 be.messageCenter.product = Product
 # Title for the message center modal
 be.messageCenter.title = What's New
-# Message shown when there are no items for provided metadata query.
-be.metadataState = There are no items in this folder.
 # Text for modified date with modified prefix.
 be.modifiedDate = Modified {date}
 # Text for modified date with user with modified prefix.
@@ -612,8 +618,6 @@ be.print = Print
 be.priorCollaborator = A Prior Collaborator
 # Shown as the title in the sub header when showing recents.
 be.recentsBreadcrumb = Recents
-# Message shown when there are no recent items.
-be.recentsState = There are no recent items yet.
 # Label for reload button.
 be.reload = Reload
 # Label for remove action.
@@ -644,14 +648,10 @@ be.save = Save
 be.searchBreadcrumb = Search Results
 # Shown as a placeholder in the search box.
 be.searchPlaceholder = Search files and folders
-# Message shown when there are no search results.
-be.searchState = Sorry, we couldn’t find what you’re looking for.
 # Default label for selected items list in the footer.
 be.selected = {count} Selected
 # Shown as the title in the sub header while showing selected items.
 be.selectedBreadcrumb = Selected Items
-# Message shown when there are no selected items.
-be.selectedState = You haven’t selected any items yet.
 # Label for share action.
 be.share = Share
 # Dropdown select option for collaborator share access.

src/elements/common/empty-state/EmptyState.js.flow

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+
+import { EmptyState, Text } from '@box/blueprint-web';
+import { Files, FolderFloat, HatWand, OpenBook } from '@box/blueprint-web-assets/illustrations/Medium';
+
+import { VIEW_ERROR, VIEW_FOLDER, VIEW_METADATA, VIEW_SEARCH, VIEW_SELECTED } from '../../../constants';
+
+import messages from './messages';
+
+import type { View } from '../../../common/types/core';
+
+export interface EmptyViewProps {
+    isLoading: boolean;
+    view: View;
+}
+
+const EmptyView = ({ isLoading, view }: EmptyViewProps) => {
+    const { formatMessage } = useIntl();
+
+    let icon;
+    let text = formatMessage(messages[`${view}State`]);
+
+    if (isLoading && (view === VIEW_FOLDER || view === VIEW_METADATA)) {
+        text = formatMessage(messages.loadingState);
+    }
+
+    switch (view) {
+        case VIEW_ERROR:
+            icon = HatWand;
+            break;
+        case VIEW_SELECTED:
+            icon = Files;
+            break;
+        case VIEW_SEARCH:
+            icon = OpenBook;
+            break;
+        default:
+            icon = FolderFloat;
+            break;
+    }
+
+    return <EmptyState body={<Text as="p">{text}</Text>} illustration={icon} />;
+};
+
+export default EmptyView;

src/elements/common/empty-state/EmptyState.scss

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '../../../../test-utils/testing-library';
+import EmptyView from '../EmptyView';
+
+describe('elements/common/empty-view/EmptyView', () => {
+    const renderComponent = (props = {}) => {
+        const defaultProps = {
+            isLoading: false,
+            view: 'folder',
+        };
+        render(<EmptyView {...defaultProps} {...props} />);
+    };
+
+    test.each`
+        view          | text
+        ${'error'}    | ${'A network error has occurred while trying to load.'}
+        ${'folder'}   | ${'There are no items in this folder.'}
+        ${'metadata'} | ${'There are no items in this folder.'}
+        ${'recents'}  | ${'There are no recent items yet.'}
+        ${'search'}   | ${"Sorry, we couldn't find what you're looking for."}
+        ${'selected'} | ${"You haven't selected any items yet."}
+    `('renders component correctly when the view is `$view`', ({ text, view }) => {
+        renderComponent({ view });
+        expect(screen.getByRole('paragraph')).toHaveTextContent(text);
+    });
+
+    test('renders component correctly when items are being fetched', () => {
+        renderComponent({ isLoading: true });
+        expect(screen.getByRole('paragraph')).toHaveTextContent('Please wait while the items load...');
+    });
+});

src/elements/common/empty-state/EmptyState.tsx

@@ -0,0 +1 @@
+export { default } from './EmptyView';

src/elements/common/empty-state/index.js.flow

@@ -0,0 +1,41 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+    errorState: {
+        id: 'be.emptyView.errorState',
+        description: 'Text shown in the empty state when there is an error',
+        defaultMessage: 'A network error has occurred while trying to load.',
+    },
+    folderState: {
+        id: 'be.emptyView.folderState',
+        description: 'Text shown in the empty state when there are no folder items',
+        defaultMessage: 'There are no items in this folder.',
+    },
+    loadingState: {
+        id: 'be.emptyView.loadingState',
+        description: 'Text shown in the empty state when the folder items are loading',
+        defaultMessage: 'Please wait while the items load...',
+    },
+    metadataState: {
+        id: 'be.emptyView.metadataState',
+        description: 'Text shown in the empty state when there are no items for the metadata query',
+        defaultMessage: 'There are no items in this folder.',
+    },
+    recentsState: {
+        id: 'be.emptyView.recentsState',
+        description: 'Text shown in the empty state when there are no recent items',
+        defaultMessage: 'There are no recent items yet.',
+    },
+    searchState: {
+        id: 'be.emptyView.searchState',
+        description: 'Text shown in the empty state when there no results for the search query',
+        defaultMessage: "Sorry, we couldn't find what you're looking for.",
+    },
+    selectedState: {
+        id: 'be.emptyView.selectedState',
+        description: 'Text shown in the empty state when there are no selected items',
+        defaultMessage: "You haven't selected any items yet.",
+    },
+});
+
+export default messages;