Keith Daulton
1 year ago
committed by
Keith Daulton
Keith Daulton
7 changed files with 530 additions and 231 deletions
Split View
Diff Options
-
+20 -1src/plus/webviews/workspaces/protocol.ts
-
+54 -13src/plus/webviews/workspaces/workspacesWebview.ts
-
+66 -0src/webviews/apps/plus/workspaces/components/git-avatars.ts
-
+249 -0src/webviews/apps/plus/workspaces/components/pull-request-row.ts
-
+59 -214src/webviews/apps/plus/workspaces/workspaces.html
-
+63 -0src/webviews/apps/plus/workspaces/workspaces.scss
-
+19 -3src/webviews/apps/plus/workspaces/workspaces.ts
+ 20
- 1
src/plus/webviews/workspaces/protocol.ts
View File
| @ -1 +1,20 @@ | |||
| export type State = Record<string, unknown>; | |||
| import type { IssueShape } from '../../../git/models/issue'; | |||
| import type { PullRequestShape } from '../../../git/models/pullRequest'; | |||
| export type State = { | |||
| pullRequests?: PullRequestResult[]; | |||
| issues?: IssueResult[]; | |||
| [key: string]: unknown; | |||
| }; | |||
| export interface SearchResultBase { | |||
| reasons: string[]; | |||
| } | |||
| export interface IssueResult extends SearchResultBase { | |||
| issue: IssueShape; | |||
| } | |||
| export interface PullRequestResult extends SearchResultBase { | |||
| pullRequest: PullRequestShape; | |||
| } | |||
+ 54
- 13
src/plus/webviews/workspaces/workspacesWebview.ts
View File
+ 66
- 0
src/webviews/apps/plus/workspaces/components/git-avatars.ts
View File
| @ -0,0 +1,66 @@ | |||
| import { css, customElement, FASTElement, html, observable, repeat, volatile, when } from '@microsoft/fast-element'; | |||
| import '../../../shared/components/avatars/avatar-item'; | |||
| import '../../../shared/components/avatars/avatar-stack'; | |||
| const template = html<GitAvatars>` | |||
| <avatar-stack> | |||
| ${repeat( | |||
| x => x.avatarItems, | |||
| html<AvatarShape>`<avatar-item media="${x => x.avatarUrl}" title="${x => x.name}"></avatar-item>`, | |||
| )} | |||
| ${when( | |||
| x => x.avatarPlusItems != null, | |||
| html<GitAvatars>`<avatar-item title="${x => x.avatarPlusLabel}" | |||
| >+${x => x.avatarPlusItems?.length}</avatar-item | |||
| >`, | |||
| )} | |||
| </avatar-stack> | |||
| `; | |||
| const styles = css``; | |||
| interface AvatarShape { | |||
| name: string; | |||
| avatarUrl: string; | |||
| url: string; | |||
| } | |||
| @customElement({ | |||
| name: 'git-avatars', | |||
| template: template, | |||
| styles: styles, | |||
| }) | |||
| export class GitAvatars extends FASTElement { | |||
| @observable | |||
| avatars: AvatarShape[] = []; | |||
| @volatile | |||
| get avatarItems(): AvatarShape[] { | |||
| if (this.avatars.length <= 3) { | |||
| return this.avatars; | |||
| } | |||
| return this.avatars.slice(0, 2); | |||
| } | |||
| @volatile | |||
| get avatarPlusItems(): AvatarShape[] | undefined { | |||
| const len = this.avatars.length; | |||
| if (len <= 3) { | |||
| return undefined; | |||
| } | |||
| return this.avatars.slice(2); | |||
| } | |||
| @volatile | |||
| get avatarPlusLabel(): string | undefined { | |||
| if (this.avatarPlusItems == null) { | |||
| return undefined; | |||
| } | |||
| const len = this.avatarPlusItems.length; | |||
| return this.avatarPlusItems.reduce( | |||
| (all, current, i) => `${all}, ${len === i - 1 ? 'and ' : ''}${current.name}`, | |||
| '', | |||
| ); | |||
| } | |||
| } | |||
+ 249
- 0
src/webviews/apps/plus/workspaces/components/pull-request-row.ts
View File
| @ -0,0 +1,249 @@ | |||
| import { css, customElement, FASTElement, html, observable, ref, volatile, when } from '@microsoft/fast-element'; | |||
| import type { PullRequestShape } from '../../../../../git/models/pullRequest'; | |||
| import { fromNow } from '../../../../../system/date'; | |||
| import { focusOutline, srOnly } from '../../../shared/components/styles/a11y'; | |||
| import { elementBase } from '../../../shared/components/styles/base'; | |||
| import '../../../shared/components/table/table-cell'; | |||
| import '../../../shared/components/avatars/avatar-item'; | |||
| import '../../../shared/components/avatars/avatar-stack'; | |||
| import '../../../shared/components/code-icon'; | |||
| import './git-avatars'; | |||
| const template = html<PullRequestRow>` | |||
| <template role="row"> | |||
| <table-cell class="status"> | |||
| ${when( | |||
| x => x.pullRequest!.isDraft === true, | |||
| html`<code-icon icon="git-pull-request-draft" title="draft"></code-icon>`, | |||
| )} | |||
| ${when( | |||
| x => x.pullRequest!.isDraft !== true, | |||
| html`<code-icon class="pull-request-draft" icon="git-pull-request" title="open"></code-icon>`, | |||
| )} | |||
| ${when( | |||
| x => x.indicator === 'changes', | |||
| html`<code-icon class="indicator-error" icon="request-changes" title="changes requested"></code-icon>`, | |||
| )} | |||
| ${when( | |||
| x => x.indicator === 'ready', | |||
| html`<code-icon class="indicator-info" icon="pass" title="approved and ready to merge"></code-icon>`, | |||
| )} | |||
| ${when( | |||
| x => x.indicator === 'conflicting', | |||
| html`<code-icon | |||
| class="indicator-error" | |||
| icon="bracket-error" | |||
| title="cannot be merged due to merge conflicts" | |||
| ></code-icon>`, | |||
| )} | |||
| </table-cell> | |||
| <table-cell class="time">${x => x.lastUpdated}</table-cell> | |||
| <table-cell> | |||
| ${x => x.pullRequest!.title} <a href="${x => x.pullRequest!.url}">#${x => x.pullRequest!.id}</a><br /> | |||
| <small> | |||
| <span class="tag"><code-icon icon="repo"></code-icon>${x => x.pullRequest!.refs?.base.repo}</span> | |||
| into | |||
| ${when( | |||
| x => x.pullRequest!.refs?.isCrossRepository !== true, | |||
| html<PullRequestRow>` | |||
| <span class="tag" | |||
| ><code-icon icon="source-control"></code-icon>${x => x.pullRequest!.refs?.base.branch}</span | |||
| > | |||
| from | |||
| <span class="tag" | |||
| ><code-icon icon="source-control"></code-icon>${x => x.pullRequest!.refs?.head.branch}</span | |||
| > | |||
| `, | |||
| )} | |||
| ${when( | |||
| x => x.pullRequest!.refs?.isCrossRepository === true, | |||
| html<PullRequestRow>` | |||
| <span class="tag" | |||
| ><code-icon icon="source-control"></code-icon>${x => x.pullRequest!.refs?.base.owner}:${x => | |||
| x.pullRequest!.refs?.base.branch}</span | |||
| > | |||
| from | |||
| <span class="tag" | |||
| ><code-icon icon="source-control"></code-icon>${x => x.pullRequest!.refs?.head.owner}:${x => | |||
| x.pullRequest!.refs?.head.branch}</span | |||
| > | |||
| `, | |||
| )} | |||
| </small> | |||
| </table-cell> | |||
| <table-cell> | |||
| <avatar-stack> | |||
| <avatar-item | |||
| media="${x => x.pullRequest!.author?.avatarUrl}" | |||
| title="${x => x.pullRequest!.author?.name}" | |||
| ></avatar-item> | |||
| </avatar-stack> | |||
| </table-cell> | |||
| <table-cell> | |||
| <git-avatars :avatars="${x => x.pullRequest!.assignees}"></git-avatars> | |||
| </table-cell> | |||
| <table-cell>${x => x.pullRequest!.comments}</table-cell> | |||
| <table-cell class="icon-only"> | |||
| ${when(x => x.checks == null, html`<code-icon icon="dash" title="none"></code-icon>`)} | |||
| ${when(x => x.checks === false, html`<code-icon icon="error" title="failed"></code-icon>`)} | |||
| ${when(x => x.checks === true, html`<code-icon icon="pass" title="passed"></code-icon>`)} | |||
| </table-cell> | |||
| <table-cell class="stats" | |||
| ><span class="stat-added">+${x => x.pullRequest!.additions}</span> | |||
| <span class="stat-deleted">-${x => x.pullRequest!.deletions}</span></table-cell | |||
| > | |||
| <table-cell class="actions"> | |||
| <a href="${x => x.pullRequest!.url}" title="Open pull request on remote" | |||
| ><code-icon icon="globe"></code-icon | |||
| ></a> | |||
| </table-cell> | |||
| </template> | |||
| `; | |||
| const styles = css` | |||
| ${elementBase} | |||
| :host { | |||
| display: table-row; | |||
| } | |||
| :host(:focus) { | |||
| ${focusOutline} | |||
| } | |||
| a { | |||
| color: var(--vscode-textLink-foreground); | |||
| text-decoration: none; | |||
| } | |||
| a:hover { | |||
| color: var(--vscode-textLink-activeForeground); | |||
| text-decoration: underline; | |||
| } | |||
| a:focus { | |||
| ${focusOutline} | |||
| } | |||
| code-icon { | |||
| font-size: inherit; | |||
| } | |||
| .tag { | |||
| display: inline-block; | |||
| padding: 0.1rem 0.2rem; | |||
| background-color: var(--background-05); | |||
| color: var(--color-foreground--85); | |||
| white-space: nowrap; | |||
| } | |||
| .tag code-icon { | |||
| margin-right: 0.2rem; | |||
| } | |||
| .status { | |||
| } | |||
| .time { | |||
| } | |||
| .icon-only { | |||
| } | |||
| .stats { | |||
| } | |||
| .actions { | |||
| text-align: right; | |||
| } | |||
| .stat-added { | |||
| color: var(--vscode-gitDecoration-addedResourceForeground); | |||
| } | |||
| .stat-deleted { | |||
| color: var(--vscode-gitDecoration-deletedResourceForeground); | |||
| } | |||
| .issue-open { | |||
| color: var(--vscode-gitlens-openAutolinkedIssueIconColor); | |||
| } | |||
| .issue-closed { | |||
| color: var(--vscode-gitlens-closedAutolinkedIssueIconColor); | |||
| } | |||
| .indicator-info { | |||
| color: var(--color-alert-infoBorder); | |||
| } | |||
| .indicator-warning { | |||
| color: var(--color-alert-warningBorder); | |||
| } | |||
| .indicator-error { | |||
| color: var(--color-alert-errorBorder); | |||
| } | |||
| .indicator-neutral { | |||
| color: var(--color-alert-neutralBorder); | |||
| } | |||
| .pull-request-draft { | |||
| /* color: var(--vscode-pullRequests-draft); */ | |||
| color: var(--color-foreground--85); | |||
| } | |||
| .pull-request-open { | |||
| color: var(--vscode-gitlens-openPullRequestIconColor); | |||
| } | |||
| .pull-request-merged { | |||
| color: var(--vscode-gitlens-mergedPullRequestIconColor); | |||
| } | |||
| .pull-request-closed { | |||
| color: var(--vscode-gitlens-closedPullRequestIconColor); | |||
| } | |||
| .pull-request-notification { | |||
| color: var(--vscode-pullRequests-notification); | |||
| } | |||
| ${srOnly} | |||
| `; | |||
| @customElement({ | |||
| name: 'pull-request-row', | |||
| template: template, | |||
| styles: styles, | |||
| }) | |||
| export class PullRequestRow extends FASTElement { | |||
| @observable | |||
| public pullRequest?: PullRequestShape; | |||
| @observable | |||
| public reasons?: string[]; | |||
| @observable | |||
| public checks?: boolean; | |||
| @volatile | |||
| get lastUpdated() { | |||
| return fromNow(new Date(this.pullRequest!.date), true); | |||
| } | |||
| @volatile | |||
| get indicator() { | |||
| if (this.pullRequest == null) return ''; | |||
| console.log(this.pullRequest); | |||
| if (this.pullRequest.reviewDecision === 'ChangesRequested') { | |||
| return 'changes'; | |||
| } else if (this.pullRequest.reviewDecision === 'Approved' && this.pullRequest.mergeableState === 'Mergeable') { | |||
| return 'ready'; | |||
| } | |||
| if (this.pullRequest.mergeableState === 'Conflicting') { | |||
| return 'conflicting'; | |||
| } | |||
| return ''; | |||
| } | |||
| @volatile | |||
| get indicatorLabel() { | |||
| return undefined; | |||
| } | |||
| } | |||