diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index f11b02c23..170076f85 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -249,6 +249,7 @@ "TableHeaderMenu.sort-descending": "Sort descending", "TableRow.delete": "Delete", "TableRow.open": "Open", + "TableRow.delete": "Delete", "TopBar.give-feedback": "Give feedback", "URLProperty.copiedLink": "Copied!", "URLProperty.copy": "Copy", @@ -337,4 +338,4 @@ "tutorial_tip.ok": "Next", "tutorial_tip.out": "Opt out of these tips.", "tutorial_tip.seen": "Seen this before?" -} \ No newline at end of file +} diff --git a/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap b/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap index 340a26c5c..af085b557 100644 --- a/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap +++ b/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap @@ -1,5 +1,760 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`components/centerPanel Clicking on the Hidden card count should open a dailog 1`] = ` +
+
+
+
+ + Give feedback + + + + +
+
+
+
+ +
+
+
+
+
+ + i + +
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+
+
+ +
+
+
+
+ New +
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + Name + +
+
+
+
+
+
+
+
+
+ + + No name + + +
+ +
+ +
+ +
+
+
+
+
+ + + + +
+ +
+ +
+ +
+
+
+
+ +
+ +
+
+
+
+ i +
+ +
+
+ +
+
+
+
+
+
+ +
+ +
+
+
+
+ i +
+ +
+
+ +
+
+
+
+
+
+
+ + + + +
+ +
+ +
+ +
+
+
+
+
+
+ + Count + + + 2 + +
+
+
+
+
+ Cards hidden +
+ +
+
+
+
+ +
+
+

+ 2 cards hidden from board +

+ Card limit reached, to view older cards, + + upgrade to a paid plan + +
+ +
+
+
+`; + exports[`components/centerPanel return centerPanel and click on card to show card 1`] = `
{ addCard={() => Promise.resolve()} showCard={() => null} hiddenCardsCount={0} + showHiddenCardCountNotification={() => null} />} {activeView?.fields.viewType === 'table' && { addCard={() => Promise.resolve()} showCard={() => null} hiddenCardsCount={0} + showHiddenCardCountNotification={() => null} />} {activeView?.fields.viewType === 'gallery' && { onCardClicked={() => null} addCard={() => Promise.resolve()} hiddenCardsCount={0} + showHiddenCardCountNotification={() => null} />} {activeView?.fields.viewType === 'calendar' && void +} + const snoozeTime = 1000 * 60 * 60 * 24 * 10 const checkSnoozeInterval = 1000 * 60 * 5 -const CardLimitNotification = () => { +const CardLimitNotification = (props: Props) => { const intl = useIntl() const [time, setTime] = useState(Date.now()) @@ -68,6 +73,10 @@ const CardLimitNotification = () => { {cards: hiddenCards}, ) + if (!show && props.showHiddenCardNotification) { + show = true + } + if (hiddenCards > 0 && time > snoozedUntil) { show = true } @@ -110,12 +119,17 @@ const CardLimitNotification = () => { return null } + const hidHiddenCardNotification = () => { + show = false + props.hiddenCardCountNotificationHandler(false) + } + return ( } title={title} - onClose={onClose} - closeTooltip={intl.formatMessage({ + onClose={props.showHiddenCardNotification ? hidHiddenCardNotification : onClose} + closeTooltip={props.showHiddenCardNotification ? '' : intl.formatMessage({ id: 'notification-box-card-limit-reached.close-tooltip', defaultMessage: 'Snooze for 10 days', })} diff --git a/webapp/src/components/centerPanel.test.tsx b/webapp/src/components/centerPanel.test.tsx index db6f120a2..920b8caac 100644 --- a/webapp/src/components/centerPanel.test.tsx +++ b/webapp/src/components/centerPanel.test.tsx @@ -530,3 +530,131 @@ describe('components/centerPanel', () => { }) }) }) + +describe('components/centerPanel', () => { + const board = TestBlockFactory.createBoard() + board.id = '1' + const activeView = TestBlockFactory.createBoardView(board) + activeView.id = '1' + const card1 = TestBlockFactory.createCard(board) + card1.id = '1' + card1.title = 'card1' + card1.fields.properties = {id: 'property_value_id_1'} + card1.limited = true + const card2 = TestBlockFactory.createCard(board) + card2.id = '2' + card2.title = 'card2' + card2.fields.properties = {id: 'property_value_id_1'} + card2.limited = true + const comment1 = TestBlockFactory.createComment(card1) + comment1.id = '1' + const comment2 = TestBlockFactory.createComment(card2) + comment2.id = '2' + const groupProperty: IPropertyTemplate = { + id: 'id', + name: 'name', + type: 'text', + options: [ + { + color: 'propColorOrange', + id: 'property_value_id_1', + value: 'Q1', + }, + { + color: 'propColorBlue', + id: 'property_value_id_2', + value: 'Q2', + }, + ], + } + const state = { + clientConfig: { + value: { + featureFlags: { + subscriptions: true, + }, + }, + }, + searchText: '', + users: { + me: { + id: 'user_id_1', + props: { + focalboard_onboardingTourStarted: false, + }, + }, + workspaceUsers: [ + {username: 'username_1'}, + ], + boardUsers: [ + {username: 'username_1'}, + ], + blockSubscriptions: [], + }, + teams: { + current: {id: 'team-id'}, + }, + boards: { + current: board.id, + boards: { + [board.id]: board, + }, + templates: [], + myBoardMemberships: { + [board.id]: {userId: 'user_id_1', schemeAdmin: true}, + }, + }, + cards: { + templates: [card1, card2], + cards: [card1, card2], + current: card1.id, + }, + views: { + views: { + boardView: activeView, + }, + current: 'boardView', + }, + contents: {}, + comments: { + comments: [comment1, comment2], + }, + limits: { + limits: { + views: 0, + }, + }, + } + const store = mockStateStore([], state) + beforeAll(() => { + mockDOM() + console.error = jest.fn() + }) + beforeEach(() => { + activeView.fields.viewType = 'board' + jest.clearAllMocks() + }) + + test('Clicking on the Hidden card count should open a dailog', () => { + activeView.fields.viewType = 'table' + activeView.fields.defaultTemplateId = '1' + const {container, getByTitle, getByText} = render(wrapDNDIntl( + + + , + )) + fireEvent.click(getByTitle('hidden-card-count')) + expect(getByText('2 cards hidden from board')).not.toBeNull() + expect(container).toMatchSnapshot() + }) +}) diff --git a/webapp/src/components/centerPanel.tsx b/webapp/src/components/centerPanel.tsx index e306f0287..ba9774b12 100644 --- a/webapp/src/components/centerPanel.tsx +++ b/webapp/src/components/centerPanel.tsx @@ -76,6 +76,7 @@ const CenterPanel = (props: Props) => { const intl = useIntl() const [selectedCardIds, setSelectedCardIds] = useState([]) const [cardIdToFocusOnRender, setCardIdToFocusOnRender] = useState('') + const [showHiddenCardCountNotification, setShowHiddenCardCountNotification] = useState(false) const onboardingTourStarted = useAppSelector(getOnboardingTourStarted) const onboardingTourCategory = useAppSelector(getOnboardingTourCategory) @@ -341,6 +342,10 @@ const CenterPanel = (props: Props) => { e.stopPropagation() }, [selectedCardIds, props.activeView, props.cards, showCard]) + const hiddenCardCountNotifyHandler = useCallback((show: boolean) => { + setShowHiddenCardCountNotification(show) + }, [showHiddenCardCountNotification]) + const showShareButton = !props.readonly && me?.id !== 'single-user' const showShareLoginButton = props.readonly && me?.id !== 'single-user' @@ -349,13 +354,11 @@ const CenterPanel = (props: Props) => { () => getVisibleAndHiddenGroups(cards, activeView.fields.visibleOptionIds, activeView.fields.hiddenOptionIds, groupByProperty), [cards, activeView.fields.visibleOptionIds, activeView.fields.hiddenOptionIds, groupByProperty], ) - return (
- {props.shownCardId && { addCard={addCard} showCard={showCard} hiddenCardsCount={props.hiddenCardsCount} + showHiddenCardCountNotification={hiddenCardCountNotifyHandler} />} {activeView.fields.viewType === 'table' &&
{ addCard={addCard} onCardClicked={cardClicked} hiddenCardsCount={props.hiddenCardsCount} + showHiddenCardCountNotification={hiddenCardCountNotifyHandler} />} {activeView.fields.viewType === 'calendar' && { selectedCardIds={selectedCardIds} addCard={(show) => addCard('', show)} hiddenCardsCount={props.hiddenCardsCount} + showHiddenCardCountNotification={hiddenCardCountNotifyHandler} />} + ) } diff --git a/webapp/src/components/gallery/__snapshots__/gallery.test.tsx.snap b/webapp/src/components/gallery/__snapshots__/gallery.test.tsx.snap index e61848a60..a2582d800 100644 --- a/webapp/src/components/gallery/__snapshots__/gallery.test.tsx.snap +++ b/webapp/src/components/gallery/__snapshots__/gallery.test.tsx.snap @@ -65,7 +65,7 @@ exports[`src/components/gallery/Gallery limited card count check 1`] = `
- Cards Hidden + Cards hidden
) diff --git a/webapp/src/components/kanban/kanban.test.tsx b/webapp/src/components/kanban/kanban.test.tsx index 939c08938..8ee0f8716 100644 --- a/webapp/src/components/kanban/kanban.test.tsx +++ b/webapp/src/components/kanban/kanban.test.tsx @@ -128,6 +128,7 @@ describe('src/component/kanban/kanban', () => { addCard={jest.fn()} showCard={jest.fn()} hiddenCardsCount={0} + showHiddenCardCountNotification={jest.fn()} /> , ), {wrapper: MemoryRouter}) @@ -163,6 +164,7 @@ describe('src/component/kanban/kanban', () => { addCard={jest.fn()} showCard={jest.fn()} hiddenCardsCount={0} + showHiddenCardCountNotification={jest.fn()} /> , ), {wrapper: MemoryRouter}) @@ -197,6 +199,7 @@ describe('src/component/kanban/kanban', () => { addCard={jest.fn()} showCard={jest.fn()} hiddenCardsCount={0} + showHiddenCardCountNotification={jest.fn()} /> , ), {wrapper: MemoryRouter}) @@ -233,6 +236,7 @@ describe('src/component/kanban/kanban', () => { addCard={jest.fn()} showCard={jest.fn()} hiddenCardsCount={0} + showHiddenCardCountNotification={jest.fn()} /> , ), {wrapper: MemoryRouter}) @@ -279,6 +283,7 @@ describe('src/component/kanban/kanban', () => { addCard={jest.fn()} showCard={jest.fn()} hiddenCardsCount={0} + showHiddenCardCountNotification={jest.fn()} /> , ), {wrapper: MemoryRouter}) @@ -325,6 +330,7 @@ describe('src/component/kanban/kanban', () => { addCard={jest.fn()} showCard={jest.fn()} hiddenCardsCount={0} + showHiddenCardCountNotification={jest.fn()} /> , ), {wrapper: MemoryRouter}) @@ -372,6 +378,7 @@ describe('src/component/kanban/kanban', () => { addCard={mockedAddCard} showCard={jest.fn()} hiddenCardsCount={0} + showHiddenCardCountNotification={jest.fn()} /> , ), {wrapper: MemoryRouter}) @@ -410,6 +417,7 @@ describe('src/component/kanban/kanban', () => { addCard={jest.fn()} showCard={jest.fn()} hiddenCardsCount={0} + showHiddenCardCountNotification={jest.fn()} /> , ), {wrapper: MemoryRouter}) @@ -448,6 +456,7 @@ describe('src/component/kanban/kanban', () => { addCard={jest.fn()} showCard={jest.fn()} hiddenCardsCount={0} + showHiddenCardCountNotification={jest.fn()} /> , ), {wrapper: MemoryRouter}) @@ -493,6 +502,7 @@ describe('src/component/kanban/kanban', () => { addCard={jest.fn()} showCard={jest.fn()} hiddenCardsCount={0} + showHiddenCardCountNotification={jest.fn()} /> , ), {wrapper: MemoryRouter}) diff --git a/webapp/src/components/kanban/kanban.tsx b/webapp/src/components/kanban/kanban.tsx index 39d14998f..419b51c59 100644 --- a/webapp/src/components/kanban/kanban.tsx +++ b/webapp/src/components/kanban/kanban.tsx @@ -42,6 +42,7 @@ type Props = { addCard: (groupByOptionId?: string, show?:boolean) => Promise showCard: (cardId?: string) => void hiddenCardsCount: number + showHiddenCardCountNotification: (show: boolean) => void } const ScrollingComponent = withScrolling('div') @@ -320,7 +321,10 @@ const Kanban = (props: Props) => { ))} {hiddenCardsCount > 0 &&
- +
} } diff --git a/webapp/src/components/table/__snapshots__/table.test.tsx.snap b/webapp/src/components/table/__snapshots__/table.test.tsx.snap index 3fdbc74e0..e1fa7d16d 100644 --- a/webapp/src/components/table/__snapshots__/table.test.tsx.snap +++ b/webapp/src/components/table/__snapshots__/table.test.tsx.snap @@ -2248,7 +2248,7 @@ exports[`components/table/Table limited card in table view 1`] = `
- Cards Hidden + Cards hidden