Merge branch 'master' into 'update-kubeclient'

 Conflicts:
   Gemfile.lock

.eslintrc

@@ -35,15 +35,22 @@
     "import/no-commonjs": "error",
     "no-multiple-empty-lines": ["error", { "max": 1 }],
     "promise/catch-or-return": "error",
-    "no-underscore-dangle": ["error", { "allow": ["__", "_links"]}],
-    "vue/html-self-closing": ["error", {
-      "html": {
-        "void": "always",
-        "normal": "never",
-        "component": "always"
-      },
-      "svg": "always",
-      "math": "always"
-    }]
+    "no-underscore-dangle": ["error", { "allow": ["__", "_links"] }],
+    "no-mixed-operators": 0,
+    "space-before-function-paren": 0,
+    "curly": 0,
+    "arrow-parens": 0,
+    "vue/html-self-closing": [
+      "error",
+      {
+        "html": {
+          "void": "always",
+          "normal": "never",
+          "component": "always"
+        },
+        "svg": "always",
+        "math": "always"
+      }
+    ]
   }
 }

.gitignore

@@ -11,6 +11,7 @@
 eslint-report.html
 /.gitlab_shell_secret
 .idea
+/.vscode/*
 /.rbenv-version
 .rbx/
 /.ruby-gemset

.gitlab-ci.yml

@@ -257,7 +257,7 @@ stages:
 ##
 # Trigger a package build in omnibus-gitlab repository
 #
-package-qa:
+package-and-qa:
   <<: *dedicated-runner
   image: ruby:2.4-alpine
   before_script: []

.prettierrc

+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

CHANGELOG.md

@@ -2,6 +2,20 @@
 documentation](doc/development/changelog.md) for instructions on adding your own
 entry.
+## 10.5.5 (2018-03-15)
+
+### Fixed (3 changes)
+
+- Fix missing uploads after group transfer. !17658
+- Fix code and wiki search results when filename is non-ASCII.
+- Remove double caching of Repository#empty?.
+
+### Performance (2 changes)
+
+- Adding missing indexes on taggings table.
+- Add index on section_name_id on ci_build_trace_sections table.
+
+
 ## 10.5.4 (2018-03-08)
 ### Fixed (11 changes)

GITALY_SERVER_VERSION

-0.89.0
+0.91.0

GITLAB_PAGES_VERSION

-0.7.0
+0.7.1

Gemfile

@@ -34,7 +34,7 @@ gem 'omniauth-gitlab', '~> 1.0.2'
 gem 'omniauth-google-oauth2', '~> 0.5.2'
 gem 'omniauth-kerberos', '~> 0.3.0', group: :kerberos
 gem 'omniauth-oauth2-generic', '~> 0.2.2'
-gem 'omniauth-saml', '~> 1.7.0'
+gem 'omniauth-saml', '~> 1.10.0'
 gem 'omniauth-shibboleth', '~> 1.2.0'
 gem 'omniauth-twitter', '~> 1.2.0'
 gem 'omniauth_crowd', '~> 2.2.0'
@@ -104,7 +104,7 @@ gem 'carrierwave', '~> 1.2'
 gem 'dropzonejs-rails', '~> 0.7.1'
 # for backups
-gem 'fog-aws', '~> 1.4'
+gem 'fog-aws', '~> 2.0'
 gem 'fog-core', '~> 1.44'
 gem 'fog-google', '~> 0.5'
 gem 'fog-local', '~> 0.3'
@@ -152,7 +152,7 @@ end
 gem 'state_machines-activerecord', '~> 0.4.0'
 # Issue tags
-gem 'acts-as-taggable-on', '~> 4.0'
+gem 'acts-as-taggable-on', '~> 5.0'
 # Background jobs
 gem 'sidekiq', '~> 5.0'
@@ -257,14 +257,13 @@ gem 'font-awesome-rails', '~> 4.7'
 gem 'gemojione', '~> 3.3'
 gem 'gon', '~> 6.1.0'
 gem 'jquery-atwho-rails', '~> 1.3.2'
-gem 'jquery-rails', '~> 4.3.1'
 gem 'request_store', '~> 1.3'
 gem 'select2-rails', '~> 3.5.9'
 gem 'virtus', '~> 1.0.1'
 gem 'base32', '~> 0.3.0'
 # Sentry integration
-gem 'sentry-raven', '~> 2.5.3'
+gem 'sentry-raven', '~> 2.7'
 gem 'premailer-rails', '~> 1.9.7'
@@ -300,7 +299,7 @@ group :metrics do
 end
 group :development do
-  gem 'foreman', '~> 0.78.0'
+  gem 'foreman', '~> 0.84.0'
   gem 'brakeman', '~> 3.6.0', require: false
   gem 'letter_opener_web', '~> 1.3.0'
@@ -360,7 +359,7 @@ group :development, :test do
   gem 'benchmark-ips', '~> 2.3.0', require: false
   gem 'license_finder', '~> 3.1', require: false
-  gem 'knapsack', '~> 1.11.0'
+  gem 'knapsack', '~> 1.16'
   gem 'activerecord_sane_schema_dumper', '0.2'
@@ -381,14 +380,14 @@ group :test do
   gem 'test-prof', '~> 0.2.5'
 end
-gem 'octokit', '~> 4.6.2'
+gem 'octokit', '~> 4.8'
 gem 'mail_room', '~> 0.9.1'
 gem 'email_reply_trimmer', '~> 0.1'
 gem 'html2text'
-gem 'ruby-prof', '~> 0.16.2'
+gem 'ruby-prof', '~> 0.17.0'
 # OAuth
 gem 'oauth2', '~> 1.4'
@@ -401,7 +400,7 @@ gem 'vmstat', '~> 2.3.0'
 gem 'sys-filesystem', '~> 1.1.6'
 # SSH host key support
-gem 'net-ssh', '~> 4.1.0'
+gem 'net-ssh', '~> 4.2.0'
 gem 'sshkey', '~> 1.9.0'
 # Required for ED25519 SSH host key support
@@ -421,9 +420,9 @@ gem 'google-protobuf', '= 3.5.1'
 gem 'toml-rb', '~> 1.0.0', require: false
 # Feature toggles
-gem 'flipper', '~> 0.11.0'
-gem 'flipper-active_record', '~> 0.11.0'
-gem 'flipper-active_support_cache_store', '~> 0.11.0'
+gem 'flipper', '~> 0.13.0'
+gem 'flipper-active_record', '~> 0.13.0'
+gem 'flipper-active_support_cache_store', '~> 0.13.0'
 # Structured logging
 gem 'lograge', '~> 0.5'

Gemfile.lock

@@ -40,8 +40,8 @@ GEM
       minitest (~> 5.1)
       thread_safe (~> 0.3, >= 0.3.4)
       tzinfo (~> 1.1)
-    acts-as-taggable-on (4.0.0)
-      activerecord (>= 4.0)
+    acts-as-taggable-on (5.0.0)
+      activerecord (>= 4.2.8)
     adamantium (0.2.0)
       ice_nine (~> 0.11.0)
       memoizable (~> 0.4.0)
@@ -194,7 +194,7 @@ GEM
     et-orbi (1.0.3)
       tzinfo
     eventmachine (1.0.8)
-    excon (0.57.1)
+    excon (0.60.0)
     execjs (2.6.0)
     expression_parser (0.9.0)
     factory_bot (4.8.2)
@@ -218,13 +218,13 @@ GEM
       path_expander (~> 1.0)
       ruby_parser (~> 3.0)
       sexp_processor (~> 4.0)
-    flipper (0.11.0)
-    flipper-active_record (0.11.0)
+    flipper (0.13.0)
+    flipper-active_record (0.13.0)
       activerecord (>= 3.2, < 6)
-      flipper (~> 0.11.0)
-    flipper-active_support_cache_store (0.11.0)
+      flipper (~> 0.13.0)
+    flipper-active_support_cache_store (0.13.0)
       activesupport (>= 3.2, < 6)
-      flipper (~> 0.11.0)
+      flipper (~> 0.13.0)
     flowdock (0.7.1)
       httparty (~> 0.7)
       multi_json
@@ -233,14 +233,14 @@ GEM
       fog-json (~> 1.0)
       ipaddress (~> 0.8)
       xml-simple (~> 1.1)
-    fog-aws (1.4.0)
+    fog-aws (2.0.1)
       fog-core (~> 1.38)
       fog-json (~> 1.0)
       fog-xml (~> 0.1)
       ipaddress (~> 0.8)
-    fog-core (1.44.3)
+    fog-core (1.45.0)
       builder
-      excon (~> 0.49)
+      excon (~> 0.58)
       formatador (~> 0.2)
     fog-google (0.5.3)
       fog-core
@@ -265,7 +265,7 @@ GEM
       nokogiri (>= 1.5.11, < 2.0.0)
     font-awesome-rails (4.7.0.1)
       railties (>= 3.2, < 5.1)
-    foreman (0.78.0)
+    foreman (0.84.0)
       thor (~> 0.19.1)
     formatador (0.2.5)
     fuubar (2.2.0)
@@ -388,7 +388,7 @@ GEM
       thor
       tilt
     hashdiff (0.3.4)
-    hashie (3.5.6)
+    hashie (3.5.7)
     hashie-forbidden_attributes (0.1.1)
       hashie (>= 3.0)
     health_check (2.6.0)
@@ -415,7 +415,7 @@ GEM
       json (~> 1.8)
       multi_xml (>= 0.5.2)
     httpclient (2.8.2)
-    i18n (0.9.1)
+    i18n (0.9.5)
       concurrent-ruby (~> 1.0)
     ice_nine (0.11.2)
     influxdb (0.2.3)
@@ -427,10 +427,6 @@ GEM
       multipart-post
       oauth (~> 0.5, >= 0.5.0)
     jquery-atwho-rails (1.3.2)
-    jquery-rails (4.3.1)
-      rails-dom-testing (>= 1, < 3)
-      railties (>= 4.2.0)
-      thor (>= 0.14, < 2.0)
     json (1.8.6)
     json-jwt (1.7.2)
       activesupport
@@ -454,7 +450,7 @@ GEM
       kaminari-core (= 1.0.1)
     kaminari-core (1.0.1)
     kgio (2.10.0)
-    knapsack (1.11.0)
+    knapsack (1.16.0)
       rake
       timecop (>= 0.1.0)
     kubeclient (3.0.0)
@@ -513,7 +509,7 @@ GEM
       mustermann (~> 1.0.0)
     mysql2 (0.4.10)
     net-ldap (0.16.0)
-    net-ssh (4.1.0)
+    net-ssh (4.2.0)
     netrc (0.11.0)
     nokogiri (1.8.2)
       mini_portile2 (~> 2.3.0)
@@ -525,12 +521,12 @@ GEM
       multi_json (~> 1.3)
       multi_xml (~> 0.5)
       rack (>= 1.2, < 3)
-    octokit (4.6.2)
+    octokit (4.8.0)
       sawyer (~> 0.8.0, >= 0.5.3)
     oj (2.17.5)
-    omniauth (1.4.2)
+    omniauth (1.4.3)
       hashie (>= 1.2, < 4)
-      rack (>= 1.0, < 3)
+      rack (>= 1.6.2, < 3)
     omniauth-auth0 (1.4.1)
       omniauth-oauth2 (~> 1.1)
     omniauth-authentiq (0.3.1)
@@ -569,9 +565,9 @@ GEM
       omniauth (~> 1.2)
     omniauth-oauth2-generic (0.2.2)
       omniauth-oauth2 (~> 1.0)
-    omniauth-saml (1.7.0)
-      omniauth (~> 1.3)
-      ruby-saml (~> 1.4)
+    omniauth-saml (1.10.0)
+      omniauth (~> 1.3, >= 1.3.2)
+      ruby-saml (~> 1.7)
     omniauth-shibboleth (1.2.1)
       omniauth (>= 1.0.0)
     omniauth-twitter (1.2.1)
@@ -650,7 +646,7 @@ GEM
       pry (>= 0.9.10)
     public_suffix (3.0.2)
     pyu-ruby-sasl (0.0.3.3)
-    rack (1.6.8)
+    rack (1.6.9)
     rack-accept (0.4.5)
       rack (>= 0.4)
     rack-attack (4.4.1)
@@ -803,9 +799,9 @@ GEM
       i18n
     ruby-fogbugz (0.2.1)
       crack (~> 0.4)
-    ruby-prof (0.16.2)
+    ruby-prof (0.17.0)
     ruby-progressbar (1.9.0)
-    ruby-saml (1.4.1)
+    ruby-saml (1.7.2)
       nokogiri (>= 1.5.10)
     ruby_parser (3.9.0)
       sexp_processor (~> 4.1)
@@ -844,7 +840,7 @@ GEM
     selenium-webdriver (3.5.0)
       childprocess (~> 0.5)
       rubyzip (~> 1.0)
-    sentry-raven (2.5.3)
+    sentry-raven (2.7.2)
       faraday (>= 0.7.6, < 1.0)
     settingslogic (2.0.9)
     sexp_processor (4.9.0)
@@ -933,7 +929,7 @@ GEM
     truncato (0.7.10)
       htmlentities (~> 4.3.1)
       nokogiri (~> 1.8.0, >= 1.7.0)
-    tzinfo (1.2.4)
+    tzinfo (1.2.5)
       thread_safe (~> 0.1)
     u2f (0.2.1)
     uber (0.1.0)
@@ -994,7 +990,7 @@ DEPENDENCIES
   RedCloth (~> 4.3.2)
   ace-rails-ap (~> 4.1.0)
   activerecord_sane_schema_dumper (= 0.2)
-  acts-as-taggable-on (~> 4.0)
+  acts-as-taggable-on (~> 5.0)
   addressable (~> 2.5.2)
   akismet (~> 2.0)
   allocations (~> 1.0)
@@ -1044,18 +1040,18 @@ DEPENDENCIES
   fast_blank
   ffaker (~> 2.4)
   flay (~> 2.10.0)
-  flipper (~> 0.11.0)
-  flipper-active_record (~> 0.11.0)
-  flipper-active_support_cache_store (~> 0.11.0)
+  flipper (~> 0.13.0)
+  flipper-active_record (~> 0.13.0)
+  flipper-active_support_cache_store (~> 0.13.0)
   fog-aliyun (~> 0.2.0)
-  fog-aws (~> 1.4)
+  fog-aws (~> 2.0)
   fog-core (~> 1.44)
   fog-google (~> 0.5)
   fog-local (~> 0.3)
   fog-openstack (~> 0.1)
   fog-rackspace (~> 0.1.1)
   font-awesome-rails (~> 4.7)
-  foreman (~> 0.78.0)
+  foreman (~> 0.84.0)
   fuubar (~> 2.2.0)
   gemnasium-gitlab-service (~> 0.2)
   gemojione (~> 3.3)
@@ -1090,11 +1086,10 @@ DEPENDENCIES
   influxdb (~> 0.2)
   jira-ruby (~> 1.4)
   jquery-atwho-rails (~> 1.3.2)
-  jquery-rails (~> 4.3.1)
   json-schema (~> 2.8.0)
   jwt (~> 1.5.6)
   kaminari (~> 1.0)
-  knapsack (~> 1.11.0)
+  knapsack (~> 1.16)
   kubeclient (~> 3.0)
   letter_opener_web (~> 1.3.0)
   license_finder (~> 3.1)
@@ -1107,10 +1102,10 @@ DEPENDENCIES
   mousetrap-rails (~> 1.4.6)
   mysql2 (~> 0.4.10)
   net-ldap
-  net-ssh (~> 4.1.0)
+  net-ssh (~> 4.2.0)
   nokogiri (~> 1.8.2)
   oauth2 (~> 1.4)
-  octokit (~> 4.6.2)
+  octokit (~> 4.8)
   oj (~> 2.17.4)
   omniauth (~> 1.4.2)
   omniauth-auth0 (~> 1.4.1)
@@ -1123,7 +1118,7 @@ DEPENDENCIES
   omniauth-google-oauth2 (~> 0.5.2)
   omniauth-kerberos (~> 0.3.0)
   omniauth-oauth2-generic (~> 0.2.2)
-  omniauth-saml (~> 1.7.0)
+  omniauth-saml (~> 1.10.0)
   omniauth-shibboleth (~> 1.2.0)
   omniauth-twitter (~> 1.2.0)
   omniauth_crowd (~> 2.2.0)
@@ -1173,7 +1168,7 @@ DEPENDENCIES
   rubocop (~> 0.52.1)
   rubocop-rspec (~> 1.22.1)
   ruby-fogbugz (~> 0.2.1)
-  ruby-prof (~> 0.16.2)
+  ruby-prof (~> 0.17.0)
   ruby_parser (~> 3.8)
   rufus-scheduler (~> 3.4)
   rugged (~> 0.26.0)
@@ -1183,7 +1178,7 @@ DEPENDENCIES
   seed-fu (~> 2.3.7)
   select2-rails (~> 3.5.9)
   selenium-webdriver (~> 3.5)
-  sentry-raven (~> 2.5.3)
+  sentry-raven (~> 2.7)
   settingslogic (~> 2.0.9)
   sham_rack (~> 1.3.6)
   shoulda-matchers (~> 3.1.2)

app/assets/javascripts/gfm_auto_complete.js

@@ -132,9 +132,8 @@ class GfmAutoComplete {
       callbacks: {
         ...this.getDefaultCallbacks(),
         matcher(flag, subtext) {
-          const relevantText = subtext.trim().split(/\s/).pop();
           const regexp = new RegExp(`(?:[^${glRegexp.unicodeLetters}0-9:]|\n|^):([^:]*)$`, 'gi');
-          const match = regexp.exec(relevantText);
+          const match = regexp.exec(subtext);
           return match && match.length ? match[1] : null;
         },

app/assets/javascripts/merge_request_tabs.js

@@ -73,6 +73,7 @@ export default class MergeRequestTabs {
   constructor({ action, setUrl, stubLocation } = {}) {
     const mergeRequestTabs = document.querySelector('.js-tabs-affix');
     const navbar = document.querySelector('.navbar-gitlab');
+    const peek = document.getElementById('peek');
     const paddingTop = 16;
     this.diffsLoaded = false;
@@ -86,6 +87,10 @@ export default class MergeRequestTabs {
     this.showTab = this.showTab.bind(this);
     this.stickyTop = navbar ? navbar.offsetHeight - paddingTop : 0;
+    if (peek) {
+      this.stickyTop += peek.offsetHeight;
+    }
+
     if (mergeRequestTabs) {
       this.stickyTop += mergeRequestTabs.offsetHeight;
     }

app/assets/javascripts/monitoring/components/graph.vue

@@ -209,6 +209,7 @@
         const xAxis = d3.axisBottom()
           .scale(axisXScale)
+          .ticks(this.graphWidth / 120)
           .tickFormat(timeScaleFormat);
         const yAxis = d3.axisLeft()

app/assets/javascripts/mr_notes/index.js

@@ -4,13 +4,15 @@ import discussionCounter from '../notes/components/discussion_counter.vue';
 import store from '../notes/stores';
 export default function initMrNotes() {
-  new Vue({ // eslint-disable-line
+  // eslint-disable-next-line no-new
+  new Vue({
     el: '#js-vue-mr-discussions',
     components: {
       notesApp,
     },
     data() {
-      const notesDataset = document.getElementById('js-vue-mr-discussions').dataset;
+      const notesDataset = document.getElementById('js-vue-mr-discussions')
+        .dataset;
       return {
         noteableData: JSON.parse(notesDataset.noteableData),
         currentUserData: JSON.parse(notesDataset.currentUserData),
@@ -28,7 +30,8 @@ export default function initMrNotes() {
     },
   });
-  new Vue({ // eslint-disable-line
+  // eslint-disable-next-line no-new
+  new Vue({
     el: '#js-vue-discussion-counter',
     components: {
       discussionCounter,

app/assets/javascripts/notes/components/comment_form.vue

 <script>
-  import $ from 'jquery';
-  import { mapActions, mapGetters } from 'vuex';
-  import _ from 'underscore';
-  import Autosize from 'autosize';
-  import { __, sprintf } from '~/locale';
-  import Flash from '../../flash';
-  import Autosave from '../../autosave';
-  import TaskList from '../../task_list';
-  import { capitalizeFirstCharacter, convertToCamelCase } from '../../lib/utils/text_utility';
-  import * as constants from '../constants';
-  import eventHub from '../event_hub';
-  import issueWarning from '../../vue_shared/components/issue/issue_warning.vue';
-  import markdownField from '../../vue_shared/components/markdown/field.vue';
-  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
-  import loadingButton from '../../vue_shared/components/loading_button.vue';
-  import noteSignedOutWidget from './note_signed_out_widget.vue';
-  import discussionLockedWidget from './discussion_locked_widget.vue';
-  import issuableStateMixin from '../mixins/issuable_state';
-  export default {
-    name: 'CommentForm',
-    components: {
-      issueWarning,
-      noteSignedOutWidget,
-      discussionLockedWidget,
-      markdownField,
-      userAvatarLink,
-      loadingButton,
+import $ from 'jquery';
+import { mapActions, mapGetters, mapState } from 'vuex';
+import _ from 'underscore';
+import Autosize from 'autosize';
+import { __, sprintf } from '~/locale';
+import Flash from '../../flash';
+import Autosave from '../../autosave';
+import TaskList from '../../task_list';
+import {
+  capitalizeFirstCharacter,
+  convertToCamelCase,
+} from '../../lib/utils/text_utility';
+import * as constants from '../constants';
+import eventHub from '../event_hub';
+import issueWarning from '../../vue_shared/components/issue/issue_warning.vue';
+import markdownField from '../../vue_shared/components/markdown/field.vue';
+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import loadingButton from '../../vue_shared/components/loading_button.vue';
+import noteSignedOutWidget from './note_signed_out_widget.vue';
+import discussionLockedWidget from './discussion_locked_widget.vue';
+import issuableStateMixin from '../mixins/issuable_state';
+export default {
+  name: 'CommentForm',
+  components: {
+    issueWarning,
+    noteSignedOutWidget,
+    discussionLockedWidget,
+    markdownField,
+    userAvatarLink,
+    loadingButton,
+  },
+  mixins: [issuableStateMixin],
+  props: {
+    noteableType: {
+      type: String,
+      required: true,
     },
-    mixins: [
-      issuableStateMixin,
-    ],
-    props: {
-      noteableType: {
-        type: String,
-        required: true,
-      },
+  },
+  data() {
+    return {
+      note: '',
+      noteType: constants.COMMENT,
+      isSubmitting: false,
+      isSubmitButtonDisabled: true,
+    };
+  },
+  computed: {
+    ...mapGetters([
+      'getCurrentUserLastNote',
+      'getUserData',
+      'getNoteableData',
+      'getNotesData',
+      'openState',
+    ]),
+    ...mapState(['isToggleStateButtonLoading']),
+    noteableDisplayName() {
+      return this.noteableType.replace(/_/g, ' ');
     },
-    data() {
-      return {
-        note: '',
-        noteType: constants.COMMENT,
-        isSubmitting: false,
-        isSubmitButtonDisabled: true,
-      };
+    isLoggedIn() {
+      return this.getUserData.id;
+    },
+    commentButtonTitle() {
+      return this.noteType === constants.COMMENT
+        ? 'Comment'
+        : 'Start discussion';
+    },
+    isOpen() {
+      return (
+        this.openState === constants.OPENED ||
+        this.openState === constants.REOPENED
+      );
     },
-    computed: {
-      ...mapGetters([
-        'getCurrentUserLastNote',
-        'getUserData',
-        'getNoteableData',
-        'getNotesData',
-        'openState',
-      ]),
-      noteableDisplayName() {
-        return this.noteableType.replace(/_/g, ' ');
-      },
-      isLoggedIn() {
-        return this.getUserData.id;
-      },
-      commentButtonTitle() {
-        return this.noteType === constants.COMMENT ? 'Comment' : 'Start discussion';
-      },
-      isOpen() {
-        return this.openState === constants.OPENED || this.openState === constants.REOPENED;
-      },
-      canCreateNote() {
-        return this.getNoteableData.current_user.can_create_note;
-      },
-      issueActionButtonTitle() {
-        const openOrClose = this.isOpen ? 'close' : 'reopen';
-        if (this.note.length) {
-          return sprintf(
-            __('%{actionText} & %{openOrClose} %{noteable}'),
-            {
-              actionText: this.commentButtonTitle,
-              openOrClose,
-              noteable: this.noteableDisplayName,
-            },
-          );
-        }
-        return sprintf(
-          __('%{openOrClose} %{noteable}'),
-          {
-            openOrClose: capitalizeFirstCharacter(openOrClose),
-            noteable: this.noteableDisplayName,
-          },
-        );
-      },
-      actionButtonClassNames() {
-        return {
-          'btn-reopen': !this.isOpen,
-          'btn-close': this.isOpen,
-          'js-note-target-close': this.isOpen,
-          'js-note-target-reopen': !this.isOpen,
-        };
-      },
-      markdownDocsPath() {
-        return this.getNotesData.markdownDocsPath;
-      },
-      quickActionsDocsPath() {
-        return this.getNotesData.quickActionsDocsPath;
-      },
-      markdownPreviewPath() {
-        return this.getNoteableData.preview_note_path;
-      },
-      author() {
-        return this.getUserData;
-      },
-      canUpdateIssue() {
-        return this.getNoteableData.current_user.can_update;
-      },
-      endpoint() {
-        return this.getNoteableData.create_note_path;
-      },
+    canCreateNote() {
+      return this.getNoteableData.current_user.can_create_note;
+    },
+    issueActionButtonTitle() {
+      const openOrClose = this.isOpen ? 'close' : 'reopen';
+      if (this.note.length) {
+        return sprintf(__('%{actionText} & %{openOrClose} %{noteable}'), {
+          actionText: this.commentButtonTitle,
+          openOrClose,
+          noteable: this.noteableDisplayName,
+        });
+      }
+      return sprintf(__('%{openOrClose} %{noteable}'), {
+        openOrClose: capitalizeFirstCharacter(openOrClose),
+        noteable: this.noteableDisplayName,
+      });
     },
-    watch: {
-      note(newNote) {
-        this.setIsSubmitButtonDisabled(newNote, this.isSubmitting);
-      },
-      isSubmitting(newValue) {
-        this.setIsSubmitButtonDisabled(this.note, newValue);
-      },
+    actionButtonClassNames() {
+      return {
+        'btn-reopen': !this.isOpen,
+        'btn-close': this.isOpen,
+        'js-note-target-close': this.isOpen,
+        'js-note-target-reopen': !this.isOpen,
+      };
     },
-    mounted() {
-      // jQuery is needed here because it is a custom event being dispatched with jQuery.
-      $(document).on('issuable:change', (e, isClosed) => {
-        this.toggleIssueLocalState(isClosed ? constants.CLOSED : constants.REOPENED);
-      });
-      this.initAutoSave();
-      this.initTaskList();
+    markdownDocsPath() {
+      return this.getNotesData.markdownDocsPath;
+    },
+    quickActionsDocsPath() {
+      return this.getNotesData.quickActionsDocsPath;
+    },
+    markdownPreviewPath() {
+      return this.getNoteableData.preview_note_path;
+    },
+    author() {
+      return this.getUserData;
+    },
+    canUpdateIssue() {
+      return this.getNoteableData.current_user.can_update;
+    },
+    endpoint() {
+      return this.getNoteableData.create_note_path;
+    },
+  },
+  watch: {
+    note(newNote) {
+      this.setIsSubmitButtonDisabled(newNote, this.isSubmitting);
+    },
+    isSubmitting(newValue) {
+      this.setIsSubmitButtonDisabled(this.note, newValue);
+    },
+  },
+  mounted() {
+    // jQuery is needed here because it is a custom event being dispatched with jQuery.
+    $(document).on('issuable:change', (e, isClosed) => {
+      this.toggleIssueLocalState(
+        isClosed ? constants.CLOSED : constants.REOPENED,
+      );
+    });
+    this.initAutoSave();
+    this.initTaskList();
+  },
+  methods: {
+    ...mapActions([
+      'saveNote',
+      'stopPolling',
+      'restartPolling',
+      'removePlaceholderNotes',
+      'closeIssue',
+      'reopenIssue',
+      'toggleIssueLocalState',
+      'toggleStateButtonLoading',
+    ]),
+    setIsSubmitButtonDisabled(note, isSubmitting) {
+      if (!_.isEmpty(note) && !isSubmitting) {
+        this.isSubmitButtonDisabled = false;
+      } else {
+        this.isSubmitButtonDisabled = true;
+      }
     },
-    methods: {
-      ...mapActions([
-        'saveNote',
-        'stopPolling',
-        'restartPolling',
-        'removePlaceholderNotes',
-        'closeIssue',
-        'reopenIssue',
-        'toggleIssueLocalState',
-      ]),
-      setIsSubmitButtonDisabled(note, isSubmitting) {
-        if (!_.isEmpty(note) && !isSubmitting) {
-          this.isSubmitButtonDisabled = false;
-        } else {
-          this.isSubmitButtonDisabled = true;
-        }
-      },
-      handleSave(withIssueAction) {
-        this.isSubmitting = true;
-        if (this.note.length) {
-          const noteData = {
-            endpoint: this.endpoint,
-            flashContainer: this.$el,
-            data: {
-              note: {
-                noteable_type: this.noteableType,
-                noteable_id: this.getNoteableData.id,
-                note: this.note,
-              },
+    handleSave(withIssueAction) {
+      this.isSubmitting = true;
+      if (this.note.length) {
+        const noteData = {
+          endpoint: this.endpoint,
+          flashContainer: this.$el,
+          data: {
+            note: {
+              noteable_type: this.noteableType,
+              noteable_id: this.getNoteableData.id,
+              note: this.note,
             },
-          };
-          if (this.noteType === constants.DISCUSSION) {
-            noteData.data.note.type = constants.DISCUSSION_NOTE;
-          }
-          this.note = ''; // Empty textarea while being requested. Repopulate in catch
-          this.resizeTextarea();
-          this.stopPolling();
-          this.saveNote(noteData)
-            .then((res) => {
-              this.isSubmitting = false;
-              this.restartPolling();
-              if (res.errors) {
-                if (res.errors.commands_only) {
-                  this.discard();
-                } else {
-                  Flash(
-                    'Something went wrong while adding your comment. Please try again.',
-                    'alert',
-                    this.$refs.commentForm,
-                  );
-                }
-              } else {
+          },
+        };
+        if (this.noteType === constants.DISCUSSION) {
+          noteData.data.note.type = constants.DISCUSSION_NOTE;
+        }
+        this.note = ''; // Empty textarea while being requested. Repopulate in catch
+        this.resizeTextarea();
+        this.stopPolling();
+        this.saveNote(noteData)
+          .then(res => {
+            this.enableButton();
+            this.restartPolling();
+
+            if (res.errors) {
+              if (res.errors.commands_only) {
                 this.discard();
+              } else {
+                Flash(
+                  'Something went wrong while adding your comment. Please try again.',
+                  'alert',
+                  this.$refs.commentForm,
+                );
               }
-              if (withIssueAction) {
-                this.toggleIssueState();
-              }
-            })
-            .catch(() => {
-              this.isSubmitting = false;
-              this.discard(false);
-              const msg =
-                `Your comment could not be submitted!
+            } else {
+              this.discard();
+            }
+            if (withIssueAction) {
+              this.toggleIssueState();
+            }
+          })
+          .catch(() => {
+            this.enableButton();
+            this.discard(false);
+            const msg = `Your comment could not be submitted!
 Please check your network connection and try again.`;
-              Flash(msg, 'alert', this.$el);
-              this.note = noteData.data.note.note; // Restore textarea content.
-              this.removePlaceholderNotes();
-            });
-        } else {
-          this.toggleIssueState();
-        }
-      },
-      enableButton() {
-        this.isSubmitting = false;
-      },
-      toggleIssueState() {
-        if (this.isOpen) {
-          this.closeIssue()
-            .then(() => this.enableButton())
-            .catch(() => {
-              this.enableButton();
-              Flash(
-                sprintf(
-                  __('Something went wrong while closing the %{issuable}. Please try again later'),
-                  { issuable: this.noteableDisplayName },
+            Flash(msg, 'alert', this.$el);
+            this.note = noteData.data.note.note; // Restore textarea content.
+            this.removePlaceholderNotes();
+          });
+      } else {
+        this.toggleIssueState();
+      }
+    },
+    enableButton() {
+      this.isSubmitting = false;
+    },
+    toggleIssueState() {
+      if (this.isOpen) {
+        this.closeIssue()
+          .then(() => this.enableButton())
+          .catch(() => {
+            this.enableButton();
+            this.toggleStateButtonLoading(false);
+            Flash(
+              sprintf(
+                __(
+                  'Something went wrong while closing the %{issuable}. Please try again later',
                 ),
-              );
-            });
-        } else {
-          this.reopenIssue()
-            .then(() => this.enableButton())
-            .catch(() => {
-              this.enableButton();
-              Flash(
-                sprintf(
-                  __('Something went wrong while reopening the %{issuable}. Please try again later'),
-                  { issuable: this.noteableDisplayName },
+                { issuable: this.noteableDisplayName },
+              ),
+            );
+          });
+      } else {
+        this.reopenIssue()
+          .then(() => this.enableButton())
+          .catch(() => {
+            this.enableButton();
+            this.toggleStateButtonLoading(false);
+            Flash(
+              sprintf(
+                __(
+                  'Something went wrong while reopening the %{issuable}. Please try again later',
                 ),
-              );
-            });
-        }
-      },
-      discard(shouldClear = true) {
-        // `blur` is needed to clear slash commands autocomplete cache if event fired.
-        // `focus` is needed to remain cursor in the textarea.
-        this.$refs.textarea.blur();
-        this.$refs.textarea.focus();
-        if (shouldClear) {
-          this.note = '';
-          this.resizeTextarea();
-          this.$refs.markdownField.previewMarkdown = false;
-        }
-        this.autosave.reset();
-      },
-      setNoteType(type) {
-        this.noteType = type;
-      },
-      editCurrentUserLastNote() {
-        if (this.note === '') {
-          const lastNote = this.getCurrentUserLastNote;
-          if (lastNote) {
-            eventHub.$emit('enterEditMode', {
-              noteId: lastNote.id,
-            });
-          }
+                { issuable: this.noteableDisplayName },
+              ),
+            );
+          });
+      }
+    },
+    discard(shouldClear = true) {
+      // `blur` is needed to clear slash commands autocomplete cache if event fired.
+      // `focus` is needed to remain cursor in the textarea.
+      this.$refs.textarea.blur();
+      this.$refs.textarea.focus();
+      if (shouldClear) {
+        this.note = '';
+        this.resizeTextarea();
+        this.$refs.markdownField.previewMarkdown = false;
+      }
+      this.autosave.reset();
+    },
+    setNoteType(type) {
+      this.noteType = type;
+    },
+    editCurrentUserLastNote() {
+      if (this.note === '') {
+        const lastNote = this.getCurrentUserLastNote;
+        if (lastNote) {
+          eventHub.$emit('enterEditMode', {
+            noteId: lastNote.id,
+          });
         }
-      },
-      initAutoSave() {
-        if (this.isLoggedIn) {
-          const noteableType = capitalizeFirstCharacter(convertToCamelCase(this.noteableType));
-          this.autosave = new Autosave(
-            $(this.$refs.textarea),
-            ['Note', noteableType, this.getNoteableData.id],
-          );
-        }
-      },
-      initTaskList() {
-        return new TaskList({
-          dataType: 'note',
-          fieldName: 'note',
-          selector: '.notes',
-        });
-      },
-      resizeTextarea() {
-        this.$nextTick(() => {
-          Autosize.update(this.$refs.textarea);
-        });
-      },
+      }
+    },
+    initAutoSave() {
+      if (this.isLoggedIn) {
+        const noteableType = capitalizeFirstCharacter(
+          convertToCamelCase(this.noteableType),
+        );
+        this.autosave = new Autosave($(this.$refs.textarea), [
+          'Note',
+          noteableType,
+          this.getNoteableData.id,
+        ]);
+      }
+    },
+    initTaskList() {
+      return new TaskList({
+        dataType: 'note',
+        fieldName: 'note',
+        selector: '.notes',
+      });
     },
-  };
+    resizeTextarea() {
+      this.$nextTick(() => {
+        Autosize.update(this.$refs.textarea);
+      });
+    },
+  },
+};
 </script>
 <template>
@@ -419,13 +432,13 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                 <loading-button
                   v-if="canUpdateIssue"
-                  :loading="isSubmitting"
+                  :loading="isToggleStateButtonLoading"
                   @click="handleSave(true)"
                   :container-class="[
                     actionButtonClassNames,
                     'btn btn-comment btn-comment-and-close js-action-button'
                   ]"
-                  :disabled="isSubmitting"
+                  :disabled="isToggleStateButtonLoading || isSubmitting"
                   :label="issueActionButtonTitle"
                 />

app/assets/javascripts/notes/components/diff_file_header.vue

 <script>
-  import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-  import Icon from '~/vue_shared/components/icon.vue';
-  export default {
-    components: {
-      ClipboardButton,
-      Icon,
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+export default {
+  components: {
+    ClipboardButton,
+    Icon,
+  },
+  props: {
+    diffFile: {
+      type: Object,
+      required: true,
     },
-    props: {
-      diffFile: {
-        type: Object,
-        required: true,
-      },
+  },
+  computed: {
+    titleTag() {
+      return this.diffFile.discussionPath ? 'a' : 'span';
     },
-    computed: {
-      titleTag() {
-        return this.diffFile.discussionPath ? 'a' : 'span';
-      },
-    },
-  };
+  },
+};
 </script>
 <template>

app/assets/javascripts/notes/components/diff_with_note.vue

 <script>
-  import $ from 'jquery';
-  import syntaxHighlight from '~/syntax_highlight';
-  import imageDiffHelper from '~/image_diff/helpers/index';
-  import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-  import DiffFileHeader from './diff_file_header.vue';
-  export default {
-    components: {
-      DiffFileHeader,
+import $ from 'jquery';
+import syntaxHighlight from '~/syntax_highlight';
+import imageDiffHelper from '~/image_diff/helpers/index';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import DiffFileHeader from './diff_file_header.vue';
+export default {
+  components: {
+    DiffFileHeader,
+  },
+  props: {
+    discussion: {
+      type: Object,
+      required: true,
     },
-    props: {
-      discussion: {
-        type: Object,
-        required: true,
-      },
+  },
+  computed: {
+    isImageDiff() {
+      return !this.diffFile.text;
     },
-    computed: {
-      isImageDiff() {
-        return !this.diffFile.text;
-      },
-      diffFileClass() {
-        const { text } = this.diffFile;
-        return text ? 'text-file' : 'js-image-file';
-      },
-      diffRows() {
-        return $(this.discussion.truncatedDiffLines);
-      },
-      diffFile() {
-        return convertObjectPropsToCamelCase(this.discussion.diffFile);
-      },
-      imageDiffHtml() {
-        return this.discussion.imageDiffHtml;
-      },
+    diffFileClass() {
+      const { text } = this.diffFile;
+      return text ? 'text-file' : 'js-image-file';
     },
-    mounted() {
-      if (this.isImageDiff) {
-        const canCreateNote = false;
-        const renderCommentBadge = true;
-        imageDiffHelper.initImageDiff(this.$refs.fileHolder, canCreateNote, renderCommentBadge);
-      } else {
-        const fileHolder = $(this.$refs.fileHolder);
-        this.$nextTick(() => {
-          syntaxHighlight(fileHolder);
-        });
-      }
+    diffRows() {
+      return $(this.discussion.truncatedDiffLines);
     },
-    methods: {
-      rowTag(html) {
-        return html.outerHTML ? 'tr' : 'template';
-      },
+    diffFile() {
+      return convertObjectPropsToCamelCase(this.discussion.diffFile);
     },
-  };
+    imageDiffHtml() {
+      return this.discussion.imageDiffHtml;
+    },
+  },
+  mounted() {
+    if (this.isImageDiff) {
+      const canCreateNote = false;
+      const renderCommentBadge = true;
+      imageDiffHelper.initImageDiff(
+        this.$refs.fileHolder,
+        canCreateNote,
+        renderCommentBadge,
+      );
+    } else {
+      const fileHolder = $(this.$refs.fileHolder);
+      this.$nextTick(() => {
+        syntaxHighlight(fileHolder);
+      });
+    }
+  },
+  methods: {
+    rowTag(html) {
+      return html.outerHTML ? 'tr' : 'template';
+    },
+  },
+};
 </script>
 <template>

app/assets/javascripts/notes/components/discussion_counter.vue

 <script>
-  import { mapGetters } from 'vuex';
-  import resolveSvg from 'icons/_icon_resolve_discussion.svg';
-  import resolvedSvg from 'icons/_icon_status_success_solid.svg';
-  import mrIssueSvg from 'icons/_icon_mr_issue.svg';
-  import nextDiscussionSvg from 'icons/_next_discussion.svg';
-  import { pluralize } from '../../lib/utils/text_utility';
-  import { scrollToElement } from '../../lib/utils/common_utils';
-  import tooltip from '../../vue_shared/directives/tooltip';
-  export default {
-    directives: {
-      tooltip,
+import { mapGetters } from 'vuex';
+import resolveSvg from 'icons/_icon_resolve_discussion.svg';
+import resolvedSvg from 'icons/_icon_status_success_solid.svg';
+import mrIssueSvg from 'icons/_icon_mr_issue.svg';
+import nextDiscussionSvg from 'icons/_next_discussion.svg';
+import { pluralize } from '../../lib/utils/text_utility';
+import { scrollToElement } from '../../lib/utils/common_utils';
+import tooltip from '../../vue_shared/directives/tooltip';
+export default {
+  directives: {
+    tooltip,
+  },
+  computed: {
+    ...mapGetters([
+      'getUserData',
+      'getNoteableData',
+      'discussionCount',
+      'unresolvedDiscussions',
+      'resolvedDiscussionCount',
+    ]),
+    isLoggedIn() {
+      return this.getUserData.id;
     },
-    computed: {
-      ...mapGetters([
-        'getUserData',
-        'getNoteableData',
-        'discussionCount',
-        'unresolvedDiscussions',
-        'resolvedDiscussionCount',
-      ]),
-      isLoggedIn() {
-        return this.getUserData.id;
-      },
-      hasNextButton() {
-        return this.isLoggedIn && !this.allResolved;
-      },
-      countText() {
-        return pluralize('discussion', this.discussionCount);
-      },
-      allResolved() {
-        return this.resolvedDiscussionCount === this.discussionCount;
-      },
-      resolveAllDiscussionsIssuePath() {
-        return this.getNoteableData.create_issue_to_resolve_discussions_path;
-      },
-      firstUnresolvedDiscussionId() {
-        const item = this.unresolvedDiscussions[0] || {};
-
-        return item.id;
-      },
+    hasNextButton() {
+      return this.isLoggedIn && !this.allResolved;
+    },
+    countText() {
+      return pluralize('discussion', this.discussionCount);
+    },
+    allResolved() {
+      return this.resolvedDiscussionCount === this.discussionCount;
     },
-    created() {
-      this.resolveSvg = resolveSvg;
-      this.resolvedSvg = resolvedSvg;
-      this.mrIssueSvg = mrIssueSvg;
-      this.nextDiscussionSvg = nextDiscussionSvg;
+    resolveAllDiscussionsIssuePath() {
+      return this.getNoteableData.create_issue_to_resolve_discussions_path;
+    },
+    firstUnresolvedDiscussionId() {
+      const item = this.unresolvedDiscussions[0] || {};
+
+      return item.id;
     },
-    methods: {
-      jumpToFirstDiscussion() {
-        const el = document.querySelector(`[data-discussion-id="${this.firstUnresolvedDiscussionId}"]`);
-        const activeTab = window.mrTabs.currentAction;
-        if (activeTab === 'commits' || activeTab === 'pipelines') {
-          window.mrTabs.activateTab('show');
-        }
-        if (el) {
-          scrollToElement(el);
-        }
-      },
+  },
+  created() {
+    this.resolveSvg = resolveSvg;
+    this.resolvedSvg = resolvedSvg;
+    this.mrIssueSvg = mrIssueSvg;
+    this.nextDiscussionSvg = nextDiscussionSvg;
+  },
+  methods: {
+    jumpToFirstDiscussion() {
+      const el = document.querySelector(
+        `[data-discussion-id="${this.firstUnresolvedDiscussionId}"]`,
+      );
+      const activeTab = window.mrTabs.currentAction;
+      if (activeTab === 'commits' || activeTab === 'pipelines') {
+        window.mrTabs.activateTab('show');
+      }
+      if (el) {
+        scrollToElement(el);
+      }
     },
-  };
+  },
+};
 </script>
 <template>

app/assets/javascripts/notes/components/discussion_locked_widget.vue

 <script>
-  import Icon from '~/vue_shared/components/icon.vue';
-  import Issuable from '~/vue_shared/mixins/issuable';
-  export default {
-    components: {
-      Icon,
-    },
-    mixins: [
-      Issuable,
-    ],
-  };
+import Icon from '~/vue_shared/components/icon.vue';
+import Issuable from '~/vue_shared/mixins/issuable';
+export default {
+  components: {
+    Icon,
+  },
+  mixins: [Issuable],
+};
 </script>
 <template>

app/assets/javascripts/notes/components/note_actions.vue

 <script>
-  import { mapGetters } from 'vuex';
-  import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg';
-  import emojiSmile from 'icons/_emoji_smile.svg';
-  import emojiSmiley from 'icons/_emoji_smiley.svg';
-  import editSvg from 'icons/_icon_pencil.svg';
-  import resolveDiscussionSvg from 'icons/_icon_resolve_discussion.svg';
-  import resolvedDiscussionSvg from 'icons/_icon_status_success_solid.svg';
-  import ellipsisSvg from 'icons/_ellipsis_v.svg';
-  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  export default {
-    name: 'NoteActions',
-    directives: {
-      tooltip,
-    },
-    components: {
-      loadingIcon,
-    },
-    props: {
-      authorId: {
-        type: Number,
-        required: true,
-      },
-      noteId: {
-        type: Number,
-        required: true,
-      },
-      accessLevel: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      reportAbusePath: {
-        type: String,
-        required: true,
-      },
-      canEdit: {
-        type: Boolean,
-        required: true,
-      },
-      canDelete: {
-        type: Boolean,
-        required: true,
-      },
-      resolvable: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      isResolved: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      isResolving: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      resolvedBy: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
-      canReportAsAbuse: {
-        type: Boolean,
-        required: true,
-      },
-    },
-    computed: {
-      ...mapGetters([
-        'getUserDataByProp',
-      ]),
-      shouldShowActionsDropdown() {
-        return this.currentUserId && (this.canEdit || this.canReportAsAbuse);
-      },
-      canAddAwardEmoji() {
-        return this.currentUserId;
-      },
-      isAuthoredByCurrentUser() {
-        return this.authorId === this.currentUserId;
-      },
-      currentUserId() {
-        return this.getUserDataByProp('id');
-      },
-      resolveButtonTitle() {
-        let title = 'Mark as resolved';
-        if (this.resolvedBy) {
-          title = `Resolved by ${this.resolvedBy.name}`;
-        }
-        return title;
-      },
-    },
-    created() {
-      this.emojiSmiling = emojiSmiling;
-      this.emojiSmile = emojiSmile;
-      this.emojiSmiley = emojiSmiley;
-      this.editSvg = editSvg;
-      this.ellipsisSvg = ellipsisSvg;
-      this.resolveDiscussionSvg = resolveDiscussionSvg;
-      this.resolvedDiscussionSvg = resolvedDiscussionSvg;
-    },
-    methods: {
-      onEdit() {
-        this.$emit('handleEdit');
-      },
-      onDelete() {
-        this.$emit('handleDelete');
-      },
-      onResolve() {
-        this.$emit('handleResolve');
-      },
-    },
-  };
+import { mapGetters } from 'vuex';
+import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg';
+import emojiSmile from 'icons/_emoji_smile.svg';
+import emojiSmiley from 'icons/_emoji_smiley.svg';
+import editSvg from 'icons/_icon_pencil.svg';
+import resolveDiscussionSvg from 'icons/_icon_resolve_discussion.svg';
+import resolvedDiscussionSvg from 'icons/_icon_status_success_solid.svg';
+import ellipsisSvg from 'icons/_ellipsis_v.svg';
+import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+export default {
+  name: 'NoteActions',
+  directives: {
+    tooltip,
+  },
+  components: {
+    loadingIcon,
+  },
+  props: {
+    authorId: {
+      type: Number,
+      required: true,
+    },
+    noteId: {
+      type: Number,
+      required: true,
+    },
+    accessLevel: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    reportAbusePath: {
+      type: String,
+      required: true,
+    },
+    canEdit: {
+      type: Boolean,
+      required: true,
+    },
+    canDelete: {
+      type: Boolean,
+      required: true,
+    },
+    resolvable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isResolved: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isResolving: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    resolvedBy: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    canReportAsAbuse: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters(['getUserDataByProp']),
+    shouldShowActionsDropdown() {
+      return this.currentUserId && (this.canEdit || this.canReportAsAbuse);
+    },
+    canAddAwardEmoji() {
+      return this.currentUserId;
+    },
+    isAuthoredByCurrentUser() {
+      return this.authorId === this.currentUserId;
+    },
+    currentUserId() {
+      return this.getUserDataByProp('id');
+    },
+    resolveButtonTitle() {
+      let title = 'Mark as resolved';
+      if (this.resolvedBy) {
+        title = `Resolved by ${this.resolvedBy.name}`;
+      }
+      return title;
+    },
+  },
+  created() {
+    this.emojiSmiling = emojiSmiling;
+    this.emojiSmile = emojiSmile;
+    this.emojiSmiley = emojiSmiley;
+    this.editSvg = editSvg;
+    this.ellipsisSvg = ellipsisSvg;
+    this.resolveDiscussionSvg = resolveDiscussionSvg;
+    this.resolvedDiscussionSvg = resolvedDiscussionSvg;
+  },
+  methods: {
+    onEdit() {
+      this.$emit('handleEdit');
+    },
+    onDelete() {
+      this.$emit('handleDelete');
+    },
+    onResolve() {
+      this.$emit('handleResolve');
+    },
+  },
+};
 </script>
 <template>