Update Share Button (#2432)
* update shareboard button to always display * lint fixes * fix/update unit tests * update shareboard button to always display * lint fixes * fix/update unit tests * Updating UI for share dialog * Updating test * update tests * update to include view Co-authored-by: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
This commit is contained in:
Scott Bishel
GitHub
parent
8ccf772241
commit
50020ce8b1
10 changed files with 418 additions and 198 deletions
|
|
@ -8377,7 +8377,23 @@ exports[`components/centerPanel should match snapshot for Kanban, not shared 1`]
|
|||
</div>
|
||||
<div
|
||||
class="shareButtonWrapper"
|
||||
/>
|
||||
>
|
||||
<div
|
||||
class="ShareBoardButton"
|
||||
>
|
||||
<button
|
||||
title="Share board"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-globe CompassIcon"
|
||||
/>
|
||||
<span>
|
||||
Share
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ViewHeader"
|
||||
|
|
|
|||
|
|
@ -215,10 +215,11 @@ class CenterPanel extends React.Component<Props, State> {
|
|||
readonly={this.props.readonly}
|
||||
/>
|
||||
<div className='shareButtonWrapper'>
|
||||
{!this.props.readonly && this.props.showShared &&
|
||||
{!this.props.readonly &&
|
||||
(
|
||||
<ShareBoardButton
|
||||
boardId={this.props.board.id}
|
||||
enableSharedBoards={this.props.clientConfig?.enablePublicSharedBoards || false}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
@ -237,7 +238,6 @@ class CenterPanel extends React.Component<Props, State> {
|
|||
addCardTemplate={this.addCardTemplate}
|
||||
editCardTemplate={this.editCardTemplate}
|
||||
readonly={this.props.readonly}
|
||||
showShared={this.props.showShared}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
|
|||
<h1
|
||||
class="text-heading5 mt-2"
|
||||
>
|
||||
Share Board
|
||||
|
||||
</h1>
|
||||
<button
|
||||
aria-label="Close dialog"
|
||||
|
|
@ -31,7 +31,21 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
|
|||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-modal"
|
||||
class="tabs-container"
|
||||
>
|
||||
<button
|
||||
class="tab-item tab-item--active"
|
||||
>
|
||||
Share
|
||||
</button>
|
||||
<button
|
||||
class="tab-item false"
|
||||
>
|
||||
Publish
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-content"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
|
|
@ -43,21 +57,12 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
|
|||
<div
|
||||
class="text-heading2"
|
||||
>
|
||||
Publish to the web
|
||||
Share internally
|
||||
</div>
|
||||
<div
|
||||
class="text-light"
|
||||
>
|
||||
Publish and share a “read only” link with everyone on the web
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="Switch override-main size--medium on"
|
||||
>
|
||||
<div
|
||||
class="octo-switch-inner"
|
||||
/>
|
||||
Users who have permissions will be able to use this link
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -70,29 +75,15 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
|
|||
>
|
||||
<a
|
||||
class="shareUrl"
|
||||
href="http://localhost/workspace/1/shared/1/1?r=oneToken"
|
||||
href="http://localhost/undefined/workspace/1/1/1"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
http://localhost/workspace/1/shared/1/1?r=oneToken
|
||||
http://localhost/undefined/workspace/1/1/1
|
||||
</a>
|
||||
<div
|
||||
class="octo-tooltip tooltip-top"
|
||||
data-tooltip="Regenerate token"
|
||||
>
|
||||
<button
|
||||
aria-label="Regenerate token"
|
||||
title="Regenerate token"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-refresh undefined"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
title="Copy link"
|
||||
title="Copy internal link"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
|
|
@ -128,7 +119,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
|
|||
<h1
|
||||
class="text-heading5 mt-2"
|
||||
>
|
||||
Share Board
|
||||
|
||||
</h1>
|
||||
<button
|
||||
aria-label="Close dialog"
|
||||
|
|
@ -141,7 +132,21 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
|
|||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-modal"
|
||||
class="tabs-container"
|
||||
>
|
||||
<button
|
||||
class="tab-item tab-item--active"
|
||||
>
|
||||
Share
|
||||
</button>
|
||||
<button
|
||||
class="tab-item false"
|
||||
>
|
||||
Publish
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-content"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
|
|
@ -153,21 +158,12 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
|
|||
<div
|
||||
class="text-heading2"
|
||||
>
|
||||
Publish to the web
|
||||
Share internally
|
||||
</div>
|
||||
<div
|
||||
class="text-light"
|
||||
>
|
||||
Publish and share a “read only” link with everyone on the web
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="Switch override-main size--medium on"
|
||||
>
|
||||
<div
|
||||
class="octo-switch-inner"
|
||||
/>
|
||||
Users who have permissions will be able to use this link
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -180,29 +176,15 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
|
|||
>
|
||||
<a
|
||||
class="shareUrl"
|
||||
href="http://localhost/workspace/1/shared/1/1?r=oneToken"
|
||||
href="http://localhost/undefined/workspace/1/1/1"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
http://localhost/workspace/1/shared/1/1?r=oneToken
|
||||
http://localhost/undefined/workspace/1/1/1
|
||||
</a>
|
||||
<div
|
||||
class="octo-tooltip tooltip-top"
|
||||
data-tooltip="Regenerate token"
|
||||
>
|
||||
<button
|
||||
aria-label="Regenerate token"
|
||||
title="Regenerate token"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-refresh undefined"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
title="Copy link"
|
||||
title="Copy internal link"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
|
|
@ -238,7 +220,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Regene
|
|||
<h1
|
||||
class="text-heading5 mt-2"
|
||||
>
|
||||
Share Board
|
||||
|
||||
</h1>
|
||||
<button
|
||||
aria-label="Close dialog"
|
||||
|
|
@ -251,7 +233,21 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Regene
|
|||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-modal"
|
||||
class="tabs-container"
|
||||
>
|
||||
<button
|
||||
class="tab-item false"
|
||||
>
|
||||
Share
|
||||
</button>
|
||||
<button
|
||||
class="tab-item tab-item--active"
|
||||
>
|
||||
Publish
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-content"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
|
|
@ -290,11 +286,11 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Regene
|
|||
>
|
||||
<a
|
||||
class="shareUrl"
|
||||
href="http://localhost/workspace/1/shared/1/1?r=oneToken"
|
||||
href="http://localhost/workspace/1/shared/1/1?r=anotherToken"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
http://localhost/workspace/1/shared/1/1?r=oneToken
|
||||
http://localhost/workspace/1/shared/1/1?r=anotherToken
|
||||
</a>
|
||||
<div
|
||||
class="octo-tooltip tooltip-top"
|
||||
|
|
@ -312,7 +308,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Regene
|
|||
</div>
|
||||
</div>
|
||||
<button
|
||||
title="Copy link"
|
||||
title="Copy public link"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
|
|
@ -348,7 +344,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard, and click switc
|
|||
<h1
|
||||
class="text-heading5 mt-2"
|
||||
>
|
||||
Share Board
|
||||
|
||||
</h1>
|
||||
<button
|
||||
aria-label="Close dialog"
|
||||
|
|
@ -361,7 +357,21 @@ exports[`src/components/shareBoard/shareBoard return shareBoard, and click switc
|
|||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-modal"
|
||||
class="tabs-container"
|
||||
>
|
||||
<button
|
||||
class="tab-item false"
|
||||
>
|
||||
Share
|
||||
</button>
|
||||
<button
|
||||
class="tab-item tab-item--active"
|
||||
>
|
||||
Publish
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-content"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
|
|
@ -422,7 +432,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard, and click switc
|
|||
</div>
|
||||
</div>
|
||||
<button
|
||||
title="Copy link"
|
||||
title="Copy public link"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
|
|
@ -458,7 +468,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoardComponent and cli
|
|||
<h1
|
||||
class="text-heading5 mt-2"
|
||||
>
|
||||
Share Board
|
||||
|
||||
</h1>
|
||||
<button
|
||||
aria-label="Close dialog"
|
||||
|
|
@ -471,7 +481,21 @@ exports[`src/components/shareBoard/shareBoard return shareBoardComponent and cli
|
|||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-modal"
|
||||
class="tabs-container"
|
||||
>
|
||||
<button
|
||||
class="tab-item false"
|
||||
>
|
||||
Share
|
||||
</button>
|
||||
<button
|
||||
class="tab-item tab-item--active"
|
||||
>
|
||||
Publish
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-content"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
|
|
@ -532,7 +556,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoardComponent and cli
|
|||
</div>
|
||||
</div>
|
||||
<button
|
||||
title="Copy link"
|
||||
title="Copy public link"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
|
|
@ -568,7 +592,7 @@ exports[`src/components/shareBoard/shareBoard should match snapshot 1`] = `
|
|||
<h1
|
||||
class="text-heading5 mt-2"
|
||||
>
|
||||
Share Board
|
||||
|
||||
</h1>
|
||||
<button
|
||||
aria-label="Close dialog"
|
||||
|
|
@ -581,7 +605,21 @@ exports[`src/components/shareBoard/shareBoard should match snapshot 1`] = `
|
|||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-modal"
|
||||
class="tabs-container"
|
||||
>
|
||||
<button
|
||||
class="tab-item tab-item--active"
|
||||
>
|
||||
Share
|
||||
</button>
|
||||
<button
|
||||
class="tab-item false"
|
||||
>
|
||||
Publish
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-content"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
|
|
@ -593,25 +631,43 @@ exports[`src/components/shareBoard/shareBoard should match snapshot 1`] = `
|
|||
<div
|
||||
class="text-heading2"
|
||||
>
|
||||
Publish to the web
|
||||
Share internally
|
||||
</div>
|
||||
<div
|
||||
class="text-light"
|
||||
>
|
||||
Publish and share a “read only” link with everyone on the web
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="Switch override-main size--medium"
|
||||
>
|
||||
<div
|
||||
class="octo-switch-inner"
|
||||
/>
|
||||
Users who have permissions will be able to use this link
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex justify-content-between tabs-inputs"
|
||||
>
|
||||
<div
|
||||
class="d-flex input-container"
|
||||
>
|
||||
<a
|
||||
class="shareUrl"
|
||||
href="http://localhost/undefined/workspace/1/1/1"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
http://localhost/undefined/workspace/1/1/1
|
||||
</a>
|
||||
</div>
|
||||
<button
|
||||
title="Copy internal link"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-content-copy CompassIcon"
|
||||
/>
|
||||
<span>
|
||||
Copy link
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -637,7 +693,7 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
|
|||
<h1
|
||||
class="text-heading5 mt-2"
|
||||
>
|
||||
Share Board
|
||||
|
||||
</h1>
|
||||
<button
|
||||
aria-label="Close dialog"
|
||||
|
|
@ -650,7 +706,21 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
|
|||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-modal"
|
||||
class="tabs-container"
|
||||
>
|
||||
<button
|
||||
class="tab-item tab-item--active"
|
||||
>
|
||||
Share
|
||||
</button>
|
||||
<button
|
||||
class="tab-item false"
|
||||
>
|
||||
Publish
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-content"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
|
|
@ -662,21 +732,12 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
|
|||
<div
|
||||
class="text-heading2"
|
||||
>
|
||||
Publish to the web
|
||||
Share internally
|
||||
</div>
|
||||
<div
|
||||
class="text-light"
|
||||
>
|
||||
Publish and share a “read only” link with everyone on the web
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="Switch override-main size--medium on"
|
||||
>
|
||||
<div
|
||||
class="octo-switch-inner"
|
||||
/>
|
||||
Users who have permissions will be able to use this link
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -689,29 +750,15 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
|
|||
>
|
||||
<a
|
||||
class="shareUrl"
|
||||
href="http://localhost/workspace/1/shared/1/1?r=oneToken"
|
||||
href="http://localhost/undefined/workspace/1/1/1"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
http://localhost/workspace/1/shared/1/1?r=oneToken
|
||||
http://localhost/undefined/workspace/1/1/1
|
||||
</a>
|
||||
<div
|
||||
class="octo-tooltip tooltip-top"
|
||||
data-tooltip="Regenerate token"
|
||||
>
|
||||
<button
|
||||
aria-label="Regenerate token"
|
||||
title="Regenerate token"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-refresh undefined"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
title="Copy link"
|
||||
title="Copy internal link"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
|
|
@ -747,7 +794,7 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
|
|||
<h1
|
||||
class="text-heading5 mt-2"
|
||||
>
|
||||
Share Board
|
||||
|
||||
</h1>
|
||||
<button
|
||||
aria-label="Close dialog"
|
||||
|
|
@ -760,7 +807,21 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
|
|||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-modal"
|
||||
class="tabs-container"
|
||||
>
|
||||
<button
|
||||
class="tab-item tab-item--active"
|
||||
>
|
||||
Share
|
||||
</button>
|
||||
<button
|
||||
class="tab-item false"
|
||||
>
|
||||
Publish
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-content"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
|
|
@ -772,21 +833,12 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
|
|||
<div
|
||||
class="text-heading2"
|
||||
>
|
||||
Publish to the web
|
||||
Share internally
|
||||
</div>
|
||||
<div
|
||||
class="text-light"
|
||||
>
|
||||
Publish and share a “read only” link with everyone on the web
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="Switch override-main size--medium on"
|
||||
>
|
||||
<div
|
||||
class="octo-switch-inner"
|
||||
/>
|
||||
Users who have permissions will be able to use this link
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -799,29 +851,15 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
|
|||
>
|
||||
<a
|
||||
class="shareUrl"
|
||||
href="http://localhost/test-subpath/plugins/boards/workspace/1/shared/1/1?r=oneToken"
|
||||
href="http://localhost/undefined/workspace/1/1/1"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
http://localhost/test-subpath/plugins/boards/workspace/1/shared/1/1?r=oneToken
|
||||
http://localhost/undefined/workspace/1/1/1
|
||||
</a>
|
||||
<div
|
||||
class="octo-tooltip tooltip-top"
|
||||
data-tooltip="Regenerate token"
|
||||
>
|
||||
<button
|
||||
aria-label="Regenerate token"
|
||||
title="Regenerate token"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-refresh undefined"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
title="Copy link"
|
||||
title="Copy internal link"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
|
|
@ -857,7 +895,7 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
|
|||
<h1
|
||||
class="text-heading5 mt-2"
|
||||
>
|
||||
Share Board
|
||||
|
||||
</h1>
|
||||
<button
|
||||
aria-label="Close dialog"
|
||||
|
|
@ -870,7 +908,21 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
|
|||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-modal"
|
||||
class="tabs-container"
|
||||
>
|
||||
<button
|
||||
class="tab-item tab-item--active"
|
||||
>
|
||||
Share
|
||||
</button>
|
||||
<button
|
||||
class="tab-item false"
|
||||
>
|
||||
Publish
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-content"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
|
|
@ -882,21 +934,12 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
|
|||
<div
|
||||
class="text-heading2"
|
||||
>
|
||||
Publish to the web
|
||||
Share internally
|
||||
</div>
|
||||
<div
|
||||
class="text-light"
|
||||
>
|
||||
Publish and share a “read only” link with everyone on the web
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="Switch override-main size--medium on"
|
||||
>
|
||||
<div
|
||||
class="octo-switch-inner"
|
||||
/>
|
||||
Users who have permissions will be able to use this link
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -909,29 +952,15 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
|
|||
>
|
||||
<a
|
||||
class="shareUrl"
|
||||
href="http://localhost/test-subpath/plugins/boards/shared/1/1?r=oneToken"
|
||||
href="http://localhost/test-subpath/plugins/boards1/1"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
http://localhost/test-subpath/plugins/boards/shared/1/1?r=oneToken
|
||||
http://localhost/test-subpath/plugins/boards1/1
|
||||
</a>
|
||||
<div
|
||||
class="octo-tooltip tooltip-top"
|
||||
data-tooltip="Regenerate token"
|
||||
>
|
||||
<button
|
||||
aria-label="Regenerate token"
|
||||
title="Regenerate token"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-refresh undefined"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
title="Copy link"
|
||||
title="Copy internal link"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
|
|
|
|||
|
|
@ -6,11 +6,37 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tabs-modal {
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
margin: -48px 24px 0;
|
||||
border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
|
||||
|
||||
.tab-item {
|
||||
margin-right: 12px;
|
||||
display: flex;
|
||||
font-family: Metropolis, sans-serif;
|
||||
font-size: 16px;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0 8px;
|
||||
height: 37px;
|
||||
font-weight: 600;
|
||||
color: rgba(var(--center-channel-color-rgb), 0.56);
|
||||
|
||||
&:hover {
|
||||
color: rgba(var(--center-channel-color-rgb), 0.72);
|
||||
}
|
||||
|
||||
&.tab-item--active {
|
||||
color: inherit;
|
||||
border-bottom: 3px solid rgba(var(--button-bg-rgb), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-content {
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
background: rgba(var(--center-channel-bg-rgb), 1);
|
||||
border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
|
||||
|
||||
.d-flex {
|
||||
display: flex;
|
||||
|
|
@ -33,9 +59,41 @@
|
|||
flex: 1;
|
||||
margin-right: 12px;
|
||||
height: 40px;
|
||||
width: 400px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 0 4px 0 16px;
|
||||
padding: 0 4px 0 8px;
|
||||
}
|
||||
|
||||
.IconButton {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.icon-refresh {
|
||||
margin: 4px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.icon-content-copy {
|
||||
margin-right: 4px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.IconButton {
|
||||
height: 100%;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.icon-refresh {
|
||||
margin: 4px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.icon-content-copy {
|
||||
margin-right: 4px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.shareUrl {
|
||||
|
|
|
|||
|
|
@ -74,6 +74,7 @@ describe('src/components/shareBoard/shareBoard', () => {
|
|||
<ShareBoard
|
||||
boardId={board.id}
|
||||
onClose={jest.fn()}
|
||||
enableSharedBoards={true}
|
||||
/>),
|
||||
{wrapper: MemoryRouter},
|
||||
)
|
||||
|
|
@ -100,12 +101,13 @@ describe('src/components/shareBoard/shareBoard', () => {
|
|||
<ShareBoard
|
||||
boardId={board.id}
|
||||
onClose={jest.fn()}
|
||||
enableSharedBoards={true}
|
||||
/>),
|
||||
{wrapper: MemoryRouter},
|
||||
)
|
||||
container = result.container
|
||||
})
|
||||
const copyLinkElement = screen.getByRole('button', {name: 'Copy link'})
|
||||
const copyLinkElement = screen.getByRole('button', {name: 'Copy internal link'})
|
||||
expect(copyLinkElement).toBeDefined()
|
||||
|
||||
expect(container).toMatchSnapshot()
|
||||
|
|
@ -126,6 +128,7 @@ describe('src/components/shareBoard/shareBoard', () => {
|
|||
<ShareBoard
|
||||
boardId={board.id}
|
||||
onClose={jest.fn()}
|
||||
enableSharedBoards={true}
|
||||
/>),
|
||||
{wrapper: MemoryRouter},
|
||||
)
|
||||
|
|
@ -134,7 +137,7 @@ describe('src/components/shareBoard/shareBoard', () => {
|
|||
|
||||
expect(container).toMatchSnapshot()
|
||||
|
||||
const copyLinkElement = screen.getByRole('button', {name: 'Copy link'})
|
||||
const copyLinkElement = screen.getByRole('button', {name: 'Copy internal link'})
|
||||
expect(copyLinkElement).toBeDefined()
|
||||
|
||||
await act(async () => {
|
||||
|
|
@ -144,7 +147,7 @@ describe('src/components/shareBoard/shareBoard', () => {
|
|||
expect(mockedUtils.copyTextToClipboard).toBeCalledTimes(1)
|
||||
expect(container).toMatchSnapshot()
|
||||
|
||||
const copiedLinkElement = screen.getByRole('button', {name: 'Copy link'})
|
||||
const copiedLinkElement = screen.getByRole('button', {name: 'Copy internal link'})
|
||||
expect(copiedLinkElement).toBeDefined()
|
||||
expect(copiedLinkElement.textContent).toContain('Copied!')
|
||||
})
|
||||
|
|
@ -167,6 +170,7 @@ describe('src/components/shareBoard/shareBoard', () => {
|
|||
<ShareBoard
|
||||
boardId={board.id}
|
||||
onClose={jest.fn()}
|
||||
enableSharedBoards={true}
|
||||
/>),
|
||||
{wrapper: MemoryRouter},
|
||||
)
|
||||
|
|
@ -177,6 +181,14 @@ describe('src/components/shareBoard/shareBoard', () => {
|
|||
mockedUtils.createGuid.mockReturnValue('anotherToken')
|
||||
mockedOctoClient.getSharing.mockResolvedValue(sharing)
|
||||
mockedOctoClient.setSharing.mockResolvedValue(true)
|
||||
|
||||
const publishButton = screen.getByRole('button', {name: 'Publish'})
|
||||
expect(publishButton).toBeDefined()
|
||||
userEvent.click(publishButton)
|
||||
await act(async () => {
|
||||
jest.runOnlyPendingTimers()
|
||||
})
|
||||
|
||||
const regenerateTokenElement = screen.getByRole('button', {name: 'Regenerate token'})
|
||||
expect(regenerateTokenElement).toBeDefined()
|
||||
userEvent.click(regenerateTokenElement)
|
||||
|
|
@ -200,11 +212,20 @@ describe('src/components/shareBoard/shareBoard', () => {
|
|||
<ShareBoard
|
||||
boardId={board.id}
|
||||
onClose={jest.fn()}
|
||||
enableSharedBoards={true}
|
||||
/>),
|
||||
{wrapper: MemoryRouter},
|
||||
)
|
||||
container = result.container
|
||||
})
|
||||
|
||||
const publishButton = screen.getByRole('button', {name: 'Publish'})
|
||||
expect(publishButton).toBeDefined()
|
||||
userEvent.click(publishButton)
|
||||
await act(async () => {
|
||||
jest.runOnlyPendingTimers()
|
||||
})
|
||||
|
||||
const switchElement = container?.querySelector('.Switch')
|
||||
expect(switchElement).toBeDefined()
|
||||
await act(async () => {
|
||||
|
|
@ -225,6 +246,7 @@ describe('src/components/shareBoard/shareBoard', () => {
|
|||
<ShareBoard
|
||||
boardId={board.id}
|
||||
onClose={jest.fn()}
|
||||
enableSharedBoards={true}
|
||||
/>),
|
||||
{wrapper: MemoryRouter},
|
||||
)
|
||||
|
|
@ -234,6 +256,12 @@ describe('src/components/shareBoard/shareBoard', () => {
|
|||
enabled: true,
|
||||
token: 'aToken',
|
||||
})
|
||||
|
||||
const publishButton = screen.getByRole('button', {name: 'Publish'})
|
||||
expect(publishButton).toBeDefined()
|
||||
userEvent.click(publishButton)
|
||||
jest.runOnlyPendingTimers()
|
||||
|
||||
const switchElement = container?.querySelector('.Switch')
|
||||
expect(switchElement).toBeDefined()
|
||||
userEvent.click(switchElement!)
|
||||
|
|
@ -243,6 +271,7 @@ describe('src/components/shareBoard/shareBoard', () => {
|
|||
<ShareBoard
|
||||
boardId={board.id}
|
||||
onClose={jest.fn()}
|
||||
enableSharedBoards={true}
|
||||
/>))
|
||||
})
|
||||
|
||||
|
|
@ -269,6 +298,7 @@ describe('src/components/shareBoard/shareBoard', () => {
|
|||
<ShareBoard
|
||||
boardId={board.id}
|
||||
onClose={jest.fn()}
|
||||
enableSharedBoards={true}
|
||||
/>), {wrapper: MemoryRouter})
|
||||
container = result.container
|
||||
})
|
||||
|
|
@ -289,6 +319,7 @@ describe('src/components/shareBoard/shareBoard', () => {
|
|||
<ShareBoard
|
||||
boardId={board.id}
|
||||
onClose={jest.fn()}
|
||||
enableSharedBoards={true}
|
||||
/>), {wrapper: MemoryRouter})
|
||||
container = result.container
|
||||
})
|
||||
|
|
|
|||
|
|
@ -25,11 +25,14 @@ import './shareBoard.scss'
|
|||
type Props = {
|
||||
boardId: string
|
||||
onClose: () => void
|
||||
enableSharedBoards: boolean
|
||||
}
|
||||
|
||||
export default function ShareBoardDialog(props: Props): JSX.Element {
|
||||
const [wasCopied, setWasCopied] = useState(false)
|
||||
const [wasCopiedPublic, setWasCopiedPublic] = useState(false)
|
||||
const [wasCopiedInternal, setWasCopiedInternal] = useState(false)
|
||||
const [sharing, setSharing] = useState<ISharing|undefined>(undefined)
|
||||
const [publish, setPublish] = useState(false)
|
||||
|
||||
const intl = useIntl()
|
||||
const match = useRouteMatch<{workspaceId?: string, boardId: string, viewId: string}>()
|
||||
|
|
@ -37,7 +40,7 @@ export default function ShareBoardDialog(props: Props): JSX.Element {
|
|||
const loadData = async () => {
|
||||
const newSharing = await client.getSharing(props.boardId)
|
||||
setSharing(newSharing)
|
||||
setWasCopied(false)
|
||||
setWasCopiedPublic(false)
|
||||
}
|
||||
|
||||
const createSharingInfo = () => {
|
||||
|
|
@ -80,6 +83,7 @@ export default function ShareBoardDialog(props: Props): JSX.Element {
|
|||
const readToken = (sharing && isSharing) ? sharing.token : ''
|
||||
const shareUrl = new URL(window.location.toString())
|
||||
shareUrl.searchParams.set('r', readToken)
|
||||
const boardUrl = new URL(window.location.toString())
|
||||
|
||||
if (match.params.workspaceId) {
|
||||
const newPath = generatePath('/workspace/:workspaceId/shared/:boardId/:viewId', {
|
||||
|
|
@ -88,21 +92,47 @@ export default function ShareBoardDialog(props: Props): JSX.Element {
|
|||
workspaceId: match.params.workspaceId,
|
||||
})
|
||||
shareUrl.pathname = Utils.buildURL(newPath)
|
||||
|
||||
const boardPath = generatePath('/workspace/:workspaceId/:boardId/:viewId', {
|
||||
boardId: match.params.boardId,
|
||||
viewId: match.params.viewId,
|
||||
workspaceId: match.params.workspaceId,
|
||||
})
|
||||
boardUrl.pathname = Utils.getFrontendBaseURL() + boardPath
|
||||
} else {
|
||||
const newPath = generatePath('/shared/:boardId/:viewId', {
|
||||
boardId: match.params.boardId,
|
||||
viewId: match.params.viewId,
|
||||
})
|
||||
shareUrl.pathname = Utils.buildURL(newPath)
|
||||
boardUrl.pathname = Utils.buildURL(
|
||||
generatePath(':boardId/:viewId', {
|
||||
boardId: match.params.boardId,
|
||||
viewId: match.params.viewId,
|
||||
},
|
||||
))
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
onClose={props.onClose}
|
||||
className='ShareBoardDialog'
|
||||
title={intl.formatMessage({id: 'ShareBoard.Title', defaultMessage: 'Share Board'})}
|
||||
title={' '}
|
||||
>
|
||||
<div className='tabs-modal'>
|
||||
{props.enableSharedBoards && (
|
||||
<div className='tabs-container'>
|
||||
<button
|
||||
onClick={() => setPublish(false)}
|
||||
className={`tab-item ${!publish && 'tab-item--active'}`}
|
||||
>{'Share'}</button>
|
||||
<button
|
||||
onClick={() => setPublish(true)}
|
||||
className={`tab-item ${publish && 'tab-item--active'}`}
|
||||
>{'Publish'}</button>
|
||||
</div>
|
||||
)}
|
||||
{(props.enableSharedBoards && publish) &&
|
||||
(<div className='tabs-content'>
|
||||
<div>
|
||||
<div className='d-flex justify-content-between'>
|
||||
<div className='d-flex flex-column'>
|
||||
|
|
@ -147,7 +177,7 @@ export default function ShareBoardDialog(props: Props): JSX.Element {
|
|||
<Button
|
||||
emphasis='secondary'
|
||||
size='medium'
|
||||
title='Copy link'
|
||||
title='Copy public link'
|
||||
icon={
|
||||
<CompassIcon
|
||||
icon='content-copy'
|
||||
|
|
@ -157,15 +187,16 @@ export default function ShareBoardDialog(props: Props): JSX.Element {
|
|||
onClick={() => {
|
||||
TelemetryClient.trackEvent(TelemetryCategory, TelemetryActions.ShareLinkPublicCopy, {board: props.boardId})
|
||||
Utils.copyTextToClipboard(shareUrl.toString())
|
||||
setWasCopied(true)
|
||||
setWasCopiedPublic(true)
|
||||
setWasCopiedInternal(false)
|
||||
}}
|
||||
>
|
||||
{wasCopied &&
|
||||
{wasCopiedPublic &&
|
||||
<FormattedMessage
|
||||
id='ShareBoard.copiedLink'
|
||||
defaultMessage='Copied!'
|
||||
/>}
|
||||
{!wasCopied &&
|
||||
{!wasCopiedPublic &&
|
||||
<FormattedMessage
|
||||
id='ShareBoard.copyLink'
|
||||
defaultMessage='Copy link'
|
||||
|
|
@ -174,6 +205,60 @@ export default function ShareBoardDialog(props: Props): JSX.Element {
|
|||
</div>)
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!publish && (
|
||||
<div className='tabs-content'>
|
||||
<div>
|
||||
<div className='d-flex justify-content-between'>
|
||||
<div className='d-flex flex-column'>
|
||||
<div className='text-heading2'>{intl.formatMessage({id: 'ShareBoard.ShareInternal', defaultMessage: 'Share internally'})}</div>
|
||||
<div className='text-light'>{intl.formatMessage({id: 'ShareBoard.ShareInternalDescription', defaultMessage: 'Users who have permissions will be able to use this link'})}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='d-flex justify-content-between tabs-inputs'>
|
||||
<div className='d-flex input-container'>
|
||||
<a
|
||||
className='shareUrl'
|
||||
href={boardUrl.toString()}
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
{boardUrl.toString()}
|
||||
</a>
|
||||
</div>
|
||||
<Button
|
||||
emphasis='secondary'
|
||||
size='medium'
|
||||
title='Copy internal link'
|
||||
onClick={() => {
|
||||
TelemetryClient.trackEvent(TelemetryCategory, TelemetryActions.ShareLinkInternalCopy, {board: props.boardId})
|
||||
Utils.copyTextToClipboard(boardUrl.toString())
|
||||
setWasCopiedPublic(false)
|
||||
setWasCopiedInternal(true)
|
||||
}}
|
||||
icon={
|
||||
<CompassIcon
|
||||
icon='content-copy'
|
||||
className='CompassIcon'
|
||||
/>
|
||||
}
|
||||
>
|
||||
{wasCopiedInternal &&
|
||||
<FormattedMessage
|
||||
id='ShareBoard.copiedLink'
|
||||
defaultMessage='Copied!'
|
||||
/>}
|
||||
{!wasCopiedInternal &&
|
||||
<FormattedMessage
|
||||
id='ShareBoard.copyLink'
|
||||
defaultMessage='Copy link'
|
||||
/>}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ describe('src/components/shareBoard/shareBoard', () => {
|
|||
wrapDNDIntl(
|
||||
<ShareBoardButton
|
||||
boardId={board.id}
|
||||
enableSharedBoards={true}
|
||||
/>))
|
||||
|
||||
const renderer = result.container
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import ShareBoardDialog from './shareBoard'
|
|||
|
||||
type Props = {
|
||||
boardId: string
|
||||
enableSharedBoards: boolean
|
||||
}
|
||||
const ShareBoardButton = (props: Props) => {
|
||||
const [showShareDialog, setShowShareDialog] = useState(false)
|
||||
|
|
@ -45,6 +46,7 @@ const ShareBoardButton = (props: Props) => {
|
|||
<ShareBoardDialog
|
||||
onClose={() => setShowShareDialog(false)}
|
||||
boardId={props.boardId}
|
||||
enableSharedBoards={props.enableSharedBoards}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -54,14 +54,13 @@ type Props = {
|
|||
editCardTemplate: (cardTemplateId: string) => void
|
||||
readonly: boolean
|
||||
dateDisplayProperty?: IPropertyTemplate
|
||||
showShared?: boolean
|
||||
}
|
||||
|
||||
const ViewHeader = (props: Props) => {
|
||||
const [showFilter, setShowFilter] = useState(false)
|
||||
const intl = useIntl()
|
||||
|
||||
const {board, activeView, views, groupByProperty, cards, dateDisplayProperty, showShared} = props
|
||||
const {board, activeView, views, groupByProperty, cards, dateDisplayProperty} = props
|
||||
|
||||
const withGroupBy = activeView.fields.viewType === 'board' || activeView.fields.viewType === 'table'
|
||||
const withDisplayBy = activeView.fields.viewType === 'calendar'
|
||||
|
|
@ -100,14 +99,12 @@ const ViewHeader = (props: Props) => {
|
|||
}, [showTourBaseCondition])
|
||||
|
||||
useEffect(() => {
|
||||
if (showShared && !BoardTourSteps.SHARE_BOARD) {
|
||||
if (!BoardTourSteps.SHARE_BOARD) {
|
||||
BoardTourSteps.SHARE_BOARD = 2
|
||||
} else if (!showShared) {
|
||||
delete BoardTourSteps.SHARE_BOARD
|
||||
}
|
||||
|
||||
TourCategoriesMapToSteps[TOUR_BOARD] = BoardTourSteps
|
||||
}, [showShared])
|
||||
}, [])
|
||||
|
||||
const showAddViewTourStep = showTourBaseCondition && delayComplete
|
||||
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ export const TelemetryActions = {
|
|||
ViewSharedBoard: 'viewSharedBoard',
|
||||
ShareBoardOpenModal: 'shareBoard_openModal',
|
||||
ShareLinkPublicCopy: 'shareLinkPublic_copy',
|
||||
ShareLinkInternalCopy: 'shareLinkInternal_copy',
|
||||
ImportArchive: 'settings_importArchive',
|
||||
ImportTrello: 'settings_importTrello',
|
||||
ImportAsana: 'settings_importAsana',
|
||||
|
|
|
|||
Loading…
Reference in a new issue