Switch to webpack SVG paths for runner empty state

What does this MR do and why?

This change swaps the Rails provided paths for SVG images for paths provided by Webpack ?url resource query.

This helps simplify way we import SVG paths into the empty states in the runner area.

Screenshots or screen recordings

Admin > CI/CD > Runners http://gdk.test:3000/admin/runners

empty state no results state
image image
Note: To test the "empty state" illustration I used the following diff:
diff --git a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
index 4d88feebe53b..4183b4dacf4d 100644
--- a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
@@ -86,7 +86,8 @@ export default {
       update(data) {
         const { runners } = data;
         return {
-          items: runners?.nodes || [],
+          items: [],
+          // items: runners?.nodes || [],
           pageInfo: runners?.pageInfo || {},
         };
       },

Group > CI/CD > Runners http://gdk.test:3000/groups/gnuwget/-/runners

empty state no results state
image image

How to set up and validate locally

Visit the pages above

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Miguel Rincon

Merge request reports

Loading