Commit d41c3555 authored by Ezekiel Kigbo's avatar Ezekiel Kigbo

Merge branch 'eread/migrate-env-dashboard-dropdown' into 'master'

Migrate environment dashboard dropdown

See merge request gitlab-org/gitlab!48318
parents 93374331 a818a654
<script>
import { GlTooltipDirective, GlLink, GlButton, GlIcon } from '@gitlab/ui';
import { GlDropdown, GlDropdownItem, GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui';
import { s__ } from '~/locale';
import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
export default {
components: {
GlDropdown,
GlDropdownItem,
GlIcon,
ProjectAvatar,
GlLink,
GlButton,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -32,9 +33,9 @@ export default {
<template>
<div
class="d-flex align-items-center page-title-holder text-secondary justify-content-between pb-2 mb-3"
class="gl-display-flex gl-align-items-center page-title-holder text-secondary gl-justify-content-space-between pb-2 mb-3"
>
<div class="d-flex align-items-center">
<div class="gl-display-flex gl-align-items-center">
<project-avatar :project="project.namespace" :size="20" class="flex-shrink-0" />
<gl-link class="js-namespace-link text-secondary" :href="`/${project.namespace.full_path}`">
<span class="js-namespace gl-mr-3"> {{ project.namespace.name }} </span>
......@@ -45,23 +46,23 @@ export default {
<span class="js-name gl-mr-3"> {{ project.name }} </span>
</gl-link>
</div>
<div class="dropdown js-more-actions">
<button
v-gl-tooltip
class="js-more-actions-toggle d-flex align-items-center ml-2 btn btn-transparent"
type="button"
data-toggle="dropdown"
:title="$options.moreActionsText"
<div class="gl-display-flex js-more-actions">
<gl-dropdown
toggle-class="js-more-actions-toggle gl-display-flex gl-align-items-center gl-px-3! gl-bg-transparent gl-shadow-none!"
right
>
<gl-icon name="ellipsis_v" class="text-secondary" />
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<gl-button class="js-remove-button" variant="link" @click="onRemove()">
<span class="text-danger"> {{ $options.removeProjectText }} </span>
</gl-button>
</li>
</ul>
<template #button-content>
<gl-icon
v-gl-tooltip
:title="$options.moreActionsText"
name="ellipsis_v"
class="text-secondary"
/>
</template>
<gl-dropdown-item class="js-remove-button" variant="link" @click="onRemove()">
<span class="text-danger"> {{ $options.removeProjectText }} </span>
</gl-dropdown-item>
</gl-dropdown>
</div>
</div>
</template>
......@@ -2,10 +2,10 @@
exports[`Project Header matches the snapshot 1`] = `
<div
class="d-flex align-items-center page-title-holder text-secondary justify-content-between pb-2 mb-3"
class="gl-display-flex gl-align-items-center page-title-holder text-secondary gl-justify-content-space-between pb-2 mb-3"
>
<div
class="d-flex align-items-center"
class="gl-display-flex gl-align-items-center"
>
<project-avatar-stub
class="flex-shrink-0"
......@@ -48,41 +48,35 @@ exports[`Project Header matches the snapshot 1`] = `
</div>
<div
class="dropdown js-more-actions"
class="gl-display-flex js-more-actions"
>
<button
class="js-more-actions-toggle d-flex align-items-center ml-2 btn btn-transparent"
data-toggle="dropdown"
title="More actions"
type="button"
<gl-dropdown-stub
category="primary"
headertext=""
right=""
size="medium"
text=""
toggleclass="js-more-actions-toggle gl-display-flex gl-align-items-center gl-px-3! gl-bg-transparent gl-shadow-none!"
variant="default"
>
<gl-icon-stub
class="text-secondary"
name="ellipsis_v"
size="16"
/>
</button>
<ul
class="dropdown-menu dropdown-menu-right"
>
<li>
<gl-button-stub
buttontextclasses=""
category="primary"
class="js-remove-button"
icon=""
size="medium"
variant="link"
<gl-dropdown-item-stub
avatarurl=""
class="js-remove-button"
iconcolor=""
iconname=""
iconrightarialabel=""
iconrightname=""
secondarytext=""
variant="link"
>
<span
class="text-danger"
>
<span
class="text-danger"
>
Remove
</span>
</gl-button-stub>
</li>
</ul>
Remove
</span>
</gl-dropdown-item-stub>
</gl-dropdown-stub>
</div>
</div>
`;
import { GlButton } from '@gitlab/ui';
import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import component from 'ee/environments_dashboard/components/dashboard/project_header.vue';
import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
......@@ -66,21 +66,18 @@ describe('Project Header', () => {
describe('more actions', () => {
it('should list "remove" as an action', () => {
const removeLink = wrapper
.find('.dropdown-menu')
.findAll('li')
.find(GlDropdown)
.findAll(GlDropdownItem)
.filter(w => w.text() === 'Remove');
expect(removeLink.exists()).toBe(true);
});
it('should emit a "remove" event when "remove" is clicked', () => {
const removeLink = wrapper
.find('.dropdown-menu')
.findAll('li')
.find(GlDropdown)
.findAll(GlDropdownItem)
.filter(w => w.text() === 'Remove');
removeLink
.at(0)
.find(GlButton)
.vm.$emit('click');
removeLink.at(0).vm.$emit('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted('remove')).toContainEqual([propsData.project.remove_path]);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment