From a18bc8ffbf30e61d9a6f8ce82d87b69018411f06 Mon Sep 17 00:00:00 2001 From: Keith Daulton Date: Tue, 14 Feb 2023 16:44:14 -0500 Subject: [PATCH] Updates focus view with Issues --- src/plus/webviews/workspaces/protocol.ts | 1 + src/plus/webviews/workspaces/workspacesWebview.ts | 16 +- .../apps/plus/workspaces/components/issue-row.ts | 174 +++++++++++++++++++++ src/webviews/apps/plus/workspaces/workspaces.html | 33 +--- src/webviews/apps/plus/workspaces/workspaces.ts | 31 +++- .../apps/shared/components/table/table-cell.ts | 1 + 6 files changed, 213 insertions(+), 43 deletions(-) create mode 100644 src/webviews/apps/plus/workspaces/components/issue-row.ts diff --git a/src/plus/webviews/workspaces/protocol.ts b/src/plus/webviews/workspaces/protocol.ts index 6f17ab5..02079aa 100644 --- a/src/plus/webviews/workspaces/protocol.ts +++ b/src/plus/webviews/workspaces/protocol.ts @@ -4,6 +4,7 @@ import type { PullRequestShape } from '../../../git/models/pullRequest'; export type State = { pullRequests?: PullRequestResult[]; issues?: IssueResult[]; + repos?: IssueResult[]; [key: string]: unknown; }; diff --git a/src/plus/webviews/workspaces/workspacesWebview.ts b/src/plus/webviews/workspaces/workspacesWebview.ts index 8df8038..ac02abb 100644 --- a/src/plus/webviews/workspaces/workspacesWebview.ts +++ b/src/plus/webviews/workspaces/workspacesWebview.ts @@ -3,7 +3,7 @@ import { Commands, ContextKeys } from '../../../constants'; import type { Container } from '../../../container'; import { setContext } from '../../../context'; import type { SearchedIssue } from '../../../git/models/issue'; -// import { serializeIssue } from '../../../git/models/issue'; +import { serializeIssue } from '../../../git/models/issue'; import type { SearchedPullRequest } from '../../../git/models/pullRequest'; import { PullRequestMergeableState, @@ -65,16 +65,16 @@ export class WorkspacesWebview extends WebviewBase { reasons: pr.reasons, })); - // const issues = await this.getMyIssues(); - // const serializedIssues = issues.map(issue => ({ - // issue: serializeIssue(issue.issue), - // reasons: issue.reasons, - // })); + const issues = await this.getMyIssues(); + const serializedIssues = issues.map(issue => ({ + issue: serializeIssue(issue.issue), + reasons: issue.reasons, + })); return { // workspaces: await this.getWorkspaces(), pullRequests: serializedPrs, - // myIssues: serializedIssues, + issues: serializedIssues, }; } @@ -155,6 +155,6 @@ export class WorkspacesWebview extends WebviewBase { allIssues.push(...issues.filter(pr => pr.reasons.length > 0)); } - return allIssues.sort((a, b) => b.issue.date.getTime() - a.issue.date.getTime()); + return allIssues.sort((a, b) => b.issue.updatedDate.getTime() - a.issue.updatedDate.getTime()); } } diff --git a/src/webviews/apps/plus/workspaces/components/issue-row.ts b/src/webviews/apps/plus/workspaces/components/issue-row.ts new file mode 100644 index 0000000..db9ee66 --- /dev/null +++ b/src/webviews/apps/plus/workspaces/components/issue-row.ts @@ -0,0 +1,174 @@ +import { css, customElement, FASTElement, html, observable, ref, volatile, when } from '@microsoft/fast-element'; +import type { IssueShape } from '../../../../../git/models/issue'; +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` + +`; + +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: 'issue-row', + template: template, + styles: styles, +}) +export class IssueRow extends FASTElement { + @observable + public issue?: IssueShape; + + @observable + public reasons?: string[]; + + @volatile + get lastUpdated() { + return fromNow(new Date(this.issue!.updatedDate), true); + } + + @volatile + get indicator() { + return ''; + } + + @volatile + get indicatorLabel() { + return undefined; + } +} diff --git a/src/webviews/apps/plus/workspaces/workspaces.html b/src/webviews/apps/plus/workspaces/workspaces.html index c810dda..e05554a 100644 --- a/src/webviews/apps/plus/workspaces/workspaces.html +++ b/src/webviews/apps/plus/workspaces/workspaces.html @@ -49,8 +49,11 @@

My Issues

- + + + + @@ -64,34 +67,6 @@ - - 6d - - Improve git blame contrast #2058
- - vscode-gitlens - - - - - - - - - - - +2 - - - 2 - 0 -
diff --git a/src/webviews/apps/plus/workspaces/workspaces.ts b/src/webviews/apps/plus/workspaces/workspaces.ts index d016257..275c964 100644 --- a/src/webviews/apps/plus/workspaces/workspaces.ts +++ b/src/webviews/apps/plus/workspaces/workspaces.ts @@ -1,5 +1,6 @@ import type { State } from '../../../../plus/webviews/workspaces/protocol'; import { App } from '../../shared/appBase'; +import type { IssueRow } from './components/issue-row'; import type { PullRequestRow } from './components/pull-request-row'; import '../../shared/components/code-icon'; import '../../shared/components/avatars/avatar-item'; @@ -7,6 +8,7 @@ import '../../shared/components/avatars/avatar-stack'; import '../../shared/components/table/table-container'; import '../../shared/components/table/table-row'; import '../../shared/components/table/table-cell'; +import './components/issue-row'; import './components/pull-request-row'; import './workspaces.scss'; @@ -23,19 +25,36 @@ export class WorkspacesApp extends App { renderContent() { this.renderPullRequests(); + this.renderIssues(); } renderPullRequests() { - const prTableEl = document.getElementById('pull-requests'); + const tableEl = document.getElementById('pull-requests'); if (this.state.pullRequests != null && this.state.pullRequests?.length > 0) { - const els = this.state.pullRequests.map(({ pullRequest }) => { - const prRowEl = document.createElement('pull-request-row') as PullRequestRow; - prRowEl.pullRequest = pullRequest; + const els = this.state.pullRequests.map(({ pullRequest, reasons }) => { + const rowEl = document.createElement('pull-request-row') as PullRequestRow; + rowEl.pullRequest = pullRequest; + rowEl.reasons = reasons; - return prRowEl; + return rowEl; }); - prTableEl?.append(...els); + tableEl?.append(...els); + } + } + + renderIssues() { + const tableEl = document.getElementById('issues'); + + if (this.state.issues != null && this.state.issues?.length > 0) { + const els = this.state.issues.map(({ issue, reasons }) => { + const rowEl = document.createElement('issue-row') as IssueRow; + rowEl.issue = issue; + rowEl.reasons = reasons; + + return rowEl; + }); + tableEl?.append(...els); } } } diff --git a/src/webviews/apps/shared/components/table/table-cell.ts b/src/webviews/apps/shared/components/table/table-cell.ts index 629bd52..7347633 100644 --- a/src/webviews/apps/shared/components/table/table-cell.ts +++ b/src/webviews/apps/shared/components/table/table-cell.ts @@ -36,6 +36,7 @@ const styles = css` background-color: var(--table-pinned-background); position: sticky; top: 0; + z-index: 3; } `;