feat(content-explorer): migrate subHeader to typescript (#3999)

* feat(content-explorer): migrate subHeader to typescript

* feat(content-explorer): update test

* feat(content-explorer): update variant prop in pageHeader

Author: tjiang-box

i18n/en-US.properties

@@ -486,6 +486,8 @@ be.gridView = Switch to Grid View
 be.gridView.decreaseColumnSize = Decrease column size
 # Label for increasing the size of columns in grid view
 be.gridView.increaseColumnSize = Increase column size
+# Label for the grid view size slider
+be.gridView.sliderLabel = Grid view size
 # Aria label for file icon
 be.iconFile = {extension} File
 # Label for in action.

…c/components/grid-view/GridViewSlider.js …/components/grid-view/GridViewSlider.tsxsrc/components/grid-view/GridViewSlider.js renamed to src/components/grid-view/GridViewSlider.tsx src/components/grid-view/GridViewSlider.js renamed to src/components/grid-view/GridViewSlider.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react';
 import { useIntl } from 'react-intl';
 import { Slider } from '@box/blueprint-web';
@@ -7,15 +6,21 @@ import './GridViewSlider.scss';
 
 import messages from '../../elements/common/messages';
 
-type Props = {
-    columnCount: number,
-    gridMaxColumns: number,
-    gridMinColumns: number,
-    maxColumnCount: number,
-    onChange: (newSliderValue: number) => void,
-};
+export interface GridViewSliderProps {
+    columnCount: number;
+    gridMaxColumns: number;
+    gridMinColumns: number;
+    maxColumnCount: number;
+    onChange: (newSliderValue: number) => void;
+}
 
-const GridViewSlider = ({ columnCount, gridMaxColumns, gridMinColumns, maxColumnCount, onChange }: Props) => {
+const GridViewSlider = ({
+    columnCount,
+    gridMaxColumns,
+    gridMinColumns,
+    maxColumnCount,
+    onChange,
+}: GridViewSliderProps) => {
     const { formatMessage } = useIntl();
     const RANGE_STEP = 1;
 
@@ -34,6 +39,7 @@ const GridViewSlider = ({ columnCount, gridMaxColumns, gridMinColumns, maxColumn
                 minusButtonLabel={formatMessage(messages.gridViewDecreaseColumnSize)}
                 onValueChange={onChange}
                 plusButtonLabel={formatMessage(messages.gridViewIncreaseColumnSize)}
+                sliderLabel={formatMessage(messages.gridViewSliderLabel)}
                 step={RANGE_STEP}
                 value={sliderValue}
             />

src/components/grid-view/__tests__/GridViewSlider.test.js

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import userEvent from '@testing-library/user-event';
+import { screen, render } from '../../../test-utils/testing-library';
+import GridViewSlider, { GridViewSliderProps } from '../GridViewSlider';
+
+describe('GridViewSlider', () => {
+    const defaultProps = {
+        columnCount: 3,
+        gridMaxColumns: 5,
+        gridMinColumns: 1,
+        maxColumnCount: 4,
+        onChange: jest.fn(),
+    };
+
+    const renderComponent = (props: Partial<GridViewSliderProps> = {}) =>
+        render(<GridViewSlider {...defaultProps} {...props} />);
+
+    test('should render slider with correct initial value', () => {
+        renderComponent();
+        const slider = screen.getByRole('slider');
+        expect(slider).toBeInTheDocument();
+        expect(slider).toHaveAttribute('aria-valuenow', '3');
+    });
+
+    test('should render slider with correct labels', () => {
+        renderComponent();
+        expect(screen.getByLabelText('Increase column size')).toBeInTheDocument();
+        expect(screen.getByLabelText('Decrease column size')).toBeInTheDocument();
+        expect(screen.getByLabelText('Grid view size')).toBeInTheDocument();
+    });
+
+    test('should call onChange when slider value changes', async () => {
+        const onChange = jest.fn();
+        renderComponent({ onChange });
+
+        const increaseButton = screen.getByRole('button', { name: 'Increase column size' });
+        await userEvent.click(increaseButton);
+        expect(onChange).toHaveBeenCalledTimes(1);
+
+        const decreaseButton = screen.getByRole('button', { name: 'Decrease column size' });
+        await userEvent.click(decreaseButton);
+        expect(onChange).toHaveBeenCalledTimes(2);
+    });
+
+    test('should not render slider if gridMinColumns is greater than or equal to maxColumnCount', () => {
+        renderComponent({ gridMinColumns: 4, maxColumnCount: 4 });
+        const slider = screen.queryByRole('slider');
+        expect(slider).not.toBeInTheDocument();
+    });
+});

src/components/grid-view/__tests__/GridViewSlider.test.tsx

@@ -182,6 +182,11 @@ const messages = defineMessages({
         description: 'Label for decreasing the size of columns in grid view',
         defaultMessage: 'Decrease column size',
     },
+    gridViewSliderLabel: {
+        id: 'be.gridView.sliderLabel',
+        description: 'Label for the grid view size slider',
+        defaultMessage: 'Grid view size',
+    },
     listView: {
         id: 'be.listView',
         description: 'Label for switching to list view',

src/components/grid-view/__tests__/__snapshots__/GridViewSlider.test.js.snap

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { DropdownMenu, IconButton } from '@box/blueprint-web';
+import { Plus } from '@box/blueprint-web-assets/icons/Fill';
+
+import messages from '../messages';
+
+export interface AddProps {
+    isDisabled: boolean;
+    onCreate: () => void;
+    onUpload: () => void;
+    showCreate: boolean;
+    showUpload: boolean;
+}
+
+const Add = ({ isDisabled, onUpload, onCreate, showUpload = true, showCreate = true }: AddProps) => {
+    const { formatMessage } = useIntl();
+
+    return (
+        <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+                <IconButton
+                    aria-label={formatMessage(messages.add)}
+                    className="be-btn-add"
+                    disabled={isDisabled}
+                    icon={Plus}
+                />
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content>
+                {showUpload && (
+                    <DropdownMenu.Item onClick={onUpload}>
+                        <FormattedMessage {...messages.upload} />
+                    </DropdownMenu.Item>
+                )}
+                {showCreate && (
+                    <DropdownMenu.Item onClick={onCreate}>
+                        <FormattedMessage {...messages.newFolder} />
+                    </DropdownMenu.Item>
+                )}
+            </DropdownMenu.Content>
+        </DropdownMenu.Root>
+    );
+};
+
+export default Add;

src/elements/common/messages.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { DropdownMenu, IconButton } from '@box/blueprint-web';
+import IconSort from '../../../icons/general/IconSort';
+import type { SortBy, SortDirection } from '../../../common/types/core';
+import { FIELD_NAME, FIELD_DATE, FIELD_SIZE, SORT_ASC, SORT_DESC } from '../../../constants';
+
+import messages from '../messages';
+
+export interface SortProps {
+    onSortChange: (sortBy: SortBy, sortDirection: SortDirection) => void;
+}
+
+type SortItem = [SortBy, SortDirection];
+
+const SORT_ITEMS: Array<SortItem> = [
+    [FIELD_NAME, SORT_ASC],
+    [FIELD_NAME, SORT_DESC],
+    [FIELD_DATE, SORT_ASC],
+    [FIELD_DATE, SORT_DESC],
+    [FIELD_SIZE, SORT_ASC],
+    [FIELD_SIZE, SORT_DESC],
+];
+
+const Sort = ({ onSortChange }: SortProps) => {
+    const { formatMessage } = useIntl();
+
+    return (
+        <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+                <IconButton aria-label={formatMessage(messages.sort)} className="be-btn-sort" icon={IconSort} />
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content>
+                {SORT_ITEMS.map(([sortByValue, sortDirectionValue]) => {
+                    const sortItemKey = `${sortByValue}${sortDirectionValue}`;
+
+                    return (
+                        <DropdownMenu.Item
+                            key={sortItemKey}
+                            onClick={() => onSortChange(sortByValue, sortDirectionValue)}
+                        >
+                            <FormattedMessage {...messages[sortItemKey]} />
+                        </DropdownMenu.Item>
+                    );
+                })}
+            </DropdownMenu.Content>
+        </DropdownMenu.Root>
+    );
+};
+
+export default Sort;