Updates focus view with Issues

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;
 };
 

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());
 	}
 }

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<IssueRow>`
+	<template role="row">
+		<table-cell class="status">
+			${when(x => x.issue!.closed === true, html`<code-icon icon="pass"></code-icon>`)}
+			${when(x => x.issue!.closed !== true, html`<code-icon icon="issues"></code-icon>`)}
+		</table-cell>
+		<table-cell class="time">${x => x.lastUpdated}</table-cell>
+		<table-cell>
+			${x => x.issue!.title} <a href="${x => x.issue!.url}">#${x => x.issue!.id}</a><br />
+			<small>
+				<span class="tag"><code-icon icon="repo"></code-icon>${x => x.issue!.repository.repo}</span>
+			</small>
+		</table-cell>
+		<table-cell>
+			<avatar-stack>
+				<avatar-item
+					media="${x => x.issue!.author?.avatarUrl}"
+					title="${x => x.issue!.author?.name}"
+				></avatar-item>
+			</avatar-stack>
+		</table-cell>
+		<table-cell>
+			<git-avatars :avatars="${x => x.issue!.assignees}"></git-avatars>
+		</table-cell>
+		<table-cell>${x => x.issue!.commentsCount}</table-cell>
+		<table-cell>${x => x.issue!.thumbsUpCount}</table-cell>
+		<table-cell class="actions">
+			<a href="${x => x.issue!.url}" title="Open issue 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: '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;
+	}
+}

src/webviews/apps/plus/workspaces/workspaces.html

@@ -49,8 +49,11 @@
 					<h2>My Issues</h2>
 				</header>
 				<div class="workspace-section__content">
-					<table-container>
+					<table-container id="issues">
 						<table-row slot="head">
+							<table-cell class="pr-status" header="column" pinned title="PR status">
+								<code-icon icon="issues"></code-icon>
+							</table-cell>
 							<table-cell class="pr-time" header="column" pinned title="Last updated">
 								<code-icon icon="gl-clock"></code-icon>
 							</table-cell>
@@ -64,34 +67,6 @@
 								<code-icon icon="thumbsup"></code-icon>
 							</table-cell>
 						</table-row>
-						<table-row>
-							<table-cell>6d</table-cell>
-							<table-cell>
-								Improve git blame contrast <a href="#">#2058</a><br />
-								<small>
-									<span class="tag"><code-icon icon="repo"></code-icon>vscode-gitlens</span>
-								</small>
-							</table-cell>
-							<table-cell>
-								<avatar-stack>
-									<avatar-item
-										media="https://www.gravatar.com/avatar/00000000000000000000000000000000?s=32&d=robohash"
-										title="eamodio"
-									></avatar-item>
-								</avatar-stack>
-							</table-cell>
-							<table-cell>
-								<avatar-stack>
-									<avatar-item
-										media="https://www.gravatar.com/avatar/00000000000000000000000000000000?s=32&d=robohash"
-										title="d13"
-									></avatar-item>
-									<avatar-item title="ramint and jschmoe">+2</avatar-item>
-								</avatar-stack>
-							</table-cell>
-							<table-cell>2</table-cell>
-							<table-cell>0</table-cell>
-						</table-row>
 					</table-container>
 				</div>
 			</section>

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);
 		}
 	}
 }

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;
 	}
 `;