summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/diffs/components
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts/diffs/components')
-rw-r--r--app/assets/javascripts/diffs/components/commit_item.vue61
-rw-r--r--app/assets/javascripts/diffs/components/compare_versions.vue51
2 files changed, 51 insertions, 61 deletions
diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
index 92b317eb3f0..bc0f2fb0b69 100644
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -1,7 +1,6 @@
<script>
/* eslint-disable vue/no-v-html */
-import { GlButtonGroup, GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
-import { mapActions } from 'vuex';
+import { GlButtonGroup, GlButton, GlTooltipDirective } from '@gitlab/ui';
import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
@@ -9,7 +8,6 @@ import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { setUrlParams } from '../../lib/utils/url_utility';
import initUserPopovers from '../../user_popovers';
/**
@@ -24,14 +22,6 @@ import initUserPopovers from '../../user_popovers';
* coexist, but there is an issue to remove the duplication.
* https://gitlab.com/gitlab-org/gitlab-foss/issues/51613
*
- * EXCEPTION WARNING
- * 1. The commit navigation buttons (next neighbor, previous neighbor)
- * are not duplicated because:
- * - We don't have the same data available on the Rails side (yet,
- * without backend work)
- * - This Vue component should always be what's used when in the
- * context of an MR diff, so the HAML should never have any idea
- * about navigating among commits.
*/
export default {
@@ -42,7 +32,6 @@ export default {
CommitPipelineStatus,
GlButtonGroup,
GlButton,
- GlIcon,
},
directives: {
GlTooltip: GlTooltipDirective,
@@ -94,28 +83,12 @@ export default {
// Strip the newline at the beginning
return this.commit.description_html.replace(/^&#x000A;/, '');
},
- nextCommitUrl() {
- return this.commit.next_commit_id
- ? setUrlParams({ commit_id: this.commit.next_commit_id })
- : '';
- },
- previousCommitUrl() {
- return this.commit.prev_commit_id
- ? setUrlParams({ commit_id: this.commit.prev_commit_id })
- : '';
- },
- hasNeighborCommits() {
- return this.commit.next_commit_id || this.commit.prev_commit_id;
- },
},
created() {
this.$nextTick(() => {
initUserPopovers(this.$el.querySelectorAll('.js-user-link'));
});
},
- methods: {
- ...mapActions('diffs', ['moveToNeighboringCommit']),
- },
};
</script>
@@ -146,38 +119,6 @@ export default {
class="input-group-text"
/>
</gl-button-group>
- <div v-if="hasNeighborCommits" class="commit-nav-buttons ml-3">
- <gl-button-group>
- <gl-button
- :href="previousCommitUrl"
- :disabled="!commit.prev_commit_id"
- @click.prevent="moveToNeighboringCommit({ direction: 'previous' })"
- >
- <span
- v-if="!commit.prev_commit_id"
- v-gl-tooltip
- class="h-100 w-100 position-absolute"
- :title="__('You\'re at the first commit')"
- ></span>
- <gl-icon name="chevron-left" />
- {{ __('Prev') }}
- </gl-button>
- <gl-button
- :href="nextCommitUrl"
- :disabled="!commit.next_commit_id"
- @click.prevent="moveToNeighboringCommit({ direction: 'next' })"
- >
- <span
- v-if="!commit.next_commit_id"
- v-gl-tooltip
- class="h-100 w-100 position-absolute"
- :title="__('You\'re at the last commit')"
- ></span>
- {{ __('Next') }}
- <gl-icon name="chevron-right" />
- </gl-button>
- </gl-button-group>
- </div>
</div>
<div>
<div class="d-flex float-left align-items-center align-self-start">
diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue
index 3fb9787ac30..7526c5347f7 100644
--- a/app/assets/javascripts/diffs/components/compare_versions.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -1,7 +1,8 @@
<script>
-import { GlTooltipDirective, GlLink, GlButton, GlSprintf } from '@gitlab/ui';
+import { GlTooltipDirective, GlIcon, GlLink, GlButtonGroup, GlButton, GlSprintf } from '@gitlab/ui';
import { mapActions, mapGetters, mapState } from 'vuex';
import { __ } from '~/locale';
+import { setUrlParams } from '../../lib/utils/url_utility';
import { CENTERED_LIMITED_CONTAINER_CLASSES, EVT_EXPAND_ALL_FILES } from '../constants';
import eventHub from '../event_hub';
import CompareDropdownLayout from './compare_dropdown_layout.vue';
@@ -11,7 +12,9 @@ import SettingsDropdown from './settings_dropdown.vue';
export default {
components: {
CompareDropdownLayout,
+ GlIcon,
GlLink,
+ GlButtonGroup,
GlButton,
GlSprintf,
SettingsDropdown,
@@ -56,6 +59,19 @@ export default {
hasSourceVersions() {
return this.diffCompareDropdownSourceVersions.length > 0;
},
+ nextCommitUrl() {
+ return this.commit.next_commit_id
+ ? setUrlParams({ commit_id: this.commit.next_commit_id })
+ : '';
+ },
+ previousCommitUrl() {
+ return this.commit.prev_commit_id
+ ? setUrlParams({ commit_id: this.commit.prev_commit_id })
+ : '';
+ },
+ hasNeighborCommits() {
+ return this.commit && (this.commit.next_commit_id || this.commit.prev_commit_id);
+ },
},
created() {
this.CENTERED_LIMITED_CONTAINER_CLASSES = CENTERED_LIMITED_CONTAINER_CLASSES;
@@ -65,6 +81,7 @@ export default {
expandAllFiles() {
eventHub.$emit(EVT_EXPAND_ALL_FILES);
},
+ ...mapActions('diffs', ['moveToNeighboringCommit']),
},
};
</script>
@@ -92,6 +109,38 @@ export default {
{{ __('Viewing commit') }}
<gl-link :href="commit.commit_url" class="monospace">{{ commit.short_id }}</gl-link>
</div>
+ <div v-if="hasNeighborCommits" class="commit-nav-buttons ml-3">
+ <gl-button-group>
+ <gl-button
+ :href="previousCommitUrl"
+ :disabled="!commit.prev_commit_id"
+ @click.prevent="moveToNeighboringCommit({ direction: 'previous' })"
+ >
+ <span
+ v-if="!commit.prev_commit_id"
+ v-gl-tooltip
+ class="h-100 w-100 position-absolute position-top-0 position-left-0"
+ :title="__('You\'re at the first commit')"
+ ></span>
+ <gl-icon name="chevron-left" />
+ {{ __('Prev') }}
+ </gl-button>
+ <gl-button
+ :href="nextCommitUrl"
+ :disabled="!commit.next_commit_id"
+ @click.prevent="moveToNeighboringCommit({ direction: 'next' })"
+ >
+ <span
+ v-if="!commit.next_commit_id"
+ v-gl-tooltip
+ class="h-100 w-100 position-absolute position-top-0 position-left-0"
+ :title="__('You\'re at the last commit')"
+ ></span>
+ {{ __('Next') }}
+ <gl-icon name="chevron-right" />
+ </gl-button>
+ </gl-button-group>
+ </div>
<gl-sprintf
v-else-if="hasSourceVersions"
class="d-flex align-items-center compare-versions-container"
View Lorry Controller Status