box-ui-elements 23.4.0-beta.26 → 23.4.0-beta.28

package/src/elements/content-explorer/ContentExplorer.tsx

@@ -1649,32 +1649,30 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
                     <div id={this.id} className={styleClassName} ref={measureRef} data-testid="content-explorer">
                         <ThemingStyles selector={`#${this.id}`} theme={theme} />
                         <div className="be-app-element" onKeyDown={this.onKeyDown} tabIndex={0}>
-                            {!isDefaultViewMetadata && (
-                                <>
-                                    <Header view={view} logoUrl={logoUrl} onSearch={this.search} />
-                                    <SubHeader
-                                        view={view}
-                                        viewMode={viewMode}
-                                        rootId={rootFolderId}
-                                        isSmall={isSmall}
-                                        rootName={rootName}
-                                        currentCollection={currentCollection}
-                                        canUpload={allowUpload}
-                                        canCreateNewFolder={allowCreate}
-                                        gridColumnCount={gridColumnCount}
-                                        gridMaxColumns={GRID_VIEW_MAX_COLUMNS}
-                                        gridMinColumns={GRID_VIEW_MIN_COLUMNS}
-                                        maxGridColumnCountForWidth={maxGridColumnCount}
-                                        onUpload={this.upload}
-                                        onCreate={this.createFolder}
-                                        onGridViewSliderChange={this.onGridViewSliderChange}
-                                        onItemClick={this.fetchFolder}
-                                        onSortChange={this.sort}
-                                        onViewModeChange={this.changeViewMode}
-                                        portalElement={this.rootElement}
-                                    />
-                                </>
-                            )}
+                            {!isDefaultViewMetadata && <Header view={view} logoUrl={logoUrl} onSearch={this.search} />}
+
+                            <SubHeader
+                                view={view}
+                                viewMode={viewMode}
+                                rootId={rootFolderId}
+                                isSmall={isSmall}
+                                rootName={rootName}
+                                currentCollection={currentCollection}
+                                canUpload={allowUpload}
+                                canCreateNewFolder={allowCreate}
+                                gridColumnCount={gridColumnCount}
+                                gridMaxColumns={GRID_VIEW_MAX_COLUMNS}
+                                gridMinColumns={GRID_VIEW_MIN_COLUMNS}
+                                maxGridColumnCountForWidth={maxGridColumnCount}
+                                onUpload={this.upload}
+                                onCreate={this.createFolder}
+                                onGridViewSliderChange={this.onGridViewSliderChange}
+                                onItemClick={this.fetchFolder}
+                                onSortChange={this.sort}
+                                onViewModeChange={this.changeViewMode}
+                                portalElement={this.rootElement}
+                            />
+
                             <Content
                                 canDelete={canDelete}
                                 canDownload={canDownload}

package/src/elements/content-explorer/__tests__/ContentExplorer.test.tsx

@@ -5,6 +5,7 @@ import { ContentExplorerComponent as ContentExplorer, ContentExplorerProps } fro
 import { mockRecentItems, mockRootFolder, mockRootFolderSharedLink } from '../../common/__mocks__/mockRootFolder';
 import { mockMetadata, mockSchema } from '../../common/__mocks__/mockMetadata';
 import mockSubFolder from '../../common/__mocks__/mockSubfolder';
+import { FeatureProvider } from '../../common/feature-checking';
 
 jest.mock('../../../utils/Xhr', () => {
     return jest.fn().mockImplementation(() => {
@@ -71,8 +72,12 @@ jest.mock('../../common/preview-dialog/PreviewDialog', () => props => {
 describe('elements/content-explorer/ContentExplorer', () => {
     let rootElement: HTMLDivElement;
 
-    const renderComponent = (props: Partial<ContentExplorerProps> = {}) => {
-        return render(<ContentExplorer defaultView="list" rootFolderId="69083462919" token="token" {...props} />);
+    const renderComponent = ({ features, ...props }: Partial<ContentExplorerProps> = {}) => {
+        return render(
+            <FeatureProvider features={features}>
+                <ContentExplorer defaultView="list" rootFolderId="69083462919" token="token" {...props} />
+            </FeatureProvider>,
+        );
     };
 
     beforeEach(() => {
@@ -410,6 +415,34 @@ describe('elements/content-explorer/ContentExplorer', () => {
             expect(screen.getByText('Healthcare')).toBeInTheDocument();
             expect(screen.getByText('November 1, 2023')).toBeInTheDocument();
         });
+        describe('Metadata View V2', () => {
+            test('should render metadata view button', async () => {
+                renderComponent({
+                    defaultView: 'metadata',
+                    features: {
+                        contentExplorer: {
+                            metadataViewV2: true,
+                        },
+                    },
+                });
+
+                // two separate promises need to be resolved before the component is ready
+                await waitFor(() => {
+                    expect(screen.getByText('Please wait while the items load...')).toBeInTheDocument();
+                });
+
+                await waitFor(() => {
+                    expect(screen.getByTestId('content-explorer')).toBeInTheDocument();
+                });
+
+                expect(screen.queryByRole('searchbox', { name: 'Search files and folders' })).not.toBeInTheDocument();
+                expect(screen.queryByRole('button', { name: 'Preview Test Folder' })).not.toBeInTheDocument();
+                expect(screen.queryByRole('button', { name: 'Switch to Grid View' })).not.toBeInTheDocument();
+                expect(screen.queryByRole('button', { name: 'Sort' })).not.toBeInTheDocument();
+                expect(screen.queryByRole('button', { name: 'Add' })).not.toBeInTheDocument();
+                expect(screen.getByRole('button', { name: 'Metadata' })).toBeInTheDocument();
+            });
+        });
     });
 
     describe('Preview', () => {

package/src/elements/content-sidebar/AddTaskButton.js

@@ -8,11 +8,15 @@ import { TASK_TYPE_APPROVAL } from '../../constants';
 import type { TaskFormProps } from './activity-feed/task-form/TaskForm';
 import type { TaskType } from '../../common/types/tasks';
 import type { ElementsXhrError } from '../../common/types/api';
+import type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';
 
 type Props = {|
     history: RouterHistory,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     isDisabled: boolean,
     onTaskModalClose: () => void,
+    routerDisabled?: boolean,
     taskFormProps: TaskFormProps,
 |};
 
@@ -40,7 +44,20 @@ class AddTaskButton extends React.Component<Props, State> {
     2. Preventing the sidebar from closing keeps the task modal open upon edit and resize
     */
     handleClickMenuItem = (taskType: TaskType) => {
-        this.props.history.replace({ state: { open: true } });
+        const { history, internalSidebarNavigation, internalSidebarNavigationHandler, routerDisabled } = this.props;
+
+        if (routerDisabled && internalSidebarNavigationHandler) {
+            internalSidebarNavigationHandler(
+                {
+                    ...internalSidebarNavigation,
+                    open: true,
+                },
+                true,
+            );
+        } else {
+            history.replace({ state: { open: true } });
+        }
+
         this.setState({ isTaskFormOpen: true, taskType });
     };
 

package/src/elements/content-sidebar/__tests__/AddTaskButton.test.js

@@ -1,21 +1,28 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { render, screen, userEvent } from '../../../test-utils/testing-library';
 import { AddTaskButtonComponent as AddTaskButton } from '../AddTaskButton';
 
-jest.mock('../../../components/date-picker/DatePicker', () => props => {
-    // only spread `input` attritutes to the input field
-    const { name, value = '', className, onChange, placeholder } = props;
-    const localInputProps = {
-        name,
-        value,
-        className,
-        onChange,
-        placeholder,
-    };
-    return (
-        <input type="date" {...localInputProps} {...props.inputProps} /> // eslint-disable-line react/prop-types
-    );
-});
+jest.mock('../AddTaskMenu', () => ({ onMenuItemClick, isDisabled, setAddTaskButtonRef }) => (
+    <div data-testid="add-task-menu">
+        <button
+            type="button"
+            onClick={() => onMenuItemClick('GENERAL')}
+            disabled={isDisabled}
+            ref={setAddTaskButtonRef}
+            data-testid="menu-item-general"
+        >
+            Add General Task
+        </button>
+    </div>
+));
+
+jest.mock('../TaskModal', () => ({ isTaskFormOpen, onModalClose, taskType }) => (
+    <div data-testid="task-modal" data-open={isTaskFormOpen} data-task-type={taskType}>
+        <button type="button" onClick={onModalClose} data-testid="modal-close">
+            Close Modal
+        </button>
+    </div>
+));
 
 describe('elements/content-sidebar/AddTaskButton', () => {
     /*
@@ -23,34 +30,110 @@ describe('elements/content-sidebar/AddTaskButton', () => {
     2. Preventing the sidebar from closing keeps the task modal open upon edit and resize
     */
 
-    test('should call history.replace state with force open state when task menu items are clicked', () => {
+    const defaultProps = {
+        history: { replace: jest.fn() },
+        isDisabled: false,
+        onTaskModalClose: jest.fn(),
+        taskFormProps: {
+            approvers: [],
+            approverSelectorContacts: [],
+            completionRule: 'ALL',
+            createTask: jest.fn(),
+            getApproverWithQuery: jest.fn(),
+            getAvatarUrl: jest.fn(),
+            id: '',
+            message: '',
+        },
+    };
+
+    const renderComponent = (props = {}) => {
+        return render(<AddTaskButton {...defaultProps} {...props} />);
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('should call history.replace state with force open state when task menu items are clicked', async () => {
         const historyMock = { replace: jest.fn() };
-        const wrapper = mount(<AddTaskButton history={historyMock} />);
+        const user = userEvent();
 
-        const button = wrapper.find('Button');
-        button.simulate('click');
+        renderComponent({ history: historyMock });
 
-        const menuItem = wrapper.find('MenuItem').first();
-        menuItem.simulate('click');
+        const menuItem = screen.getByTestId('menu-item-general');
+        await user.click(menuItem);
 
         expect(historyMock.replace).toHaveBeenCalledWith({ state: { open: true } });
     });
 
-    test('should set state.isTaskFormOpen to false and call onTaskModalClose when task modal is closed', () => {
+    test('should set state.isTaskFormOpen to false and call onTaskModalClose when task modal is closed', async () => {
         const onTaskModalCloseMock = jest.fn();
-        const mockButtonRef = {
-            current: {
-                focus: jest.fn(),
-            },
-        };
-        const wrapper = shallow(<AddTaskButton onTaskModalClose={onTaskModalCloseMock} />);
-        wrapper.instance().buttonRef = mockButtonRef;
-        wrapper.setState({ isTaskFormOpen: true });
-
-        wrapper.instance().handleModalClose();
-
-        expect(wrapper.state('isTaskFormOpen')).toBe(false);
-        expect(mockButtonRef.current.focus).toHaveBeenCalledTimes(1);
+        const user = userEvent();
+
+        renderComponent({ onTaskModalClose: onTaskModalCloseMock });
+
+        // First click a menu item to open the modal
+        const menuItem = screen.getByTestId('menu-item-general');
+        await user.click(menuItem);
+
+        // Verify modal is open
+        const modal = screen.getByTestId('task-modal');
+        expect(modal).toHaveAttribute('data-open', 'true');
+
+        // Close the modal
+        const closeButton = screen.getByTestId('modal-close');
+        await user.click(closeButton);
+
+        // Verify modal is closed and callback was called
+        expect(modal).toHaveAttribute('data-open', 'false');
         expect(onTaskModalCloseMock).toHaveBeenCalledTimes(1);
     });
+
+    describe('when routerDisabled is true', () => {
+        test('should use internalSidebarNavigationHandler when task menu items are clicked', async () => {
+            const mockNavigationHandler = jest.fn();
+            const user = userEvent();
+
+            renderComponent({
+                routerDisabled: true,
+                internalSidebarNavigationHandler: mockNavigationHandler,
+            });
+
+            const menuItem = screen.getByTestId('menu-item-general');
+            await user.click(menuItem);
+
+            expect(mockNavigationHandler).toHaveBeenCalledTimes(1);
+            expect(mockNavigationHandler).toHaveBeenCalledWith({ open: true }, true);
+        });
+
+        test('should preserve internalSidebarNavigation state when using navigation handler', async () => {
+            const mockNavigationHandler = jest.fn();
+            const mockInternalSidebarNavigation = {
+                sidebar: 'activity',
+                activeFeedEntryType: 'comments',
+                activeFeedEntryId: '123',
+            };
+            const user = userEvent();
+
+            renderComponent({
+                routerDisabled: true,
+                internalSidebarNavigationHandler: mockNavigationHandler,
+                internalSidebarNavigation: mockInternalSidebarNavigation,
+            });
+
+            const menuItem = screen.getByTestId('menu-item-general');
+            await user.click(menuItem);
+
+            expect(mockNavigationHandler).toHaveBeenCalledTimes(1);
+            expect(mockNavigationHandler).toHaveBeenCalledWith(
+                {
+                    sidebar: 'activity',
+                    activeFeedEntryType: 'comments',
+                    activeFeedEntryId: '123',
+                    open: true,
+                },
+                true,
+            );
+        });
+    });
 });