Display GPG status on repository and blob pages

8 files changed, 128 insertions, 100 deletions

diff --git a/app/assets/javascripts/gpg_badges.js b/app/assets/javascripts/gpg_badges.js
index 029fd6a67d4..efba6fc1aff 100644
--- a/app/assets/javascripts/gpg_badges.js
+++ b/app/assets/javascripts/gpg_badges.js
@@ -1,23 +1,36 @@
 import $ from 'jquery';
 import { parseQueryStringIntoObject } from '~/lib/utils/common_utils';
 import axios from '~/lib/utils/axios_utils';
-import flash from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 
 export default class GpgBadges {
   static fetch() {
-    const badges = $('.js-loading-gpg-badge');
     const tag = $('.js-signature-container');
+    if (tag.length === 0) {
+      return Promise.resolve();
+    }
+
+    const badges = $('.js-loading-gpg-badge');
 
     badges.html('<i class="fa fa-spinner fa-spin"></i>');
 
+    const displayError = () => createFlash(__('An error occurred while loading commit signatures'));
+
+    const endpoint = tag.data('signaturesPath');
+    if (!endpoint) {
+      displayError();
+      return Promise.reject(new Error('Missing commit signatures endpoint!'));
+    }
+
     const params = parseQueryStringIntoObject(tag.serialize());
-    return axios.get(tag.data('signaturesPath'), { params })
-    .then(({ data }) => {
-      data.signatures.forEach((signature) => {
-        badges.filter(`[data-commit-sha="${signature.commit_sha}"]`).replaceWith(signature.html);
-      });
-    })
-    .catch(() => flash(__('An error occurred while loading commits')));
+    return axios
+      .get(endpoint, { params })
+      .then(({ data }) => {
+        data.signatures.forEach(signature => {
+          badges.filter(`[data-commit-sha="${signature.commit_sha}"]`).replaceWith(signature.html);
+        });
+      })
+      .catch(displayError);
   }
 }
diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index 85c6862d629..84e5bb3c46e 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import BlobViewer from '~/blob/viewer/index';
 import initBlob from '~/pages/projects/init_blob';
+import GpgBadges from '~/gpg_badges';
 
 document.addEventListener('DOMContentLoaded', () => {
   new BlobViewer(); // eslint-disable-line no-new
@@ -26,4 +27,6 @@ document.addEventListener('DOMContentLoaded', () => {
       },
     });
   }
+
+  GpgBadges.fetch();
 });
diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js
index 3b0f0f960b8..d2dc0c4570e 100644
--- a/app/assets/javascripts/pages/projects/show/index.js
+++ b/app/assets/javascripts/pages/projects/show/index.js
@@ -7,6 +7,7 @@ import TreeView from '~/tree';
 import BlobViewer from '~/blob/viewer/index';
 import Activities from '~/activities';
 import { ajaxGet } from '~/lib/utils/common_utils';
+import GpgBadges from '~/gpg_badges';
 import Star from '../../../star';
 import notificationsDropdown from '../../../notifications_dropdown';
 
@@ -38,4 +39,6 @@ document.addEventListener('DOMContentLoaded', () => {
   $(treeSlider).waitForImages(() => {
     ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath);
   });
+
+  GpgBadges.fetch();
 });
diff --git a/app/assets/javascripts/pages/projects/tree/show/index.js b/app/assets/javascripts/pages/projects/tree/show/index.js
index 7ad082a5e61..33d69d891d8 100644
--- a/app/assets/javascripts/pages/projects/tree/show/index.js
+++ b/app/assets/javascripts/pages/projects/tree/show/index.js
@@ -2,6 +2,7 @@ import $ from 'jquery';
 import Vue from 'vue';
 import initBlob from '~/blob_edit/blob_bundle';
 import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
+import GpgBadges from '~/gpg_badges';
 import TreeView from '../../../../tree';
 import ShortcutsNavigation from '../../../../shortcuts_navigation';
 import BlobViewer from '../../../../blob/viewer';
@@ -14,7 +15,8 @@ document.addEventListener('DOMContentLoaded', () => {
   new BlobViewer(); // eslint-disable-line no-new
   new NewCommitForm($('.js-create-dir-form')); // eslint-disable-line no-new
   $('#tree-slider').waitForImages(() =>
-    ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath));
+    ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath),
+  );
 
   initBlob();
   const commitPipelineStatusEl = document.querySelector('.js-commit-pipeline-status');
@@ -36,4 +38,6 @@ document.addEventListener('DOMContentLoaded', () => {
       },
     });
   }
+
+  GpgBadges.fetch();
 });
diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
index a4c7c143e56..1c1e17563a1 100644
--- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
@@ -1,27 +1,27 @@
 <script>
-  import Visibility from 'visibilityjs';
-  import ciIcon from '~/vue_shared/components/ci_icon.vue';
-  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
-  import Poll from '~/lib/utils/poll';
-  import Flash from '~/flash';
-  import { s__, sprintf } from '~/locale';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import CommitPipelineService from '../services/commit_pipeline_service';
+import Visibility from 'visibilityjs';
+import ciIcon from '~/vue_shared/components/ci_icon.vue';
+import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+import Poll from '~/lib/utils/poll';
+import Flash from '~/flash';
+import { s__, sprintf } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+import CommitPipelineService from '../services/commit_pipeline_service';
 
-  export default {
-    directives: {
-      tooltip,
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    ciIcon,
+    loadingIcon,
+  },
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
     },
-    components: {
-      ciIcon,
-      loadingIcon,
-    },
-    props: {
-      endpoint: {
-        type: String,
-        required: true,
-      },
-      /* This prop can be used to replace some of the `render_commit_status`
+    /* This prop can be used to replace some of the `render_commit_status`
       used across GitLab, this way we could use this vue component and add a
       realtime status where it makes sense
       realtime: {
@@ -29,76 +29,77 @@
         required: false,
         default: true,
       }, */
+  },
+  data() {
+    return {
+      ciStatus: {},
+      isLoading: true,
+    };
+  },
+  computed: {
+    statusTitle() {
+      return sprintf(s__('Commits|Commit: %{commitText}'), { commitText: this.ciStatus.text });
     },
-    data() {
-      return {
-        ciStatus: {},
-        isLoading: true,
-      };
-    },
-    computed: {
-      statusTitle() {
-        return sprintf(s__('Commits|Commit: %{commitText}'), { commitText: this.ciStatus.text });
-      },
+  },
+  mounted() {
+    this.service = new CommitPipelineService(this.endpoint);
+    this.initPolling();
+  },
+  methods: {
+    successCallback(res) {
+      const { pipelines } = res.data;
+      if (pipelines.length > 0) {
+        // The pipeline entity always keeps the latest pipeline info on the `details.status`
+        this.ciStatus = pipelines[0].details.status;
+      }
+      this.isLoading = false;
     },
-    mounted() {
-      this.service = new CommitPipelineService(this.endpoint);
-      this.initPolling();
+    errorCallback() {
+      this.ciStatus = {
+        text: 'not found',
+        icon: 'status_notfound',
+        group: 'notfound',
+      };
+      this.isLoading = false;
+      Flash(s__('Something went wrong on our end'));
     },
-    methods: {
-      successCallback(res) {
-        const { pipelines } = res.data;
-        if (pipelines.length > 0) {
-          // The pipeline entity always keeps the latest pipeline info on the `details.status`
-          this.ciStatus = pipelines[0].details.status;
-        }
-        this.isLoading = false;
-      },
-      errorCallback() {
-        this.ciStatus = {
-          text: 'not found',
-          icon: 'status_notfound',
-          group: 'notfound',
-        };
-        this.isLoading = false;
-        Flash(s__('Something went wrong on our end'));
-      },
-      initPolling() {
-        this.poll = new Poll({
-          resource: this.service,
-          method: 'fetchData',
-          successCallback: response => this.successCallback(response),
-          errorCallback: this.errorCallback,
-        });
+    initPolling() {
+      this.poll = new Poll({
+        resource: this.service,
+        method: 'fetchData',
+        successCallback: response => this.successCallback(response),
+        errorCallback: this.errorCallback,
+      });
+
+      if (!Visibility.hidden()) {
+        this.isLoading = true;
+        this.poll.makeRequest();
+      } else {
+        this.fetchPipelineCommitData();
+      }
 
+      Visibility.change(() => {
         if (!Visibility.hidden()) {
-          this.isLoading = true;
-          this.poll.makeRequest();
+          this.poll.restart();
         } else {
-          this.fetchPipelineCommitData();
+          this.poll.stop();
         }
-
-        Visibility.change(() => {
-          if (!Visibility.hidden()) {
-            this.poll.restart();
-          } else {
-            this.poll.stop();
-          }
-        });
-      },
-      fetchPipelineCommitData() {
-        this.service.fetchData()
-          .then(this.successCallback)
-          .catch(this.errorCallback);
-      },
+      });
     },
-    destroy() {
-      this.poll.stop();
+    fetchPipelineCommitData() {
+      this.service
+        .fetchData()
+        .then(this.successCallback)
+        .catch(this.errorCallback);
     },
-  };
+  },
+  destroy() {
+    this.poll.stop();
+  },
+};
 </script>
 <template>
-  <div>
+  <div class="ci-status-link">
     <loading-icon
       v-if="isLoading"
       label="Loading pipeline status"
@@ -113,6 +114,7 @@
         :title="statusTitle"
         :aria-label="statusTitle"
         :status="ciStatus"
+        :size="24"
         data-container="body"
       />
     </a>
diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index dc5760bce28..d272bf3f55f 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -13,12 +13,19 @@
  * />
  */
 import tooltip from '../directives/tooltip';
+import Icon from '../components/icon.vue';
 
 export default {
   name: 'ClipboardButton',
+
   directives: {
     tooltip,
   },
+
+  components: {
+    Icon,
+  },
+
   props: {
     text: {
       type: String,
@@ -58,10 +65,6 @@ export default {
     type="button"
     class="btn"
   >
-    <i
-      aria-hidden="true"
-      class="fa fa-clipboard"
-    >
-    </i>
+    <icon name="duplicate" />
   </button>
 </template>
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 523fcb05a87..646cedd79ed 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -294,6 +294,10 @@
 .btn-clipboard {
   border: 0;
   padding: 0 5px;
+
+  svg {
+    top: auto;
+  }
 }
 
 .input-group-prepend,
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index f75be4e01cd..63585e26022 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -205,7 +205,7 @@
   > .ci-status-link,
   > .btn,
   > .commit-sha-group {
-    margin-left: $gl-padding-8;
+    margin-left: $gl-padding;
   }
 }
 
@@ -235,10 +235,6 @@
     fill: $gl-text-color-secondary;
   }
 
-  .fa-clipboard {
-    color: $gl-text-color-secondary;
-  }
-
   :first-child {
     border-bottom-left-radius: $border-radius-default;
     border-top-left-radius: $border-radius-default;