Skip to content

Commit

Permalink
refactor: removed isPlugin code from webapp
Browse files Browse the repository at this point in the history
  • Loading branch information
Rajat-Dabade committed Jul 23, 2024
1 parent b5f9deb commit cb79b98
Show file tree
Hide file tree
Showing 20 changed files with 105 additions and 496 deletions.
6 changes: 6 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

32 changes: 0 additions & 32 deletions webapp/src/components/boardsSwitcher/boardsSwitcher.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -99,38 +99,6 @@ const BoardsSwitcher = (props: Props): JSX.Element => {
</div>
</div>
{shouldViewSearchForBoardsTour && <div><SearchForBoardsTourStep/></div>}
{
Utils.isFocalboardPlugin() && !props.userIsGuest &&
<MenuWrapper>
<IconButton
size='small'
inverted={true}
className='add-board-icon'
icon={<AddIcon/>}
title={'Add Board Dropdown'}
/>
<Menu>
<Menu.Text
id='create-new-board-option'
icon={<CompassIcon icon='plus'/>}
onClick={props.onBoardTemplateSelectorOpen}
name='Create new board'
/>
<Menu.Text
id='createNewCategory'
name={intl.formatMessage({id: 'SidebarCategories.CategoryMenu.CreateNew', defaultMessage: 'Create New Category'})}
icon={
<CompassIcon
icon='folder-plus-outline'
className='CreateNewFolderIcon'
/>
}
onClick={handleCreateNewCategory}
/>
</Menu>
</MenuWrapper>
}

{
showSwitcher &&
<BoardSwitcherDialog onClose={() => setShowSwitcher(false)}/>
Expand Down
95 changes: 26 additions & 69 deletions webapp/src/components/cardDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,6 @@ import ConfirmationDialogBox, {ConfirmationDialogBoxProps} from '../components/c

import Button from '../widgets/buttons/button'

import {getUserBlockSubscriptionList} from '../store/initialLoad'
import {getClientConfig} from '../store/clientConfig'

import {IUser} from '../user'
import {getMe} from '../store/users'
import {Permission} from '../constants'
import {Block, createBlock} from '../blocks/block'
import {AttachmentBlock, createAttachmentBlock} from '../blocks/attachmentBlock'
Expand Down Expand Up @@ -57,10 +52,8 @@ const CardDialog = (props: Props): JSX.Element => {
const contents = useAppSelector(getCardContents(props.cardId))
const comments = useAppSelector(getCardComments(props.cardId))
const attachments = useAppSelector(getCardAttachments(props.cardId))
const clientConfig = useAppSelector(getClientConfig)
const intl = useIntl()
const dispatch = useAppDispatch()
const me = useAppSelector<IUser|null>(getMe)
const isTemplate = card && card.fields.isTemplate

const [showConfirmationDialogBox, setShowConfirmationDialogBox] = useState<boolean>(false)
Expand Down Expand Up @@ -159,36 +152,31 @@ const CardDialog = (props: Props): JSX.Element => {
const attachmentBlock = createAttachmentBlock(uploadingBlock)
attachmentBlock.isUploading = true
dispatch(updateAttachments([attachmentBlock]))
if (attachment.size > clientConfig.maxFileSize && Utils.isFocalboardPlugin()) {
removeUploadingAttachment(uploadingBlock)
sendFlashMessage({content: intl.formatMessage({id: 'AttachmentBlock.failed', defaultMessage: 'Unable to upload the file. Attachment size limit reached.'}), severity: 'normal'})
} else {
sendFlashMessage({content: intl.formatMessage({id: 'AttachmentBlock.upload', defaultMessage: 'Attachment uploading.'}), severity: 'normal'})
const xhr = await octoClient.uploadAttachment(boardId, attachment)
if (xhr) {
xhr.upload.onprogress = (event) => {
const percent = Math.floor((event.loaded / event.total) * 100)
dispatch(updateUploadPrecent({
blockId: attachmentBlock.id,
uploadPercent: percent,
}))
}
sendFlashMessage({content: intl.formatMessage({id: 'AttachmentBlock.upload', defaultMessage: 'Attachment uploading.'}), severity: 'normal'})
const xhr = await octoClient.uploadAttachment(boardId, attachment)
if (xhr) {
xhr.upload.onprogress = (event) => {
const percent = Math.floor((event.loaded / event.total) * 100)
dispatch(updateUploadPrecent({
blockId: attachmentBlock.id,
uploadPercent: percent,
}))
}

xhr.onload = () => {
if (xhr.status === 200 && xhr.readyState === 4) {
const json = JSON.parse(xhr.response)
const fileId = json.fileId
if (fileId) {
removeUploadingAttachment(uploadingBlock)
const block = createAttachmentBlock()
block.fields.fileId = fileId || ''
block.title = attachment.name
sendFlashMessage({content: intl.formatMessage({id: 'AttachmentBlock.uploadSuccess', defaultMessage: 'Attachment uploaded successfull.'}), severity: 'normal'})
resolve(block)
} else {
removeUploadingAttachment(uploadingBlock)
sendFlashMessage({content: intl.formatMessage({id: 'AttachmentBlock.failed', defaultMessage: 'Unable to upload the file. Attachment size limit reached.'}), severity: 'normal'})
}
xhr.onload = () => {
if (xhr.status === 200 && xhr.readyState === 4) {
const json = JSON.parse(xhr.response)
const fileId = json.fileId
if (fileId) {
removeUploadingAttachment(uploadingBlock)
const block = createAttachmentBlock()
block.fields.fileId = fileId || ''
block.title = attachment.name
sendFlashMessage({content: intl.formatMessage({id: 'AttachmentBlock.uploadSuccess', defaultMessage: 'Attachment uploaded successfull.'}), severity: 'normal'})
resolve(block)
} else {
removeUploadingAttachment(uploadingBlock)
sendFlashMessage({content: intl.formatMessage({id: 'AttachmentBlock.failed', defaultMessage: 'Unable to upload the file. Attachment size limit reached.'}), severity: 'normal'})
}
}
}
Expand Down Expand Up @@ -236,42 +224,11 @@ const CardDialog = (props: Props): JSX.Element => {
)
}

const followActionButton = (following: boolean): React.ReactNode => {
const followBtn = (
<>
<Button
className='cardFollowBtn follow'
emphasis='gray'
size='medium'
onClick={() => mutator.followBlock(props.cardId, 'card', me!.id)}
>
{intl.formatMessage({id: 'CardDetail.Follow', defaultMessage: 'Follow'})}
</Button>
</>
)

const unfollowBtn = (
<>
<Button
className='cardFollowBtn unfollow'
emphasis='tertiary'
size='medium'
onClick={() => mutator.unfollowBlock(props.cardId, 'card', me!.id)}
>
{intl.formatMessage({id: 'CardDetail.Following', defaultMessage: 'Following'})}
</Button>
</>
)

if (!isTemplate && Utils.isFocalboardPlugin() && !card?.limited) {
return (<>{attachBtn()}{following ? unfollowBtn : followBtn}</>)
}
const followActionButton = (): React.ReactNode => {
return (<>{attachBtn()}</>)
}

const followingCards = useAppSelector(getUserBlockSubscriptionList)
const isFollowingCard = Boolean(followingCards.find((following) => following.blockId === props.cardId))
const toolbar = followActionButton(isFollowingCard)
const toolbar = followActionButton()

return (
<>
Expand Down
13 changes: 2 additions & 11 deletions webapp/src/components/kanban/kanbanCard.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useState, useCallback, useMemo} from 'react'
import {useRouteMatch} from 'react-router-dom'
import {useIntl} from 'react-intl'

import {Board, IPropertyTemplate} from '../../blocks/board'
Expand All @@ -16,8 +15,6 @@ import PropertyValueElement from '../propertyValueElement'
import ConfirmationDialogBox, {ConfirmationDialogBoxProps} from '../confirmationDialogBox'
import './kanbanCard.scss'
import CardBadges from '../cardBadges'
import OpenCardTourStep from '../onboardingTour/openCard/open_card'
import CopyLinkTourStep from '../onboardingTour/copyLink/copy_link'
import CardActionsMenu from '../cardActionsMenu/cardActionsMenu'
import CardActionsMenuIcon from '../cardActionsMenu/cardActionsMenuIcon'

Expand All @@ -41,7 +38,6 @@ const KanbanCard = (props: Props) => {
const intl = useIntl()
const [isDragging, isOver, cardRef] = useSortable('card', card, !props.readonly, props.onDrop)
const visiblePropertyTemplates = props.visiblePropertyTemplates || []
const match = useRouteMatch<{boardId: string, viewId: string, cardId?: string}>()
let className = props.isSelected ? 'KanbanCard selected' : 'KanbanCard'
if (props.isManualSort && isOver) {
className += ' dragover'
Expand Down Expand Up @@ -85,21 +81,18 @@ const KanbanCard = (props: Props) => {
}
}, [props.onClick, card])

const isOnboardingCard = card.title === 'Create a new card'
const showOnboarding = isOnboardingCard && !match.params.cardId && !board.isTemplate && Utils.isFocalboardPlugin()

return (
<>
<div
ref={props.readonly ? () => null : cardRef}
className={`${className} ${showOnboarding && OnboardingCardClassName}`}
className={`${className}`}
draggable={!props.readonly}
style={{opacity: isDragging ? 0.5 : 1}}
onClick={handleOnClick}
>
{!props.readonly &&
<MenuWrapper
className={`optionsMenu ${showOnboarding ? 'show' : ''}`}
className={'optionsMenu'}
stopPropagationOnToggle={true}
>
<CardActionsMenuIcon/>
Expand Down Expand Up @@ -152,8 +145,6 @@ const KanbanCard = (props: Props) => {
</Tooltip>
))}
{props.visibleBadges && <CardBadges card={card}/>}
{showOnboarding && !match.params.cardId && <OpenCardTourStep/>}
{showOnboarding && !match.params.cardId && <CopyLinkTourStep/>}
</div>

{showConfirmationDialogBox && <ConfirmationDialogBox dialogBox={confirmDialogProps}/>}
Expand Down
16 changes: 1 addition & 15 deletions webapp/src/components/shareBoard/channelPermissionsRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {getBoardUsers} from '../../store/users'
import {Channel} from '../../store/channels'
import {Utils} from '../../utils'
import mutator from '../../mutator'
import octoClient from '../../octoClient'
import {Permission} from '../../constants'

import PrivateIcon from '../../widgets/icons/lockOutline'
Expand Down Expand Up @@ -44,20 +43,7 @@ const ChannelPermissionsRow = (props: Props): JSX.Element => {
}

useEffect(() => {
if (!Utils.isFocalboardPlugin() || !board.channelId) {
setLinkedChannel(null)
return
}
const unknownChannel = {
id: board.channelId,
type: 'P',
name: 'unknown',
display_name: intl.formatMessage({
id: 'shareBoard.unknown-channel-display-name',
defaultMessage: 'Unknown channel',
}),
} as Channel
octoClient.getChannel(board.teamId, board.channelId).then((c) => setLinkedChannel(c || unknownChannel))
setLinkedChannel(null)
}, [board.channelId])

if (!linkedChannel) {
Expand Down
47 changes: 5 additions & 42 deletions webapp/src/components/shareBoard/shareBoard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {CSSObject} from '@emotion/serialize'

import {useAppSelector} from '../../store/hooks'
import {getCurrentBoard, getCurrentBoardMembers} from '../../store/boards'
import {Channel, ChannelTypeOpen, ChannelTypePrivate} from '../../store/channels'
import {Channel} from '../../store/channels'
import {getMe, getBoardUsersList} from '../../store/users'

import {ClientConfig} from '../../config/clientConfig'
Expand Down Expand Up @@ -40,8 +40,6 @@ import {getSelectBaseStyle} from '../../theme'
import CompassIcon from '../../widgets/icons/compassIcon'
import IconButton from '../../widgets/buttons/iconButton'
import SearchIcon from '../../widgets/icons/search'
import PrivateIcon from '../../widgets/icons/lockOutline'
import PublicIcon from '../../widgets/icons/globe'

import BoardPermissionGate from '../permissions/boardPermissionGate'

Expand Down Expand Up @@ -301,12 +299,6 @@ export default function ShareBoardDialog(props: Props): JSX.Element {
const user = userOrChannel as IUser
return (
<div className='user-item'>
{Utils.isFocalboardPlugin() &&
<img
src={Utils.getProfilePicture(user.id)}
className='user-item__img'
/>
}
<div className='ml-3'>
<strong>{Utils.getUserDisplayName(user, clientConfig.teammateNameDisplay)}</strong>
<strong className='ml-2 text-light'>{`@${user.username}`}</strong>
Expand All @@ -317,20 +309,7 @@ export default function ShareBoardDialog(props: Props): JSX.Element {
)
}

if (!Utils.isFocalboardPlugin()) {
return null
}

const channel = userOrChannel as Channel
return (
<div className='user-item'>
{channel.type === ChannelTypePrivate && <PrivateIcon/>}
{channel.type === ChannelTypeOpen && <PublicIcon/>}
<div className='ml-3'>
<strong>{channel.display_name}</strong>
</div>
</div>
)
return null
}

let confirmSubtext
Expand Down Expand Up @@ -380,22 +359,8 @@ export default function ShareBoardDialog(props: Props): JSX.Element {
}}
loadOptions={async (inputValue: string) => {
const result = []
if (Utils.isFocalboardPlugin()) {
const excludeBots = true
const users = await client.searchTeamUsers(inputValue, excludeBots)
if (users) {
result.push({label: intl.formatMessage({id: 'shareBoard.members-select-group', defaultMessage: 'Members'}), options: users || []})
}
if (!board.isTemplate) {
const channels = await client.searchUserChannels(match.params.teamId || '', inputValue)
if (channels) {
result.push({label: intl.formatMessage({id: 'shareBoard.channels-select-group', defaultMessage: 'Channels'}), options: channels || []})
}
}
} else {
const users = await client.searchTeamUsers(inputValue) || []
result.push(...users)
}
const users = await client.searchTeamUsers(inputValue) || []
result.push(...users)
return result
}}
components={{DropdownIndicator: () => null, IndicatorSeparator: () => null}}
Expand All @@ -404,9 +369,7 @@ export default function ShareBoardDialog(props: Props): JSX.Element {
getOptionValue={(u) => u.id}
getOptionLabel={(u: IUser|Channel) => (u as IUser).username || (u as Channel).display_name}
isMulti={false}
placeholder={board.isTemplate ?
intl.formatMessage({id: 'ShareTemplate.searchPlaceholder', defaultMessage: 'Search for people'}) :
intl.formatMessage({id: 'ShareBoard.searchPlaceholder', defaultMessage: 'Search for people and channels'})
placeholder={board.isTemplate ? intl.formatMessage({id: 'ShareTemplate.searchPlaceholder', defaultMessage: 'Search for people'}) : intl.formatMessage({id: 'ShareBoard.searchPlaceholder', defaultMessage: 'Search for people and channels'})
}
onChange={(newValue) => {
if (newValue && (newValue as IUser).username) {
Expand Down
7 changes: 0 additions & 7 deletions webapp/src/components/shareBoard/teamPermissionsRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import {useAppSelector} from '../../store/hooks'
import {getCurrentTeam} from '../../store/teams'
import {getCurrentBoard} from '../../store/boards'
import {Permission} from '../../constants'
import {Utils} from '../../utils'

import BoardPermissionGate from '../permissions/boardPermissionGate'
import ConfirmationDialogBox from '../confirmationDialogBox'
Expand Down Expand Up @@ -93,12 +92,6 @@ const TeamPermissionsRow = (): JSX.Element => {
<div className='user-item'>
{changeRoleConfirmation && confirmationDialog}
<div className='user-item__content'>
{Utils.isFocalboardPlugin() &&
<CompassIcon
icon='mattermost'
className='user-item__img'
/>
}
<div className='ml-3'><strong>{intl.formatMessage({id: 'ShareBoard.teamPermissionsText', defaultMessage: 'Everyone at {teamName} Team'}, {teamName: team?.title})}</strong></div>
</div>
<div>
Expand Down
6 changes: 0 additions & 6 deletions webapp/src/components/shareBoard/userPermissionsRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,6 @@ const UserPermissionsRow = (props: Props): JSX.Element => {
ref={menuWrapperRef}
>
<div className='user-item__content'>
{Utils.isFocalboardPlugin() &&
<img
src={Utils.getProfilePicture(user.id)}
className='user-item__img'
/>
}
<div className='ml-3'>
<strong>{Utils.getUserDisplayName(user, teammateNameDisplay)}</strong>
<strong className='ml-2 text-light'>{`@${user.username}`}</strong>
Expand Down
Loading

0 comments on commit cb79b98

Please sign in to comment.