Skip to content

G
gitlab-ce
Commit 1d448a66 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray Committed by Phil Hughes
Browse files
Options

Create responsive mobile view for pipelines table

parent 2b34f3f2
Hide whitespace changes
Inline Side-by-side
Showing with 332 additions and 418 deletions
app/assets/javascripts/environments/components/environment_item.vue
View file @ 1d448a66
...@@ -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 @ 1d448a66
...@@ -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 @ 1d448a66
...@@ -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 @ 1d448a66
...@@ -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 @ 1d448a66
...@@ -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 @ 1d448a66
...@@ -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 @ 1d448a66
...@@ -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 @ 1d448a66
...@@ -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 @ 1d448a66
...@@ -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 @ 1d448a66
...@@ -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 @ 1d448a66
...@@ -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 @ 1d448a66
.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 @ 1d448a66
...@@ -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 @ 1d448a66
---
title: Create responsive mobile view for pipelines table
merge_request:
author:
spec/features/merge_requests/created_from_fork_spec.rb
View file @ 1d448a66
...@@ -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 @ 1d448a66
...@@ -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 @ 1d448a66
...@@ -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 @ 1d448a66
...@@ -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 @ 1d448a66
...@@ -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 @ 1d448a66
...@@ -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