Add latest changes from gitlab-org/gitlab@master

3 files changed, 29 insertions, 28 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"
diff --git a/app/serializers/detailed_status_entity.rb b/app/serializers/detailed_status_entity.rb
index 1f1a805af67..37d7bb8fdbe 100644
--- a/app/serializers/detailed_status_entity.rb
+++ b/app/serializers/detailed_status_entity.rb
@@ -15,8 +15,8 @@ class DetailedStatusEntity < Grape::Entity
     type: 'object',
     example: <<~JSON
       {
-        "image": "illustrations/job_not_triggered.svg",
-        "size": "svg-306",
+        "image": "illustrations/empty-state/empty-job-not-triggered-md.svg",
+        "size": "",
         "title": "This job has not been triggered yet",
         "content": "This job depends on upstream jobs that need to succeed in order for this job to be triggered"
       }