diff options
Diffstat (limited to 'app/assets')
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; |