From f441441cb40896095629652ff316fecae818716b Mon Sep 17 00:00:00 2001 From: Scott Bishel Date: Wed, 27 Apr 2022 09:13:23 -0600 Subject: [PATCH] GH-2877 - Style Autocomplete Modal (#2934) * style autocomplete modal * lint fixes * Only show profile picture for plugin * add non plugin test, update plugin test --- .../__snapshots__/shareBoard.test.tsx.snap | 1032 +++++++++++++++++ .../src/components/shareBoard/shareBoard.scss | 5 +- .../components/shareBoard/shareBoard.test.tsx | 86 ++ .../src/components/shareBoard/shareBoard.tsx | 18 + 4 files changed, 1140 insertions(+), 1 deletion(-) diff --git a/webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap b/webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap index a3eee9e85..3fcc4424b 100644 --- a/webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap +++ b/webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap @@ -701,6 +701,1038 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Regene `; +exports[`src/components/shareBoard/shareBoard return shareBoard and click Select 1`] = ` +
+
+
+ +
+
+`; + +exports[`src/components/shareBoard/shareBoard return shareBoard and click Select 2`] = ` +
+
+
+ +
+
+`; + +exports[`src/components/shareBoard/shareBoard return shareBoard and click Select, non-plugin mode 1`] = ` +
+
+
+ +
+
+`; + +exports[`src/components/shareBoard/shareBoard return shareBoard and click Select, non-plugin mode 2`] = ` +
+
+
+ +
+
+`; + exports[`src/components/shareBoard/shareBoard return shareBoard, and click switch 1`] = `
{ }) expect(container).toMatchSnapshot() }) + + test('return shareBoard and click Select', async () => { + const sharing:ISharing = { + id: '', + enabled: false, + token: '', + } + mockedOctoClient.getSharing.mockResolvedValue(sharing) + mockedUtils.isFocalboardPlugin.mockReturnValue(true) + + const users:IUser[] = [ + {id: 'userid1', username: 'username_1'} as IUser, + {id: 'userid2', username: 'username_2'} as IUser, + {id: 'userid3', username: 'username_3'} as IUser, + {id: 'userid4', username: 'username_4'} as IUser, + ] + + mockedOctoClient.searchTeamUsers.mockResolvedValue(users) + + let container + await act(async () => { + const result = render( + wrapDNDIntl( + + + ), + {wrapper: MemoryRouter}, + ) + container = result.container + }) + + expect(container).toMatchSnapshot() + const selectElement = screen.getByText('Select...') + expect(selectElement).toBeDefined() + + await act(async () => { + userEvent.click(selectElement!) + }) + + expect(container).toMatchSnapshot() + }) + + test('return shareBoard and click Select, non-plugin mode', async () => { + const sharing:ISharing = { + id: '', + enabled: false, + token: '', + } + mockedOctoClient.getSharing.mockResolvedValue(sharing) + const users:IUser[] = [ + {id: 'userid1', username: 'username_1'} as IUser, + {id: 'userid2', username: 'username_2'} as IUser, + {id: 'userid3', username: 'username_3'} as IUser, + {id: 'userid4', username: 'username_4'} as IUser, + ] + + mockedOctoClient.searchTeamUsers.mockResolvedValue(users) + + let container + await act(async () => { + const result = render( + wrapDNDIntl( + + + ), + {wrapper: MemoryRouter}, + ) + container = result.container + }) + + expect(container).toMatchSnapshot() + const selectElement = screen.getByText('Select...') + expect(selectElement).toBeDefined() + + await act(async () => { + userEvent.click(selectElement!) + }) + + expect(container).toMatchSnapshot() + }) }) diff --git a/webapp/src/components/shareBoard/shareBoard.tsx b/webapp/src/components/shareBoard/shareBoard.tsx index 19210840f..81d98c246 100644 --- a/webapp/src/components/shareBoard/shareBoard.tsx +++ b/webapp/src/components/shareBoard/shareBoard.tsx @@ -264,6 +264,23 @@ export default function ShareBoardDialog(props: Props): JSX.Element { ) + const formatOptionLabel = (user: IUser) => { + return( +
+ {Utils.isFocalboardPlugin() && + + } +
+ {user.username} + {`@${user.username}`} +
+
+ ) + } + const toolbar = board.isTemplate ? shareTemplateTitle : shareBoardTitle return ( @@ -284,6 +301,7 @@ export default function ShareBoardDialog(props: Props): JSX.Element { loadOptions={(inputValue: string) => client.searchTeamUsers(inputValue)} components={{DropdownIndicator: () => null, IndicatorSeparator: () => null}} defaultOptions={true} + formatOptionLabel={formatOptionLabel} getOptionValue={(u) => u.id} getOptionLabel={(u) => u.username} isMulti={false}