[#2001] Extract c-zoom-commit-message component from views/c-zoom

frontend/src/components/c-zoom-commit-message.vue

@@ -0,0 +1,273 @@
+<template lang="pug">
+//- use tabindex to enable focus property on div
+.commit-message(
+ tabindex="-1",
+ v-bind:key="slice.hash",
+ v-bind:class="{ 'message-body active': slice.messageBody !== '' }"
+)
+ span.code-merge-icon(v-if="slice.isMergeCommit")
+ font-awesome-icon(icon="code-merge")
+ span &nbsp;
+ a.message-title(v-bind:href="getSliceLink(slice)",
+ v-bind:class="!isBrokenLink(getSliceLink(slice)) ? '' : 'broken-link'", target="_blank")
+ .within-border {{ slice.messageTitle.substr(0, 50) }}
+ .not-within-border(v-if="slice.messageTitle.length > 50")
+ |{{ slice.messageTitle.substr(50) }}
+ span(data-cy="changes") &nbsp; (+{{ slice.insertions }} -{{ slice.deletions }} lines) &nbsp;
+ .hash
+ span {{ slice.hash.substr(0, 7) }}
+ span.fileTypeLabel(
+ v-if="containsAtLeastOneSelected(Object.keys(slice.fileTypesAndContributionMap))",
+ v-for="fileType in\
+ Object.keys(slice.fileTypesAndContributionMap)",
+ vbind:key="fileType",
+ v-bind:style="{\
+ 'background-color': fileTypeColors[fileType],\
+ 'color': getFontColor(fileTypeColors[fileType])\
+ }"
+ ) {{ fileType }}
+ template(v-if="slice.tags")
+ .tag(
+ v-for="tag in slice.tags",
+ vbind:key="tag",
+ tabindex="-1", v-bind:class="[`${slice.hash}`, tag]"
+ )
+ font-awesome-icon(icon="tags")
+ span &nbsp;{{ tag }}
+ a(
+ v-if="slice.messageBody !== ''",
+ v-on:click="toggleSelectedCommitMessageBody(slice)"
+ )
+ .tooltip(
+ v-on:mouseover="onTooltipHover(`${slice.hash}-show-hide-message-body`)",
+ v-on:mouseout="resetTooltip(`${slice.hash}-show-hide-message-body`)"
+ )
+ font-awesome-icon.commit-message--button(icon="ellipsis-h")
+ span.tooltip-text(
+ v-bind:ref="`${slice.hash}-show-hide-message-body`"
+ ) Click to show/hide the commit message body
+ .body(v-if="slice.messageBody !== ''", v-show="slice.isOpen")
+ pre {{ slice.messageBody }}
+ .dashed-border
+ template(
+ v-if="showDiffstat"
+ )
+ c-stacked-bar-chart(
+ v-bind:bars="getContributionBars(slice)"
+ )
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import brokenLinkDisabler from '../mixin/brokenLinkMixin';
+import tooltipPositioner from '../mixin/dynamicTooltipMixin';
+import cRamp from './c-ramp.vue';
+import cStackedBarChart from './c-stacked-bar-chart.vue';
+import {
+ Bar,
+ CommitResult,
+ User,
+} from '../types/types';
+
+export default defineComponent({
+ name: 'c-zoom-commit-message',
+ components: {
+ FontAwesomeIcon,
+ cRamp,
+ cStackedBarChart,
+ },
+ mixins: [brokenLinkDisabler, tooltipPositioner],
+ props: {
+ slice: {
+ type: Object as PropType<CommitResult>,
+ required: true,
+ },
+ info: {
+ type: Object as PropType<{ zUser: User | undefined, zAvgContributionSize: number, zIsMerged: Boolean }>,
+ required: true,
+ },
+ showDiffstat: {
+ type: Boolean,
+ required: true,
+ },
+ selectedFileTypes: {
+ type: Array<String>,
+ required: true,
+ },
+ fileTypeColors: {
+ type: Object as PropType<{ [key: string]: string }>,
+ required: true,
+ },
+ },
+ methods: {
+ getContributionBars(slice: CommitResult): Array<Bar> {
+ let currentBarWidth = 0;
+ const fullBarWidth = 100;
+
+ let avgContributionSize = this.info.zAvgContributionSize;
+ if (avgContributionSize === undefined || avgContributionSize > 1000) {
+ avgContributionSize = 1000;
+ }
+
+ const contributionPerFullBar = avgContributionSize;
+
+ const diffstatMappings: { [key: string]: number } = { limegreen: slice.insertions, red: slice.deletions };
+ const allContributionBars: Array<Bar> = [];
+
+ if (contributionPerFullBar === 0) {
+ return allContributionBars;
+ }
+
+ Object.keys(diffstatMappings)
+ .forEach((color) => {
+ const contribution = diffstatMappings[color];
+ let barWidth = (contribution / contributionPerFullBar) * fullBarWidth;
+ const contributionBars = [];
+
+ // if contribution bar for file type is able to fit on the current line
+ if (currentBarWidth + barWidth < fullBarWidth) {
+ contributionBars.push(barWidth);
+ currentBarWidth += barWidth;
+ } else {
+ // take up all the space left on the current line
+ contributionBars.push(fullBarWidth - currentBarWidth);
+ barWidth -= fullBarWidth - currentBarWidth;
+ // additional bar width will start on a new line
+ const numOfFullBars = Math.floor(barWidth / fullBarWidth);
+ for (let i = 0; i < numOfFullBars; i += 1) {
+ contributionBars.push(fullBarWidth);
+ }
+ const remainingBarWidth = barWidth % fullBarWidth;
+ if (remainingBarWidth > 0) {
+ contributionBars.push(remainingBarWidth);
+ }
+ currentBarWidth = remainingBarWidth;
+ }
+
+ contributionBars.forEach((width) => {
+ const bar = {
+ color,
+ width,
+ };
+ allContributionBars.push(bar);
+ });
+ });
+
+ return allContributionBars;
+ },
+ getSliceLink(slice: CommitResult): string | undefined {
+ if (this.info.zIsMerged) {
+ return window.getCommitLink(slice.repoId, slice.hash);
+ }
+ return window.getCommitLink(this.info.zUser!.repoId, slice.hash);
+ },
+ toggleSelectedCommitMessageBody(slice: CommitResult) {
+ this.$store.commit('toggleZoomCommitMessageBody', slice);
+ },
+ containsAtLeastOneSelected(fileTypes: Array<string>): boolean {
+ for (let i = 0; i < fileTypes.length; i += 1) {
+ if (this.selectedFileTypes.includes(fileTypes[i])) {
+ return true;
+ }
+ }
+ return false;
+ },
+ getFontColor(color: string) {
+ return window.getFontColor(color);
+ },
+ },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/_colors.scss';
+
+.commit-message {
+ border: 1px solid transparent;
+ padding: 5px;
+
+ &:focus,
+ &:focus-within {
+ border: 1px solid mui-color('blue', '500');
+ }
+
+ &.active {
+ .body {
+ background-color: mui-color('white');
+ border: 1px solid mui-color('grey', '700');
+ display: grid;
+ margin: .25rem 0 .25rem 0;
+ overflow-x: auto;
+ padding: .4rem;
+ resize: none;
+
+ pre {
+ @include mono-font;
+ position: relative;
+
+ .dashed-border {
+ border-right: 1px dashed mui-color('grey', '500'); // 72nd character line
+ height: 100%;
+ pointer-events: none;
+ position: absolute;
+ top: 0;
+ width: 72ch;
+ }
+ }
+ }
+ }
+
+ .code-merge-icon {
+ color: mui-color('grey');
+
+ .fa-code-merge {
+ width: .65rem;
+ }
+ }
+
+ .body {
+ display: none;
+ }
+
+ .tag {
+ cursor: pointer;
+
+ &:focus {
+ border: 1px solid mui-color('blue', '500');
+ outline: none;
+ }
+ }
+
+ &--button {
+ color: mui-color('grey');
+ padding-left: .5rem;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+
+ pre {
+ margin: 0;
+ }
+
+ span.loc {
+ color: mui-color('grey');
+ }
+
+ .message-title {
+ @include mono-font;
+ display: inline;
+
+ .within-border {
+ display: inline;
+ }
+
+ .not-within-border {
+ border-left: 1px dashed mui-color('grey', '500'); // 50th character line
+ display: inline;
+ }
+ }
+}
+</style>