Skip to content

Commit

Permalink
fix: Augment PR entry (#362)
Browse files Browse the repository at this point in the history 
- last activity was not showing anymore since the new ui
- on small width screen, source branch was not showing, we force it

Fixes #360

![image](https://user-images.githubusercontent.com/23088305/82626145-072d0c00-9bb5-11ea-84f5-3346688200b0.png)
  • Loading branch information
@jwallet
jwallet committed Nov 8, 2020
1 parent 5e8ee50 commit 3f829b1
Show file tree
Hide file tree
Showing 3 changed files with 175 additions and 78 deletions.
33 changes: 24 additions & 9 deletions src/augment-pr-entry/augment-pr-entry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,18 @@
import { h } from 'dom-chef'
import api, { type PullRequestActivity } from '../api'

declare var $: any

export function addSourceBranch(prRow: HTMLElement) {
if (window.innerWidth <= 1200)
$(prRow)
.find('td :hidden')
.has('div[role="button"]:hidden')
.show()
}

export const addUsernameWithLatestUpdate = (
prNode: HTMLElement,
prRow: HTMLElement,
prActivity: PullRequestActivity
) => {
// Pull requests by default have the initial commit info as an activity
Expand All @@ -27,25 +37,30 @@ export const addUsernameWithLatestUpdate = (
activityType = 'Commented'
}

const prUpdateTime = ((prNode.querySelector(
'.pr-number-and-timestamp'
): any): HTMLElement).firstElementChild
const prSubline = ((prRow.querySelector('td small'): any): HTMLElement)

if (author && prUpdateTime) {
prUpdateTime.append(` by ${author} (${activityType})`)
if (author && prSubline) {
prSubline.append(` by ${author} (${activityType})`)
}
}

export default function augmentPrEntry(prNode: HTMLElement) {
const prId = prNode.dataset.pullRequestId
export default function augmentPrEntry(prRow: HTMLElement) {
addSourceBranch(prRow)

const link: HTMLAnchorElement = (prRow.querySelector(
'a[data-qa="pull-request-row-link"]'
): any)
const url = new URL(link.href)
const splitPath = url.pathname.split('/')
const prId = splitPath[splitPath.length - 1]

if (!prId) {
return
}

api.getPullrequestActivity(prId).then(prActivity => {
if (prActivity) {
addUsernameWithLatestUpdate(prNode, prActivity)
addUsernameWithLatestUpdate(prRow, prActivity)
}
})
}
214 changes: 148 additions & 66 deletions src/augment-pr-entry/augment-pr-entry.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,91 +4,173 @@ import '../../test/setup-jsdom'
import api from '../api'
import { mockPullrequestEndpointWithSuccessfulResponse } from '../api.spec'

import { addUsernameWithLatestUpdate } from './augment-pr-entry'
import {
addSourceBranch,
addUsernameWithLatestUpdate,
} from './augment-pr-entry'

Date.now = () => new Date('02/22/2018').getTime()

const buildPrTable = () => {
return (
<table class="aui paged-table pull-requests-table">
<tr class="pull-request-row focused" data-pull-request-id="1">
<div class="title-and-target-branch">
<a
class="pull-request-title"
title="Pull request title"
href="https://bitbucket.org/user/repo/pull-requests/1"
>
Pull request title
</a>
<span class="aui-icon aui-icon-small aui-iconfont-devtools-arrow-right" />
<span class="pull-request-target-branch">
<span class="ref-label">
<span class="ref branch">
<span class="name" aria-label="branch develop">
develop
</span>
</span>
</span>
</span>
</div>
<div class="pr-number-and-timestamp">
Ronald Rey - #1,
<time
title="23 February 2018 09:52"
datetime="2018-02-23T09:52:37-0400"
>
last updated 39 minutes ago
</time>
</div>
</tr>
<table>
<tbody>
<tr data-qa="pull-request-row">
<td colspan="15">
<div>
<div>avatar</div>
<div>
<div>
<div>
<a
class="pull-request-title"
title="Pull request title"
href="https://bitbucket.org/user/repo/pull-requests/1"
>
Pull request title
</a>
</div>
<span>
<span
style={{
whiteSpace: 'nowrap',
display: 'none',
}}
>
<div role="button">source</div>
</span>
<span>
<span role="presentation">➡</span>
</span>
<span>
<div role="button">destination</div>
</span>
</span>
</div>
<small>
<div />, created
<span />, updated
<span />
</small>
</div>
</div>
</td>
</tr>
</tbody>
</table>
)
}

test('addUsernameWithLatestUpdate should the name of author last update on success', async t => {
test('addUsernameWithLatestUpdate should add the name of author last update', async t => {
const actual = buildPrTable()

const activityAuthor = 'Andrew Bernard'
const expected = (
<table class="aui paged-table pull-requests-table">
<tr class="pull-request-row focused" data-pull-request-id="1">
<div class="title-and-target-branch">
<a
class="pull-request-title"
title="Pull request title"
href="https://bitbucket.org/user/repo/pull-requests/1"
>
Pull request title
</a>
<span class="aui-icon aui-icon-small aui-iconfont-devtools-arrow-right" />
<span class="pull-request-target-branch">
<span class="ref-label">
<span class="ref branch">
<span class="name" aria-label="branch develop">
develop
</span>
</span>
</span>
</span>
</div>
<div class="pr-number-and-timestamp">
Ronald Rey - #1,
<time
title="23 February 2018 09:52"
datetime="2018-02-23T09:52:37-0400"
>
last updated 39 minutes ago by Andrew Bernard
(Committed)
</time>
</div>
</tr>
<table>
<tbody>
<tr data-qa="pull-request-row">
<td colspan="15">
<div>
<div>avatar</div>
<div>
<div>
<div>
<a
class="pull-request-title"
title="Pull request title"
href="https://bitbucket.org/user/repo/pull-requests/1"
>
Pull request title
</a>
</div>
<span>
<span
style={{
whiteSpace: 'nowrap',
display: 'none',
}}
>
<div role="button">source</div>
</span>
<span>
<span role="presentation">➡</span>
</span>
<span>
<div role="button">destination</div>
</span>
</span>
</div>
<small>
<div />, created
<span />, updated
<span /> by Andrew Bernard (Committed)
</small>
</div>
</div>
</td>
</tr>
</tbody>
</table>
)

mockPullrequestEndpointWithSuccessfulResponse({ activityAuthor })

const prNode = actual.querySelector('.pull-request-row')
const prNode = actual.querySelector('[data-qa="pull-request-row"]')
const prData = await api.getPullrequest()
await addUsernameWithLatestUpdate(prNode, prData)
t.is(actual.outerHTML, expected.outerHTML)
})

test('addSourceBranch should show the hidden source branch on small screen', async t => {
const actual = buildPrTable()

const expected = (
<table>
<tbody>
<tr data-qa="pull-request-row">
<td colspan="15">
<div>
<div>avatar</div>
<div>
<div>
<div>
<a
class="pull-request-title"
title="Pull request title"
href="https://bitbucket.org/user/repo/pull-requests/1"
>
Pull request title
</a>
</div>
<span>
<span style={{ whiteSpace: 'nowrap' }}>
<div role="button">source</div>
</span>
<span>
<span role="presentation">➡</span>
</span>
<span>
<div role="button">destination</div>
</span>
</span>
</div>
<small>
<div />, created
<span />, updated
<span />
</small>
</div>
</div>
</td>
</tr>
</tbody>
</table>
)

window.innerWidth = 1000

const prNode = actual.querySelector('[data-qa="pull-request-row"]')
await addSourceBranch(prNode)

t.is(actual.outerHTML, expected.outerHTML)
})
6 changes: 3 additions & 3 deletions src/show-comments/show-comments.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -592,7 +592,7 @@ test('General "Comments" button is added/removed when applicable if comments are
</article>
</li>
)
await delay(100)
await delay(200)

// Assert
t.truthy(
Expand All @@ -609,7 +609,7 @@ test('General "Comments" button is added/removed when applicable if comments are
</article>
</li>
)
await delay(100)
await delay(200)

// Assert
t.truthy(
Expand All @@ -622,7 +622,7 @@ test('General "Comments" button is added/removed when applicable if comments are
;[...diff.querySelectorAll('#comments-list li.comment')].forEach(comment =>
comment.remove()
)
await delay(100)
await delay(200)

t.falsy(
diff.querySelector('.__rbb-show-comments'),
Expand Down

0 comments on commit 3f829b1

Please sign in to comment.