diff options
Diffstat (limited to 'app/assets/javascripts/ide/components/jobs/stage.vue')
-rw-r--r-- | app/assets/javascripts/ide/components/jobs/stage.vue | 23 |
1 files changed, 13 insertions, 10 deletions
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" /> |