Add icons for todo target types

app/assets/javascripts/todos/components/todo_item_title.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import StatusBadge from '~/issuable/components/status_badge.vue';
 import { s__ } from '~/locale';
 import { STATUS_OPEN, TYPE_ALERT, TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
@@ -6,13 +7,17 @@ import {
   TODO_ACTION_TYPE_MEMBER_ACCESS_REQUESTED,
   TODO_TARGET_TYPE_ALERT,
   TODO_TARGET_TYPE_DESIGN,
+  TODO_TARGET_TYPE_EPIC,
   TODO_TARGET_TYPE_ISSUE,
   TODO_TARGET_TYPE_MERGE_REQUEST,
+  TODO_TARGET_TYPE_PIPELINE,
+  TODO_TARGET_TYPE_SSH_KEY,
 } from '../constants';
 
 export default {
   components: {
     StatusBadge,
+    GlIcon,
   },
   props: {
     todo: {
@@ -97,6 +102,26 @@ export default {
 
       return '';
     },
+    icon() {
+      switch (this.todo.targetType) {
+        case TODO_TARGET_TYPE_ISSUE:
+          return 'issues';
+        case TODO_TARGET_TYPE_MERGE_REQUEST:
+          return 'merge-request';
+        case TODO_TARGET_TYPE_PIPELINE:
+          return 'pipeline';
+        case TODO_TARGET_TYPE_ALERT:
+          return 'status-alert';
+        case TODO_TARGET_TYPE_DESIGN:
+          return 'issues';
+        case TODO_TARGET_TYPE_SSH_KEY:
+          return 'token';
+        case TODO_TARGET_TYPE_EPIC:
+          return 'epic';
+        default:
+          return null;
+      }
+    },
   },
   i18n: {
     removed: s__('Todos|(removed)'),
@@ -109,6 +134,7 @@ export default {
     class="gl-flex gl-items-center gl-gap-2 gl-overflow-hidden gl-whitespace-nowrap gl-px-2 gl-pb-3 gl-pt-2 gl-text-sm gl-text-subtle sm:gl-mr-0 sm:gl-pr-4 md:gl-mb-1"
   >
     <status-badge v-if="showStatusBadge" :issuable-type="issuableType" :state="issuableState" />
+    <gl-icon v-if="icon" :name="icon" />
     <div class="gl-overflow-hidden gl-text-ellipsis">
       <span v-if="targetTitle" class="todo-target-title">{{ targetTitle }}</span>
       <span v-if="!isDesign && !isMemberAccessRequestAction">&middot;</span>

app/assets/javascripts/todos/constants.js

@@ -10,6 +10,7 @@ export const TODO_TARGET_TYPE_DESIGN = 'DESIGN';
 export const TODO_TARGET_TYPE_ALERT = 'ALERT';
 export const TODO_TARGET_TYPE_EPIC = 'EPIC';
 export const TODO_TARGET_TYPE_SSH_KEY = 'KEY';
+export const TODO_TARGET_TYPE_PIPELINE = 'PIPELINE';
 
 export const TODO_ACTION_TYPE_ASSIGNED = 'assigned';
 export const TODO_ACTION_TYPE_MENTIONED = 'mentioned';

spec/frontend/todos/components/todo_item_title_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
+import TodoItemTitle from '~/todos/components/todo_item_title.vue';
+import {
+  TODO_ACTION_TYPE_ASSIGNED,
+  TODO_TARGET_TYPE_ALERT,
+  TODO_TARGET_TYPE_DESIGN,
+  TODO_TARGET_TYPE_EPIC,
+  TODO_TARGET_TYPE_ISSUE,
+  TODO_TARGET_TYPE_MERGE_REQUEST,
+  TODO_TARGET_TYPE_PIPELINE,
+  TODO_TARGET_TYPE_SSH_KEY,
+} from '~/todos/constants';
+
+describe('TodoItemTitle', () => {
+  let wrapper;
+
+  const createComponent = (todoExtras = {}, otherProps = {}) => {
+    wrapper = shallowMount(TodoItemTitle, {
+      propsData: {
+        currentUserId: '1',
+        todo: {
+          author: {
+            id: '2',
+            name: 'John Doe',
+            webUrl: '/john',
+            avatarUrl: '/avatar.png',
+          },
+          action: TODO_ACTION_TYPE_ASSIGNED,
+          targetEntity: {
+            name: 'Target title',
+          },
+          targetType: TODO_TARGET_TYPE_ISSUE,
+          ...todoExtras,
+        },
+        ...otherProps,
+      },
+    });
+  };
+
+  it('renders target title', () => {
+    createComponent();
+    expect(wrapper.text()).toContain('Target title');
+  });
+
+  describe('correct icon for targetType', () => {
+    it.each`
+      targetType                        | icon               | showsIcon
+      ${TODO_TARGET_TYPE_ALERT}         | ${'status-alert'}  | ${true}
+      ${TODO_TARGET_TYPE_DESIGN}        | ${'issues'}        | ${true}
+      ${TODO_TARGET_TYPE_EPIC}          | ${'epic'}          | ${true}
+      ${TODO_TARGET_TYPE_ISSUE}         | ${'issues'}        | ${true}
+      ${TODO_TARGET_TYPE_MERGE_REQUEST} | ${'merge-request'} | ${true}
+      ${TODO_TARGET_TYPE_PIPELINE}      | ${'pipeline'}      | ${true}
+      ${TODO_TARGET_TYPE_PIPELINE}      | ${'pipeline'}      | ${true}
+      ${TODO_TARGET_TYPE_SSH_KEY}       | ${'token'}         | ${true}
+      ${'UNKNOWN_TYPE'}                 | ${''}              | ${false}
+    `('renders "$icon" for the "$targetType" type', ({ targetType, icon, showsIcon }) => {
+      createComponent({ targetType });
+
+      const glIcon = wrapper.findComponent(GlIcon);
+      expect(glIcon.exists()).toBe(showsIcon);
+
+      if (showsIcon) {
+        expect(glIcon.props('name')).toBe(icon);
+      }
+    });
+  });
+});