Skip to content

G
gitlab-ce
Commit 06e3ea7a authored by Filipa Lacerda's avatar Filipa Lacerda
Browse files
Options

Merge branch 'redesign-mr-widget-info-pipeline' into 'master' 

Redesign for mr widget info and pipelines section

Closes #46795

See merge request gitlab-org/gitlab-ce!20189
parents e0c0ce28 bc5a9206
Hide whitespace changes
Inline Side-by-side
Showing with 449 additions and 235 deletions
app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
View file @ 06e3ea7a
...@@ -79,66 +79,62 @@ export default { ...@@ -79,66 +79,62 @@ export default {
</script> </script>
<template> <template>
<div class="mr-widget-heading deploy-heading"> <div class="mr-widget-heading deploy-heading append-bottom-default">
<div class="ci-widget media"> <div class="ci-widget media">
<div class="ci-status-icon ci-status-icon-success">
<span class="js-icon-link icon-link">
<status-icon status="success" />
</span>
</div>
<div class="media-body"> <div class="media-body">
<div class="deploy-body"> <div class="deploy-body">
<template v-if="hasDeploymentMeta"> <div class="deployment-info">
<span> <template v-if="hasDeploymentMeta">
Deployed to <span>
</span> Deployed to
<a </span>
:href="deployment.url" <a
target="_blank" :href="deployment.url"
rel="noopener noreferrer nofollow" target="_blank"
class="deploy-link js-deploy-meta" rel="noopener noreferrer nofollow"
class="deploy-link js-deploy-meta"
>
{{ deployment.name }}
</a>
</template>
<span
v-tooltip
v-if="hasDeploymentTime"
:title="deployment.deployed_at_formatted"
class="js-deploy-time"
> >
{{ deployment.name }} {{ deployTimeago }}
</a>
</template>
<template v-if="hasExternalUrls">
<span>
on
</span> </span>
<memory-usage
v-if="hasMetrics"
:metrics-url="deployment.metrics_url"
:metrics-monitoring-url="deployment.metrics_monitoring_url"
/>
</div>
<div>
<a <a
v-if="hasExternalUrls"
:href="deployment.external_url" :href="deployment.external_url"
target="_blank" target="_blank"
rel="noopener noreferrer nofollow" rel="noopener noreferrer nofollow"
class="deploy-link js-deploy-url" class="deploy-link js-deploy-url btn btn-default btn-sm inline"
> >
{{ deployment.external_url_formatted }} <span>
<icon View app
:size="16" <icon name="external-link" />
name="external-link" </span>
/>
</a> </a>
</template> <loading-button
<span v-if="deployment.stop_url"
v-tooltip :loading="isStopping"
v-if="hasDeploymentTime" container-class="btn btn-default btn-sm inline prepend-left-4"
:title="deployment.deployed_at_formatted" title="Stop environment"
class="js-deploy-time" @click="stopEnvironment"
> >
{{ deployTimeago }} <icon name="stop" />
</span> </loading-button>
<loading-button </div>
v-if="deployment.stop_url"
:loading="isStopping"
container-class="btn btn-default btn-sm prepend-left-default"
label="Stop environment"
@click="stopEnvironment"
/>
</div> </div>
<memory-usage
v-if="hasMetrics"
:metrics-url="deployment.metrics_url"
:metrics-monitoring-url="deployment.metrics_monitoring_url"
/>
</div> </div>
</div> </div>
</div> </div>
......
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
View file @ 06e3ea7a
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import { n__ } from '~/locale'; import { n__ } from '~/locale';
import { webIDEUrl } from '~/lib/utils/url_utility'; import { webIDEUrl } from '~/lib/utils/url_utility';
import icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import clipboardButton from '~/vue_shared/components/clipboard_button.vue'; import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
export default { export default {
...@@ -11,7 +11,7 @@ export default { ...@@ -11,7 +11,7 @@ export default {
tooltip, tooltip,
}, },
components: { components: {
icon, Icon,
clipboardButton, clipboardButton,
}, },
props: { props: {
...@@ -54,104 +54,114 @@ export default { ...@@ -54,104 +54,114 @@ export default {
}; };
</script> </script>
<template> <template>
<div class="mr-source-target"> <div class="mr-source-target append-bottom-default">
<div class="normal"> <div class="git-merge-icon-container append-right-default">
<strong> <icon name="git-merge" />
{{ s__("mrWidget|Request to merge") }} </div>
<span <div class="git-merge-container d-flex">
:class="{ 'label-truncated': isSourceBranchLong }" <div class="normal">
:title="isSourceBranchLong ? mr.sourceBranch : ''" <strong>
:v-tooltip="isSourceBranchLong" {{ s__("mrWidget|Request to merge") }}
class="label-branch js-source-branch" <span
data-placement="bottom" :class="{ 'label-truncated': isSourceBranchLong }"
v-html="mr.sourceBranchLink" :title="isSourceBranchLong ? mr.sourceBranch : ''"
> :v-tooltip="isSourceBranchLong"
</span> class="label-branch js-source-branch"
data-placement="bottom"
v-html="mr.sourceBranchLink"
>
</span>
<clipboard-button <clipboard-button
:text="branchNameClipboardData" :text="branchNameClipboardData"
:title="__('Copy branch name to clipboard')" :title="__('Copy branch name to clipboard')"
css-class="btn-default btn-transparent btn-clipboard" css-class="btn-default btn-transparent btn-clipboard"
/> />
{{ s__("mrWidget|into") }} {{ s__("mrWidget|into") }}
<span <span
:v-tooltip="isTargetBranchLong" :v-tooltip="isTargetBranchLong"
:class="{ 'label-truncatedtooltip': isTargetBranchLong }" :class="{ 'label-truncatedtooltip': isTargetBranchLong }"
:title="isTargetBranchLong ? mr.targetBranch : ''" :title="isTargetBranchLong ? mr.targetBranch : ''"
class="label-branch" class="label-branch"
data-placement="bottom" data-placement="bottom"
>
<a
:href="mr.targetBranchTreePath"
class="js-target-branch"
> >
{{ mr.targetBranch }} <a
</a> :href="mr.targetBranchTreePath"
</span> class="js-target-branch"
</strong> >
<span {{ mr.targetBranch }}
v-if="shouldShowCommitsBehindText" </a>
class="diverged-commits-count" </span>
> </strong>
(<a :href="mr.targetBranchPath">{{ commitsText }}</a>) <div
</span> v-if="shouldShowCommitsBehindText"
</div> class="diverged-commits-count"
>
<span class="monospace">{{ mr.sourceBranch }}</span>
is {{ commitsText }}
<span class="monospace">{{ mr.targetBranch }}</span>
</div>
</div>
<div v-if="mr.isOpen"> <div
<a v-if="mr.isOpen"
v-if="!mr.sourceBranchRemoved" class="branch-actions"
:href="webIdePath"
class="btn btn-sm btn-default inline js-web-ide"
>
{{ s__("mrWidget|Web IDE") }}
</a>
<button
:disabled="mr.sourceBranchRemoved"
data-target="#modal_merge_info"
data-toggle="modal"
class="btn btn-sm btn-default inline js-check-out-branch"
type="button"
> >
{{ s__("mrWidget|Check out branch") }} <a
</button> v-if="!mr.sourceBranchRemoved"
<span class="dropdown prepend-left-10"> :href="webIdePath"
class="btn btn-default inline js-web-ide d-none d-md-inline-block"
>
{{ s__("mrWidget|Open in Web IDE") }}
</a>
<button <button
:disabled="mr.sourceBranchRemoved"
data-target="#modal_merge_info"
data-toggle="modal"
class="btn btn-default inline js-check-out-branch"
type="button" type="button"
class="btn btn-sm inline dropdown-toggle"
data-toggle="dropdown"
aria-label="Download as"
aria-haspopup="true"
aria-expanded="false"
> >
<icon name="download" /> {{ s__("mrWidget|Check out branch") }}
<i
class="fa fa-caret-down"
aria-hidden="true">
</i>
</button> </button>
<ul class="dropdown-menu dropdown-menu-right"> <span class="dropdown prepend-left-10">
<li> <button
<a type="button"
:href="mr.emailPatchesPath" class="btn inline dropdown-toggle"
class="js-download-email-patches" data-toggle="dropdown"
download aria-label="Download as"
> aria-haspopup="true"
{{ s__("mrWidget|Email patches") }} aria-expanded="false"
</a> >
</li> <icon name="download" />
<li> <i
<a class="fa fa-caret-down"
:href="mr.plainDiffPath" aria-hidden="true">
class="js-download-plain-diff" </i>
download </button>
> <ul class="dropdown-menu dropdown-menu-right">
{{ s__("mrWidget|Plain diff") }} <li>
</a> <a
</li> :href="mr.emailPatchesPath"
</ul> class="js-download-email-patches"
</span> download
>
{{ s__("mrWidget|Email patches") }}
</a>
</li>
<li>
<a
:href="mr.plainDiffPath"
class="js-download-plain-diff"
download
>
{{ s__("mrWidget|Plain diff") }}
</a>
</li>
</ul>
</span>
</div>
</div> </div>
</div> </div>
</template> </template>
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
View file @ 06e3ea7a
...@@ -26,6 +26,10 @@ export default { ...@@ -26,6 +26,10 @@ export default {
type: String, type: String,
required: false, required: false,
}, },
sourceBranchLink: {
type: String,
required: false,
},
}, },
computed: { computed: {
hasPipeline() { hasPipeline() {
...@@ -54,12 +58,18 @@ export default { ...@@ -54,12 +58,18 @@ export default {
<template> <template>
<div <div
v-if="hasPipeline || hasCIError" v-if="hasPipeline || hasCIError"
class="mr-widget-heading" class="mr-widget-heading append-bottom-default"
> >
<div class="ci-widget media"> <div class="ci-widget media">
<template v-if="hasCIError"> <template v-if="hasCIError">
<div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-10"> <div
<icon name="status_failed" /> class="add-border ci-status-icon ci-status-icon-failed ci-error
js-ci-error append-right-default"
>
<icon
:size="32"
name="status_failed_borderless"
/>
</div> </div>
<div class="media-body"> <div class="media-body">
Could not connect to the CI server. Please check your settings and try again Could not connect to the CI server. Please check your settings and try again
...@@ -68,50 +78,66 @@ export default { ...@@ -68,50 +78,66 @@ export default {
<template v-else-if="hasPipeline"> <template v-else-if="hasPipeline">
<a <a
:href="status.details_path" :href="status.details_path"
class="append-right-10" class="align-self-start append-right-default"
> >
<ci-icon :status="status" /> <ci-icon
:status="status"
:size="32"
:borderless="true"
class="add-border"
/>
</a> </a>
<div class="ci-widget-container d-flex">
<div class="ci-widget-content">
<div class="media-body">
<div class="font-weight-bold">
Pipeline
<a
:href="pipeline.path"
class="pipeline-id font-weight-normal pipeline-number"
>#{{ pipeline.id }}</a>
<div class="media-body"> {{ pipeline.details.status.label }}
Pipeline
<a
:href="pipeline.path"
class="pipeline-id"
>
#{{ pipeline.id }}
</a>
{{ pipeline.details.status.label }}
<template v-if="hasCommitInfo"> <template v-if="hasCommitInfo">
for for
<a
<a :href="pipeline.commit.commit_path"
:href="pipeline.commit.commit_path" class="commit-sha js-commit-link font-weight-normal"
class="commit-sha js-commit-link" >
> {{ pipeline.commit.short_id }}</a>
{{ pipeline.commit.short_id }}</a>. on
</template> <span
class="label-branch"
<span class="mr-widget-pipeline-graph"> v-html="sourceBranchLink"
<span >
v-if="hasStages" </span>
class="stage-cell" </template>
> </div>
<div <div
v-for="(stage, i) in pipeline.details.stages" v-if="pipeline.coverage"
:key="i" class="coverage"
class="stage-container dropdown js-mini-pipeline-graph"
> >
<pipeline-stage :stage="stage" /> Coverage {{ pipeline.coverage }}%
</div> </div>
</div>
</div>
<div>
<span class="mr-widget-pipeline-graph">
<span
v-if="hasStages"
class="stage-cell"
>
<div
v-for="(stage, i) in pipeline.details.stages"
:key="i"
class="stage-container dropdown js-mini-pipeline-graph mr-widget-pipeline-stages"
>
<pipeline-stage :stage="stage" />
</div>
</span>
</span> </span>
</span> </div>
<template v-if="pipeline.coverage">
Coverage {{ pipeline.coverage }}%
</template>
</div> </div>
</template> </template>
</div> </div>
......
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
View file @ 06e3ea7a
...@@ -43,6 +43,7 @@ ...@@ -43,6 +43,7 @@
<ci-icon <ci-icon
v-else v-else
:status="statusObj" :status="statusObj"
:size="24"
/> />
<button <button
......
app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
View file @ 06e3ea7a
...@@ -252,41 +252,44 @@ export default { ...@@ -252,41 +252,44 @@ export default {
:pipeline="mr.pipeline" :pipeline="mr.pipeline"
:ci-status="mr.ciStatus" :ci-status="mr.ciStatus"
:has-ci="mr.hasCI" :has-ci="mr.hasCI"
:source-branch-link="mr.sourceBranchLink"
/> />
<deployment <deployment
v-for="deployment in mr.deployments" v-for="deployment in mr.deployments"
:key="deployment.id" :key="deployment.id"
:deployment="deployment" :deployment="deployment"
/> />
<div class="mr-widget-section"> <div class="mr-section-container">
<component <div class="mr-widget-section">
:is="componentName" <component
:mr="mr" :is="componentName"
:service="service" :mr="mr"
/> :service="service"
/>
<section <section
v-if="mr.allowCollaboration" v-if="mr.allowCollaboration"
class="mr-info-list mr-links" class="mr-info-list mr-links"
> >
{{ s__("mrWidget|Allows commits from members who can merge to the target branch") }} {{ s__("mrWidget|Allows commits from members who can merge to the target branch") }}
</section> </section>
<mr-widget-related-links <mr-widget-related-links
v-if="shouldRenderRelatedLinks" v-if="shouldRenderRelatedLinks"
:state="mr.state" :state="mr.state"
:related-links="mr.relatedLinks" :related-links="mr.relatedLinks"
/> />
<source-branch-removal-status <source-branch-removal-status
v-if="shouldRenderSourceBranchRemovalStatus" v-if="shouldRenderSourceBranchRemovalStatus"
/> />
</div> </div>
<div <div
v-if="shouldRenderMergeHelp" v-if="shouldRenderMergeHelp"
class="mr-widget-footer" class="mr-widget-footer"
> >
<mr-widget-merge-help /> <mr-widget-merge-help />
</div>
</div> </div>
</div> </div>
</template> </template>
app/assets/stylesheets/framework/icons.scss
View file @ 06e3ea7a
...@@ -3,12 +3,20 @@ ...@@ -3,12 +3,20 @@
svg { svg {
fill: $green-500; fill: $green-500;
} }
&.add-border {
@include borderless-status-icon($green-500);
}
} }
.ci-status-icon-failed { .ci-status-icon-failed {
svg { svg {
fill: $gl-danger; fill: $gl-danger;
} }
&.add-border {
@include borderless-status-icon($red-500);
}
} }
.ci-status-icon-pending, .ci-status-icon-pending,
...@@ -17,12 +25,20 @@ ...@@ -17,12 +25,20 @@
svg { svg {
fill: $orange-500; fill: $orange-500;
} }
&.add-border {
@include borderless-status-icon($orange-500);
}
} }
.ci-status-icon-running { .ci-status-icon-running {
svg { svg {
fill: $blue-400; fill: $blue-400;
} }
&.add-border {
@include borderless-status-icon($blue-400);
}
} }
.ci-status-icon-canceled, .ci-status-icon-canceled,
...@@ -30,6 +46,10 @@ ...@@ -30,6 +46,10 @@
svg { svg {
fill: $gl-text-color; fill: $gl-text-color;
} }
&.add-border {
@include borderless-status-icon($gl-text-color);
}
} }
.ci-status-icon-created, .ci-status-icon-created,
...@@ -38,6 +58,10 @@ ...@@ -38,6 +58,10 @@
svg { svg {
fill: $gray-darkest; fill: $gray-darkest;
} }
&.add-border {
@include borderless-status-icon($gray-darkest);
}
} }
.ci-status-icon-manual { .ci-status-icon-manual {
......
app/assets/stylesheets/framework/mixins.scss
View file @ 06e3ea7a
...@@ -232,3 +232,10 @@ ...@@ -232,3 +232,10 @@
word-break: break-word; word-break: break-word;
max-width: 100%; max-width: 100%;
} }
@mixin borderless-status-icon($color) {
svg {
border: 1px solid $color;
border-radius: 50%;
}
}
app/assets/stylesheets/framework/typography.scss
View file @ 06e3ea7a
...@@ -350,7 +350,8 @@ code { ...@@ -350,7 +350,8 @@ code {
} }
.commit-sha, .commit-sha,
.ref-name { .ref-name,
.pipeline-number {
@extend .monospace; @extend .monospace;
font-size: 95%; font-size: 95%;
} }
......
app/assets/stylesheets/framework/variables.scss
View file @ 06e3ea7a
...@@ -743,6 +743,7 @@ Pipeline Graph ...@@ -743,6 +743,7 @@ Pipeline Graph
*/ */
$stage-hover-bg: $gray-darker; $stage-hover-bg: $gray-darker;
$ci-action-icon-size: 22px; $ci-action-icon-size: 22px;
$ci-action-icon-size-lg: 24px;
$pipeline-dropdown-line-height: 20px; $pipeline-dropdown-line-height: 20px;
$pipeline-dropdown-status-icon-size: 18px; $pipeline-dropdown-status-icon-size: 18px;
$ci-action-dropdown-button-size: 24px; $ci-action-dropdown-button-size: 24px;
......
app/assets/stylesheets/pages/merge_requests.scss
View file @ 06e3ea7a
...@@ -15,16 +15,38 @@ ...@@ -15,16 +15,38 @@
} }
} }
.mr-widget-heading {
position: relative;
border: 1px solid $border-color;
border-radius: 4px;
&:not(.deploy-heading)::before {
content: '';
border-left: 1px solid $theme-gray-200;
position: absolute;
left: 32px;
top: -17px;
height: 16px;
}
}
.mr-section-container {
border: 1px solid $border-color;
border-radius: $border-radius-default;
border-top: 0;
}
.mr-widget-heading,
.mr-widget-section,
.mr-widget-footer {
padding: $gl-padding;
}
.mr-state-widget { .mr-state-widget {
color: $gl-text-color; color: $gl-text-color;
border: 1px solid $border-color;
border-radius: 2px;
line-height: 28px;
.mr-widget-heading,
.mr-widget-section, .mr-widget-section,
.mr-widget-footer { .mr-widget-footer {
padding: $gl-padding;
border-top: solid 1px $border-color; border-top: solid 1px $border-color;
} }
...@@ -124,10 +146,17 @@ ...@@ -124,10 +146,17 @@
.ci-widget { .ci-widget {
color: $gl-text-color; color: $gl-text-color;
display: flex; display: flex;
align-items: center;
justify-content: space-between;
@include media-breakpoint-down(xs) { @include media-breakpoint-down(xs) {
flex-wrap: wrap; flex-wrap: wrap;
} }
.ci-widget-content {
display: flex;
align-items: center;
}
} }
.mr-widget-icon { .mr-widget-icon {
...@@ -136,8 +165,6 @@ ...@@ -136,8 +165,6 @@
} }
.ci-status-icon svg { .ci-status-icon svg {
width: $status-icon-size;
height: $status-icon-size;
margin: 3px 0; margin: 3px 0;
position: relative; position: relative;
overflow: visible; overflow: visible;
...@@ -145,8 +172,6 @@ ...@@ -145,8 +172,6 @@
} }
.mr-widget-pipeline-graph { .mr-widget-pipeline-graph {
padding: 0 4px;
.dropdown-menu { .dropdown-menu {
z-index: 300; z-index: 300;
} }
...@@ -157,7 +182,7 @@ ...@@ -157,7 +182,7 @@
} }
.normal { .normal {
line-height: 28px; flex: 1;
} }
.capitalize { .capitalize {
...@@ -168,7 +193,7 @@ ...@@ -168,7 +193,7 @@
@extend .ref-name; @extend .ref-name;
color: $gl-text-color; color: $gl-text-color;
font-weight: $gl-font-weight-bold; font-weight: normal;
overflow: hidden; overflow: hidden;
word-break: break-all; word-break: break-all;
...@@ -192,6 +217,8 @@ ...@@ -192,6 +217,8 @@
} }
.mr-widget-body { .mr-widget-body {
line-height: 28px;
@include clearfix; @include clearfix;
&.media > *:first-child { &.media > *:first-child {
...@@ -474,18 +501,66 @@ ...@@ -474,18 +501,66 @@
} }
} }
.merge-request-details .content-block {
border-bottom: 0;
}
.mr-source-target { .mr-source-target {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; border-radius: $border-radius-default;
align-items: center; padding: $gl-padding;
background-color: $gray-light; border: 1px solid $border-color;
border-radius: $border-radius-default $border-radius-default 0 0; min-height: 69px;
padding: $gl-padding / 2 $gl-padding;
@include media-breakpoint-up(md) {
align-items: center;
}
.dropdown-toggle .fa { .dropdown-toggle .fa {
color: $gl-text-color; color: $gl-text-color;
} }
.git-merge-icon-container {
border: 1px solid $theme-gray-400;
border-radius: 50%;
height: 32px;
width: 32px;
color: $theme-gray-700;
line-height: 28px;
.ic-git-merge {
vertical-align: middle;
width: 31px;
}
}
.git-merge-container {
justify-content: space-between;
flex: 1;
flex-direction: row;
align-items: center;
@include media-breakpoint-down(md) {
flex-direction: column;
align-items: flex-start;
.branch-actions {
margin-top: 16px;
}
}
@include media-breakpoint-up(lg) {
.branch-actions {
align-self: center;
}
}
}
.diverged-commits-count {
color: $gl-text-color-secondary;
font-size: 12px;
}
} }
.card-new-merge-request { .card-new-merge-request {
...@@ -720,13 +795,25 @@ ...@@ -720,13 +795,25 @@
} }
.deploy-heading { .deploy-heading {
margin-top: -19px;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: $gray-light;
@include media-breakpoint-up(md) {
padding: $gl-padding-8 $gl-padding;
}
.media-body { .media-body {
min-width: 0; min-width: 0;
font-size: 12px;
margin-left: 48px;
} }
} }
.deploy-body { .deploy-body {
display: flex; display: flex;
align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
@include media-breakpoint-up(xs) { @include media-breakpoint-up(xs) {
...@@ -734,6 +821,15 @@ ...@@ -734,6 +821,15 @@
white-space: nowrap; white-space: nowrap;
} }
@include media-breakpoint-down(md) {
flex-direction: column;
align-items: flex-start;
.deployment-info {
margin-bottom: $gl-padding;
}
}
> *:not(:last-child) { > *:not(:last-child) {
margin-right: .3em; margin-right: .3em;
} }
...@@ -741,18 +837,22 @@ ...@@ -741,18 +837,22 @@
svg { svg {
vertical-align: text-top; vertical-align: text-top;
} }
}
.deploy-link { .deployment-info {
white-space: nowrap; flex: 1;
overflow: hidden; white-space: nowrap;
text-overflow: ellipsis; overflow: hidden;
min-width: 100px; text-overflow: ellipsis;
max-width: 150px; min-width: 100px;
@include media-breakpoint-up(xs) { @include media-breakpoint-up(xs) {
min-width: 0; min-width: 0;
max-width: 100%; max-width: 100%;
}
}
.btn svg {
fill: $theme-gray-700;
} }
} }
...@@ -772,3 +872,33 @@ ...@@ -772,3 +872,33 @@
} }
} }
} }
.ci-widget-container {
justify-content: space-between;
flex: 1;
flex-direction: row;
@include media-breakpoint-down(md) {
flex-direction: column;
.stage-cell .stage-container {
margin-top: 16px;
}
.dropdown .mini-pipeline-graph-dropdown-menu.dropdown-menu {
transform: initial;
}
}
.coverage {
font-size: 12px;
color: $theme-gray-700;
line-height: initial;
}
.mini-pipeline-graph-dropdown-toggle,
.stage-cell .mini-pipeline-graph-dropdown-toggle svg {
height: $ci-action-icon-size-lg;
width: $ci-action-icon-size-lg;
}
}
app/assets/stylesheets/pages/pipelines.scss
View file @ 06e3ea7a
...@@ -301,6 +301,21 @@ ...@@ -301,6 +301,21 @@
border-bottom: 2px solid $border-color; border-bottom: 2px solid $border-color;
} }
} }
//delete when all pipelines are updated to new size
&.mr-widget-pipeline-stages {
+ .stage-container {
margin-left: 4px;
}
&:not(:last-child) {
&::after {
width: 4px;
right: -4px;
top: 11px;
}
}
}
} }
} }
......
spec/javascripts/vue_mr_widget/components/deployment_spec.js
View file @ 06e3ea7a
...@@ -153,7 +153,7 @@ describe('Deployment component', () => { ...@@ -153,7 +153,7 @@ describe('Deployment component', () => {
it('renders external URL', () => { it('renders external URL', () => {
expect(el.querySelector('.js-deploy-url').getAttribute('href')).toEqual(deploymentMockData.external_url); expect(el.querySelector('.js-deploy-url').getAttribute('href')).toEqual(deploymentMockData.external_url);
expect(el.querySelector('.js-deploy-url').innerText).toContain(deploymentMockData.external_url_formatted); expect(el.querySelector('.js-deploy-url').innerText).toContain('View app');
}); });
it('renders stop button', () => { it('renders stop button', () => {
......
spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
View file @ 06e3ea7a
...@@ -145,7 +145,7 @@ describe('MRWidgetHeader', () => { ...@@ -145,7 +145,7 @@ describe('MRWidgetHeader', () => {
it('renders web ide button', () => { it('renders web ide button', () => {
const button = vm.$el.querySelector('.js-web-ide'); const button = vm.$el.querySelector('.js-web-ide');
expect(button.textContent.trim()).toEqual('Web IDE'); expect(button.textContent.trim()).toEqual('Open in Web IDE');
expect(button.getAttribute('href')).toEqual('/-/ide/projectabc'); expect(button.getAttribute('href')).toEqual('/-/ide/projectabc');
}); });
...@@ -154,7 +154,7 @@ describe('MRWidgetHeader', () => { ...@@ -154,7 +154,7 @@ describe('MRWidgetHeader', () => {
const button = vm.$el.querySelector('.js-web-ide'); const button = vm.$el.querySelector('.js-web-ide');
expect(button.textContent.trim()).toEqual('Web IDE'); expect(button.textContent.trim()).toEqual('Open in Web IDE');
expect(button.getAttribute('href')).toEqual('/-/ide/projectabc'); expect(button.getAttribute('href')).toEqual('/-/ide/projectabc');
}); });
...@@ -253,8 +253,8 @@ describe('MRWidgetHeader', () => { ...@@ -253,8 +253,8 @@ describe('MRWidgetHeader', () => {
}); });
it('renders diverged commits info', () => { it('renders diverged commits info', () => {
expect(vm.$el.querySelector('.diverged-commits-count').textContent.trim()).toEqual( expect(vm.$el.querySelector('.diverged-commits-count').textContent).toMatch(
'(12 commits behind)', /(mr-widget-refactor[\s\S]+?is 12 commits behind[\s\S]+?master)/,
); );
}); });
}); });
......
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