last_commit.vue 4.43 KB
Newer Older
1
<script>
2
import { GlTooltipDirective, GlLink, GlButton, GlLoadingIcon } from '@gitlab/ui';
3
4
5
6
7
8
9
import { sprintf, s__ } from '~/locale';
import Icon from '../../vue_shared/components/icon.vue';
import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
import TimeagoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
import CiIcon from '../../vue_shared/components/ci_icon.vue';
import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
import getRefMixin from '../mixins/get_ref';
10
import getProjectPath from '../queries/getProjectPath.query.graphql';
11
12
13
14
15
16
17
18
19
20
21
import pathLastCommit from '../queries/pathLastCommit.query.graphql';

export default {
  components: {
    Icon,
    UserAvatarLink,
    TimeagoTooltip,
    ClipboardButton,
    CiIcon,
    GlLink,
    GlButton,
22
    GlLoadingIcon,
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  mixins: [getRefMixin],
  apollo: {
    projectPath: {
      query: getProjectPath,
    },
    commit: {
      query: pathLastCommit,
      variables() {
        return {
          projectPath: this.projectPath,
          ref: this.ref,
          path: this.currentPath.replace(/^\//, ''),
        };
      },
41
42
43
44
      update: data => data.project.repository.tree.lastCommit,
      context: {
        isSingleRequest: true,
      },
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
    },
  },
  props: {
    currentPath: {
      type: String,
      required: false,
      default: '',
    },
  },
  data() {
    return {
      projectPath: '',
      commit: {},
      showDescription: false,
    };
  },
  computed: {
    statusTitle() {
      return sprintf(s__('Commits|Commit: %{commitText}'), {
64
        commitText: this.commit.latestPipeline.detailedStatus.text,
65
66
67
68
69
70
      });
    },
    isLoading() {
      return this.$apollo.queries.commit.loading;
    },
    showCommitId() {
71
      return this.commit.sha.substr(0, 8);
72
73
74
75
76
77
78
79
80
81
82
    },
  },
  methods: {
    toggleShowDescription() {
      this.showDescription = !this.showDescription;
    },
  },
};
</script>

<template>
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
  <div class="info-well d-none d-sm-flex project-last-commit commit p-3">
    <gl-loading-icon v-if="isLoading" size="md" class="mx-auto" />
    <template v-else>
      <user-avatar-link
        v-if="commit.author"
        :link-href="commit.author.webUrl"
        :img-src="commit.author.avatarUrl"
        :img-size="40"
        class="avatar-cell"
      />
      <div class="commit-detail flex-list">
        <div class="commit-content qa-commit-content">
          <gl-link :href="commit.webUrl" class="commit-row-message item-title">
            {{ commit.title }}
          </gl-link>
          <gl-button
            v-if="commit.description"
            :class="{ open: showDescription }"
            :aria-label="__('Show commit description')"
            class="text-expander"
            @click="toggleShowDescription"
          >
            <icon name="ellipsis_h" />
          </gl-button>
          <div class="committer">
            <gl-link
              v-if="commit.author"
              :href="commit.author.webUrl"
              class="commit-author-link js-user-link"
            >
              {{ commit.author.name }}
            </gl-link>
115
            {{ s__('LastCommit|authored') }}
116
117
118
119
120
121
122
123
124
125
126
            <timeago-tooltip :time="commit.authoredDate" tooltip-placement="bottom" />
          </div>
          <pre
            v-if="commit.description"
            v-show="showDescription"
            class="commit-row-description append-bottom-8"
          >
            {{ commit.description }}
          </pre>
        </div>
        <div class="commit-actions flex-row">
127
          <div v-if="commit.signatureHtml" v-html="commit.signatureHtml"></div>
128
          <gl-link
129
130
131
132
133
            v-if="commit.latestPipeline"
            v-gl-tooltip
            :href="commit.latestPipeline.detailedStatus.detailsPath"
            :title="statusTitle"
            class="js-commit-pipeline"
134
          >
135
136
137
138
139
            <ci-icon
              :status="commit.latestPipeline.detailedStatus"
              :size="24"
              :aria-label="statusTitle"
            />
140
          </gl-link>
141
142
143
144
145
146
147
148
149
          <div class="commit-sha-group d-flex">
            <div class="label label-monospace monospace">
              {{ showCommitId }}
            </div>
            <clipboard-button
              :text="commit.sha"
              :title="__('Copy commit SHA to clipboard')"
              tooltip-placement="bottom"
            />
150
151
152
          </div>
        </div>
      </div>
153
    </template>
154
155
  </div>
</template>