[gold] Port blamelist-panel-sk to TypeScript.
Bug: skia:10246
Change-Id: I3068ea69289f3e8477e0835cab5eadb8f12ab7f8
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/290772
Commit-Queue: Leandro Lovisolo <lovisolo@google.com>
Reviewed-by: Kevin Lubick <kjlubick@google.com>
diff --git a/golden/modules/blamelist-panel-sk/blamelist-panel-sk-demo.js b/golden/modules/blamelist-panel-sk/blamelist-panel-sk-demo.js
deleted file mode 100644
index f019cc0..0000000
--- a/golden/modules/blamelist-panel-sk/blamelist-panel-sk-demo.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import './index';
-import { $$ } from 'common-sk/modules/dom';
-import { blamelist19, fakeNow } from './demo_data';
-import { testOnlySetSettings } from '../settings';
-
-Date.now = () => fakeNow;
-
-testOnlySetSettings({
- baseRepoURL: 'https://github.com/example/example',
-});
-
-let ele = document.createElement('blamelist-panel-sk');
-ele.commits = blamelist19.slice(0, 1);
-$$('#single_commit').appendChild(ele);
-
-ele = document.createElement('blamelist-panel-sk');
-ele.commits = blamelist19.slice(0, 3);
-$$('#some_commits').appendChild(ele);
-
-ele = document.createElement('blamelist-panel-sk');
-ele.commits = blamelist19;
-$$('#many_commits').appendChild(ele);
diff --git a/golden/modules/blamelist-panel-sk/blamelist-panel-sk-demo.ts b/golden/modules/blamelist-panel-sk/blamelist-panel-sk-demo.ts
new file mode 100644
index 0000000..aff5d09
--- /dev/null
+++ b/golden/modules/blamelist-panel-sk/blamelist-panel-sk-demo.ts
@@ -0,0 +1,23 @@
+import './index';
+import { $$ } from 'common-sk/modules/dom';
+import { BlamelistPanelSk } from './blamelist-panel-sk';
+import { blamelist19, fakeNow } from './demo_data';
+import { testOnlySetSettings } from '../settings';
+
+Date.now = () => fakeNow;
+
+testOnlySetSettings({
+ baseRepoURL: 'https://github.com/example/example',
+});
+
+let ele = new BlamelistPanelSk();
+ele.commits = blamelist19.slice(0, 1);
+$$('#single_commit')!.appendChild(ele);
+
+ele = new BlamelistPanelSk();
+ele.commits = blamelist19.slice(0, 3);
+$$('#some_commits')!.appendChild(ele);
+
+ele = new BlamelistPanelSk();
+ele.commits = blamelist19;
+$$('#many_commits')!.appendChild(ele);
diff --git a/golden/modules/blamelist-panel-sk/blamelist-panel-sk.js b/golden/modules/blamelist-panel-sk/blamelist-panel-sk.ts
similarity index 62%
rename from golden/modules/blamelist-panel-sk/blamelist-panel-sk.js
rename to golden/modules/blamelist-panel-sk/blamelist-panel-sk.ts
index ad9d5e6..c4ad2ae 100644
--- a/golden/modules/blamelist-panel-sk/blamelist-panel-sk.js
+++ b/golden/modules/blamelist-panel-sk/blamelist-panel-sk.ts
@@ -15,16 +15,16 @@
const maxCommitsToDisplay = 15;
-const template = (ele) => html`
+const template = (ele: BlamelistPanelSk) => html`
<h2>Commits:</h2>
<table>
- ${ele._commits.slice(0, maxCommitsToDisplay).map(commitRow)}
+ ${ele.commits.slice(0, maxCommitsToDisplay).map(commitRow)}
</table>
<div>
- ${ele._commits.length > maxCommitsToDisplay ? '...and other commits.' : ''}
+ ${ele.commits.length > maxCommitsToDisplay ? '...and other commits.' : ''}
</div>`;
-const commitRow = (c) => html`
+const commitRow = (c: Commit) => html`
<tr>
<td title=${c.author}>${truncateWithEllipses(c.author, 20)}</td>
<td title=${new Date(c.commit_time * 1000)}>
@@ -35,8 +35,8 @@
</tr>
`;
-const commitHref = (commit) => {
- // TODO(kjlubick) deduplicate with by-blame-sk
+const commitHref = (commit: Commit) => {
+ // TODO(kjlubick): Deduplicate with by-blame-sk.
const repo = baseRepoURL();
if (!repo) {
throw new DOMException('repo not set in settings');
@@ -47,11 +47,23 @@
return `${repo}/+show/${commit.hash}`;
};
-define('blamelist-panel-sk', class extends ElementSk {
+/**
+ * Represents a Git commit.
+ *
+ * Client-side equivalent of frontend.Commit Go type.
+ */
+export interface Commit {
+ readonly hash: string;
+ readonly author: string;
+ readonly message: string;
+ readonly commit_time: number;
+};
+
+export class BlamelistPanelSk extends ElementSk {
+ private _commits: Commit[] = [];
+
constructor() {
super(template);
-
- this._commits = [];
}
connectedCallback() {
@@ -59,15 +71,12 @@
this._render();
}
- /**
- * @prop commits {Array<Object>} the commits to show. The objects should have string fields:
- * author, message, hash and a field commit_time that is the number of seconds since the epoch.
- * See frontend.Commit on the server side for more.
- */
- get commits() { return this._commits; }
+ get commits(): Commit[] { return this._commits; }
- set commits(arr) {
- this._commits = arr;
+ set commits(commits: Commit[]) {
+ this._commits = commits;
this._render();
}
-});
+};
+
+define('blamelist-panel-sk', BlamelistPanelSk);
diff --git a/golden/modules/blamelist-panel-sk/demo_data.js b/golden/modules/blamelist-panel-sk/demo_data.ts
similarity index 97%
rename from golden/modules/blamelist-panel-sk/demo_data.js
rename to golden/modules/blamelist-panel-sk/demo_data.ts
index 890a839..2fe86cb 100644
--- a/golden/modules/blamelist-panel-sk/demo_data.js
+++ b/golden/modules/blamelist-panel-sk/demo_data.ts
@@ -1,6 +1,8 @@
+import { Commit } from './blamelist-panel-sk';
+
export const fakeNow = Date.parse('2020-03-22T00:00:00.000Z');
-export const blamelist19 = [
+export const blamelist19: Commit[] = [
{
commit_time: 1584835000,
hash: 'dded3c7506efc5635e60ffb7a908cbe8f1f028f1',
diff --git a/golden/modules/blamelist-panel-sk/index.js b/golden/modules/blamelist-panel-sk/index.ts
similarity index 100%
rename from golden/modules/blamelist-panel-sk/index.js
rename to golden/modules/blamelist-panel-sk/index.ts