<script lang="ts"> import {SvgIcon} from '../svg.ts'; import {GET} from '../modules/fetch.ts'; import {generateAriaId} from '../modules/fomantic/base.ts'; export default { components: {SvgIcon}, data: () => { const el = document.querySelector('#diff-commit-select'); return { menuVisible: false, isLoading: false, queryParams: el.getAttribute('data-queryparams'), issueLink: el.getAttribute('data-issuelink'), locale: { filter_changes_by_commit: el.getAttribute('data-filter_changes_by_commit'), }, commits: [], hoverActivated: false, lastReviewCommitSha: null, uniqueIdMenu: generateAriaId(), uniqueIdShowAll: generateAriaId(), }; }, computed: { commitsSinceLastReview() { if (this.lastReviewCommitSha) { return this.commits.length - this.commits.findIndex((x) => x.id === this.lastReviewCommitSha) - 1; } return 0; }, }, mounted() { document.body.addEventListener('click', this.onBodyClick); this.$el.addEventListener('keydown', this.onKeyDown); this.$el.addEventListener('keyup', this.onKeyUp); }, unmounted() { document.body.removeEventListener('click', this.onBodyClick); this.$el.removeEventListener('keydown', this.onKeyDown); this.$el.removeEventListener('keyup', this.onKeyUp); }, methods: { onBodyClick(event) { // close this menu on click outside of this element when the dropdown is currently visible opened if (this.$el.contains(event.target)) return; if (this.menuVisible) { this.toggleMenu(); } }, onKeyDown(event) { if (!this.menuVisible) return; const item = document.activeElement; if (!this.$el.contains(item)) return; switch (event.key) { case 'ArrowDown': // select next element event.preventDefault(); this.focusElem(item.nextElementSibling, item); break; case 'ArrowUp': // select previous element event.preventDefault(); this.focusElem(item.previousElementSibling, item); break; case 'Escape': // close menu event.preventDefault(); item.tabIndex = -1; this.toggleMenu(); break; } if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { const item = document.activeElement; // try to highlight the selected commits const commitIdx = item?.matches('.item') ? item.getAttribute('data-commit-idx') : null; if (commitIdx) this.highlight(this.commits[commitIdx]); } }, onKeyUp(event) { if (!this.menuVisible) return; const item = document.activeElement; if (!this.$el.contains(item)) return; if (event.key === 'Shift' && this.hoverActivated) { // shift is not pressed anymore -> deactivate hovering and reset hovered and selected this.hoverActivated = false; for (const commit of this.commits) { commit.hovered = false; commit.selected = false; } } }, highlight(commit) { if (!this.hoverActivated) return; const indexSelected = this.commits.findIndex((x) => x.selected); const indexCurrentElem = this.commits.findIndex((x) => x.id === commit.id); for (const [idx, commit] of this.commits.entries()) { commit.hovered = Math.min(indexSelected, indexCurrentElem) <= idx && idx <= Math.max(indexSelected, indexCurrentElem); } }, /** Focus given element */ focusElem(elem, prevElem) { if (elem) { elem.tabIndex = 0; if (prevElem) prevElem.tabIndex = -1; elem.focus(); } }, /** Opens our menu, loads commits before opening */ async toggleMenu() { this.menuVisible = !this.menuVisible; // load our commits when the menu is not yet visible (it'll be toggled after loading) // and we got no commits if (!this.commits.length && this.menuVisible && !this.isLoading) { this.isLoading = true; try { await this.fetchCommits(); } finally { this.isLoading = false; } } // set correct tabindex to allow easier navigation this.$nextTick(() => { if (this.menuVisible) { this.focusElem(this.$refs.showAllChanges, this.$refs.expandBtn); } else { this.focusElem(this.$refs.expandBtn, this.$refs.showAllChanges); } }); }, /** Load the commits to show in this dropdown */ async fetchCommits() { const resp = await GET(`${this.issueLink}/commits/list`); const results = await resp.json(); this.commits.push(...results.commits.map((x) => { x.hovered = false; return x; })); this.commits.reverse(); this.lastReviewCommitSha = results.last_review_commit_sha || null; if (this.lastReviewCommitSha && !this.commits.some((x) => x.id === this.lastReviewCommitSha)) { // the lastReviewCommit is not available (probably due to a force push) // reset the last review commit sha this.lastReviewCommitSha = null; } Object.assign(this.locale, results.locale); }, showAllChanges() { window.location = `${this.issueLink}/files${this.queryParams}`; }, /** Called when user clicks on since last review */ changesSinceLastReviewClick() { window.location = `${this.issueLink}/files/${this.lastReviewCommitSha}..${this.commits.at(-1).id}${this.queryParams}`; }, /** Clicking on a single commit opens this specific commit */ commitClicked(commitId, newWindow = false) { const url = `${this.issueLink}/commits/${commitId}${this.queryParams}`; if (newWindow) { window.open(url); } else { window.location = url; } }, /** * When a commit is clicked with shift this enables the range * selection. Second click (with shift) defines the end of the * range. This opens the diff of this range * Exception: first commit is the first commit of this PR. Then * the diff from beginning of PR up to the second clicked commit is * opened */ commitClickedShift(commit) { this.hoverActivated = !this.hoverActivated; commit.selected = true; // Second click -> determine our range and open links accordingly if (!this.hoverActivated) { // find all selected commits and generate a link if (this.commits[0].selected) { // first commit is selected - generate a short url with only target sha const lastCommitIdx = this.commits.findLastIndex((x) => x.selected); if (lastCommitIdx === this.commits.length - 1) { // user selected all commits - just show the normal diff page window.location = `${this.issueLink}/files${this.queryParams}`; } else { window.location = `${this.issueLink}/files/${this.commits[lastCommitIdx].id}${this.queryParams}`; } } else { const start = this.commits[this.commits.findIndex((x) => x.selected) - 1].id; const end = this.commits.findLast((x) => x.selected).id; window.location = `${this.issueLink}/files/${start}..${end}${this.queryParams}`; } } }, }, }; </script> <template> <div class="ui scrolling dropdown custom diff-commit-selector"> <button ref="expandBtn" class="ui basic button" @click.stop="toggleMenu()" :data-tooltip-content="locale.filter_changes_by_commit" aria-haspopup="true" :aria-label="locale.filter_changes_by_commit" :aria-controls="uniqueIdMenu" :aria-activedescendant="uniqueIdShowAll" > <svg-icon name="octicon-git-commit"/> </button> <!-- this dropdown is not managed by Fomantic UI, so it needs some classes like "transition" explicitly --> <div class="left menu transition" :id="uniqueIdMenu" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak :aria-expanded="menuVisible ? 'true': 'false'"> <div class="loading-indicator is-loading" v-if="isLoading"/> <div v-if="!isLoading" class="item" :id="uniqueIdShowAll" ref="showAllChanges" role="menuitem" @keydown.enter="showAllChanges()" @click="showAllChanges()"> <div class="gt-ellipsis"> {{ locale.show_all_commits }} </div> <div class="gt-ellipsis text light-2 tw-mb-0"> {{ locale.stats_num_commits }} </div> </div> <!-- only show the show changes since last review if there is a review AND we are commits ahead of the last review --> <div v-if="lastReviewCommitSha != null" class="item" role="menuitem" :class="{disabled: !commitsSinceLastReview}" @keydown.enter="changesSinceLastReviewClick()" @click="changesSinceLastReviewClick()" > <div class="gt-ellipsis"> {{ locale.show_changes_since_your_last_review }} </div> <div class="gt-ellipsis text light-2"> {{ commitsSinceLastReview }} commits </div> </div> <span v-if="!isLoading" class="info text light-2">{{ locale.select_commit_hold_shift_for_range }}</span> <template v-for="(commit, idx) in commits" :key="commit.id"> <div class="item" role="menuitem" :class="{selected: commit.selected, hovered: commit.hovered}" :data-commit-idx="idx" @keydown.enter.exact="commitClicked(commit.id)" @keydown.enter.shift.exact="commitClickedShift(commit)" @mouseover.shift="highlight(commit)" @click.exact="commitClicked(commit.id)" @click.ctrl.exact="commitClicked(commit.id, true)" @click.meta.exact="commitClicked(commit.id, true)" @click.shift.exact.stop.prevent="commitClickedShift(commit)" > <div class="tw-flex-1 tw-flex tw-flex-col tw-gap-1"> <div class="gt-ellipsis commit-list-summary"> {{ commit.summary }} </div> <div class="gt-ellipsis text light-2"> {{ commit.committer_or_author_name }} <span class="text right"> <!-- TODO: make this respect the PreferredTimestampTense setting --> <relative-time prefix="" :datetime="commit.time" data-tooltip-content data-tooltip-interactive="true">{{ commit.time }}</relative-time> </span> </div> </div> <div class="tw-font-mono"> {{ commit.short_sha }} </div> </div> </template> </div> </div> </template> <style scoped> .ui.dropdown.diff-commit-selector .menu { margin-top: 0.25em; overflow-x: hidden; max-height: 450px; } .ui.dropdown.diff-commit-selector .menu .loading-indicator { height: 200px; width: 350px; } .ui.dropdown.diff-commit-selector .menu > .item, .ui.dropdown.diff-commit-selector .menu > .info { display: flex; flex-direction: row; line-height: 1.4; gap: 0.25em; padding: 7px 14px !important; } .ui.dropdown.diff-commit-selector .menu > .item:not(:first-child), .ui.dropdown.diff-commit-selector .menu > .info:not(:first-child) { border-top: 1px solid var(--color-secondary) !important; } .ui.dropdown.diff-commit-selector .menu > .item:focus { background: var(--color-active); } .ui.dropdown.diff-commit-selector .menu > .item.hovered { background-color: var(--color-small-accent); } .ui.dropdown.diff-commit-selector .menu > .item.selected { background-color: var(--color-accent); } .ui.dropdown.diff-commit-selector .menu .commit-list-summary { max-width: min(380px, 96vw); } </style>