From 3bad95bb777af89f264056ade339033669125225 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Fri, 23 Feb 2024 11:36:44 +0100
Subject: [PATCH] Replace manual and failed pipeline illustrations

Changelog: changed
EE: true
---
 .../ci/pipelines_page/pipelines.vue           |   4 +-
 .../legacy_pipelines_table_wrapper.vue        |   1 -
 .../projects/commit/_pipelines_list.haml      |   2 +-
 .../gitlab/ci/status/waiting_for_approval.rb  |   4 +-
 .../build/failed_unmet_prerequisites.rb       |   4 +-
 lib/gitlab/ci/status/build/manual.rb          |   4 +-
 spec/frontend/ci/jobs_mock_data.js            |   8 +-
 .../linked_pipelines_mock.json                | 120 +++++++++---------
 .../environments/graphql/mock_data.js         |  16 +--
 9 files changed, 80 insertions(+), 83 deletions(-)

diff --git a/app/assets/javascripts/ci/pipelines_page/pipelines.vue b/app/assets/javascripts/ci/pipelines_page/pipelines.vue
index 98e005a162fff7..807712c36b3d68 100644
--- a/app/assets/javascripts/ci/pipelines_page/pipelines.vue
+++ b/app/assets/javascripts/ci/pipelines_page/pipelines.vue
@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import NO_PIPELINES_SVG from '@gitlab/svgs/dist/illustrations/empty-state/empty-pipeline-md.svg?url';
-import ERROR_STATE_SVG from '@gitlab/svgs/dist/illustrations/pipelines_failed.svg?url';
+import ERROR_STATE_SVG from '@gitlab/svgs/dist/illustrations/empty-state/empty-job-failed-md.svg?url';
 import { GlEmptyState, GlIcon, GlLoadingIcon, GlCollapsibleListbox } from '@gitlab/ui';
 import { isEqual } from 'lodash';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
@@ -410,7 +410,6 @@ export default {
       <gl-empty-state
         v-else-if="stateToRender === $options.stateMap.error"
         :svg-path="$options.errorStateSvgPath"
-        :svg-height="null"
         :title="s__('Pipelines|There was an error fetching the pipelines.')"
         :description="s__('Pipelines|Try again in a few moments or contact your support team.')"
       />
@@ -418,7 +417,6 @@ export default {
       <gl-empty-state
         v-else-if="stateToRender === $options.stateMap.emptyTab"
         :svg-path="$options.noPipelinesSvgPath"
-        :svg-height="150"
         :title="emptyTabMessage"
       />
 
diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index 13c8dbf101af07..fea77a5a90e8d7 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -229,7 +229,6 @@ export default {
     <gl-empty-state
       v-else-if="shouldRenderErrorState"
       :svg-path="errorStateSvgPath"
-      :svg-height="null"
       :title="
         s__(`Pipelines|There was an error fetching the pipelines.
         Try again in a few moments or contact your support team.`)
diff --git a/app/views/projects/commit/_pipelines_list.haml b/app/views/projects/commit/_pipelines_list.haml
index 382cb499fe181c..d21ba76626248a 100644
--- a/app/views/projects/commit/_pipelines_list.haml
+++ b/app/views/projects/commit/_pipelines_list.haml
@@ -6,7 +6,7 @@
   full_path: @project.full_path,
   graphql_path: api_graphql_path,
   "empty-state-svg-path" => image_path('illustrations/empty-state/empty-pipeline-md.svg'),
-  "error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),
+  "error-state-svg-path" => image_path('illustrations/empty-state/empty-job-failed-md.svg'),
   "project-id": @project.id,
   "artifacts-endpoint" => downloadable_artifacts_project_pipeline_path(@project, artifacts_endpoint_placeholder, format: :json),
   "artifacts-endpoint-placeholder" => artifacts_endpoint_placeholder,
diff --git a/ee/lib/ee/gitlab/ci/status/waiting_for_approval.rb b/ee/lib/ee/gitlab/ci/status/waiting_for_approval.rb
index b2279ce0fee1cd..5ad05b4c60883c 100644
--- a/ee/lib/ee/gitlab/ci/status/waiting_for_approval.rb
+++ b/ee/lib/ee/gitlab/ci/status/waiting_for_approval.rb
@@ -9,8 +9,8 @@ module WaitingForApproval
 
           def illustration
             {
-              image: 'illustrations/manual_action.svg',
-              size: 'svg-394',
+              image: 'illustrations/empty-state/empty-job-manual-md.svg',
+              size: '',
               title: _('Waiting for approvals'),
               content: format(
                 _("This job deploys to the protected environment \"%{environment}\", which requires approvals. " \
diff --git a/lib/gitlab/ci/status/build/failed_unmet_prerequisites.rb b/lib/gitlab/ci/status/build/failed_unmet_prerequisites.rb
index e82c8050be7e36..1604348eca0813 100644
--- a/lib/gitlab/ci/status/build/failed_unmet_prerequisites.rb
+++ b/lib/gitlab/ci/status/build/failed_unmet_prerequisites.rb
@@ -7,8 +7,8 @@ module Build
         class FailedUnmetPrerequisites < Status::Extended
           def illustration
             {
-              image: 'illustrations/pipelines_failed.svg',
-              size: 'svg-content svg-430',
+              image: 'illustrations/empty-state/empty-job-failed-md.svg',
+              size: '',
               title: _('Failed to create resources'),
               content: _('Retry this job in order to create the necessary resources.')
             }
diff --git a/lib/gitlab/ci/status/build/manual.rb b/lib/gitlab/ci/status/build/manual.rb
index 841ad84eb52486..0e16084d49173f 100644
--- a/lib/gitlab/ci/status/build/manual.rb
+++ b/lib/gitlab/ci/status/build/manual.rb
@@ -11,8 +11,8 @@ def self.matches?(build, user)
 
           def illustration
             {
-              image: 'illustrations/manual_action.svg',
-              size: 'svg-content svg-394',
+              image: 'illustrations/empty-state/empty-job-manual-md.svg',
+              size: '',
               title: _('This job requires a manual action'),
               content: illustration_content
             }
diff --git a/spec/frontend/ci/jobs_mock_data.js b/spec/frontend/ci/jobs_mock_data.js
index 4e45c633dfb688..04f250e08c0e04 100644
--- a/spec/frontend/ci/jobs_mock_data.js
+++ b/spec/frontend/ci/jobs_mock_data.js
@@ -862,8 +862,8 @@ export const stages = [
           has_details: true,
           details_path: '/gitlab-org/gitlab-shell/-/jobs/458',
           illustration: {
-            image: 'illustrations/manual_action.svg',
-            size: 'svg-content svg-394',
+            image: 'illustrations/empty-state/empty-job-manual-md.svg',
+            size: '',
             title: 'This job requires a manual action',
             content:
               'This job depends on a user to trigger its process. Often they are used to deploy code to production environments',
@@ -896,8 +896,8 @@ export const stages = [
               has_details: true,
               details_path: '/gitlab-org/gitlab-shell/-/jobs/458',
               illustration: {
-                image: 'illustrations/manual_action.svg',
-                size: 'svg-content svg-394',
+                image: 'illustrations/empty-state/empty-job-manual-md.svg',
+                size: '',
                 title: 'This job requires a manual action',
                 content:
                   'This job depends on a user to trigger its process. Often they are used to deploy code to production environments',
diff --git a/spec/frontend/ci/pipeline_details/linked_pipelines_mock.json b/spec/frontend/ci/pipeline_details/linked_pipelines_mock.json
index b5d7b59439169d..11ad369be563f0 100644
--- a/spec/frontend/ci/pipeline_details/linked_pipelines_mock.json
+++ b/spec/frontend/ci/pipeline_details/linked_pipelines_mock.json
@@ -57,8 +57,8 @@
               "has_details": true,
               "details_path": "/gitlab-org/gitlab-runner/-/jobs/72469032",
               "illustration": {
-                "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                "size": "svg-content svg-394",
+                "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                "size": "",
                 "title": "This job requires a manual action",
                 "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
               },
@@ -93,8 +93,8 @@
                   "has_details": true,
                   "details_path": "/gitlab-org/gitlab-runner/-/jobs/72469032",
                   "illustration": {
-                    "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                    "size": "svg-content svg-394",
+                    "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                    "size": "",
                     "title": "This job requires a manual action",
                     "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                   },
@@ -222,8 +222,8 @@
               "has_details": true,
               "details_path": "/gitlab-org/gitlab-runner/-/jobs/72469034",
               "illustration": {
-                "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                "size": "svg-content svg-394",
+                "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                "size": "",
                 "title": "This job requires a manual action",
                 "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
               },
@@ -257,8 +257,8 @@
                   "has_details": true,
                   "details_path": "/gitlab-org/gitlab-runner/-/jobs/72469034",
                   "illustration": {
-                    "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                    "size": "svg-content svg-394",
+                    "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                    "size": "",
                     "title": "This job requires a manual action",
                     "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                   },
@@ -397,8 +397,8 @@
                 "has_details": true,
                 "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982853",
                 "illustration": {
-                  "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                  "size": "svg-content svg-394",
+                  "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                  "size": "",
                   "title": "This job requires a manual action",
                   "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                 },
@@ -432,8 +432,8 @@
                     "has_details": true,
                     "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982853",
                     "illustration": {
-                      "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                      "size": "svg-content svg-394",
+                      "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                      "size": "",
                       "title": "This job requires a manual action",
                       "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                     },
@@ -461,8 +461,8 @@
                 "has_details": true,
                 "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982854",
                 "illustration": {
-                  "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                  "size": "svg-content svg-394",
+                  "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                  "size": "",
                   "title": "This job requires a manual action",
                   "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                 },
@@ -496,8 +496,8 @@
                     "has_details": true,
                     "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982854",
                     "illustration": {
-                      "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                      "size": "svg-content svg-394",
+                      "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                      "size": "",
                       "title": "This job requires a manual action",
                       "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                     },
@@ -525,8 +525,8 @@
                 "has_details": true,
                 "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982855",
                 "illustration": {
-                  "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                  "size": "svg-content svg-394",
+                  "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                  "size": "",
                   "title": "This job requires a manual action",
                   "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                 },
@@ -560,8 +560,8 @@
                     "has_details": true,
                     "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982855",
                     "illustration": {
-                      "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                      "size": "svg-content svg-394",
+                      "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                      "size": "",
                       "title": "This job requires a manual action",
                       "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                     },
@@ -874,8 +874,8 @@
                   "has_details": true,
                   "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982853",
                   "illustration": {
-                    "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                    "size": "svg-content svg-394",
+                    "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                    "size": "",
                     "title": "This job requires a manual action",
                     "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                   },
@@ -909,8 +909,8 @@
                       "has_details": true,
                       "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982853",
                       "illustration": {
-                        "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                        "size": "svg-content svg-394",
+                        "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                        "size": "",
                         "title": "This job requires a manual action",
                         "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                       },
@@ -938,8 +938,8 @@
                   "has_details": true,
                   "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982854",
                   "illustration": {
-                    "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                    "size": "svg-content svg-394",
+                    "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                    "size": "",
                     "title": "This job requires a manual action",
                     "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                   },
@@ -973,8 +973,8 @@
                       "has_details": true,
                       "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982854",
                       "illustration": {
-                        "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                        "size": "svg-content svg-394",
+                        "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                        "size": "",
                         "title": "This job requires a manual action",
                         "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                       },
@@ -1002,8 +1002,8 @@
                   "has_details": true,
                   "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982855",
                   "illustration": {
-                    "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                    "size": "svg-content svg-394",
+                    "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                    "size": "",
                     "title": "This job requires a manual action",
                     "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                   },
@@ -1037,8 +1037,8 @@
                       "has_details": true,
                       "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982855",
                       "illustration": {
-                        "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                        "size": "svg-content svg-394",
+                        "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                        "size": "",
                         "title": "This job requires a manual action",
                         "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                       },
@@ -1357,8 +1357,8 @@
                   "has_details": true,
                   "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982853",
                   "illustration": {
-                    "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                    "size": "svg-content svg-394",
+                    "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                    "size": "",
                     "title": "This job requires a manual action",
                     "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                   },
@@ -1392,8 +1392,8 @@
                       "has_details": true,
                       "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982853",
                       "illustration": {
-                        "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                        "size": "svg-content svg-394",
+                        "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                        "size": "",
                         "title": "This job requires a manual action",
                         "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                       },
@@ -1421,8 +1421,8 @@
                   "has_details": true,
                   "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982854",
                   "illustration": {
-                    "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                    "size": "svg-content svg-394",
+                    "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                    "size": "",
                     "title": "This job requires a manual action",
                     "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                   },
@@ -1456,8 +1456,8 @@
                       "has_details": true,
                       "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982854",
                       "illustration": {
-                        "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                        "size": "svg-content svg-394",
+                        "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                        "size": "",
                         "title": "This job requires a manual action",
                         "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                       },
@@ -1485,8 +1485,8 @@
                   "has_details": true,
                   "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982855",
                   "illustration": {
-                    "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                    "size": "svg-content svg-394",
+                    "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                    "size": "",
                     "title": "This job requires a manual action",
                     "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                   },
@@ -1520,8 +1520,8 @@
                       "has_details": true,
                       "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982855",
                       "illustration": {
-                        "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                        "size": "svg-content svg-394",
+                        "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                        "size": "",
                         "title": "This job requires a manual action",
                         "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                       },
@@ -1839,8 +1839,8 @@
                   "has_details": true,
                   "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982853",
                   "illustration": {
-                    "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                    "size": "svg-content svg-394",
+                    "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                    "size": "",
                     "title": "This job requires a manual action",
                     "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                   },
@@ -1874,8 +1874,8 @@
                       "has_details": true,
                       "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982853",
                       "illustration": {
-                        "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                        "size": "svg-content svg-394",
+                        "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                        "size": "",
                         "title": "This job requires a manual action",
                         "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                       },
@@ -1903,8 +1903,8 @@
                   "has_details": true,
                   "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982854",
                   "illustration": {
-                    "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                    "size": "svg-content svg-394",
+                    "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                    "size": "",
                     "title": "This job requires a manual action",
                     "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                   },
@@ -1938,8 +1938,8 @@
                       "has_details": true,
                       "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982854",
                       "illustration": {
-                        "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                        "size": "svg-content svg-394",
+                        "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                        "size": "",
                         "title": "This job requires a manual action",
                         "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                       },
@@ -1967,8 +1967,8 @@
                   "has_details": true,
                   "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982855",
                   "illustration": {
-                    "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                    "size": "svg-content svg-394",
+                    "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                    "size": "",
                     "title": "This job requires a manual action",
                     "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                   },
@@ -2002,8 +2002,8 @@
                       "has_details": true,
                       "details_path": "/gitlab-com/gitlab-docs/-/jobs/114982855",
                       "illustration": {
-                        "image": "https://assets.gitlab-static.net/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                        "size": "svg-content svg-394",
+                        "image": "https://assets.gitlab-static.net/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                        "size": "",
                         "title": "This job requires a manual action",
                         "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                       },
@@ -3389,8 +3389,8 @@
                       "has_details": true,
                       "details_path": "/h5bp/html5-boilerplate/-/jobs/545",
                       "illustration": {
-                        "image": "/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                        "size": "svg-content svg-394",
+                        "image": "/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                        "size": "",
                         "title": "This job requires a manual action",
                         "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                       },
@@ -3425,8 +3425,8 @@
                           "has_details": true,
                           "details_path": "/h5bp/html5-boilerplate/-/jobs/545",
                           "illustration": {
-                            "image": "/assets/illustrations/manual_action-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
-                            "size": "svg-content svg-394",
+                            "image": "/assets/illustrations/empty-state/empty-job-manual-md-2b4ca0d1bcfd92aebf33d484e36cbf7a102d007f76b5a0cfea636033a629d601.svg",
+                            "size": "",
                             "title": "This job requires a manual action",
                             "content": "This job depends on a user to trigger its process. Often they are used to deploy code to production environments"
                           },
diff --git a/spec/frontend/environments/graphql/mock_data.js b/spec/frontend/environments/graphql/mock_data.js
index 490be5d25f161c..a6aaea5899f6c2 100644
--- a/spec/frontend/environments/graphql/mock_data.js
+++ b/spec/frontend/environments/graphql/mock_data.js
@@ -153,8 +153,8 @@ export const environmentsApp = {
               details_path: '/h5bp/html5-boilerplate/-/jobs/911',
               illustration: {
                 image:
-                  '/assets/illustrations/manual_action-c55aee2c5f9ebe9f72751480af8bb307be1a6f35552f344cc6d1bf979d3422f6.svg',
-                size: 'svg-content svg-394',
+                  '/assets/illustrations/empty-state/empty-job-manual-md-c55aee2c5f9ebe9f72751480af8bb307be1a6f35552f344cc6d1bf979d3422f6.svg',
+                size: '',
                 title: 'This job requires a manual action',
                 content:
                   'This job requires manual intervention to start. Before starting this job, you can add variables below for last-minute configuration changes.',
@@ -362,8 +362,8 @@ export const resolvedEnvironmentsApp = {
               detailsPath: '/h5bp/html5-boilerplate/-/jobs/911',
               illustration: {
                 image:
-                  '/assets/illustrations/manual_action-c55aee2c5f9ebe9f72751480af8bb307be1a6f35552f344cc6d1bf979d3422f6.svg',
-                size: 'svg-content svg-394',
+                  '/assets/illustrations/empty-state/empty-job-manual-md-c55aee2c5f9ebe9f72751480af8bb307be1a6f35552f344cc6d1bf979d3422f6.svg',
+                size: '',
                 title: 'This job requires a manual action',
                 content:
                   'This job requires manual intervention to start. Before starting this job, you can add variables below for last-minute configuration changes.',
@@ -664,8 +664,8 @@ export const resolvedEnvironment = {
           detailsPath: '/h5bp/html5-boilerplate/-/jobs/1015',
           illustration: {
             image:
-              '/assets/illustrations/manual_action-c55aee2c5f9ebe9f72751480af8bb307be1a6f35552f344cc6d1bf979d3422f6.svg',
-            size: 'svg-content svg-394',
+              '/assets/illustrations/empty-state/empty-job-manual-md-c55aee2c5f9ebe9f72751480af8bb307be1a6f35552f344cc6d1bf979d3422f6.svg',
+            size: '',
             title: 'This job requires a manual action',
             content:
               'This job requires manual intervention to start. Before starting this job, you can add variables below for last-minute configuration changes.',
@@ -1084,8 +1084,8 @@ export const resolvedEnvironmentToRollback = {
           detailsPath: '/h5bp/html5-boilerplate/-/jobs/1015',
           illustration: {
             image:
-              '/assets/illustrations/manual_action-c55aee2c5f9ebe9f72751480af8bb307be1a6f35552f344cc6d1bf979d3422f6.svg',
-            size: 'svg-content svg-394',
+              '/assets/illustrations/empty-state/empty-job-manual-md-c55aee2c5f9ebe9f72751480af8bb307be1a6f35552f344cc6d1bf979d3422f6.svg',
+            size: '',
             title: 'This job requires a manual action',
             content:
               'This job requires manual intervention to start. Before starting this job, you can add variables below for last-minute configuration changes.',
-- 
GitLab