diff options
Diffstat (limited to 'app/assets/javascripts/jobs')
14 files changed, 138 insertions, 315 deletions
diff --git a/app/assets/javascripts/jobs/components/artifacts_block.vue b/app/assets/javascripts/jobs/components/artifacts_block.vue index 93c89411b4a..309b7427b9e 100644 --- a/app/assets/javascripts/jobs/components/artifacts_block.vue +++ b/app/assets/javascripts/jobs/components/artifacts_block.vue @@ -1,5 +1,5 @@ <script> -import { GlLink } from '@gitlab-org/gitlab-ui'; +import { GlLink } from '@gitlab/ui'; import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import timeagoMixin from '~/vue_shared/mixins/timeago'; @@ -28,33 +28,19 @@ export default { </script> <template> <div class="block"> - <div class="title"> - {{ s__('Job|Job artifacts') }} - </div> + <div class="title">{{ s__('Job|Job artifacts') }}</div> - <p - v-if="isExpired" - class="js-artifacts-removed build-detail-row" - > + <p v-if="isExpired" class="js-artifacts-removed build-detail-row"> {{ s__('Job|The artifacts were removed') }} </p> - <p - v-else-if="willExpire" - class="js-artifacts-will-be-removed build-detail-row" - > + <p v-else-if="willExpire" class="js-artifacts-will-be-removed build-detail-row"> {{ s__('Job|The artifacts will be removed in') }} </p> - <timeago-tooltip - v-if="artifact.expire_at" - :time="artifact.expire_at" - /> + <timeago-tooltip v-if="artifact.expire_at" :time="artifact.expire_at" /> - <div - class="btn-group d-flex" - role="group" - > + <div class="btn-group d-flex" role="group"> <gl-link v-if="artifact.keep_path" :href="artifact.keep_path" diff --git a/app/assets/javascripts/jobs/components/commit_block.vue b/app/assets/javascripts/jobs/components/commit_block.vue index 06fe23fedce..3b9c61bd48c 100644 --- a/app/assets/javascripts/jobs/components/commit_block.vue +++ b/app/assets/javascripts/jobs/components/commit_block.vue @@ -1,5 +1,5 @@ <script> -import { GlLink } from '@gitlab-org/gitlab-ui'; +import { GlLink } from '@gitlab/ui'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; export default { @@ -28,15 +28,15 @@ export default { <div :class="{ 'block-last': isLastBlock, - block: !isLastBlock - }"> + block: !isLastBlock, + }" + > <p> {{ __('Commit') }} - <gl-link - :href="commit.commit_path" - class="js-commit-sha commit-sha link-commit" - >{{ commit.short_id }}</gl-link> + <gl-link :href="commit.commit_path" class="js-commit-sha commit-sha link-commit">{{ + commit.short_id + }}</gl-link> <clipboard-button :text="commit.short_id" @@ -44,15 +44,11 @@ export default { css-class="btn btn-clipboard btn-transparent" /> - <gl-link - v-if="mergeRequest" - :href="mergeRequest.path" - class="js-link-commit link-commit" - >!{{ mergeRequest.iid }}</gl-link> + <gl-link v-if="mergeRequest" :href="mergeRequest.path" class="js-link-commit link-commit" + >!{{ mergeRequest.iid }}</gl-link + > </p> - <p class="build-light-text append-bottom-0"> - {{ commit.title }} - </p> + <p class="build-light-text append-bottom-0">{{ commit.title }}</p> </div> </template> diff --git a/app/assets/javascripts/jobs/components/empty_state.vue b/app/assets/javascripts/jobs/components/empty_state.vue index be7425c2d25..668fcf3d673 100644 --- a/app/assets/javascripts/jobs/components/empty_state.vue +++ b/app/assets/javascripts/jobs/components/empty_state.vue @@ -1,5 +1,5 @@ <script> -import { GlLink } from '@gitlab-org/gitlab-ui'; +import { GlLink } from '@gitlab/ui'; export default { components: { @@ -42,31 +42,16 @@ export default { <template> <div class="row empty-state"> <div class="col-12"> - <div - :class="illustrationSizeClass" - class="svg-content" - > - <img :src="illustrationPath" /> - </div> + <div :class="illustrationSizeClass" class="svg-content"><img :src="illustrationPath" /></div> </div> <div class="col-12"> <div class="text-content"> - <h4 class="js-job-empty-state-title text-center"> - {{ title }} - </h4> + <h4 class="js-job-empty-state-title text-center">{{ title }}</h4> - <p - v-if="content" - class="js-job-empty-state-content" - > - {{ content }} - </p> + <p v-if="content" class="js-job-empty-state-content">{{ content }}</p> - <div - v-if="action" - class="text-center" - > + <div v-if="action" class="text-center"> <gl-link :href="action.path" :data-method="action.method" diff --git a/app/assets/javascripts/jobs/components/environments_block.vue b/app/assets/javascripts/jobs/components/environments_block.vue index 6d1eb713886..f7fbb9503a0 100644 --- a/app/assets/javascripts/jobs/components/environments_block.vue +++ b/app/assets/javascripts/jobs/components/environments_block.vue @@ -128,13 +128,10 @@ export default { }; </script> <template> - <div class="prepend-top-default js-environment-container"> + <div class="prepend-top-default append-bottom-default js-environment-container"> <div class="environment-information"> - <ci-icon :status="iconStatus"/> - <p - class="inline append-bottom-0" - v-html="environment" - ></p> + <ci-icon :status="iconStatus" /> + <p class="inline append-bottom-0" v-html="environment"></p> </div> </div> </template> diff --git a/app/assets/javascripts/jobs/components/erased_block.vue b/app/assets/javascripts/jobs/components/erased_block.vue index d80e905c68e..8437ad89301 100644 --- a/app/assets/javascripts/jobs/components/erased_block.vue +++ b/app/assets/javascripts/jobs/components/erased_block.vue @@ -1,6 +1,6 @@ <script> import _ from 'underscore'; -import { GlLink } from '@gitlab-org/gitlab-ui'; +import { GlLink } from '@gitlab/ui'; import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; export default { @@ -30,18 +30,14 @@ export default { <div class="prepend-top-default js-build-erased"> <div class="erased alert alert-warning"> <template v-if="isErasedByUser"> - {{ s__("Job|Job has been erased by") }} - <gl-link :href="user.web_url"> - {{ user.username }} - </gl-link> + {{ s__('Job|Job has been erased by') }} + <gl-link :href="user.web_url"> {{ user.username }} </gl-link> </template> <template v-else> - {{ s__("Job|Job has been erased") }} + {{ s__('Job|Job has been erased') }} </template> - <timeago-tooltip - :time="erasedAt" - /> + <timeago-tooltip :time="erasedAt" /> </div> </div> </template> diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue index 90216b04e92..786ab16992d 100644 --- a/app/assets/javascripts/jobs/components/job_app.vue +++ b/app/assets/javascripts/jobs/components/job_app.vue @@ -1,7 +1,7 @@ <script> import _ from 'underscore'; import { mapGetters, mapState, mapActions } from 'vuex'; -import { GlLoadingIcon } from '@gitlab-org/gitlab-ui'; +import { GlLoadingIcon } from '@gitlab/ui'; import { isScrolledToBottom } from '~/lib/utils/scroll_utils'; import { polyfillSticky } from '~/lib/utils/sticky'; import bp from '~/breakpoints'; @@ -210,10 +210,7 @@ export default { /> </div> - <callout - v-if="shouldRenderCalloutMessage" - :message="job.callout_message" - /> + <callout v-if="shouldRenderCalloutMessage" :message="job.callout_message" /> </header> <!-- EO Header Section --> @@ -245,23 +242,17 @@ export default { ref="sticky" class="js-archived-job prepend-top-default archived-sticky sticky-top" > - <icon - name="lock" - class="align-text-bottom" - /> + <icon name="lock" class="align-text-bottom" /> {{ __('This job is archived. Only the complete pipeline can be retried.') }} </div> - <!--job log --> - <div - v-if="hasTrace" - class="build-trace-container" - > + <!-- job log --> + <div v-if="hasTrace" class="build-trace-container"> <log-top-bar :class="{ 'sidebar-expanded': isSidebarOpen, 'sidebar-collapsed': !isSidebarOpen, - 'has-archived-block': job.archived + 'has-archived-block': job.archived, }" :erase-path="job.erase_path" :size="traceSize" @@ -273,14 +264,11 @@ export default { @scrollJobLogTop="scrollTop" @scrollJobLogBottom="scrollBottom" /> - <log - :trace="trace" - :is-complete="isTraceComplete" - /> + <log :trace="trace" :is-complete="isTraceComplete" /> </div> <!-- EO job log --> - <!--empty state --> + <!-- empty state --> <empty-state v-if="!hasTrace" class="js-job-empty-state" @@ -290,9 +278,9 @@ export default { :content="emptyStateIllustration.content" :action="emptyStateAction" /> - <!-- EO empty state --> + <!-- EO empty state --> - <!-- EO Body Section --> + <!-- EO Body Section --> </div> </template> @@ -301,7 +289,7 @@ export default { class="js-job-sidebar" :class="{ 'right-sidebar-expanded': isSidebarOpen, - 'right-sidebar-collapsed': !isSidebarOpen + 'right-sidebar-collapsed': !isSidebarOpen, }" :runner-help-url="runnerHelpUrl" /> diff --git a/app/assets/javascripts/jobs/components/job_container_item.vue b/app/assets/javascripts/jobs/components/job_container_item.vue index 3ddcfd11dca..845699a90b5 100644 --- a/app/assets/javascripts/jobs/components/job_container_item.vue +++ b/app/assets/javascripts/jobs/components/job_container_item.vue @@ -1,5 +1,5 @@ <script> -import { GlLink } from '@gitlab-org/gitlab-ui'; +import { GlLink } from '@gitlab/ui'; import tooltip from '~/vue_shared/directives/tooltip'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; import Icon from '~/vue_shared/components/icon.vue'; @@ -46,7 +46,7 @@ export default { class="build-job" :class="{ retried: job.retried, - active: isActive + active: isActive, }" > <gl-link @@ -56,21 +56,13 @@ export default { data-boundary="viewport" class="js-job-link" > - <icon - v-if="isActive" - name="arrow-right" - class="js-arrow-right icon-arrow-right" - /> + <icon v-if="isActive" name="arrow-right" class="js-arrow-right icon-arrow-right" /> <ci-icon :status="job.status" /> <span>{{ job.name ? job.name : job.id }}</span> - <icon - v-if="job.retried" - name="retry" - class="js-retry-icon" - /> + <icon v-if="job.retried" name="retry" class="js-retry-icon" /> </gl-link> </div> </template> diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue index 8b506b124ec..52e14f954ee 100644 --- a/app/assets/javascripts/jobs/components/job_log_controllers.vue +++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue @@ -1,5 +1,5 @@ <script> -import { GlTooltipDirective, GlLink, GlButton } from '@gitlab-org/gitlab-ui'; +import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui'; import { polyfillSticky } from '~/lib/utils/sticky'; import Icon from '~/vue_shared/components/icon.vue'; import { numberToHumanSize } from '~/lib/utils/number_utils'; @@ -75,12 +75,8 @@ export default { <template v-if="isTraceSizeVisible"> {{ jobLogSize }} - <gl-link - v-if="rawPath" - :href="rawPath" - class="js-raw-link raw-link" - > - {{ s__("Job|Complete Raw") }} + <gl-link v-if="rawPath" :href="rawPath" class="js-raw-link raw-link"> + {{ s__('Job|Complete Raw') }} </gl-link> </template> </div> @@ -112,11 +108,7 @@ export default { <!-- eo links --> <!-- scroll buttons --> - <div - v-gl-tooltip - :title="s__('Job|Scroll to top')" - class="controllers-buttons" - > + <div v-gl-tooltip :title="s__('Job|Scroll to top')" class="controllers-buttons"> <gl-button :disabled="isScrollTopDisabled" type="button" @@ -127,11 +119,7 @@ export default { </gl-button> </div> - <div - v-gl-tooltip - :title="s__('Job|Scroll to bottom')" - class="controllers-buttons" - > + <div v-gl-tooltip :title="s__('Job|Scroll to bottom')" class="controllers-buttons"> <gl-button :disabled="isScrollBottomDisabled" class="js-scroll-bottom btn-scroll btn-transparent btn-blank" diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue index f7b7b8f10f7..934ecd0e3ec 100644 --- a/app/assets/javascripts/jobs/components/sidebar.vue +++ b/app/assets/javascripts/jobs/components/sidebar.vue @@ -1,7 +1,7 @@ <script> import _ from 'underscore'; import { mapActions, mapState } from 'vuex'; -import { GlLink, GlButton } from '@gitlab-org/gitlab-ui'; +import { GlLink, GlButton } from '@gitlab/ui'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import { timeIntervalInWords } from '~/lib/utils/datetime_utility'; import Icon from '~/vue_shared/components/icon.vue'; @@ -107,17 +107,11 @@ export default { }; </script> <template> - <aside - class="right-sidebar build-sidebar" - data-offset-top="101" - data-spy="affix" - > + <aside class="right-sidebar build-sidebar" data-offset-top="101" data-spy="affix"> <div class="sidebar-container"> <div class="blocks-container"> <div class="block"> - <strong class="inline prepend-top-8"> - {{ job.name }} - </strong> + <strong class="inline prepend-top-8"> {{ job.name }} </strong> <gl-link v-if="job.retry_path" :class="retryButtonClass" @@ -134,8 +128,7 @@ export default { btn-inverted visible-md-block visible-lg-block" target="_blank" > - {{ __('Debug') }} - <icon name="external-link" /> + {{ __('Debug') }} <icon name="external-link" /> </gl-link> <gl-button :aria-label="__('Toggle Sidebar')" @@ -144,17 +137,10 @@ export default { float-right d-block d-md-none js-sidebar-build-toggle" @click="toggleSidebar" > - <i - aria-hidden="true" - data-hidden="true" - class="fa fa-angle-double-right" - ></i> + <i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-right"></i> </gl-button> </div> - <div - v-if="job.retry_path || job.new_issue_path" - class="block retry-link" - > + <div v-if="job.retry_path || job.new_issue_path" class="block retry-link"> <gl-link v-if="job.new_issue_path" :href="job.new_issue_path" @@ -172,17 +158,10 @@ export default { {{ __('Retry') }} </gl-link> </div> - <div :class="{ block : renderBlock }"> - <p - v-if="job.merge_request" - class="build-detail-row js-job-mr" - > - <span class="build-light-text"> - {{ __('Merge Request:') }} - </span> - <gl-link :href="job.merge_request.path"> - !{{ job.merge_request.iid }} - </gl-link> + <div :class="{ block: renderBlock }"> + <p v-if="job.merge_request" class="build-detail-row js-job-mr"> + <span class="build-light-text"> {{ __('Merge Request:') }} </span> + <gl-link :href="job.merge_request.path"> !{{ job.merge_request.iid }} </gl-link> </p> <detail-row @@ -203,12 +182,7 @@ export default { class="js-job-erased" title="Erased" /> - <detail-row - v-if="job.queued" - :value="queued" - class="js-job-queued" - title="Queued" - /> + <detail-row v-if="job.queued" :value="queued" class="js-job-queued" title="Queued" /> <detail-row v-if="hasTimeout" :help-url="runnerHelpUrl" @@ -216,37 +190,21 @@ export default { class="js-job-timeout" title="Timeout" /> - <detail-row - v-if="job.runner" - :value="runnerId" - class="js-job-runner" - title="Runner" - /> + <detail-row v-if="job.runner" :value="runnerId" class="js-job-runner" title="Runner" /> <detail-row v-if="job.coverage" :value="coverage" class="js-job-coverage" title="Coverage" /> - <p - v-if="job.tags.length" - class="build-detail-row js-job-tags" - > - <span class="build-light-text"> - {{ __('Tags:') }} - </span> - <span - v-for="(tag, i) in job.tags" - :key="i" - class="label label-primary"> + <p v-if="job.tags.length" class="build-detail-row js-job-tags"> + <span class="build-light-text"> {{ __('Tags:') }} </span> + <span v-for="(tag, i) in job.tags" :key="i" class="badge badge-primary"> {{ tag }} </span> </p> - <div - v-if="job.cancel_path" - class="btn-group prepend-top-5" - role="group"> + <div v-if="job.cancel_path" class="btn-group prepend-top-5" role="group"> <gl-link :href="job.cancel_path" class="js-cancel-job btn btn-sm btn-default" @@ -258,14 +216,8 @@ export default { </div> </div> - <artifacts-block - v-if="hasArtifact" - :artifact="job.artifact" - /> - <trigger-block - v-if="hasTriggers" - :trigger="job.trigger" - /> + <artifacts-block v-if="hasArtifact" :artifact="job.artifact" /> + <trigger-block v-if="hasTriggers" :trigger="job.trigger" /> <commit-block :is-last-block="hasStages" :commit="commit" @@ -281,11 +233,7 @@ export default { /> </div> - <jobs-container - v-if="jobs.length" - :jobs="jobs" - :job-id="job.id" - /> + <jobs-container v-if="jobs.length" :jobs="jobs" :job-id="job.id" /> </div> </aside> </template> diff --git a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue index cfedb38e17a..77be295e802 100644 --- a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue +++ b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue @@ -1,5 +1,5 @@ <script> -import { GlLink } from '@gitlab-org/gitlab-ui'; +import { GlLink } from '@gitlab/ui'; export default { name: 'SidebarDetailRow', @@ -34,27 +34,11 @@ export default { </script> <template> <p class="build-detail-row"> - <span - v-if="hasTitle" - class="build-light-text" - > - {{ title }}: - </span> - {{ value }} + <span v-if="hasTitle" class="build-light-text"> {{ title }}: </span> {{ value }} - <span - v-if="hasHelpURL" - class="help-button float-right" - > - <gl-link - :href="helpUrl" - target="_blank" - rel="noopener noreferrer nofollow" - > - <i - class="fa fa-question-circle" - aria-hidden="true" - ></i> + <span v-if="hasHelpURL" class="help-button float-right"> + <gl-link :href="helpUrl" target="_blank" rel="noopener noreferrer nofollow"> + <i class="fa fa-question-circle" aria-hidden="true"></i> </gl-link> </span> </p> diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue index dc26b246d71..90482500bbf 100644 --- a/app/assets/javascripts/jobs/components/stages_dropdown.vue +++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue @@ -36,26 +36,13 @@ export default { </script> <template> <div class="block-last dropdown"> - <ci-icon - :status="pipeline.details.status" - class="vertical-align-middle" - /> + <ci-icon :status="pipeline.details.status" class="vertical-align-middle" /> {{ __('Pipeline') }} - <a - :href="pipeline.path" - class="js-pipeline-path link-commit" - > - #{{ pipeline.id }} - </a> + <a :href="pipeline.path" class="js-pipeline-path link-commit"> #{{ pipeline.id }} </a> <template v-if="hasRef"> {{ __('from') }} - <a - :href="pipeline.ref.path" - class="link-commit ref-name" - > - {{ pipeline.ref.name }} - </a> + <a :href="pipeline.ref.path" class="link-commit ref-name"> {{ pipeline.ref.name }} </a> </template> <button @@ -63,20 +50,12 @@ export default { data-toggle="dropdown" class="js-selected-stage dropdown-menu-toggle prepend-top-8" > - {{ selectedStage }} - <i class="fa fa-chevron-down" ></i> + {{ selectedStage }} <i class="fa fa-chevron-down"></i> </button> <ul class="dropdown-menu"> - <li - v-for="stage in stages" - :key="stage.name" - > - <button - type="button" - class="js-stage-item stage-item" - @click="onStageClick(stage)" - > + <li v-for="stage in stages" :key="stage.name"> + <button type="button" class="js-stage-item stage-item" @click="onStageClick(stage);"> {{ stage.name }} </button> </li> diff --git a/app/assets/javascripts/jobs/components/stuck_block.vue b/app/assets/javascripts/jobs/components/stuck_block.vue index ca4bf471363..ec52d272168 100644 --- a/app/assets/javascripts/jobs/components/stuck_block.vue +++ b/app/assets/javascripts/jobs/components/stuck_block.vue @@ -1,5 +1,5 @@ <script> -import { GlLink } from '@gitlab-org/gitlab-ui'; +import { GlLink } from '@gitlab/ui'; /** * Renders Stuck Runners block for job's view. */ @@ -26,42 +26,31 @@ export default { </script> <template> <div class="bs-callout bs-callout-warning"> - <p - v-if="tags.length" - class="js-stuck-with-tags append-bottom-0" - > - {{ s__(`This job is stuck, because you don't have - any active runners online with any of these tags assigned to them:`) }} - <span - v-for="(tag, index) in tags" - :key="index" - class="badge badge-primary" - > + <p v-if="tags.length" class="js-stuck-with-tags append-bottom-0"> + {{ + s__(`This job is stuck because you don't have + any active runners online with any of these tags assigned to them:`) + }} + <span v-for="(tag, index) in tags" :key="index" class="badge badge-primary append-right-4"> {{ tag }} </span> </p> - <p - v-else-if="hasNoRunnersForProject" - class="js-stuck-no-runners append-bottom-0" - > - {{ s__(`Job|This job is stuck, because the project - doesn't have any runners online assigned to it.`) }} + <p v-else-if="hasNoRunnersForProject" class="js-stuck-no-runners append-bottom-0"> + {{ + s__(`Job|This job is stuck because the project + doesn't have any runners online assigned to it.`) + }} </p> - <p - v-else - class="js-stuck-no-active-runner append-bottom-0" - > - {{ s__(`This job is stuck, because you don't - have any active runners that can run this job.`) }} + <p v-else class="js-stuck-no-active-runner append-bottom-0"> + {{ + s__(`This job is stuck because you don't + have any active runners that can run this job.`) + }} </p> - {{ __("Go to") }} - <gl-link - v-if="runnersPath" - :href="runnersPath" - class="js-runners-path" - > - {{ __("Runners page") }} + {{ __('Go to') }} + <gl-link v-if="runnersPath" :href="runnersPath" class="js-runners-path"> + {{ __('Runners page') }} </gl-link> </div> </template> diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue index 1e62c05b4d1..3cd3b743108 100644 --- a/app/assets/javascripts/jobs/components/trigger_block.vue +++ b/app/assets/javascripts/jobs/components/trigger_block.vue @@ -1,5 +1,8 @@ <script> -import { GlButton } from '@gitlab-org/gitlab-ui'; +import { __ } from '~/locale'; +import { GlButton } from '@gitlab/ui'; + +const HIDDEN_VALUE = '••••••'; export default { components: { @@ -13,17 +16,26 @@ export default { }, data() { return { - areVariablesVisible: false, + showVariableValues: false, }; }, computed: { hasVariables() { return this.trigger.variables && this.trigger.variables.length > 0; }, + getToggleButtonText() { + return this.showVariableValues ? __('Hide values') : __('Reveal values'); + }, + hasValues() { + return this.trigger.variables.some(v => v.value); + }, }, methods: { - revealVariables() { - this.areVariablesVisible = true; + toggleValues() { + this.showVariableValues = !this.showVariableValues; + }, + getDisplayValue(value) { + return this.showVariableValues ? value : HIDDEN_VALUE; }, }, }; @@ -31,52 +43,35 @@ export default { <template> <div class="build-widget block"> - <h4 class="title"> - {{ __('Trigger') }} - </h4> + <h4 class="title">{{ __('Trigger') }}</h4> <p v-if="trigger.short_token" class="js-short-token" + :class="{ 'append-bottom-0': !hasVariables }" > - <span class="build-light-text"> - {{ __('Token') }} - </span> - {{ trigger.short_token }} + <span class="build-light-text"> {{ __('Token') }} </span> {{ trigger.short_token }} </p> - <p v-if="hasVariables"> - <gl-button - v-if="!areVariablesVisible" - type="button" - class="btn btn-default group js-reveal-variables" - @click="revealVariables" - > - {{ __('Reveal Variables') }} - </gl-button> - </p> + <template v-if="hasVariables"> + <p class="trigger-variables-btn-container"> + <span class="build-light-text"> {{ __('Variables:') }} </span> - <dl - v-if="areVariablesVisible" - class="js-build-variables trigger-build-variables" - > - <template - v-for="variable in trigger.variables" - > - <dt - :key="`${variable.key}-variable`" - class="js-build-variable trigger-build-variable" - > - {{ variable.key }} - </dt> + <gl-button v-if="hasValues" class="group js-reveal-variables" @click="toggleValues"> + {{ getToggleButtonText }} + </gl-button> + </p> - <dd - :key="`${variable.key}-value`" - class="js-build-value trigger-build-value" - > - {{ variable.value }} - </dd> - </template> - </dl> + <table class="js-build-variables trigger-build-variables"> + <tr v-for="(variable, index) in trigger.variables" :key="`${variable.key}-${index}`"> + <td class="js-build-variable trigger-build-variable trigger-variables-table-cell"> + {{ variable.key }} + </td> + <td class="js-build-value trigger-build-value trigger-variables-table-cell"> + {{ getDisplayValue(variable.value) }} + </td> + </tr> + </table> + </template> </div> </template> diff --git a/app/assets/javascripts/jobs/store/getters.js b/app/assets/javascripts/jobs/store/getters.js index d440b2c9ef1..35e92b0b5d9 100644 --- a/app/assets/javascripts/jobs/store/getters.js +++ b/app/assets/javascripts/jobs/store/getters.js @@ -42,7 +42,7 @@ export const emptyStateIllustration = state => (state.job && state.job.status && state.job.status.illustration) || {}; export const emptyStateAction = state => - (state.job && state.job.status && state.job.status.action) || {}; + (state.job && state.job.status && state.job.status.action) || null; export const isScrollingDown = state => isScrolledToBottom() && !state.isTraceComplete; |