From 342c8df39d2c88fb63ca1a544e3babb850102598 Mon Sep 17 00:00:00 2001 From: kamre Date: Thu, 13 Jan 2022 23:26:27 +0700 Subject: [PATCH] [GH-1754] Feature: card badges (#2025) * First shot implementation of badges for the card. * Showing and hiding card badges in board/gallery views via header menu action added. * Counting of checkboxes in markdown supported. * Use Intl.formatMessage for badge titles. * Unit tests for `CardBadges` component added. Some other unit tests fixed. * Unit test for 'Show card badges' action in the view header menu added. * Cypress test for card badges added: - card with comments, description and checkboxes added for testing - card badges are shown and hidden via view menu - new Cypress command `uiAddNewCard` added - label property added to `MenuWrapper` and used in `ViewHeaderActionsMenu` * Unit tests fixed after change of the label for view menu. * Fix stylelint issues. * Class name for `CardBadges` component fixed. * Show and hide for card badges moved to `Properties` menu: - field `cardBadgesVisible` removed from `BoardViewFields` - new constant `badgesColumnId` introduced and used as an element in `visiblePropertyIds` - card badges added to calendar view - added `role` and `aria-label` for menu component `SwitchOption` - unit and Cypress tests updated * Fix Cypress test: use `blur` after typing text. Co-authored-by: Mattermod --- webapp/cypress.json | 3 +- webapp/cypress/global.d.ts | 1 + webapp/cypress/integration/cardBadges.ts | 67 +++++++++++ webapp/cypress/support/api_commands.ts | 11 ++ .../__snapshots__/cardBadges.test.tsx.snap | 47 ++++++++ .../__snapshots__/centerPanel.test.tsx.snap | 56 ++++----- .../__snapshots__/workspace.test.tsx.snap | 8 +- .../src/components/calendar/fullCalendar.tsx | 6 + webapp/src/components/cardBadges.scss | 13 +++ webapp/src/components/cardBadges.test.tsx | 82 ++++++++++++++ webapp/src/components/cardBadges.tsx | 107 ++++++++++++++++++ .../__snapshots__/gallery.test.tsx.snap | 27 ++++- .../src/components/gallery/gallery.test.tsx | 12 +- webapp/src/components/gallery/gallery.tsx | 2 + .../src/components/gallery/galleryCard.scss | 5 + .../components/gallery/galleryCard.test.tsx | 12 ++ webapp/src/components/gallery/galleryCard.tsx | 7 ++ .../globalHeaderSettingsMenu.test.tsx.snap | 4 + webapp/src/components/kanban/kanban.tsx | 3 + .../src/components/kanban/kanbanCard.test.tsx | 5 + webapp/src/components/kanban/kanbanCard.tsx | 3 + .../sidebarSettingsMenu.test.tsx.snap | 6 + .../__snapshots__/filterValue.test.tsx.snap | 2 + .../__snapshots__/viewHeader.test.tsx.snap | 4 +- .../viewHeaderActionsMenu.test.tsx.snap | 8 +- .../viewHeaderPropertiesMenu.test.tsx.snap | 64 ++++++++++- .../viewHeader/viewHeaderActionsMenu.test.tsx | 9 +- .../viewHeader/viewHeaderActionsMenu.tsx | 2 +- .../viewHeaderPropertiesMenu.test.tsx | 34 +++++- .../viewHeader/viewHeaderPropertiesMenu.tsx | 47 ++++---- webapp/src/constants.ts | 1 + webapp/src/test/testBlockFactory.ts | 32 +++--- webapp/src/testUtils.tsx | 11 ++ webapp/src/utils.test.ts | 14 +++ webapp/src/utils.ts | 19 ++++ webapp/src/widgets/icons/check.scss | 5 +- webapp/src/widgets/icons/message.tsx | 15 +++ webapp/src/widgets/icons/text.scss | 7 +- webapp/src/widgets/menu/switchOption.tsx | 2 + webapp/src/widgets/menuWrapper.tsx | 3 +- 40 files changed, 672 insertions(+), 94 deletions(-) create mode 100644 webapp/cypress/integration/cardBadges.ts create mode 100644 webapp/src/components/__snapshots__/cardBadges.test.tsx.snap create mode 100644 webapp/src/components/cardBadges.scss create mode 100644 webapp/src/components/cardBadges.test.tsx create mode 100644 webapp/src/components/cardBadges.tsx create mode 100644 webapp/src/widgets/icons/message.tsx diff --git a/webapp/cypress.json b/webapp/cypress.json index d1caf2b06..538f7b0d2 100644 --- a/webapp/cypress.json +++ b/webapp/cypress.json @@ -5,7 +5,8 @@ "**/login*.ts", "**/create*.ts", "**/manage*.ts", - "**/group*.ts" + "**/group*.ts", + "**/card*.ts" ], "env": { "username": "test-user", diff --git a/webapp/cypress/global.d.ts b/webapp/cypress/global.d.ts index a7c8a4283..0a9b24202 100644 --- a/webapp/cypress/global.d.ts +++ b/webapp/cypress/global.d.ts @@ -19,6 +19,7 @@ declare namespace Cypress { apiResetBoards: () => Chainable uiCreateNewBoard: (title?: string) => Chainable uiAddNewGroup: (name?: string) => Chainable + uiAddNewCard: (title?: string, columnIndex?: number) => Chainable /** * Create a board on a given menu item. diff --git a/webapp/cypress/integration/cardBadges.ts b/webapp/cypress/integration/cardBadges.ts new file mode 100644 index 000000000..c5cb4f2cd --- /dev/null +++ b/webapp/cypress/integration/cardBadges.ts @@ -0,0 +1,67 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +describe('Card badges', () => { + beforeEach(() => { + cy.apiInitServer() + cy.apiResetBoards() + localStorage.setItem('welcomePageViewed', 'true') + }) + + it('Shows and hides card badges', () => { + cy.visit('/') + + // Create new board + cy.uiCreateNewBoard('Testing') + + // Add a new card + cy.uiAddNewCard('Card') + + // Add some comments + cy.log('**Add some comments**') + addComment('Some comment') + addComment('Another comment') + addComment('Additional comment') + + // Add card description + cy.log('**Add card description**') + cy.findByText('Add a description...').click() + cy.findByRole('combobox').type('## Header\n- [ ] one\n- [x] two{esc}') + + // Add checkboxes + cy.log('**Add checkboxes**') + cy.findByRole('button', {name: 'Add content'}).click() + cy.findByRole('button', {name: 'checkbox'}).click() + cy.findByDisplayValue('').type('three{enter}') + cy.findByDisplayValue('').type('four{enter}') + cy.findByDisplayValue('').type('{esc}') + cy.findByDisplayValue('three').prev().click() + + // Close card dialog + cy.log('**Close card dialog**') + cy.findByRole('button', {name: 'Close dialog'}).click() + cy.findByRole('dialog').should('not.exist') + + // Show card badges + cy.log('**Show card badges**') + cy.findByRole('button', {name: 'Properties menu'}).click() + cy.findByRole('button', {name: 'Comments and Description'}).click() + cy.findByTitle('This card has a description').should('exist') + cy.findByTitle('Comments').contains('3').should('exist') + cy.findByTitle('Checkboxes').contains('2/4').should('exist') + + // Hide card badges + cy.log('**Hide card badges**') + cy.findByRole('button', {name: 'Properties menu'}).click() + cy.findByRole('button', {name: 'Comments and Description'}).click() + cy.findByTitle('This card has a description').should('not.exist') + cy.findByTitle('Comments').should('not.exist') + cy.findByTitle('Checkboxes').should('not.exist') + }) + + const addComment = (text: string) => { + cy.findByText('Add a comment...').click() + cy.findByRole('combobox').type(text).blur() + cy.findByRole('button', {name: 'Send'}).click() + } +}) diff --git a/webapp/cypress/support/api_commands.ts b/webapp/cypress/support/api_commands.ts index 405b957d9..72109849d 100644 --- a/webapp/cypress/support/api_commands.ts +++ b/webapp/cypress/support/api_commands.ts @@ -126,3 +126,14 @@ Cypress.Commands.add('uiAddNewGroup', (name?: string) => { } cy.wait(500) }) + +Cypress.Commands.add('uiAddNewCard', (title?: string, columnIndex?: number) => { + cy.log('**Add a new card**') + cy.findByRole('button', {name: '+ New'}).eq(columnIndex || 0).click() + cy.findByRole('dialog').should('exist') + + if (title) { + cy.log('**Change card title**') + cy.findByPlaceholderText('Untitled').type(title) + } +}) diff --git a/webapp/src/components/__snapshots__/cardBadges.test.tsx.snap b/webapp/src/components/__snapshots__/cardBadges.test.tsx.snap new file mode 100644 index 000000000..5c290856a --- /dev/null +++ b/webapp/src/components/__snapshots__/cardBadges.test.tsx.snap @@ -0,0 +1,47 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components/cardBadges should match snapshot 1`] = ` +
+
+ + + + + + + + 3 + + + + + + 3/7 + +
+
+`; + +exports[`components/cardBadges should match snapshot for empty card 1`] = `
`; diff --git a/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap b/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap index 23353d011..6eb91edb7 100644 --- a/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap +++ b/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap @@ -168,7 +168,7 @@ exports[`components/centerPanel return centerPanel and click on card to show car class="octo-spacer" />
@@ -233,7 +233,7 @@ exports[`components/centerPanel return centerPanel and click on card to show car class="ModalWrapper" >
@@ -727,7 +727,7 @@ exports[`components/centerPanel return centerPanel and click on new card to edit class="octo-spacer" />
@@ -792,7 +792,7 @@ exports[`components/centerPanel return centerPanel and click on new card to edit class="ModalWrapper" >
@@ -1789,7 +1789,7 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on class="octo-spacer" />
@@ -1854,7 +1854,7 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on class="ModalWrapper" >
@@ -2408,7 +2408,7 @@ exports[`components/centerPanel return centerPanel and press touch del for one c class="octo-spacer" />
@@ -2473,7 +2473,7 @@ exports[`components/centerPanel return centerPanel and press touch del for one c class="ModalWrapper" >
@@ -3027,7 +3027,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c class="octo-spacer" />
@@ -3092,7 +3092,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c class="ModalWrapper" >
@@ -3646,7 +3646,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c class="octo-spacer" />
@@ -3711,7 +3711,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c class="ModalWrapper" >
@@ -4265,7 +4265,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c class="octo-spacer" />
@@ -4330,7 +4330,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c class="ModalWrapper" >
@@ -4884,7 +4884,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c class="octo-spacer" />
@@ -4949,7 +4949,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c class="ModalWrapper" >
@@ -5503,7 +5503,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c class="octo-spacer" />
@@ -5568,7 +5568,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c class="ModalWrapper" >
@@ -6122,7 +6122,7 @@ exports[`components/centerPanel return centerPanel and select one card and click class="octo-spacer" />
@@ -6187,7 +6187,7 @@ exports[`components/centerPanel return centerPanel and select one card and click class="ModalWrapper" >
@@ -6741,7 +6741,7 @@ exports[`components/centerPanel return centerPanel and select one card and click class="octo-spacer" />
@@ -6806,7 +6806,7 @@ exports[`components/centerPanel return centerPanel and select one card and click class="ModalWrapper" >
@@ -7360,7 +7360,7 @@ exports[`components/centerPanel should match snapshot for Gallery 1`] = ` class="octo-spacer" />
@@ -7407,7 +7407,7 @@ exports[`components/centerPanel should match snapshot for Gallery 1`] = ` class="ModalWrapper" >
@@ -7649,7 +7649,7 @@ exports[`components/centerPanel should match snapshot for Kanban 1`] = ` class="octo-spacer" />
@@ -7714,7 +7714,7 @@ exports[`components/centerPanel should match snapshot for Kanban 1`] = ` class="ModalWrapper" >
@@ -8174,7 +8174,7 @@ exports[`components/centerPanel should match snapshot for Table 1`] = ` class="octo-spacer" />
@@ -8239,7 +8239,7 @@ exports[`components/centerPanel should match snapshot for Table 1`] = ` class="ModalWrapper" >
diff --git a/webapp/src/components/__snapshots__/workspace.test.tsx.snap b/webapp/src/components/__snapshots__/workspace.test.tsx.snap index 45906de85..5ef9da3e5 100644 --- a/webapp/src/components/__snapshots__/workspace.test.tsx.snap +++ b/webapp/src/components/__snapshots__/workspace.test.tsx.snap @@ -400,7 +400,7 @@ exports[`src/components/workspace return workspace and showcard 1`] = ` class="octo-spacer" />
@@ -465,7 +465,7 @@ exports[`src/components/workspace return workspace and showcard 1`] = ` class="ModalWrapper" >
@@ -1559,7 +1559,7 @@ exports[`src/components/workspace should match snapshot 1`] = ` class="octo-spacer" />
@@ -1624,7 +1624,7 @@ exports[`src/components/workspace should match snapshot 1`] = ` class="ModalWrapper" >
diff --git a/webapp/src/components/calendar/fullCalendar.tsx b/webapp/src/components/calendar/fullCalendar.tsx index f4139d691..0b4c33818 100644 --- a/webapp/src/components/calendar/fullCalendar.tsx +++ b/webapp/src/components/calendar/fullCalendar.tsx @@ -17,6 +17,8 @@ import {Card} from '../../blocks/card' import {DateProperty, createDatePropertyFromString} from '../properties/dateRange/dateRange' import Tooltip from '../../widgets/tooltip' import PropertyValueElement from '../propertyValueElement' +import {Constants} from '../../constants' +import CardBadges from '../cardBadges' import './fullcalendar.scss' @@ -113,6 +115,8 @@ const CalendarFullView = (props: Props): JSX.Element|null => { }) ), [cards, dateDisplayProperty]) + const visibleBadges = activeView.fields.visiblePropertyIds.includes(Constants.badgesColumnId) + const renderEventContent = (eventProps: EventContentArg): JSX.Element|null => { const {event} = eventProps return ( @@ -140,6 +144,8 @@ const CalendarFullView = (props: Props): JSX.Element|null => { /> ))} + {visibleBadges && + o.id === event.id) || cards[0]}/> }
) } diff --git a/webapp/src/components/cardBadges.scss b/webapp/src/components/cardBadges.scss new file mode 100644 index 000000000..1f1c7cd0b --- /dev/null +++ b/webapp/src/components/cardBadges.scss @@ -0,0 +1,13 @@ +.CardBadges { + display: flex; + align-items: center; + + span { + margin-right: 8px; + + .Icon, + .CompassIcon { + margin-right: 4px; + } + } +} diff --git a/webapp/src/components/cardBadges.test.tsx b/webapp/src/components/cardBadges.test.tsx new file mode 100644 index 000000000..eb2253ef2 --- /dev/null +++ b/webapp/src/components/cardBadges.test.tsx @@ -0,0 +1,82 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react' +import {Provider as ReduxProvider} from 'react-redux' + +import {render, screen} from '@testing-library/react' +import '@testing-library/jest-dom' + +import {TestBlockFactory} from '../test/testBlockFactory' +import {blocksById, mockStateStore, wrapDNDIntl} from '../testUtils' + +import {RootState} from '../store' + +import {CommentBlock} from '../blocks/commentBlock' + +import {CheckboxBlock} from '../blocks/checkboxBlock' + +import CardBadges from './cardBadges' + +describe('components/cardBadges', () => { + const board = TestBlockFactory.createBoard() + const card = TestBlockFactory.createCard(board) + const emptyCard = TestBlockFactory.createCard(board) + const text = TestBlockFactory.createText(card) + text.title = ` + ## Header + - [x] one + - [ ] two + - [x] three + `.replace(/\n\s+/gm, '\n') + const comments = Array.from(Array(3), () => TestBlockFactory.createComment(card)) + const checkboxes = Array.from(Array(4), () => TestBlockFactory.createCheckbox(card)) + checkboxes[2].fields.value = true + + const state: Partial = { + cards: { + current: '', + cards: blocksById([card, emptyCard]), + templates: {}, + }, + comments: { + comments: blocksById(comments), + }, + contents: { + contents: { + ...blocksById([text]), + ...blocksById(checkboxes), + }, + }, + } + const store = mockStateStore([], state) + + it('should match snapshot', () => { + const {container} = render(wrapDNDIntl( + + + , + )) + expect(container).toMatchSnapshot() + }) + + it('should match snapshot for empty card', () => { + const {container} = render(wrapDNDIntl( + + + , + )) + expect(container).toMatchSnapshot() + }) + + it('should render correct values', () => { + render(wrapDNDIntl( + + + , + )) + expect(screen.getByTitle(/card has a description/)).toBeInTheDocument() + expect(screen.getByTitle('Comments')).toHaveTextContent('3') + expect(screen.getByTitle('Checkboxes')).toHaveTextContent('3/7') + }) +}) diff --git a/webapp/src/components/cardBadges.tsx b/webapp/src/components/cardBadges.tsx new file mode 100644 index 000000000..69a97cd47 --- /dev/null +++ b/webapp/src/components/cardBadges.tsx @@ -0,0 +1,107 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. +import React, {useMemo} from 'react' +import {useIntl} from 'react-intl' + +import {Card} from '../blocks/card' +import {useAppSelector} from '../store/hooks' +import {getCardContents} from '../store/contents' +import {getCardComments} from '../store/comments' +import {ContentBlock} from '../blocks/contentBlock' +import {CommentBlock} from '../blocks/commentBlock' +import TextIcon from '../widgets/icons/text' +import MessageIcon from '../widgets/icons/message' +import CheckIcon from '../widgets/icons/check' +import {Utils} from '../utils' + +import './cardBadges.scss' + +type Props = { + card: Card + className?: string +} + +type Checkboxes = { + total: number + checked: number +} + +type Badges = { + description: boolean + comments: number + checkboxes: Checkboxes +} + +const hasBadges = (badges: Badges): boolean => { + return badges.description || badges.comments > 0 || badges.checkboxes.total > 0 +} + +type ContentsType = Array + +const calculateBadges = (contents: ContentsType, comments: CommentBlock[]): Badges => { + let text = 0 + let total = 0 + let checked = 0 + + const updateCounters = (block: ContentBlock) => { + if (block.type === 'text') { + text++ + const checkboxes = Utils.countCheckboxesInMarkdown(block.title) + total += checkboxes.total + checked += checkboxes.checked + } else if (block.type === 'checkbox') { + total++ + if (block.fields.value) { + checked++ + } + } + } + + for (const content of contents) { + if (Array.isArray(content)) { + content.forEach(updateCounters) + } else { + updateCounters(content) + } + } + return { + description: text > 0, + comments: comments.length, + checkboxes: { + total, + checked, + }, + } +} + +const CardBadges = (props: Props) => { + const {card, className} = props + const contents = useAppSelector(getCardContents(card.id)) + const comments = useAppSelector(getCardComments(card.id)) + const badges = useMemo(() => calculateBadges(contents, comments), [contents, comments]) + if (!hasBadges(badges)) { + return null + } + const intl = useIntl() + const {checkboxes} = badges + return ( +
+ {badges.description && + + + } + {badges.comments > 0 && + + + {badges.comments} + } + {checkboxes.total > 0 && + + + {`${checkboxes.checked}/${checkboxes.total}`} + } +
+ ) +} + +export default React.memo(CardBadges) diff --git a/webapp/src/components/gallery/__snapshots__/gallery.test.tsx.snap b/webapp/src/components/gallery/__snapshots__/gallery.test.tsx.snap index 6693148bc..13d7cd6b5 100644 --- a/webapp/src/components/gallery/__snapshots__/gallery.test.tsx.snap +++ b/webapp/src/components/gallery/__snapshots__/gallery.test.tsx.snap @@ -26,7 +26,14 @@ exports[`src/components/gallery/Gallery return Gallery and click new 1`] = `
+ > +
+
+
+ > +
+
+
+ > +
+
+
{ const card = TestBlockFactory.createCard(board) const card2 = TestBlockFactory.createCard(board) const contents = [TestBlockFactory.createDivider(card), TestBlockFactory.createDivider(card), TestBlockFactory.createDivider(card2)] - const state = { - contents, + const state: Partial = { + contents: { + contents: blocksById(contents), + }, cards: { + current: '', cards: { [card.id]: card, }, + templates: {}, }, comments: { comments: {}, diff --git a/webapp/src/components/gallery/gallery.tsx b/webapp/src/components/gallery/gallery.tsx index 582d91f37..ec91d6e6d 100644 --- a/webapp/src/components/gallery/gallery.tsx +++ b/webapp/src/components/gallery/gallery.tsx @@ -53,6 +53,7 @@ const Gallery = (props: Props): JSX.Element => { } const visibleTitle = activeView.fields.visiblePropertyIds.includes(Constants.titleColumnId) + const visibleBadges = activeView.fields.visiblePropertyIds.includes(Constants.badgesColumnId) return (
@@ -65,6 +66,7 @@ const Gallery = (props: Props): JSX.Element => { onClick={props.onCardClicked} visiblePropertyTemplates={visiblePropertyTemplates} visibleTitle={visibleTitle} + visibleBadges={visibleBadges} isSelected={props.selectedCardIds.includes(card.id)} readonly={props.readonly} onDrop={onDropToCard} diff --git a/webapp/src/components/gallery/galleryCard.scss b/webapp/src/components/gallery/galleryCard.scss index a37469907..6e0ac89b3 100644 --- a/webapp/src/components/gallery/galleryCard.scss +++ b/webapp/src/components/gallery/galleryCard.scss @@ -76,6 +76,7 @@ padding: 5px 10px; display: flex; overflow-wrap: anywhere; + font-weight: 600; .octo-icon { margin-right: 5px; @@ -95,4 +96,8 @@ margin-right: 5px; } } + + .gallery-badges { + padding: 5px 10px; + } } diff --git a/webapp/src/components/gallery/galleryCard.test.tsx b/webapp/src/components/gallery/galleryCard.test.tsx index 42f06d731..3338ebeeb 100644 --- a/webapp/src/components/gallery/galleryCard.test.tsx +++ b/webapp/src/components/gallery/galleryCard.test.tsx @@ -84,6 +84,7 @@ describe('src/components/gallery/GalleryCard', () => { visiblePropertyTemplates={[{id: card.id, name: 'testTemplateProperty', type: 'text', options: [{id: '1', value: 'testValue', color: 'blue'}]}]} visibleTitle={true} isSelected={true} + visibleBadges={false} readonly={false} isManualSort={true} onDrop={jest.fn()} @@ -105,6 +106,7 @@ describe('src/components/gallery/GalleryCard', () => { visiblePropertyTemplates={[]} visibleTitle={true} isSelected={true} + visibleBadges={false} readonly={false} isManualSort={true} onDrop={jest.fn()} @@ -125,6 +127,7 @@ describe('src/components/gallery/GalleryCard', () => { visiblePropertyTemplates={[]} visibleTitle={true} isSelected={true} + visibleBadges={false} readonly={false} isManualSort={true} onDrop={jest.fn()} @@ -150,6 +153,7 @@ describe('src/components/gallery/GalleryCard', () => { visiblePropertyTemplates={[]} visibleTitle={true} isSelected={true} + visibleBadges={false} readonly={false} isManualSort={true} onDrop={jest.fn()} @@ -174,6 +178,7 @@ describe('src/components/gallery/GalleryCard', () => { visiblePropertyTemplates={[]} visibleTitle={true} isSelected={true} + visibleBadges={false} readonly={false} isManualSort={true} onDrop={jest.fn()} @@ -197,6 +202,7 @@ describe('src/components/gallery/GalleryCard', () => { visiblePropertyTemplates={[]} visibleTitle={true} isSelected={true} + visibleBadges={false} readonly={false} isManualSort={true} onDrop={jest.fn()} @@ -240,6 +246,7 @@ describe('src/components/gallery/GalleryCard', () => { visiblePropertyTemplates={[]} visibleTitle={true} isSelected={true} + visibleBadges={false} readonly={false} isManualSort={true} onDrop={jest.fn()} @@ -288,6 +295,7 @@ describe('src/components/gallery/GalleryCard', () => { visiblePropertyTemplates={[]} visibleTitle={true} isSelected={true} + visibleBadges={false} readonly={false} isManualSort={true} onDrop={jest.fn()} @@ -331,6 +339,7 @@ describe('src/components/gallery/GalleryCard', () => { visiblePropertyTemplates={[]} visibleTitle={true} isSelected={true} + visibleBadges={false} readonly={false} isManualSort={true} onDrop={jest.fn()} @@ -351,6 +360,7 @@ describe('src/components/gallery/GalleryCard', () => { visiblePropertyTemplates={[]} visibleTitle={true} isSelected={true} + visibleBadges={false} readonly={true} isManualSort={true} onDrop={jest.fn()} @@ -392,6 +402,7 @@ describe('src/components/gallery/GalleryCard', () => { visiblePropertyTemplates={[]} visibleTitle={true} isSelected={true} + visibleBadges={false} readonly={false} isManualSort={true} onDrop={jest.fn()} @@ -412,6 +423,7 @@ describe('src/components/gallery/GalleryCard', () => { visiblePropertyTemplates={[]} visibleTitle={true} isSelected={true} + visibleBadges={false} readonly={true} isManualSort={true} onDrop={jest.fn()} diff --git a/webapp/src/components/gallery/galleryCard.tsx b/webapp/src/components/gallery/galleryCard.tsx index e34354399..d7f11a6b1 100644 --- a/webapp/src/components/gallery/galleryCard.tsx +++ b/webapp/src/components/gallery/galleryCard.tsx @@ -27,6 +27,7 @@ import ImageElement from '../content/imageElement' import {sendFlashMessage} from '../flashMessages' import PropertyValueElement from '../propertyValueElement' import './galleryCard.scss' +import CardBadges from '../cardBadges' type Props = { board: Board @@ -35,6 +36,7 @@ type Props = { visiblePropertyTemplates: IPropertyTemplate[] visibleTitle: boolean isSelected: boolean + visibleBadges: boolean readonly: boolean isManualSort: boolean onDrop: (srcCard: Card, dstCard: Card) => void @@ -176,6 +178,11 @@ const GalleryCard = React.memo((props: Props) => { ))}
} + {props.visibleBadges && + }
) }) diff --git a/webapp/src/components/globalHeader/__snapshots__/globalHeaderSettingsMenu.test.tsx.snap b/webapp/src/components/globalHeader/__snapshots__/globalHeaderSettingsMenu.test.tsx.snap index a1003ef2a..dffc24d27 100644 --- a/webapp/src/components/globalHeader/__snapshots__/globalHeaderSettingsMenu.test.tsx.snap +++ b/webapp/src/components/globalHeader/__snapshots__/globalHeaderSettingsMenu.test.tsx.snap @@ -414,7 +414,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
{ const visiblePropertyTemplates = activeView.fields.visiblePropertyIds.map((id) => board.fields.cardProperties.find((t) => t.id === id)).filter((i) => i) as IPropertyTemplate[] const isManualSort = activeView.fields.sortOptions.length === 0 + const visibleBadges = activeView.fields.visiblePropertyIds.includes(Constants.badgesColumnId) const propertyNameChanged = useCallback(async (option: IPropertyOption, text: string): Promise => { await mutator.changePropertyOptionValue(board, groupByProperty!, option, text) @@ -266,6 +268,7 @@ const Kanban = (props: Props) => { card={card} board={board} visiblePropertyTemplates={visiblePropertyTemplates} + visibleBadges={visibleBadges} key={card.id} readonly={props.readonly} isSelected={props.selectedCardIds.includes(card.id)} diff --git a/webapp/src/components/kanban/kanbanCard.test.tsx b/webapp/src/components/kanban/kanbanCard.test.tsx index fb9675443..8c4748227 100644 --- a/webapp/src/components/kanban/kanbanCard.test.tsx +++ b/webapp/src/components/kanban/kanbanCard.test.tsx @@ -63,6 +63,7 @@ describe('src/components/kanban/kanbanCard', () => { card={card} board={board} visiblePropertyTemplates={[propertyTemplate]} + visibleBadges={false} isSelected={false} readonly={false} onDrop={jest.fn()} @@ -80,6 +81,7 @@ describe('src/components/kanban/kanbanCard', () => { card={card} board={board} visiblePropertyTemplates={[propertyTemplate]} + visibleBadges={false} isSelected={false} readonly={true} onDrop={jest.fn()} @@ -97,6 +99,7 @@ describe('src/components/kanban/kanbanCard', () => { card={card} board={board} visiblePropertyTemplates={[propertyTemplate]} + visibleBadges={false} isSelected={false} readonly={false} onDrop={jest.fn()} @@ -132,6 +135,7 @@ describe('src/components/kanban/kanbanCard', () => { card={card} board={board} visiblePropertyTemplates={[propertyTemplate]} + visibleBadges={false} isSelected={false} readonly={false} onDrop={jest.fn()} @@ -157,6 +161,7 @@ describe('src/components/kanban/kanbanCard', () => { card={card} board={board} visiblePropertyTemplates={[propertyTemplate]} + visibleBadges={false} isSelected={false} readonly={false} onDrop={jest.fn()} diff --git a/webapp/src/components/kanban/kanbanCard.tsx b/webapp/src/components/kanban/kanbanCard.tsx index b5e471b5a..494fcbf62 100644 --- a/webapp/src/components/kanban/kanbanCard.tsx +++ b/webapp/src/components/kanban/kanbanCard.tsx @@ -25,12 +25,14 @@ import PropertyValueElement from '../propertyValueElement' import ConfirmationDialogBox, {ConfirmationDialogBoxProps} from '../confirmationDialogBox' import './kanbanCard.scss' +import CardBadges from '../cardBadges' type Props = { card: Card board: Board visiblePropertyTemplates: IPropertyTemplate[] isSelected: boolean + visibleBadges: boolean onClick?: (e: React.MouseEvent) => void readonly: boolean onDrop: (srcCard: Card, dstCard: Card) => void @@ -165,6 +167,7 @@ const KanbanCard = React.memo((props: Props) => { /> ))} + {props.visibleBadges && }
{showConfirmationDialogBox && } diff --git a/webapp/src/components/sidebar/__snapshots__/sidebarSettingsMenu.test.tsx.snap b/webapp/src/components/sidebar/__snapshots__/sidebarSettingsMenu.test.tsx.snap index 18ca642ac..be94de76c 100644 --- a/webapp/src/components/sidebar/__snapshots__/sidebarSettingsMenu.test.tsx.snap +++ b/webapp/src/components/sidebar/__snapshots__/sidebarSettingsMenu.test.tsx.snap @@ -434,7 +434,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
@@ -100,7 +100,7 @@ exports[`components/viewHeader/viewHeader return viewHeader 1`] = ` class="ModalWrapper" >
diff --git a/webapp/src/components/viewHeader/__snapshots__/viewHeaderActionsMenu.test.tsx.snap b/webapp/src/components/viewHeader/__snapshots__/viewHeaderActionsMenu.test.tsx.snap index ab31a5aad..6525e427f 100644 --- a/webapp/src/components/viewHeader/__snapshots__/viewHeaderActionsMenu.test.tsx.snap +++ b/webapp/src/components/viewHeader/__snapshots__/viewHeaderActionsMenu.test.tsx.snap @@ -6,7 +6,7 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu and verify call class="ModalWrapper" >
@@ -116,7 +116,7 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu and verify call class="ModalWrapper" >
@@ -226,7 +226,7 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu with Share Boar class="ModalWrapper" >
@@ -336,7 +336,7 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu without Share B class="ModalWrapper" >
diff --git a/webapp/src/components/viewHeader/__snapshots__/viewHeaderPropertiesMenu.test.tsx.snap b/webapp/src/components/viewHeader/__snapshots__/viewHeaderPropertiesMenu.test.tsx.snap index 95d6e8344..98da74886 100644 --- a/webapp/src/components/viewHeader/__snapshots__/viewHeaderPropertiesMenu.test.tsx.snap +++ b/webapp/src/components/viewHeader/__snapshots__/viewHeaderPropertiesMenu.test.tsx.snap @@ -3,7 +3,7 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu 1`] = `
@@ -25,7 +25,9 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu 1 class="menu-options" >
+
+
+
+ Comments and Description +
+
+
+
+
@@ -156,7 +185,9 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu w class="menu-options" >
+
+
+
+ Comments and Description +
+
+
+
+
{ ), ) const buttonElement = screen.getByRole('button', { - name: 'menuwrapper', + name: 'View menu', }) userEvent.click(buttonElement) expect(container).toMatchSnapshot() @@ -76,7 +77,7 @@ describe('components/viewHeader/viewHeaderActionsMenu', () => { ), ) const buttonElement = screen.getByRole('button', { - name: 'menuwrapper', + name: 'View menu', }) userEvent.click(buttonElement) expect(container).toMatchSnapshot() @@ -94,7 +95,7 @@ describe('components/viewHeader/viewHeaderActionsMenu', () => { , ), ) - const buttonElement = screen.getByRole('button', {name: 'menuwrapper'}) + const buttonElement = screen.getByRole('button', {name: 'View menu'}) userEvent.click(buttonElement) expect(container).toMatchSnapshot() const buttonExportCSV = screen.getByRole('button', {name: 'Export to CSV'}) @@ -115,7 +116,7 @@ describe('components/viewHeader/viewHeaderActionsMenu', () => { , ), ) - const buttonElement = screen.getByRole('button', {name: 'menuwrapper'}) + const buttonElement = screen.getByRole('button', {name: 'View menu'}) userEvent.click(buttonElement) expect(container).toMatchSnapshot() const buttonExportBoardArchive = screen.getByRole('button', {name: 'Export board archive'}) diff --git a/webapp/src/components/viewHeader/viewHeaderActionsMenu.tsx b/webapp/src/components/viewHeader/viewHeaderActionsMenu.tsx index 1a4451191..48b80979f 100644 --- a/webapp/src/components/viewHeader/viewHeaderActionsMenu.tsx +++ b/webapp/src/components/viewHeader/viewHeaderActionsMenu.tsx @@ -108,7 +108,7 @@ const ViewHeaderActionsMenu = React.memo((props: Props) => { return ( - + }/> { , ), ) - const buttonElement = screen.getByRole('button', {name: 'menuwrapper'}) + const buttonElement = screen.getByRole('button', {name: 'Properties menu'}) userEvent.click(buttonElement) expect(container).toMatchSnapshot() }) @@ -58,8 +67,29 @@ describe('components/viewHeader/viewHeaderPropertiesMenu', () => { , ), ) - const buttonElement = screen.getByRole('button', {name: 'menuwrapper'}) + const buttonElement = screen.getByRole('button', {name: 'Properties menu'}) userEvent.click(buttonElement) expect(container).toMatchSnapshot() }) + test('show menu and verify the call for showing card badges', () => { + render( + wrapIntl( + + + , + ), + ) + const menuButton = screen.getByRole('button', {name: 'Properties menu'}) + userEvent.click(menuButton) + const badgesButton = screen.getByRole('button', {name: 'Comments and Description'}) + userEvent.click(badgesButton) + expect(mockedMutator.changeViewVisibleProperties).toHaveBeenCalledWith( + activeView.id, + activeView.fields.visiblePropertyIds, + [...activeView.fields.visiblePropertyIds, Constants.badgesColumnId], + ) + }) }) diff --git a/webapp/src/components/viewHeader/viewHeaderPropertiesMenu.tsx b/webapp/src/components/viewHeader/viewHeaderPropertiesMenu.tsx index 37ff25ec2..66262ee70 100644 --- a/webapp/src/components/viewHeader/viewHeaderPropertiesMenu.tsx +++ b/webapp/src/components/viewHeader/viewHeaderPropertiesMenu.tsx @@ -18,8 +18,21 @@ type Props = { const ViewHeaderPropertiesMenu = React.memo((props: Props) => { const {properties, activeView} = props const intl = useIntl() + const {viewType, visiblePropertyIds} = activeView.fields + const canShowBadges = viewType === 'board' || viewType === 'gallery' || viewType === 'calendar' + + const toggleVisibility = (propertyId: string) => { + let newVisiblePropertyIds = [] + if (visiblePropertyIds.includes(propertyId)) { + newVisiblePropertyIds = visiblePropertyIds.filter((o: string) => o !== propertyId) + } else { + newVisiblePropertyIds = [...visiblePropertyIds, propertyId] + } + mutator.changeViewVisibleProperties(activeView.id, visiblePropertyIds, newVisiblePropertyIds) + } + return ( - + ) diff --git a/webapp/src/constants.ts b/webapp/src/constants.ts index ca592fbf4..a35acb6d7 100644 --- a/webapp/src/constants.ts +++ b/webapp/src/constants.ts @@ -18,6 +18,7 @@ class Constants { static readonly minColumnWidth = 100 static readonly defaultTitleColumnWidth = 280 static readonly titleColumnId = '__title' + static readonly badgesColumnId = '__badges' static readonly versionString = '0.14.0' diff --git a/webapp/src/test/testBlockFactory.ts b/webapp/src/test/testBlockFactory.ts index c358ff445..a04aecffa 100644 --- a/webapp/src/test/testBlockFactory.ts +++ b/webapp/src/test/testBlockFactory.ts @@ -10,6 +10,8 @@ import {createFilterClause} from '../blocks/filterClause' import {createFilterGroup} from '../blocks/filterGroup' import {ImageBlock, createImageBlock} from '../blocks/imageBlock' import {TextBlock, createTextBlock} from '../blocks/textBlock' +import {CheckboxBlock, createCheckboxBlock} from '../blocks/checkboxBlock' +import {Block} from '../blocks/block' class TestBlockFactory { static createBoard(): Board { @@ -121,39 +123,43 @@ class TestBlockFactory { return card } - static createComment(card: Card): CommentBlock { - const block = createCommentBlock() + private static addToCard(block: BlockType, card: Card, isContent = true): BlockType { block.parentId = card.id block.rootId = card.rootId + if (isContent) { + card.fields.contentOrder.push(block.id) + } + return block + } + + static createComment(card: Card): CommentBlock { + const block = this.addToCard(createCommentBlock(), card, false) block.title = 'title' return block } static createText(card: Card): TextBlock { - const block = createTextBlock() - block.parentId = card.id - block.rootId = card.rootId + const block = this.addToCard(createTextBlock(), card) block.title = 'title' - return block } static createImage(card: Card): ImageBlock { - const block = createImageBlock() - block.parentId = card.id - block.rootId = card.rootId + const block = this.addToCard(createImageBlock(), card) block.fields.fileId = 'fileId' - return block } static createDivider(card: Card): DividerBlock { - const block = createDividerBlock() - block.parentId = card.id - block.rootId = card.rootId + const block = this.addToCard(createDividerBlock(), card) block.title = 'title' + return block + } + static createCheckbox(card: Card): CheckboxBlock { + const block = this.addToCard(createCheckboxBlock(), card) + block.title = 'title' return block } } diff --git a/webapp/src/testUtils.tsx b/webapp/src/testUtils.tsx index 4f4bf46ef..736ac712e 100644 --- a/webapp/src/testUtils.tsx +++ b/webapp/src/testUtils.tsx @@ -7,6 +7,8 @@ import {HTML5Backend} from 'react-dnd-html5-backend' import configureStore, {MockStoreEnhanced} from 'redux-mock-store' import {Middleware} from 'redux' +import {Block} from './blocks/block' + export const wrapIntl = (children?: React.ReactNode): JSX.Element => {children} export const wrapDNDIntl = (children?: React.ReactNode): JSX.Element => { return ( @@ -51,3 +53,12 @@ export function mockStateStore(middleware:Middleware[], state:unknown): MockStor const mockStore = configureStore(middleware) return mockStore(state) } + +export type BlocksById = {[key: string]: BlockType} + +export function blocksById(blocks: Array): BlocksById { + return blocks.reduce((res, block) => { + res[block.id] = block + return res + }, {} as BlocksById) +} diff --git a/webapp/src/utils.test.ts b/webapp/src/utils.test.ts index 773ab1b3d..54d08bbaf 100644 --- a/webapp/src/utils.test.ts +++ b/webapp/src/utils.test.ts @@ -54,6 +54,20 @@ describe('utils', () => { }) }) + describe('countCheckboxesInMarkdown', () => { + test('should count checkboxes', () => { + const text = ` + ## Header + - [x] one + - [ ] two + - [x] three + `.replace(/\n\s+/gm, '\n') + const checkboxes = Utils.countCheckboxesInMarkdown(text) + expect(checkboxes.total).toBe(3) + expect(checkboxes.checked).toBe(2) + }) + }) + describe('test - buildURL', () => { test('buildURL, no base', () => { expect(Utils.buildURL('test', true)).toBe('http://localhost/test') diff --git a/webapp/src/utils.ts b/webapp/src/utils.ts index 4dc9a4dc2..4eeece8c8 100644 --- a/webapp/src/utils.ts +++ b/webapp/src/utils.ts @@ -234,10 +234,29 @@ class Utils { return `
${header}${body}
` } + return this.htmlFromMarkdownWithRenderer(text, renderer) + } + + static htmlFromMarkdownWithRenderer(text: string, renderer: marked.Renderer): string { const html = marked(text.replace(/ { + ++total + if (isChecked) { + ++checked + } + return '' + } + this.htmlFromMarkdownWithRenderer(text, renderer) + return {total, checked} + } + // Date and Time private static yearOption(date: Date) { const isCurrentYear = date.getFullYear() === new Date().getFullYear() diff --git a/webapp/src/widgets/icons/check.scss b/webapp/src/widgets/icons/check.scss index 44b55809f..5b018882e 100644 --- a/webapp/src/widgets/icons/check.scss +++ b/webapp/src/widgets/icons/check.scss @@ -2,6 +2,7 @@ stroke: rgba(var(--center-channel-color-rgb), 0.5); stroke-width: 8px; fill: none; - width: 24px; - height: 24px; + width: 1em; + height: 1em; + line-height: 1em; } diff --git a/webapp/src/widgets/icons/message.tsx b/webapp/src/widgets/icons/message.tsx new file mode 100644 index 000000000..e46aa874d --- /dev/null +++ b/webapp/src/widgets/icons/message.tsx @@ -0,0 +1,15 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react' + +import CompassIcon from './compassIcon' + +export default function MessageIcon(): JSX.Element { + return ( + + ) +} diff --git a/webapp/src/widgets/icons/text.scss b/webapp/src/widgets/icons/text.scss index 3c6056c06..c2ecb2a98 100644 --- a/webapp/src/widgets/icons/text.scss +++ b/webapp/src/widgets/icons/text.scss @@ -1,6 +1,7 @@ .TextIcon { - fill: rgba(var(--center-channel-color-rgb), 0.7); + fill: rgba(var(--center-channel-color-rgb), 0.5); stroke: none; - width: 24px; - height: 24px; + width: 1em; + height: 1em; + line-height: 1em; } diff --git a/webapp/src/widgets/menu/switchOption.tsx b/webapp/src/widgets/menu/switchOption.tsx index 2b6df37cd..316e3a402 100644 --- a/webapp/src/widgets/menu/switchOption.tsx +++ b/webapp/src/widgets/menu/switchOption.tsx @@ -17,6 +17,8 @@ function SwitchOption(props: SwitchOptionProps): JSX.Element { return (
{ e.target.dispatchEvent(new Event('menuItemClicked')) props.onClick(props.id) diff --git a/webapp/src/widgets/menuWrapper.tsx b/webapp/src/widgets/menuWrapper.tsx index e53fbc630..4e19c601a 100644 --- a/webapp/src/widgets/menuWrapper.tsx +++ b/webapp/src/widgets/menuWrapper.tsx @@ -11,6 +11,7 @@ type Props = { className?: string disabled?: boolean isOpen?: boolean + label?: string } const MenuWrapper = React.memo((props: Props) => { @@ -84,7 +85,7 @@ const MenuWrapper = React.memo((props: Props) => { return (