From 26e8625cf3752699b62538d19016b9eb31768f24 Mon Sep 17 00:00:00 2001 From: Tim Borodin Date: Mon, 22 Nov 2021 21:00:26 +0200 Subject: [PATCH] [GH-1539] Implement searching for the individual words in workspaces (#1590) --- .../__snapshots__/centerContent.test.tsx.snap | 908 ++++++++++++++++-- .../pages/dashboard/centerContent.test.tsx | 209 +++- webapp/src/pages/dashboard/centerContent.tsx | 15 +- 3 files changed, 1056 insertions(+), 76 deletions(-) diff --git a/webapp/src/pages/dashboard/__snapshots__/centerContent.test.tsx.snap b/webapp/src/pages/dashboard/__snapshots__/centerContent.test.tsx.snap index e289a22b5..4f0424a5b 100644 --- a/webapp/src/pages/dashboard/__snapshots__/centerContent.test.tsx.snap +++ b/webapp/src/pages/dashboard/__snapshots__/centerContent.test.tsx.snap @@ -1,6 +1,378 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`pages/dashboard/CenterContent base case 1`] = ` +exports[`pages/dashboard/CenterContent base case - find all workspaces 1`] = ` +
+
+
+

+ Dashboard +

+
+ Show empty +
+
+
+
+
+ + +
+
+
+
+ All Channels +
+
+
+
+ Foo Bar Baz +
+
+ 33 Boards +
+
+
+
+ team 33 +
+
+ 14 Boards +
+
+
+
+ Workspace +
+
+ 33 Boards +
+
+
+
+ Workspace 1 +
+
+ 1 Board +
+
+
+
+ Workspace 11 +
+
+ 1 Board +
+
+
+
+ Workspace 2 +
+
+ 2 Boards +
+
+
+
+ WS 4 +
+
+ 3 Boards +
+
+
+
+ Workspace 3 +
+
+ 0 Boards +
+
+
+
+
+
+`; + +exports[`pages/dashboard/CenterContent search filter - 5 matching workspaces 1`] = ` +
+
+
+

+ Dashboard +

+
+ Show empty +
+
+
+
+
+ + +
+
+
+
+ All Channels +
+
+
+
+ Workspace +
+
+ 33 Boards +
+
+
+
+ Workspace 1 +
+
+ 1 Board +
+
+
+
+ Workspace 11 +
+
+ 1 Board +
+
+
+
+ Workspace 2 +
+
+ 2 Boards +
+
+
+
+ Workspace 3 +
+
+ 0 Boards +
+
+
+
+
+
+`; + +exports[`pages/dashboard/CenterContent search filter - number search 1`] = ` +
+
+
+

+ Dashboard +

+
+ Show empty +
+
+
+
+
+ + +
+
+
+
+ All Channels +
+
+
+
+ Chat6 +
+
+ 17 Boards +
+
+
+
+ Title +
+
+ 6 Boards +
+
+
+
+
+
+`; + +exports[`pages/dashboard/CenterContent search filter - search for all workspaces that contain the word workspace 1`] = `
`; +exports[`pages/dashboard/CenterContent search filter - search for amount of boards 1`] = ` +
+
+
+

+ Dashboard +

+
+ Show empty +
+
+
+
+
+ + +
+
+
+
+ All Channels +
+
+
+
+ team 33 +
+
+ 14 Boards +
+
+
+
+ Workspace 3 +
+
+ 0 Boards +
+
+
+
+
+
+`; + +exports[`pages/dashboard/CenterContent search filter - search for foo baz 1`] = ` +
+
+
+

+ Dashboard +

+
+ Show empty +
+
+
+
+
+ + +
+
+
+
+ All Channels +
+
+
+
+ Foo Bar Baz +
+
+ 33 Boards +
+
+
+
+
+
+`; + +exports[`pages/dashboard/CenterContent search filter - search for workspace name and amount of boards 1`] = ` +
+
+
+

+ Dashboard +

+
+ Show empty +
+
+
+
+
+ + +
+
+
+
+ All Channels +
+
+
+
+ team 33 +
+
+ 14 Boards +
+
+
+
+ WS 4 +
+
+ 3 Boards +
+
+
+
+ Workspace 3 +
+
+ 0 Boards +
+
+
+
+
+
+`; + +exports[`pages/dashboard/CenterContent search filter - search for workspace name and amount of boards 2 1`] = ` +
+
+
+

+ Dashboard +

+
+ Show empty +
+
+
+
+
+ + +
+
+
+
+ All Channels +
+
+
+
+ Foo Bar Baz +
+
+ 33 Boards +
+
+
+
+ team 33 +
+
+ 14 Boards +
+
+
+
+ Workspace +
+
+ 33 Boards +
+
+
+
+ Workspace 1 +
+
+ 1 Board +
+
+
+
+ Workspace 11 +
+
+ 1 Board +
+
+
+
+ Workspace 2 +
+
+ 2 Boards +
+
+
+
+ Workspace 3 +
+
+ 0 Boards +
+
+
+
+
+
+`; + +exports[`pages/dashboard/CenterContent search filter - search for workspace with unique name 1`] = ` +
+
+
+

+ Dashboard +

+
+ Show empty +
+
+
+
+
+ + +
+
+
+
+ All Channels +
+
+
+
+ WS 4 +
+
+ 3 Boards +
+
+
+
+
+
+`; + exports[`pages/dashboard/CenterContent search filter - search non-existing workspace 1`] = `
`; - -exports[`pages/dashboard/CenterContent search filter 1`] = ` -
-
-
-

- Dashboard -

-
- Show empty -
-
-
-
-
- - -
-
-
-
- All Channels -
-
-
-
- Workspace 1 -
-
- 1 Board -
-
-
-
-
-
-`; diff --git a/webapp/src/pages/dashboard/centerContent.test.tsx b/webapp/src/pages/dashboard/centerContent.test.tsx index fb1785a4b..6bec669a6 100644 --- a/webapp/src/pages/dashboard/centerContent.test.tsx +++ b/webapp/src/pages/dashboard/centerContent.test.tsx @@ -47,14 +47,56 @@ describe('pages/dashboard/CenterContent', () => { boardCount: 0, } - test('base case', () => { + const workspace4: UserWorkspace = { + id: 'workspace_4', + title: 'WS 4', + boardCount: 3, + } + + const workspace5: UserWorkspace = { + id: 'workspace_5', + title: 'Foo Bar Baz', + boardCount: 33, + } + + const workspace6: UserWorkspace = { + id: 'workspace_6', + title: 'Workspace 11', + boardCount: 1, + } + + const workspace7: UserWorkspace = { + id: 'workspace_7', + title: 'Workspace', + boardCount: 33, + } + + const workspace8: UserWorkspace = { + id: 'workspace_8', + title: 'team 33', + boardCount: 14, + } + + const workspace9: UserWorkspace = { + id: 'workspace_9', + title: 'Chat6', + boardCount: 17, + } + + const workspace10: UserWorkspace = { + id: 'workspace_10', + title: 'Title', + boardCount: 6, + } + + test('base case - find all workspaces', () => { const store = mockStore({ workspace: { - userWorkspaces: new Array(workspace1, workspace2, workspace3), + userWorkspaces: new Array(workspace1, workspace2, workspace3, workspace4, workspace5, workspace6, workspace7, workspace8), }, }) - FetchMock.fn.mockReturnValueOnce(FetchMock.jsonResponse(JSON.stringify(new Array(workspace1, workspace2, workspace3)))) + FetchMock.fn.mockReturnValueOnce(FetchMock.jsonResponse(JSON.stringify(new Array(workspace1, workspace2, workspace3, workspace4, workspace5, workspace6, workspace7, workspace8)))) const component = wrapIntl( @@ -65,7 +107,7 @@ describe('pages/dashboard/CenterContent', () => { expect(container).toMatchSnapshot() }) - test('search filter', () => { + test('search filter - search for all workspaces that contain the word workspace', () => { const store = mockStore({ workspace: { userWorkspaces: new Array(workspace1, workspace2, workspace3), @@ -93,7 +135,7 @@ describe('pages/dashboard/CenterContent', () => { }, }) - FetchMock.fn.mockReturnValueOnce(FetchMock.jsonResponse(JSON.stringify(new Array(workspace1, workspace2, workspace3)))) + FetchMock.fn.mockReturnValueOnce(FetchMock.jsonResponse(JSON.stringify(new Array()))) const component = wrapIntl( @@ -103,7 +145,162 @@ describe('pages/dashboard/CenterContent', () => { const {container} = render(component) const searchInput = container.querySelector('.DashboardPage__search > input') expect(searchInput).toBeDefined() - userEvent.type(searchInput!, 'Non-existing workspace') + userEvent.type(searchInput!, 'Non-existing one') + expect(container).toMatchSnapshot() + }) + + test('search filter - search for workspace with unique name', () => { + const store = mockStore({ + workspace: { + userWorkspaces: new Array(workspace1, workspace2, workspace3, workspace4, workspace5, workspace6, workspace7, workspace8), + }, + }) + + FetchMock.fn.mockReturnValueOnce(FetchMock.jsonResponse(JSON.stringify(new Array(workspace4)))) + + const component = wrapIntl( + + + , + ) + const {container} = render(component) + const searchInput = container.querySelector('.DashboardPage__search > input') + expect(searchInput).toBeDefined() + userEvent.type(searchInput!, 'WS 4') + expect(container).toMatchSnapshot() + }) + + test('search filter - search for workspace name and amount of boards', () => { + const store = mockStore({ + workspace: { + userWorkspaces: new Array(workspace1, workspace2, workspace3, workspace4, workspace5, workspace6, workspace7, workspace8), + }, + }) + + FetchMock.fn.mockReturnValueOnce(FetchMock.jsonResponse(JSON.stringify(new Array(workspace3, workspace4, workspace8)))) + + const component = wrapIntl( + + + , + ) + const {container} = render(component) + const searchInput = container.querySelector('.DashboardPage__search > input') + expect(searchInput).toBeDefined() + userEvent.type(searchInput!, 'SOMETHING 3') + expect(container).toMatchSnapshot() + }) + + test('search filter - search for workspace name and amount of boards 2', () => { + const store = mockStore({ + workspace: { + userWorkspaces: new Array(workspace1, workspace2, workspace3, workspace4, workspace5, workspace6, workspace7, workspace8), + }, + }) + + FetchMock.fn.mockReturnValueOnce(FetchMock.jsonResponse(JSON.stringify(new Array(workspace1, workspace5, workspace7, workspace8)))) + + const component = wrapIntl( + + + , + ) + const {container} = render(component) + const searchInput = container.querySelector('.DashboardPage__search > input') + expect(searchInput).toBeDefined() + + userEvent.type(searchInput!, 'work 33') + + expect(container).toMatchSnapshot() + }) + + test('search filter - search for amount of boards', () => { + const store = mockStore({ + workspace: { + userWorkspaces: new Array(workspace1, workspace2, workspace3, workspace4, workspace5, workspace6, workspace7, workspace8), + }, + }) + + FetchMock.fn.mockReturnValueOnce(FetchMock.jsonResponse(JSON.stringify(new Array(workspace3, workspace8)))) + + const component = wrapIntl( + + + , + ) + const {container} = render(component) + const searchInput = container.querySelector('.DashboardPage__search > input') + expect(searchInput).toBeDefined() + + userEvent.type(searchInput!, '14 0') + + expect(container).toMatchSnapshot() + }) + + test('search filter - search for foo baz', () => { + const store = mockStore({ + workspace: { + userWorkspaces: new Array(workspace1, workspace2, workspace3, workspace4, workspace5, workspace6, workspace7, workspace8), + }, + }) + + FetchMock.fn.mockReturnValueOnce(FetchMock.jsonResponse(JSON.stringify(new Array(workspace5)))) + + const component = wrapIntl( + + + , + ) + const {container} = render(component) + const searchInput = container.querySelector('.DashboardPage__search > input') + expect(searchInput).toBeDefined() + userEvent.type(searchInput!, 'foo baz') + expect(container).toMatchSnapshot() + }) + + test('search filter - 5 matching workspaces', () => { + const store = mockStore({ + workspace: { + userWorkspaces: new Array(workspace1, workspace2, workspace3, workspace4, workspace5, workspace6, workspace7, workspace8), + }, + }) + + FetchMock.fn.mockReturnValueOnce(FetchMock.jsonResponse(JSON.stringify(new Array(workspace1, workspace2, workspace3, workspace6, workspace7, workspace8)))) + + const component = wrapIntl( + + + , + ) + const {container} = render(component) + const searchInput = container.querySelector('.DashboardPage__search > input') + expect(searchInput).toBeDefined() + + userEvent.type(searchInput!, 'workspace') + + expect(container).toMatchSnapshot() + }) + + test('search filter - number search', () => { + const store = mockStore({ + workspace: { + userWorkspaces: new Array(workspace1, workspace2, workspace3, workspace4, workspace5, workspace6, workspace7, workspace8, workspace9, workspace10), + }, + }) + + FetchMock.fn.mockReturnValueOnce(FetchMock.jsonResponse(JSON.stringify(new Array(workspace9)))) + + const component = wrapIntl( + + + , + ) + const {container} = render(component) + const searchInput = container.querySelector('.DashboardPage__search > input') + expect(searchInput).toBeDefined() + + userEvent.type(searchInput!, '6') + expect(container).toMatchSnapshot() }) diff --git a/webapp/src/pages/dashboard/centerContent.tsx b/webapp/src/pages/dashboard/centerContent.tsx index 696256f94..86aae515e 100644 --- a/webapp/src/pages/dashboard/centerContent.tsx +++ b/webapp/src/pages/dashboard/centerContent.tsx @@ -17,6 +17,16 @@ import Switch from '../../widgets/switch' import SearchIcon from '../../widgets/icons/search' import {UserSettings} from '../../userSettings' +const checkBoardCount = (numsArr: RegExpMatchArray, boardCount: number) => { + for (const n of numsArr) { + if (Number(n) === boardCount) { + return true + } + } + + return false +} + const DashboardCenterContent = (): JSX.Element => { const rawWorkspaces = useAppSelector(getUserWorkspaceList) || [] const dispatch = useAppDispatch() @@ -34,8 +44,11 @@ const DashboardCenterContent = (): JSX.Element => { initializeUserWorkspaces() }, []) + const titlePattern = new RegExp(searchFilter.split(' ').join('|'), 'i') + const extractedNumbers = searchFilter.match(/(\d+)/g) + const userWorkspaces = rawWorkspaces. - filter((workspace) => (workspace.boardCount > 0 || showEmptyWorkspaces) && (workspace.title.toLowerCase().includes(searchFilter) || workspace.boardCount.toString().includes(searchFilter))). + filter((workspace) => (workspace.boardCount > 0 || showEmptyWorkspaces) && (titlePattern.test(workspace.title) || (extractedNumbers && checkBoardCount(extractedNumbers, workspace.boardCount)))). sort((a, b) => { if ((a.boardCount === 0 && b.boardCount === 0) || (a.boardCount !== 0 && b.boardCount !== 0)) { return a.title.localeCompare(b.title)