diff options
6 files changed, 51 insertions, 67 deletions
diff --git a/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue index adef5d94624..da34a7ee19b 100644 --- a/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue +++ b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue @@ -1,10 +1,11 @@ <script> -import { GlIcon } from '@gitlab/ui'; +import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; export default { components: { - GlIcon, + GlDropdown, + GlDropdownItem, TimeAgo, }, props: { @@ -22,57 +23,35 @@ export default { </script> <template> - <span class="dropdown inline"> - <a - class="dropdown-menu-toggle btn btn-default w-100" - data-toggle="dropdown" - aria-expanded="false" + <gl-dropdown :text="selectedVersionName" data-qa-selector="dropdown_content"> + <gl-dropdown-item + v-for="version in versions" + :key="version.id" + :class="{ + 'is-active': version.selected, + }" + :is-check-item="true" + :is-checked="version.selected" + :href="version.href" > - <span> {{ selectedVersionName }} </span> - <gl-icon :size="12" name="angle-down" class="position-absolute" /> - </a> - <div class="dropdown-menu dropdown-select dropdown-menu-selectable"> - <div class="dropdown-content" data-qa-selector="dropdown_content"> - <ul> - <li v-for="version in versions" :key="version.id"> - <a :class="{ 'is-active': version.selected }" :href="version.href"> - <div> - <strong> - {{ version.versionName }} - <template v-if="version.isHead">{{ - s__('DiffsCompareBaseBranch|(HEAD)') - }}</template> - <template v-else-if="version.isBase">{{ - s__('DiffsCompareBaseBranch|(base)') - }}</template> - </strong> - </div> - <div> - <small class="commit-sha"> {{ version.short_commit_sha }} </small> - </div> - <div> - <small> - <template v-if="version.commitsText"> - {{ version.commitsText }} - </template> - <time-ago - v-if="version.created_at" - :time="version.created_at" - class="js-timeago" - /> - </small> - </div> - </a> - </li> - </ul> + <div> + <strong> + {{ version.versionName }} + <template v-if="version.isHead">{{ s__('DiffsCompareBaseBranch|(HEAD)') }}</template> + <template v-else-if="version.isBase">{{ s__('DiffsCompareBaseBranch|(base)') }}</template> + </strong> </div> - </div> - </span> + <div> + <small class="commit-sha"> {{ version.short_commit_sha }} </small> + </div> + <div> + <small> + <template v-if="version.commitsText"> + {{ version.commitsText }} + </template> + <time-ago v-if="version.created_at" :time="version.created_at" class="js-timeago" /> + </small> + </div> + </gl-dropdown-item> + </gl-dropdown> </template> - -<style> -.dropdown { - min-width: 0; - max-height: 170px; -} -</style> diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 98eee2c3a02..069392f8a99 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -720,7 +720,7 @@ $mr-widget-min-height: 69px; z-index: 199; white-space: nowrap; - .dropdown-menu-toggle { + .gl-dropdown-toggle { width: auto; max-width: 170px; diff --git a/changelogs/unreleased/Migrate-Bootstrap-dropdown-to-GitLab-UI-GlDropdown-in-app-assets-javascri.yml b/changelogs/unreleased/Migrate-Bootstrap-dropdown-to-GitLab-UI-GlDropdown-in-app-assets-javascri.yml new file mode 100644 index 00000000000..f07a9d44778 --- /dev/null +++ b/changelogs/unreleased/Migrate-Bootstrap-dropdown-to-GitLab-UI-GlDropdown-in-app-assets-javascri.yml @@ -0,0 +1,5 @@ +--- +title: Migrate bootstrap dropdown to GlDropdown in app/assets/javascripts/diffs +merge_request: 41451 +author: nuwe1 +type: other diff --git a/spec/features/merge_request/user_sees_versions_spec.rb b/spec/features/merge_request/user_sees_versions_spec.rb index fb616ceae9d..147c58bd2e3 100644 --- a/spec/features/merge_request/user_sees_versions_spec.rb +++ b/spec/features/merge_request/user_sees_versions_spec.rb @@ -73,12 +73,12 @@ RSpec.describe 'Merge request > User sees versions', :js do it 'shows the commit SHAs for every version in the dropdown' do page.within '.mr-version-dropdown' do - find('.btn-default').click + find('.gl-dropdown-toggle').click + end - page.within('.dropdown-content') do - shas = merge_request.merge_request_diffs.map { |diff| Commit.truncate_sha(diff.head_commit_sha) } - shas.each { |sha| expect(page).to have_content(sha) } - end + page.within '.mr-version-dropdown' do + shas = merge_request.merge_request_diffs.map { |diff| Commit.truncate_sha(diff.head_commit_sha) } + shas.each { |sha| expect(page).to have_content(sha) } end end @@ -182,7 +182,7 @@ RSpec.describe 'Merge request > User sees versions', :js do it 'has 0 chages between versions' do page.within '.mr-version-compare-dropdown' do - expect(find('.dropdown-menu-toggle')).to have_content 'version 1' + expect(find('.gl-dropdown-toggle')).to have_content 'version 1' end page.within '.mr-version-dropdown' do @@ -203,7 +203,7 @@ RSpec.describe 'Merge request > User sees versions', :js do it 'sets the compared versions to be the same' do page.within '.mr-version-compare-dropdown' do - expect(find('.dropdown-menu-toggle')).to have_content 'version 2' + expect(find('.gl-dropdown-toggle')).to have_content 'version 2' end page.within '.mr-version-dropdown' do diff --git a/spec/frontend/diffs/components/compare_dropdown_layout_spec.js b/spec/frontend/diffs/components/compare_dropdown_layout_spec.js index a163a43daf1..92e4a2d9c62 100644 --- a/spec/frontend/diffs/components/compare_dropdown_layout_spec.js +++ b/spec/frontend/diffs/components/compare_dropdown_layout_spec.js @@ -1,4 +1,4 @@ -import { shallowMount } from '@vue/test-utils'; +import { mount } from '@vue/test-utils'; import { trimText } from 'helpers/text_helper'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import CompareDropdownLayout from '~/diffs/components/compare_dropdown_layout.vue'; @@ -22,7 +22,7 @@ describe('CompareDropdownLayout', () => { }); const createComponent = (propsData = {}) => { - wrapper = shallowMount(CompareDropdownLayout, { + wrapper = mount(CompareDropdownLayout, { propsData: { ...propsData, }, @@ -35,7 +35,7 @@ describe('CompareDropdownLayout', () => { href: listItem.find('a').attributes('href'), text: trimText(listItem.text()), createdAt: listItem.findAll(TimeAgo).wrappers[0]?.props('time'), - isActive: listItem.find('a.is-active').exists(), + isActive: listItem.classes().includes('is-active'), })); afterEach(() => { @@ -69,7 +69,7 @@ describe('CompareDropdownLayout', () => { expect(findListItemsData()).toEqual([ { href: 'version/1', - text: 'version 1 (base) abcdef1 1 commit', + text: 'version 1 (base) abcdef1 1 commit 2 years ago', createdAt: TEST_CREATED_AT, isActive: true, }, diff --git a/spec/frontend/diffs/components/compare_versions_spec.js b/spec/frontend/diffs/components/compare_versions_spec.js index b3dfc71260c..09e9669c474 100644 --- a/spec/frontend/diffs/components/compare_versions_spec.js +++ b/spec/frontend/diffs/components/compare_versions_spec.js @@ -59,8 +59,8 @@ describe('CompareVersions', () => { expect(sourceDropdown.exists()).toBe(true); expect(targetDropdown.exists()).toBe(true); - expect(sourceDropdown.find('a span').html()).toContain('latest version'); - expect(targetDropdown.find('a span').html()).toContain(targetBranchName); + expect(sourceDropdown.find('a p').html()).toContain('latest version'); + expect(targetDropdown.find('button').html()).toContain(targetBranchName); }); it('should not render comparison dropdowns if no mergeRequestDiffs are specified', () => { |