Automatic merge of gitlab-org/gitlab master

app/assets/javascripts/batch_comments/components/diff_file_drafts.vue

 <script>
 import { mapGetters } from 'vuex';
 import imageDiff from '~/diffs/mixins/image_diff';
+import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue';
 import DraftNote from './draft_note.vue';
 
 export default {
   components: {
     DraftNote,
+    DesignNotePin,
   },
   mixins: [imageDiff],
   props: {
@@ -31,9 +33,12 @@ export default {
       class="discussion-notes diff-discussions position-relative"
     >
       <div class="notes">
-        <span class="d-block btn-transparent badge badge-pill is-draft js-diff-notes-index">
-          {{ toggleText(draft, index) }}
-        </span>
+        <design-note-pin
+          :label="toggleText(draft, index)"
+          is-draft
+          class="js-diff-notes-index gl-translate-x-n50"
+          size="sm"
+        />
         <draft-note :draft="draft" />
       </div>
     </div>

app/assets/javascripts/deprecated_notes.js

@@ -694,7 +694,7 @@ export default class Notes {
     // Convert returned HTML to a jQuery object so we can modify it further
     const $noteEntityEl = $(noteEntity.html);
     const $noteAvatar = $noteEntityEl.find('.image-diff-avatar-link');
-    const $targetNoteBadge = $targetNote.find('.badge');
+    const $targetNoteBadge = $targetNote.find('.design-note-pin');
 
     $noteAvatar.append($targetNoteBadge);
     this.revertNoteEditForm($targetNote);

app/assets/javascripts/design_management/components/design_overlay.vue

@@ -286,6 +286,7 @@ export default {
       "
       :is-inactive="isNoteInactive(note)"
       :is-resolved="note.resolved"
+      is-on-image
       @mousedown.stop="onNoteMousedown($event, note)"
       @mouseup.stop="onNoteMouseup(note)"
     />

app/assets/javascripts/diffs/components/diff_discussions.vue

 <script>
 import { GlIcon } from '@gitlab/ui';
 import { mapActions } from 'vuex';
+import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue';
 import noteableDiscussion from '../../notes/components/noteable_discussion.vue';
 
 export default {
   components: {
     noteableDiscussion,
     GlIcon,
+    DesignNotePin,
   },
   props: {
     discussions: {
@@ -62,20 +64,22 @@ export default {
       <ul :data-discussion-id="discussion.id" class="notes">
         <template v-if="shouldCollapseDiscussions">
           <button
-            :class="{
-              'diff-notes-collapse': discussion.expanded,
-              'btn-transparent badge badge-pill': !discussion.expanded,
-            }"
+            v-if="discussion.expanded"
+            class="diff-notes-collapse js-diff-notes-toggle"
             type="button"
-            class="js-diff-notes-toggle"
             :aria-label="__('Show comments')"
             @click="toggleDiscussion({ discussionId: discussion.id })"
           >
-            <gl-icon v-if="discussion.expanded" name="collapse" class="collapse-icon" />
-            <template v-else>
-              {{ index + 1 }}
-            </template>
+            <gl-icon name="collapse" class="collapse-icon" />
           </button>
+          <design-note-pin
+            v-else
+            :label="index + 1"
+            :is-resolved="discussion.resolved"
+            size="sm"
+            class="js-diff-notes-toggle gl-translate-x-n50"
+            @click="toggleDiscussion({ discussionId: discussion.id })"
+          />
         </template>
         <noteable-discussion
           v-show="isExpanded(discussion)"
@@ -87,9 +91,12 @@ export default {
           @noteDeleted="deleteNoteHandler"
         >
           <template v-if="renderAvatarBadge" #avatar-badge>
-            <span class="badge badge-pill">
-              {{ index + 1 }}
-            </span>
+            <design-note-pin
+              :label="index + 1"
+              class="user-avatar"
+              :is-resolved="discussion.resolved"
+              size="sm"
+            />
           </template>
         </noteable-discussion>
       </ul>

app/assets/javascripts/diffs/components/image_diff_overlay.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
 import { isArray } from 'lodash';
 import { mapActions, mapGetters } from 'vuex';
 import imageDiffMixin from 'ee_else_ce/diffs/mixins/image_diff';
+import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue';
 
 function calcPercent(pos, renderedSize) {
   return (100 * pos) / renderedSize;
@@ -11,7 +11,7 @@ function calcPercent(pos, renderedSize) {
 export default {
   name: 'ImageDiffOverlay',
   components: {
-    GlIcon,
+    DesignNotePin,
   },
   mixins: [imageDiffMixin],
   props: {
@@ -36,7 +36,7 @@ export default {
     badgeClass: {
       type: String,
       required: false,
-      default: 'badge badge-pill',
+      default: '',
     },
     shouldToggleDiscussion: {
       type: Boolean,
@@ -114,30 +114,28 @@ export default {
     >
       <span class="sr-only"> {{ __('Add image comment') }} </span>
     </button>
-    <button
+
+    <design-note-pin
       v-for="(discussion, index) in allDiscussions"
       :key="discussion.id"
-      :style="getPosition(discussion)"
-      :class="[badgeClass, { 'is-draft': discussion.isDraft }]"
-      :disabled="!shouldToggleDiscussion"
-      class="js-image-badge"
-      type="button"
+      :label="showCommentIcon ? null : toggleText(discussion, index)"
+      :position="getPosition(discussion)"
       :aria-label="__('Show comments')"
+      class="js-image-badge"
+      :class="badgeClass"
+      :is-draft="discussion.isDraft"
+      :is-resolved="discussion.resolved"
+      is-on-image
+      :disabled="!shouldToggleDiscussion"
       @click="clickedToggle(discussion)"
-    >
-      <gl-icon v-if="showCommentIcon" name="image-comment-dark" :size="24" />
-      <template v-else>
-        {{ toggleText(discussion, index) }}
-      </template>
-    </button>
-    <button
+    />
+
+    <design-note-pin
       v-if="canComment && currentCommentForm"
-      :style="{ left: `${currentCommentForm.xPercent}%`, top: `${currentCommentForm.yPercent}%` }"
-      :aria-label="__('Comment form position')"
-      class="btn-transparent comment-indicator position-absolute"
-      type="button"
-    >
-      <gl-icon name="image-comment-dark" :size="24" />
-    </button>
+      :position="{
+        left: `${currentCommentForm.xPercent}%`,
+        top: `${currentCommentForm.yPercent}%`,
+      }"
+    />
   </div>
 </template>

app/assets/javascripts/image_diff/helpers/badge_helper.js

@@ -14,7 +14,15 @@ export function createImageBadge(noteId, { x, y }, classNames = []) {
 }
 
 export function addImageBadge(containerEl, { coordinate, badgeText, noteId }) {
-  const buttonEl = createImageBadge(noteId, coordinate, ['badge', 'badge-pill']);
+  const buttonEl = createImageBadge(noteId, coordinate, [
+    'gl-display-flex',
+    'gl-align-items-center',
+    'gl-justify-content-center',
+    'gl-font-sm',
+    'design-note-pin',
+    'on-image',
+    'gl-absolute',
+  ]);
   buttonEl.textContent = badgeText;
 
   containerEl.appendChild(buttonEl);
@@ -30,8 +38,8 @@ export function addImageCommentBadge(containerEl, { coordinate, noteId }) {
 export function addAvatarBadge(el, event) {
   const { noteId, badgeNumber } = event.detail;
 
-  // Add badge to new comment
-  const avatarBadgeEl = el.querySelector(`#${noteId} .badge`);
+  // Add design pin to new comment
+  const avatarBadgeEl = el.querySelector(`#${noteId} .design-note-pin`);
   avatarBadgeEl.textContent = badgeNumber;
   avatarBadgeEl.classList.remove('hidden');
 }

app/assets/javascripts/image_diff/helpers/dom_helper.js

@@ -10,12 +10,12 @@ export function setPositionDataAttribute(el, options) {
 }
 
 export function updateDiscussionAvatarBadgeNumber(discussionEl, newBadgeNumber) {
-  const avatarBadgeEl = discussionEl.querySelector('.image-diff-avatar-link .badge');
+  const avatarBadgeEl = discussionEl.querySelector('.image-diff-avatar-link .design-note-pin');
   avatarBadgeEl.textContent = newBadgeNumber;
 }
 
 export function updateDiscussionBadgeNumber(discussionEl, newBadgeNumber) {
-  const discussionBadgeEl = discussionEl.querySelector('.badge');
+  const discussionBadgeEl = discussionEl.querySelector('.design-note-pin');
   discussionBadgeEl.textContent = newBadgeNumber;
 }
 

app/assets/javascripts/image_diff/image_diff.js

@@ -118,7 +118,7 @@ export default class ImageDiff {
   removeBadge(event) {
     const { badgeNumber } = event.detail;
     const indexToRemove = badgeNumber - 1;
-    const imageBadgeEls = this.imageFrameEl.querySelectorAll('.badge');
+    const imageBadgeEls = this.imageFrameEl.querySelectorAll('.design-note-pin');
 
     if (this.imageBadges.length !== badgeNumber) {
       // Cascade badges count numbers for (avatar badges + image badges)

app/assets/javascripts/image_diff/replaced_image_diff.js

@@ -61,7 +61,7 @@ export default class ReplacedImageDiff extends ImageDiff {
     this.currentView = newView;
 
     // Clear existing badges on new view
-    const existingBadges = this.imageFrameEl.querySelectorAll('.badge');
+    const existingBadges = this.imageFrameEl.querySelectorAll('.design-note-pin');
     [...existingBadges].map((badge) => badge.remove());
 
     // Remove existing references to old view image badges

app/assets/javascripts/vue_shared/components/design_management/design_note_pin.vue

@@ -28,12 +28,37 @@ export default {
       required: false,
       default: false,
     },
+    isOnImage: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isDraft: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'md',
+      validator: (value) => ['sm', 'md'].includes(value),
+    },
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     isNewNote() {
       return this.label === null;
     },
     pinLabel() {
+      if (this.ariaLabel) {
+        return this.ariaLabel;
+      }
+
       return this.isNewNote
         ? __('Comment form position')
         : sprintf(__("Comment '%{label}' position"), { label: this.label });
@@ -51,7 +76,10 @@ export default {
       'js-image-badge design-note-pin': !isNewNote,
       resolved: isResolved,
       inactive: isInactive,
+      draft: isDraft,
+      'on-image': isOnImage,
       'gl-absolute': position,
+      small: size === 'sm',
     }"
     class="gl-display-flex gl-align-items-center gl-justify-content-center gl-font-sm"
     type="button"

app/assets/stylesheets/components/design_management/design.scss

 $design-pin-diameter: 28px;
+$design-pin-diameter-sm: 24px;
 $t-gray-a-16-design-pin: rgba($black, 0.16);
 
 .layout-page.design-detail-layout {
@@ -12,24 +13,6 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
     top: 35px;
   }
 
-  .design-note-pin {
-    display: flex;
-    height: $design-pin-diameter;
-    width: $design-pin-diameter;
-    box-sizing: content-box;
-    background-color: $purple-500;
-    color: $white;
-    font-weight: $gl-font-weight-bold;
-    border-radius: 50%;
-    z-index: 1;
-    padding: 0;
-    border: 0;
-
-    &.resolved {
-      background-color: $gray-500;
-    }
-  }
-
   .comment-indicator {
     border-radius: 50%;
   }
@@ -40,35 +23,6 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
       cursor: grabbing;
     }
   }
-
-  /**
-   * Design pin that overlays the design
-   */
-  .frame .design-note-pin {
-    box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24;
-    border: $white 2px solid;
-    will-change: transform, box-shadow, opacity;
-    // NOTE: verbose transition property required for Safari
-    transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear;
-    transform-origin: 0 0;
-    transform: translate(-50%, -50%);
-
-    &:hover {
-      transform: scale(1.2) translate(-50%, -50%);
-    }
-
-    &:active {
-      box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin;
-    }
-
-    &.inactive {
-      @include gl-opacity-5;
-
-      &:hover {
-        @include gl-opacity-10;
-      }
-    }
-  }
 }
 
 .design-scaler-wrapper {
@@ -177,3 +131,63 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
 .design-card-header {
   background: transparent;
 }
+
+.design-note-pin {
+  display: flex;
+  height: $design-pin-diameter;
+  width: $design-pin-diameter;
+  box-sizing: content-box;
+  background-color: $purple-500;
+  color: $white;
+  font-weight: $gl-font-weight-bold;
+  border-radius: 50%;
+  z-index: 1;
+  padding: 0;
+  border: 0;
+
+  &.draft {
+    background-color: $orange-500;
+  }
+
+  &.resolved {
+    background-color: $gray-500;
+  }
+
+  &.on-image {
+    box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24;
+    border: $white 2px solid;
+    will-change: transform, box-shadow, opacity;
+    // NOTE: verbose transition property required for Safari
+    transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear;
+    transform-origin: 0 0;
+    transform: translate(-50%, -50%);
+
+    &:hover {
+      transform: scale(1.2) translate(-50%, -50%);
+    }
+
+    &:active {
+      box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin;
+    }
+
+    &.inactive {
+      @include gl-opacity-5;
+
+      &:hover {
+        @include gl-opacity-10;
+      }
+    }
+  }
+
+  &.small {
+    position: absolute;
+    border: 1px solid $white;
+    height: $design-pin-diameter-sm;
+    width: $design-pin-diameter-sm;
+  }
+
+  &.user-avatar {
+    top: 25px;
+    right: 8px;
+  }
+}

app/assets/stylesheets/framework/diffs.scss

@@ -1072,24 +1072,6 @@ table.code {
   }
 }
 
-.frame .badge.badge-pill,
-.image-diff-avatar-link .badge.badge-pill,
-.user-avatar-link .badge.badge-pill,
-.notes > .badge.badge-pill {
-  position: absolute;
-  background-color: $blue-400;
-  color: $white;
-  border: $white 1px solid;
-  min-height: $gl-padding;
-  padding: 5px 8px;
-  border-radius: 12px;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.frame .badge.badge-pill,
 .frame .image-comment-badge,
 .frame .comment-indicator {
   // Center align badges on the frame
@@ -1121,11 +1103,6 @@ table.code {
   }
 }
 
-.notes > .badge.badge-pill {
-  display: none;
-  left: -13px;
-}
-
 .discussion-notes {
   min-height: 35px;
 
@@ -1134,18 +1111,22 @@ table.code {
     min-height: 25px;
   }
 
+  .diff-notes-expand {
+    display: none;
+  }
+
   &.collapsed {
     background-color: $white;
 
+    .diff-notes-expand {
+      display: initial;
+    }
+
     .diff-notes-collapse,
     .note,
     .discussion-reply-holder {
       display: none;
     }
-
-    .notes > .badge.badge-pill {
-      display: block;
-    }
   }
 }
 

app/graphql/types/repository/blob_type.rb

@@ -125,6 +125,12 @@ module Types
       field :archived, GraphQL::Types::Boolean, null: true, method: :archived?,
             description: 'Whether the current project is archived.'
 
+      field :language, GraphQL::Types::String,
+            description: 'Blob language.',
+            method: :blob_language,
+            null: true,
+            calls_gitaly: true
+
       def raw_text_blob
         object.data unless object.binary?
       end

app/presenters/blob_presenter.rb

@@ -32,7 +32,7 @@ class BlobPresenter < Gitlab::View::Presenter::Delegated
   end
 
   def blob_language
-    @_blob_language ||= Gitlab::Diff::CustomDiff.transformed_blob_language(blob) || language
+    @_blob_language ||= Gitlab::Diff::CustomDiff.transformed_blob_language(blob) || gitattr_language || detect_language
   end
 
   def raw_plain_data
@@ -166,9 +166,15 @@ class BlobPresenter < Gitlab::View::Presenter::Delegated
     @all_lines ||= blob.data.lines
   end
 
-  def language
+  def gitattr_language
     blob.language_from_gitattributes
   end
+
+  def detect_language
+    return if blob.binary?
+
+    Rouge::Lexer.guess(filename: blob.path, source: blob_data(nil)) { |lex| lex.min_by(&:tag) }.tag
+  end
 end
 
 BlobPresenter.prepend_mod_with('BlobPresenter')

app/presenters/snippet_blob_presenter.rb

@@ -33,7 +33,7 @@ class SnippetBlobPresenter < BlobPresenter
     blob.container
   end
 
-  def language
+  def gitattr_language
     nil
   end
 

app/views/discussions/_notes.html.haml

@@ -9,9 +9,9 @@
   -# to the first note position when we click on a badge diff discussion
   %ul.notes{ id: "discussion_#{discussion.id}", data: { discussion_id: discussion.id, position: discussion.notes[0].position.to_json } }
     - if discussion.try(:on_image?) && show_toggle
-      %button.gl-button.diff-notes-collapse.js-diff-notes-toggle{ type: 'button' }
+      %button.comment-indicator.gl-display-flex.gl-align-items-center.gl-justify-content-center.gl-font-sm.diff-notes-collapse.js-diff-notes-toggle{ type: 'button' }
         = sprite_icon('collapse', css_class: 'collapse-icon')
-      %button.gl-button.btn-transparent.badge.badge-pill.js-diff-notes-toggle{ type: 'button' }
+      %button.gl-align-items-center.gl-justify-content-center.gl-font-sm.small.gl-translate-x-n50.design-note-pin.js-diff-notes-toggle.diff-notes-expand{ type: 'button' }
         = badge_counter
     = render partial: "shared/notes/note", collection: discussion.notes, as: :note, locals: { badge_counter: badge_counter, show_image_comment_badge: show_image_comment_badge }
 

app/views/shared/notes/_note.html.haml

@@ -25,7 +25,7 @@
             - elsif note_counter == 0
               - counter = badge_counter if local_assigns[:badge_counter]
               - badge_class = "hidden" if @fresh_discussion || counter.nil?
-              %span.badge.badge-pill{ class: badge_class }
+              %span.gl-display-flex.gl-align-items-center.gl-justify-content-center.gl-font-sm.design-note-pin.small.user-avatar{ class: badge_class }
                 = counter
     .timeline-content
       .note-header

doc/api/graphql/reference/index.md

@@ -4362,6 +4362,27 @@ Input type: `TerraformStateUnlockInput`
 | <a id="mutationterraformstateunlockclientmutationid"></a>`clientMutationId` | [`String`](#string) | A unique identifier for the client performing the mutation. |
 | <a id="mutationterraformstateunlockerrors"></a>`errors` | [`[String!]!`](#string) | Errors encountered during execution of the mutation. |
 
+### `Mutation.timelineEventCreate`
+
+Input type: `TimelineEventCreateInput`
+
+#### Arguments
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| <a id="mutationtimelineeventcreateclientmutationid"></a>`clientMutationId` | [`String`](#string) | A unique identifier for the client performing the mutation. |
+| <a id="mutationtimelineeventcreateincidentid"></a>`incidentId` | [`IssueID!`](#issueid) | Incident ID of the timeline event. |
+| <a id="mutationtimelineeventcreatenote"></a>`note` | [`String!`](#string) | Text note of the timeline event. |
+| <a id="mutationtimelineeventcreateoccurredat"></a>`occurredAt` | [`Time!`](#time) | Timestamp of when the event occurred. |
+
+#### Fields
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| <a id="mutationtimelineeventcreateclientmutationid"></a>`clientMutationId` | [`String`](#string) | A unique identifier for the client performing the mutation. |
+| <a id="mutationtimelineeventcreateerrors"></a>`errors` | [`[String!]!`](#string) | Errors encountered during execution of the mutation. |
+| <a id="mutationtimelineeventcreatetimelineevent"></a>`timelineEvent` | [`TimelineEventType`](#timelineeventtype) | Timeline event. |
+
 ### `Mutation.timelineEventDestroy`
 
 Input type: `TimelineEventDestroyInput`
@@ -14759,6 +14780,7 @@ Returns [`Tree`](#tree).
 | <a id="repositoryblobid"></a>`id` | [`ID!`](#id) | ID of the blob. |
 | <a id="repositoryblobideeditpath"></a>`ideEditPath` | [`String`](#string) | Web path to edit this blob in the Web IDE. |
 | <a id="repositoryblobideforkandeditpath"></a>`ideForkAndEditPath` | [`String`](#string) | Web path to edit this blob in the Web IDE using a forked project. |
+| <a id="repositorybloblanguage"></a>`language` | [`String`](#string) | Blob language. |
 | <a id="repositorybloblfsoid"></a>`lfsOid` | [`String`](#string) | LFS OID of the blob. |
 | <a id="repositoryblobmode"></a>`mode` | [`String`](#string) | Blob mode. |
 | <a id="repositoryblobname"></a>`name` | [`String`](#string) | Blob name. |

ee/app/assets/stylesheets/components/batch_comments/draft_note.scss

@@ -56,10 +56,3 @@ button[disabled] {
     }
   }
 }
-
-.frame,
-.diff-discussions {
-  .badge.is-draft {
-    background-color: $orange-500;
-  }
-}

ee/app/graphql/ee/types/mutation_type.rb

@@ -80,6 +80,7 @@ module EE
         mount_mutation ::Mutations::IncidentManagement::EscalationPolicy::Update
         mount_mutation ::Mutations::IncidentManagement::EscalationPolicy::Destroy
         mount_mutation ::Mutations::IncidentManagement::TimelineEvent::Update
+        mount_mutation ::Mutations::IncidentManagement::TimelineEvent::Create
         mount_mutation ::Mutations::IncidentManagement::TimelineEvent::Destroy
         mount_mutation ::Mutations::AppSec::Fuzzing::API::CiConfiguration::Create
         mount_mutation ::Mutations::AppSec::Fuzzing::Coverage::Corpus::Create, feature_flag: :corpus_management

ee/app/graphql/mutations/incident_management/timeline_event/base.rb

@@ -34,8 +34,8 @@ module Mutations
           raise_resource_not_available_error! 'Timeline events are not supported for this project'
         end
 
-        def timeline_events_available?(timeline_event)
-          ::Gitlab::IncidentManagement.timeline_events_available?(timeline_event.project)
+        def timeline_events_available?(object)
+          ::Gitlab::IncidentManagement.timeline_events_available?(object.project)
         end
       end
     end

ee/app/graphql/mutations/incident_management/timeline_event/create.rb

+# frozen_string_literal: true
+
+module Mutations
+  module IncidentManagement
+    module TimelineEvent
+      class Create < Base
+        graphql_name 'TimelineEventCreate'
+
+        argument :incident_id, Types::GlobalIDType[::Issue],
+                 required: true,
+                 description: 'Incident ID of the timeline event.'
+
+        argument :note, GraphQL::Types::String,
+                 required: true,
+                 description: 'Text note of the timeline event.'
+
+        argument :occurred_at, Types::TimeType,
+                 required: true,
+                 description: 'Timestamp of when the event occurred.'
+
+        def resolve(incident_id:, **args)
+          incident = authorized_find!(id: incident_id)
+
+          authorize!(incident)
+
+          response ::IncidentManagement::TimelineEvents::CreateService.new(incident, current_user, args).execute
+        end
+
+        private
+
+        def find_object(id:)
+          GitlabSchema.object_from_id(id, expected_type: ::Issue).sync
+        end
+      end
+    end
+  end
+end

ee/app/services/incident_management/timeline_events/create_service.rb

+# frozen_string_literal: true
+
+module IncidentManagement
+  module TimelineEvents
+    DEFAULT_ACTION = 'comment'
+
+    class CreateService < TimelineEvents::BaseService
+      def initialize(incident, user, params)
+        @project = incident.project
+        @incident = incident
+        @user = user
+        @params = params
+      end
+
+      def execute
+        return error_no_permissions unless allowed?
+
+        timeline_event_params = {
+          project: project,
+          incident: incident,
+          author: user,
+          note: params[:note],
+          action: params.fetch(:action, DEFAULT_ACTION),
+          note_html: params[:note_html].presence || params[:note],
+          occurred_at: params[:occurred_at]
+        }
+
+        timeline_event = IncidentManagement::TimelineEvent.new(timeline_event_params)
+
+        if timeline_event.save
+          success(timeline_event)
+        else
+          error_in_save(timeline_event)
+        end
+      end
+
+      private
+
+      attr_reader :project, :user, :incident, :params
+    end
+  end
+end

ee/spec/graphql/mutations/incident_management/timeline_event/create_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Mutations::IncidentManagement::TimelineEvent::Create do
+  let_it_be(:current_user) { create(:user) }
+  let_it_be(:project) { create(:project) }
+  let_it_be(:incident) { create(:incident, project: project) }
+
+  let(:args) { { note: 'note', occurred_at: Time.current } }
+
+  specify { expect(described_class).to require_graphql_authorizations(:admin_incident_management_timeline_event) }
+
+  before do
+    stub_licensed_features(incident_timeline_events: true)
+  end
+
+  describe '#resolve' do
+    subject(:resolve) { mutation_for(project, current_user).resolve(incident_id: incident.to_global_id, **args) }
+
+    context 'when a user has permissions to create a timeline event' do
+      before do
+        project.add_developer(current_user)
+      end
+
+      context 'when TimelineEvents::CreateService responds with success' do
+        it 'adds timeline event to database' do
+          expect { resolve }.to change(IncidentManagement::TimelineEvent, :count).by(1)
+        end
+      end
+
+      context 'when TimelineEvents::CreateService responds with an error' do
+        let(:args) { {} }
+
+        it 'returns errors' do
+          expect(resolve).to eq(timeline_event: nil, errors: ["Occurred at can't be blank, Note can't be blank, and Note html can't be blank"])
+        end
+      end
+    end
+
+    context 'when a user has no permissions to create timeline event' do
+      before do
+        project.add_guest(current_user)
+      end
+
+      it 'raises an error' do
+        expect { resolve }.to raise_error(Gitlab::Graphql::Errors::ResourceNotAvailable)
+      end
+    end
+
+    context 'when timeline event feature is not available' do
+      before do
+        stub_licensed_features(incident_timeline_events: false)
+      end
+
+      it 'raises and error' do
+        expect { resolve }.to raise_error(Gitlab::Graphql::Errors::ResourceNotAvailable)
+      end
+    end
+  end
+
+  private
+
+  def mutation_for(project, user)
+    described_class.new(object: project, context: { current_user: user }, field: nil)
+  end
+end

ee/spec/requests/api/graphql/mutations/incident_management/timeline_event/create_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Creating an incident timeline event' do
+  include GraphqlHelpers
+
+  let_it_be(:user) { create(:user) }
+  let_it_be(:project) { create(:project) }
+  let_it_be(:incident) { create(:incident, project: project) }
+  let_it_be(:event_occurred_at) { Time.current }
+  let_it_be(:note) { 'demo note' }
+
+  let(:input) { { incident_id: incident.to_global_id.to_s, note: note, occurred_at: event_occurred_at } }
+  let(:mutation) do
+    graphql_mutation(:timeline_event_create, input) do
+      <<~QL
+        clientMutationId
+        errors
+        timelineEvent {
+          id
+          author { id username }
+          incident { id title }
+          note
+          editable
+          action
+          occurredAt
+        }
+      QL
+    end
+  end
+
+  let(:mutation_response) { graphql_mutation_response(:timeline_event_create) }
+
+  before do
+    stub_licensed_features(incident_timeline_events: true)
+    project.add_developer(user)
+  end
+
+  it 'creates incident timeline event', :aggregate_failures do
+    post_graphql_mutation(mutation, current_user: user)
+
+    timeline_event_response = mutation_response['timelineEvent']
+
+    expect(response).to have_gitlab_http_status(:success)
+    expect(timeline_event_response).to include(
+      'author' => {
+        'id' => user.to_global_id.to_s,
+        'username' => user.username
+      },
+      'incident' => {
+        'id' => incident.to_global_id.to_s,
+        'title' => incident.title
+      },
+      'note' => note,
+      'action' => 'comment',
+      'editable' => false,
+      'occurredAt' => event_occurred_at.iso8601
+    )
+  end
+end

ee/spec/services/incident_management/timeline_events/create_service_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe IncidentManagement::TimelineEvents::CreateService do
+  let_it_be(:user_with_permissions) { create(:user) }
+  let_it_be(:user_without_permissions) { create(:user) }
+  let_it_be(:project) { create(:project) }
+  let_it_be_with_refind(:incident) { create(:incident, project: project) }
+
+  let(:current_user) { user_with_permissions }
+  let(:args) { { 'note': 'note', 'occurred_at': Time.current, 'action': 'new comment' } }
+  let(:service) { described_class.new(incident, current_user, args) }
+
+  before do
+    stub_licensed_features(incident_timeline_events: true)
+  end
+
+  before_all do
+    project.add_developer(user_with_permissions)
+    project.add_reporter(user_without_permissions)
+  end
+
+  describe '#execute' do
+    shared_examples 'error response' do |message|
+      it 'has an informative message' do
+        expect(execute).to be_error
+        expect(execute.message).to eq(message)
+      end
+    end
+
+    shared_examples 'success response' do
+      it 'has timeline event' do
+        expect(execute).to be_success
+
+        result = execute.payload[:timeline_event]
+        expect(result).to be_a(::IncidentManagement::TimelineEvent)
+        expect(result.author).to eq(current_user)
+        expect(result.incident).to eq(incident)
+        expect(result.project).to eq(project)
+        expect(result.note).to eq(args[:note])
+      end
+    end
+
+    subject(:execute) { service.execute }
+
+    context 'when current user is blank' do
+      let(:current_user) { nil }
+
+      it_behaves_like 'error response', 'You have insufficient permissions to manage timeline events for this incident'
+    end
+
+    context 'when user does not have permissions to create timeline events' do
+      let(:current_user) { user_without_permissions }
+
+      it_behaves_like 'error response', 'You have insufficient permissions to manage timeline events for this incident'
+    end
+
+    context 'when feature is not available' do
+      before do
+        stub_licensed_features(incident_timeline_events: false)
+      end
+
+      it_behaves_like 'error response', 'You have insufficient permissions to manage timeline events for this incident'
+    end
+
+    context 'when error occurs during creation' do
+      let(:args) { {} }
+
+      it_behaves_like 'error response', "Occurred at can't be blank, Note can't be blank, and Note html can't be blank"
+    end
+
+    context 'with default action' do
+      let(:args) { { 'note': 'note', 'occurred_at': Time.current } }
+
+      it_behaves_like 'success response'
+
+      it 'matches the default action', :aggregate_failures do
+        result = execute.payload[:timeline_event]
+
+        expect(result.action).to eq(IncidentManagement::TimelineEvents::DEFAULT_ACTION)
+      end
+    end
+
+    context 'with non_default action' do
+      it_behaves_like 'success response'
+
+      it 'matches the action from arguments', :aggregate_failures do
+        result = execute.payload[:timeline_event]
+
+        expect(result.action).to eq(args[:action])
+      end
+    end
+
+    it 'successfully creates a database record', :aggregate_failures do
+      expect { execute }.to change { ::IncidentManagement::TimelineEvent.count }.by(1)
+    end
+  end
+end

lib/gitlab/search/found_blob.rb

@@ -80,6 +80,10 @@ module Gitlab
         super(presenter_class: BlobPresenter)
       end
 
+      def binary?
+        false
+      end
+
       def fetch_blob
         path = [ref, blob_path]
         missing_blob = { binary_path: blob_path }

spec/features/merge_request/user_creates_image_diff_notes_spec.rb

@@ -28,7 +28,7 @@ RSpec.describe 'Merge request > User creates image diff notes', :js do
 
       it 'shows indicator and avatar badges, and allows collapsing/expanding the discussion notes' do
         indicator = find('.js-image-badge')
-        badge = find('.image-diff-avatar-link .badge')
+        badge = find('.image-diff-avatar-link .design-note-pin')
 
         expect(indicator).to have_content('1')
         expect(badge).to have_content('1')

spec/frontend/batch_comments/components/diff_file_drafts_spec.js

@@ -3,6 +3,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import DiffFileDrafts from '~/batch_comments/components/diff_file_drafts.vue';
 import DraftNote from '~/batch_comments/components/draft_note.vue';
+import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue';
 
 Vue.use(Vuex);
 
@@ -40,10 +41,12 @@ describe('Batch comments diff file drafts component', () => {
   it('renders index of draft note', () => {
     factory();
 
-    expect(vm.findAll('.js-diff-notes-index').length).toEqual(2);
+    const elements = vm.findAll(DesignNotePin);
 
-    expect(vm.findAll('.js-diff-notes-index').at(0).text()).toEqual('1');
+    expect(elements.length).toEqual(2);
 
-    expect(vm.findAll('.js-diff-notes-index').at(1).text()).toEqual('2');
+    expect(elements.at(0).props('label')).toEqual(1);
+
+    expect(elements.at(1).props('label')).toEqual(2);
   });
 });

spec/frontend/diffs/components/diff_discussions_spec.js

@@ -71,7 +71,7 @@ describe('DiffDiscussions', () => {
 
       expect(diffNotesToggle.text().trim()).toBe('1');
       expect(diffNotesToggle.classes()).toEqual(
-        expect.arrayContaining(['btn-transparent', 'badge', 'badge-pill']),
+        expect.arrayContaining(['js-diff-notes-toggle', 'gl-translate-x-n50', 'design-note-pin']),
       );
     });
 
@@ -87,8 +87,8 @@ describe('DiffDiscussions', () => {
       createComponent({ renderAvatarBadge: true });
       const noteableDiscussion = wrapper.find(NoteableDiscussion);
 
-      expect(noteableDiscussion.find('.badge-pill').exists()).toBe(true);
-      expect(noteableDiscussion.find('.badge-pill').text().trim()).toBe('1');
+      expect(noteableDiscussion.find('.design-note-pin').exists()).toBe(true);
+      expect(noteableDiscussion.find('.design-note-pin').text().trim()).toBe('1');
     });
   });
 });

spec/frontend/diffs/components/image_diff_overlay_spec.js

 import { GlIcon } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue';
 import { createStore } from '~/mr_notes/stores';
 import { imageDiffDiscussions } from '../mock_data/diff_discussions';
@@ -19,7 +19,7 @@ describe('Diffs image diff overlay component', () => {
     extendStore(store);
     dispatch = jest.spyOn(store, 'dispatch').mockImplementation();
 
-    wrapper = shallowMount(ImageDiffOverlay, {
+    wrapper = mount(ImageDiffOverlay, {
       store,
       parentComponent: {
         data() {

spec/frontend/image_diff/helpers/badge_helper_spec.js

@@ -62,7 +62,10 @@ describe('badge helper', () => {
     });
 
     it('should add badge classes', () => {
-      expect(buttonEl.className).toContain('badge badge-pill');
+      const classes = buttonEl.className.split(' ');
+      expect(classes).toEqual(
+        expect.arrayContaining(['design-note-pin', 'on-image', 'gl-absolute']),
+      );
     });
 
     it('should set the badge text', () => {
@@ -105,7 +108,7 @@ describe('badge helper', () => {
     beforeEach(() => {
       containerEl.innerHTML = `
         <div id="${noteId}">
-          <div class="badge hidden">
+          <div class="design-note-pin hidden">
           </div>
         </div>
       `;
@@ -116,7 +119,7 @@ describe('badge helper', () => {
           badgeNumber,
         },
       });
-      avatarBadgeEl = containerEl.querySelector(`#${noteId} .badge`);
+      avatarBadgeEl = containerEl.querySelector(`#${noteId} .design-note-pin`);
     });
 
     it('should update badge number', () => {

spec/frontend/image_diff/helpers/dom_helper_spec.js

@@ -37,14 +37,16 @@ describe('domHelper', () => {
       discussionEl = document.createElement('div');
       discussionEl.innerHTML = `
         <a href="#" class="image-diff-avatar-link">
-          <div class="badge"></div>
+          <div class="design-note-pin"></div>
         </a>
       `;
       domHelper.updateDiscussionAvatarBadgeNumber(discussionEl, badgeNumber);
     });
 
     it('should update avatar badge number', () => {
-      expect(discussionEl.querySelector('.badge').textContent).toEqual(badgeNumber.toString());
+      expect(discussionEl.querySelector('.design-note-pin').textContent).toEqual(
+        badgeNumber.toString(),
+      );
     });
   });
 
@@ -54,13 +56,15 @@ describe('domHelper', () => {
     beforeEach(() => {
       discussionEl = document.createElement('div');
       discussionEl.innerHTML = `
-        <div class="badge"></div>
+        <div class="design-note-pin"></div>
       `;
       domHelper.updateDiscussionBadgeNumber(discussionEl, badgeNumber);
     });
 
     it('should update discussion badge number', () => {
-      expect(discussionEl.querySelector('.badge').textContent).toEqual(badgeNumber.toString());
+      expect(discussionEl.querySelector('.design-note-pin').textContent).toEqual(
+        badgeNumber.toString(),
+      );
     });
   });
 

spec/frontend/image_diff/image_diff_spec.js

@@ -15,9 +15,9 @@ describe('ImageDiff', () => {
           <div class="js-image-frame">
             <img src="${TEST_HOST}/image.png">
             <div class="comment-indicator"></div>
-            <div id="badge-1" class="badge">1</div>
-            <div id="badge-2" class="badge">2</div>
-            <div id="badge-3" class="badge">3</div>
+            <div id="badge-1" class="design-note-pin">1</div>
+            <div id="badge-2" class="design-note-pin">2</div>
+            <div id="badge-3" class="design-note-pin">3</div>
           </div>
           <div class="note-container">
             <div class="discussion-notes">
@@ -335,7 +335,7 @@ describe('ImageDiff', () => {
 
     describe('cascade badge count', () => {
       it('should update next imageBadgeEl value', () => {
-        const imageBadgeEls = imageDiff.imageFrameEl.querySelectorAll('.badge');
+        const imageBadgeEls = imageDiff.imageFrameEl.querySelectorAll('.design-note-pin');
 
         expect(imageBadgeEls[0].textContent).toEqual('1');
         expect(imageBadgeEls[1].textContent).toEqual('2');

spec/frontend/vue_shared/components/design_management/design_note_pin_spec.js

@@ -39,4 +39,72 @@ describe('Design note pin component', () => {
     createComponent({ position: null });
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  it('applies `on-image` class when isOnImage is true', () => {
+    createComponent({ isOnImage: true });
+
+    expect(wrapper.find('.on-image').exists()).toBe(true);
+  });
+
+  it('applies `draft` class when isDraft is true', () => {
+    createComponent({ isDraft: true });
+
+    expect(wrapper.find('.draft').exists()).toBe(true);
+  });
+
+  describe('size', () => {
+    it('is `sm` it applies `small` class', () => {
+      createComponent({ size: 'sm' });
+      expect(wrapper.find('.small').exists()).toBe(true);
+    });
+
+    it('is `md` it applies no size class', () => {
+      createComponent({ size: 'md' });
+      expect(wrapper.find('.small').exists()).toBe(false);
+      expect(wrapper.find('.medium').exists()).toBe(false);
+    });
+
+    it('throws when passed any other value except `sm` or `md`', () => {
+      jest.spyOn(console, 'error').mockImplementation(() => {});
+
+      createComponent({ size: 'lg' });
+
+      // eslint-disable-next-line no-console
+      expect(console.error).toHaveBeenCalled();
+    });
+  });
+
+  describe('ariaLabel', () => {
+    describe('when value is passed', () => {
+      it('overrides default aria-label', () => {
+        const ariaLabel = 'Aria Label';
+
+        createComponent({ ariaLabel });
+
+        const button = wrapper.find('button');
+
+        expect(button.attributes('aria-label')).toBe(ariaLabel);
+      });
+    });
+
+    describe('when no value is passed', () => {
+      it('shows new note label as aria-label when label is absent', () => {
+        createComponent({ label: null });
+
+        const button = wrapper.find('button');
+
+        expect(button.attributes('aria-label')).toBe('Comment form position');
+      });
+
+      it('shows label position as aria-label when label is present', () => {
+        const label = 1;
+
+        createComponent({ label, isNewNote: false });
+
+        const button = wrapper.find('button');
+
+        expect(button.attributes('aria-label')).toBe(`Comment '${label}' position`);
+      });
+    });
+  });
 });

spec/graphql/types/repository/blob_type_spec.rb

@@ -41,7 +41,8 @@ RSpec.describe Types::Repository::BlobType do
       :ide_edit_path,
       :external_storage_url,
       :fork_and_edit_path,
-      :ide_fork_and_edit_path
+      :ide_fork_and_edit_path,
+      :language
     )
   end
 end

spec/presenters/blob_presenter_spec.rb

@@ -170,13 +170,13 @@ RSpec.describe BlobPresenter do
     let(:git_blob) { blob.__getobj__ }
 
     it 'returns highlighted content' do
-      expect(Gitlab::Highlight).to receive(:highlight).with('files/ruby/regex.rb', git_blob.data, plain: nil, language: nil)
+      expect(Gitlab::Highlight).to receive(:highlight).with('files/ruby/regex.rb', git_blob.data, plain: nil, language: 'ruby')
 
       presenter.highlight
     end
 
     it 'returns plain content when :plain is true' do
-      expect(Gitlab::Highlight).to receive(:highlight).with('files/ruby/regex.rb', git_blob.data, plain: true, language: nil)
+      expect(Gitlab::Highlight).to receive(:highlight).with('files/ruby/regex.rb', git_blob.data, plain: true, language: 'ruby')
 
       presenter.highlight(plain: true)
     end
@@ -189,7 +189,7 @@ RSpec.describe BlobPresenter do
       end
 
       it 'returns limited highlighted content' do
-        expect(Gitlab::Highlight).to receive(:highlight).with('files/ruby/regex.rb', "line one\n", plain: nil, language: nil)
+        expect(Gitlab::Highlight).to receive(:highlight).with('files/ruby/regex.rb', "line one\n", plain: nil, language: 'ruby')
 
         presenter.highlight(to: 1)
       end
@@ -247,6 +247,36 @@ RSpec.describe BlobPresenter do
     end
   end
 
+  describe '#blob_language' do
+    subject { presenter.blob_language }
+
+    it { is_expected.to eq('ruby') }
+
+    context 'gitlab-language contains a match' do
+      before do
+        allow(blob).to receive(:language_from_gitattributes).and_return('cpp')
+      end
+
+      it { is_expected.to eq('cpp') }
+    end
+
+    context 'when blob is ipynb' do
+      let(:blob) { repository.blob_at('f6b7a707', 'files/ipython/markdown-table.ipynb') }
+
+      before do
+        allow(Gitlab::Diff::CustomDiff).to receive(:transformed_for_diff?).and_return(true)
+      end
+
+      it { is_expected.to eq('md') }
+    end
+
+    context 'when blob is binary' do
+      let(:blob) { repository.blob_at('HEAD', 'Gemfile.zip') }
+
+      it { is_expected.to be_nil }
+    end
+  end
+
   describe '#raw_plain_data' do
     let(:blob) { repository.blob_at('HEAD', file) }