GH-2877 - Style Autocomplete Modal (#2934)

* style autocomplete modal

* lint fixes

* Only show profile picture for plugin

* add non plugin test, update plugin test

webapp/src/components/shareBoard/shareBoard.scss

@@ -174,12 +174,15 @@
         max-height: 282px;
         overflow: auto;
         border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+
+        .user-item {
+            justify-content: space-between;
+        }
     }
 
     .user-item {
         display: flex;
         align-items: center;
-        justify-content: space-between;
         height: 56px;
         padding: 0 16px;
 

webapp/src/components/shareBoard/shareBoard.test.tsx

@@ -460,4 +460,90 @@ describe('src/components/shareBoard/shareBoard', () => {
         })
         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(
+                    <ReduxProvider store={store}>
+                        <ShareBoard
+                            onClose={jest.fn()}
+                            enableSharedBoards={false}
+                        />
+                    </ReduxProvider>),
+                {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(
+                    <ReduxProvider store={store}>
+                        <ShareBoard
+                            onClose={jest.fn()}
+                            enableSharedBoards={false}
+                        />
+                    </ReduxProvider>),
+                {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()
+    })
 })

webapp/src/components/shareBoard/shareBoard.tsx

@@ -264,6 +264,23 @@ export default function ShareBoardDialog(props: Props): JSX.Element {
         </span>
     )
 
+    const formatOptionLabel = (user: IUser) => {
+        return(
+            <div className='user-item'>
+                {Utils.isFocalboardPlugin() &&
+                    <img
+                        src={Utils.getProfilePicture(user.id)}
+                        className='user-item__img'
+                    />
+                }
+                <div className='ml-3'>
+                    <strong>{user.username}</strong>
+                    <strong className='ml-2 text-light'>{`@${user.username}`}</strong>
+                </div>
+            </div>
+        )
+    }
+
     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}