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
86700b97
Commit
86700b97
authored
7 years ago
by
Phil Hughes
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Added inline issue edit form actions
[ci skip]
parent
66539563
No related merge requests found
Changes
9
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
367 additions
and
11 deletions
+367
-11
app/assets/javascripts/issue_show/components/app.vue
app/assets/javascripts/issue_show/components/app.vue
+49
-6
app/assets/javascripts/issue_show/components/edit_actions.vue
...assets/javascripts/issue_show/components/edit_actions.vue
+66
-0
app/assets/javascripts/issue_show/index.js
app/assets/javascripts/issue_show/index.js
+6
-1
app/assets/javascripts/issue_show/services/index.js
app/assets/javascripts/issue_show/services/index.js
+17
-2
app/assets/javascripts/issue_show/stores/index.js
app/assets/javascripts/issue_show/stores/index.js
+1
-0
app/controllers/concerns/issuable_actions.rb
app/controllers/concerns/issuable_actions.rb
+10
-1
app/views/projects/issues/show.html.haml
app/views/projects/issues/show.html.haml
+1
-1
spec/javascripts/issue_show/components/app_spec.js
spec/javascripts/issue_show/components/app_spec.js
+106
-0
spec/javascripts/issue_show/components/edit_actions_spec.js
spec/javascripts/issue_show/components/edit_actions_spec.js
+111
-0
No files found.
app/assets/javascripts/issue_show/components/app.vue
View file @
86700b97
<
script
>
/* global Flash */
import
Visibility
from
'
visibilityjs
'
;
import
Poll
from
'
../../lib/utils/poll
'
;
import
eventHub
from
'
../event_hub
'
;
import
Service
from
'
../services/index
'
;
import
Store
from
'
../stores
'
;
import
titleComponent
from
'
./title.vue
'
;
import
descriptionComponent
from
'
./description.vue
'
;
import
editActions
from
'
./edit_actions.vue
'
;
export
default
{
props
:
{
...
...
@@ -34,6 +37,10 @@ export default {
required
:
false
,
default
:
''
,
},
showForm
:
{
type
:
Boolean
,
required
:
true
,
},
},
data
()
{
const
store
=
new
Store
({
...
...
@@ -45,16 +52,43 @@ export default {
return
{
store
,
state
:
store
.
state
,
formState
:
store
.
formState
,
};
},
components
:
{
descriptionComponent
,
titleComponent
,
editActions
,
},
methods
:
{
updateIssuable
()
{
this
.
service
.
updateIssuable
(
this
.
formState
)
.
then
(()
=>
{
eventHub
.
$emit
(
'
close.form
'
);
})
.
catch
(()
=>
{
eventHub
.
$emit
(
'
close.form
'
);
return
new
Flash
(
'
Error updating issue
'
);
});
},
deleteIssuable
()
{
this
.
service
.
deleteIssuable
()
.
then
((
data
)
=>
{
gl
.
utils
.
visitUrl
(
data
.
path
);
// Stop the poll so we don't get 404's with the issue not existing
this
.
poll
.
stop
();
})
.
catch
(()
=>
{
eventHub
.
$emit
(
'
close.form
'
);
return
new
Flash
(
'
Error deleting issue
'
);
});
},
},
created
()
{
const
resour
ce
=
new
Service
(
this
.
endpoint
);
const
poll
=
new
Poll
({
resource
,
this
.
servi
ce
=
new
Service
(
this
.
endpoint
);
this
.
poll
=
new
Poll
({
resource
:
this
.
service
,
method
:
'
getData
'
,
successCallback
:
(
res
)
=>
{
this
.
store
.
updateState
(
res
.
json
());
...
...
@@ -65,16 +99,23 @@ export default {
});
if
(
!
Visibility
.
hidden
())
{
poll
.
makeRequest
();
this
.
poll
.
makeRequest
();
}
Visibility
.
change
(()
=>
{
if
(
!
Visibility
.
hidden
())
{
poll
.
restart
();
this
.
poll
.
restart
();
}
else
{
poll
.
stop
();
this
.
poll
.
stop
();
}
});
eventHub
.
$on
(
'
delete.issuable
'
,
this
.
deleteIssuable
);
eventHub
.
$on
(
'
update.issuable
'
,
this
.
updateIssuable
);
},
beforeDestroy
()
{
eventHub
.
$off
(
'
delete.issuable
'
,
this
.
deleteIssuable
);
eventHub
.
$off
(
'
update.issuable
'
,
this
.
updateIssuable
);
},
};
</
script
>
...
...
@@ -92,5 +133,7 @@ export default {
:description-text=
"state.descriptionText"
:updated-at=
"state.updatedAt"
:task-status=
"state.taskStatus"
/>
<edit-actions
v-if=
"canUpdate && showForm"
/>
</div>
</
template
>
This diff is collapsed.
Click to expand it.
app/assets/javascripts/issue_show/components/edit_actions.vue
0 → 100644
View file @
86700b97
<
script
>
import
eventHub
from
'
../event_hub
'
;
export
default
{
data
()
{
return
{
deleteLoading
:
false
,
updateLoading
:
false
,
};
},
methods
:
{
updateIssuable
()
{
this
.
updateLoading
=
true
;
eventHub
.
$emit
(
'
update.issuable
'
);
},
closeForm
()
{
eventHub
.
$emit
(
'
close.form
'
);
},
deleteIssuable
()
{
// eslint-disable-next-line no-alert
if
(
confirm
(
'
Issue will be removed! Are you sure?
'
))
{
this
.
deleteLoading
=
true
;
eventHub
.
$emit
(
'
delete.issuable
'
);
}
},
},
};
</
script
>
<
template
>
<div
class=
"prepend-top-default append-bottom-default clearfix"
>
<button
class=
"btn btn-save pull-left"
:class=
"
{ disabled: updateLoading }"
type="submit"
:disabled="updateLoading"
@click="updateIssuable">
Save changes
<i
class=
"fa fa-spinner fa-spin"
aria-hidden=
"true"
v-if=
"updateLoading"
>
</i>
</button>
<button
class=
"btn btn-default pull-right"
type=
"button"
@
click=
"closeForm"
>
Cancel
</button>
<button
class=
"btn btn-danger pull-right append-right-default"
:class=
"
{ disabled: deleteLoading }"
type="button"
:disabled="deleteLoading"
@click="deleteIssuable">
Delete
<i
class=
"fa fa-spinner fa-spin"
aria-hidden=
"true"
v-if=
"deleteLoading"
>
</i>
</button>
</div>
</
template
>
This diff is collapsed.
Click to expand it.
app/assets/javascripts/issue_show/index.js
View file @
86700b97
...
...
@@ -39,14 +39,18 @@ document.addEventListener('DOMContentLoaded', () => {
methods
:
{
openForm
()
{
this
.
showForm
=
true
;
console
.
log
(
this
.
showForm
);
},
closeForm
()
{
this
.
showForm
=
false
;
},
},
created
()
{
eventHub
.
$on
(
'
open.form
'
,
this
.
openForm
);
eventHub
.
$on
(
'
close.form
'
,
this
.
closeForm
);
},
beforeDestroy
()
{
eventHub
.
$off
(
'
open.form
'
,
this
.
openForm
);
eventHub
.
$off
(
'
close.form
'
,
this
.
closeForm
);
},
render
(
createElement
)
{
return
createElement
(
'
issuable-app
'
,
{
...
...
@@ -57,6 +61,7 @@ document.addEventListener('DOMContentLoaded', () => {
initialTitle
:
this
.
initialTitle
,
initialDescriptionHtml
:
this
.
initialDescriptionHtml
,
initialDescriptionText
:
this
.
initialDescriptionText
,
showForm
:
this
.
showForm
,
},
});
},
...
...
This diff is collapsed.
Click to expand it.
app/assets/javascripts/issue_show/services/index.js
View file @
86700b97
...
...
@@ -7,10 +7,25 @@ export default class Service {
constructor
(
endpoint
)
{
this
.
endpoint
=
endpoint
;
this
.
resource
=
Vue
.
resource
(
this
.
endpoint
);
this
.
resource
=
Vue
.
resource
(
this
.
endpoint
,
{},
{
rendered_title
:
{
method
:
'
GET
'
,
url
:
`
${
this
.
endpoint
}
/rendered_title`
,
},
});
}
getData
()
{
return
this
.
resource
.
get
();
return
this
.
resource
.
rendered_title
();
}
deleteIssuable
()
{
return
this
.
resource
.
delete
()
.
then
(
res
=>
res
.
json
());
}
updateIssuable
(
data
)
{
return
this
.
resource
.
update
(
data
)
.
then
(
res
=>
res
.
json
());
}
}
This diff is collapsed.
Click to expand it.
app/assets/javascripts/issue_show/stores/index.js
View file @
86700b97
...
...
@@ -12,6 +12,7 @@ export default class Store {
taskStatus
:
''
,
updatedAt
:
''
,
};
this
.
formState
=
{};
}
updateState
(
data
)
{
...
...
This diff is collapsed.
Click to expand it.
app/controllers/concerns/issuable_actions.rb
View file @
86700b97
...
...
@@ -14,7 +14,16 @@ module IssuableActions
name
=
issuable
.
human_class_name
flash
[
:notice
]
=
"The
#{
name
}
was successfully deleted."
redirect_to
polymorphic_path
([
@project
.
namespace
.
becomes
(
Namespace
),
@project
,
issuable
.
class
])
index_path
=
polymorphic_path
([
@project
.
namespace
.
becomes
(
Namespace
),
@project
,
issuable
.
class
])
respond_to
do
|
format
|
format
.
html
{
redirect_to
index_path
}
format
.
json
do
render
json:
{
path:
index_path
}
end
end
end
def
bulk_update
...
...
This diff is collapsed.
Click to expand it.
app/views/projects/issues/show.html.haml
View file @
86700b97
...
...
@@ -51,7 +51,7 @@
.issue-details.issuable-details
.detail-page-description.content-block
#js-issuable-app
{
"data"
=>
{
"endpoint"
=>
rendered_title_
namespace_project_issue_path
(
@project
.
namespace
,
@project
,
@issue
),
#js-issuable-app
{
"data"
=>
{
"endpoint"
=>
namespace_project_issue_path
(
@project
.
namespace
,
@project
,
@issue
),
"can-update"
=>
can?
(
current_user
,
:update_issue
,
@issue
).
to_s
,
"issuable-ref"
=>
@issue
.
to_reference
,
}
}
...
...
This diff is collapsed.
Click to expand it.
spec/javascripts/issue_show/components/app_spec.js
View file @
86700b97
...
...
@@ -2,6 +2,7 @@ import Vue from 'vue';
import
'
~/render_math
'
;
import
'
~/render_gfm
'
;
import
issuableApp
from
'
~/issue_show/components/app.vue
'
;
import
eventHub
from
'
~/issue_show/event_hub
'
;
import
issueShowData
from
'
../mock_data
'
;
const
issueShowInterceptor
=
data
=>
(
request
,
next
)
=>
{
...
...
@@ -22,6 +23,8 @@ describe('Issuable output', () => {
const
IssuableDescriptionComponent
=
Vue
.
extend
(
issuableApp
);
Vue
.
http
.
interceptors
.
push
(
issueShowInterceptor
(
issueShowData
.
initialRequest
));
spyOn
(
eventHub
,
'
$emit
'
);
vm
=
new
IssuableDescriptionComponent
({
propsData
:
{
canUpdate
:
true
,
...
...
@@ -30,6 +33,7 @@ describe('Issuable output', () => {
initialTitle
:
''
,
initialDescriptionHtml
:
''
,
initialDescriptionText
:
''
,
showForm
:
true
,
},
}).
$mount
();
});
...
...
@@ -57,4 +61,106 @@ describe('Issuable output', () => {
});
});
});
describe
(
'
updateIssuable
'
,
()
=>
{
it
(
'
correctly updates issuable data
'
,
(
done
)
=>
{
spyOn
(
vm
.
service
,
'
updateIssuable
'
).
and
.
callFake
(()
=>
new
Promise
((
resolve
)
=>
{
resolve
();
}));
vm
.
updateIssuable
();
setTimeout
(()
=>
{
expect
(
vm
.
service
.
updateIssuable
,
).
toHaveBeenCalledWith
(
vm
.
formState
);
expect
(
eventHub
.
$emit
,
).
toHaveBeenCalledWith
(
'
close.form
'
);
done
();
});
});
it
(
'
closes form on error
'
,
(
done
)
=>
{
spyOn
(
window
,
'
Flash
'
).
and
.
callThrough
();
spyOn
(
vm
.
service
,
'
updateIssuable
'
).
and
.
callFake
(()
=>
new
Promise
((
resolve
,
reject
)
=>
{
reject
();
}));
vm
.
updateIssuable
();
setTimeout
(()
=>
{
expect
(
eventHub
.
$emit
,
).
toHaveBeenCalledWith
(
'
close.form
'
);
expect
(
window
.
Flash
,
).
toHaveBeenCalledWith
(
'
Error updating issue
'
);
done
();
});
});
});
describe
(
'
deleteIssuable
'
,
()
=>
{
it
(
'
changes URL when deleted
'
,
(
done
)
=>
{
spyOn
(
gl
.
utils
,
'
visitUrl
'
);
spyOn
(
vm
.
service
,
'
deleteIssuable
'
).
and
.
callFake
(()
=>
new
Promise
((
resolve
)
=>
{
resolve
({
path
:
'
/test
'
,
});
}));
vm
.
deleteIssuable
();
setTimeout
(()
=>
{
expect
(
gl
.
utils
.
visitUrl
,
).
toHaveBeenCalledWith
(
'
/test
'
);
done
();
});
});
it
(
'
stops polling when deleteing
'
,
(
done
)
=>
{
spyOn
(
gl
.
utils
,
'
visitUrl
'
);
spyOn
(
vm
.
poll
,
'
stop
'
);
spyOn
(
vm
.
service
,
'
deleteIssuable
'
).
and
.
callFake
(()
=>
new
Promise
((
resolve
)
=>
{
resolve
({
path
:
'
/test
'
,
});
}));
vm
.
deleteIssuable
();
setTimeout
(()
=>
{
expect
(
vm
.
poll
.
stop
,
).
toHaveBeenCalledWith
();
done
();
});
});
it
(
'
closes form on error
'
,
(
done
)
=>
{
spyOn
(
window
,
'
Flash
'
).
and
.
callThrough
();
spyOn
(
vm
.
service
,
'
deleteIssuable
'
).
and
.
callFake
(()
=>
new
Promise
((
resolve
,
reject
)
=>
{
reject
();
}));
vm
.
deleteIssuable
();
setTimeout
(()
=>
{
expect
(
eventHub
.
$emit
,
).
toHaveBeenCalledWith
(
'
close.form
'
);
expect
(
window
.
Flash
,
).
toHaveBeenCalledWith
(
'
Error deleting issue
'
);
done
();
});
});
});
});
This diff is collapsed.
Click to expand it.
spec/javascripts/issue_show/components/edit_actions_spec.js
0 → 100644
View file @
86700b97
import
Vue
from
'
vue
'
;
import
editActions
from
'
~/issue_show/components/edit_actions.vue
'
;
import
eventHub
from
'
~/issue_show/event_hub
'
;
describe
(
'
Edit Actions components
'
,
()
=>
{
let
vm
;
beforeEach
((
done
)
=>
{
const
Component
=
Vue
.
extend
(
editActions
);
spyOn
(
eventHub
,
'
$emit
'
);
vm
=
new
Component
().
$mount
();
Vue
.
nextTick
(
done
);
});
it
(
'
renders all buttons as enabled
'
,
()
=>
{
expect
(
vm
.
$el
.
querySelectorAll
(
'
.disabled
'
).
length
,
).
toBe
(
0
);
expect
(
vm
.
$el
.
querySelectorAll
(
'
[disabled]
'
).
length
,
).
toBe
(
0
);
});
describe
(
'
updateIssuable
'
,
()
=>
{
it
(
'
sends update.issauble event when clicking save button
'
,
()
=>
{
vm
.
$el
.
querySelector
(
'
.btn-save
'
).
click
();
expect
(
eventHub
.
$emit
,
).
toHaveBeenCalledWith
(
'
update.issuable
'
);
});
it
(
'
shows loading icon after clicking save button
'
,
(
done
)
=>
{
vm
.
$el
.
querySelector
(
'
.btn-save
'
).
click
();
Vue
.
nextTick
(()
=>
{
expect
(
vm
.
$el
.
querySelector
(
'
.btn-save .fa
'
),
).
not
.
toBeNull
();
done
();
});
});
it
(
'
disabled button after clicking save button
'
,
(
done
)
=>
{
vm
.
$el
.
querySelector
(
'
.btn-save
'
).
click
();
Vue
.
nextTick
(()
=>
{
expect
(
vm
.
$el
.
querySelector
(
'
.btn-save
'
).
getAttribute
(
'
disabled
'
),
).
toBe
(
'
disabled
'
);
done
();
});
});
});
describe
(
'
closeForm
'
,
()
=>
{
it
(
'
emits close.form when clicking cancel
'
,
()
=>
{
vm
.
$el
.
querySelector
(
'
.btn-default
'
).
click
();
expect
(
eventHub
.
$emit
,
).
toHaveBeenCalledWith
(
'
close.form
'
);
});
});
describe
(
'
deleteIssuable
'
,
()
=>
{
it
(
'
sends delete.issuable event when clicking save button
'
,
()
=>
{
spyOn
(
window
,
'
confirm
'
).
and
.
returnValue
(
true
);
vm
.
$el
.
querySelector
(
'
.btn-danger
'
).
click
();
expect
(
eventHub
.
$emit
,
).
toHaveBeenCalledWith
(
'
delete.issuable
'
);
});
it
(
'
shows loading icon after clicking delete button
'
,
(
done
)
=>
{
spyOn
(
window
,
'
confirm
'
).
and
.
returnValue
(
true
);
vm
.
$el
.
querySelector
(
'
.btn-danger
'
).
click
();
Vue
.
nextTick
(()
=>
{
expect
(
vm
.
$el
.
querySelector
(
'
.btn-danger .fa
'
),
).
not
.
toBeNull
();
done
();
});
});
it
(
'
does no actions when confirm is false
'
,
(
done
)
=>
{
spyOn
(
window
,
'
confirm
'
).
and
.
returnValue
(
false
);
vm
.
$el
.
querySelector
(
'
.btn-danger
'
).
click
();
Vue
.
nextTick
(()
=>
{
expect
(
eventHub
.
$emit
,
).
not
.
toHaveBeenCalledWith
(
'
delete.issuable
'
);
expect
(
vm
.
$el
.
querySelector
(
'
.btn-danger .fa
'
),
).
toBeNull
();
done
();
});
});
});
});
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