-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0fe2e38
commit 2bc4dc3
Showing
9 changed files
with
286 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import React, {lazy, Suspense} from 'react' | ||
import {useSelector} from 'react-redux' | ||
|
||
import {isLinkTeamModalVisible} from '../../selectors' | ||
|
||
const LinkTeamModal = lazy(() => import(/* webpackChunkName: 'LinkTeamModal' */ './link_team_modal')) | ||
|
||
const LinkTeamModalRoot = () => { | ||
const isVisible = useSelector(isLinkTeamModalVisible) | ||
if (!isVisible) { | ||
return null | ||
} | ||
|
||
return ( | ||
<Suspense fallback={null}> | ||
<LinkTeamModal/> | ||
</Suspense> | ||
) | ||
} | ||
|
||
export default LinkTeamModalRoot |
119 changes: 119 additions & 0 deletions
119
webapp/src/components/link_team_modal/link_team_modal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,119 @@ | ||
import React, {useEffect, useMemo} from 'react' | ||
import {Modal} from 'react-bootstrap' | ||
import {useDispatch, useSelector} from 'react-redux' | ||
|
||
import {getCurrentChannelId} from 'mattermost-redux/selectors/entities/common' | ||
|
||
import {isError, useGetTemplatesQuery, useLinkedTeamsQuery, useLinkTeamMutation} from '../../api' | ||
import {closeLinkTeamModal} from '../../reducers' | ||
import {getAssetsUrl, isLinkTeamModalVisible} from '../../selectors' | ||
|
||
const LinkTeamModal = () => { | ||
const isVisible = useSelector(isLinkTeamModalVisible) | ||
const {data: teamData, refetch} = useGetTemplatesQuery() | ||
useEffect(() => { | ||
if (isVisible) { | ||
refetch() | ||
} | ||
}, [isVisible, refetch]) | ||
|
||
const [linkTeam] = useLinkTeamMutation() | ||
const channelId = useSelector(getCurrentChannelId) | ||
const {data: linkedTeamIds} = useLinkedTeamsQuery({channelId}) | ||
|
||
const {teams} = teamData ?? {} | ||
const [selectedTeam, setSelectedTeam] = React.useState<NonNullable<typeof teams>[number]>() | ||
|
||
useEffect(() => { | ||
if (!selectedTeam && teams && teams.length > 0) { | ||
setSelectedTeam(teams[0]) | ||
} | ||
}, [teams, selectedTeam]) | ||
const dispatch = useDispatch() | ||
|
||
const onChangeTeam = (teamId: string) => { | ||
setSelectedTeam(teams?.find((team) => team.id === teamId)) | ||
} | ||
|
||
const handleClose = () => { | ||
dispatch(closeLinkTeamModal()) | ||
} | ||
|
||
const handleLink = async () => { | ||
if (!selectedTeam) { | ||
return | ||
} | ||
const res = await linkTeam({channelId, teamId: selectedTeam.id}) | ||
|
||
if (isError(res)) { | ||
console.error('Failed to link team', res.error) | ||
return | ||
} | ||
handleClose() | ||
} | ||
|
||
const assetsPath = useSelector(getAssetsUrl) | ||
|
||
if (!isVisible) { | ||
return null | ||
} | ||
|
||
return ( | ||
<Modal | ||
dialogClassName='modal--scroll' | ||
show={true} | ||
onHide={handleClose} | ||
onExited={handleClose} | ||
bsSize='large' | ||
backdrop='static' | ||
> | ||
<Modal.Header closeButton={true}> | ||
<Modal.Title> | ||
<img | ||
width={36} | ||
height={36} | ||
src={`${assetsPath}/parabol.png`} | ||
/> | ||
{'Link a Parabol Team to this Channel'} | ||
</Modal.Title> | ||
</Modal.Header> | ||
<Modal.Body> | ||
{teamData && (<> | ||
<div className='form-group'> | ||
<label | ||
className='control-label' | ||
htmlFor='team' | ||
>Choose Parabol Team<span className='error-text'> *</span></label> | ||
<div className='input-wrapper'> | ||
<select | ||
className='form-control' | ||
id='team' | ||
value={selectedTeam?.id} | ||
onChange={(e) => onChangeTeam(e.target.value)} | ||
> | ||
{teams?.map((team) => ( | ||
<option | ||
key={team.id} | ||
value={team.id} | ||
>{team.name}</option> | ||
))} | ||
</select> | ||
</div> | ||
</div> | ||
</>)} | ||
</Modal.Body> | ||
<Modal.Footer> | ||
<button | ||
className='btn btn-tertiary cancel-button' | ||
onClick={handleClose} | ||
>Cancel</button> | ||
<button | ||
className='btn btn-primary save-button' | ||
onClick={handleLink} | ||
>Link Team</button> | ||
</Modal.Footer> | ||
</Modal> | ||
) | ||
} | ||
|
||
export default LinkTeamModal |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.