Merge branch...

Merge branch '254673-replace-cycle_analytics-icon_branch-svg-with-commit-svg-in-gitlab-svgs-to-remove-these-svgs' into 'master'

Replace in-repo SVGs with @gitlab/svgs in Project Value Stream Analytics (Cycle Analytics)

See merge request gitlab-org/gitlab!43823

app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue

 <script>
 import { GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
-import iconBranch from '../svg/icon_branch.svg';
 import limitWarning from './limit_warning_component.vue';
 import totalTime from './total_time_component.vue';
 
@@ -27,11 +26,6 @@ export default {
       required: false,
     },
   },
-  computed: {
-    iconBranch() {
-      return iconBranch;
-    },
-  },
 };
 </script>
 <template>
@@ -49,7 +43,9 @@ export default {
             <a :href="build.url" class="pipeline-id"> #{{ build.id }} </a>
             <gl-icon :size="16" name="fork" />
             <a :href="build.branch.url" class="ref-name"> {{ build.branch.name }} </a>
-            <span v-safe-html="iconBranch" class="icon-branch"> </span>
+            <span class="icon-branch gl-text-gray-400">
+              <gl-icon name="commit" :size="14" />
+            </span>
             <a :href="build.commitUrl" class="commit-sha"> {{ build.shortSha }} </a>
           </h5>
           <span>

app/assets/javascripts/cycle_analytics/components/stage_test_component.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlIcon } from '@gitlab/ui';
-import iconBuildStatus from '../svg/icon_build_status.svg';
-import iconBranch from '../svg/icon_branch.svg';
 import limitWarning from './limit_warning_component.vue';
 import totalTime from './total_time_component.vue';
 
@@ -24,14 +21,6 @@ export default {
       required: false,
     },
   },
-  computed: {
-    iconBuildStatus() {
-      return iconBuildStatus;
-    },
-    iconBranch() {
-      return iconBranch;
-    },
-  },
 };
 </script>
 <template>
@@ -44,12 +33,16 @@ export default {
       <li v-for="(build, i) in items" :key="i" class="stage-event-item item-build-component">
         <div class="item-details">
           <h5 class="item-title">
-            <span class="icon-build-status" v-html="iconBuildStatus"> </span>
+            <span class="icon-build-status gl-text-green-500">
+              <gl-icon name="status_success" :size="14" />
+            </span>
             <a :href="build.url" class="item-build-name"> {{ build.name }} </a> &middot;
             <a :href="build.url" class="pipeline-id"> #{{ build.id }} </a>
             <gl-icon :size="16" name="fork" />
             <a :href="build.branch.url" class="ref-name"> {{ build.branch.name }} </a>
-            <span class="icon-branch" v-html="iconBranch"> </span>
+            <span class="icon-branch gl-text-gray-400">
+              <gl-icon name="commit" :size="14" />
+            </span>
             <a :href="build.commitUrl" class="commit-sha"> {{ build.shortSha }} </a>
           </h5>
           <span>

app/assets/javascripts/cycle_analytics/svg/icon_branch.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="#8C8C8C" fill-rule="evenodd" d="M9.678 6.722C9.353 5.167 8.053 4 6.5 4S3.647 5.167 3.322 6.722h-2.6c-.397 0-.722.35-.722.778 0 .428.325.778.722.778h2.6C3.647 9.833 4.947 11 6.5 11s2.853-1.167 3.178-2.722h2.6c.397 0 .722-.35.722-.778 0-.428-.325-.778-.722-.778h-2.6zM4.694 7.5c0-1.09.795-1.944 1.806-1.944 1.01 0 1.806.855 1.806 1.944 0 1.09-.795 1.944-1.806 1.944-1.01 0-1.806-.855-1.806-1.944z"/></svg>

app/assets/javascripts/cycle_analytics/svg/icon_build_status.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><g fill="#31AF64" fill-rule="evenodd"><path d="M12.5 7c0-3.038-2.462-5.5-5.5-5.5S1.5 3.962 1.5 7s2.462 5.5 5.5 5.5 5.5-2.462 5.5-5.5zM0 7c0-3.866 3.134-7 7-7s7 3.134 7 7-3.134 7-7 7-7-3.134-7-7z"/><path d="M6.28 7.697L5.045 6.464c-.117-.117-.305-.117-.42-.002l-.614.614c-.11.113-.11.303.007.42l1.91 1.91c.19.19.51.197.703.004l.264-.265L9.997 6.04c.108-.107.107-.293-.01-.408l-.612-.614c-.114-.113-.298-.12-.41-.01L6.28 7.7z"/></g></svg>

app/assets/javascripts/cycle_analytics/svg/icon_commit.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="#8F8F8F" fill-rule="evenodd" d="M28.777 18c-.91-4.008-4.494-7-8.777-7-4.283 0-7.868 2.992-8.777 7H4.01C2.9 18 2 18.895 2 20c0 1.112.9 2 2.01 2h7.213c.91 4.008 4.494 7 8.777 7 4.283 0 7.868-2.992 8.777-7h7.214C37.1 22 38 21.105 38 20c0-1.112-.9-2-2.01-2h-7.213zM20 25c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5z"/></svg>

changelogs/unreleased/254673-replace-cycle_analytics-icon_branch-svg-with-commit-svg-in-gitlab-.yml

+---
+title: Replace in-repo SVGs with @gitlab/svgs in Cycle Analytics
+merge_request: 43823
+author: Takuya Noguchi
+type: other