diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-10-13 18:09:32 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-10-13 18:09:32 +0300 |
commit | bd25f1d9c685039381df23e49bc52cdcf4ec1b4a (patch) | |
tree | 33b3b16ae2ef653f74828f69742154122ff0ac2d /app/assets/javascripts/ide | |
parent | 70ce746bd011b101605e6d84f141d1f0c3175831 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/ide')
-rw-r--r-- | app/assets/javascripts/ide/components/jobs/detail/description.vue | 7 | ||||
-rw-r--r-- | app/assets/javascripts/ide/components/jobs/stage.vue | 23 |
2 files changed, 19 insertions, 11 deletions
diff --git a/app/assets/javascripts/ide/components/jobs/detail/description.vue b/app/assets/javascripts/ide/components/jobs/detail/description.vue index c184e25f67f..00059d01308 100644 --- a/app/assets/javascripts/ide/components/jobs/detail/description.vue +++ b/app/assets/javascripts/ide/components/jobs/detail/description.vue @@ -23,7 +23,12 @@ export default { <template> <div class="d-flex align-items-center"> - <ci-icon is-borderless :status="job.status" :size="24" class="d-flex" /> + <ci-icon + is-borderless + :status="job.status" + :size="24" + class="gl-align-items-center gl-border gl-display-inline-flex gl-z-index-1" + /> <span class="gl-ml-3"> {{ job.name }} <a diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue index 2284ffb8480..4d8c62d3430 100644 --- a/app/assets/javascripts/ide/components/jobs/stage.vue +++ b/app/assets/javascripts/ide/components/jobs/stage.vue @@ -1,6 +1,6 @@ <script> import { GlLoadingIcon, GlIcon, GlTooltipDirective, GlBadge } from '@gitlab/ui'; -import CiIcon from '~/vue_shared/components/ci_icon.vue'; +import { __ } from '~/locale'; import Item from './item.vue'; export default { @@ -10,7 +10,6 @@ export default { components: { GlIcon, GlBadge, - CiIcon, Item, GlLoadingIcon, }, @@ -27,11 +26,15 @@ export default { }, computed: { collapseIcon() { - return this.stage.isCollapsed ? 'chevron-lg-left' : 'chevron-lg-down'; + return this.stage.isCollapsed ? 'chevron-lg-down' : 'chevron-lg-up'; }, showLoadingIcon() { return this.stage.isLoading && !this.stage.jobs.length; }, + stageTitle() { + const prefix = __('Stage'); + return `${prefix}: ${this.stage.name}`; + }, jobsCount() { return this.stage.jobs.length; }, @@ -57,29 +60,29 @@ export default { <template> <div class="ide-stage card gl-mt-3"> <div - ref="cardHeader" :class="{ 'border-bottom-0': stage.isCollapsed, }" - class="card-header" + class="card-header gl-align-items-center gl-cursor-pointer gl-display-flex" + data-testid="card-header" @click="toggleCollapsed" > - <ci-icon :status="stage.status" :size="24" /> <strong ref="stageTitle" v-gl-tooltip="showTooltip" :title="showTooltip ? stage.name : null" data-container="body" - class="gl-ml-3 text-truncate" + class="gl-text-truncate" + data-testid="stage-title" > - {{ stage.name }} + {{ stageTitle }} </strong> <div v-if="!stage.isLoading || stage.jobs.length" class="gl-mr-3 gl-ml-2"> <gl-badge>{{ jobsCount }}</gl-badge> </div> - <gl-icon :name="collapseIcon" class="ide-stage-collapse-icon" /> + <gl-icon :name="collapseIcon" class="gl-absolute gl-right-5" /> </div> - <div v-show="!stage.isCollapsed" ref="jobList" class="card-body p-0"> + <div v-show="!stage.isCollapsed" class="card-body p-0" data-testid="job-list"> <gl-loading-icon v-if="showLoadingIcon" size="sm" /> <template v-else> <item v-for="job in stage.jobs" :key="job.id" :job="job" @clickViewLog="clickViewLog" /> |