luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

implement private icon on Share button (#2935)

Browse source
This commit is contained in:
Scott Bishel 2022-04-27 07:25:06 -06:00 committed by GitHub
parent 74e39fa5bf
commit 9431a36886
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 94 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webapp/src/blocks/board.ts
View file

@ -119,7 +119,7 @@ function createBoard(board?: Board): Board {
channelId: board?.channelId || '',
createdBy: board?.createdBy || '',
modifiedBy: board?.modifiedBy || '',
type: board?.type || 'P',
type: board?.type || BoardTypePrivate,
title: board?.title || '',
description: board?.description || '',
icon: board?.icon || '',

28
webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
View file

@ -148,7 +148,7 @@ exports[`components/centerPanel return centerPanel and click on card to show car
type="button"
>
<i
class="CompassIcon icon-globe CompassIcon"
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<span>
Share
@ -1179,7 +1179,7 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on
type="button"
>
<i
class="CompassIcon icon-globe CompassIcon"
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<span>
Share
@ -1810,7 +1810,7 @@ exports[`components/centerPanel return centerPanel and press touch del for one c
type="button"
>
<i
class="CompassIcon icon-globe CompassIcon"
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<span>
Share
@ -2441,7 +2441,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
type="button"
>
<i
class="CompassIcon icon-globe CompassIcon"
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<span>
Share
@ -3072,7 +3072,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
type="button"
>
<i
class="CompassIcon icon-globe CompassIcon"
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<span>
Share
@ -3703,7 +3703,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
type="button"
>
<i
class="CompassIcon icon-globe CompassIcon"
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<span>
Share
@ -4334,7 +4334,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
type="button"
>
<i
class="CompassIcon icon-globe CompassIcon"
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<span>
Share
@ -4965,7 +4965,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
type="button"
>
<i
class="CompassIcon icon-globe CompassIcon"
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<span>
Share
@ -5596,7 +5596,7 @@ exports[`components/centerPanel return centerPanel and select one card and click
type="button"
>
<i
class="CompassIcon icon-globe CompassIcon"
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<span>
Share
@ -6227,7 +6227,7 @@ exports[`components/centerPanel return centerPanel and select one card and click
type="button"
>
<i
class="CompassIcon icon-globe CompassIcon"
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<span>
Share
@ -6858,7 +6858,7 @@ exports[`components/centerPanel should match snapshot for Gallery 1`] = `
type="button"
>
<i
class="CompassIcon icon-globe CompassIcon"
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<span>
Share
@ -7167,7 +7167,7 @@ exports[`components/centerPanel should match snapshot for Kanban 1`] = `
type="button"
>
<i
class="CompassIcon icon-globe CompassIcon"
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<span>
Share
@ -7659,7 +7659,7 @@ exports[`components/centerPanel should match snapshot for Kanban, not shared 1`]
type="button"
>
<i
class="CompassIcon icon-globe CompassIcon"
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<span>
Share
@ -8198,7 +8198,7 @@ exports[`components/centerPanel should match snapshot for Table 1`] = `
type="button"
>
<i
class="CompassIcon icon-globe CompassIcon"
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<span>
Share

4
webapp/src/components/__snapshots__/workspace.test.tsx.snap
View file

@ -415,7 +415,7 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
type="button"
>
<i
class="CompassIcon icon-globe CompassIcon"
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<span>
Share
@ -1632,7 +1632,7 @@ exports[`src/components/workspace should match snapshot 1`] = `
type="button"
>
<i
class="CompassIcon icon-globe CompassIcon"
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<span>
Share

1
webapp/src/components/centerPanel.tsx
View file

@ -375,7 +375,6 @@ const CenterPanel = (props: Props) => {
<div className='shareButtonWrapper'>
{showShareButton &&
<ShareBoardButton
boardId={props.board.id}
enableSharedBoards={props.clientConfig?.enablePublicSharedBoards || false}
/>
}

25
webapp/src/components/shareBoard/__snapshots__/shareBoardButton.test.tsx.snap
View file

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`src/components/shareBoard/shareBoard should match snapshot 1`] = `
exports[`src/components/shareBoard/shareBoard should match snapshot, Open Board 1`] = `
<div>
<div
class="ShareBoardButton"
@ -11,7 +11,28 @@ exports[`src/components/shareBoard/shareBoard should match snapshot 1`] = `
type="button"
>
<i
class="CompassIcon icon-globe CompassIcon"
class="CompassIcon icon-globe GlobeIcon"
/>
<span>
Share
</span>
</button>
</div>
</div>
`;
exports[`src/components/shareBoard/shareBoard should match snapshot, Private Board 1`] = `
<div>
<div
class="ShareBoardButton"
>
<button
class="Button emphasis--primary size--medium"
title="Share board"
type="button"
>
<i
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<span>
Share

44
webapp/src/components/shareBoard/shareBoardButton.test.tsx
View file

@ -2,9 +2,12 @@
// See LICENSE.txt for license information.
import {render} from '@testing-library/react'
import React from 'react'
import {Provider as ReduxProvider} from 'react-redux'
import {BoardTypeOpen} from '../../blocks/board'
import {TestBlockFactory} from '../../test/testBlockFactory'
import {wrapDNDIntl} from '../../testUtils'
import {wrapDNDIntl, mockStateStore} from '../../testUtils'
import ShareBoardButton from './shareBoardButton'
@ -15,15 +18,44 @@ const boardId = '1'
const board = TestBlockFactory.createBoard()
board.id = boardId
describe('src/components/shareBoard/shareBoard', () => {
test('should match snapshot', async () => {
const state = {
boards: {
boards: {
[board.id]: board,
},
current: board.id,
},
}
const store = mockStateStore([], state)
test('should match snapshot, Private Board', async () => {
const result = render(
wrapDNDIntl(
<ShareBoardButton
boardId={board.id}
enableSharedBoards={true}
/>))
<ReduxProvider store={store}>
<ShareBoardButton
enableSharedBoards={true}
/>
</ReduxProvider>))
const renderer = result.container
expect(renderer).toMatchSnapshot()
})
test('should match snapshot, Open Board', async () => {
board.type = BoardTypeOpen
const result = render(
wrapDNDIntl(
<ReduxProvider store={store}>
<ShareBoardButton
enableSharedBoards={true}
/>
</ReduxProvider>))
const renderer = result.container
expect(renderer).toMatchSnapshot()

26
webapp/src/components/shareBoard/shareBoardButton.tsx
View file

@ -6,19 +6,30 @@ import {FormattedMessage} from 'react-intl'
import Button from '../../widgets/buttons/button'
import TelemetryClient, {TelemetryActions, TelemetryCategory} from '../../telemetry/telemetryClient'
import CompassIcon from '../../widgets/icons/compassIcon'
import {useAppSelector} from '../../store/hooks'
import {getCurrentBoard} from '../../store/boards'
import Globe from '../../widgets/icons/globe'
import LockOutline from '../../widgets/icons/lockOutline'
import {BoardTypeOpen} from '../../blocks/board'
import './shareBoardButton.scss'
import ShareBoardDialog from './shareBoard'
type Props = {
boardId: string
enableSharedBoards: boolean
}
const ShareBoardButton = (props: Props) => {
const [showShareDialog, setShowShareDialog] = useState(false)
const board = useAppSelector(getCurrentBoard)
const iconForBoardType = () => {
if(board.type == BoardTypeOpen) {
return <Globe/>
} else {
return <LockOutline/>
}
}
return (
<div className='ShareBoardButton'>
@ -26,14 +37,9 @@ const ShareBoardButton = (props: Props) => {
title='Share board'
size='medium'
emphasis='primary'
icon={
<CompassIcon
icon='globe'
className='CompassIcon'
/>
}
icon={iconForBoardType()}
onClick={() => {
TelemetryClient.trackEvent(TelemetryCategory, TelemetryActions.ShareBoardOpenModal, {board: props.boardId})
TelemetryClient.trackEvent(TelemetryCategory, TelemetryActions.ShareBoardOpenModal, {board: board.id})
setShowShareDialog(!showShareDialog)
}}
>