1 files changed, 73 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/components/dag/dag_annotations.vue b/app/assets/javascripts/pipelines/components/dag/dag_annotations.vue
new file mode 100644
index 00000000000..a1500166cdc
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/dag/dag_annotations.vue
@@ -0,0 +1,73 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  name: 'DagAnnotations',
+  components: {
+    GlButton,
+  },
+  props: {
+    annotations: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showList: true,
+    };
+  },
+  computed: {
+    linkText() {
+      return this.showList ? __('Hide list') : __('Show list');
+    },
+    shouldShowLink() {
+      return Object.keys(this.annotations).length > 1;
+    },
+    wrapperClasses() {
+      return [
+        'gl-display-flex',
+        'gl-flex-direction-column',
+        'gl-fixed',
+        'gl-right-1',
+        'gl-top-66vh',
+        'gl-w-max-content',
+        'gl-px-5',
+        'gl-py-4',
+        'gl-rounded-base',
+        'gl-bg-white',
+      ].join(' ');
+    },
+  },
+  methods: {
+    toggleList() {
+      this.showList = !this.showList;
+    },
+  },
+};
+</script>
+<template>
+  <div :class="wrapperClasses">
+    <div v-if="showList">
+      <div
+        v-for="note in annotations"
+        :key="note.uid"
+        class="gl-display-flex gl-align-items-center"
+      >
+        <div
+          data-testid="dag-color-block"
+          class="gl-w-6 gl-h-5"
+          :style="{
+            background: `linear-gradient(0.25turn, ${note.source.color} 40%, ${note.target.color} 60%)`,
+          }"
+        ></div>
+        <div data-testid="dag-note-text" class="gl-px-2 gl-font-base gl-align-items-center">
+          {{ note.source.name }} → {{ note.target.name }}
+        </div>
+      </div>
+    </div>
+
+    <gl-button v-if="shouldShowLink" variant="link" @click="toggleList">{{ linkText }}</gl-button>
+  </div>
+</template>