Allow to show/hide title in the gallery view

webapp/i18n/en.json

@@ -158,5 +158,6 @@
   "ViewTitle.remove-icon": "Remove icon",
   "ViewTitle.show-description": "show description",
   "ViewTitle.untitled-board": "Untitled board",
-  "Workspace.editing-board-template": "You're editing a board template"
+  "Workspace.editing-board-template": "You're editing a board template",
+  "default-properties.title": "Title"
 }

webapp/src/components/gallery/gallery.tsx

@@ -3,6 +3,7 @@
 import React, {useState, useEffect} from 'react'
 import {FormattedMessage} from 'react-intl'
 
+import {Constants} from '../../constants'
 import {Card} from '../../blocks/card'
 import {BoardTree} from '../../viewModel/boardTree'
 import {CardTree, MutableCardTree} from '../../viewModel/cardTree'
@@ -24,6 +25,7 @@ const Gallery = (props: Props): JSX.Element => {
     const {cards} = boardTree
     const visiblePropertyTemplates = boardTree.board.cardProperties.filter((template) => boardTree.activeView.visiblePropertyIds.includes(template.id))
     const [cardTrees, setCardTrees] = useState<{[key: string]: CardTree | undefined}>({})
+    const visibleTitle = boardTree.activeView.visiblePropertyIds.includes(Constants.titleColumnId)
 
     useCardListener(
         cards.map((c) => c.id),
@@ -60,6 +62,7 @@ const Gallery = (props: Props): JSX.Element => {
                             cardTree={cardTree}
                             onClick={props.onCardClicked}
                             visiblePropertyTemplates={visiblePropertyTemplates}
+                            visibleTitle={visibleTitle}
                             isSelected={props.selectedCardIds.includes(card.id)}
                             readonly={props.readonly}
                         />

webapp/src/components/gallery/galleryCard.tsx

@@ -3,6 +3,7 @@
 import React from 'react'
 import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
 
+import {Constants} from '../../constants'
 import {IPropertyTemplate} from '../../blocks/board'
 import {Card} from '../../blocks/card'
 import {CardTree} from '../../viewModel/cardTree'
@@ -26,6 +27,7 @@ type Props = {
     cardTree: CardTree
     onClick: (e: React.MouseEvent, card: Card) => void
     visiblePropertyTemplates: IPropertyTemplate[]
+    visibleTitle: boolean
     isSelected: boolean
     intl: IntlShape
     readonly: boolean
@@ -83,16 +85,17 @@ const GalleryCard = React.memo((props: Props) => {
                         />
                     ))}
                 </div>}
-            <div className='gallery-title'>
-                { cardTree.card.icon ? <div className='octo-icon'>{cardTree.card.icon}</div> : undefined }
-                <div key='__title'>
-                    {cardTree.card.title ||
-                        <FormattedMessage
-                            id='KanbanCard.untitled'
-                            defaultMessage='Untitled'
-                        />}
-                </div>
-            </div>
+            {props.visibleTitle &&
+                <div className='gallery-title'>
+                    { cardTree.card.icon ? <div className='octo-icon'>{cardTree.card.icon}</div> : undefined }
+                    <div key='__title'>
+                        {cardTree.card.title ||
+                            <FormattedMessage
+                                id='KanbanCard.untitled'
+                                defaultMessage='Untitled'
+                            />}
+                    </div>
+                </div>}
             {visiblePropertyTemplates.length > 0 &&
                 <div className='gallery-props'>
                     {visiblePropertyTemplates.map((template) => (

webapp/src/components/viewHeader/viewHeaderPropertiesMenu.tsx

@@ -1,8 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 import React from 'react'
-import {FormattedMessage} from 'react-intl'
+import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
 
+import {Constants} from '../../constants'
 import {IPropertyTemplate} from '../../blocks/board'
 import {BoardView} from '../../blocks/boardView'
 import mutator from '../../mutator'
@@ -13,6 +14,7 @@ import MenuWrapper from '../../widgets/menuWrapper'
 type Props = {
     properties: readonly IPropertyTemplate[]
     activeView: BoardView
+    intl: IntlShape
 }
 const ViewHeaderPropertiesMenu = React.memo((props: Props) => {
     const {properties, activeView} = props
@@ -25,6 +27,22 @@ const ViewHeaderPropertiesMenu = React.memo((props: Props) => {
                 />
             </Button>
             <Menu>
+                {activeView.viewType === 'gallery' &&
+                    <Menu.Switch
+                        key={Constants.titleColumnId}
+                        id={Constants.titleColumnId}
+                        name={props.intl.formatMessage({id: 'default-properties.title', defaultMessage: 'Title'})}
+                        isOn={activeView.visiblePropertyIds.includes(Constants.titleColumnId)}
+                        onClick={(propertyId: string) => {
+                            let newVisiblePropertyIds = []
+                            if (activeView.visiblePropertyIds.includes(propertyId)) {
+                                newVisiblePropertyIds = activeView.visiblePropertyIds.filter((o: string) => o !== propertyId)
+                            } else {
+                                newVisiblePropertyIds = [...activeView.visiblePropertyIds, propertyId]
+                            }
+                            mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds)
+                        }}
+                    />}
                 {properties.map((option: IPropertyTemplate) => (
                     <Menu.Switch
                         key={option.id}
@@ -47,4 +65,4 @@ const ViewHeaderPropertiesMenu = React.memo((props: Props) => {
     )
 })
 
-export default ViewHeaderPropertiesMenu
+export default injectIntl(ViewHeaderPropertiesMenu)