diff options
Diffstat (limited to 'app/assets/javascripts/ci/job_details/components')
-rw-r--r-- | app/assets/javascripts/ci/job_details/components/empty_state.vue | 51 | ||||
-rw-r--r-- | app/assets/javascripts/ci/job_details/components/manual_variables_form.vue | 2 |
2 files changed, 27 insertions, 26 deletions
diff --git a/app/assets/javascripts/ci/job_details/components/empty_state.vue b/app/assets/javascripts/ci/job_details/components/empty_state.vue index 5756d4a71df..ac4f9c0c7fb 100644 --- a/app/assets/javascripts/ci/job_details/components/empty_state.vue +++ b/app/assets/javascripts/ci/job_details/components/empty_state.vue @@ -1,10 +1,10 @@ <script> -import { GlLink } from '@gitlab/ui'; +import { GlButton } from '@gitlab/ui'; import ManualVariablesForm from '~/ci/job_details/components/manual_variables_form.vue'; export default { components: { - GlLink, + GlButton, ManualVariablesForm, }, props: { @@ -65,35 +65,38 @@ export default { }; </script> <template> - <div class="row empty-state"> - <div class="col-12"> - <div :class="illustrationSizeClass" class="svg-content"> - <img :src="illustrationPath" /> - </div> + <div class="gl-display-flex gl-empty-state gl-text-center gl-flex-direction-column"> + <div :class="illustrationSizeClass" class="gl-max-w-full"> + <!-- eslint-disable @gitlab/vue-require-i18n-attribute-strings --> + <img alt="" class="gl-max-w-full" :src="illustrationPath" /> </div> - - <div class="col-12"> - <div class="text-content"> - <h4 class="text-center" data-testid="job-empty-state-title">{{ title }}</h4> - - <p v-if="content" data-testid="job-empty-state-content">{{ content }}</p> - </div> + <div class="gl-empty-state-content gl-mx-auto gl-my-0 gl-m-auto gl-p-5"> + <h1 + class="gl-font-size-h-display gl-line-height-36 gl-mt-0 gl-mb-0" + data-testid="job-empty-state-title" + > + {{ title }} + </h1> + <p v-if="content" class="gl-mt-4 gl-mb-0" data-testid="job-empty-state-content"> + {{ content }} + </p> <manual-variables-form v-if="shouldRenderManualVariables" :is-retryable="isRetryable" :job-id="jobId" @hideManualVariablesForm="$emit('hideManualVariablesForm')" /> - <div v-if="action && !shouldRenderManualVariables" class="text-content"> - <div class="text-center"> - <gl-link - :href="action.path" - :data-method="action.method" - class="btn gl-button btn-confirm gl-text-decoration-none!" - data-testid="job-empty-state-action" - >{{ action.button_title }}</gl-link - > - </div> + <div + v-if="action && !shouldRenderManualVariables" + class="gl-display-flex gl-flex-wrap gl-mt-5 gl-justify-content-center" + > + <gl-button + :href="action.path" + :data-method="action.method" + variant="confirm" + data-testid="job-empty-state-action" + >{{ action.button_title }}</gl-button + > </div> </div> </div> diff --git a/app/assets/javascripts/ci/job_details/components/manual_variables_form.vue b/app/assets/javascripts/ci/job_details/components/manual_variables_form.vue index 836426f0bde..cc833eb2a45 100644 --- a/app/assets/javascripts/ci/job_details/components/manual_variables_form.vue +++ b/app/assets/javascripts/ci/job_details/components/manual_variables_form.vue @@ -289,13 +289,11 @@ export default { <div class="gl-display-flex gl-justify-content-center gl-mt-5"> <gl-button v-if="isRetryable" - class="gl-mt-5" data-testid="cancel-btn" @click="$emit('hideManualVariablesForm')" >{{ $options.i18n.cancel }}</gl-button > <gl-button - class="gl-mt-5" variant="confirm" category="primary" :disabled="runBtnDisabled" |