Add latest changes from gitlab-org/gitlab@master

13 files changed, 1448 insertions, 15 deletions

diff --git a/app/assets/javascripts/actioncable_consumer.js b/app/assets/javascripts/actioncable_consumer.js
new file mode 100644
index 00000000000..5658ffc1a38
--- /dev/null
+++ b/app/assets/javascripts/actioncable_consumer.js
@@ -0,0 +1,3 @@
+import { createConsumer } from '@rails/actioncable';
+
+export default createConsumer();
diff --git a/app/assets/javascripts/ide/lib/themes/index.js b/app/assets/javascripts/ide/lib/themes/index.js
index 6ed9f6679a4..47d1bddc4b2 100644
--- a/app/assets/javascripts/ide/lib/themes/index.js
+++ b/app/assets/javascripts/ide/lib/themes/index.js
@@ -1,5 +1,7 @@
 import white from './white';
 import dark from './dark';
+import monokai from './monokai';
+import solarizedDark from './solarized_dark';
 
 export const themes = [
   {
@@ -10,6 +12,14 @@ export const themes = [
     name: 'dark',
     data: dark,
   },
+  {
+    name: 'solarized-dark',
+    data: solarizedDark,
+  },
+  {
+    name: 'monokai',
+    data: monokai,
+  },
 ];
 
 export const DEFAULT_THEME = 'white';
diff --git a/app/assets/javascripts/ide/lib/themes/monokai.js b/app/assets/javascripts/ide/lib/themes/monokai.js
new file mode 100644
index 00000000000..d7636574754
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/themes/monokai.js
@@ -0,0 +1,169 @@
+/*
+
+https://github.com/brijeshb42/monaco-themes/blob/master/themes/Tomorrow-Night.json
+
+The MIT License (MIT)
+
+Copyright (c) Brijesh Bittu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+*/
+
+export default {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [
+    {
+      foreground: '75715e',
+      token: 'comment',
+    },
+    {
+      foreground: 'e6db74',
+      token: 'string',
+    },
+    {
+      foreground: 'ae81ff',
+      token: 'constant.numeric',
+    },
+    {
+      foreground: 'ae81ff',
+      token: 'constant.language',
+    },
+    {
+      foreground: 'ae81ff',
+      token: 'constant.character',
+    },
+    {
+      foreground: 'ae81ff',
+      token: 'constant.other',
+    },
+    {
+      foreground: 'f92672',
+      token: 'keyword',
+    },
+    {
+      foreground: 'f92672',
+      token: 'storage',
+    },
+    {
+      foreground: '66d9ef',
+      fontStyle: 'italic',
+      token: 'storage.type',
+    },
+    {
+      foreground: 'a6e22e',
+      fontStyle: 'underline',
+      token: 'entity.name.class',
+    },
+    {
+      foreground: 'a6e22e',
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      fontStyle: 'italic underline',
+      token: 'entity.other.inherited-class',
+    },
+    {
+      foreground: 'a6e22e',
+      token: 'entity.name.function',
+    },
+    {
+      foreground: 'fd971f',
+      fontStyle: 'italic',
+      token: 'variable.parameter',
+    },
+    {
+      foreground: 'f92672',
+      token: 'entity.name.tag',
+    },
+    {
+      foreground: 'a6e22e',
+      token: 'entity.other.attribute-name',
+    },
+    {
+      foreground: '66d9ef',
+      token: 'support.function',
+    },
+    {
+      foreground: '66d9ef',
+      token: 'support.constant',
+    },
+    {
+      foreground: '66d9ef',
+      fontStyle: 'italic',
+      token: 'support.type',
+    },
+    {
+      foreground: '66d9ef',
+      fontStyle: 'italic',
+      token: 'support.class',
+    },
+    {
+      foreground: 'f8f8f0',
+      background: 'f92672',
+      token: 'invalid',
+    },
+    {
+      foreground: 'f8f8f0',
+      background: 'ae81ff',
+      token: 'invalid.deprecated',
+    },
+    {
+      foreground: 'cfcfc2',
+      token: 'meta.structure.dictionary.json string.quoted.double.json',
+    },
+    {
+      foreground: '75715e',
+      token: 'meta.diff',
+    },
+    {
+      foreground: '75715e',
+      token: 'meta.diff.header',
+    },
+    {
+      foreground: 'f92672',
+      token: 'markup.deleted',
+    },
+    {
+      foreground: 'a6e22e',
+      token: 'markup.inserted',
+    },
+    {
+      foreground: 'e6db74',
+      token: 'markup.changed',
+    },
+    {
+      foreground: 'ae81ffa0',
+      token: 'constant.numeric.line-number.find-in-files - match',
+    },
+    {
+      foreground: 'e6db74',
+      token: 'entity.name.filename.find-in-files',
+    },
+  ],
+  colors: {
+    'editor.foreground': '#F8F8F2',
+    'editor.background': '#272822',
+    'editor.selectionBackground': '#49483E',
+    'editor.lineHighlightBackground': '#3E3D32',
+    'editorCursor.foreground': '#F8F8F0',
+    'editorWhitespace.foreground': '#3B3A32',
+    'editorIndentGuide.activeBackground': '#9D550FB0',
+    'editor.selectionHighlightBorder': '#222218',
+  },
+};
diff --git a/app/assets/javascripts/ide/lib/themes/solarized_dark.js b/app/assets/javascripts/ide/lib/themes/solarized_dark.js
new file mode 100644
index 00000000000..3c9414b9dc9
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/themes/solarized_dark.js
@@ -0,0 +1,1110 @@
+/*
+
+https://github.com/brijeshb42/monaco-themes/blob/master/themes/Solarized-dark.json
+
+The MIT License (MIT)
+
+Copyright (c) Brijesh Bittu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+*/
+export default {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [
+    {
+      foreground: '586e75',
+      token: 'comment',
+    },
+    {
+      foreground: '2aa198',
+      token: 'string',
+    },
+    {
+      foreground: '586e75',
+      token: 'string',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'string.regexp',
+    },
+    {
+      foreground: 'd33682',
+      token: 'constant.numeric',
+    },
+    {
+      foreground: '268bd2',
+      token: 'variable.language',
+    },
+    {
+      foreground: '268bd2',
+      token: 'variable.other',
+    },
+    {
+      foreground: '859900',
+      token: 'keyword',
+    },
+    {
+      foreground: '859900',
+      token: 'storage',
+    },
+    {
+      foreground: '268bd2',
+      token: 'entity.name.class',
+    },
+    {
+      foreground: '268bd2',
+      token: 'entity.name.type.class',
+    },
+    {
+      foreground: '268bd2',
+      token: 'entity.name.function',
+    },
+    {
+      foreground: '859900',
+      token: 'punctuation.definition.variable',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.section.embedded.begin',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.section.embedded.end',
+    },
+    {
+      foreground: 'b58900',
+      token: 'constant.language',
+    },
+    {
+      foreground: 'b58900',
+      token: 'meta.preprocessor',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'support.function.construct',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'keyword.other.new',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'constant.character',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'constant.other',
+    },
+    {
+      foreground: '268bd2',
+      fontStyle: 'bold',
+      token: 'entity.name.tag',
+    },
+    {
+      foreground: '586e75',
+      token: 'punctuation.definition.tag.html',
+    },
+    {
+      foreground: '586e75',
+      token: 'punctuation.definition.tag.begin',
+    },
+    {
+      foreground: '586e75',
+      token: 'punctuation.definition.tag.end',
+    },
+    {
+      foreground: '93a1a1',
+      token: 'entity.other.attribute-name',
+    },
+    {
+      foreground: '268bd2',
+      token: 'support.function',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.separator.continuation',
+    },
+    {
+      foreground: '859900',
+      token: 'support.type',
+    },
+    {
+      foreground: '859900',
+      token: 'support.class',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'support.type.exception',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'keyword.other.special-method',
+    },
+    {
+      foreground: '2aa198',
+      token: 'string.quoted.double',
+    },
+    {
+      foreground: '2aa198',
+      token: 'string.quoted.single',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.definition.string.begin',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.definition.string.end',
+    },
+    {
+      foreground: 'b58900',
+      token: 'entity.name.tag.css',
+    },
+    {
+      foreground: 'b58900',
+      token: 'support.type.property-name.css',
+    },
+    {
+      foreground: 'b58900',
+      token: 'meta.property-name.css',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'source.css',
+    },
+    {
+      foreground: '586e75',
+      token: 'meta.selector.css',
+    },
+    {
+      foreground: '6c71c4',
+      token: 'punctuation.section.property-list.css',
+    },
+    {
+      foreground: '2aa198',
+      token: 'meta.property-value.css constant.numeric.css',
+    },
+    {
+      foreground: '2aa198',
+      token: 'keyword.other.unit.css',
+    },
+    {
+      foreground: '2aa198',
+      token: 'constant.other.color.rgb-value.css',
+    },
+    {
+      foreground: '2aa198',
+      token: 'meta.property-value.css',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'keyword.other.important.css',
+    },
+    {
+      foreground: '2aa198',
+      token: 'support.constant.color',
+    },
+    {
+      foreground: '859900',
+      token: 'entity.name.tag.css',
+    },
+    {
+      foreground: '586e75',
+      token: 'punctuation.separator.key-value.css',
+    },
+    {
+      foreground: '586e75',
+      token: 'punctuation.terminator.rule.css',
+    },
+    {
+      foreground: '268bd2',
+      token: 'entity.other.attribute-name.class.css',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'entity.other.attribute-name.pseudo-element.css',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'entity.other.attribute-name.pseudo-class.css',
+    },
+    {
+      foreground: '268bd2',
+      token: 'entity.other.attribute-name.id.css',
+    },
+    {
+      foreground: 'b58900',
+      token: 'meta.function.js',
+    },
+    {
+      foreground: 'b58900',
+      token: 'entity.name.function.js',
+    },
+    {
+      foreground: 'b58900',
+      token: 'support.function.dom.js',
+    },
+    {
+      foreground: 'b58900',
+      token: 'text.html.basic source.js.embedded.html',
+    },
+    {
+      foreground: '268bd2',
+      token: 'storage.type.function.js',
+    },
+    {
+      foreground: '2aa198',
+      token: 'constant.numeric.js',
+    },
+    {
+      foreground: '268bd2',
+      token: 'meta.brace.square.js',
+    },
+    {
+      foreground: '268bd2',
+      token: 'storage.type.js',
+    },
+    {
+      foreground: '93a1a1',
+      token: 'meta.brace.round',
+    },
+    {
+      foreground: '93a1a1',
+      token: 'punctuation.definition.parameters.begin.js',
+    },
+    {
+      foreground: '93a1a1',
+      token: 'punctuation.definition.parameters.end.js',
+    },
+    {
+      foreground: '268bd2',
+      token: 'meta.brace.curly.js',
+    },
+    {
+      foreground: '93a1a1',
+      fontStyle: 'italic',
+      token: 'entity.name.tag.doctype.html',
+    },
+    {
+      foreground: '93a1a1',
+      fontStyle: 'italic',
+      token: 'meta.tag.sgml.html',
+    },
+    {
+      foreground: '93a1a1',
+      fontStyle: 'italic',
+      token: 'string.quoted.double.doctype.identifiers-and-DTDs.html',
+    },
+    {
+      foreground: '839496',
+      fontStyle: 'italic',
+      token: 'comment.block.html',
+    },
+    {
+      fontStyle: 'italic',
+      token: 'entity.name.tag.script.html',
+    },
+    {
+      foreground: '2aa198',
+      token: 'source.css.embedded.html string.quoted.double.html',
+    },
+    {
+      foreground: 'cb4b16',
+      fontStyle: 'bold',
+      token: 'text.html.ruby',
+    },
+    {
+      foreground: '657b83',
+      token: 'text.html.basic meta.tag.other.html',
+    },
+    {
+      foreground: '657b83',
+      token: 'text.html.basic meta.tag.any.html',
+    },
+    {
+      foreground: '657b83',
+      token: 'text.html.basic meta.tag.block.any',
+    },
+    {
+      foreground: '657b83',
+      token: 'text.html.basic meta.tag.inline.any',
+    },
+    {
+      foreground: '657b83',
+      token: 'text.html.basic meta.tag.structure.any.html',
+    },
+    {
+      foreground: '657b83',
+      token: 'text.html.basic source.js.embedded.html',
+    },
+    {
+      foreground: '657b83',
+      token: 'punctuation.separator.key-value.html',
+    },
+    {
+      foreground: '657b83',
+      token: 'text.html.basic entity.other.attribute-name.html',
+    },
+    {
+      foreground: '2aa198',
+      token: 'text.html.basic meta.tag.structure.any.html punctuation.definition.string.begin.html',
+    },
+    {
+      foreground: '2aa198',
+      token: 'punctuation.definition.string.begin.html',
+    },
+    {
+      foreground: '2aa198',
+      token: 'punctuation.definition.string.end.html',
+    },
+    {
+      foreground: '268bd2',
+      fontStyle: 'bold',
+      token: 'entity.name.tag.block.any.html',
+    },
+    {
+      fontStyle: 'italic',
+      token: 'source.css.embedded.html entity.name.tag.style.html',
+    },
+    {
+      foreground: '839496',
+      fontStyle: 'italic',
+      token: 'source.css.embedded.html',
+    },
+    {
+      foreground: '839496',
+      fontStyle: 'italic',
+      token: 'comment.block.html',
+    },
+    {
+      foreground: '268bd2',
+      token: 'punctuation.definition.variable.ruby',
+    },
+    {
+      foreground: '657b83',
+      token: 'meta.function.method.with-arguments.ruby',
+    },
+    {
+      foreground: '2aa198',
+      token: 'variable.language.ruby',
+    },
+    {
+      foreground: '268bd2',
+      token: 'entity.name.function.ruby',
+    },
+    {
+      foreground: '859900',
+      fontStyle: 'bold',
+      token: 'keyword.control.ruby',
+    },
+    {
+      foreground: '859900',
+      fontStyle: 'bold',
+      token: 'keyword.control.def.ruby',
+    },
+    {
+      foreground: '859900',
+      token: 'keyword.control.class.ruby',
+    },
+    {
+      foreground: '859900',
+      token: 'meta.class.ruby',
+    },
+    {
+      foreground: 'b58900',
+      token: 'entity.name.type.class.ruby',
+    },
+    {
+      foreground: '859900',
+      token: 'keyword.control.ruby',
+    },
+    {
+      foreground: 'b58900',
+      token: 'support.class.ruby',
+    },
+    {
+      foreground: '859900',
+      token: 'keyword.other.special-method.ruby',
+    },
+    {
+      foreground: '2aa198',
+      token: 'constant.language.ruby',
+    },
+    {
+      foreground: '2aa198',
+      token: 'constant.numeric.ruby',
+    },
+    {
+      foreground: 'b58900',
+      token: 'variable.other.constant.ruby',
+    },
+    {
+      foreground: '2aa198',
+      token: 'constant.other.symbol.ruby',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.section.embedded.ruby',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.definition.string.begin.ruby',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.definition.string.end.ruby',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'keyword.other.special-method.ruby',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'keyword.control.import.include.php',
+    },
+    {
+      foreground: '839496',
+      token: 'text.html.ruby meta.tag.inline.any.html',
+    },
+    {
+      foreground: '2aa198',
+      token: 'text.html.ruby punctuation.definition.string.begin',
+    },
+    {
+      foreground: '2aa198',
+      token: 'text.html.ruby punctuation.definition.string.end',
+    },
+    {
+      foreground: '839496',
+      token: 'punctuation.definition.string.begin',
+    },
+    {
+      foreground: '839496',
+      token: 'punctuation.definition.string.end',
+    },
+    {
+      foreground: '839496',
+      token: 'support.class.php',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'keyword.operator.index-start.php',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'keyword.operator.index-end.php',
+    },
+    {
+      foreground: '586e75',
+      token: 'meta.array.php',
+    },
+    {
+      foreground: 'b58900',
+      token: 'meta.array.php support.function.construct.php',
+    },
+    {
+      foreground: 'b58900',
+      token: 'meta.array.empty.php support.function.construct.php',
+    },
+    {
+      foreground: 'b58900',
+      token: 'support.function.construct.php',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.definition.array.begin',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.definition.array.end',
+    },
+    {
+      foreground: '2aa198',
+      token: 'constant.numeric.php',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'keyword.other.new.php',
+    },
+    {
+      foreground: '839496',
+      token: 'keyword.operator.class',
+    },
+    {
+      foreground: '93a1a1',
+      token: 'variable.other.property.php',
+    },
+    {
+      foreground: 'b58900',
+      token: 'storage.modifier.extends.php',
+    },
+    {
+      foreground: 'b58900',
+      token: 'storage.type.class.php',
+    },
+    {
+      foreground: 'b58900',
+      token: 'keyword.operator.class.php',
+    },
+    {
+      foreground: '839496',
+      token: 'punctuation.terminator.expression.php',
+    },
+    {
+      foreground: '586e75',
+      token: 'meta.other.inherited-class.php',
+    },
+    {
+      foreground: '859900',
+      token: 'storage.type.php',
+    },
+    {
+      foreground: '93a1a1',
+      token: 'entity.name.function.php',
+    },
+    {
+      foreground: '859900',
+      token: 'support.function.construct.php',
+    },
+    {
+      foreground: '839496',
+      token: 'entity.name.type.class.php',
+    },
+    {
+      foreground: '839496',
+      token: 'meta.function-call.php',
+    },
+    {
+      foreground: '839496',
+      token: 'meta.function-call.static.php',
+    },
+    {
+      foreground: '839496',
+      token: 'meta.function-call.object.php',
+    },
+    {
+      foreground: '93a1a1',
+      token: 'keyword.other.phpdoc',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'source.php.embedded.block.html',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'storage.type.function.php',
+    },
+    {
+      foreground: '2aa198',
+      token: 'constant.numeric.c',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'meta.preprocessor.c.include',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'meta.preprocessor.macro.c',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'keyword.control.import.define.c',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'keyword.control.import.include.c',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'entity.name.function.preprocessor.c',
+    },
+    {
+      foreground: '2aa198',
+      token: 'meta.preprocessor.c.include string.quoted.other.lt-gt.include.c',
+    },
+    {
+      foreground: '2aa198',
+      token: 'meta.preprocessor.c.include punctuation.definition.string.begin.c',
+    },
+    {
+      foreground: '2aa198',
+      token: 'meta.preprocessor.c.include punctuation.definition.string.end.c',
+    },
+    {
+      foreground: '586e75',
+      token: 'support.function.C99.c',
+    },
+    {
+      foreground: '586e75',
+      token: 'support.function.any-method.c',
+    },
+    {
+      foreground: '586e75',
+      token: 'entity.name.function.c',
+    },
+    {
+      foreground: '2aa198',
+      token: 'punctuation.definition.string.begin.c',
+    },
+    {
+      foreground: '2aa198',
+      token: 'punctuation.definition.string.end.c',
+    },
+    {
+      foreground: 'b58900',
+      token: 'storage.type.c',
+    },
+    {
+      foreground: 'e0eddd',
+      background: 'b58900',
+      fontStyle: 'italic',
+      token: 'meta.diff',
+    },
+    {
+      foreground: 'e0eddd',
+      background: 'b58900',
+      fontStyle: 'italic',
+      token: 'meta.diff.header',
+    },
+    {
+      foreground: 'dc322f',
+      background: 'eee8d5',
+      token: 'markup.deleted',
+    },
+    {
+      foreground: 'cb4b16',
+      background: 'eee8d5',
+      token: 'markup.changed',
+    },
+    {
+      foreground: '219186',
+      background: 'eee8d5',
+      token: 'markup.inserted',
+    },
+    {
+      foreground: 'e0eddd',
+      background: 'b58900',
+      token: 'text.html.markdown meta.dummy.line-break',
+    },
+    {
+      foreground: '2aa198',
+      token: 'text.html.markdown markup.raw.inline',
+    },
+    {
+      foreground: '2aa198',
+      token: 'text.restructuredtext markup.raw',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'other.package.exclude',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'other.remove',
+    },
+    {
+      foreground: '2aa198',
+      token: 'other.add',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.section.group.tex',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.definition.arguments.begin.latex',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.definition.arguments.end.latex',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.definition.arguments.latex',
+    },
+    {
+      foreground: 'b58900',
+      token: 'meta.group.braces.tex',
+    },
+    {
+      foreground: 'b58900',
+      token: 'string.other.math.tex',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'variable.parameter.function.latex',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.definition.constant.math.tex',
+    },
+    {
+      foreground: '2aa198',
+      token: 'text.tex.latex constant.other.math.tex',
+    },
+    {
+      foreground: '2aa198',
+      token: 'constant.other.general.math.tex',
+    },
+    {
+      foreground: '2aa198',
+      token: 'constant.other.general.math.tex',
+    },
+    {
+      foreground: '2aa198',
+      token: 'constant.character.math.tex',
+    },
+    {
+      foreground: 'b58900',
+      token: 'string.other.math.tex',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.definition.string.begin.tex',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.definition.string.end.tex',
+    },
+    {
+      foreground: '2aa198',
+      token: 'keyword.control.label.latex',
+    },
+    {
+      foreground: '2aa198',
+      token: 'text.tex.latex constant.other.general.math.tex',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'variable.parameter.definition.label.latex',
+    },
+    {
+      foreground: '859900',
+      token: 'support.function.be.latex',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'support.function.section.latex',
+    },
+    {
+      foreground: '2aa198',
+      token: 'support.function.general.tex',
+    },
+    {
+      fontStyle: 'italic',
+      token: 'punctuation.definition.comment.tex',
+    },
+    {
+      fontStyle: 'italic',
+      token: 'comment.line.percentage.tex',
+    },
+    {
+      foreground: '2aa198',
+      token: 'keyword.control.ref.latex',
+    },
+    {
+      foreground: '586e75',
+      token: 'string.quoted.double.block.python',
+    },
+    {
+      foreground: '859900',
+      token: 'storage.type.class.python',
+    },
+    {
+      foreground: '859900',
+      token: 'storage.type.function.python',
+    },
+    {
+      foreground: '859900',
+      token: 'storage.modifier.global.python',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'keyword.control.import.python',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'keyword.control.import.from.python',
+    },
+    {
+      foreground: 'b58900',
+      token: 'support.type.exception.python',
+    },
+    {
+      foreground: '859900',
+      token: 'support.function.builtin.shell',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'variable.other.normal.shell',
+    },
+    {
+      foreground: '268bd2',
+      token: 'source.shell',
+    },
+    {
+      foreground: '586e75',
+      token: 'meta.scope.for-in-loop.shell',
+    },
+    {
+      foreground: '586e75',
+      token: 'variable.other.loop.shell',
+    },
+    {
+      foreground: '859900',
+      token: 'punctuation.definition.string.end.shell',
+    },
+    {
+      foreground: '859900',
+      token: 'punctuation.definition.string.begin.shell',
+    },
+    {
+      foreground: '586e75',
+      token: 'meta.scope.case-block.shell',
+    },
+    {
+      foreground: '586e75',
+      token: 'meta.scope.case-body.shell',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.definition.logical-expression.shell',
+    },
+    {
+      fontStyle: 'italic',
+      token: 'comment.line.number-sign.shell',
+    },
+    {
+      foreground: 'cb4b16',
+      token: 'keyword.other.import.java',
+    },
+    {
+      foreground: '586e75',
+      token: 'storage.modifier.import.java',
+    },
+    {
+      foreground: 'b58900',
+      token: 'meta.class.java storage.modifier.java',
+    },
+    {
+      foreground: '586e75',
+      token: 'source.java comment.block',
+    },
+    {
+      foreground: '586e75',
+      token:
+        'comment.block meta.documentation.tag.param.javadoc keyword.other.documentation.param.javadoc',
+    },
+    {
+      foreground: 'b58900',
+      token: 'punctuation.definition.variable.perl',
+    },
+    {
+      foreground: 'b58900',
+      token: 'variable.other.readwrite.global.perl',
+    },
+    {
+      foreground: 'b58900',
+      token: 'variable.other.predefined.perl',
+    },
+    {
+      foreground: 'b58900',
+      token: 'keyword.operator.comparison.perl',
+    },
+    {
+      foreground: '859900',
+      token: 'support.function.perl',
+    },
+    {
+      foreground: '586e75',
+      fontStyle: 'italic',
+      token: 'comment.line.number-sign.perl',
+    },
+    {
+      foreground: '2aa198',
+      token: 'punctuation.definition.string.begin.perl',
+    },
+    {
+      foreground: '2aa198',
+      token: 'punctuation.definition.string.end.perl',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'constant.character.escape.perl',
+    },
+    {
+      foreground: '268bd2',
+      token: 'markup.heading.markdown',
+    },
+    {
+      foreground: '268bd2',
+      token: 'markup.heading.1.markdown',
+    },
+    {
+      foreground: '268bd2',
+      token: 'markup.heading.2.markdown',
+    },
+    {
+      foreground: '268bd2',
+      token: 'markup.heading.3.markdown',
+    },
+    {
+      foreground: '268bd2',
+      token: 'markup.heading.4.markdown',
+    },
+    {
+      foreground: '268bd2',
+      token: 'markup.heading.5.markdown',
+    },
+    {
+      foreground: '268bd2',
+      token: 'markup.heading.6.markdown',
+    },
+    {
+      foreground: '839496',
+      fontStyle: 'bold',
+      token: 'markup.bold.markdown',
+    },
+    {
+      foreground: '839496',
+      fontStyle: 'italic',
+      token: 'markup.italic.markdown',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.definition.bold.markdown',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.definition.italic.markdown',
+    },
+    {
+      foreground: 'dc322f',
+      token: 'punctuation.definition.raw.markdown',
+    },
+    {
+      foreground: 'b58900',
+      token: 'markup.list.unnumbered.markdown',
+    },
+    {
+      foreground: '859900',
+      token: 'markup.list.numbered.markdown',
+    },
+    {
+      foreground: '2aa198',
+      token: 'markup.raw.block.markdown',
+    },
+    {
+      foreground: '2aa198',
+      token: 'markup.raw.inline.markdown',
+    },
+    {
+      foreground: '6c71c4',
+      token: 'markup.quote.markdown',
+    },
+    {
+      foreground: '6c71c4',
+      token: 'punctuation.definition.blockquote.markdown',
+    },
+    {
+      foreground: 'd33682',
+      token: 'meta.separator.markdown',
+    },
+    {
+      foreground: '586e75',
+      fontStyle: 'italic',
+      token: 'meta.image.inline.markdown',
+    },
+    {
+      foreground: '586e75',
+      fontStyle: 'italic',
+      token: 'markup.underline.link.markdown',
+    },
+    {
+      foreground: '93a1a1',
+      token: 'string.other.link.title.markdown',
+    },
+    {
+      foreground: '93a1a1',
+      token: 'string.other.link.description.markdown',
+    },
+    {
+      foreground: '586e75',
+      token: 'punctuation.definition.link.markdown',
+    },
+    {
+      foreground: '586e75',
+      token: 'punctuation.definition.metadata.markdown',
+    },
+    {
+      foreground: '586e75',
+      token: 'punctuation.definition.string.begin.markdown',
+    },
+    {
+      foreground: '586e75',
+      token: 'punctuation.definition.string.end.markdown',
+    },
+    {
+      foreground: '586e75',
+      token: 'punctuation.definition.constant.markdown',
+    },
+    {
+      foreground: 'eee8d5',
+      background: 'eee8d5',
+      token: 'sublimelinter.notes',
+    },
+    {
+      foreground: '93a1a1',
+      background: '93a1a1',
+      token: 'sublimelinter.outline.illegal',
+    },
+    {
+      background: 'dc322f',
+      token: 'sublimelinter.underline.illegal',
+    },
+    {
+      foreground: '839496',
+      background: '839496',
+      token: 'sublimelinter.outline.warning',
+    },
+    {
+      background: 'b58900',
+      token: 'sublimelinter.underline.warning',
+    },
+    {
+      foreground: '657b83',
+      background: '657b83',
+      token: 'sublimelinter.outline.violation',
+    },
+    {
+      background: 'cb4b16',
+      token: 'sublimelinter.underline.violation',
+    },
+  ],
+  colors: {
+    'editor.foreground': '#839496',
+    'editor.background': '#002B36',
+    'editor.selectionBackground': '#073642',
+    'editor.lineHighlightBackground': '#073642',
+    'editorCursor.foreground': '#819090',
+    'editorWhitespace.foreground': '#073642',
+  },
+};
diff --git a/app/assets/javascripts/issuable_sidebar/queries/issue_sidebar.query.graphql b/app/assets/javascripts/issuable_sidebar/queries/issue_sidebar.query.graphql
new file mode 100644
index 00000000000..fe01d2c2e78
--- /dev/null
+++ b/app/assets/javascripts/issuable_sidebar/queries/issue_sidebar.query.graphql
@@ -0,0 +1,15 @@
+#import "~/graphql_shared/fragments/author.fragment.graphql"
+
+query getProjectIssue($iid: String!, $fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    issue(iid: $iid) {
+      assignees {
+        nodes {
+          ...Author
+          id
+          state
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/lib/utils/keycodes.js b/app/assets/javascripts/lib/utils/keycodes.js
index 16bffc5c2cf..618266f7a09 100644
--- a/app/assets/javascripts/lib/utils/keycodes.js
+++ b/app/assets/javascripts/lib/utils/keycodes.js
@@ -1,3 +1,6 @@
+// `e.keyCode` is deprecated, these values should be migrated
+// See: https://gitlab.com/gitlab-org/gitlab/-/issues/216102
+
 export const BACKSPACE_KEY_CODE = 8;
 export const ENTER_KEY_CODE = 13;
 export const ESC_KEY_CODE = 27;
diff --git a/app/assets/javascripts/lib/utils/keys.js b/app/assets/javascripts/lib/utils/keys.js
new file mode 100644
index 00000000000..8e5420e87ea
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/keys.js
@@ -0,0 +1,4 @@
+/* eslint-disable @gitlab/require-i18n-strings */
+
+export const ESC_KEY = 'Escape';
+export const ESC_KEY_IE11 = 'Esc'; // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 1877f58ed96..67835a5e356 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -19,6 +19,7 @@ import {
 import DashboardPanel from './dashboard_panel.vue';
 import { s__ } from '~/locale';
 import createFlash from '~/flash';
+import { ESC_KEY, ESC_KEY_IE11 } from '~/lib/utils/keys';
 import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
 import { mergeUrlParams, redirectTo, updateHistory } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
@@ -248,6 +249,10 @@ export default {
       logsPath: this.logsPath,
       currentEnvironmentName: this.currentEnvironmentName,
     });
+    window.addEventListener('keyup', this.onKeyup);
+  },
+  destroyed() {
+    window.removeEventListener('keyup', this.onKeyup);
   },
   mounted() {
     if (!this.hasMetrics) {
@@ -371,13 +376,19 @@ export default {
     onGoBack() {
       this.clearExpandedPanel();
     },
+    onKeyup(event) {
+      const { key } = event;
+      if (key === ESC_KEY || key === ESC_KEY_IE11) {
+        this.clearExpandedPanel();
+      }
+    },
   },
   addMetric: {
     title: s__('Metrics|Add metric'),
     modalId: 'add-metric',
   },
   i18n: {
-    goBackLabel: s__('Metrics|Go back'),
+    goBackLabel: s__('Metrics|Go back (Esc)'),
   },
 };
 </script>
diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index 07952f9edd9..4a1a1086329 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -29,9 +29,6 @@ export default {
     resolveAllDiscussionsIssuePath() {
       return this.getNoteableData.create_issue_to_resolve_discussions_path;
     },
-    resolvedDiscussionsCount() {
-      return this.resolvableDiscussionsCount - this.unresolvedDiscussionsCount;
-    },
     toggeableDiscussions() {
       return this.discussions.filter(discussion => !discussion.individual_note);
     },
@@ -60,15 +57,15 @@ export default {
     <div class="full-width-mobile d-flex d-sm-flex">
       <div class="line-resolve-all">
         <span
-          :class="{ 'is-active': allResolved }"
-          class="line-resolve-btn is-disabled"
-          type="button"
+          :class="{ 'line-resolve-btn is-active': allResolved, 'line-resolve-text': !allResolved }"
         >
-          <icon :name="allResolved ? 'check-circle-filled' : 'check-circle'" />
-        </span>
-        <span class="line-resolve-text">
-          {{ resolvedDiscussionsCount }}/{{ resolvableDiscussionsCount }}
-          {{ n__('thread resolved', 'threads resolved', resolvableDiscussionsCount) }}
+          <template v-if="allResolved">
+            <icon name="check-circle-filled" />
+            {{ __('All threads resolved') }}
+          </template>
+          <template v-else>
+            {{ n__('%d unresolved thread', '%d unresolved threads', unresolvedDiscussionsCount) }}
+          </template>
         </span>
       </div>
       <div
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue b/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue
new file mode 100644
index 00000000000..f6646823c5c
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue
@@ -0,0 +1,71 @@
+<script>
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import query from '~/issuable_sidebar/queries/issue_sidebar.query.graphql';
+import actionCable from '~/actioncable_consumer';
+
+export default {
+  name: 'AssigneesRealtime',
+  props: {
+    mediator: {
+      type: Object,
+      required: true,
+    },
+    issuableIid: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+  },
+  apollo: {
+    project: {
+      query,
+      variables() {
+        return {
+          iid: this.issuableIid,
+          fullPath: this.projectPath,
+        };
+      },
+      result(data) {
+        this.handleFetchResult(data);
+      },
+    },
+  },
+  mounted() {
+    this.initActionCablePolling();
+  },
+  methods: {
+    received(data) {
+      if (data.event === 'updated') {
+        this.$apollo.queries.project.refetch();
+      }
+    },
+    initActionCablePolling() {
+      actionCable.subscriptions.create(
+        {
+          channel: 'IssuesChannel',
+          project_path: this.projectPath,
+          iid: this.issuableIid,
+        },
+        { received: this.received },
+      );
+    },
+    handleFetchResult({ data }) {
+      const { nodes } = data.project.issue.assignees;
+
+      const assignees = nodes.map(n => ({
+        ...n,
+        avatar_url: n.avatarUrl,
+        id: getIdFromGraphQLId(n.id),
+      }));
+
+      this.mediator.store.setAssigneesFromRealtime(assignees);
+    },
+  },
+  render() {
+    return this.$slots.default;
+  },
+};
+</script>
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
index ce592720531..0906d5abec3 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
@@ -3,8 +3,10 @@ import Flash from '~/flash';
 import eventHub from '~/sidebar/event_hub';
 import Store from '~/sidebar/stores/sidebar_store';
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import AssigneeTitle from './assignee_title.vue';
 import Assignees from './assignees.vue';
+import AssigneesRealtime from './assignees_realtime.vue';
 import { __ } from '~/locale';
 
 export default {
@@ -12,7 +14,9 @@ export default {
   components: {
     AssigneeTitle,
     Assignees,
+    AssigneesRealtime,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     mediator: {
       type: Object,
@@ -32,6 +36,14 @@ export default {
       required: false,
       default: 'issue',
     },
+    issuableIid: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -39,6 +51,12 @@ export default {
       loading: false,
     };
   },
+  computed: {
+    shouldEnableRealtime() {
+      // Note: Realtime is only available on issues right now, future support for MR wil be built later.
+      return this.glFeatures.realTimeIssueSidebar && this.issuableType === 'issue';
+    },
+  },
   created() {
     this.removeAssignee = this.store.removeAssignee.bind(this.store);
     this.addAssignee = this.store.addAssignee.bind(this.store);
@@ -84,6 +102,12 @@ export default {
 
 <template>
   <div>
+    <assignees-realtime
+      v-if="shouldEnableRealtime"
+      :issuable-iid="issuableIid"
+      :project-path="projectPath"
+      :mediator="mediator"
+    />
     <assignee-title
       :number-of-assignees="store.assignees.length"
       :loading="loading || store.isFetching.assignees"
diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index 6f8214b18ee..05d9ce240f3 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import SidebarTimeTracking from './components/time_tracking/sidebar_time_tracking.vue';
 import SidebarAssignees from './components/assignees/sidebar_assignees.vue';
 import ConfidentialIssueSidebar from './components/confidential/confidential_issue_sidebar.vue';
@@ -8,17 +9,28 @@ import LockIssueSidebar from './components/lock/lock_issue_sidebar.vue';
 import sidebarParticipants from './components/participants/sidebar_participants.vue';
 import sidebarSubscriptions from './components/subscriptions/sidebar_subscriptions.vue';
 import Translate from '../vue_shared/translate';
+import createDefaultClient from '~/lib/graphql';
 
 Vue.use(Translate);
+Vue.use(VueApollo);
+
+function getSidebarOptions() {
+  return JSON.parse(document.querySelector('.js-sidebar-options').innerHTML);
+}
 
 function mountAssigneesComponent(mediator) {
   const el = document.getElementById('js-vue-sidebar-assignees');
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(),
+  });
 
   if (!el) return;
 
+  const { iid, fullPath } = getSidebarOptions();
   // eslint-disable-next-line no-new
   new Vue({
     el,
+    apolloProvider,
     components: {
       SidebarAssignees,
     },
@@ -26,6 +38,8 @@ function mountAssigneesComponent(mediator) {
       createElement('sidebar-assignees', {
         props: {
           mediator,
+          issuableIid: String(iid),
+          projectPath: fullPath,
           field: el.dataset.field,
           signedIn: el.hasAttribute('data-signed-in'),
           issuableType: gl.utils.isInIssuePage() ? 'issue' : 'merge_request',
@@ -144,6 +158,4 @@ export function mountSidebar(mediator) {
   mountTimeTrackingComponent();
 }
 
-export function getSidebarOptions() {
-  return JSON.parse(document.querySelector('.js-sidebar-options').innerHTML);
-}
+export { getSidebarOptions };
diff --git a/app/assets/javascripts/sidebar/stores/sidebar_store.js b/app/assets/javascripts/sidebar/stores/sidebar_store.js
index 66f7f9e3c66..095f93b72a9 100644
--- a/app/assets/javascripts/sidebar/stores/sidebar_store.js
+++ b/app/assets/javascripts/sidebar/stores/sidebar_store.js
@@ -89,6 +89,10 @@ export default class SidebarStore {
     this.assignees = [];
   }
 
+  setAssigneesFromRealtime(data) {
+    this.assignees = data;
+  }
+
   setAutocompleteProjects(projects) {
     this.autocompleteProjects = projects;
   }