BigW Consortium Gitlab
Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
G
gitlab-ce
Project
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
Registry
Registry
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
Forest Godfrey
gitlab-ce
Commits
a527c9b9
Commit
a527c9b9
authored
Apr 20, 2018
by
Filipa Lacerda
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Fix disabled state while making a request
Provide props down instead of an event
parent
44a222ad
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
159 additions
and
94 deletions
+159
-94
action_component.vue
...vascripts/pipelines/components/graph/action_component.vue
+19
-6
dropdown_job_component.vue
...pts/pipelines/components/graph/dropdown_job_component.vue
+71
-64
graph_component.vue
...avascripts/pipelines/components/graph/graph_component.vue
+3
-4
job_component.vue
.../javascripts/pipelines/components/graph/job_component.vue
+3
-7
stage_column_component.vue
...pts/pipelines/components/graph/stage_column_component.vue
+4
-3
pipeline_details_bundle.js
app/assets/javascripts/pipelines/pipeline_details_bundle.js
+10
-7
33697-remove-ujs-action-big-graph.yml
changelogs/unreleased/33697-remove-ujs-action-big-graph.yml
+5
-0
action_component_spec.js
spec/javascripts/pipelines/graph/action_component_spec.js
+44
-3
No files found.
app/assets/javascripts/pipelines/components/graph/action_component.vue
View file @
a527c9b9
...
...
@@ -32,26 +32,38 @@ export default {
required
:
true
,
},
buttonDisabled
:
{
requestFinishedFor
:
{
type
:
String
,
required
:
false
,
default
:
null
,
default
:
''
,
},
},
data
()
{
return
{
isDisabled
:
false
,
linkRequested
:
''
,
};
},
computed
:
{
cssClass
()
{
const
actionIconDash
=
dasherize
(
this
.
actionIcon
);
return
`
${
actionIconDash
}
js-icon-
${
actionIconDash
}
`
;
},
isDisabled
()
{
return
this
.
buttonDisabled
===
this
.
link
;
},
watch
:
{
requestFinishedFor
()
{
if
(
this
.
requestFinishedFor
===
this
.
linkRequested
)
{
this
.
isDisabled
=
false
;
}
},
},
methods
:
{
onClickAction
()
{
$
(
this
.
$el
).
tooltip
(
'hide'
);
eventHub
.
$emit
(
'graphAction'
,
this
.
link
);
this
.
linkRequested
=
this
.
link
;
this
.
isDisabled
=
true
;
},
},
};
...
...
@@ -62,7 +74,8 @@ export default {
@
click=
"onClickAction"
v-tooltip
:title=
"tooltipText"
class=
"js-ci-action btn btn-blank btn-transparent ci-action-icon-container ci-action-icon-wrapper"
class=
"js-ci-action btn btn-blank
btn-transparent ci-action-icon-container ci-action-icon-wrapper"
:class=
"cssClass"
data-container=
"body"
:disabled=
"isDisabled"
...
...
app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
View file @
a527c9b9
<
script
>
import
$
from
'jquery'
;
import
JobNameComponent
from
'./job_name_component.vue'
;
import
JobComponent
from
'./job_component.vue'
;
import
tooltip
from
'../../../vue_shared/directives/tooltip'
;
import
$
from
'jquery'
;
import
JobNameComponent
from
'./job_name_component.vue'
;
import
JobComponent
from
'./job_component.vue'
;
import
tooltip
from
'../../../vue_shared/directives/tooltip'
;
/**
* Renders the dropdown for the pipeline graph.
*
* The following object should be provided as `job`:
*
* {
* "id": 4256,
* "name": "test",
* "status": {
* "icon": "icon_status_success",
* "text": "passed",
* "label": "passed",
* "group": "success",
* "details_path": "/root/ci-mock/builds/4256",
* "action": {
* "icon": "retry",
* "title": "Retry",
* "path": "/root/ci-mock/builds/4256/retry",
* "method": "post"
* }
* }
* }
*/
export
default
{
directives
:
{
tooltip
,
},
/**
* Renders the dropdown for the pipeline graph.
*
* The following object should be provided as `job`:
*
* {
* "id": 4256,
* "name": "test",
* "status": {
* "icon": "icon_status_success",
* "text": "passed",
* "label": "passed",
* "group": "success",
* "details_path": "/root/ci-mock/builds/4256",
* "action": {
* "icon": "retry",
* "title": "Retry",
* "path": "/root/ci-mock/builds/4256/retry",
* "method": "post"
* }
* }
* }
*/
export
default
{
directives
:
{
tooltip
,
},
components
:
{
JobComponent
,
JobNameComponent
,
},
components
:
{
JobComponent
,
JobNameComponent
,
},
props
:
{
job
:
{
type
:
Object
,
required
:
true
,
},
props
:
{
job
:
{
type
:
Object
,
required
:
true
,
},
computed
:
{
tooltipText
()
{
return
`
${
this
.
job
.
name
}
-
${
this
.
job
.
status
.
label
}
`
;
},
requestFinishedFor
:
{
type
:
String
,
required
:
false
,
default
:
''
,
},
},
mounted
()
{
this
.
stopDropdownClickPropagation
();
computed
:
{
tooltipText
()
{
return
`
${
this
.
job
.
name
}
-
${
this
.
job
.
status
.
label
}
`
;
},
},
mounted
()
{
this
.
stopDropdownClickPropagation
();
},
methods
:
{
/**
* When the user right clicks or cmd/ctrl + click in the job name or the action icon
* the dropdown should not be closed so we stop propagation of the click event inside the dropdown.
*
* Since this component is rendered multiple times per page we need to guarantee we only
* target the click event of this component.
*/
stopDropdownClickPropagation
()
{
$
(
'.js-grouped-pipeline-dropdown button, .js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item'
,
this
.
$el
,
).
on
(
'click'
,
(
e
)
=>
{
e
.
stopPropagation
();
}
);
}
,
methods
:
{
/**
* When the user right clicks or cmd/ctrl + click in the job name or the action icon
* the dropdown should not be closed so we stop propagation
* of the click event inside the dropdown.
*
* Since this component is rendered multiple times per page we need to guarantee we only
* target the click event of this component.
*/
stopDropdownClickPropagation
()
{
$
(
'.js-grouped-pipeline-dropdown button, .js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item'
,
this
.
$el
).
on
(
'click'
,
e
=>
{
e
.
stopPropagation
(
);
}
);
},
};
},
};
</
script
>
<
template
>
<div
class=
"ci-job-dropdown-container"
>
...
...
@@ -102,6 +108,7 @@
<job-component
:job=
"item"
css-class-job-name=
"mini-pipeline-graph-dropdown-item"
:request-finished-for=
"requestFinishedFor"
/>
</li>
</ul>
...
...
app/assets/javascripts/pipelines/components/graph/graph_component.vue
View file @
a527c9b9
...
...
@@ -7,7 +7,6 @@ export default {
StageColumnComponent
,
LoadingIcon
,
},
props
:
{
isLoading
:
{
type
:
Boolean
,
...
...
@@ -17,10 +16,10 @@ export default {
type
:
Object
,
required
:
true
,
},
actionDisabled
:
{
requestFinishedFor
:
{
type
:
String
,
required
:
false
,
default
:
null
,
default
:
''
,
},
},
...
...
@@ -75,7 +74,7 @@ export default {
:key=
"stage.name"
:stage-connector-class=
"stageConnectorClass(index, stage)"
:is-first-column=
"isFirstColumn(index)"
:
action-disabled=
"actionDisabled
"
:
request-finished-for=
"requestFinishedFor
"
/>
</ul>
</div>
...
...
app/assets/javascripts/pipelines/components/graph/job_component.vue
View file @
a527c9b9
...
...
@@ -33,7 +33,6 @@ export default {
ActionComponent
,
JobNameComponent
,
},
directives
:
{
tooltip
,
},
...
...
@@ -42,20 +41,17 @@ export default {
type
:
Object
,
required
:
true
,
},
cssClassJobName
:
{
type
:
String
,
required
:
false
,
default
:
''
,
},
actionDisabled
:
{
requestFinishedFor
:
{
type
:
String
,
required
:
false
,
default
:
null
,
default
:
''
,
},
},
computed
:
{
status
()
{
return
this
.
job
&&
this
.
job
.
status
?
this
.
job
.
status
:
{};
...
...
@@ -130,7 +126,7 @@ export default {
:tooltip-text=
"status.action.title"
:link=
"status.action.path"
:action-icon=
"status.action.icon"
:
button-disabled=
"actionDisabled
"
:
request-finished-for=
"requestFinishedFor
"
/>
</div>
</
template
>
app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
View file @
a527c9b9
...
...
@@ -29,10 +29,11 @@ export default {
required
:
false
,
default
:
''
,
},
actionDisabled
:
{
requestFinishedFor
:
{
type
:
String
,
required
:
false
,
default
:
null
,
default
:
''
,
},
},
...
...
@@ -74,12 +75,12 @@ export default {
v-if=
"job.size === 1"
:job=
"job"
css-class-job-name=
"build-content"
:action-disabled=
"actionDisabled"
/>
<dropdown-job-component
v-if=
"job.size > 1"
:job=
"job"
:request-finished-for=
"requestFinishedFor"
/>
</li>
...
...
app/assets/javascripts/pipelines/pipeline_details_bundle.js
View file @
a527c9b9
...
...
@@ -25,7 +25,7 @@ export default () => {
data
()
{
return
{
mediator
,
actionDisabled
:
null
,
requestFinishedFor
:
null
,
};
},
created
()
{
...
...
@@ -36,15 +36,17 @@ export default () => {
},
methods
:
{
postAction
(
action
)
{
this
.
actionDisabled
=
action
;
// Click was made, reset this variable
this
.
requestFinishedFor
=
null
;
this
.
mediator
.
service
.
postAction
(
action
)
this
.
mediator
.
service
.
postAction
(
action
)
.
then
(()
=>
{
this
.
mediator
.
refreshPipeline
();
this
.
actionDisabled
=
null
;
this
.
requestFinishedFor
=
action
;
})
.
catch
(()
=>
{
this
.
actionDisabled
=
null
;
this
.
requestFinishedFor
=
action
;
Flash
(
__
(
'An error occurred while making the request.'
));
});
},
...
...
@@ -54,7 +56,7 @@ export default () => {
props
:
{
isLoading
:
this
.
mediator
.
state
.
isLoading
,
pipeline
:
this
.
mediator
.
store
.
state
.
pipeline
,
actionDisabled
:
this
.
actionDisabled
,
requestFinishedFor
:
this
.
requestFinishedFor
,
},
});
},
...
...
@@ -79,7 +81,8 @@ export default () => {
},
methods
:
{
postAction
(
action
)
{
this
.
mediator
.
service
.
postAction
(
action
.
path
)
this
.
mediator
.
service
.
postAction
(
action
.
path
)
.
then
(()
=>
this
.
mediator
.
refreshPipeline
())
.
catch
(()
=>
Flash
(
__
(
'An error occurred while making the request.'
)));
},
...
...
changelogs/unreleased/33697-remove-ujs-action-big-graph.yml
0 → 100644
View file @
a527c9b9
---
title
:
Prevent pipeline actions in dropdown to redirct to a new page
merge_request
:
author
:
type
:
fixed
spec/javascripts/pipelines/graph/action_component_spec.js
View file @
a527c9b9
...
...
@@ -6,7 +6,7 @@ import mountComponent from '../../helpers/vue_mount_component_helper';
describe
(
'pipeline graph action component'
,
()
=>
{
let
component
;
beforeEach
(
(
done
)
=>
{
beforeEach
(
done
=>
{
const
ActionComponent
=
Vue
.
extend
(
actionComponent
);
component
=
mountComponent
(
ActionComponent
,
{
tooltipText
:
'bar'
,
...
...
@@ -22,7 +22,7 @@ describe('pipeline graph action component', () => {
});
it
(
'should emit an event with the provided link'
,
()
=>
{
eventHub
.
$on
(
'graphAction'
,
(
link
)
=>
{
eventHub
.
$on
(
'graphAction'
,
link
=>
{
expect
(
link
).
toEqual
(
'foo'
);
});
});
...
...
@@ -31,7 +31,7 @@ describe('pipeline graph action component', () => {
expect
(
component
.
$el
.
getAttribute
(
'data-original-title'
)).
toEqual
(
'bar'
);
});
it
(
'should update bootstrap tooltip when title changes'
,
(
done
)
=>
{
it
(
'should update bootstrap tooltip when title changes'
,
done
=>
{
component
.
tooltipText
=
'changed'
;
setTimeout
(()
=>
{
...
...
@@ -44,4 +44,45 @@ describe('pipeline graph action component', () => {
expect
(
component
.
$el
.
querySelector
(
'.ci-action-icon-wrapper'
)).
toBeDefined
();
expect
(
component
.
$el
.
querySelector
(
'svg'
)).
toBeDefined
();
});
it
(
'disables the button when clicked'
,
done
=>
{
component
.
$el
.
click
();
component
.
$nextTick
(()
=>
{
expect
(
component
.
$el
.
getAttribute
(
'disabled'
)).
toEqual
(
'disabled'
);
done
();
});
});
it
(
're-enabled the button when `requestFinishedFor` matches `linkRequested`'
,
done
=>
{
component
.
$el
.
click
();
component
.
$nextTick
()
.
then
(()
=>
{
expect
(
component
.
$el
.
getAttribute
(
'disabled'
)).
toEqual
(
'disabled'
);
component
.
requestFinishedFor
=
'foo'
;
})
.
then
(()
=>
{
expect
(
component
.
$el
.
getAttribute
(
'disabled'
)).
toBeNull
();
})
.
then
(
done
)
.
catch
(
done
.
fail
);
});
it
(
'does not re-enable the button when `requestFinishedFor` does not matches `linkRequested`'
,
done
=>
{
component
.
$el
.
click
();
component
.
$nextTick
()
.
then
(()
=>
{
expect
(
component
.
$el
.
getAttribute
(
'disabled'
)).
toEqual
(
'disabled'
);
component
.
requestFinishedFor
=
'bar'
;
})
.
then
(()
=>
{
expect
(
component
.
$el
.
getAttribute
(
'disabled'
)).
toEqual
(
'disabled'
);
})
.
then
(
done
)
.
catch
(
done
.
fail
);
});
});
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