feat(content-explorer): Add toggle button for grid view (#1349)

* feat: added toggle between list and grid view

* fix: added data-testid to ViewModeChangeButton

Author: rickstefanik

examples/src/features.js

@@ -12,4 +12,9 @@ export default {
             enabled: false,
         },
     },
+    contentExplorer: {
+        gridView: {
+            enabled: false,
+        },
+    },
 };

i18n/en-US.properties

@@ -252,6 +252,8 @@ be.fileDescriptionInlineErrorTitleMessage = Something went wrong when saving the
 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
+be.gridView = Switch to Grid View
 # Label for in action.
 be.in = In
 # Button text to cancel inline item deletion
@@ -280,6 +282,8 @@ be.keywordSkill = Topics
 be.keywordsAppliedList = Keywords were applied
 # Label for a list of keywords. {words} are the list of keywords.
 be.keywordsList = Keywords: {words}
+# Label for switching to list view
+be.listView = Switch to List View
 # Message shown when folder items are still fetching.
 be.loadingState = Please wait while the items load...
 # Placeholder for a logo.

src/constants.js

@@ -24,6 +24,10 @@ export const VIEW_UPLOAD_EMPTY: 'upload-empty' = 'upload-empty';
 export const VIEW_UPLOAD_IN_PROGRESS: 'upload-inprogress' = 'upload-inprogress';
 export const VIEW_UPLOAD_SUCCESS: 'upload-success' = 'upload-success';
 
+/* ----------------------- ViewModes ---------------------------- */
+export const VIEW_MODE_LIST: 'list' = 'list';
+export const VIEW_MODE_GRID: 'grid' = 'grid';
+
 /* ----------------------- Types ---------------------------- */
 export const TYPE_FOLDER: 'folder' = 'folder';
 export const TYPE_FILE: 'file' = 'file';

src/elements/common/flowTypes.js

@@ -1,4 +1,7 @@
 // @flow
+import { VIEW_MODE_GRID, VIEW_MODE_LIST } from '../../constants';
+
+type ViewMode = typeof VIEW_MODE_GRID | typeof VIEW_MODE_LIST;
 
 type ErrorType = {
     code: string,
@@ -7,5 +10,5 @@ type ErrorType = {
     message?: string,
 };
 
-// eslint-disable-next-line import/prefer-default-export
 export type { ErrorType };
+export type { ViewMode };

src/elements/common/messages.js

@@ -127,6 +127,16 @@ const messages = defineMessages({
         description: 'Label for add action',
         defaultMessage: 'Add',
     },
+    gridView: {
+        id: 'be.gridView',
+        description: 'Label for switching to grid view',
+        defaultMessage: 'Switch to Grid View',
+    },
+    listView: {
+        id: 'be.listView',
+        description: 'Label for switching to list view',
+        defaultMessage: 'Switch to List View',
+    },
     sort: {
         id: 'be.sort',
         description: 'Label for sort action',

src/elements/common/sub-header/SubHeader.js

@@ -7,6 +7,8 @@
 import React from 'react';
 import SubHeaderLeft from './SubHeaderLeft';
 import SubHeaderRight from './SubHeaderRight';
+import type { ViewMode } from '../flowTypes';
+import { VIEW_MODE_LIST } from '../../../constants';
 
 import './SubHeader.scss';
 
@@ -19,23 +21,27 @@ type Props = {
     onItemClick: Function,
     onSortChange: Function,
     onUpload: Function,
+    onViewModeChange?: (viewMode: ViewMode) => void,
     rootId: string,
     rootName?: string,
     view: View,
+    viewMode?: ViewMode,
 };
 
 const SubHeader = ({
-    rootId,
-    rootName,
+    canCreateNewFolder,
+    canUpload,
+    currentCollection,
+    isSmall,
+    onCreate,
     onItemClick,
     onSortChange,
-    currentCollection,
     onUpload,
-    onCreate,
-    canUpload,
-    canCreateNewFolder,
+    onViewModeChange,
+    rootId,
+    rootName,
     view,
-    isSmall,
+    viewMode = VIEW_MODE_LIST,
 }: Props) => (
     <div className="be-sub-header" data-testid="be-sub-header">
         <SubHeaderLeft
@@ -50,7 +56,9 @@ const SubHeader = ({
             canCreateNewFolder={canCreateNewFolder}
             canUpload={canUpload}
             currentCollection={currentCollection}
+            viewMode={viewMode}
             onCreate={onCreate}
+            onViewModeChange={onViewModeChange}
             onSortChange={onSortChange}
             onUpload={onUpload}
             view={view}

src/elements/common/sub-header/SubHeaderRight.js

@@ -7,7 +7,10 @@
 import React from 'react';
 import Sort from './Sort';
 import Add from './Add';
+import ViewModeChangeButton from './ViewModeChangeButton';
+import { FeatureFlag } from '../feature-checking';
 import { VIEW_FOLDER } from '../../../constants';
+import type { ViewMode } from '../flowTypes';
 import './SubHeaderRight.scss';
 
 type Props = {
@@ -17,25 +20,35 @@ type Props = {
     onCreate: Function,
     onSortChange: Function,
     onUpload: Function,
+    onViewModeChange?: (viewMode: ViewMode) => void,
     view: View,
+    viewMode: ViewMode,
 };
 
 const SubHeaderRight = ({
-    view,
-    onUpload,
-    onCreate,
-    canUpload,
     canCreateNewFolder,
+    canUpload,
     currentCollection,
+    onCreate,
+    onViewModeChange,
     onSortChange,
+    onUpload,
+    view,
+    viewMode,
 }: Props) => {
     const { sortBy, sortDirection, items = [] }: Collection = currentCollection;
+    const hasItems: boolean = items.length > 0;
     const isFolder: boolean = view === VIEW_FOLDER;
-    const showSort: boolean = isFolder && items.length > 0;
+    const showSort: boolean = isFolder && hasItems;
     const showAdd: boolean = (!!canUpload || !!canCreateNewFolder) && isFolder;
+    const showGridButton: boolean = isFolder && hasItems;
 
     return (
         <div className="be-sub-header-right">
+            <FeatureFlag feature="contentExplorer.gridView.enabled">
+                {showGridButton && <ViewModeChangeButton viewMode={viewMode} onViewModeChange={onViewModeChange} />}
+            </FeatureFlag>
+
             {showSort && !!sortBy && !!sortDirection && (
                 <Sort onSortChange={onSortChange} sortBy={sortBy} sortDirection={sortDirection} />
             )}

src/elements/common/sub-header/SubHeaderRight.scss

@@ -3,4 +3,8 @@
 .be-sub-header-right {
     align-items: center;
     display: flex;
+
+    .be-btn-sort {
+        margin-left: 7px;
+    }
 }

src/elements/common/sub-header/ViewModeChangeButton.js

@@ -0,0 +1,48 @@
+// @flow
+
+import React from 'react';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+
+import Button from '../../../components/button';
+import IconGridViewInverted from '../../../icons/general/IconGridViewInverted';
+import IconListView from '../../../icons/general/IconListView';
+import messages from '../messages';
+import Tooltip from '../Tooltip';
+import type { ViewMode } from '../flowTypes';
+import { VIEW_MODE_GRID, VIEW_MODE_LIST } from '../../../constants';
+import './ViewModeChangeButton.scss';
+
+type Props = {
+    className?: string,
+    onViewModeChange: (viewMode: ViewMode) => void,
+    viewMode: ViewMode,
+} & InjectIntlProvidedProps;
+
+const ViewModeChangeButton = ({ className = '', onViewModeChange, intl, viewMode, ...rest }: Props) => {
+    const isGridView = viewMode === VIEW_MODE_GRID;
+
+    const onClick = () => {
+        onViewModeChange(isGridView ? VIEW_MODE_LIST : VIEW_MODE_GRID);
+    };
+
+    return (
+        <Tooltip
+            text={
+                isGridView ? <FormattedMessage {...messages.listView} /> : <FormattedMessage {...messages.gridView} />
+            }
+        >
+            <Button
+                data-testid="view-mode-change-button"
+                className={classNames('bdl-ViewModeChangeButton', className)}
+                type="button"
+                onClick={onClick}
+                {...rest}
+            >
+                {isGridView ? <IconListView width={17} height={17} /> : <IconGridViewInverted width={17} height={17} />}
+            </Button>
+        </Tooltip>
+    );
+};
+
+export default injectIntl(ViewModeChangeButton);

src/elements/common/sub-header/ViewModeChangeButton.scss

@@ -0,0 +1,7 @@
+.bdl-ViewModeChangeButton {
+    padding: 5px 6px;
+
+    svg {
+        display: block;
+    }
+}