Skip to content

G
gitlab-ce
Commit bcb7d885 authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

Merge branch '31415-responsive-pipelines-table-2' into 'master' 

Create responsive mobile view for pipelines table

Closes #31415

See merge request !12171
parents 2b34f3f2 1d448a66
Hide whitespace changes
Inline Side-by-side
Showing with 332 additions and 418 deletions
app/assets/javascripts/environments/components/environment_item.vue
View file @ bcb7d885
...@@ -535,10 +535,10 @@ export default { ...@@ -535,10 +535,10 @@ export default {
</span> </span>
</div> </div>
<div class="table-section section-30 environments-actions table-button-footer" role="gridcell"> <div class="table-section section-30 table-button-footer" role="gridcell">
<div <div
v-if="!model.isFolder" v-if="!model.isFolder"
class="btn-group environment-action-buttons" class="btn-group table-action-buttons"
role="group"> role="group">
<actions-component <actions-component
......
app/assets/javascripts/pipelines/components/pipeline_url.vue
View file @ bcb7d885
...@@ -23,7 +23,7 @@ export default { ...@@ -23,7 +23,7 @@ export default {
}; };
</script> </script>
<template> <template>
<td> <div class="table-section section-15 hidden-xs hidden-sm">
<a <a
:href="pipeline.path" :href="pipeline.path"
class="js-pipeline-url-link"> class="js-pipeline-url-link">
...@@ -42,24 +42,26 @@ export default { ...@@ -42,24 +42,26 @@ export default {
class="js-pipeline-url-api api"> class="js-pipeline-url-api api">
API API
</span> </span>
<span <div class="label-container">
v-if="pipeline.flags.latest" <span
class="js-pipeline-url-lastest label label-success" v-if="pipeline.flags.latest"
title="Latest pipeline for this branch" class="js-pipeline-url-latest label label-success"
ref="tooltip"> title="Latest pipeline for this branch"
latest ref="tooltip">
</span> latest
<span </span>
v-if="pipeline.flags.yaml_errors" <span
class="js-pipeline-url-yaml label label-danger" v-if="pipeline.flags.yaml_errors"
:title="pipeline.yaml_errors" class="js-pipeline-url-yaml label label-danger"
ref="tooltip"> :title="pipeline.yaml_errors"
yaml invalid ref="tooltip">
</span> yaml invalid
<span </span>
v-if="pipeline.flags.stuck" <span
class="js-pipeline-url-stuck label label-warning"> v-if="pipeline.flags.stuck"
stuck class="js-pipeline-url-stuck label label-warning">
</span> stuck
</td> </span>
</div>
</div>
</template> </template>
app/assets/javascripts/pipelines/components/pipelines_actions.vue
View file @ bcb7d885
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
<div class="btn-group"> <div class="btn-group">
<button <button
type="button" type="button"
class="dropdown-toggle btn btn-default has-tooltip js-pipeline-dropdown-manual-actions" class="dropdown-new btn btn-default has-tooltip js-pipeline-dropdown-manual-actions"
title="Manual job" title="Manual job"
data-toggle="dropdown" data-toggle="dropdown"
data-placement="top" data-placement="top"
......
app/assets/javascripts/pipelines/components/time_ago.vue
View file @ bcb7d885
...@@ -55,31 +55,39 @@ ...@@ -55,31 +55,39 @@
}; };
</script> </script>
<template> <template>
<td class="pipelines-time-ago"> <div class="table-section section-15 pipelines-time-ago">
<p <div
class="duration" class="table-mobile-header"
v-if="hasDuration"> role="rowheader">
<span v-html="iconTimerSvg"> Duration
</span> </div>
{{durationFormated}} <div class="table-mobile-content">
</p> <p
class="duration"
v-if="hasDuration">
<span
v-html="iconTimerSvg">
</span>
{{durationFormated}}
</p>
<p <p
class="finished-at" class="finished-at hidden-xs hidden-sm"
v-if="hasFinishedTime"> v-if="hasFinishedTime">
<i <i
class="fa fa-calendar" class="fa fa-calendar"
aria-hidden="true"> aria-hidden="true">
</i> </i>
<time <time
ref="tooltip" ref="tooltip"
data-placement="top" data-placement="top"
data-container="body" data-container="body"
:title="tooltipTitle(finishedTime)"> :title="tooltipTitle(finishedTime)">
{{timeFormated(finishedTime)}} {{timeFormated(finishedTime)}}
</time> </time>
</p> </p>
</td> </div>
</div>
</script> </script>
app/assets/javascripts/vue_shared/components/commit.vue
View file @ bcb7d885
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
</script> </script>
<template> <template>
<div class="branch-commit"> <div class="branch-commit">
<div v-if="hasCommitRef" class="icon-container"> <div v-if="hasCommitRef" class="icon-container hidden-xs">
<i <i
v-if="tag" v-if="tag"
class="fa fa-tag" class="fa fa-tag"
...@@ -125,7 +125,7 @@ ...@@ -125,7 +125,7 @@
<a <a
v-if="hasCommitRef" v-if="hasCommitRef"
class="ref-name" class="ref-name hidden-xs"
:href="commitRef.ref_url"> :href="commitRef.ref_url">
{{commitRef.name}} {{commitRef.name}}
</a> </a>
......
app/assets/javascripts/vue_shared/components/pipelines_table.vue
View file @ bcb7d885
...@@ -28,28 +28,37 @@ ...@@ -28,28 +28,37 @@
}; };
</script> </script>
<template> <template>
<table class="table ci-table"> <div class="ci-table">
<thead> <div
<tr> class="gl-responsive-table-row table-row-header"
<th class="js-pipeline-status pipeline-status">Status</th> role="row">
<th class="js-pipeline-info pipeline-info">Pipeline</th> <div
<th class="js-pipeline-commit pipeline-commit">Commit</th> class="table-section section-10 js-pipeline-status pipeline-status"
<th class="js-pipeline-stages pipeline-stages">Stages</th> role="rowheader">
<th class="js-pipeline-date pipeline-date"></th> Status
<th class="js-pipeline-actions pipeline-actions"></th> </div>
</tr> <div
</thead> class="table-section section-15 js-pipeline-info pipeline-info"
<tbody> role="rowheader">
<template Pipeline
v-for="model in pipelines" </div>
:model="model"> <div
<tr class="table-section section-25 js-pipeline-commit pipeline-commit"
is="pipelines-table-row-component" role="rowheader">
:pipeline="model" Commit
:service="service" </div>
:update-graph-dropdown="updateGraphDropdown" <div
/> class="table-section section-15 js-pipeline-stages pipeline-stages"
</template> role="rowheader">
</tbody> Stages
</table> </div>
</div>
<pipelines-table-row-component
v-for="model in pipelines"
:key="model.id"
:pipeline="model"
:service="service"
:update-graph-dropdown="updateGraphDropdown"
/>
</div>
</template> </template>
app/assets/javascripts/vue_shared/components/pipelines_table_row.vue
View file @ bcb7d885
...@@ -200,47 +200,74 @@ export default { ...@@ -200,47 +200,74 @@ export default {
} }
return {}; return {};
}, },
displayPipelineActions() {
return this.pipeline.flags.retryable ||
this.pipeline.flags.cancelable ||
this.pipeline.details.manual_actions.length ||
this.pipeline.details.artifacts.length;
},
}, },
}; };
</script> </script>
<template> <template>
<tr class="commit"> <div class="commit gl-responsive-table-row">
<td class="commit-link"> <div class="table-section section-10 commit-link">
<ci-badge :status="pipelineStatus" /> <div class="table-mobile-header"
</td> role="rowheader">
Status
</div>
<div class="table-mobile-content">
<ci-badge :status="pipelineStatus"/>
</div>
</div>
<pipeline-url :pipeline="pipeline" /> <pipeline-url :pipeline="pipeline" />
<td> <div class="table-section section-25">
<commit-component <div
:tag="commitTag" class="table-mobile-header"
:commit-ref="commitRef" role="rowheader">
:commit-url="commitUrl" Commit
:short-sha="commitShortSha" </div>
:title="commitTitle" <div class="table-mobile-content">
:author="commitAuthor" <commit-component
/> :tag="commitTag"
</td> :commit-ref="commitRef"
:commit-url="commitUrl"
<td class="stage-cell"> :short-sha="commitShortSha"
<div class="stage-container dropdown js-mini-pipeline-graph" :title="commitTitle"
v-if="pipeline.details.stages.length > 0" :author="commitAuthor"/>
v-for="stage in pipeline.details.stages"> </div>
</div>
<pipeline-stage <div class="table-section section-wrap section-15 stage-cell">
:stage="stage" <div
:update-dropdown="updateGraphDropdown" class="table-mobile-header"
/> role="rowheader">
Stages
</div>
<div class="table-mobile-content">
<div class="stage-container dropdown js-mini-pipeline-graph"
v-if="pipeline.details.stages.length > 0"
v-for="stage in pipeline.details.stages">
<pipeline-stage
:stage="stage"
:update-dropdown="updateGraphDropdown"
/>
</div>
</div> </div>
</td> </div>
<pipelines-timeago <pipelines-timeago
:duration="pipelineDuration" :duration="pipelineDuration"
:finished-time="pipelineFinishedAt" :finished-time="pipelineFinishedAt"
/> />
<td class="pipeline-actions"> <div
<div class="pull-right btn-group"> v-if="displayPipelineActions"
class="table-section section-20 table-button-footer pipeline-actions">
<div class="btn-group table-action-buttons">
<pipelines-actions-component <pipelines-actions-component
v-if="pipeline.details.manual_actions.length" v-if="pipeline.details.manual_actions.length"
:actions="pipeline.details.manual_actions" :actions="pipeline.details.manual_actions"
...@@ -249,6 +276,7 @@ export default { ...@@ -249,6 +276,7 @@ export default {
<pipelines-artifacts-component <pipelines-artifacts-component
v-if="pipeline.details.artifacts.length" v-if="pipeline.details.artifacts.length"
class="hidden-xs hidden-sm"
:artifacts="pipeline.details.artifacts" :artifacts="pipeline.details.artifacts"
/> />
...@@ -271,6 +299,6 @@ export default { ...@@ -271,6 +299,6 @@ export default {
confirm-action-message="Are you sure you want to cancel this pipeline?" confirm-action-message="Are you sure you want to cancel this pipeline?"
/> />
</div> </div>
</td> </div>
</tr> </div>
</template> </template>
app/assets/stylesheets/framework/page-header.scss
View file @ bcb7d885
...@@ -59,4 +59,8 @@ ...@@ -59,4 +59,8 @@
margin: 0 2px 0 3px; margin: 0 2px 0 3px;
} }
} }
.ci-status {
margin-right: 10px;
}
} }
app/assets/stylesheets/framework/responsive-tables.scss
View file @ bcb7d885
...@@ -36,13 +36,58 @@ ...@@ -36,13 +36,58 @@
align-self: stretch; align-self: stretch;
padding: 10px; padding: 10px;
align-items: center; align-items: center;
height: 62px; min-height: 62px;
&:not(:first-of-type) { &:not(:first-of-type) {
border-top: 1px solid $white-normal; border-top: 1px solid $white-normal;
} }
} }
} }
&.section-wrap {
white-space: normal;
@media (max-width: $screen-sm-max) {
flex-wrap: wrap;
}
}
}
}
.table-button-footer {
@media (min-width: $screen-md-min) {
text-align: right;
}
@media (max-width: $screen-sm-max) {
background-color: $gray-normal;
align-self: stretch;
border-top: 1px solid $border-color;
.table-action-buttons {
padding: 10px 5px;
display: flex;
.btn {
border-radius: 3px;
}
> .btn-group,
> .external-url,
> .btn {
flex: 1 1 28px;
margin: 0 5px;
}
.dropdown-new {
width: 100%;
}
.dropdown-menu {
min-width: initial;
}
}
} }
} }
...@@ -56,6 +101,7 @@ ...@@ -56,6 +101,7 @@
.table-mobile-header { .table-mobile-header {
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
text-align: left;
@include flex-max-width(40); @include flex-max-width(40);
@media (min-width: $screen-md-min) { @media (min-width: $screen-md-min) {
......
app/assets/stylesheets/pages/environments.scss
View file @ bcb7d885
...@@ -124,43 +124,6 @@ ...@@ -124,43 +124,6 @@
} }
.gl-responsive-table-row { .gl-responsive-table-row {
.environments-actions {
@media (min-width: $screen-md-min) {
text-align: right;
}
@media (max-width: $screen-sm-max) {
background-color: $gray-normal;
align-self: stretch;
border-top: 1px solid $border-color;
.environment-action-buttons {
padding: 10px 5px;
display: flex;
.btn {
border-radius: 3px;
}
> .btn-group,
> .external-url,
> .btn {
flex: 1;
flex-basis: 28px;
margin: 0 5px;
}
.dropdown-new {
width: 100%;
}
.dropdown-menu {
min-width: initial;
}
}
}
}
.branch-commit { .branch-commit {
max-width: 100%; max-width: 100%;
} }
......
app/assets/stylesheets/pages/pipelines.scss
View file @ bcb7d885
...@@ -10,17 +10,13 @@ ...@@ -10,17 +10,13 @@
.table-holder { .table-holder {
width: 100%; width: 100%;
@media (max-width: $screen-sm-max) {
overflow: auto;
}
} }
.commit-title { .commit-title {
margin: 0; margin: 0;
} }
.table.ci-table { .ci-table {
.label { .label {
margin-bottom: 3px; margin-bottom: 3px;
...@@ -30,11 +26,6 @@ ...@@ -30,11 +26,6 @@
color: $black; color: $black;
} }
.stage-cell {
min-width: 130px; // Guarantees we show at least 4 stages in line
width: 20%;
}
.pipelines-time-ago { .pipelines-time-ago {
text-align: right; text-align: right;
} }
...@@ -108,39 +99,7 @@ ...@@ -108,39 +99,7 @@
} }
} }
.table.ci-table { .ci-table {
&.builds-page tbody tr {
height: 71px;
}
tr {
th {
padding: 16px 8px;
border: none;
}
td {
padding: 10px 8px;
}
td.environments-actions {
padding-right: 0;
}
td.stage-cell {
padding: 10px 0;
}
.commit-link {
padding: 9px 8px 10px 2px;
}
}
tbody {
border-top-width: 1px;
}
.build.retried { .build.retried {
background-color: $gray-lightest; background-color: $gray-lightest;
} }
...@@ -194,13 +153,6 @@ ...@@ -194,13 +153,6 @@
color: $gl-link-color; color: $gl-link-color;
} }
.commit-title {
max-width: 225px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.label { .label {
margin-right: 4px; margin-right: 4px;
} }
...@@ -253,11 +205,7 @@ ...@@ -253,11 +205,7 @@
} }
.stage-cell { .stage-cell {
font-size: 0; .mini-pipeline-graph-dropdown-toggle svg {
padding: 0 4px;
> .stage-container > div > button > span > svg,
> .stage-container > button > svg {
height: 22px; height: 22px;
width: 22px; width: 22px;
position: absolute; position: absolute;
...@@ -631,6 +579,23 @@ ...@@ -631,6 +579,23 @@
font-weight: normal; font-weight: normal;
} }
@mixin mini-pipeline-graph-color($color-light, $color-main, $color-dark) {
border-color: $color-main;
color: $color-main;
&:hover,
&:focus,
&:active {
background-color: $color-light;
border-color: $color-dark;
color: $color-dark;
svg {
fill: $color-dark;
}
}
}
// Dropdown button in mini pipeline graph // Dropdown button in mini pipeline graph
.mini-pipeline-graph-dropdown-toggle { .mini-pipeline-graph-dropdown-toggle {
border-radius: 100px; border-radius: 100px;
...@@ -670,100 +635,32 @@ ...@@ -670,100 +635,32 @@
// Dropdown button animation in mini pipeline graph // Dropdown button animation in mini pipeline graph
&.ci-status-icon-success { &.ci-status-icon-success {
border-color: $green-500; @include mini-pipeline-graph-color($green-50, $green-500, $green-600);
color: $green-500;
&:hover,
&:focus,
&:active {
background-color: $green-50;
border-color: $green-600;
color: $green-600;
svg {
fill: $green-600;
}
}
} }
&.ci-status-icon-failed { &.ci-status-icon-failed {
border-color: $red-500; @include mini-pipeline-graph-color($red-50, $red-500, $red-600);
color: $red-500;
&:hover,
&:focus,
&:active {
background-color: $red-50;
border-color: $red-600;
color: $red-600;
svg {
fill: $red-600;
}
}
} }
&.ci-status-icon-pending, &.ci-status-icon-pending,
&.ci-status-icon-success_with_warnings { &.ci-status-icon-success_with_warnings {
border-color: $orange-500; @include mini-pipeline-graph-color($orange-50, $orange-500, $orange-600);
color: $orange-500;
&:hover,
&:focus,
&:active {
background-color: $orange-50;
border-color: $orange-600;
color: $orange-600;
svg {
fill: $orange-600;
}
}
} }
&.ci-status-icon-running { &.ci-status-icon-running {
border-color: $blue-400; @include mini-pipeline-graph-color($blue-50, $blue-400, $blue-600);
color: $blue-400;
&:hover,
&:focus,
&:active {
background-color: $blue-50;
border-color: $blue-600;
color: $blue-600;
svg {
fill: $blue-600;
}
}
} }
&.ci-status-icon-canceled, &.ci-status-icon-canceled,
&.ci-status-icon-disabled, &.ci-status-icon-disabled,
&.ci-status-icon-not-found, &.ci-status-icon-not-found,
&.ci-status-icon-manual { &.ci-status-icon-manual {
border-color: $gl-text-color; @include mini-pipeline-graph-color(rgba($gl-text-color, 0.1), $gl-text-color, $gl-text-color);
color: $gl-text-color;
&:hover,
&:focus,
&:active {
background-color: rgba($gl-text-color, 0.1);
border-color: $gl-text-color;
}
} }
&.ci-status-icon-created, &.ci-status-icon-created,
&.ci-status-icon-skipped { &.ci-status-icon-skipped {
border-color: $gray-darkest; @include mini-pipeline-graph-color(rgba($gray-darkest, 0.1), $gray-darkest, $gray-darkest);
color: $gray-darkest;
&:hover,
&:focus,
&:active {
background-color: rgba($gray-darkest, 0.1);
border-color: $gray-darkest;
}
} }
} }
...@@ -842,6 +739,10 @@ ...@@ -842,6 +739,10 @@
top: 1px; top: 1px;
vertical-align: text-bottom; vertical-align: text-bottom;
position: relative; position: relative;
@media (max-width: $screen-xs-max) {
max-width: 60%;
}
} }
// status icon on the left // status icon on the left
...@@ -932,6 +833,11 @@ ...@@ -932,6 +833,11 @@
left: 50%; left: 50%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
border-width: 0 5px 6px; border-width: 0 5px 6px;
@media (max-width: $screen-sm-max) {
left: 100%;
margin-left: -12px;
}
} }
&::before { &::before {
...@@ -949,9 +855,15 @@ ...@@ -949,9 +855,15 @@
* Center dropdown menu in mini graph * Center dropdown menu in mini graph
*/ */
.mini-pipeline-graph-dropdown-menu.dropdown-menu { .mini-pipeline-graph-dropdown-menu.dropdown-menu {
right: auto; transform: translate(-80%, 0);
left: 50%; min-width: 150px;
transform: translate(-50%, 0);
@media(min-width: $screen-md-min) {
transform: translate(-50%, 0);
right: auto;
left: 50%;
min-width: 240px;
}
} }
/** /**
* Terminal * Terminal
......
app/assets/stylesheets/pages/status.scss
View file @ bcb7d885
.container-fluid { @mixin status-color($color-light, $color-main, $color-dark) {
.ci-status { color: $color-main;
padding: 2px 7px 4px; border-color: $color-main;
margin-right: 10px;
border: 1px solid $gray-darker;
white-space: nowrap;
border-radius: 4px;
&:hover,
&:focus {
text-decoration: none;
}
svg {
height: 13px;
width: 13px;
position: relative;
top: 2px;
overflow: visible;
}
&.ci-failed { &:not(span):hover {
color: $red-500; background-color: $color-light;
border-color: $red-500; color: $color-dark;
border-color: $color-dark;
&:not(span):hover { svg {
background-color: $red-50; fill: $color-dark;
color: $red-600;
border-color: $red-600;
svg {
fill: $red-600;
}
}
svg {
fill: $red-500;
}
} }
}
&.ci-success { svg {
color: $green-600; fill: $color-main;
border-color: $green-500; }
}
&:not(span):hover { .ci-status {
background-color: $green-50; padding: 2px 7px 4px;
color: $green-700; border: 1px solid $gray-darker;
border-color: $green-600; white-space: nowrap;
border-radius: 4px;
svg { &:hover,
fill: $green-600; &:focus {
} text-decoration: none;
} }
svg { svg {
fill: $green-500; height: 13px;
} width: 13px;
} position: relative;
top: 2px;
overflow: visible;
}
&.ci-canceled, &.ci-failed {
&.ci-disabled { @include status-color($red-50, $red-500, $red-600);
color: $gl-text-color; }
border-color: $gl-text-color;
&:not(span):hover { &.ci-success {
background-color: rgba($gl-text-color, .07); @include status-color($green-50, $green-500, $green-700);
} }
svg { &.ci-canceled,
fill: $gl-text-color; &.ci-disabled,
} &.ci-manual {
} color: $gl-text-color;
border-color: $gl-text-color;
&.ci-pending, &:not(span):hover {
&.ci-success_with_warnings, background-color: rgba($gl-text-color, .07);
&.ci-failed_with_warnings {
color: $orange-600;
border-color: $orange-500;
&:not(span):hover {
background-color: $orange-50;
color: $orange-700;
border-color: $orange-600;
svg {
fill: $orange-600;
}
}
svg {
fill: $orange-500;
}
} }
}
&.ci-info, &.ci-pending,
&.ci-running { &.ci-failed_with_warnings,
color: $blue-500; &.ci-success_with_warnings {
border-color: $blue-500; @include status-color($orange-50, $orange-500, $orange-700);
}
&:not(span):hover {
background-color: $blue-50;
color: $blue-600;
border-color: $blue-600;
svg {
fill: $blue-600;
}
}
svg {
fill: $blue-500;
}
}
&.ci-created, &.ci-info,
&.ci-skipped { &.ci-running {
color: $gl-text-color-secondary; @include status-color($blue-50, $blue-500, $blue-600);
border-color: $gl-text-color-secondary; }
&:not(span):hover { &.ci-created,
background-color: rgba($gl-text-color-secondary, .07); &.ci-skipped {
} color: $gl-text-color-secondary;
border-color: $gl-text-color-secondary;
svg { &:not(span):hover {
fill: $gl-text-color-secondary; background-color: rgba($gl-text-color-secondary, .07);
}
} }
&.ci-manual { svg {
color: $gl-text-color; fill: $gl-text-color-secondary;
border-color: $gl-text-color;
&:not(span):hover {
background-color: rgba($gl-text-color, .07);
}
svg {
fill: $gl-text-color;
}
} }
} }
} }
......
app/views/projects/deployments/_deployment.html.haml
View file @ bcb7d885
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
.table-mobile-header{ role: 'rowheader' } Created .table-mobile-header{ role: 'rowheader' } Created
%span.table-mobile-content= time_ago_with_tooltip(deployment.created_at) %span.table-mobile-content= time_ago_with_tooltip(deployment.created_at)
.table-section.section-20.environments-actions.table-button-footer{ role: 'gridcell' } .table-section.section-20.table-button-footer{ role: 'gridcell' }
.btn-group.environment-action-buttons .btn-group.table-action-button
= render 'projects/deployments/actions', deployment: deployment = render 'projects/deployments/actions', deployment: deployment
= render 'projects/deployments/rollback', deployment: deployment = render 'projects/deployments/rollback', deployment: deployment
changelogs/unreleased/31415-responsive-pipelines-table-2.yml 0 → 100644
View file @ bcb7d885
---
title: Create responsive mobile view for pipelines table
merge_request:
author:
spec/features/merge_requests/created_from_fork_spec.rb
View file @ bcb7d885
...@@ -56,7 +56,7 @@ feature 'Merge request created from fork' do ...@@ -56,7 +56,7 @@ feature 'Merge request created from fork' do
visit_merge_request(merge_request) visit_merge_request(merge_request)
page.within('.merge-request-tabs') { click_link 'Pipelines' } page.within('.merge-request-tabs') { click_link 'Pipelines' }
page.within('table.ci-table') do page.within('.ci-table') do
expect(page).to have_content pipeline.status expect(page).to have_content pipeline.status
expect(page).to have_content pipeline.id expect(page).to have_content pipeline.id
end end
......
spec/features/merge_requests/pipelines_spec.rb
View file @ bcb7d885
...@@ -28,7 +28,7 @@ feature 'Pipelines for Merge Requests', feature: true, js: true do ...@@ -28,7 +28,7 @@ feature 'Pipelines for Merge Requests', feature: true, js: true do
end end
wait_for_requests wait_for_requests
expect(page).to have_selector('.pipeline-actions') expect(page).to have_selector('.stage-cell')
end end
end end
......
spec/features/projects/pipelines/pipelines_spec.rb
View file @ bcb7d885
...@@ -178,7 +178,7 @@ describe 'Pipelines', :feature, :js do ...@@ -178,7 +178,7 @@ describe 'Pipelines', :feature, :js do
end end
it 'has a dropdown with play button' do it 'has a dropdown with play button' do
expect(page).to have_selector('.dropdown-toggle.btn.btn-default .icon-play') expect(page).to have_selector('.dropdown-new.btn.btn-default .icon-play')
end end
it 'has link to the manual action' do it 'has link to the manual action' do
......
spec/javascripts/pipelines/pipeline_url_spec.js
View file @ bcb7d885
...@@ -19,7 +19,7 @@ describe('Pipeline Url Component', () => { ...@@ -19,7 +19,7 @@ describe('Pipeline Url Component', () => {
}, },
}).$mount(); }).$mount();
expect(component.$el.tagName).toEqual('TD'); expect(component.$el.getAttribute('class')).toContain('table-section');
}); });
it('should render a link the provided path and id', () => { it('should render a link the provided path and id', () => {
...@@ -94,7 +94,7 @@ describe('Pipeline Url Component', () => { ...@@ -94,7 +94,7 @@ describe('Pipeline Url Component', () => {
}, },
}).$mount(); }).$mount();
expect(component.$el.querySelector('.js-pipeline-url-lastest').textContent).toContain('latest'); expect(component.$el.querySelector('.js-pipeline-url-latest').textContent).toContain('latest');
expect(component.$el.querySelector('.js-pipeline-url-yaml').textContent).toContain('yaml invalid'); expect(component.$el.querySelector('.js-pipeline-url-yaml').textContent).toContain('yaml invalid');
expect(component.$el.querySelector('.js-pipeline-url-stuck').textContent).toContain('stuck'); expect(component.$el.querySelector('.js-pipeline-url-stuck').textContent).toContain('stuck');
}); });
......
spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
View file @ bcb7d885
...@@ -34,7 +34,7 @@ describe('Pipelines Table Row', () => { ...@@ -34,7 +34,7 @@ describe('Pipelines Table Row', () => {
it('should render a table row', () => { it('should render a table row', () => {
component = buildComponent(pipeline); component = buildComponent(pipeline);
expect(component.$el).toEqual('TR'); expect(component.$el.getAttribute('class')).toContain('gl-responsive-table-row');
}); });
describe('status column', () => { describe('status column', () => {
...@@ -44,13 +44,13 @@ describe('Pipelines Table Row', () => { ...@@ -44,13 +44,13 @@ describe('Pipelines Table Row', () => {
it('should render a pipeline link', () => { it('should render a pipeline link', () => {
expect( expect(
component.$el.querySelector('td.commit-link a').getAttribute('href'), component.$el.querySelector('.table-section.commit-link a').getAttribute('href'),
).toEqual(pipeline.path); ).toEqual(pipeline.path);
}); });
it('should render status text', () => { it('should render status text', () => {
expect( expect(
component.$el.querySelector('td.commit-link a').textContent, component.$el.querySelector('.table-section.commit-link a').textContent,
).toContain(pipeline.details.status.text); ).toContain(pipeline.details.status.text);
}); });
}); });
...@@ -62,24 +62,24 @@ describe('Pipelines Table Row', () => { ...@@ -62,24 +62,24 @@ describe('Pipelines Table Row', () => {
it('should render a pipeline link', () => { it('should render a pipeline link', () => {
expect( expect(
component.$el.querySelector('td:nth-child(2) a').getAttribute('href'), component.$el.querySelector('.table-section:nth-child(2) a').getAttribute('href'),
).toEqual(pipeline.path); ).toEqual(pipeline.path);
}); });
it('should render pipeline ID', () => { it('should render pipeline ID', () => {
expect( expect(
component.$el.querySelector('td:nth-child(2) a > span').textContent, component.$el.querySelector('.table-section:nth-child(2) a > span').textContent,
).toEqual(`#${pipeline.id}`); ).toEqual(`#${pipeline.id}`);
}); });
describe('when a user is provided', () => { describe('when a user is provided', () => {
it('should render user information', () => { it('should render user information', () => {
expect( expect(
component.$el.querySelector('td:nth-child(2) a:nth-child(3)').getAttribute('href'), component.$el.querySelector('.table-section:nth-child(2) a:nth-child(3)').getAttribute('href'),
).toEqual(pipeline.user.path); ).toEqual(pipeline.user.path);
expect( expect(
component.$el.querySelector('td:nth-child(2) img').getAttribute('data-original-title'), component.$el.querySelector('.table-section:nth-child(2) img').getAttribute('data-original-title'),
).toEqual(pipeline.user.name); ).toEqual(pipeline.user.name);
}); });
}); });
...@@ -142,7 +142,7 @@ describe('Pipelines Table Row', () => { ...@@ -142,7 +142,7 @@ describe('Pipelines Table Row', () => {
it('should render an icon for each stage', () => { it('should render an icon for each stage', () => {
expect( expect(
component.$el.querySelectorAll('td:nth-child(4) .js-builds-dropdown-button').length, component.$el.querySelectorAll('.table-section:nth-child(4) .js-builds-dropdown-button').length,
).toEqual(pipeline.details.stages.length); ).toEqual(pipeline.details.stages.length);
}); });
}); });
...@@ -154,7 +154,7 @@ describe('Pipelines Table Row', () => { ...@@ -154,7 +154,7 @@ describe('Pipelines Table Row', () => {
it('should render the provided actions', () => { it('should render the provided actions', () => {
expect( expect(
component.$el.querySelectorAll('td:nth-child(6) ul li').length, component.$el.querySelectorAll('.table-section:nth-child(6) ul li').length,
).toEqual(pipeline.details.manual_actions.length); ).toEqual(pipeline.details.manual_actions.length);
}); });
}); });
......
spec/javascripts/vue_shared/components/pipelines_table_spec.js
View file @ bcb7d885
...@@ -32,16 +32,14 @@ describe('Pipelines Table', () => { ...@@ -32,16 +32,14 @@ describe('Pipelines Table', () => {
}); });
it('should render a table', () => { it('should render a table', () => {
expect(component.$el).toEqual('TABLE'); expect(component.$el.getAttribute('class')).toContain('ci-table');
}); });
it('should render table head with correct columns', () => { it('should render table head with correct columns', () => {
expect(component.$el.querySelector('th.js-pipeline-status').textContent).toEqual('Status'); expect(component.$el.querySelector('.table-section.js-pipeline-status').textContent.trim()).toEqual('Status');
expect(component.$el.querySelector('th.js-pipeline-info').textContent).toEqual('Pipeline'); expect(component.$el.querySelector('.table-section.js-pipeline-info').textContent.trim()).toEqual('Pipeline');
expect(component.$el.querySelector('th.js-pipeline-commit').textContent).toEqual('Commit'); expect(component.$el.querySelector('.table-section.js-pipeline-commit').textContent.trim()).toEqual('Commit');
expect(component.$el.querySelector('th.js-pipeline-stages').textContent).toEqual('Stages'); expect(component.$el.querySelector('.table-section.js-pipeline-stages').textContent.trim()).toEqual('Stages');
expect(component.$el.querySelector('th.js-pipeline-date').textContent).toEqual('');
expect(component.$el.querySelector('th.js-pipeline-actions').textContent).toEqual('');
}); });
}); });
...@@ -53,7 +51,7 @@ describe('Pipelines Table', () => { ...@@ -53,7 +51,7 @@ describe('Pipelines Table', () => {
service: {}, service: {},
}, },
}).$mount(); }).$mount();
expect(component.$el.querySelectorAll('tbody tr').length).toEqual(0); expect(component.$el.querySelectorAll('.commit.gl-responsive-table-row').length).toEqual(0);
}); });
}); });
...@@ -67,7 +65,7 @@ describe('Pipelines Table', () => { ...@@ -67,7 +65,7 @@ describe('Pipelines Table', () => {
}, },
}).$mount(); }).$mount();
expect(component.$el.querySelectorAll('tbody tr').length).toEqual(1); expect(component.$el.querySelectorAll('.commit.gl-responsive-table-row').length).toEqual(1);
}); });
}); });
}); });
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7