Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
897a37b8
Commit
897a37b8
authored
5 years ago
by
Winnie Hellmann
Committed by
Kushal Pandya
5 years ago
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Use EpicActionsSplitButton in RelatedItemsTreeHeader
parent
8a6d7e6b
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
137 additions
and
66 deletions
+137
-66
ee/app/assets/javascripts/related_items_tree/components/epic_actions_split_button.vue
...lated_items_tree/components/epic_actions_split_button.vue
+37
-0
ee/app/assets/javascripts/related_items_tree/components/related_items_tree_header.vue
...lated_items_tree/components/related_items_tree_header.vue
+22
-21
ee/app/assets/javascripts/related_items_tree/constants.js
ee/app/assets/javascripts/related_items_tree/constants.js
+0
-16
ee/app/assets/stylesheets/components/related_items_tree.scss
ee/app/assets/stylesheets/components/related_items_tree.scss
+0
-9
ee/spec/javascripts/related_items_tree/components/related_items_tree_header_spec.js
...d_items_tree/components/related_items_tree_header_spec.js
+78
-20
No files found.
ee/app/assets/javascripts/related_items_tree/components/epic_actions_split_button.vue
0 → 100644
View file @
897a37b8
<
script
>
import
SplitButton
from
'
~/vue_shared/components/split_button.vue
'
;
import
{
s__
}
from
'
~/locale
'
;
const
actionItems
=
[
{
title
:
s__
(
'
Epics|Add an epic
'
),
description
:
s__
(
'
Epics|Add an existing epic as a child epic.
'
),
eventName
:
'
showAddEpicForm
'
,
},
{
title
:
s__
(
'
Epics|Create new epic
'
),
description
:
s__
(
'
Epics|Create an epic within this group and add it as a child epic.
'
),
eventName
:
'
showCreateEpicForm
'
,
},
];
export
default
{
actionItems
,
components
:
{
SplitButton
,
},
};
</
script
>
<
template
>
<split-button
:action-items=
"$options.actionItems"
class=
"js-add-epics-button"
menu-class=
"dropdown-menu-large"
right
size=
"sm"
v-on=
"$listeners"
/>
</
template
>
This diff is collapsed.
Click to expand it.
ee/app/assets/javascripts/related_items_tree/components/related_items_tree_header.vue
View file @
897a37b8
...
...
@@ -6,16 +6,15 @@ import { GlButton, GlTooltipDirective } from '@gitlab/ui';
import
{
sprintf
,
s__
}
from
'
~/locale
'
;
import
Icon
from
'
~/vue_shared/components/icon.vue
'
;
import
DroplabDropdownButton
from
'
~/vue_shared/components/droplab_dropdown_button.vue
'
;
import
{
issuableTypesMap
}
from
'
ee/related_issues/constants
'
;
import
{
EpicDropdownActions
}
from
'
../constants
'
;
import
EpicActionsSplitButton
from
'
./epic_actions_split_button.vue
'
;
export
default
{
EpicDropdownActions
,
components
:
{
Icon
,
GlButton
,
DroplabDropdown
Button
,
EpicActionsSplit
Button
,
},
directives
:
{
GlTooltip
:
GlTooltipDirective
,
...
...
@@ -32,15 +31,20 @@ export default {
},
methods
:
{
...
mapActions
([
'
toggleAddItemForm
'
,
'
toggleCreateEpicForm
'
]),
handleActionClick
({
id
,
issuableType
})
{
if
(
id
===
0
)
{
this
.
toggleAddItemForm
({
issuableType
,
toggleState
:
true
,
});
}
else
{
this
.
toggleCreateEpicForm
({
toggleState
:
true
});
}
showAddEpicForm
()
{
this
.
toggleAddItemForm
({
issuableType
:
issuableTypesMap
.
EPIC
,
toggleState
:
true
,
});
},
showAddIssueForm
()
{
this
.
toggleAddItemForm
({
issuableType
:
issuableTypesMap
.
ISSUE
,
toggleState
:
true
,
});
},
showCreateEpicForm
()
{
this
.
toggleCreateEpicForm
({
toggleState
:
true
});
},
},
};
...
...
@@ -67,13 +71,10 @@ export default {
</div>
<div
class=
"d-inline-flex"
>
<template
v-if=
"parentItem.userPermissions.adminEpic"
>
<droplab-dropdown-button
:actions=
"$options.EpicDropdownActions"
:default-action=
"0"
:primary-button-class=
"`$
{headerItems[0].qaClass} js-add-epics-button`"
class="btn-create-epic"
size="sm"
@onActionClick="handleActionClick"
<epic-actions-split-button
:class=
"headerItems[0].qaClass"
@
showAddEpicForm=
"showAddEpicForm"
@
showCreateEpicForm=
"showCreateEpicForm"
/>
<slot
name=
"issueActions"
>
...
...
@@ -81,7 +82,7 @@ export default {
:class=
"headerItems[1].qaClass"
class=
"ml-1 js-add-issues-button"
size=
"sm"
@
click=
"
handleActionClick(
{ id: 0, issuableType: 'issue' })
"
@
click=
"
showAddIssueForm
"
>
{{
__
(
'
Add an issue
'
)
}}
</gl-button
>
</slot>
...
...
This diff is collapsed.
Click to expand it.
ee/app/assets/javascripts/related_items_tree/constants.js
View file @
897a37b8
import
{
s__
}
from
'
~/locale
'
;
import
{
issuableTypesMap
}
from
'
ee/related_issues/constants
'
;
export
const
ChildType
=
{
// eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
...
...
@@ -43,21 +42,6 @@ export const RemoveItemModalProps = {
},
};
export
const
EpicDropdownActions
=
[
{
id
:
0
,
issuableType
:
issuableTypesMap
.
EPIC
,
title
:
s__
(
'
Epics|Add an epic
'
),
description
:
s__
(
'
Epics|Add an existing epic as a child epic.
'
),
},
{
id
:
1
,
issuableType
:
issuableTypesMap
.
EPIC
,
title
:
s__
(
'
Epics|Create new epic
'
),
description
:
s__
(
'
Epics|Create an epic within this group and add it as a child epic.
'
),
},
];
export
const
OVERFLOW_AFTER
=
5
;
export
const
itemRemoveModalId
=
'
item-remove-confirmation
'
;
This diff is collapsed.
Click to expand it.
ee/app/assets/stylesheets/components/related_items_tree.scss
View file @
897a37b8
...
...
@@ -2,15 +2,6 @@
border-top-left-radius
:
0
;
border-top-right-radius
:
0
;
.btn-create-epic
{
.dropdown-menu
{
top
:
100%
;
right
:
0
;
bottom
:
auto
;
left
:
auto
;
}
}
.add-item-form-container
{
border-bottom
:
1px
solid
$border-color
;
}
...
...
This diff is collapsed.
Click to expand it.
ee/spec/javascripts/related_items_tree/components/related_items_tree_header_spec.js
View file @
897a37b8
...
...
@@ -3,10 +3,10 @@ import { GlButton } from '@gitlab/ui';
import
RelatedItemsTreeHeader
from
'
ee/related_items_tree/components/related_items_tree_header.vue
'
;
import
Icon
from
'
~/vue_shared/components/icon.vue
'
;
import
DroplabDropdownButton
from
'
~/vue_shared/components/droplab_dropdown_button.vue
'
;
import
createDefaultStore
from
'
ee/related_items_tree/store
'
;
import
*
as
epicUtils
from
'
ee/related_items_tree/utils/epic_utils
'
;
import
{
issuableTypesMap
}
from
'
ee/related_issues/constants
'
;
import
EpicActionsSplitButton
from
'
ee/related_items_tree/components/epic_actions_split_button.vue
'
;
import
{
mockParentItem
,
mockQueryResponse
}
from
'
../mock_data
'
;
...
...
@@ -37,6 +37,9 @@ describe('RelatedItemsTree', () => {
describe
(
'
RelatedItemsTreeHeader
'
,
()
=>
{
let
wrapper
;
const
findAddIssuesButton
=
()
=>
wrapper
.
find
(
GlButton
);
const
findEpicsSplitButton
=
()
=>
wrapper
.
find
(
EpicActionsSplitButton
);
afterEach
(()
=>
{
wrapper
.
destroy
();
});
...
...
@@ -53,34 +56,89 @@ describe('RelatedItemsTree', () => {
});
});
describe
(
'
methods
'
,
()
=>
{
describe
(
'
epic actions split button
'
,
()
=>
{
beforeEach
(()
=>
{
wrapper
=
createComponent
();
});
describe
(
'
handleActionClick
'
,
()
=>
{
const
issuableType
=
issuableTypesMap
.
Epic
;
it
(
'
calls `toggleAddItemForm` action when provided `id` param as value `0`
'
,
()
=>
{
spyOn
(
wrapper
.
vm
,
'
toggleAddItemForm
'
);
describe
(
'
showAddEpicForm event
'
,
()
=>
{
let
toggleAddItemForm
;
wrapper
.
vm
.
handleActionClick
({
id
:
0
,
issuableType
,
beforeEach
(()
=>
{
toggleAddItemForm
=
jasmine
.
createSpy
();
wrapper
.
vm
.
$store
.
hotUpdate
({
actions
:
{
toggleAddItemForm
,
},
});
});
expect
(
wrapper
.
vm
.
toggleAddItemForm
).
toHaveBeenCalledWith
({
issuableType
,
it
(
'
dispatches toggleAddItemForm action
'
,
()
=>
{
findEpicsSplitButton
().
vm
.
$emit
(
'
showAddEpicForm
'
);
expect
(
toggleAddItemForm
).
toHaveBeenCalled
();
const
payload
=
toggleAddItemForm
.
calls
.
mostRecent
().
args
[
1
];
expect
(
payload
).
toEqual
({
issuableType
:
issuableTypesMap
.
EPIC
,
toggleState
:
true
,
});
});
});
describe
(
'
showCreateEpicForm event
'
,
()
=>
{
let
toggleCreateEpicForm
;
beforeEach
(()
=>
{
toggleCreateEpicForm
=
jasmine
.
createSpy
();
wrapper
.
vm
.
$store
.
hotUpdate
({
actions
:
{
toggleCreateEpicForm
,
},
});
});
it
(
'
dispatches toggleCreateEpicForm action
'
,
()
=>
{
findEpicsSplitButton
().
vm
.
$emit
(
'
showCreateEpicForm
'
);
expect
(
toggleCreateEpicForm
).
toHaveBeenCalled
();
const
payload
=
toggleCreateEpicForm
.
calls
.
mostRecent
().
args
[
1
];
expect
(
payload
).
toEqual
({
toggleState
:
true
});
});
});
});
describe
(
'
add issues button
'
,
()
=>
{
beforeEach
(()
=>
{
wrapper
=
createComponent
();
});
describe
(
'
click event
'
,
()
=>
{
let
toggleAddItemForm
;
beforeEach
(()
=>
{
toggleAddItemForm
=
jasmine
.
createSpy
();
wrapper
.
vm
.
$store
.
hotUpdate
({
actions
:
{
toggleAddItemForm
,
},
});
});
it
(
'
dispatches toggleAddItemForm action
'
,
()
=>
{
findAddIssuesButton
().
vm
.
$emit
(
'
click
'
);
it
(
'
calls `toggleCreateEpicForm` action when provided `id` param value is not `0`
'
,
()
=>
{
spyOn
(
wrapper
.
vm
,
'
toggleCreateEpicForm
'
);
expect
(
toggleAddItemForm
).
toHaveBeenCalled
();
wrapper
.
vm
.
handleActionClick
({
id
:
1
})
;
const
payload
=
toggleAddItemForm
.
calls
.
mostRecent
().
args
[
1
]
;
expect
(
wrapper
.
vm
.
toggleCreateEpicForm
).
toHaveBeenCalledWith
({
toggleState
:
true
});
expect
(
payload
).
toEqual
({
issuableType
:
issuableTypesMap
.
ISSUE
,
toggleState
:
true
,
});
});
});
});
...
...
@@ -115,11 +173,11 @@ describe('RelatedItemsTree', () => {
});
it
(
'
renders `Add an epic` dropdown button
'
,
()
=>
{
expect
(
wrapper
.
find
(
DroplabDropdownButton
).
isVisible
()).
toBe
(
true
);
expect
(
findEpicsSplitButton
(
).
isVisible
()).
toBe
(
true
);
});
it
(
'
renders `Add an issue` dropdown button
'
,
()
=>
{
const
addIssueBtn
=
wrapper
.
find
(
GlButton
);
const
addIssueBtn
=
findAddIssuesButton
(
);
expect
(
addIssueBtn
.
isVisible
()).
toBe
(
true
);
expect
(
addIssueBtn
.
text
()).
toBe
(
'
Add an issue
'
);
...
...
@@ -131,7 +189,7 @@ describe('RelatedItemsTree', () => {
it
(
'
defaults to button
'
,
()
=>
{
wrapper
=
createComponent
();
expect
(
wrapper
.
find
(
GlButton
).
exists
()).
toBe
(
true
);
expect
(
findAddIssuesButton
(
).
exists
()).
toBe
(
true
);
});
it
(
'
uses provided slot content
'
,
()
=>
{
...
...
@@ -145,7 +203,7 @@ describe('RelatedItemsTree', () => {
},
});
expect
(
wrapper
.
find
(
GlButton
).
exists
()).
toBe
(
false
);
expect
(
findAddIssuesButton
(
).
exists
()).
toBe
(
false
);
expect
(
wrapper
.
find
(
issueActions
).
exists
()).
toBe
(
true
);
});
});
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment