From 728cf27aa3e58f509e2160db6118ad502e54e31b Mon Sep 17 00:00:00 2001 From: Keith Daulton Date: Wed, 2 Aug 2023 02:16:30 -0400 Subject: [PATCH] Adds updated shared components --- package.json | 1 + .../apps/plus/focus/components/branch-tag.css.ts | 19 ++++ .../apps/plus/focus/components/focus-app.ts | 114 +++++++++++++++++--- .../apps/plus/focus/components/gk-issue-row.ts | 40 +++++-- .../plus/focus/components/gk-pull-request-row.ts | 117 +++++++++++++-------- src/webviews/apps/plus/focus/focus.scss | 4 + src/webviews/apps/plus/focus/focus.ts | 1 - yarn.lock | 33 ++++++ 8 files changed, 261 insertions(+), 68 deletions(-) create mode 100644 src/webviews/apps/plus/focus/components/branch-tag.css.ts diff --git a/package.json b/package.json index a3539cc..7b09627 100644 --- a/package.json +++ b/package.json @@ -14699,6 +14699,7 @@ }, "dependencies": { "@gitkraken/gitkraken-components": "10.1.9", + "@gitkraken/shared-web-components": "^0.1.1-rc.1", "@microsoft/fast-element": "1.12.0", "@microsoft/fast-react-wrapper": "0.3.18", "@octokit/core": "4.2.4", diff --git a/src/webviews/apps/plus/focus/components/branch-tag.css.ts b/src/webviews/apps/plus/focus/components/branch-tag.css.ts new file mode 100644 index 0000000..7303691 --- /dev/null +++ b/src/webviews/apps/plus/focus/components/branch-tag.css.ts @@ -0,0 +1,19 @@ +import { css } from 'lit'; + +export const repoBranchStyles = css` + .repo-branch { + display: flex; + flex-direction: column; + gap: 0 0.4rem; + } + + @media (max-width: 720px) { + .repo-branch { + flex-direction: row; + flex-wrap: wrap; + } + } + + .repo-branch__tag { + } +`; diff --git a/src/webviews/apps/plus/focus/components/focus-app.ts b/src/webviews/apps/plus/focus/components/focus-app.ts index 13a5afa..d5d7f7b 100644 --- a/src/webviews/apps/plus/focus/components/focus-app.ts +++ b/src/webviews/apps/plus/focus/components/focus-app.ts @@ -1,3 +1,13 @@ +import { + Badge, + Button, + defineGkElement, + FocusContainer, + Input, + Menu, + MenuItem, + Popover, +} from '@gitkraken/shared-web-components'; import { html, LitElement } from 'lit'; import { customElement, property, query, state } from 'lit/decorators.js'; import { map } from 'lit/directives/map.js'; @@ -17,9 +27,15 @@ import './gk-issue-row'; @customElement('gl-focus-app') export class GlFocusApp extends LitElement { static override styles = [themeProperties]; - private readonly tabFilters = ['authored', 'assigned', 'review-requested', 'mentioned']; + private readonly tabFilters = ['prs', 'issues']; private readonly tabFilterOptions = [ { label: 'All', value: '' }, + { label: 'PRs', value: 'prs' }, + { label: 'Issues', value: 'issues' }, + ]; + private readonly mineFilters = ['authored', 'assigned', 'review-requested', 'mentioned']; + private readonly mineFilterOptions = [ + { label: 'Mine', value: '' }, { label: 'Opened by Me', value: 'authored' }, { label: 'Assigned to Me', value: 'assigned' }, { label: 'Needs my Review', value: 'review-requested' }, @@ -38,11 +54,20 @@ export class GlFocusApp extends LitElement { private selectedTabFilter?: string; @state() + private selectedMineFilter?: string; + + @state() private searchText?: string; @property({ type: Object }) state?: State; + constructor() { + super(); + + defineGkElement(Button, Badge, Input, FocusContainer, Popover, Menu, MenuItem); + } + get subscriptionState() { return this.state?.access.subscription.current; } @@ -59,12 +84,20 @@ export class GlFocusApp extends LitElement { return this.state?.access.allowed === true && !(this.state?.repos?.some(r => r.isConnected) ?? false); } + get mineFilterMenuLabel() { + if (this.selectedMineFilter != null && this.selectedMineFilter !== '') { + return this.mineFilterOptions.find(f => f.value === this.selectedMineFilter)?.label; + } + + return this.mineFilterOptions[0].label; + } + get items() { if (this.isLoading) { return []; } - const items: { isPullrequest: boolean; rank: number; state: Record; reasons: string[] }[] = []; + const items: { isPullrequest: boolean; rank: number; state: Record; tags: string[] }[] = []; let rank = 0; this.state?.pullRequests?.forEach( @@ -79,11 +112,10 @@ export class GlFocusApp extends LitElement { hasLocalBranch: hasLocalBranch, }, rank: ++rank, - reasons: reasons, + tags: reasons, }); }, ); - this.state?.issues?.forEach(({ issue, reasons }) => { items.push({ isPullrequest: false, @@ -91,7 +123,7 @@ export class GlFocusApp extends LitElement { state: { issue: issue, }, - reasons: reasons, + tags: reasons, }); }); @@ -102,12 +134,11 @@ export class GlFocusApp extends LitElement { const counts: Record = {}; this.tabFilters.forEach(f => (counts[f] = 0)); - this.items.forEach(({ reasons }) => { - reasons.forEach(r => { - if (counts[r] != null) { - counts[r]++; - } - }); + this.items.forEach(({ isPullrequest }) => { + const key = isPullrequest ? 'prs' : 'issues'; + if (counts[key] != null) { + counts[key]++; + } }); return this.tabFilterOptions.map(o => { @@ -124,14 +155,23 @@ export class GlFocusApp extends LitElement { } const hasSearch = this.searchText != null && this.searchText !== ''; + const hasMineFilter = this.selectedMineFilter != null && this.selectedMineFilter !== ''; const hasTabFilter = this.selectedTabFilter != null && this.selectedTabFilter !== ''; - if (!hasSearch && !hasTabFilter) { + if (!hasSearch && !hasMineFilter && !hasTabFilter) { return this.items; } const searchText = this.searchText?.toLowerCase(); return this.items.filter(i => { - if (hasTabFilter && !i.reasons.includes(this.selectedTabFilter!)) { + if ( + hasTabFilter && + ((i.isPullrequest === true && this.selectedTabFilter === 'issues') || + (i.isPullrequest === false && this.selectedTabFilter === 'prs')) + ) { + return false; + } + + if (hasMineFilter && !i.tags.includes(this.selectedMineFilter!)) { return false; } @@ -261,6 +301,25 @@ export class GlFocusApp extends LitElement { `, )} + + ${this.mineFilterMenuLabel} + + ${map( + this.mineFilterOptions, + ({ label, value }, i) => html` + ${label} + `, + )} + +
- ${this.focusItemsContent()} + + + + Repo / Branch + ${this.focusItemsContent()} +
@@ -295,6 +359,28 @@ export class GlFocusApp extends LitElement { this.searchText = value; } + async onShowMenu() { + const menuEl: Popover | null = document.querySelector('gk-popover'); + if (menuEl) { + await menuEl.showPopover(); + } + } + + onHideMenu() { + const menuEl: Popover | null = document.querySelector('gk-popover'); + if (menuEl) { + menuEl.hidePopover(); + } + } + + onSelectMineFilter(e: CustomEvent<{ target: MenuItem }>) { + // console.log(e); + // console.log(e.detail?.target?.dataset?.value); + if (e.detail?.target?.dataset?.value != null) { + this.selectedMineFilter = e.detail.target.dataset.value; + } + } + protected override createRenderRoot() { return this; } diff --git a/src/webviews/apps/plus/focus/components/gk-issue-row.ts b/src/webviews/apps/plus/focus/components/gk-issue-row.ts index ed6e55d..1de2ab4 100644 --- a/src/webviews/apps/plus/focus/components/gk-issue-row.ts +++ b/src/webviews/apps/plus/focus/components/gk-issue-row.ts @@ -1,10 +1,20 @@ +import { + Avatar, + AvatarGroup, + defineGkElement, + FocusItem, + FocusRow, + RelativeDate, + Tag, + Tooltip, +} from '@gitkraken/shared-web-components'; import { css, html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; import { when } from 'lit/directives/when.js'; import type { IssueMember, IssueShape } from '../../../../../git/models/issue'; import { elementBase } from '../../../shared/components/styles/lit/base.css'; -import '@gitkraken/shared-web-components'; +import { repoBranchStyles } from './branch-tag.css'; import { dateAgeStyles } from './date-styles.css'; import { themeProperties } from './gk-theme.css'; import { fromDateRange } from './helpers'; @@ -15,6 +25,7 @@ export class GkIssueRow extends LitElement { themeProperties, elementBase, dateAgeStyles, + repoBranchStyles, css` :host { display: block; @@ -72,6 +83,12 @@ export class GkIssueRow extends LitElement { @property({ type: Object }) public issue?: IssueShape; + constructor() { + super(); + + defineGkElement(Tag, FocusRow, FocusItem, AvatarGroup, Avatar, RelativeDate, Tooltip); + } + get lastUpdatedDate() { return new Date(this.issue!.date); } @@ -98,7 +115,7 @@ export class GkIssueRow extends LitElement { return html` - ${this.rank} + pending suggestions -->

- - - ${this.issue.repository.repo} - ${this.issue.commentsCount} @@ -138,7 +151,7 @@ export class GkIssueRow extends LitElement { ${repeat( this.assignees, item => item.url, - (item, index) => + item => html` +

+ + + ${this.issue.repository.repo} + +
diff --git a/src/webviews/apps/plus/focus/components/gk-pull-request-row.ts b/src/webviews/apps/plus/focus/components/gk-pull-request-row.ts index b5a99eb..aa3fc98 100644 --- a/src/webviews/apps/plus/focus/components/gk-pull-request-row.ts +++ b/src/webviews/apps/plus/focus/components/gk-pull-request-row.ts @@ -1,10 +1,21 @@ +import { + AdditionsDeletions, + Avatar, + AvatarGroup, + defineGkElement, + FocusItem, + FocusRow, + RelativeDate, + Tag, + Tooltip, +} from '@gitkraken/shared-web-components'; import { css, html, LitElement, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; import { when } from 'lit/directives/when.js'; import type { PullRequestMember, PullRequestShape } from '../../../../../git/models/pullRequest'; import { elementBase } from '../../../shared/components/styles/lit/base.css'; -import '@gitkraken/shared-web-components'; +import { repoBranchStyles } from './branch-tag.css'; import { dateAgeStyles } from './date-styles.css'; import { themeProperties } from './gk-theme.css'; import { fromDateRange } from './helpers'; @@ -15,6 +26,7 @@ export class GkPullRequestRow extends LitElement { themeProperties, elementBase, dateAgeStyles, + repoBranchStyles, css` :host { display: block; @@ -32,7 +44,8 @@ export class GkPullRequestRow extends LitElement { text-decoration: underline; } - .actions { + .actions gk-tooltip { + display: inline-block; } .actions a { @@ -101,6 +114,12 @@ export class GkPullRequestRow extends LitElement { @property({ type: Boolean }) public hasLocalBranch = false; + constructor() { + super(); + + defineGkElement(Tag, FocusRow, FocusItem, AvatarGroup, Avatar, RelativeDate, AdditionsDeletions, Tooltip); + } + get lastUpdatedDate() { return new Date(this.pullRequest!.date); } @@ -141,34 +160,30 @@ export class GkPullRequestRow extends LitElement { return html` - - ${this.rank} + ${when( this.indicator === 'changes', () => - html``, + html` + + changes requested + `, )} ${when( this.indicator === 'ready', () => - html``, + html` + + approved and ready to merge + `, )} ${when( this.indicator === 'conflicting', () => - html``, + html` + + cannot be merged due to merge conflicts + `, )} @@ -182,18 +197,14 @@ export class GkPullRequestRow extends LitElement { pending suggestions -->

- - - ${this.pullRequest.refs?.base.branch} - - - - ${this.pullRequest.refs?.base.repo} - ${this.pullRequest.additions} ${this.pullRequest.deletions} + + + ${this.pullRequest.comments} +

@@ -211,7 +222,7 @@ export class GkPullRequestRow extends LitElement { ${repeat( this.assignees, item => item.url, - (item, index) => + item => html` +
+ + + ${this.pullRequest.refs?.isCrossRepository === true + ? html`${this.pullRequest.refs?.head.owner}:${this.pullRequest.refs?.head.branch}` + : this.pullRequest.refs?.head.branch} + + + + ${this.pullRequest.refs?.base.repo} + +
diff --git a/src/webviews/apps/plus/focus/focus.scss b/src/webviews/apps/plus/focus/focus.scss index bf23042..9d9048c 100644 --- a/src/webviews/apps/plus/focus/focus.scss +++ b/src/webviews/apps/plus/focus/focus.scss @@ -238,3 +238,7 @@ h3 { text-transform: uppercase; color: var(--color-foreground); } + +.mine-menu { + width: max-content; +} diff --git a/src/webviews/apps/plus/focus/focus.ts b/src/webviews/apps/plus/focus/focus.ts index 3f78ec7..eaa7627 100644 --- a/src/webviews/apps/plus/focus/focus.ts +++ b/src/webviews/apps/plus/focus/focus.ts @@ -13,7 +13,6 @@ import type { GlFocusApp } from './components/focus-app'; import type { GkPullRequestRow } from './components/gk-pull-request-row'; import './components/focus-app'; import './focus.scss'; -import '@gitkraken/shared-web-components'; export class FocusApp extends App { constructor() { diff --git a/yarn.lock b/yarn.lock index 2ff28f3..76eccf7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -202,6 +202,26 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.46.0.tgz#3f7802972e8b6fe3f88ed1aabc74ec596c456db6" integrity sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA== +"@floating-ui/core@^1.4.1": + version "1.4.1" + resolved "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.1.tgz#0d633f4b76052668afb932492ac452f7ebe97f17" + integrity sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ== + dependencies: + "@floating-ui/utils" "^0.1.1" + +"@floating-ui/dom@^1.4.2": + version "1.5.1" + resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7" + integrity sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw== + dependencies: + "@floating-ui/core" "^1.4.1" + "@floating-ui/utils" "^0.1.1" + +"@floating-ui/utils@^0.1.1": + version "0.1.1" + resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83" + integrity sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw== + "@gitkraken/gitkraken-components@10.1.9": version "10.1.9" resolved "https://registry.yarnpkg.com/@gitkraken/gitkraken-components/-/gitkraken-components-10.1.9.tgz#751a9bce02f46a11facc000fefe7844802a8c9c8" @@ -215,6 +235,14 @@ react-dom "16.8.4" react-dragula "1.1.17" +"@gitkraken/shared-web-components@^0.1.1-rc.1": + version "0.1.1-rc.1" + resolved "https://registry.npmjs.org/@gitkraken/shared-web-components/-/shared-web-components-0.1.1-rc.1.tgz#8fa4de221f770c9a40778d1062f2707d1172922b" + integrity sha512-9CWf4ZuNv5F9ZOrONsBCM8F//KCZnDSkyMsFue51munqfTOT0bjjSM+KnL1hL79P+URDkrhHKiI59XT3QN5qcQ== + dependencies: + "@floating-ui/dom" "^1.4.2" + typescript "^4.9.5" + "@humanwhocodes/config-array@^0.11.10": version "0.11.10" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2" @@ -7294,6 +7322,11 @@ typescript@5.2.0-beta: resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.0-beta.tgz#a5cef616353be2f896da1d83a779d1d76a270129" integrity sha512-z5cq8BXVwaY8cwltw0BiyHRCVXen3QNgIzIcJV4NiLzaWvavxltzFSXd2csO4HoBjlGnuG+/LLbUZ8is3fD6iA== +typescript@^4.9.5: + version "4.9.5" + resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a" + integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== + uc.micro@^1.0.1, uc.micro@^1.0.5: version "1.0.6" resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"